Merge pull request #11 from Explicit12/Add-locale-merge

Added locale merge to components
vuelessjs · Apr 29, 2024 · 2e264b2 · 2e264b2
2 parents 6cd1107 + 1c6bd68
commit 2e264b2
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 34 deletions.
diff --git a/src/adatper.locale/locales/en.js b/src/adatper.locale/locales/en.js
@@ -7,6 +7,7 @@ import tableConfig from "../../ui.data-table/configs/default.config";
 import calendarConfig from "../../ui.form-calendar/configs/default.config";
 import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
+import dataListConfig from "../../ui.data-list/configs/default.config";
 
 export default {
   USelect: selectConfig.i18n,
@@ -18,4 +19,5 @@ export default {
   UCalendar: calendarConfig.i18n,
   UDatePicker: datepickerConfig.i18n,
   UDatePickerRange: datepickerRangeConfig.i18n,
+  UDataList: dataListConfig.i18n,
 };
diff --git a/src/ui.container-modal-confirm/index.vue b/src/ui.container-modal-confirm/index.vue
@@ -43,7 +43,7 @@
 
         <UButton
           v-if="cancelButton"
-          :label="props.config?.i18n?.cancel || t('UModalConfirm.cancel')"
+          :label="currentLocale.cancel"
           variant="thirdary"
           filled
           :data-cy="`${dataCy}-close`"
@@ -61,6 +61,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { merge } from "lodash-es";
 
 import UIService from "../service.ui";
 
@@ -153,7 +154,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "confirm", "close"]);
 
-const { t } = useLocale();
+const { tm } = useLocale();
 
 const {
   hasSlotContent,
@@ -168,6 +169,8 @@ const isShownModal = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const currentLocale = computed(() => merge(tm("UModalConfirm"), props.config.i18n));
+
 function closeModal() {
   isShownModal.value = false;
 }

diff --git a/src/ui.data-list/configs/default.config.js b/src/ui.data-list/configs/default.config.js
@@ -23,6 +23,10 @@ export default /*tw*/ {
   iconEdit: "fill-gray-500 opacity-50",
   iconEditName: "edit_note",
   nested: "group/nested ml-6",
+  i18n: {
+    delete: "Delete",
+    edit: "Edit",
+  },
   defaultVariants: {
     animationDuration: 200,
     nesting: false,

diff --git a/src/ui.data-list/index.vue b/src/ui.data-list/index.vue
@@ -48,7 +48,7 @@
                 :name="config.iconDeleteName"
                 color="gray"
                 :data-cy="`${dataCy}-delete`"
-                :tooltip="$t('button.delete')"
+                :tooltip="currentLocale.delete"
                 v-bind="iconDeleteAttrs"
                 @click="onClickDelete(element.id, element.name)"
               />
@@ -59,7 +59,7 @@
                 :name="config.iconEditName"
                 color="gray"
                 :data-cy="`${dataCy}-edit`"
-                :tooltip="$t('button.edit')"
+                :tooltip="currentLocale.edit"
                 v-bind="iconEditAttrs"
                 @click="onClickEdit(element.id)"
               />
@@ -96,7 +96,9 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import draggable from "vuedraggable";
+import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
@@ -106,6 +108,7 @@ import UIService from "../service.ui";
 import { UDataListName } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDataList", inheritAttrs: true });
@@ -211,6 +214,9 @@ const {
   iconDragAttrs,
   hasSlotContent,
 } = useAttrs(props);
+const { tm } = useLocale();
+
+const currentLocale = computed(() => merge(tm("UDataList"), props.config.i18n));
 
 function onDragMove(event) {
   const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;

diff --git a/src/ui.data-table/index.vue b/src/ui.data-table/index.vue
@@ -272,6 +272,7 @@ import {
   nextTick,
   onBeforeUnmount,
 } from "vue";
+import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
@@ -404,7 +405,7 @@ const emit = defineEmits(["clickRow", "update:rows"]);
 defineExpose({ clearSelectedItems });
 
 const slots = useSlots();
-const { t } = useLocale();
+const { tm } = useLocale();
 
 const selectAll = ref(false);
 const canSelectAll = ref(true);
@@ -475,6 +476,8 @@ const {
   headerAttrs,
 } = useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky });
 
+const currentLocale = computed(() => merge(tm("UTable"), props.config.i18n));
+
 const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
 
 const isSelectedAllRows = computed(() => {
@@ -519,9 +522,7 @@ const hasContentBeforeFirstRowSlot = computed(() => {
 });
 
 const emptyTableMsg = computed(() => {
-  return props.filters
-    ? props.config?.i18n?.noResultsForFilters || t("UTable.noResultsForFilters")
-    : props.config?.i18n?.noItems || t("UTable.noItems");
+  return props.filters ? currentLocale.value.noResultsForFilters : currentLocale.value.noItems;
 });
 
 watch(selectAll, onChangeSelectAll, { deep: true });

diff --git a/src/ui.dropdown-list/index.vue b/src/ui.dropdown-list/index.vue
@@ -65,15 +65,15 @@
         :empty-styles="optionClasses"
       >
         <span v-bind="optionAttrs()">
-          <span v-text="props.config?.i18n?.noDataToShow || t('UDropdownList.noDataToShow')" />
+          <span v-text="currentLocale.noDataToShow" />
         </span>
       </slot>
 
       <!-- Add button -->
       <template v-if="addOption">
         <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
           <div v-bind="addTitleAttrs">
-            {{ props.config?.i18n?.add || t("UDropdownList.add") }}
+            {{ currentLocale.add }}
             <span v-bind="addTitleHotkeyAttrs" v-text="addOptionKeyCombination" />
           </div>
         </div>
@@ -87,6 +87,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
+import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
@@ -231,10 +232,12 @@ const {
   optionContentAttrs,
 } = useAttrs(props);
 
-const { t } = useLocale();
+const { tm } = useLocale();
 
 defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
 
+const currentLocale = computed(() => merge(tm("UDropdownList"), props.config.i18n));
+
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });

diff --git a/src/ui.form-date-picker-range/index.vue b/src/ui.form-date-picker-range/index.vue
@@ -633,7 +633,7 @@ function onClickPeriodButton(periodName) {
     localValue.value.from !== null ? getDateFromUnixTimestamp(localValue.value.from) : new Date();
 
   if (periodName === PERIOD.week) {
-    periodDateList.value = getWeekDateList(localDate, config.value.i18n.months.shorthand);
+    periodDateList.value = getWeekDateList(localDate, locale.value.months.shorthand);
 
     period.value = PERIOD.week;
   }

diff --git a/src/ui.form-input-file/index.vue b/src/ui.form-input-file/index.vue
@@ -36,7 +36,7 @@
           </div>
 
           <UButton
-            :label="props.config?.i18n?.selectFile || t('UInputFile.selectFile')"
+            :label="currentLocale.selectFile"
             :size="size"
             variant="thirdary"
             filled
@@ -61,6 +61,7 @@
 <script setup>
 import Uppy from "@uppy/core";
 import DragDrop from "@uppy/vue/src/drag-drop";
+import { merge } from "lodash-es";
 
 import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
 
@@ -192,7 +193,7 @@ const slots = useSlots();
 
 const emit = defineEmits(["changeFiles", "deleteFile"]);
 
-const { t } = useLocale();
+const { tm } = useLocale();
 
 const filesData = ref([]);
 const selectedFiles = ref([]);
@@ -217,6 +218,8 @@ const {
   hasSlotContent,
 } = useAttrs(props, { errorMessage, dragOver });
 
+const currentLocale = computed(() => merge(tm("UInputFile"), props.config.i18n));
+
 const filesList = computed(() => {
   return filesData.value.map((file) => {
     return {
@@ -245,11 +248,11 @@ const uppyUpload = computed(() => {
 const allowedFilesForUpload = computed(() => {
   const allowedFormat = props.allowedFileTypes.join(", ");
 
-  return `${props.config?.i18n?.canAttachFilesFormat || t("UInputFile.canAttachFilesFormat")} ${allowedFormat}`;
+  return `${currentLocale.value.canAttachFilesFormat} ${allowedFormat}`;
 });
 
 const descriptionText = computed(() => {
-  return `${props.config?.i18n?.selectOrDragImage || t("UInputFile.selectOrDragImage")} ${allowedFilesForUpload.value}`;
+  return `${currentLocale.value.selectOrDragImage} ${allowedFilesForUpload.value}`;
 });
 
 const componentSize = computed(() => {
@@ -365,10 +368,8 @@ function onChangeError() {
 function onChangeErrorFilesTypes() {
   if (errorFilesTypes.value.length) {
     const error = errorFilesTypes.value.join(", ");
-    const cannotAttachFilesStart =
-      props.config?.i18n?.cannotAttachFilesStart || t("UInputFile.cannotAttachFilesStart");
-    const cannotAttachFilesEnd =
-      props.config?.i18n?.cannotAttachFilesEnd || t("UInputFile.cannotAttachFilesEnd");
+    const cannotAttachFilesStart = currentLocale.value.cannotAttachFilesStart;
+    const cannotAttachFilesEnd = currentLocale.value.cannotAttachFilesEnd;
 
     errorMessage.value = `${cannotAttachFilesStart} ${error} ${cannotAttachFilesEnd}`;
   }

diff --git a/src/ui.form-select/index.vue b/src/ui.form-select/index.vue
@@ -151,7 +151,7 @@
           v-bind="caretClearTextAttrs"
           @mousedown.prevent.capture="removeElement(localValue)"
           @click.prevent.capture
-          v-text="props.config?.i18n?.clear || t('USelect.clear')"
+          v-text="currentLocale.clear"
         />
       </div>
 
@@ -189,15 +189,11 @@
         </template>
 
         <template #empty="{ emptyStyles }">
-          <span
-            v-show="isEmpty"
-            :class="emptyStyles"
-            v-text="props.config?.i18n?.listIsEmpty || t('USelect.listIsEmpty')"
-          />
+          <span v-show="isEmpty" :class="emptyStyles" v-text="currentLocale.listIsEmpty" />
           <span
             v-show="options.length === 0 && !search && !isEmpty"
             :class="emptyStyles"
-            v-text="props.config?.i18n?.noDataToShow || t('USelect.noDataToShow')"
+            v-text="currentLocale.noDataToShow"
           />
         </template>
       </UDropdownList>
@@ -207,7 +203,7 @@
 
 <script setup>
 import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
-import { debounce } from "lodash-es";
+import { debounce, merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
@@ -444,7 +440,7 @@ const emit = defineEmits([
 ]);
 
 const slots = useSlots();
-const { t } = useLocale();
+const { tm } = useLocale();
 
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
@@ -492,8 +488,10 @@ const {
   dropdownListAttrs,
 } = useAttrs(props, { isTop, isOpen, selectedLabel });
 
+const currentLocale = computed(() => merge(tm("USelect"), props.config.i18n));
+
 const inputPlaceholder = computed(() => {
-  const message = props.config?.i18n?.value.addMore || t("USelect.addMore");
+  const message = currentLocale.value.addMore;
 
   return props.multiple && localValue.value.length ? message : props.placeholder;
 });

diff --git a/src/ui.form-switch/index.vue b/src/ui.form-switch/index.vue
@@ -38,6 +38,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
@@ -154,7 +155,9 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { t } = useLocale();
+const { tm } = useLocale();
+
+const currentLocale = computed(() => merge(tm("USwitch"), props.config.i18n));
 
 const checkedValue = computed({
   get: () => props.modelValue,
@@ -165,9 +168,7 @@ const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, to
   useAttrs(props, { checked: checkedValue });
 
 const switchLabel = computed(() => {
-  return checkedValue.value
-    ? props.config?.i18n?.active || t("USwitch.active")
-    : props.config?.i18n?.inactive || t("USwitch.inactive");
+  return checkedValue.value ? currentLocale.value.active : currentLocale.value.inactive;
 });
 
 const iconSize = computed(() => {