chore: add localization

This commit is contained in:
Jacob Overgaard
2024-05-23 21:29:52 +02:00
parent c0d8d8bfd4
commit 792ac7be44
2 changed files with 38 additions and 19 deletions

View File

@@ -1682,6 +1682,7 @@ export default {
elementDoesNotSupport: 'This is not applicable for an Element Type',
propertyHasChanges: 'You have made changes to this property. Are you sure you want to discard them?',
displaySettingsHeadline: 'Appearance',
displaySettingsLabelOnLeft: 'Label to the left',
displaySettingsLabelOnTop: 'Label above (full-width)',
confirmDeleteTabMessage: 'Are you sure you want to delete the tab <strong>%0%</strong>?',
confirmDeleteGroupMessage: 'Are you sure you want to delete the group <strong>%0%</strong>?',
@@ -2034,6 +2035,7 @@ export default {
},
validation: {
validation: 'Validation',
validateNothing: 'No validation',
validateAsEmail: 'Validate as an email address',
validateAsNumber: 'Validate as a number',
validateAsUrl: 'Validate as a URL',

View File

@@ -23,25 +23,25 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
// TODO: Or should they come from a extension point? [NL]
@state() private _customValidationOptions: Array<Option> = [
{
name: 'No validation',
name: this.localize.term('validation_validateNothing'),
value: '!NOVALIDATION!',
selected: true,
},
{
name: 'Validate as an email address',
name: this.localize.term('validation_validateAsEmail'),
value: '[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+',
},
{
name: 'Validate as a number',
name: this.localize.term('validation_validateAsNumber'),
value: '^[0-9]*$',
},
{
name: 'Validate as an URL',
name: this.localize.term('validation_validateAsUrl'),
value: 'https?://[a-zA-Z0-9-.]+\\.[a-zA-Z]{2,}',
},
{
name: '...or enter a custom validation',
value: '',
name: this.localize.term('validation_enterCustomValidation'),
value: '.+',
},
];
@@ -232,10 +232,10 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
<uui-input
id="name-input"
name="name"
label="property name (TODO: Localize)"
label=${this.localize.term('placeholders_entername')}
@input=${this.#onNameChange}
.value=${this.value.name}
placeholder="Enter a name..."
placeholder=${this.localize.term('placeholders_entername')}
${umbFocus()}>
<!-- TODO: validation for bad characters -->
</uui-input>
@@ -244,7 +244,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
name="alias"
@input=${this.#onAliasChange}
.value=${this.value.alias}
placeholder="Enter alias..."
label=${this.localize.term('placeholders_enterAlias')}
placeholder=${this.localize.term('placeholders_enterAlias')}
?disabled=${this._aliasLocked}>
<!-- TODO: validation for bad characters -->
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
@@ -255,7 +256,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
id="description-input"
name="description"
@input=${this.#onDescriptionChange}
placeholder="Enter description..."
label=${this.localize.term('placeholders_enterDescription')}
placeholder=${this.localize.term('placeholders_enterDescription')}
.value=${this.value.description}></uui-textarea>
</div>
<umb-data-type-flow-input
@@ -263,15 +265,19 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
<hr />
<div class="container">
<b>Validation</b>
<b><umb-localize key="validation_validation">Validation</umb-localize></b>
${this.#renderMandatory()}
<p style="margin-bottom: 0">Custom validation</p>
<p style="margin-bottom: 0">
<umb-localize key="validation_customValidation">Custom validation</umb-localize>
</p>
${this.#renderCustomValidation()}
</div>
<hr />
${this.#renderVariationControls()}
<div class="container">
<b style="margin-bottom: var(--uui-size-space-3)">Appearance</b>
<b style="margin-bottom: var(--uui-size-space-3)">
<umb-localize key="contentTypeEditor_displaySettingsHeadline">Appearance</umb-localize>
</b>
<div id="appearances">${this.#renderAlignLeftIcon()} ${this.#renderAlignTopIcon()}</div>
</div>
</uui-box>
@@ -299,7 +305,9 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
<rect x="106" width="94" height="60" rx="5" fill="currentColor" fill-opacity="0.4" />
</svg>
<label class="appearance-label"> Label on the left </label>
<label class="appearance-label">
<umb-localize key="contentTypeEditor_displaySettingsLabelOnLeft">Label to the left</umb-localize>
</label>
</button>`;
}
@@ -314,14 +322,18 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
<rect y="22" width="64" height="9" rx="4" fill="currentColor" fill-opacity="0.4" />
<rect y="42" width="140" height="36" rx="5" fill="currentColor" fill-opacity="0.4" />
</svg>
<label class="appearance-label"> Label on top </label>
<label class="appearance-label">
<umb-localize key="contentTypeEditor_displaySettingsLabelOnTop">Label above (full-width)</umb-localize>
</label>
</button>
`;
}
#renderMandatory() {
return html`<div style="display: flex; justify-content: space-between">
<label for="mandatory">Field is mandatory</label>
<label for="mandatory">
<umb-localize key="validation_fieldIsMandatory">Field is mandatory</umb-localize>
</label>
<uui-toggle
@change=${this.#onMandatoryChange}
id="mandatory"
@@ -335,7 +347,8 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
@change=${this.#onMandatoryMessageChange}
style="margin-top: var(--uui-size-space-1)"
id="mandatory-message"
placeholder="Enter a custom validation error message (optional)"></uui-input>`
placeholder=${this.localize.term('validation_mandatoryMessage')}
label=${this.localize.term('validation_mandatoryMessage')}></uui-input>`
: ''}`;
}
@@ -351,10 +364,14 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
name="pattern"
style="margin-bottom: var(--uui-size-space-1); margin-top: var(--uui-size-space-5);"
@change=${this.#onValidationRegExChange}
placeholder=${this.localize.term('validation_validationRegExp')}
label=${this.localize.term('validation_validationRegExp')}
.value=${this.value.validation?.regEx ?? ''}></uui-input>
<uui-textarea
name="pattern-message"
@change=${this.#onValidationMessageChange}
placeholder=${this.localize.term('validation_validationRegExpMessage')}
label=${this.localize.term('validation_validationRegExpMessage')}
.value=${this.value.validation?.regExMessage ?? ''}></uui-textarea>
`
: nothing} `;
@@ -363,7 +380,7 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
#renderVariationControls() {
return this._contentTypeVariesByCulture || this._contentTypeVariesBySegment
? html` <div class="container">
<b>Variation</b>
<b><umb-localize key="contentTypeEditor_variantsHeading">Allow variations</umb-localize></b>
${this._contentTypeVariesByCulture ? this.#renderVaryByCulture() : ''}
</div>
<hr />`
@@ -373,7 +390,7 @@ export class UmbPropertyTypeSettingsModalElement extends UmbModalBaseElement<
return html`<uui-toggle
@change=${this.#onVaryByCultureChange}
.checked=${this.value.variesByCulture ?? false}
label="Vary by culture"></uui-toggle> `;
label=${this.localize.term('contentTypeEditor_cultureVariantLabel')}></uui-toggle> `;
}
static styles = [