vueless 0.0.42 → 0.0.43

package/adatper.locale/locales/en.js

@@ -0,0 +1,21 @@
+import selectConfig from "../../ui.form-select/configs/default.config";
+import switchConfig from "../../ui.form-switch/configs/default.config";
+import inputFileConfig from "../../ui.form-input-file/configs/default.config";
+import dropdownListConfig from "../../ui.dropdown-list/configs/default.config";
+import modalConfirmConfig from "../../ui.container-modal-confirm/configs/default.config";
+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";
+
+export default {
+  USelect: selectConfig.i18n,
+  USwitch: switchConfig.i18n,
+  UInputFile: inputFileConfig.i18n,
+  UDropdownList: dropdownListConfig.i18n,
+  UModalConfirm: modalConfirmConfig.i18n,
+  UTable: tableConfig.i18n,
+  UCalendar: calendarConfig.i18n,
+  UDatePicker: datepickerConfig.i18n,
+  UDatePickerRange: datepickerRangeConfig.i18n,
+};

package/adatper.locale/vue-i18n.js

@@ -0,0 +1,11 @@
+export default function createVueI18nAdapter(i18n) {
+  return {
+    name: "vue-i18n",
+    locale: i18n.global.locale,
+    fallback: i18n.global.fallbackLocale,
+    messages: i18n.global.messages,
+    t: (key, ...params) => i18n.global.t(key, params),
+    tm: i18n.global.tm,
+    n: i18n.global.n,
+  };
+}

package/adatper.locale/vueless.js

@@ -0,0 +1,117 @@
+import { shallowRef, ref } from "vue";
+
+import en from "./locales/en";
+
+const FALLBACK_LOCALE_CODE = "en";
+
+export default function createVuelessAdapter(options) {
+  const current = shallowRef(options?.locale ?? FALLBACK_LOCALE_CODE);
+  const fallback = shallowRef(options?.fallback ?? FALLBACK_LOCALE_CODE);
+
+  const messages = ref({ en, ...options?.messages });
+
+  return {
+    name: "vueless",
+    locale: current,
+    fallback,
+    messages,
+    t: createTranslateFunction(current, fallback, messages),
+    tm: createTranslateMessageFunction(current, fallback, messages),
+    n: createNumberFunction(current, fallback),
+  };
+}
+
+function createTranslateFunction(current, fallback, messages) {
+  return (key, ...params) => {
+    const currentLocale = current.value && messages.value[current.value];
+    const fallbackLocale = fallback.value && messages.value[fallback.value];
+
+    let str = getObjectValueByPath(currentLocale, key, null);
+
+    if (!str) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Translation key "${key}" not found in "${current.value}", trying fallback locale`,
+      );
+      str = getObjectValueByPath(fallbackLocale, key, null);
+    }
+
+    if (!str) {
+      // eslint-disable-next-line no-console
+      console.warn(`Translation key "${key}" not found in fallback`);
+      str = key;
+    }
+
+    if (typeof str !== "string") {
+      // eslint-disable-next-line no-console
+      console.warn(`Translation key "${key}" has a non-string value`);
+      str = key;
+    }
+
+    return replace(str, params);
+  };
+}
+
+function createTranslateMessageFunction(current, fallback, messages) {
+  return (key) => {
+    const currentLocale = current.value && messages.value[current.value];
+    const fallbackLocale = fallback.value && messages.value[fallback.value];
+
+    let str = getObjectValueByPath(currentLocale, key, null);
+
+    if (str === undefined) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Translation key "${key}" not found in "${current.value}", trying fallback locale`,
+      );
+      str = getObjectValueByPath(fallbackLocale, key, null);
+    }
+
+    return str;
+  };
+}
+
+const replace = (str, params) => {
+  return str.replace(/\{(\d+)\}/g, (match, index) => {
+    return String(params[+index]);
+  });
+};
+
+function createNumberFunction(current, fallback) {
+  return (value, options) => {
+    const numberFormat = new Intl.NumberFormat([current.value, fallback.value], options);
+
+    return numberFormat.format(value);
+  };
+}
+
+export function getObjectValueByPath(obj, path, fallback) {
+  if (obj == null || !path || typeof path !== "string") return fallback;
+  if (obj[path] !== undefined) return obj[path];
+  path = path.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
+  path = path.replace(/^\./, ""); // strip a leading dot
+
+  return getNestedValue(obj, path.split("."), fallback);
+}
+
+export function getNestedValue(obj, path, fallback) {
+  const last = path.length - 1;
+
+  if (last < 0) {
+    return obj === undefined ? fallback : obj;
+  }
+
+  for (let i = 0; i < last; i++) {
+    if (obj == null) {
+      return fallback;
+    }
+
+    obj = obj[path[i]];
+  }
+
+  if (obj == null) {
+    return fallback;
+  }
+
+  return obj[path[last]] === undefined ? fallback : obj[path[last]];
+}

package/composable.locale/index.js

@@ -0,0 +1,25 @@
+import { inject } from "vue";
+import createVuelessAdapter from "../adatper.locale/vueless";
+
+export const LocaleSymbol = Symbol.for("vueless:locale");
+
+function isLocaleInstance(obj) {
+  return obj.name !== null;
+}
+
+export function createLocale(options) {
+  const i18n =
+    options?.adapter && isLocaleInstance(options?.adapter)
+      ? options?.adapter
+      : createVuelessAdapter(options);
+
+  return { ...i18n };
+}
+
+export function useLocale() {
+  const locale = inject(LocaleSymbol);
+
+  if (!locale) throw new Error("[vueless] Could not find injected locale instance");
+
+  return locale;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.container-modal-confirm/index.vue

@@ -43,7 +43,7 @@
 
         <UButton
           v-if="cancelButton"
-          :label="config.i18n.cancel"
+          :label="props.config?.i18n?.cancel || t('UModalConfirm.cancel')"
           variant="thirdary"
           filled
           :data-cy="`${dataCy}-close`"
@@ -70,6 +70,7 @@ import UModal from "../ui.container-modal";
 import defaultConfig from "./configs/default.config";
 import { UModalConfirm } from "./constants/index";
 import { useAttrs } from "./composable/attrs.composable";
+import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UModalConfirm", inheritAttrs: false });
@@ -152,8 +153,9 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "confirm", "close"]);
 
+const { t } = useLocale();
+
 const {
-  config,
   hasSlotContent,
   footerLeftFallbackAttrs,
   modalAttrs,

package/ui.data-table/index.vue

@@ -288,6 +288,7 @@ import TableService from "./services/table.service";
 import { HYPHEN_SYMBOL, PX_IN_REM } from "../service.ui";
 import { UTable } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UTable", inheritAttrs: false });
@@ -403,6 +404,7 @@ const emit = defineEmits(["clickRow", "update:rows"]);
 defineExpose({ clearSelectedItems });
 
 const slots = useSlots();
+const { t } = useLocale();
 
 const selectAll = ref(false);
 const canSelectAll = ref(true);
@@ -517,7 +519,9 @@ const hasContentBeforeFirstRowSlot = computed(() => {
 });
 
 const emptyTableMsg = computed(() => {
-  return props.filters ? config.value.i18n.noResultsForFilters : config.value.i18n.noItems;
+  return props.filters
+    ? props.config?.i18n?.noResultsForFilters || t("UTable.noResultsForFilters")
+    : props.config?.i18n?.noItems || t("UTable.noItems");
 });
 
 watch(selectAll, onChangeSelectAll, { deep: true });

package/ui.dropdown-list/index.vue

@@ -65,7 +65,7 @@
         :empty-styles="optionClasses"
       >
         <span v-bind="optionAttrs()">
-          <span v-text="config.i18n.noDataToShow" />
+          <span v-text="props.config?.i18n?.noDataToShow || t('UDropdownList.noDataToShow')" />
         </span>
       </slot>
 
@@ -73,7 +73,7 @@
       <template v-if="addOption">
         <div v-bind="addTitleWrapperAttrs" @click="onClickAddOption">
           <div v-bind="addTitleAttrs">
-            {{ config.i18n.add }}
+            {{ props.config?.i18n?.add || t("UDropdownList.add") }}
             <span v-bind="addTitleHotkeyAttrs" v-text="addOptionKeyCombination" />
           </div>
         </div>
@@ -95,6 +95,8 @@ import UIService, { getRandomId, isMac } from "../service.ui";
 
 import usePointer from "./composables/usePointer";
 import useAttrs from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
+
 import defaultConfig from "./configs/default.config.js";
 import { UDropdownList } from "./constants";
 
@@ -229,6 +231,8 @@ const {
   optionContentAttrs,
 } = useAttrs(props);
 
+const { t } = useLocale();
+
 defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
 
 const addOptionKeyCombination = computed(() => {

package/ui.form-calendar/index.vue

@@ -172,6 +172,7 @@ import {
 } from "./services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
 
 import {
   UCalendar,
@@ -288,6 +289,8 @@ const emit = defineEmits([
   "formattedDateChange",
 ]);
 
+const { tm } = useLocale();
+
 const {
   config,
   wrapperAttrs,
@@ -342,7 +345,8 @@ const isCurrentView = computed(() => ({
 }));
 
 const locale = computed(() => {
-  const currentLocale = props.config.i18n || config.value.i18n;
+  const currentLocale = props.config.i18n || tm("UCalendar");
+
   const formattedLocale = {
     ...currentLocale,
     months: {
@@ -359,7 +363,7 @@ const locale = computed(() => {
 });
 
 const userFormatLocale = computed(() => {
-  const currentLocale = props.config.i18n || config.value.i18n;
+  const currentLocale = props.config.i18n || tm("UCalendar");
 
   const formattedLocale = {
     ...currentLocale,

package/ui.form-date-picker/index.vue

@@ -67,6 +67,8 @@ import {
 } from "../ui.form-calendar/services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
+
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
 
@@ -201,6 +203,8 @@ const emit = defineEmits(["update:modelValue", "input"]);
 
 const STANDARD_USER_FORMAT = "l, j F, Y";
 
+const { tm } = useLocale();
+
 const isShownCalendar = ref(false);
 const userFormatDate = ref("");
 const formattedDate = ref("");
@@ -254,7 +258,7 @@ function onBlur(event) {
 function formatUserDate(data) {
   if (props.dateFormat !== STANDARD_USER_FORMAT) return data;
 
-  const currentLocale = props.config.i18n || config.value.i18n;
+  const currentLocale = props.config.i18n || tm("UDatePicker");
 
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);

package/ui.form-date-picker-range/index.vue

@@ -225,6 +225,8 @@ import {
 
 import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
+import { useLocale } from "../composable.locale";
+
 import defaultConfig from "./configs/default.config";
 import {
   UDatePickerRange,
@@ -383,6 +385,7 @@ const {
   inputRangeErrorAttrs,
 } = useAttrs(props, { isShownMenu });
 const store = useStore();
+const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
 const activeDate = ref(
@@ -414,7 +417,7 @@ const isMobileDevice = computed(() => store.getters["breakpoint/isMobileDevice"]
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 
 const locale = computed(() => {
-  const currentLocale = props.config.i18n || config.value.i18n;
+  const currentLocale = props.config.i18n || tm("UDatePickerRange");
   const formattedLocale = {
     ...currentLocale,
     months: {
@@ -431,7 +434,7 @@ const locale = computed(() => {
 });
 
 const userFormatLocale = computed(() => {
-  const currentLocale = props.config.i18n || config.value.i18n;
+  const currentLocale = props.config.i18n || tm("UDatePickerRange");
 
   const formattedLocale = {
     ...currentLocale,

package/ui.form-input-file/index.vue

@@ -17,10 +17,7 @@
               v-bind="iconUploadFileAttrs"
             />
 
-            <div
-              v-bind="descriptionAttrs"
-              v-text="`${config.i18n.selectOrDragImage} ${allowedFilesForUpload}`"
-            />
+            <div v-bind="descriptionAttrs" v-text="descriptionText" />
           </div>
 
           <div v-bind="listAttrs">
@@ -39,7 +36,7 @@
           </div>
 
           <UButton
-            :label="config.i18n.selectFile"
+            :label="props.config?.i18n?.selectFile || t('UInputFile.selectFile')"
             :size="size"
             variant="thirdary"
             filled
@@ -77,6 +74,7 @@ import UIService, { getRandomId } from "../service.ui";
 import { UInputFile } 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: "UInputFile" });
@@ -194,6 +192,8 @@ const slots = useSlots();
 
 const emit = defineEmits(["changeFiles", "deleteFile"]);
 
+const { t } = useLocale();
+
 const filesData = ref([]);
 const selectedFiles = ref([]);
 const errorMessage = ref("");
@@ -245,7 +245,11 @@ const uppyUpload = computed(() => {
 const allowedFilesForUpload = computed(() => {
   const allowedFormat = props.allowedFileTypes.join(", ");
 
-  return `${config.value.i18n.canAttachFilesFormat} ${allowedFormat}`;
+  return `${props.config?.i18n?.canAttachFilesFormat || t("UInputFile.canAttachFilesFormat")} ${allowedFormat}`;
+});
+
+const descriptionText = computed(() => {
+  return `${props.config?.i18n?.selectOrDragImage || t("UInputFile.selectOrDragImage")} ${allowedFilesForUpload.value}`;
 });
 
 const componentSize = computed(() => {
@@ -360,10 +364,13 @@ function onChangeError() {
 
 function onChangeErrorFilesTypes() {
   if (errorFilesTypes.value.length) {
-    let error = errorFilesTypes.value.join(", ");
-    const localization = config.value.i18n;
+    const error = errorFilesTypes.value.join(", ");
+    const cannotAttachFilesStart =
+      props.config?.i18n?.cannotAttachFilesStart || t("UInputFile.cannotAttachFilesStart");
+    const cannotAttachFilesEnd =
+      props.config?.i18n?.cannotAttachFilesEnd || t("UInputFile.cannotAttachFilesEnd");
 
-    errorMessage.value = `${localization.cannotAttachFilesStart} ${error} ${localization.cannotAttachFilesEnd}`;
+    errorMessage.value = `${cannotAttachFilesStart} ${error} ${cannotAttachFilesEnd}`;
   }
 }
 

package/ui.form-select/configs/default.config.js

@@ -114,7 +114,6 @@ export default /*tw*/ {
     noDataToShow: "No data to show.",
     clear: "clear",
     addMore: "Add more...",
-    add: "Add",
   },
   defaultVariants: {
     size: "md",

package/ui.form-select/index.vue

@@ -151,7 +151,7 @@
           v-bind="caretClearTextAttrs"
           @mousedown.prevent.capture="removeElement(localValue)"
           @click.prevent.capture
-          v-text="config.i18n.clear"
+          v-text="props.config?.i18n?.clear || t('USelect.clear')"
         />
       </div>
 
@@ -189,11 +189,15 @@
         </template>
 
         <template #empty="{ emptyStyles }">
-          <span v-show="isEmpty" :class="emptyStyles" v-text="config.i18n.listIsEmpty" />
+          <span
+            v-show="isEmpty"
+            :class="emptyStyles"
+            v-text="props.config?.i18n?.listIsEmpty || t('USelect.listIsEmpty')"
+          />
           <span
             v-show="options.length === 0 && !search && !isEmpty"
             :class="emptyStyles"
-            v-text="config.i18n.noDataToShow"
+            v-text="props.config?.i18n?.noDataToShow || t('USelect.noDataToShow')"
           />
         </template>
       </UDropdownList>
@@ -215,6 +219,8 @@ import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { USelect, DIRECTION, KEY_CODES } from "./constants";
 
+import { useLocale } from "../composable.locale";
+
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "USelect", inheritAttrs: false });
 
@@ -438,6 +444,7 @@ const emit = defineEmits([
 ]);
 
 const slots = useSlots();
+const { t } = useLocale();
 
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
@@ -486,7 +493,9 @@ const {
 } = useAttrs(props, { isTop, isOpen, selectedLabel });
 
 const inputPlaceholder = computed(() => {
-  return props.multiple && localValue.value.length ? config.value.i18n.addMore : props.placeholder;
+  const message = props.config?.i18n?.value.addMore || t("USelect.addMore");
+
+  return props.multiple && localValue.value.length ? message : props.placeholder;
 });
 
 const dropdownValue = computed({
@@ -572,7 +581,7 @@ if (props.addOption) {
   document.addEventListener("keydown", onKeydownAddOption);
 }
 
-onMounted(() => setLabelPosition());
+onMounted(setLabelPosition);
 
 const onSearchChange = debounce(async function (query) {
   emit("searchChange", query);

package/ui.form-switch/index.vue

@@ -46,6 +46,7 @@ import UIService, { getRandomId } from "../service.ui";
 import { USwitch } 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: "USwitch", inheritAttrs: false });
@@ -153,6 +154,8 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
+const { t } = useLocale();
+
 const checkedValue = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -162,7 +165,9 @@ const { config, iconAttrs, labelAttrs, inputAttrs, wrapperAttrs, circleAttrs, to
   useAttrs(props, { checked: checkedValue });
 
 const switchLabel = computed(() => {
-  return checkedValue.value ? config.value.i18n.active : config.value.i18n.inactive;
+  return checkedValue.value
+    ? props.config?.i18n?.active || t("USwitch.active")
+    : props.config?.i18n?.inactive || t("USwitch.inactive");
 });
 
 const iconSize = computed(() => {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "contributions": {
     "html": {
       "description-markup": "markdown",