From 93f8b7720c948e8e5c6dd810d63efb0c6be4f047 Mon Sep 17 00:00:00 2001 From: Nitwel Date: Thu, 8 Apr 2021 22:36:55 +0200 Subject: [PATCH] Fix translations not working on displays, modules... (#4734) * generalyze extensions * replace vue-i18n tranlslations * replace vue-i18n tranlslations * add missing commas * replace translations recursive * restructure translate * remove unused i18n * remove unused i18n * remove unused i18n * Remove i18n context in define * Rename translate util file * Fix type errors Co-authored-by: rijkvanzanten --- app/src/components/v-form/v-form.vue | 27 +++-- app/src/displays/boolean/index.ts | 24 ++-- app/src/displays/collection/index.ts | 12 +- app/src/displays/color/index.ts | 10 +- app/src/displays/datetime/index.ts | 20 +-- app/src/displays/define.ts | 6 +- app/src/displays/file/index.ts | 8 +- app/src/displays/filesize/index.ts | 8 +- .../displays/formatted-json-value/index.ts | 10 +- app/src/displays/formatted-value/index.ts | 26 ++-- app/src/displays/icon/index.ts | 14 +-- app/src/displays/image/index.ts | 12 +- app/src/displays/index.ts | 3 +- app/src/displays/labels/index.ts | 32 ++--- app/src/displays/mime-type/index.ts | 12 +- app/src/displays/rating/index.ts | 12 +- app/src/displays/raw/index.ts | 6 +- app/src/displays/related-values/index.ts | 6 +- app/src/displays/types.ts | 13 +- app/src/displays/user/index.ts | 20 +-- .../interfaces/_system/collection/index.ts | 12 +- .../interfaces/_system/collections/index.ts | 12 +- .../_system/display-template/index.ts | 10 +- app/src/interfaces/_system/field/index.ts | 6 +- .../_system/interface-options/index.ts | 8 +- app/src/interfaces/_system/interface/index.ts | 8 +- .../_system/system-language/index.ts | 6 +- app/src/interfaces/button-links/index.ts | 34 +++--- app/src/interfaces/checkboxes/index.ts | 30 ++--- app/src/interfaces/code/index.ts | 16 +-- app/src/interfaces/color/index.ts | 18 +-- app/src/interfaces/datetime/index.ts | 12 +- app/src/interfaces/define.ts | 6 +- app/src/interfaces/divider/index.ts | 24 ++-- .../interfaces/dropdown-multiselect/index.ts | 34 +++--- app/src/interfaces/dropdown/index.ts | 34 +++--- app/src/interfaces/file/index.ts | 8 +- app/src/interfaces/files/index.ts | 8 +- app/src/interfaces/hash/index.ts | 16 +-- app/src/interfaces/icon/index.ts | 8 +- app/src/interfaces/image/index.ts | 8 +- app/src/interfaces/index.ts | 3 +- app/src/interfaces/m2a-builder/index.ts | 6 +- app/src/interfaces/many-to-many/index.ts | 8 +- app/src/interfaces/many-to-one/index.ts | 8 +- app/src/interfaces/markdown/index.ts | 36 +++--- app/src/interfaces/notice/index.ts | 27 ++--- app/src/interfaces/numeric/index.ts | 30 ++--- app/src/interfaces/one-to-many/index.ts | 8 +- app/src/interfaces/radio-buttons/index.ts | 24 ++-- app/src/interfaces/repeater/index.ts | 8 +- app/src/interfaces/slider/index.ts | 16 +-- app/src/interfaces/slug/index.ts | 16 +-- app/src/interfaces/tags/index.ts | 42 +++---- app/src/interfaces/text-input/index.ts | 36 +++--- app/src/interfaces/textarea/index.ts | 24 ++-- app/src/interfaces/toggle/index.ts | 20 +-- app/src/interfaces/translations/index.ts | 6 +- app/src/interfaces/tree-view/index.ts | 6 +- app/src/interfaces/types.ts | 9 +- app/src/interfaces/user/index.ts | 16 +-- app/src/interfaces/wysiwyg/index.ts | 114 +++++++++--------- app/src/layouts/cards/index.ts | 6 +- app/src/layouts/define.ts | 3 +- app/src/layouts/index.ts | 3 +- app/src/layouts/tabular/index.ts | 6 +- app/src/layouts/types.ts | 8 +- app/src/modules/activity/index.ts | 6 +- app/src/modules/collections/index.ts | 6 +- app/src/modules/define.ts | 8 +- app/src/modules/docs/index.ts | 4 +- app/src/modules/files/index.ts | 6 +- app/src/modules/index.ts | 3 +- app/src/modules/settings/index.ts | 6 +- app/src/modules/types.ts | 11 +- app/src/modules/users/index.ts | 6 +- app/src/utils/translate-object-values.ts | 23 ++++ 77 files changed, 592 insertions(+), 575 deletions(-) create mode 100644 app/src/utils/translate-object-values.ts diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue index f31665e085..2d1772009a 100644 --- a/app/src/components/v-form/v-form.vue +++ b/app/src/components/v-form/v-form.vue @@ -41,6 +41,7 @@ import marked from 'marked'; import FormField from './form-field.vue'; import useFormFields from '@/composables/use-form-fields'; import { ValidationError } from './types'; +import { translate } from '@/utils/translate-object-values'; type FieldValues = { [field: string]: any; @@ -142,19 +143,21 @@ export default defineComponent({ const { formFields } = useFormFields(fields); const formFieldsParsed = computed(() => { - return formFields.value.map((field: Field) => { - if ( - field.schema?.has_auto_increment === true || - (field.schema?.is_primary_key === true && props.primaryKey !== '+') - ) { - const fieldClone = cloneDeep(field) as any; - if (!fieldClone.meta) fieldClone.meta = {}; - fieldClone.meta.readonly = true; - return fieldClone; - } + return translate( + formFields.value.map((field: Field) => { + if ( + field.schema?.has_auto_increment === true || + (field.schema?.is_primary_key === true && props.primaryKey !== '+') + ) { + const fieldClone = cloneDeep(field) as any; + if (!fieldClone.meta) fieldClone.meta = {}; + fieldClone.meta.readonly = true; + return fieldClone; + } - return field; - }); + return field; + }) + ); }); const { width } = useElementSize(el); diff --git a/app/src/displays/boolean/index.ts b/app/src/displays/boolean/index.ts index 48a6984e0f..7b2abc5dcf 100644 --- a/app/src/displays/boolean/index.ts +++ b/app/src/displays/boolean/index.ts @@ -1,41 +1,41 @@ import { defineDisplay } from '@/displays/define'; import DisplayBoolean from './boolean.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'boolean', - name: i18n.t('displays.boolean.boolean'), - description: i18n.t('displays.boolean.description'), + name: '$t:displays.boolean.boolean', + description: '$t:displays.boolean.description', types: ['boolean'], icon: 'check_box', handler: DisplayBoolean, options: [ { field: 'labelOn', - name: i18n.t('displays.boolean.label_on'), + name: '$t:displays.boolean.label_on', type: 'string', meta: { interface: 'text-input', width: 'half', options: { - placeholder: i18n.t('displays.boolean.label_on_placeholder'), + placeholder: '$t:displays.boolean.label_on_placeholder', }, }, }, { field: 'labelOff', - name: i18n.t('displays.boolean.label_off'), + name: '$t:displays.boolean.label_off', type: 'string', meta: { interface: 'text-input', width: 'half', options: { - placeholder: i18n.t('displays.boolean.label_off_placeholder'), + placeholder: '$t:displays.boolean.label_off_placeholder', }, }, }, { field: 'iconOn', - name: i18n.t('displays.boolean.icon_on'), + name: '$t:displays.boolean.icon_on', type: 'string', meta: { interface: 'icon', @@ -47,7 +47,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'iconOff', - name: i18n.t('displays.boolean.icon_off'), + name: '$t:displays.boolean.icon_off', type: 'string', meta: { interface: 'icon', @@ -59,7 +59,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'colorOn', - name: i18n.t('displays.boolean.color_on'), + name: '$t:displays.boolean.color_on', type: 'string', meta: { interface: 'color', @@ -71,7 +71,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'colorOff', - name: i18n.t('displays.boolean.color_off'), + name: '$t:displays.boolean.color_off', type: 'string', meta: { interface: 'color', @@ -82,4 +82,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/collection/index.ts b/app/src/displays/collection/index.ts index c99fcdf7bf..ea0e90614b 100644 --- a/app/src/displays/collection/index.ts +++ b/app/src/displays/collection/index.ts @@ -1,22 +1,22 @@ import { defineDisplay } from '@/displays/define'; import DisplayCollection from './collection.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'collection', - name: i18n.t('displays.collection.collection'), - description: i18n.t('displays.collection.description'), + name: '$t:displays.collection.collection', + description: '$t:displays.collection.description', types: ['string'], icon: 'label', handler: DisplayCollection, options: [ { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'boolean', meta: { interface: 'toggle', options: { - label: i18n.t('displays.collection.icon_label'), + label: '$t:displays.collection.icon_label', }, }, schema: { @@ -24,4 +24,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/color/index.ts b/app/src/displays/color/index.ts index 80ea87ae1b..83c847f120 100644 --- a/app/src/displays/color/index.ts +++ b/app/src/displays/color/index.ts @@ -1,17 +1,17 @@ import { defineDisplay } from '@/displays/define'; import DisplayColor from './color.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'color', - name: i18n.t('displays.color.color'), - description: i18n.t('displays.color.description'), + name: '$t:displays.color.color', + description: '$t:displays.color.description', types: ['string'], icon: 'flag', handler: DisplayColor, options: [ { field: 'defaultColor', - name: i18n.t('displays.color.default_color'), + name: '$t:displays.color.default_color', type: 'string', meta: { interface: 'color', @@ -22,4 +22,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/datetime/index.ts b/app/src/displays/datetime/index.ts index 64976abbc3..6e162503db 100644 --- a/app/src/displays/datetime/index.ts +++ b/app/src/displays/datetime/index.ts @@ -1,28 +1,28 @@ import { defineDisplay } from '@/displays/define'; import DisplayDateTime from './datetime.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'datetime', - name: i18n.t('displays.datetime.datetime'), - description: i18n.t('displays.datetime.description'), + name: '$t:displays.datetime.datetime', + description: '$t:displays.datetime.description', icon: 'query_builder', handler: DisplayDateTime, options: [ { field: 'format', - name: i18n.t('displays.datetime.format'), + name: '$t:displays.datetime.format', type: 'string', meta: { interface: 'dropdown', width: 'half', options: { choices: [ - { text: i18n.t('displays.datetime.long'), value: 'long' }, - { text: i18n.t('displays.datetime.short'), value: 'short' }, + { text: '$t:displays.datetime.long', value: 'long' }, + { text: '$t:displays.datetime.short', value: 'short' }, ], allowOther: true, }, - note: i18n.t('displays.datetime.format_note'), + note: '$t:displays.datetime.format_note', }, schema: { default_value: 'long', @@ -30,13 +30,13 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'relative', - name: i18n.t('displays.datetime.relative'), + name: '$t:displays.datetime.relative', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.datetime.relative_label'), + label: '$t:displays.datetime.relative_label', }, }, schema: { @@ -45,4 +45,4 @@ export default defineDisplay(({ i18n }) => ({ }, ], types: ['dateTime', 'date', 'time', 'timestamp'], -})); +}); diff --git a/app/src/displays/define.ts b/app/src/displays/define.ts index 3a884ffafc..fbc44dde54 100644 --- a/app/src/displays/define.ts +++ b/app/src/displays/define.ts @@ -1,12 +1,10 @@ -import { i18n } from '@/lang'; -import { DisplayDefineParam, DisplayContext, DisplayConfig } from './types'; +import { DisplayDefineParam, DisplayConfig } from './types'; export function defineDisplay(config: DisplayDefineParam): DisplayConfig { let options: DisplayConfig; if (typeof config === 'function') { - const context: DisplayContext = { i18n }; - options = config(context); + options = config(); } else { options = config; } diff --git a/app/src/displays/file/index.ts b/app/src/displays/file/index.ts index b05655ad6b..3f3fbace1f 100644 --- a/app/src/displays/file/index.ts +++ b/app/src/displays/file/index.ts @@ -1,13 +1,13 @@ import { defineDisplay } from '@/displays/define'; import DisplayFile from './file.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'file', - name: i18n.t('displays.file.file'), - description: i18n.t('displays.file.description'), + name: '$t:displays.file.file', + description: '$t:displays.file.description', icon: 'insert_drive_file', handler: DisplayFile, types: ['uuid'], options: [], fields: ['data', 'type', 'title'], -})); +}); diff --git a/app/src/displays/filesize/index.ts b/app/src/displays/filesize/index.ts index a89af12565..0980c6edca 100644 --- a/app/src/displays/filesize/index.ts +++ b/app/src/displays/filesize/index.ts @@ -1,12 +1,12 @@ import { defineDisplay } from '@/displays/define'; import handler from './handler'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'filesize', - name: i18n.t('displays.filesize.filesize'), - description: i18n.t('displays.filesize.description'), + name: '$t:displays.filesize.filesize', + description: '$t:displays.filesize.description', icon: 'description', handler: handler, options: [], types: ['integer'], -})); +}); diff --git a/app/src/displays/formatted-json-value/index.ts b/app/src/displays/formatted-json-value/index.ts index 6cff4e7280..31cc8488bb 100644 --- a/app/src/displays/formatted-json-value/index.ts +++ b/app/src/displays/formatted-json-value/index.ts @@ -1,17 +1,17 @@ import { defineDisplay } from '@/displays/define'; import DisplayJsonValue from './formatted-json-value.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'formatted-json-value', - name: i18n.t('displays.formatted-json-value.formatted-json-value'), - description: i18n.t('displays.formatted-json-value.description'), + name: '$t:displays.formatted-json-value.formatted-json-value', + description: '$t:displays.formatted-json-value.description', types: ['json'], icon: 'settings_ethernet', handler: DisplayJsonValue, options: [ { field: 'format', - name: i18n.t('display_template'), + name: '$t:display_template', type: 'string', meta: { width: 'full', @@ -22,4 +22,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/formatted-value/index.ts b/app/src/displays/formatted-value/index.ts index 17574b8a05..6081c281d7 100644 --- a/app/src/displays/formatted-value/index.ts +++ b/app/src/displays/formatted-value/index.ts @@ -1,23 +1,23 @@ import { defineDisplay } from '@/displays/define'; import DisplayFormattedValue from './formatted-value.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'formatted-value', - name: i18n.t('displays.formatted-value.formatted-value'), - description: i18n.t('displays.formatted-value.description'), + name: '$t:displays.formatted-value.formatted-value', + description: '$t:displays.formatted-value.description', types: ['string', 'text', 'integer', 'float', 'decimal', 'bigInteger'], icon: 'text_format', handler: DisplayFormattedValue, options: [ { field: 'formatTitle', - name: i18n.t('displays.formatted-value.format_title'), + name: '$t:displays.formatted-value.format_title', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.formatted-value.format_title_label'), + label: '$t:displays.formatted-value.format_title_label', }, }, schema: { @@ -26,13 +26,13 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'bold', - name: i18n.t('bold'), + name: '$t:bold', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.formatted-value.bold_label'), + label: '$t:displays.formatted-value.bold_label', }, }, schema: { @@ -41,7 +41,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'color', - name: i18n.t('color'), + name: '$t:color', meta: { width: 'half', interface: 'color', @@ -49,15 +49,15 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'font', - name: i18n.t('font'), + name: '$t:font', meta: { width: 'half', interface: 'dropdown', options: { choices: [ - { text: i18n.t('sans_serif'), value: 'sans-serif' }, - { text: i18n.t('serif'), value: 'serif' }, - { text: i18n.t('monospace'), value: 'monospace' }, + { text: '$t:sans_serif', value: 'sans-serif' }, + { text: '$t:serif', value: 'serif' }, + { text: '$t:monospace', value: 'monospace' }, ], }, }, @@ -66,4 +66,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/icon/index.ts b/app/src/displays/icon/index.ts index e3c61b4835..73ee88d70b 100644 --- a/app/src/displays/icon/index.ts +++ b/app/src/displays/icon/index.ts @@ -1,22 +1,22 @@ import { defineDisplay } from '@/displays/define'; import DisplayIcon from './icon.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'icon', - name: i18n.t('displays.icon.icon'), - description: i18n.t('displays.icon.description'), + name: '$t:displays.icon.icon', + description: '$t:displays.icon.description', icon: 'insert_emoticon', handler: DisplayIcon, options: [ { field: 'filled', - name: i18n.t('displays.icon.filled'), + name: '$t:displays.icon.filled', type: 'boolean', meta: { interface: 'toggle', width: 'half', options: { - label: i18n.t('displays.icon.filled_label'), + label: '$t:displays.icon.filled_label', }, }, schema: { @@ -25,7 +25,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { interface: 'color', @@ -34,4 +34,4 @@ export default defineDisplay(({ i18n }) => ({ }, ], types: ['string'], -})); +}); diff --git a/app/src/displays/image/index.ts b/app/src/displays/image/index.ts index d615b55ae9..38a3af5129 100644 --- a/app/src/displays/image/index.ts +++ b/app/src/displays/image/index.ts @@ -1,23 +1,23 @@ import { defineDisplay } from '@/displays/define'; import DisplayImage from './image.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'image', - name: i18n.t('displays.image.image'), - description: i18n.t('displays.image.description'), + name: '$t:displays.image.image', + description: '$t:displays.image.description', types: ['uuid'], icon: 'insert_photo', handler: DisplayImage, options: [ { field: 'circle', - name: i18n.t('displays.image.circle'), + name: '$t:displays.image.circle', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.image.circle_label'), + label: '$t:displays.image.circle_label', }, }, schema: { @@ -26,4 +26,4 @@ export default defineDisplay(({ i18n }) => ({ }, ], fields: ['id', 'type', 'title'], -})); +}); diff --git a/app/src/displays/index.ts b/app/src/displays/index.ts index fd6f470def..a7b253d5a0 100644 --- a/app/src/displays/index.ts +++ b/app/src/displays/index.ts @@ -1,3 +1,4 @@ +import { translateReactive } from '@/utils/translate-object-values'; import { ref, Ref } from '@vue/composition-api'; import { DisplayConfig } from './types'; @@ -8,5 +9,5 @@ export function getDisplays() { displays = ref([]); } - return displays; + return translateReactive(displays); } diff --git a/app/src/displays/labels/index.ts b/app/src/displays/labels/index.ts index 131578092d..a04442cfb6 100644 --- a/app/src/displays/labels/index.ts +++ b/app/src/displays/labels/index.ts @@ -1,17 +1,17 @@ import { defineDisplay } from '@/displays/define'; import DisplayLabels from './labels.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'labels', - name: i18n.t('displays.labels.labels'), - description: i18n.t('displays.labels.description'), + name: '$t:displays.labels.labels', + description: '$t:displays.labels.description', types: ['string', 'json', 'csv'], icon: 'flag', handler: DisplayLabels, options: [ { field: 'defaultForeground', - name: i18n.t('displays.labels.default_foreground'), + name: '$t:displays.labels.default_foreground', type: 'string', meta: { interface: 'color', @@ -23,7 +23,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'defaultBackground', - name: i18n.t('displays.labels.default_background'), + name: '$t:displays.labels.default_background', type: 'string', meta: { interface: 'color', @@ -35,13 +35,13 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'format', - name: i18n.t('format_text'), + name: '$t:format_text', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.labels.format_label'), + label: '$t:displays.labels.format_label', }, }, schema: { @@ -50,7 +50,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'showAsDot', - name: i18n.t('displays.labels.show_as_dot'), + name: '$t:displays.labels.show_as_dot', type: 'boolean', meta: { width: 'half', @@ -62,7 +62,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'choices', - name: i18n.t('choices'), + name: '$t:choices', type: 'json', meta: { interface: 'repeater', @@ -71,32 +71,32 @@ export default defineDisplay(({ i18n }) => ({ fields: [ { field: 'text', - name: i18n.t('text'), + name: '$t:text', type: 'string', meta: { interface: 'text-input', width: 'half', options: { - placeholder: i18n.t('displays.labels.choices_text_placeholder'), + placeholder: '$t:displays.labels.choices_text_placeholder', }, }, }, { field: 'value', - name: i18n.t('value'), + name: '$t:value', type: 'string', meta: { interface: 'text-input', options: { font: 'monospace', - placeholder: i18n.t('displays.labels.choices_value_placeholder'), + placeholder: '$t:displays.labels.choices_value_placeholder', }, width: 'half', }, }, { field: 'foreground', - name: i18n.t('foreground_color'), + name: '$t:foreground_color', type: 'string', meta: { interface: 'color', @@ -105,7 +105,7 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'background', - name: i18n.t('background_color'), + name: '$t:background_color', type: 'string', meta: { interface: 'color', @@ -117,4 +117,4 @@ export default defineDisplay(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/displays/mime-type/index.ts b/app/src/displays/mime-type/index.ts index 6a082e6317..2464edd55f 100644 --- a/app/src/displays/mime-type/index.ts +++ b/app/src/displays/mime-type/index.ts @@ -2,20 +2,20 @@ import readableMimeType from '@/utils/readable-mime-type'; import { extension } from 'mime-types'; import { defineDisplay } from '@/displays/define'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'mime-type', - name: i18n.t('displays.mime-type.mime-type'), - description: i18n.t('displays.mime-type.description'), + name: '$t:displays.mime-type.mime-type', + description: '$t:displays.mime-type.description', icon: 'picture_as_pdf', options: [ { field: 'showAsExtension', - name: i18n.t('displays.mime-type.extension_only'), + name: '$t:displays.mime-type.extension_only', type: 'boolean', meta: { interface: 'toggle', options: { - label: i18n.t('displays.mime-type.extension_only_label'), + label: '$t:displays.mime-type.extension_only_label', }, }, schema: { @@ -31,4 +31,4 @@ export default defineDisplay(({ i18n }) => ({ return readableMimeType(value); }, -})); +}); diff --git a/app/src/displays/rating/index.ts b/app/src/displays/rating/index.ts index 30865c7bec..11fd20da65 100644 --- a/app/src/displays/rating/index.ts +++ b/app/src/displays/rating/index.ts @@ -1,22 +1,22 @@ import { defineDisplay } from '@/displays/define'; import DisplayRating from './rating.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'rating', - name: i18n.t('displays.rating.rating'), - description: i18n.t('displays.rating.description'), + name: '$t:displays.rating.rating', + description: '$t:displays.rating.description', icon: 'star', handler: DisplayRating, options: [ { field: 'simple', - name: i18n.t('displays.rating.simple'), + name: '$t:displays.rating.simple', type: 'boolean', meta: { interface: 'toggle', width: 'half', options: { - label: i18n.t('displays.rating.simple_label'), + label: '$t:displays.rating.simple_label', }, }, schema: { @@ -25,4 +25,4 @@ export default defineDisplay(({ i18n }) => ({ }, ], types: ['integer', 'decimal', 'float'], -})); +}); diff --git a/app/src/displays/raw/index.ts b/app/src/displays/raw/index.ts index 8e16227258..9a0b2d863d 100644 --- a/app/src/displays/raw/index.ts +++ b/app/src/displays/raw/index.ts @@ -1,11 +1,11 @@ import { defineDisplay } from '@/displays/define'; import { types } from '@/types'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'raw', - name: i18n.t('displays.raw.raw'), + name: '$t:displays.raw.raw', icon: 'code', handler: (value) => value, options: [], types: types, -})); +}); diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts index a5db0238a4..c90e229708 100644 --- a/app/src/displays/related-values/index.ts +++ b/app/src/displays/related-values/index.ts @@ -11,10 +11,10 @@ type Options = { template: string; }; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay(() => ({ id: 'related-values', - name: i18n.t('displays.related-values.related-values'), - description: i18n.t('displays.related-values.description'), + name: '$t:displays.related-values.related-values', + description: '$t:displays.related-values.description', icon: 'settings_ethernet', handler: DisplayRelatedValues, options: options, diff --git a/app/src/displays/types.ts b/app/src/displays/types.ts index e660339b70..b03a742212 100644 --- a/app/src/displays/types.ts +++ b/app/src/displays/types.ts @@ -1,4 +1,3 @@ -import VueI18n from 'vue-i18n'; import { Component } from 'vue'; import { Field, localTypes, types } from '@/types'; @@ -21,19 +20,17 @@ export type DisplayFieldsFunction = ( } ) => string[]; -export type DisplayConfig = { +export interface DisplayConfig { id: string; + name: string; icon: string; - name: string | VueI18n.TranslateResult; - description?: string | VueI18n.TranslateResult; + description?: string; handler: DisplayHandlerFunction | Component; options: null | DeepPartial[] | Component; types: readonly typeof types[number][]; groups?: readonly typeof localTypes[number][]; fields?: string[] | DisplayFieldsFunction; -}; +} -export type DisplayContext = { i18n: VueI18n }; - -export type DisplayDefineParam = DisplayConfig | ((context: DisplayContext) => DisplayConfig); +export type DisplayDefineParam = DisplayConfig | (() => DisplayConfig); diff --git a/app/src/displays/user/index.ts b/app/src/displays/user/index.ts index e28bf7f634..688d95ae5b 100644 --- a/app/src/displays/user/index.ts +++ b/app/src/displays/user/index.ts @@ -1,17 +1,17 @@ import { defineDisplay } from '@/displays/define'; import DisplayUser from './user.vue'; -export default defineDisplay(({ i18n }) => ({ +export default defineDisplay({ id: 'user', - name: i18n.t('displays.user.user'), - description: i18n.t('displays.user.description'), + name: '$t:displays.user.user', + description: '$t:displays.user.description', types: ['uuid'], icon: 'person', handler: DisplayUser, options: [ { field: 'display', - name: i18n.t('display'), + name: '$t:display', type: 'string', meta: { width: 'half', @@ -19,15 +19,15 @@ export default defineDisplay(({ i18n }) => ({ options: { choices: [ { - text: i18n.t('displays.user.avatar'), + text: '$t:displays.user.avatar', value: 'avatar', }, { - text: i18n.t('displays.user.name'), + text: '$t:displays.user.name', value: 'name', }, { - text: i18n.t('displays.user.both'), + text: '$t:displays.user.both', value: 'both', }, ], @@ -39,13 +39,13 @@ export default defineDisplay(({ i18n }) => ({ }, { field: 'circle', - name: i18n.t('circle'), + name: '$t:circle', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('displays.user.circle_label'), + label: '$t:displays.user.circle_label', }, }, schema: { @@ -54,4 +54,4 @@ export default defineDisplay(({ i18n }) => ({ }, ], fields: ['id', 'avatar.id', 'email', 'first_name', 'last_name'], -})); +}); diff --git a/app/src/interfaces/_system/collection/index.ts b/app/src/interfaces/_system/collection/index.ts index 99bb3c673c..6b1d35c8d8 100644 --- a/app/src/interfaces/_system/collection/index.ts +++ b/app/src/interfaces/_system/collection/index.ts @@ -1,23 +1,23 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceCollection from './collection.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'collection', - name: i18n.t('interfaces.collection.collection'), - description: i18n.t('interfaces.collection.description'), + name: '$t:interfaces.collection.collection', + description: '$t:interfaces.collection.description', icon: 'featured_play_list', component: InterfaceCollection, types: ['string'], options: [ { field: 'includeSystem', - name: i18n.t('system'), + name: '$t:system', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.collection.include_system_collections'), + label: '$t:interfaces.collection.include_system_collections', }, }, schema: { @@ -27,4 +27,4 @@ export default defineInterface(({ i18n }) => ({ ], system: true, recommendedDisplays: ['collection'], -})); +}); diff --git a/app/src/interfaces/_system/collections/index.ts b/app/src/interfaces/_system/collections/index.ts index 8d21692cbb..a84803735e 100644 --- a/app/src/interfaces/_system/collections/index.ts +++ b/app/src/interfaces/_system/collections/index.ts @@ -1,23 +1,23 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceCollections from './collections.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'collections', - name: i18n.t('interfaces.collections.collections'), - description: i18n.t('interfaces.collections.description'), + name: '$t:interfaces.collections.collections', + description: '$t:interfaces.collections.description', icon: 'featured_play_list', component: InterfaceCollections, types: ['json', 'csv'], options: [ { field: 'includeSystem', - name: i18n.t('system'), + name: '$t:system', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.collections.include_system_collections'), + label: '$t:interfaces.collections.include_system_collections', }, }, schema: { @@ -27,4 +27,4 @@ export default defineInterface(({ i18n }) => ({ ], system: true, recommendedDisplays: ['labels'], -})); +}); diff --git a/app/src/interfaces/_system/display-template/index.ts b/app/src/interfaces/_system/display-template/index.ts index 4966d17cd2..edd3f43ee8 100644 --- a/app/src/interfaces/_system/display-template/index.ts +++ b/app/src/interfaces/_system/display-template/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceDisplayTemplate from './display-template.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'display-template', - name: i18n.t('interfaces.display-template.display-template'), - description: i18n.t('interfaces.display-template.description'), + name: '$t:interfaces.display-template.display-template', + description: '$t:interfaces.display-template.description', icon: 'arrow_drop_down_circle', component: InterfaceDisplayTemplate, types: ['string'], @@ -12,7 +12,7 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'collectionField', - name: i18n.t('interfaces.display-template.collection_field'), + name: '$t:interfaces.display-template.collection_field', type: 'string', meta: { width: 'full', @@ -23,4 +23,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/_system/field/index.ts b/app/src/interfaces/_system/field/index.ts index 43c2772bcf..ab8a4110c3 100644 --- a/app/src/interfaces/_system/field/index.ts +++ b/app/src/interfaces/_system/field/index.ts @@ -1,12 +1,12 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceField from './field.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'field', - name: i18n.t('field'), + name: '$t:field', icon: 'box', component: InterfaceField, types: ['string'], options: [], system: true, -})); +}); diff --git a/app/src/interfaces/_system/interface-options/index.ts b/app/src/interfaces/_system/interface-options/index.ts index 0cfabaffc5..57ffc3764f 100644 --- a/app/src/interfaces/_system/interface-options/index.ts +++ b/app/src/interfaces/_system/interface-options/index.ts @@ -1,13 +1,13 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceOptions from './interface-options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'interface-options', - name: i18n.t('interfaces.interface-options.interface-options'), - description: i18n.t('interfaces.interface-options.description'), + name: '$t:interfaces.interface-options.interface-options', + description: '$t:interfaces.interface-options.description', icon: 'box', component: InterfaceOptions, types: ['string'], options: [], system: true, -})); +}); diff --git a/app/src/interfaces/_system/interface/index.ts b/app/src/interfaces/_system/interface/index.ts index 80c2786845..0788d96abb 100644 --- a/app/src/interfaces/_system/interface/index.ts +++ b/app/src/interfaces/_system/interface/index.ts @@ -1,13 +1,13 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceInterface from './interface.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'interface', - name: i18n.t('interfaces.interface.interface'), - description: i18n.t('interfaces.interface.description'), + name: '$t:interfaces.interface.interface', + description: '$t:interfaces.interface.description', icon: 'box', component: InterfaceInterface, types: ['string'], system: true, options: [], -})); +}); diff --git a/app/src/interfaces/_system/system-language/index.ts b/app/src/interfaces/_system/system-language/index.ts index ff67cfdf90..65a240da89 100644 --- a/app/src/interfaces/_system/system-language/index.ts +++ b/app/src/interfaces/_system/system-language/index.ts @@ -1,12 +1,12 @@ import InterfaceSystemLanguage from './system-language.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'system-language', - name: i18n.t('language'), + name: '$t:language', icon: 'translate', component: InterfaceSystemLanguage, system: true, types: ['string'], options: [], -})); +}); diff --git a/app/src/interfaces/button-links/index.ts b/app/src/interfaces/button-links/index.ts index 8fee701dca..2bf883d1e7 100644 --- a/app/src/interfaces/button-links/index.ts +++ b/app/src/interfaces/button-links/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceButtonLinks from './button-links.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'button-links', - name: i18n.t('interfaces.button-links.button-links'), - description: i18n.t('interfaces.button-links.description'), + name: '$t:interfaces.button-links.button-links', + description: '$t:interfaces.button-links.description', icon: 'smart_button', component: InterfaceButtonLinks, hideLabel: true, @@ -15,29 +15,29 @@ export default defineInterface(({ i18n }) => ({ { field: 'links', type: 'json', - name: i18n.t('interfaces.button-links.links'), + name: '$t:interfaces.button-links.links', meta: { width: 'full', interface: 'repeater', options: { - placeholder: i18n.t('title'), + placeholder: '$t:title', template: '{{ label }}', fields: [ { field: 'label', type: 'string', - name: i18n.t('label'), + name: '$t:label', meta: { width: 'full', interface: 'text-input', options: { - placeholder: i18n.t('label'), + placeholder: '$t:label', }, }, }, { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'string', meta: { width: 'half', @@ -46,7 +46,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'type', - name: i18n.t('type'), + name: '$t:type', type: 'string', meta: { width: 'half', @@ -54,12 +54,12 @@ export default defineInterface(({ i18n }) => ({ default_value: 'normal', options: { choices: [ - { text: i18n.t('primary'), value: 'primary' }, - { text: i18n.t('normal'), value: 'normal' }, - { text: i18n.t('info'), value: 'info' }, - { text: i18n.t('success'), value: 'success' }, - { text: i18n.t('warning'), value: 'warning' }, - { text: i18n.t('danger'), value: 'danger' }, + { text: '$t:primary', value: 'primary' }, + { text: '$t:normal', value: 'normal' }, + { text: '$t:info', value: 'info' }, + { text: '$t:success', value: 'success' }, + { text: '$t:warning', value: 'warning' }, + { text: '$t:danger', value: 'danger' }, ], }, }, @@ -70,7 +70,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'url', type: 'string', - name: i18n.t('url'), + name: '$t:url', meta: { width: 'full', interface: 'text-input', @@ -85,4 +85,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/checkboxes/index.ts b/app/src/interfaces/checkboxes/index.ts index 3a4133d7d8..0d6c4ea36e 100644 --- a/app/src/interfaces/checkboxes/index.ts +++ b/app/src/interfaces/checkboxes/index.ts @@ -1,18 +1,18 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceCheckboxes from './checkboxes.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'checkboxes', - name: i18n.t('interfaces.checkboxes.checkboxes'), + name: '$t:interfaces.checkboxes.checkboxes', icon: 'check_box', component: InterfaceCheckboxes, - description: i18n.t('interfaces.checkboxes.description'), + description: '$t:interfaces.checkboxes.description', types: ['json', 'csv'], options: [ { field: 'choices', type: 'json', - name: i18n.t('choices'), + name: '$t:choices', meta: { width: 'full', interface: 'repeater', @@ -22,25 +22,25 @@ export default defineInterface(({ i18n }) => ({ { field: 'text', type: 'string', - name: i18n.t('text'), + name: '$t:text', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('interfaces.dropdown.choices_name_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_name_placeholder', }, }, }, { field: 'value', type: 'string', - name: i18n.t('value'), + name: '$t:value', meta: { width: 'half', interface: 'text-input', options: { font: 'monospace', - placeholder: i18n.t('interfaces.dropdown.choices_name_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_name_placeholder', }, }, }, @@ -50,13 +50,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowOther', - name: i18n.t('interfaces.checkboxes.allow_other'), + name: '$t:interfaces.checkboxes.allow_other', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('enable_custom_values'), + label: '$t:enable_custom_values', }, }, schema: { @@ -65,7 +65,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { width: 'half', @@ -77,7 +77,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconOn', - name: i18n.t('icon_on'), + name: '$t:icon_on', type: 'string', meta: { width: 'half', @@ -89,7 +89,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconOff', - name: i18n.t('icon_off'), + name: '$t:icon_off', type: 'string', meta: { width: 'half', @@ -101,7 +101,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'itemsShown', - name: i18n.t('interfaces.checkboxes.items_shown'), + name: '$t:interfaces.checkboxes.items_shown', type: 'integer', meta: { width: 'half', @@ -113,4 +113,4 @@ export default defineInterface(({ i18n }) => ({ }, ], recommendedDisplays: ['labels'], -})); +}); diff --git a/app/src/interfaces/code/index.ts b/app/src/interfaces/code/index.ts index fdeb7dd32f..452d2ff731 100644 --- a/app/src/interfaces/code/index.ts +++ b/app/src/interfaces/code/index.ts @@ -27,17 +27,17 @@ const choices = Object.entries(choicesMap).map(([key, value]) => ({ value: key, })); -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'code', - name: i18n.t('interfaces.code.code'), - description: i18n.t('interfaces.code.description'), + name: '$t:interfaces.code.code', + description: '$t:interfaces.code.description', icon: 'code', component: InterfaceCode, types: ['string', 'json', 'text'], options: [ { field: 'language', - name: i18n.t('language'), + name: '$t:language', type: 'string', meta: { width: 'half', @@ -47,7 +47,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'lineNumber', - name: i18n.t('interfaces.code.line_number'), + name: '$t:interfaces.code.line_number', type: 'boolean', meta: { width: 'half', @@ -59,13 +59,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'template', - name: i18n.t('template'), + name: '$t:template', type: 'text', meta: { width: 'full', interface: 'code', options: { - placeholder: i18n.t('interfaces.code.placeholder'), + placeholder: '$t:interfaces.code.placeholder', }, }, schema: { @@ -73,4 +73,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/color/index.ts b/app/src/interfaces/color/index.ts index 6f506ac51a..3d3f48f988 100644 --- a/app/src/interfaces/color/index.ts +++ b/app/src/interfaces/color/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceColor from './color.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'color', - name: i18n.t('interfaces.color.color'), - description: i18n.t('interfaces.color.description'), + name: '$t:interfaces.color.color', + description: '$t:interfaces.color.description', icon: 'palette', component: InterfaceColor, types: ['string'], @@ -12,31 +12,31 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'presets', - name: i18n.t('interfaces.color.preset_colors'), + name: '$t:interfaces.color.preset_colors', type: 'string', meta: { width: 'full', interface: 'repeater', options: { - addLabel: i18n.t('interfaces.color.preset_colors_add_label'), + addLabel: '$t:interfaces.color.preset_colors_add_label', template: '{{ name }} - {{ color }}', fields: [ { field: 'name', type: 'string', - name: i18n.t('name'), + name: '$t:name', meta: { interface: 'text-input', width: 'half', options: { - placeholder: i18n.t('interfaces.color.name_placeholder'), + placeholder: '$t:interfaces.color.name_placeholder', }, }, }, { field: 'color', type: 'string', - name: i18n.t('color'), + name: '$t:color', meta: { interface: 'color', width: 'half', @@ -47,4 +47,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/datetime/index.ts b/app/src/interfaces/datetime/index.ts index 72d62c1209..d8844f58ba 100644 --- a/app/src/interfaces/datetime/index.ts +++ b/app/src/interfaces/datetime/index.ts @@ -1,17 +1,17 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceDateTime from './datetime.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'datetime', - name: i18n.t('interfaces.datetime.datetime'), - description: i18n.t('interfaces.datetime.description'), + name: '$t:interfaces.datetime.datetime', + description: '$t:interfaces.datetime.description', icon: 'today', component: InterfaceDateTime, types: ['dateTime', 'date', 'time', 'timestamp'], options: [ { field: 'includeSeconds', - name: i18n.t('interfaces.datetime.include_seconds'), + name: '$t:interfaces.datetime.include_seconds', type: 'boolean', meta: { width: 'half', @@ -23,7 +23,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'use24', - name: i18n.t('interfaces.datetime.use_24'), + name: '$t:interfaces.datetime.use_24', type: 'boolean', meta: { width: 'half', @@ -35,4 +35,4 @@ export default defineInterface(({ i18n }) => ({ }, ], recommendedDisplays: ['datetime'], -})); +}); diff --git a/app/src/interfaces/define.ts b/app/src/interfaces/define.ts index 58d483dcfb..9bcec1e78a 100644 --- a/app/src/interfaces/define.ts +++ b/app/src/interfaces/define.ts @@ -1,12 +1,10 @@ -import { i18n } from '@/lang'; -import { InterfaceDefineParam, InterfaceContext, InterfaceConfig } from './types'; +import { InterfaceDefineParam, InterfaceConfig } from './types'; export function defineInterface(config: InterfaceDefineParam): InterfaceConfig { let options: InterfaceConfig; if (typeof config === 'function') { - const context: InterfaceContext = { i18n }; - options = config(context); + options = config(); } else { options = config; } diff --git a/app/src/interfaces/divider/index.ts b/app/src/interfaces/divider/index.ts index 0c04a848d7..e7e93255d4 100644 --- a/app/src/interfaces/divider/index.ts +++ b/app/src/interfaces/divider/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceDivider from './divider.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'divider', - name: i18n.t('interfaces.divider.divider'), - description: i18n.t('interfaces.divider.description'), + name: '$t:interfaces.divider.divider', + description: '$t:interfaces.divider.description', icon: 'remove', component: InterfaceDivider, hideLabel: true, @@ -14,7 +14,7 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { width: 'half', @@ -23,7 +23,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'string', meta: { width: 'half', @@ -32,25 +32,25 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'title', - name: i18n.t('title'), + name: '$t:title', type: 'string', meta: { width: 'full', interface: 'text-input', options: { - placeholder: i18n.t('interfaces.divider.title_placeholder'), + placeholder: '$t:interfaces.divider.title_placeholder', }, }, }, { field: 'marginTop', - name: i18n.t('interfaces.divider.margin_top'), + name: '$t:interfaces.divider.margin_top', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.divider.margin_top_label'), + label: '$t:interfaces.divider.margin_top_label', }, }, schema: { @@ -59,13 +59,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'inlineTitle', - name: i18n.t('interfaces.divider.inline_title'), + name: '$t:interfaces.divider.inline_title', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.divider.inline_title_label'), + label: '$t:interfaces.divider.inline_title_label', }, }, schema: { @@ -73,4 +73,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/dropdown-multiselect/index.ts b/app/src/interfaces/dropdown-multiselect/index.ts index ad97190ea8..0c16e2803e 100644 --- a/app/src/interfaces/dropdown-multiselect/index.ts +++ b/app/src/interfaces/dropdown-multiselect/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceDropdownMultiselect from './dropdown-multiselect.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'dropdown-multiselect', - name: i18n.t('interfaces.dropdown-multiselect.dropdown-multiselect'), - description: i18n.t('interfaces.dropdown-multiselect.description'), + name: '$t:interfaces.dropdown-multiselect.dropdown-multiselect', + description: '$t:interfaces.dropdown-multiselect.description', icon: 'arrow_drop_down_circle', component: InterfaceDropdownMultiselect, types: ['json', 'csv'], @@ -12,36 +12,36 @@ export default defineInterface(({ i18n }) => ({ { field: 'choices', type: 'json', - name: i18n.t('choices'), + name: '$t:choices', meta: { width: 'full', interface: 'repeater', options: { - placeholder: i18n.t('interfaces.dropdown.choices_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_placeholder', template: '{{ text }}', fields: [ { field: 'text', type: 'string', - name: i18n.t('text'), + name: '$t:text', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('interfaces.dropdown.choices_name_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_name_placeholder', }, }, }, { field: 'value', type: 'string', - name: i18n.t('value'), + name: '$t:value', meta: { width: 'half', interface: 'text-input', options: { font: 'monospace', - placeholder: i18n.t('interfaces.dropdown.choices_value_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_value_placeholder', }, }, }, @@ -51,13 +51,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowOther', - name: i18n.t('interfaces.dropdown.allow_other'), + name: '$t:interfaces.dropdown.allow_other', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_other_label'), + label: '$t:interfaces.dropdown.allow_other_label', }, }, schema: { @@ -66,13 +66,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowNone', - name: i18n.t('interfaces.dropdown.allow_none'), + name: '$t:interfaces.dropdown.allow_none', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_none_label'), + label: '$t:interfaces.dropdown.allow_none_label', }, }, schema: { @@ -81,19 +81,19 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'string', meta: { width: 'half', @@ -102,4 +102,4 @@ export default defineInterface(({ i18n }) => ({ }, ], recommendedDisplays: ['labels'], -})); +}); diff --git a/app/src/interfaces/dropdown/index.ts b/app/src/interfaces/dropdown/index.ts index 27ebd7e738..04652e76d6 100644 --- a/app/src/interfaces/dropdown/index.ts +++ b/app/src/interfaces/dropdown/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceDropdown from './dropdown.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'dropdown', - name: i18n.t('dropdown'), - description: i18n.t('interfaces.dropdown.description'), + name: '$t:dropdown', + description: '$t:interfaces.dropdown.description', icon: 'arrow_drop_down_circle', component: InterfaceDropdown, types: ['string'], @@ -12,35 +12,35 @@ export default defineInterface(({ i18n }) => ({ { field: 'choices', type: 'json', - name: i18n.t('choices'), + name: '$t:choices', meta: { width: 'full', interface: 'repeater', options: { - placeholder: i18n.t('interfaces.dropdown.choices_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_placeholder', template: '{{ text }}', fields: [ { field: 'text', type: 'string', - name: i18n.t('text'), + name: '$t:text', meta: { interface: 'text-input', width: 'half', options: { - placeholder: i18n.t('interfaces.dropdown.choices_name_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_name_placeholder', }, }, }, { field: 'value', type: 'string', - name: i18n.t('value'), + name: '$t:value', meta: { interface: 'text-input', options: { font: 'monospace', - placeholder: i18n.t('interfaces.dropdown.choices_value_placeholder'), + placeholder: '$t:interfaces.dropdown.choices_value_placeholder', }, width: 'half', }, @@ -51,13 +51,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowOther', - name: i18n.t('interfaces.dropdown.allow_other'), + name: '$t:interfaces.dropdown.allow_other', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_other_label'), + label: '$t:interfaces.dropdown.allow_other_label', }, }, schema: { @@ -66,13 +66,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowNone', - name: i18n.t('interfaces.dropdown.allow_none'), + name: '$t:interfaces.dropdown.allow_none', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_none_label'), + label: '$t:interfaces.dropdown.allow_none_label', }, }, schema: { @@ -81,7 +81,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'string', meta: { width: 'half', @@ -90,16 +90,16 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, ], recommendedDisplays: ['labels'], -})); +}); diff --git a/app/src/interfaces/file/index.ts b/app/src/interfaces/file/index.ts index 73f3bdfe42..6d25c0793f 100644 --- a/app/src/interfaces/file/index.ts +++ b/app/src/interfaces/file/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '../define'; import InterfaceFile from './file.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'file', - name: i18n.t('interfaces.file.file'), - description: i18n.t('interfaces.file.description'), + name: '$t:interfaces.file.file', + description: '$t:interfaces.file.description', icon: 'note_add', component: InterfaceFile, types: ['uuid'], @@ -12,4 +12,4 @@ export default defineInterface(({ i18n }) => ({ relational: true, options: [], recommendedDisplays: ['file'], -})); +}); diff --git a/app/src/interfaces/files/index.ts b/app/src/interfaces/files/index.ts index 98c1445010..17f3228ff5 100644 --- a/app/src/interfaces/files/index.ts +++ b/app/src/interfaces/files/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '../define'; import InterfaceFiles from './files.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'files', - name: i18n.t('interfaces.files.files'), - description: i18n.t('interfaces.files.description'), + name: '$t:interfaces.files.files', + description: '$t:interfaces.files.description', icon: 'note_add', component: InterfaceFiles, types: ['alias'], @@ -12,4 +12,4 @@ export default defineInterface(({ i18n }) => ({ relational: true, options: [], recommendedDisplays: ['files'], -})); +}); diff --git a/app/src/interfaces/hash/index.ts b/app/src/interfaces/hash/index.ts index ac57e035ec..9a62d0f389 100644 --- a/app/src/interfaces/hash/index.ts +++ b/app/src/interfaces/hash/index.ts @@ -1,35 +1,35 @@ import InterfaceHash from './hash.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'hash', - name: i18n.t('interfaces.hash.hash'), - description: i18n.t('interfaces.hash.description'), + name: '$t:interfaces.hash.hash', + description: '$t:interfaces.hash.description', icon: 'fingerprint', component: InterfaceHash, types: ['hash'], options: [ { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'masked', - name: i18n.t('interfaces.hash.masked'), + name: '$t:interfaces.hash.masked', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.hash.masked_label'), + label: '$t:interfaces.hash.masked_label', }, }, schema: { @@ -37,4 +37,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/icon/index.ts b/app/src/interfaces/icon/index.ts index b18e64ae0d..6354e75c0d 100644 --- a/app/src/interfaces/icon/index.ts +++ b/app/src/interfaces/icon/index.ts @@ -1,13 +1,13 @@ import { defineInterface } from '../define'; import InterfaceIcon from './icon.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'icon', - name: i18n.t('interfaces.icon.icon'), - description: i18n.t('interfaces.icon.description'), + name: '$t:interfaces.icon.icon', + description: '$t:interfaces.icon.description', icon: 'insert_emoticon', component: InterfaceIcon, types: ['string'], options: [], recommendedDisplays: ['icon'], -})); +}); diff --git a/app/src/interfaces/image/index.ts b/app/src/interfaces/image/index.ts index 40e152251c..05946bb10a 100644 --- a/app/src/interfaces/image/index.ts +++ b/app/src/interfaces/image/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceImage from './image.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'image', - name: i18n.t('interfaces.image.image'), - description: i18n.t('interfaces.image.description'), + name: '$t:interfaces.image.image', + description: '$t:interfaces.image.description', icon: 'insert_photo', component: InterfaceImage, types: ['uuid'], @@ -12,4 +12,4 @@ export default defineInterface(({ i18n }) => ({ relational: true, options: [], recommendedDisplays: ['image'], -})); +}); diff --git a/app/src/interfaces/index.ts b/app/src/interfaces/index.ts index ea685d6e48..b2004dbe5c 100644 --- a/app/src/interfaces/index.ts +++ b/app/src/interfaces/index.ts @@ -1,3 +1,4 @@ +import { translateReactive } from '@/utils/translate-object-values'; import { ref, Ref } from '@vue/composition-api'; import { InterfaceConfig } from './types'; @@ -8,5 +9,5 @@ export function getInterfaces() { interfaces = ref([]); } - return interfaces; + return translateReactive(interfaces); } diff --git a/app/src/interfaces/m2a-builder/index.ts b/app/src/interfaces/m2a-builder/index.ts index d13f11c96b..cecb13ce99 100644 --- a/app/src/interfaces/m2a-builder/index.ts +++ b/app/src/interfaces/m2a-builder/index.ts @@ -1,13 +1,13 @@ import { defineInterface } from '../define'; import InterfaceManyToAny from './m2a-builder.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'm2a-builder', - name: i18n.t('m2a_builder'), + name: '$t:m2a_builder', icon: 'note_add', component: InterfaceManyToAny, relational: true, types: ['alias'], groups: ['m2a'], options: [], -})); +}); diff --git a/app/src/interfaces/many-to-many/index.ts b/app/src/interfaces/many-to-many/index.ts index 04c225b08d..3468402ba3 100644 --- a/app/src/interfaces/many-to-many/index.ts +++ b/app/src/interfaces/many-to-many/index.ts @@ -2,10 +2,10 @@ import { defineInterface } from '../define'; import InterfaceManyToMany from './many-to-many.vue'; import Options from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'many-to-many', - name: i18n.t('interfaces.many-to-many.many-to-many'), - description: i18n.t('interfaces.many-to-many.description'), + name: '$t:interfaces.many-to-many.many-to-many', + description: '$t:interfaces.many-to-many.description', icon: 'note_add', component: InterfaceManyToMany, relational: true, @@ -13,4 +13,4 @@ export default defineInterface(({ i18n }) => ({ groups: ['m2m'], options: Options, recommendedDisplays: ['related-values'], -})); +}); diff --git a/app/src/interfaces/many-to-one/index.ts b/app/src/interfaces/many-to-one/index.ts index b40c30b18b..f5174e3ebe 100644 --- a/app/src/interfaces/many-to-one/index.ts +++ b/app/src/interfaces/many-to-one/index.ts @@ -2,10 +2,10 @@ import { defineInterface } from '../define'; import InterfaceManyToOne from './many-to-one.vue'; import Options from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'many-to-one', - name: i18n.t('interfaces.many-to-one.many-to-one'), - description: i18n.t('interfaces.many-to-one.description'), + name: '$t:interfaces.many-to-one.many-to-one', + description: '$t:interfaces.many-to-one.description', icon: 'arrow_right_alt', component: InterfaceManyToOne, types: ['uuid', 'string', 'text', 'integer', 'bigInteger'], @@ -13,4 +13,4 @@ export default defineInterface(({ i18n }) => ({ groups: ['m2o'], options: Options, recommendedDisplays: ['related-values'], -})); +}); diff --git a/app/src/interfaces/markdown/index.ts b/app/src/interfaces/markdown/index.ts index 5e418e11bf..65d74c92f3 100644 --- a/app/src/interfaces/markdown/index.ts +++ b/app/src/interfaces/markdown/index.ts @@ -1,42 +1,42 @@ import InterfaceMarkdown from './markdown.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'markdown', - name: i18n.t('interfaces.markdown.markdown'), - description: i18n.t('interfaces.markdown.description'), + name: '$t:interfaces.markdown.markdown', + description: '$t:interfaces.markdown.description', icon: 'functions', component: InterfaceMarkdown, types: ['text'], options: [ { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'full', interface: 'textarea', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'customSyntax', - name: i18n.t('interfaces.markdown.customSyntax'), + name: '$t:interfaces.markdown.customSyntax', type: 'json', meta: { - note: i18n.t('interfaces.markdown.customSyntax_label'), + note: '$t:interfaces.markdown.customSyntax_label', width: 'full', interface: 'repeater', options: { - addLabel: i18n.t('interfaces.markdown.customSyntax_add'), + addLabel: '$t:interfaces.markdown.customSyntax_add', template: '{{ name }}', fields: [ { field: 'name', type: 'string', - name: i18n.t('name'), + name: '$t:name', meta: { interface: 'text-input', width: 'half', @@ -45,7 +45,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'icon', type: 'string', - name: i18n.t('icon'), + name: '$t:icon', meta: { interface: 'icon', width: 'half', @@ -54,7 +54,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'prefix', type: 'string', - name: i18n.t('prefix'), + name: '$t:prefix', meta: { interface: 'text-input', width: 'half', @@ -63,7 +63,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'suffix', type: 'string', - name: i18n.t('suffix'), + name: '$t:suffix', meta: { interface: 'text-input', width: 'half', @@ -72,18 +72,18 @@ export default defineInterface(({ i18n }) => ({ { field: 'box', type: 'string', - name: i18n.t('interfaces.markdown.box'), + name: '$t:interfaces.markdown.box', meta: { interface: 'radio-buttons', width: 'half', options: { choices: [ { - text: i18n.t('inline'), + text: '$t:inline', value: 'inline', }, { - text: i18n.t('block'), + text: '$t:block', value: 'block', }, ], @@ -99,13 +99,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'imageToken', - name: i18n.t('interfaces.markdown.imageToken'), + name: '$t:interfaces.markdown.imageToken', type: 'string', meta: { - note: i18n.t('interfaces.markdown.imageToken_label'), + note: '$t:interfaces.markdown.imageToken_label', width: 'full', interface: 'text-input', }, }, ], -})); +}); diff --git a/app/src/interfaces/notice/index.ts b/app/src/interfaces/notice/index.ts index 78c33dd4f9..7818a57399 100644 --- a/app/src/interfaces/notice/index.ts +++ b/app/src/interfaces/notice/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceNotice from './notice.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'notice', - name: i18n.t('interfaces.notice.notice'), - description: i18n.t('interfaces.notice.description'), + name: '$t:interfaces.notice.notice', + description: '$t:interfaces.notice.description', icon: 'info', component: InterfaceNotice, hideLabel: true, @@ -14,19 +14,18 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { width: 'half', interface: 'dropdown', - default_value: 'normal', options: { choices: [ - { text: i18n.t('normal'), value: 'normal' }, - { text: i18n.t('info'), value: 'info' }, - { text: i18n.t('success'), value: 'success' }, - { text: i18n.t('warning'), value: 'warning' }, - { text: i18n.t('danger'), value: 'danger' }, + { text: '$t:normal', value: 'normal' }, + { text: '$t:info', value: 'info' }, + { text: '$t:success', value: 'success' }, + { text: '$t:warning', value: 'warning' }, + { text: '$t:danger', value: 'danger' }, ], }, }, @@ -36,7 +35,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'icon', - name: i18n.t('icon'), + name: '$t:icon', type: 'string', meta: { width: 'half', @@ -45,15 +44,15 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'text', - name: i18n.t('text'), + name: '$t:text', type: 'string', meta: { width: 'full', interface: 'textarea', options: { - placeholder: i18n.t('interfaces.notice.text'), + placeholder: '$t:interfaces.notice.text', }, }, }, ], -})); +}); diff --git a/app/src/interfaces/numeric/index.ts b/app/src/interfaces/numeric/index.ts index 585c40ed45..ebc2d194ef 100644 --- a/app/src/interfaces/numeric/index.ts +++ b/app/src/interfaces/numeric/index.ts @@ -1,17 +1,17 @@ import InterfaceNumeric from './numeric.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'numeric', - name: i18n.t('interfaces.numeric.numeric'), - description: i18n.t('interfaces.numeric.description'), + name: '$t:interfaces.numeric.numeric', + description: '$t:interfaces.numeric.description', icon: 'dialpad', component: InterfaceNumeric, types: ['integer', 'decimal', 'float', 'bigInteger'], options: [ { field: 'min', - name: i18n.t('interfaces.numeric.minimum_value'), + name: '$t:interfaces.numeric.minimum_value', type: 'integer', meta: { width: 'half', @@ -20,7 +20,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'max', - name: i18n.t('interfaces.numeric.maximum_value'), + name: '$t:interfaces.numeric.maximum_value', type: 'integer', meta: { width: 'half', @@ -29,7 +29,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'step', - name: i18n.t('interfaces.numeric.step_interval'), + name: '$t:interfaces.numeric.step_interval', type: 'integer', meta: { width: 'half', @@ -41,19 +41,19 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'iconLeft', - name: i18n.t('icon_left'), + name: '$t:icon_left', type: 'string', meta: { width: 'half', @@ -62,7 +62,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconRight', - name: i18n.t('icon_right'), + name: '$t:icon_right', type: 'string', meta: { width: 'half', @@ -71,16 +71,16 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'font', - name: i18n.t('font'), + name: '$t:font', type: 'string', meta: { width: 'half', interface: 'dropdown', options: { choices: [ - { text: i18n.t('sans_serif'), value: 'sans-serif' }, - { text: i18n.t('monospace'), value: 'monospace' }, - { text: i18n.t('serif'), value: 'serif' }, + { text: '$t:sans_serif', value: 'sans-serif' }, + { text: '$t:monospace', value: 'monospace' }, + { text: '$t:serif', value: 'serif' }, ], }, }, @@ -89,4 +89,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/one-to-many/index.ts b/app/src/interfaces/one-to-many/index.ts index 722a942dce..f86d89e115 100644 --- a/app/src/interfaces/one-to-many/index.ts +++ b/app/src/interfaces/one-to-many/index.ts @@ -2,10 +2,10 @@ import { defineInterface } from '../define'; import InterfaceOneToMany from './one-to-many.vue'; import Options from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'one-to-many', - name: i18n.t('interfaces.one-to-many.one-to-many'), - description: i18n.t('interfaces.one-to-many.description'), + name: '$t:interfaces.one-to-many.one-to-many', + description: '$t:interfaces.one-to-many.description', icon: 'arrow_right_alt', component: InterfaceOneToMany, types: ['alias'], @@ -13,4 +13,4 @@ export default defineInterface(({ i18n }) => ({ relational: true, options: Options, recommendedDisplays: ['related-values'], -})); +}); diff --git a/app/src/interfaces/radio-buttons/index.ts b/app/src/interfaces/radio-buttons/index.ts index 2fc868c437..dc509587fd 100644 --- a/app/src/interfaces/radio-buttons/index.ts +++ b/app/src/interfaces/radio-buttons/index.ts @@ -1,10 +1,10 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceRadioButtons from './radio-buttons.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'radio-buttons', - name: i18n.t('interfaces.radio-buttons.radio-buttons'), - description: i18n.t('interfaces.radio-buttons.description'), + name: '$t:interfaces.radio-buttons.radio-buttons', + description: '$t:interfaces.radio-buttons.description', icon: 'radio_button_checked', component: InterfaceRadioButtons, types: ['string'], @@ -13,7 +13,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'choices', type: 'json', - name: i18n.t('choices'), + name: '$t:choices', meta: { width: 'full', interface: 'repeater', @@ -23,7 +23,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'text', type: 'string', - name: i18n.t('text'), + name: '$t:text', meta: { width: 'half', interface: 'text-input', @@ -32,7 +32,7 @@ export default defineInterface(({ i18n }) => ({ { field: 'value', type: 'string', - name: i18n.t('value'), + name: '$t:value', meta: { width: 'half', interface: 'text-input', @@ -47,7 +47,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconOn', - name: i18n.t('icon_on'), + name: '$t:icon_on', type: 'string', meta: { width: 'half', @@ -59,7 +59,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconOff', - name: i18n.t('icon_off'), + name: '$t:icon_off', type: 'string', meta: { width: 'half', @@ -71,7 +71,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { width: 'half', @@ -80,13 +80,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowOther', - name: i18n.t('interfaces.dropdown.allow_other'), + name: '$t:interfaces.dropdown.allow_other', type: 'string', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_other_label'), + label: '$t:interfaces.dropdown.allow_other_label', }, }, schema: { @@ -94,4 +94,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/repeater/index.ts b/app/src/interfaces/repeater/index.ts index e109f0c95b..8351c8d8a2 100644 --- a/app/src/interfaces/repeater/index.ts +++ b/app/src/interfaces/repeater/index.ts @@ -2,12 +2,12 @@ import { defineInterface } from '../define'; import InterfaceRepeater from './repeater.vue'; import RepeaterOptions from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'repeater', - name: i18n.t('interfaces.repeater.repeater'), - description: i18n.t('interfaces.repeater.description'), + name: '$t:interfaces.repeater.repeater', + description: '$t:interfaces.repeater.description', icon: 'replay', component: InterfaceRepeater, types: ['json'], options: RepeaterOptions, -})); +}); diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts index 90808357c2..289d9730f9 100644 --- a/app/src/interfaces/slider/index.ts +++ b/app/src/interfaces/slider/index.ts @@ -1,17 +1,17 @@ import InterfaceSlider from './slider.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'slider', - name: i18n.t('interfaces.slider.slider'), - description: i18n.t('interfaces.slider.description'), + name: '$t:interfaces.slider.slider', + description: '$t:interfaces.slider.description', icon: 'linear_scale', component: InterfaceSlider, types: ['integer', 'decimal', 'float', 'bigInteger'], options: [ { field: 'minValue', - name: i18n.t('interfaces.numeric.minimum_value'), + name: '$t:interfaces.numeric.minimum_value', type: 'integer', meta: { width: 'half', @@ -20,7 +20,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'maxValue', - name: i18n.t('interfaces.numeric.maximum_value'), + name: '$t:interfaces.numeric.maximum_value', type: 'integer', meta: { width: 'half', @@ -29,7 +29,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'stepInterval', - name: i18n.t('interfaces.numeric.step_interval'), + name: '$t:interfaces.numeric.step_interval', type: 'integer', meta: { width: 'half', @@ -38,7 +38,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'alwaysShowValue', - name: i18n.t('interfaces.slider.always_show_value'), + name: '$t:interfaces.slider.always_show_value', type: 'boolean', meta: { width: 'half', @@ -46,4 +46,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/slug/index.ts b/app/src/interfaces/slug/index.ts index b74458fd10..b6d6b38ba8 100644 --- a/app/src/interfaces/slug/index.ts +++ b/app/src/interfaces/slug/index.ts @@ -1,28 +1,28 @@ import { defineInterface } from '@/interfaces/define'; import InterfaceSlug from './slug.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'slug', - name: i18n.t('interfaces.slug.slug'), - description: i18n.t('interfaces.slug.description'), + name: '$t:interfaces.slug.slug', + description: '$t:interfaces.slug.description', icon: 'link', component: InterfaceSlug, types: ['string'], options: [ { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', meta: { width: 'full', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'iconLeft', - name: i18n.t('icon_left'), + name: '$t:icon_left', type: 'string', meta: { width: 'half', @@ -31,7 +31,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconRight', - name: i18n.t('icon_right'), + name: '$t:icon_right', type: 'string', meta: { width: 'half', @@ -39,4 +39,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/tags/index.ts b/app/src/interfaces/tags/index.ts index ac5cc5b7ce..44037014c1 100644 --- a/app/src/interfaces/tags/index.ts +++ b/app/src/interfaces/tags/index.ts @@ -1,17 +1,17 @@ import InterfaceTags from './tags.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'tags', - name: i18n.t('interfaces.tags.tags'), - description: i18n.t('interfaces.tags.description'), + name: '$t:interfaces.tags.tags', + description: '$t:interfaces.tags.description', icon: 'local_offer', component: InterfaceTags, types: ['json', 'csv'], options: [ { field: 'presets', - name: i18n.t('presets'), + name: '$t:presets', type: 'string', meta: { width: 'full', @@ -20,25 +20,25 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'full', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'alphabetize', - name: i18n.t('interfaces.tags.alphabetize'), + name: '$t:interfaces.tags.alphabetize', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.tags.alphabetize_label'), + label: '$t:interfaces.tags.alphabetize_label', }, }, schema: { @@ -47,13 +47,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'allowCustom', - name: i18n.t('interfaces.dropdown.allow_other'), + name: '$t:interfaces.dropdown.allow_other', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.dropdown.allow_other_label'), + label: '$t:interfaces.dropdown.allow_other_label', }, }, schema: { @@ -62,7 +62,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'whitespace', - name: i18n.t('interfaces.tags.whitespace'), + name: '$t:interfaces.tags.whitespace', type: 'string', meta: { width: 'half', @@ -70,16 +70,16 @@ export default defineInterface(({ i18n }) => ({ options: { allowNone: true, choices: [ - { text: i18n.t('interfaces.tags.hyphen'), value: '-' }, - { text: i18n.t('interfaces.tags.underscore'), value: '_' }, - { text: i18n.t('interfaces.tags.remove'), value: '' }, + { text: '$t:interfaces.tags.hyphen', value: '-' }, + { text: '$t:interfaces.tags.underscore', value: '_' }, + { text: '$t:interfaces.tags.remove', value: '' }, ], }, }, }, { field: 'capitalization', - name: i18n.t('interfaces.tags.capitalization'), + name: '$t:interfaces.tags.capitalization', type: 'string', meta: { width: 'half', @@ -87,16 +87,16 @@ export default defineInterface(({ i18n }) => ({ options: { allowNone: true, choices: [ - { text: i18n.t('interfaces.tags.uppercase'), value: 'uppercase' }, - { text: i18n.t('interfaces.tags.lowercase'), value: 'lowercase' }, - { text: i18n.t('interfaces.tags.auto_formatter'), value: 'auto-format' }, + { text: '$t:interfaces.tags.uppercase', value: 'uppercase' }, + { text: '$t:interfaces.tags.lowercase', value: 'lowercase' }, + { text: '$t:interfaces.tags.auto_formatter', value: 'auto-format' }, ], }, }, }, { field: 'iconLeft', - name: i18n.t('icon_left'), + name: '$t:icon_left', type: 'string', meta: { width: 'half', @@ -105,7 +105,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconRight', - name: i18n.t('icon_right'), + name: '$t:icon_right', type: 'string', meta: { width: 'half', @@ -114,4 +114,4 @@ export default defineInterface(({ i18n }) => ({ }, ], recommendedDisplays: ['labels'], -})); +}); diff --git a/app/src/interfaces/text-input/index.ts b/app/src/interfaces/text-input/index.ts index 8c42f14269..ab50a46597 100644 --- a/app/src/interfaces/text-input/index.ts +++ b/app/src/interfaces/text-input/index.ts @@ -1,37 +1,37 @@ import InterfaceTextInput from './text-input.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'text-input', - name: i18n.t('interfaces.text-input.text-input'), - description: i18n.t('interfaces.text-input.description'), + name: '$t:interfaces.text-input.text-input', + description: '$t:interfaces.text-input.description', icon: 'text_fields', component: InterfaceTextInput, types: ['string', 'uuid'], options: [ { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'font', - name: i18n.t('font'), + name: '$t:font', type: 'string', meta: { width: 'half', interface: 'dropdown', options: { choices: [ - { text: i18n.t('sans_serif'), value: 'sans-serif' }, - { text: i18n.t('monospace'), value: 'monospace' }, - { text: i18n.t('serif'), value: 'serif' }, + { text: '$t:sans_serif', value: 'sans-serif' }, + { text: '$t:monospace', value: 'monospace' }, + { text: '$t:serif', value: 'serif' }, ], }, }, @@ -41,7 +41,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconLeft', - name: i18n.t('icon_left'), + name: '$t:icon_left', type: 'string', meta: { width: 'half', @@ -50,7 +50,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconRight', - name: i18n.t('icon_right'), + name: '$t:icon_right', type: 'string', meta: { width: 'half', @@ -59,13 +59,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'trim', - name: i18n.t('interfaces.text-input.trim'), + name: '$t:interfaces.text-input.trim', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.text-input.trim_label'), + label: '$t:interfaces.text-input.trim_label', }, }, schema: { @@ -74,13 +74,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'masked', - name: i18n.t('interfaces.text-input.mask'), + name: '$t:interfaces.text-input.mask', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.text-input.mask_label'), + label: '$t:interfaces.text-input.mask_label', }, }, schema: { @@ -89,13 +89,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'nullable', - name: i18n.t('interfaces.text-input.nullable'), + name: '$t:interfaces.text-input.nullable', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.text-input.nullable_label'), + label: '$t:interfaces.text-input.nullable_label', }, }, schema: { @@ -103,4 +103,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/textarea/index.ts b/app/src/interfaces/textarea/index.ts index 338efa40c8..0d4afa7321 100644 --- a/app/src/interfaces/textarea/index.ts +++ b/app/src/interfaces/textarea/index.ts @@ -1,35 +1,35 @@ import InterfaceTextarea from './textarea.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'textarea', - name: i18n.t('interfaces.textarea.textarea'), - description: i18n.t('interfaces.textarea.description'), + name: '$t:interfaces.textarea.textarea', + description: '$t:interfaces.textarea.description', icon: 'text_fields', component: InterfaceTextarea, types: ['text'], options: [ { field: 'placeholder', - name: i18n.t('placeholder'), + name: '$t:placeholder', type: 'string', meta: { width: 'full', interface: 'text-input', options: { - placeholder: i18n.t('enter_a_placeholder'), + placeholder: '$t:enter_a_placeholder', }, }, }, { field: 'trim', - name: i18n.t('interfaces.text-input.trim'), + name: '$t:interfaces.text-input.trim', type: 'boolean', meta: { width: 'half', interface: 'toggle', options: { - label: i18n.t('interfaces.text-input.trim_label'), + label: '$t:interfaces.text-input.trim_label', }, }, schema: { @@ -38,16 +38,16 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'font', - name: i18n.t('font'), + name: '$t:font', type: 'string', meta: { width: 'half', interface: 'dropdown', options: { choices: [ - { text: i18n.t('sans_serif'), value: 'sans-serif' }, - { text: i18n.t('monospace'), value: 'monospace' }, - { text: i18n.t('serif'), value: 'serif' }, + { text: '$t:sans_serif', value: 'sans-serif' }, + { text: '$t:monospace', value: 'monospace' }, + { text: '$t:serif', value: 'serif' }, ], }, }, @@ -56,4 +56,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/toggle/index.ts b/app/src/interfaces/toggle/index.ts index 7d33ebf5ea..0be6bef66c 100644 --- a/app/src/interfaces/toggle/index.ts +++ b/app/src/interfaces/toggle/index.ts @@ -1,10 +1,10 @@ import InterfaceToggle from './toggle.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'toggle', - name: i18n.t('interfaces.toggle.toggle'), - description: i18n.t('interfaces.toggle.description'), + name: '$t:interfaces.toggle.toggle', + description: '$t:interfaces.toggle.description', icon: 'check_box', component: InterfaceToggle, types: ['boolean'], @@ -12,7 +12,7 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'iconOn', - name: i18n.t('icon_on'), + name: '$t:icon_on', type: 'string', meta: { width: 'half', @@ -24,7 +24,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'iconOff', - name: i18n.t('icon_off'), + name: '$t:icon_off', type: 'string', meta: { width: 'half', @@ -36,22 +36,22 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'label', - name: i18n.t('label'), + name: '$t:label', type: 'string', meta: { width: 'half', interface: 'text-input', options: { - placeholder: i18n.t('interfaces.toggle.label_placeholder'), + placeholder: '$t:interfaces.toggle.label_placeholder', }, }, schema: { - default_value: i18n.t('interfaces.toggle.label_default'), + default_value: '$t:interfaces.toggle.label_default', }, }, { field: 'color', - name: i18n.t('color'), + name: '$t:color', type: 'string', meta: { width: 'half', @@ -62,4 +62,4 @@ export default defineInterface(({ i18n }) => ({ }, }, ], -})); +}); diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts index 82ed184758..8e057022b8 100644 --- a/app/src/interfaces/translations/index.ts +++ b/app/src/interfaces/translations/index.ts @@ -2,12 +2,12 @@ import { defineInterface } from '../define'; import InterfaceTranslations from './translations.vue'; import TranslationsOptions from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'translations', - name: i18n.t('translations'), + name: '$t:translations', icon: 'replay', types: ['alias'], relational: true, component: InterfaceTranslations, options: TranslationsOptions, -})); +}); diff --git a/app/src/interfaces/tree-view/index.ts b/app/src/interfaces/tree-view/index.ts index 0005297f59..b39e77df55 100644 --- a/app/src/interfaces/tree-view/index.ts +++ b/app/src/interfaces/tree-view/index.ts @@ -2,10 +2,10 @@ import { defineInterface } from '../define'; import InterfaceTreeView from './tree-view.vue'; import Options from './options.vue'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'tree-view', - name: i18n.t('tree_view'), - description: i18n.t('interfaces.tree-view.description'), + name: '$t:tree_view', + description: '$t:interfaces.tree-view.description', icon: 'account_tree', types: ['alias'], groups: ['o2m'], diff --git a/app/src/interfaces/types.ts b/app/src/interfaces/types.ts index 668ac806ca..0e39d40607 100644 --- a/app/src/interfaces/types.ts +++ b/app/src/interfaces/types.ts @@ -2,10 +2,10 @@ import VueI18n from 'vue-i18n'; import { Component, AsyncComponent } from 'vue'; import { Field, types, localTypes } from '@/types'; -export type InterfaceConfig = { +export interface InterfaceConfig { id: string; + name: string; icon: string; - name: string | VueI18n.TranslateResult; description?: string | VueI18n.TranslateResult; component: Component | AsyncComponent; options: DeepPartial[] | Component | AsyncComponent; @@ -16,8 +16,7 @@ export type InterfaceConfig = { hideLoader?: boolean; system?: boolean; recommendedDisplays?: string[]; -}; +} -export type InterfaceContext = { i18n: VueI18n }; export type InterfaceDefineParam = InterfaceDefineParamGeneric; -export type InterfaceDefineParamGeneric = T | ((context: InterfaceContext) => T); +export type InterfaceDefineParamGeneric = T | (() => T); diff --git a/app/src/interfaces/user/index.ts b/app/src/interfaces/user/index.ts index 4d5c72eb76..d00419958d 100644 --- a/app/src/interfaces/user/index.ts +++ b/app/src/interfaces/user/index.ts @@ -1,10 +1,10 @@ import InterfaceUser from './user.vue'; import { defineInterface } from '@/interfaces/define'; -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'user', - name: i18n.t('interfaces.user.user'), - description: i18n.t('interfaces.user.description'), + name: '$t:interfaces.user.user', + description: '$t:interfaces.user.description', icon: 'person', component: InterfaceUser, types: ['uuid'], @@ -12,16 +12,16 @@ export default defineInterface(({ i18n }) => ({ options: [ { field: 'selectMode', - name: i18n.t('interfaces.user.select_mode'), + name: '$t:interfaces.user.select_mode', type: 'string', meta: { width: 'full', interface: 'dropdown', options: { choices: [ - { text: i18n.t('interfaces.user.modes.auto'), value: 'auto' }, - { text: i18n.t('interfaces.user.modes.dropdown'), value: 'dropdown' }, - { text: i18n.t('interfaces.user.modes.modal'), value: 'modal' }, + { text: '$t:interfaces.user.modes.auto', value: 'auto' }, + { text: '$t:interfaces.user.modes.dropdown', value: 'dropdown' }, + { text: '$t:interfaces.user.modes.modal', value: 'modal' }, ], }, }, @@ -31,4 +31,4 @@ export default defineInterface(({ i18n }) => ({ }, ], recommendedDisplays: ['user'], -})); +}); diff --git a/app/src/interfaces/wysiwyg/index.ts b/app/src/interfaces/wysiwyg/index.ts index f63d0a249b..fea82d5aa8 100644 --- a/app/src/interfaces/wysiwyg/index.ts +++ b/app/src/interfaces/wysiwyg/index.ts @@ -4,17 +4,17 @@ import { defineInterface } from '@/interfaces/define'; const InterfaceWYSIWYG = () => import(/* webpackChunkName: 'interface-wysiwyg', webpackPrefetch: true */ './wysiwyg.vue'); -export default defineInterface(({ i18n }) => ({ +export default defineInterface({ id: 'wysiwyg', - name: i18n.t('interfaces.wysiwyg.wysiwyg'), - description: i18n.t('interfaces.wysiwyg.description'), + name: '$t:interfaces.wysiwyg.wysiwyg', + description: '$t:interfaces.wysiwyg.description', icon: 'format_quote', component: InterfaceWYSIWYG as AsyncComponent, types: ['text'], options: [ { field: 'toolbar', - name: i18n.t('interfaces.wysiwyg.toolbar'), + name: '$t:interfaces.wysiwyg.toolbar', type: 'json', schema: { default_value: [ @@ -43,179 +43,179 @@ export default defineInterface(({ i18n }) => ({ choices: [ { value: 'aligncenter', - text: i18n.t('wysiwyg_options.aligncenter'), + text: '$t:wysiwyg_options.aligncenter', }, { value: 'alignjustify', - text: i18n.t('wysiwyg_options.alignjustify'), + text: '$t:wysiwyg_options.alignjustify', }, { value: 'alignleft', - text: i18n.t('wysiwyg_options.alignleft'), + text: '$t:wysiwyg_options.alignleft', }, { value: 'alignnone', - text: i18n.t('wysiwyg_options.alignnone'), + text: '$t:wysiwyg_options.alignnone', }, { value: 'alignright', - text: i18n.t('wysiwyg_options.alignright'), + text: '$t:wysiwyg_options.alignright', }, { value: 'forecolor', - text: i18n.t('wysiwyg_options.forecolor'), + text: '$t:wysiwyg_options.forecolor', }, { value: 'backcolor', - text: i18n.t('wysiwyg_options.backcolor'), + text: '$t:wysiwyg_options.backcolor', }, { value: 'bold', - text: i18n.t('wysiwyg_options.bold'), + text: '$t:wysiwyg_options.bold', }, { value: 'italic', - text: i18n.t('wysiwyg_options.italic'), + text: '$t:wysiwyg_options.italic', }, { value: 'underline', - text: i18n.t('wysiwyg_options.underline'), + text: '$t:wysiwyg_options.underline', }, { value: 'strikethrough', - text: i18n.t('wysiwyg_options.strikethrough'), + text: '$t:wysiwyg_options.strikethrough', }, { value: 'subscript', - text: i18n.t('wysiwyg_options.subscript'), + text: '$t:wysiwyg_options.subscript', }, { value: 'superscript', - text: i18n.t('wysiwyg_options.superscript'), + text: '$t:wysiwyg_options.superscript', }, { value: 'blockquote', - text: i18n.t('wysiwyg_options.blockquote'), + text: '$t:wysiwyg_options.blockquote', }, { value: 'bullist', - text: i18n.t('wysiwyg_options.bullist'), + text: '$t:wysiwyg_options.bullist', }, { value: 'numlist', - text: i18n.t('wysiwyg_options.numlist'), + text: '$t:wysiwyg_options.numlist', }, { value: 'hr', - text: i18n.t('wysiwyg_options.hr'), + text: '$t:wysiwyg_options.hr', }, { value: 'link', - text: i18n.t('wysiwyg_options.link'), + text: '$t:wysiwyg_options.link', }, { value: 'unlink', - text: i18n.t('wysiwyg_options.unlink'), + text: '$t:wysiwyg_options.unlink', }, { value: 'media', - text: i18n.t('wysiwyg_options.media'), + text: '$t:wysiwyg_options.media', }, { value: 'image', - text: i18n.t('wysiwyg_options.image'), + text: '$t:wysiwyg_options.image', }, { value: 'copy', - text: i18n.t('wysiwyg_options.copy'), + text: '$t:wysiwyg_options.copy', }, { value: 'cut', - text: i18n.t('wysiwyg_options.cut'), + text: '$t:wysiwyg_options.cut', }, { value: 'paste', - text: i18n.t('wysiwyg_options.paste'), + text: '$t:wysiwyg_options.paste', }, { value: 'h1', - text: i18n.t('wysiwyg_options.h1'), + text: '$t:wysiwyg_options.h1', }, { value: 'h2', - text: i18n.t('wysiwyg_options.h2'), + text: '$t:wysiwyg_options.h2', }, { value: 'h3', - text: i18n.t('wysiwyg_options.h3'), + text: '$t:wysiwyg_options.h3', }, { value: 'h4', - text: i18n.t('wysiwyg_options.h4'), + text: '$t:wysiwyg_options.h4', }, { value: 'h5', - text: i18n.t('wysiwyg_options.h5'), + text: '$t:wysiwyg_options.h5', }, { value: 'h6', - text: i18n.t('wysiwyg_options.h6'), + text: '$t:wysiwyg_options.h6', }, { value: 'fontselect', - text: i18n.t('wysiwyg_options.fontselect'), + text: '$t:wysiwyg_options.fontselect', }, { value: 'fontsizeselect', - text: i18n.t('wysiwyg_options.fontsizeselect'), + text: '$t:wysiwyg_options.fontsizeselect', }, { value: 'indent', - text: i18n.t('wysiwyg_options.indent'), + text: '$t:wysiwyg_options.indent', }, { value: 'outdent', - text: i18n.t('wysiwyg_options.outdent'), + text: '$t:wysiwyg_options.outdent', }, { value: 'undo', - text: i18n.t('wysiwyg_options.undo'), + text: '$t:wysiwyg_options.undo', }, { value: 'redo', - text: i18n.t('wysiwyg_options.redo'), + text: '$t:wysiwyg_options.redo', }, { value: 'remove', - text: i18n.t('wysiwyg_options.remove'), + text: '$t:wysiwyg_options.remove', }, { value: 'removeformat', - text: i18n.t('wysiwyg_options.removeformat'), + text: '$t:wysiwyg_options.removeformat', }, { value: 'selectall', - text: i18n.t('wysiwyg_options.selectall'), + text: '$t:wysiwyg_options.selectall', }, { value: 'table', - text: i18n.t('wysiwyg_options.table'), + text: '$t:wysiwyg_options.table', }, { value: 'visualaid', - text: i18n.t('wysiwyg_options.visualaid'), + text: '$t:wysiwyg_options.visualaid', }, { value: 'code', - text: i18n.t('wysiwyg_options.code'), + text: '$t:wysiwyg_options.code', }, { value: 'fullscreen', - text: i18n.t('wysiwyg_options.fullscreen'), + text: '$t:wysiwyg_options.fullscreen', }, { value: 'ltr rtl', - text: i18n.t('wysiwyg_options.directionality'), + text: '$t:wysiwyg_options.directionality', }, ], }, @@ -223,16 +223,16 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'font', - name: i18n.t('font'), + name: '$t:font', type: 'string', meta: { width: 'half', interface: 'dropdown', options: { choices: [ - { text: i18n.t('sans_serif'), value: 'sans-serif' }, - { text: i18n.t('monospace'), value: 'monospace' }, - { text: i18n.t('serif'), value: 'serif' }, + { text: '$t:sans_serif', value: 'sans-serif' }, + { text: '$t:monospace', value: 'monospace' }, + { text: '$t:serif', value: 'serif' }, ], }, }, @@ -242,7 +242,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'customFormats', - name: i18n.t('interfaces.wysiwyg.custom_formats'), + name: '$t:interfaces.wysiwyg.custom_formats', type: 'json', meta: { interface: 'code', @@ -266,7 +266,7 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'tinymceOverrides', - name: i18n.t('interfaces.wysiwyg.options_override'), + name: '$t:interfaces.wysiwyg.options_override', type: 'json', meta: { interface: 'code', @@ -277,13 +277,13 @@ export default defineInterface(({ i18n }) => ({ }, { field: 'imageToken', - name: i18n.t('interfaces.markdown.imageToken'), + name: '$t:interfaces.markdown.imageToken', type: 'string', meta: { - note: i18n.t('interfaces.markdown.imageToken_label'), + note: '$t:interfaces.markdown.imageToken_label', width: 'full', interface: 'text-input', }, }, ], -})); +}); diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts index 8a0297d5ec..676ce1364f 100644 --- a/app/src/layouts/cards/index.ts +++ b/app/src/layouts/cards/index.ts @@ -1,9 +1,9 @@ import { defineLayout } from '@/layouts/define'; import CardsLayout from './cards.vue'; -export default defineLayout(({ i18n }) => ({ +export default defineLayout({ id: 'cards', - name: i18n.t('layouts.cards.cards'), + name: '$t:layouts.cards.cards', icon: 'grid_4', component: CardsLayout, -})); +}); diff --git a/app/src/layouts/define.ts b/app/src/layouts/define.ts index 65a6f7cd60..1268e40641 100644 --- a/app/src/layouts/define.ts +++ b/app/src/layouts/define.ts @@ -1,11 +1,10 @@ -import { i18n } from '@/lang'; import { LayoutDefineParam, LayoutContext, LayoutConfig } from './types'; export function defineLayout(config: LayoutDefineParam): LayoutConfig { let options: LayoutConfig; if (typeof config === 'function') { - const context: LayoutContext = { i18n }; + const context: LayoutContext = {}; options = config(context); } else { options = config; diff --git a/app/src/layouts/index.ts b/app/src/layouts/index.ts index 978e469cc6..caf73f2679 100644 --- a/app/src/layouts/index.ts +++ b/app/src/layouts/index.ts @@ -1,3 +1,4 @@ +import { translateReactive } from '@/utils/translate-object-values'; import { ref, Ref } from '@vue/composition-api'; import { LayoutConfig } from './types'; @@ -8,5 +9,5 @@ export function getLayouts() { layouts = ref([]); } - return layouts; + return translateReactive(layouts); } diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts index 3701d7cb12..ca9af4f428 100644 --- a/app/src/layouts/tabular/index.ts +++ b/app/src/layouts/tabular/index.ts @@ -1,9 +1,9 @@ import { defineLayout } from '@/layouts/define'; import TabularLayout from './tabular.vue'; -export default defineLayout(({ i18n }) => ({ +export default defineLayout({ id: 'tabular', - name: i18n.t('layouts.tabular.tabular'), + name: '$t:layouts.tabular.tabular', icon: 'reorder', component: TabularLayout, -})); +}); diff --git a/app/src/layouts/types.ts b/app/src/layouts/types.ts index e341a12dbc..0d362ec826 100644 --- a/app/src/layouts/types.ts +++ b/app/src/layouts/types.ts @@ -1,14 +1,14 @@ import VueI18n from 'vue-i18n'; import { VueConstructor, Component } from 'vue'; -export type LayoutConfig = { +export interface LayoutConfig { id: string; + name: string; icon: string; - name: string | VueI18n.TranslateResult; component: Component; -}; +} -export type LayoutContext = { i18n: VueI18n }; +export type LayoutContext = {}; export type LayoutDefineParam = LayoutConfig | ((context: LayoutContext) => LayoutConfig); diff --git a/app/src/modules/activity/index.ts b/app/src/modules/activity/index.ts index aa9c3faabb..104dc88399 100644 --- a/app/src/modules/activity/index.ts +++ b/app/src/modules/activity/index.ts @@ -2,10 +2,10 @@ import { defineModule } from '@/modules/define'; import ActivityCollection from './routes/collection.vue'; import ActivityItem from './routes/item.vue'; -export default defineModule(({ i18n }) => ({ +export default defineModule({ id: 'activity', hidden: true, - name: 'activity', + name: '$t:activity', icon: 'notifications', routes: [ { @@ -24,4 +24,4 @@ export default defineModule(({ i18n }) => ({ ], }, ], -})); +}); diff --git a/app/src/modules/collections/index.ts b/app/src/modules/collections/index.ts index 2de8f10ac7..aa2fcdca2c 100644 --- a/app/src/modules/collections/index.ts +++ b/app/src/modules/collections/index.ts @@ -43,9 +43,9 @@ const checkForSystem: NavigationGuard = (to, from, next) => { return next(); }; -export default defineModule(({ i18n }) => ({ +export default defineModule({ id: 'collections', - name: 'collections', + name: '$t:collections', icon: 'box', routes: [ { @@ -78,4 +78,4 @@ export default defineModule(({ i18n }) => ({ }, ], order: 5, -})); +}); diff --git a/app/src/modules/define.ts b/app/src/modules/define.ts index 28d43d1cbb..127fb47f52 100644 --- a/app/src/modules/define.ts +++ b/app/src/modules/define.ts @@ -1,12 +1,10 @@ -import { i18n } from '@/lang/'; -import { ModuleDefineParam, ModuleContext, ModuleConfig } from './types'; +import { ModuleDefineParam, ModuleConfig } from './types'; -export function defineModule(config: ModuleDefineParam | ((context: ModuleContext) => ModuleConfig)): ModuleConfig { +export function defineModule(config: ModuleDefineParam): ModuleConfig { let options: ModuleConfig; if (typeof config === 'function') { - const context: ModuleContext = { i18n }; - options = config(context); + options = config(); } else { options = config; } diff --git a/app/src/modules/docs/index.ts b/app/src/modules/docs/index.ts index 3be618fb8c..1facecc1ad 100644 --- a/app/src/modules/docs/index.ts +++ b/app/src/modules/docs/index.ts @@ -4,7 +4,7 @@ import files, { Directory } from '@directus/docs'; import StaticDocs from './routes/static.vue'; import NotFound from './routes/not-found.vue'; -export default defineModule(({ i18n }) => { +export default defineModule(() => { const routes: RouteConfig[] = [ { path: '/', @@ -19,7 +19,7 @@ export default defineModule(({ i18n }) => { return { id: 'docs', - name: 'documentation', + name: '$t:documentation', icon: 'info', routes, order: 20, diff --git a/app/src/modules/files/index.ts b/app/src/modules/files/index.ts index 8af2f21fdd..673232256e 100644 --- a/app/src/modules/files/index.ts +++ b/app/src/modules/files/index.ts @@ -3,9 +3,9 @@ import Collection from './routes/collection.vue'; import Item from './routes/item.vue'; import AddNew from './routes/add-new.vue'; -export default defineModule(({ i18n }) => ({ +export default defineModule({ id: 'files', - name: 'file_library', + name: '$t:file_library', icon: 'folder', routes: [ { @@ -63,4 +63,4 @@ export default defineModule(({ i18n }) => ({ ); return !!permission; }, -})); +}); diff --git a/app/src/modules/index.ts b/app/src/modules/index.ts index 74e1606637..7a5b3f4061 100644 --- a/app/src/modules/index.ts +++ b/app/src/modules/index.ts @@ -1,3 +1,4 @@ +import { translateReactive } from '@/utils/translate-object-values'; import { ref, Ref } from '@vue/composition-api'; import { ModuleConfig } from './types'; @@ -8,5 +9,5 @@ export function getModules() { modules = ref([]); } - return modules; + return translateReactive(modules); } diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts index d40c81c3a6..13a566854f 100644 --- a/app/src/modules/settings/index.ts +++ b/app/src/modules/settings/index.ts @@ -19,9 +19,9 @@ import { useCollection } from '@/composables/use-collection'; import { ref } from '@vue/composition-api'; import { useCollectionsStore, useFieldsStore } from '@/stores'; -export default defineModule(({ i18n }) => ({ +export default defineModule({ id: 'settings', - name: 'settings', + name: '$t:settings', icon: 'settings', color: 'var(--warning)', routes: [ @@ -158,4 +158,4 @@ export default defineModule(({ i18n }) => ({ }, order: Infinity, persistent: true, -})); +}); diff --git a/app/src/modules/types.ts b/app/src/modules/types.ts index 401925b142..231a0aa63e 100644 --- a/app/src/modules/types.ts +++ b/app/src/modules/types.ts @@ -1,21 +1,20 @@ -import VueI18n from 'vue-i18n'; import { RouteConfig } from 'vue-router'; import { Ref } from '@vue/composition-api'; import { User, Permission } from '@/types'; -export type ModuleConfig = { +export interface ModuleConfig { id: string; + name: string; hidden?: boolean | Ref; icon: string; - name: string | VueI18n.TranslateResult; routes?: RouteConfig[]; link?: string; color?: string; preRegisterCheck?: (user: User, permissions: Permission[]) => boolean; order?: number; persistent?: boolean; -}; +} -export type ModuleContext = { i18n: VueI18n }; +export type ModuleContext = {}; -export type ModuleDefineParam = ModuleConfig | ((context: ModuleContext) => ModuleConfig); +export type ModuleDefineParam = ModuleConfig | (() => ModuleConfig); diff --git a/app/src/modules/users/index.ts b/app/src/modules/users/index.ts index 8568c02c5f..0649d52b95 100644 --- a/app/src/modules/users/index.ts +++ b/app/src/modules/users/index.ts @@ -3,9 +3,9 @@ import { defineModule } from '@/modules/define'; import Collection from './routes/collection.vue'; import Item from './routes/item.vue'; -export default defineModule(({ i18n }) => ({ +export default defineModule({ id: 'users', - name: 'user_directory', + name: '$t:user_directory', icon: 'people_alt', routes: [ { @@ -37,4 +37,4 @@ export default defineModule(({ i18n }) => ({ return !!permission; }, -})); +}); diff --git a/app/src/utils/translate-object-values.ts b/app/src/utils/translate-object-values.ts new file mode 100644 index 0000000000..e0afc0d683 --- /dev/null +++ b/app/src/utils/translate-object-values.ts @@ -0,0 +1,23 @@ +import { computed, Ref } from '@vue/composition-api'; +import { cloneDeep } from 'lodash'; +import i18n from '@/lang'; + +export function translateReactive(extensions: Ref) { + return computed({ + get() { + return translate(cloneDeep(extensions.value)); + }, + set(newVal: T) { + extensions.value = newVal; + }, + }); +} + +export function translate>(obj: T) { + Object.entries(obj).forEach(([key, val]) => { + if (val && typeof val === 'object') (obj as Record)[key] = translate(val); + if (val && typeof val === 'string' && val.startsWith('$t:')) + (obj as Record)[key] = i18n.t(val.replace('$t:', '')); + }); + return obj; +}