Allow custom strings in i18n config #4243

.ws-context

@@ -0,0 +1,3 @@
+{
+  "framework": "vue"
+}

packages/ui/src/components/va-backtop/VaBacktop.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useComponentPresetProp, useTranslation } from '../../composables'
+import { useComponentPresetProp, useTranslation, useTranslationProp } from '../../composables'
 import { VaButton } from '../va-button'
 import { isServer } from '../../utils/ssr'
 import { warn } from '../../utils/console'
@@ -51,7 +51,7 @@ const props = defineProps({
     default: 'bottom',
     validator: (value: string) => ['bottom', 'top'].includes(value),
   },
-  ariaLabel: { type: String, default: '$t:backToTop' },
+  ariaLabel: useTranslationProp('$t:backToTop'),
 })
 
 const targetScrollValue = ref(0)
@@ -130,7 +130,7 @@ if (!server) {
   onBeforeUnmount(() => targetElement?.removeEventListener('scroll', handleScroll))
 }
 
-const { tp, t } = useTranslation()
+const { tp } = useTranslation()
 </script>
 
 <style lang="scss">

packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue

@@ -1,7 +1,13 @@
 <script lang="ts">
 import { computed, defineComponent, Fragment, h, ref, VNode } from 'vue'
 
-import { useComponentPresetProp, useAlign, useAlignProps, useColors, useTranslation } from '../../composables'
+import {
+  useComponentPresetProp,
+  useAlign,
+  useAlignProps,
+  useColors,
+  useTranslation, useTranslationProp,
+} from '../../composables'
 
 import { hasOwnProperty } from '../../utils/has-own-property'
 import { resolveSlot } from '../../utils/resolveSlot'
@@ -16,7 +22,7 @@ export default defineComponent({
     disabledColor: { type: String, default: 'secondary' },
     activeColor: { type: String, default: null },
     separatorColor: { type: String, default: null },
-    ariaLabel: { type: String, default: '$t:breadcrumbs' },
+    ariaLabel: useTranslationProp('$t:breadcrumbs'),
   },
   setup (props, { slots }) {
     const { alignComputed } = useAlign(props)

packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue

@@ -87,7 +87,7 @@ import {
   useStateful, useStatefulProps,
   useEmitProxy,
   usePlacementAliasesProps,
-  useTranslation,
+  useTranslation, useTranslationProp,
 } from '../../composables'
 
 import { VaButton } from '../va-button'
@@ -139,7 +139,7 @@ const props = defineProps({
   loading: { type: Boolean, default: false },
   label: { type: String },
 
-  ariaLabel: { type: String, default: '$t:toggleDropdown' },
+  ariaLabel: useTranslationProp('$t:toggleDropdown'),
 })
 
 const emit = defineEmits(['update:modelValue', ...createEmits(), ...createMainButtonEmits()])

packages/ui/src/components/va-carousel/VaCarousel.vue

@@ -103,7 +103,7 @@ import { useCarouselColor } from './hooks/useCarouselColors'
 import {
   useStateful, useStatefulProps, useStatefulEmits,
   useSwipe, useSwipeProps, useComponentPresetProp,
-  useTranslation,
+  useTranslation, useTranslationProp,
 } from '../../composables'
 
 import { VaImage } from '../va-image'
@@ -158,11 +158,11 @@ const props = defineProps({
   color: { type: String, default: 'primary' },
   ratio: { type: Number },
 
-  ariaLabel: { type: String, default: '$t:carousel' },
-  ariaPreviousLabel: { type: String, default: '$t:goPreviousSlide' },
-  ariaNextLabel: { type: String, default: '$t:goNextSlide' },
-  ariaGoToSlideLabel: { type: String, default: '$t:goSlide' },
-  ariaSlideOfLabel: { type: String, default: '$t:slideOf' },
+  ariaLabel: useTranslationProp('$t:carousel'),
+  ariaPreviousLabel: useTranslationProp('$t:goPreviousSlide'),
+  ariaNextLabel: useTranslationProp('$t:goNextSlide'),
+  ariaGoToSlideLabel: useTranslationProp('$t:goSlide'),
+  ariaSlideOfLabel: useTranslationProp('$t:slideOf'),
 })
 
 const emit = defineEmits([...useStatefulEmits])

packages/ui/src/components/va-chip/VaChip.vue

@@ -59,7 +59,7 @@ import {
   useHover,
   useTextColor,
   useBem,
-  useTranslation,
+  useTranslation, useTranslationProp,
 } from '../../composables'
 
 import { VaIcon } from '../va-icon'
@@ -89,7 +89,7 @@ const props = defineProps({
     validator: (value: string) => ['small', 'medium', 'large'].includes(value),
   },
 
-  ariaCloseLabel: { type: String, default: '$t:close' },
+  ariaCloseLabel: useTranslationProp('$t:close'),
 })
 
 const emit = defineEmits([...useStatefulEmits, 'focus'])

packages/ui/src/components/va-color-input/VaColorInput.vue

@@ -36,7 +36,7 @@
 <script lang="ts">
 import { PropType, shallowRef, computed } from 'vue'
 
-import { useComponentPresetProp, useStateful, useStatefulProps, useStatefulEmits, useTranslation } from '../../composables'
+import { useComponentPresetProp, useStateful, useStatefulProps, useStatefulEmits, useTranslation, useTranslationProp } from '../../composables'
 
 import { VaColorIndicator } from '../va-color-indicator'
 import { VaInput } from '../va-input'
@@ -63,7 +63,7 @@ const props = defineProps({
     default: 'dot',
     validator: (value: string) => ['dot', 'square'].includes(value),
   },
-  ariaOpenColorPickerLabel: { type: String, default: '$t:openColorPicker' },
+  ariaOpenColorPickerLabel: useTranslationProp('$t:openColorPicker'),
 })
 
 const emit = defineEmits([...useStatefulEmits])

packages/ui/src/components/va-color-palette/VaColorPalette.vue

@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue'
 
-import { useComponentPresetProp, useStateful, useStatefulProps, useStatefulEmits, useTranslation } from '../../composables'
+import { useComponentPresetProp, useStateful, useStatefulProps, useStatefulEmits, useTranslation, useTranslationProp } from '../../composables'
 
 import { VaColorIndicator } from '../va-color-indicator'
 
@@ -40,8 +40,8 @@ const props = defineProps({
     default: 'dot',
     validator: (value: string) => ['dot', 'square'].includes(value),
   },
-  ariaLabel: { type: String, default: '$t:colorSelection' },
-  ariaIndicatorLabel: { type: String, default: '$t:color' },
+  ariaLabel: useTranslationProp('$t:colorSelection'),
+  ariaIndicatorLabel: useTranslationProp('$t:color'),
 })
 
 const emit = defineEmits([...useStatefulEmits])

packages/ui/src/components/va-counter/VaCounter.vue

@@ -109,7 +109,7 @@ import {
   useFocus, useFocusEmits,
   useStateful, useStatefulProps,
   useColors,
-  useTranslation,
+  useTranslation, useTranslationProp,
   useLongPress,
   useTemplateRef,
   useValidation,
@@ -166,9 +166,9 @@ const props = defineProps({
   margins: { type: [String, Number], default: '4px' },
   longPressDelay: { type: Number, default: 500 },
 
-  ariaLabel: { type: String, default: '$t:counterValue' },
-  ariaDecreaseLabel: { type: String, default: '$t:decreaseCounter' },
-  ariaIncreaseLabel: { type: String, default: '$t:increaseCounter' },
+  ariaLabel: useTranslationProp('$t:counterValue'),
+  ariaDecreaseLabel: useTranslationProp('$t:decreaseCounter'),
+  ariaIncreaseLabel: useTranslationProp('$t:increaseCounter'),
 })
 
 const emit = defineEmits([

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -214,7 +214,7 @@ import { useFilterable, useFilterableProps } from './hooks/useFilterable'
 import { useSortable, useSortableProps } from './hooks/useSortable'
 import { useTableScroll, useTableScrollProps, useTableScrollEmits } from './hooks/useTableScroll'
 
-import { useComponentPresetProp, useTranslation, useThrottleProps } from '../../composables'
+import { useComponentPresetProp, useTranslation, useTranslationProp, useThrottleProps } from '../../composables'
 
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
 
@@ -281,7 +281,7 @@ const props = defineProps({
   gridColumns: { type: [Number, String], default: 0 },
   wrapperSize: { type: [Number, String] as PropType<number | string | 'auto'>, default: 'auto' },
 
-  ariaSelectRowLabel: { type: String, default: '$t:selectRowByIndex' },
+  ariaSelectRowLabel: useTranslationProp('$t:selectRowByIndex'),
 })
 
 const emit = defineEmits([

packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue

@@ -72,7 +72,7 @@ import { useStylable, useStylableProps } from '../hooks/useStylable'
 
 import type { TSortIcon } from '../hooks/useSortable'
 
-import { useTranslation } from '../../../composables'
+import { useTranslation, useTranslationProp } from '../../../composables'
 
 import {
   DataTableSortingOrder,
@@ -98,8 +98,8 @@ const props = defineProps({
   sortingOrderIconName: { type: String as PropType<TSortIcon>, required: true },
   sortingOrderSync: { type: String as PropType<DataTableSortingOrder | null>, default: null },
 
-  ariaSelectAllRowsLabel: { type: String, default: '$t:selectAllRows' },
-  ariaSortColumnByLabel: { type: String, default: '$t:sortColumnBy' },
+  ariaSelectAllRowsLabel: useTranslationProp('$t:selectAllRows'),
+  ariaSortColumnByLabel: useTranslationProp('$t:sortColumnBy'),
 })
 
 const emit = defineEmits([

packages/ui/src/components/va-date-input/VaDateInput.vue

@@ -92,7 +92,7 @@ import {
   useDropdownable,
   useDropdownableProps,
   useDropdownableEmits,
-  useFocus, useFocusEmits, useTranslation, useFocusDeep, useTrapFocus,
+  useFocus, useFocusEmits, useTranslation, useTranslationProp, useFocusDeep, useTrapFocus,
 } from '../../composables'
 import { useRangeModelValueGuard } from './hooks/range-model-value-guard'
 import { useDateParser } from './hooks/input-text-parser'
@@ -148,9 +148,9 @@ const props = defineProps({
   leftIcon: { type: Boolean, default: false },
   icon: { type: String, default: 'va-calendar' },
 
-  ariaToggleDropdownLabel: { type: String, default: '$t:toggleDropdown' },
-  ariaResetLabel: { type: String, default: '$t:resetDate' },
-  ariaSelectedDateLabel: { type: String, default: '$t:selectedDate' },
+  ariaToggleDropdownLabel: useTranslationProp('$t:toggleDropdown'),
+  ariaResetLabel: useTranslationProp('$t:resetDate'),
+  ariaSelectedDateLabel: useTranslationProp('$t:selectedDate'),
 })
 
 const emit = defineEmits([

packages/ui/src/components/va-date-picker/components/VaDatePickerHeader/VaDatePickerHeader.vue

@@ -64,7 +64,7 @@ import { useView } from '../../hooks/view'
 import { DatePickerView } from '../../types'
 
 import { VaButton } from '../../../va-button'
-import { useCurrentElement, useElementTextColor, useElementBackground, useTranslation } from '../../../../composables'
+import { useCurrentElement, useElementTextColor, useElementBackground, useTranslation, useTranslationProp } from '../../../../composables'
 
 defineOptions({
   name: 'VaDatePickerHeader',
@@ -76,9 +76,9 @@ const props = defineProps({
   color: { type: String },
   disabled: { type: Boolean, default: false },
 
-  ariaNextPeriodLabel: { type: String, default: '$t:nextPeriod' },
-  ariaPreviousPeriodLabel: { type: String, default: '$t:previousPeriod' },
-  ariaSwitchViewLabel: { type: String, default: '$t:switchView' },
+  ariaNextPeriodLabel: useTranslationProp('$t:nextPeriod'),
+  ariaPreviousPeriodLabel: useTranslationProp('$t:previousPeriod'),
+  ariaSwitchViewLabel: useTranslationProp('$t:switchView'),
 })
 
 const emit = defineEmits(['update:view'])

packages/ui/src/components/va-dropdown/VaDropdown.vue

@@ -22,7 +22,7 @@ import {
   useIsMounted,
   useStateful,
   useStatefulEmits,
-  useTranslation,
+  useTranslation, useTranslationProp,
   usePlacementAliasesProps,
 } from '../../composables'
 import { renderSlotNode } from '../../utils/headless'
@@ -73,7 +73,7 @@ export default defineComponent({
     teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
     /** Not reactive */
     keyboardNavigation: { type: Boolean, default: true },
-    ariaLabel: { type: String, default: '$t:toggleDropdown' },
+    ariaLabel: useTranslationProp('$t:toggleDropdown'),
     role: { type: String as PropType<StringWithAutocomplete<'button' | 'none'>>, default: 'button' },
     contentClass: { type: String, default: '' },
   },

packages/ui/src/components/va-file-upload/VaFileUpload.vue

@@ -60,7 +60,7 @@
 <script lang="ts">
 import { computed, onMounted, ref, toRef, shallowRef, provide, PropType } from 'vue'
 
-import { useColors, useComponentPresetProp, useBem, useTranslation } from '../../composables'
+import { useColors, useComponentPresetProp, useBem, useTranslation, useTranslationProp } from '../../composables'
 
 import { VaFileUploadKey, VaFile } from './types'
 
@@ -87,10 +87,10 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   undo: { type: Boolean, default: false },
   undoDuration: { type: Number, default: 3000 },
-  undoButtonText: { type: String, default: '$t:undo' },
-  dropZoneText: { type: String, default: '$t:dropzone' },
-  uploadButtonText: { type: String, default: '$t:uploadFile' },
-  deletedFileMessage: { type: String, default: '$t:fileDeleted' },
+  undoButtonText: useTranslationProp('$t:undo'),
+  dropZoneText: useTranslationProp('$t:dropzone'),
+  uploadButtonText: useTranslationProp('$t:uploadFile'),
+  deletedFileMessage: useTranslationProp('$t:fileDeleted'),
   modelValue: {
     type: [Object, Array] as PropType<VaFile | VaFile[]>,
     default: () => [],

packages/ui/src/components/va-file-upload/VaFileUploadGalleryItem/VaFileUploadGalleryItem.vue

@@ -51,7 +51,7 @@
 import { onMounted, PropType, ref, watch, computed, toRef } from 'vue'
 
 import { colorToRgba } from '../../../services/color'
-import { useFocus, useBem, useStrictInject, useTranslation } from '../../../composables'
+import { useFocus, useBem, useStrictInject, useTranslation, useTranslationProp } from '../../../composables'
 
 import { VaFileUploadKey, ConvertedFile } from '../types'
 import { useTextColor } from '../../../composables/useTextColor'
@@ -72,7 +72,7 @@ const props = defineProps({
   file: { type: Object as PropType<ConvertedFile>, default: null },
   color: { type: String, default: 'success' },
 
-  ariaRemoveFileLabel: { type: String, default: '$t:removeFile' },
+  ariaRemoveFileLabel: useTranslationProp('$t:removeFile'),
 })
 
 const emit = defineEmits(['remove'])

packages/ui/src/components/va-file-upload/VaFileUploadListItem/VaFileUploadListItem.vue

@@ -38,7 +38,7 @@
 <script lang="ts">
 import { ref, PropType } from 'vue'
 
-import { useBem, useFocus, useStrictInject, useTranslation } from '../../../composables'
+import { useBem, useFocus, useStrictInject, useTranslation, useTranslationProp } from '../../../composables'
 import { VaFileUploadKey, ConvertedFile } from '../types'
 
 import { VaButton } from '../../va-button'
@@ -59,7 +59,7 @@ const props = defineProps({
   file: { type: Object as PropType<ConvertedFile | null>, default: null },
   color: { type: String, default: 'success' },
 
-  ariaRemoveFileLabel: { type: String, default: '$t:removeFile' },
+  ariaRemoveFileLabel: useTranslationProp('$t:removeFile'),
 })
 
 const emit = defineEmits(['remove'])

packages/ui/src/components/va-file-upload/VaFileUploadSingleItem/VaFileUploadSingleItem.vue

@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import { PropType } from 'vue'
-import { useStrictInject, useTranslation } from '../../../composables'
+import { useStrictInject, useTranslation, useTranslationProp } from '../../../composables'
 
 import { VaButton, VaListItem, VaListItemSection } from '../../index'
 import { VaFileUploadKey, ConvertedFile } from '../types'
@@ -42,7 +42,7 @@ defineOptions({
 
 const props = defineProps({
   file: { type: Object as PropType<ConvertedFile | null>, default: null },
-  ariaRemoveFileLabel: { type: String, default: '$t:removeFile' },
+  ariaRemoveFileLabel: useTranslationProp('$t:removeFile'),
 })
 
 const emit = defineEmits(['remove'])

packages/ui/src/components/va-input-wrapper/hooks/useInputFieldAria.ts

@@ -1,9 +1,10 @@
 import { ExtractPropTypes, Ref, computed } from 'vue'
 import { useComponentUuid } from '../../../composables/useComponentUuid'
+import { useTranslationProp } from '../../../composables'
 
 export const useInputFieldAriaProps = {
   label: { type: String, default: '' },
-  inputAriaLabel: { type: String, default: '$t:inputField' },
+  inputAriaLabel: useTranslationProp('$t:inputField'),
   inputAriaLabelledby: { type: String },
   inputAriaDescribedby: { type: String },
 }

packages/ui/src/components/va-input/VaInput.vue

@@ -59,7 +59,7 @@ import {
   useValidation, useValidationProps, useValidationEmits,
   useEmitProxy,
   useClearable, useClearableProps, useClearableEmits,
-  useTranslation,
+  useTranslation, useTranslationProp,
   useStateful, useStatefulProps, useStatefulEmits, useDeprecatedCondition,
   useFocusable, useFocusableProps, useEvent,
 } from '../../composables'
@@ -115,7 +115,7 @@ const props = defineProps({
   counter: { type: Boolean, default: false },
 
     // style
-  ariaResetLabel: { type: String, default: '$t:reset' },
+  ariaResetLabel: useTranslationProp('$t:reset'),
 
     /** Set value to input when model value is updated */
   strictBindInputValue: { type: Boolean, default: false },