vueless 0.0.49 → 0.0.51

package/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,
 };

package/composable.breakpoint/index.js

@@ -0,0 +1,93 @@
+import { onMounted, ref, watch, computed } from "vue";
+
+const BREAKPOINT_NAME = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl",
+};
+
+const BREAKPOINT = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+const mobileDevices = ["xs", "sm"];
+const portableDevices = ["xs", "sm", "md"];
+
+export default function useBreakpoint() {
+  let timeout;
+
+  const windowWidth = ref(undefined);
+  const currentBreakpoint = ref(BREAKPOINT_NAME.xs);
+
+  const isMobileBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isTabletBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isLaptopBreakpoint = computed(() => {
+    return currentBreakpoint.value === BREAKPOINT_NAME.lg;
+  });
+
+  const isPortableBreakpoint = computed(() => {
+    return portableDevices.includes(currentBreakpoint.value);
+  });
+
+  const elementSize = computed(() => {
+    return isMobileBreakpoint.value ? BREAKPOINT_NAME.md : BREAKPOINT_NAME.lg;
+  });
+
+  onMounted(() => {
+    windowWidth.value = window.innerWidth;
+
+    window.addEventListener(resizeListener, { passive: true });
+  });
+
+  watch(windowWidth, setBreakpoint, { immediate: true });
+
+  function resizeListener() {
+    if (timeout) {
+      window.cancelAnimationFrame(timeout);
+    }
+
+    timeout = window.requestAnimationFrame(() => {
+      windowWidth.value = window.innerWidth;
+    });
+  }
+
+  function setBreakpoint(newWindowWidth) {
+    if (newWindowWidth === undefined) return;
+
+    currentBreakpoint.value = "xs";
+
+    if (newWindowWidth >= BREAKPOINT.sm && newWindowWidth < BREAKPOINT.smd) {
+      currentBreakpoint.value = "sm";
+    } else if (newWindowWidth >= BREAKPOINT.md && newWindowWidth < BREAKPOINT.lg) {
+      currentBreakpoint.value = "md";
+    } else if (newWindowWidth >= BREAKPOINT.lg && newWindowWidth < BREAKPOINT.xl) {
+      currentBreakpoint.value = "lg";
+    } else if (newWindowWidth >= BREAKPOINT.xl && newWindowWidth < BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "xl";
+    } else if (newWindowWidth >= BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "2xl";
+    }
+  }
+
+  return {
+    isLaptopBreakpoint,
+    isTabletBreakpoint,
+    isMobileBreakpoint,
+    isPortableBreakpoint,
+    elementSize,
+  };
+}

package/package.json

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

package/ui.container-card/composable/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
@@ -33,7 +33,7 @@ export function useAttrs(props, { isMobileDevice }) {
 
   const footerAttrs = computed(() => {
     const footerMobileReverseClasses =
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse;
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse;
 
     return {
       ...footerAttrsRaw.value,

package/ui.container-card/index.vue

@@ -40,7 +40,6 @@
 
 <script setup>
 import { computed, useSlots } from "vue";
-import { useStore } from "vuex";
 
 import UIService from "../service.ui";
 import UHeader from "../ui.text-header";
@@ -49,11 +48,11 @@ import UDivider from "../ui.container-divider";
 import { UCard } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composable/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCard", inheritAttrs: false });
 
-const store = useStore();
 const slots = useSlots();
 
 const props = defineProps({
@@ -127,9 +126,7 @@ const isShownFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   hasSlotContent,
@@ -142,5 +139,5 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 </script>

package/ui.container-modal/composables/attrs.composable.js

@@ -2,13 +2,14 @@ import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { useStore } from "vuex";
 import { computed } from "vue";
 
+import useBreakpoint from "../../composable.breakpoint";
+
 export function useAttrs(props) {
-  const store = useStore();
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config, "wrapper");
   const { modal } = config.value;
+  const { isMobileBreakpoint } = useBreakpoint();
 
   const cvaModal = cva({
     base: modal.base,
@@ -44,9 +45,7 @@ export function useAttrs(props) {
     ...headerAttrsRaw.value,
     class: cx([
       headerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 
@@ -54,9 +53,7 @@ export function useAttrs(props) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/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;
 }

package/ui.container-page/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva, cx, isMobileApp } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper, page, rightRounding } = config.value;
 
@@ -62,7 +62,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...wrapperAttrsRaw.value,
     class: cx([
       wrapperAttrsRaw.value.class,
-      isMobileDevice.value && !isMobileApp && config.value.wrapperMobile,
+      isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
     ]),
   }));
 
@@ -70,7 +70,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/ui.container-page/index.vue

@@ -66,7 +66,8 @@
 
 <script setup>
 import { computed, useSlots, onMounted } from "vue";
-import { useStore } from "vuex";
+
+import useBreakpoint from "../composable.breakpoint";
 
 import ULink from "../ui.button-link/index.vue";
 import UIcon from "../ui.image-icon/index.vue";
@@ -79,7 +80,6 @@ import { UPage } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 
 const slots = useSlots();
-const store = useStore();
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UPage", inheritAttrs: false });
@@ -168,9 +168,7 @@ const props = defineProps({
   },
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   config,
@@ -190,7 +188,7 @@ const {
   footerRightAttrs,
   rightRoundingWrapperAttrs,
   hasSlotContent,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 
 const isShownHeader = computed(() => {
   const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);

package/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,

package/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;

package/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 });

package/ui.dropdown-list/index.vue

@@ -65,7 +65,7 @@
         :empty-styles="optionClasses"
       >
         <span v-bind="optionAttrs()">
-          <span v-text="props.config?.i18n?.noDataToShow || t('UDropdownList.noDataToShow')" />
+          <span v-text="currentLocale.noDataToShow" />
         </span>
       </slot>
 
@@ -73,7 +73,7 @@
       <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)";
 });

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

@@ -179,7 +179,6 @@
 
 <script setup>
 import { computed, watch, ref, nextTick } from "vue";
-import { useStore } from "vuex";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
@@ -227,6 +226,7 @@ import {
 import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
+import useBreakpoint from "../composable.breakpoint";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -385,7 +385,6 @@ const {
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
 } = useAttrs(props, { isShownMenu });
-const store = useStore();
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
@@ -413,7 +412,7 @@ const localValue = computed({
   },
 });
 
-const isMobileDevice = computed(() => store.getters["breakpoint/isMobileDevice"]);
+const { isMobileBreakpoint } = useBreakpoint();
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 const currentLocale = computed(() => merge(tm("UDatePickerRange"), props.config.i18n));
 
@@ -560,7 +559,7 @@ const userFormatDate = computed(() => {
     title = `${fromTitle} – ${toTitle}`;
   }
 
-  if (isMobileDevice.value && !isPeriod.value.month && isVariant.value.button) {
+  if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
     const startDay = String(from.getDate()).padStart(2, "0");
     const endDay = String(to?.getDate())?.padStart(2, "0");
     const startMonth = String(from.getMonth()).padStart(2, "0");
@@ -633,7 +632,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;
   }

package/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}`;
   }

package/ui.form-radio-card/index.vue

@@ -25,7 +25,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { useStore } from "vuex";
 
 import UIcon from "../ui.image-icon";
 import URadio from "../ui.form-radio";
@@ -34,12 +33,11 @@ import UIService, { getRandomId } from "../service.ui";
 import defaultConfig from "./configs/default.config";
 import { URadioCard } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "URadioCard", inheritAttrs: false });
 
-const store = useStore();
-
 const props = defineProps({
   /**
    * Set radio card name.
@@ -126,9 +124,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs, itemsAttrs } = useAttrs(props);
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const selectedItem = computed({
   get: () => props.modelValue,
@@ -137,10 +133,10 @@ const selectedItem = computed({
 
 const gridColsClass = computed(() => {
   return {
-    "grid-cols-1": isMobileDevice,
-    "grid-cols-2": props.gridCols === 2 && isMobileDevice,
-    "grid-cols-3": props.gridCols === 3 && isMobileDevice,
-    "grid-cols-4": props.gridCols === 4 && isMobileDevice,
+    "grid-cols-1": isMobileBreakpoint.value,
+    "grid-cols-2": props.gridCols === 2 && isMobileBreakpoint.value,
+    "grid-cols-3": props.gridCols === 3 && isMobileBreakpoint.value,
+    "grid-cols-4": props.gridCols === 4 && isMobileBreakpoint.value,
   };
 });
 </script>

package/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;
 });

package/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(() => {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6993,19 +6993,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UViewport",
-          "description": "",
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "vueless/ui.viewport/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "YearView",
           "description": "",

package/ui.viewport/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <slot :breakpoint="breakpoint" />
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "UViewport",
-
-  data() {
-    return {
-      windowWidth: 0,
-      breakpoint: "",
-    };
-  },
-
-  watch: {
-    windowWidth: {
-      immediate: true,
-      handler: "setBreakpoint",
-    },
-  },
-
-  mounted() {
-    this.setWindowWidth();
-    this.setListener();
-  },
-
-  methods: {
-    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
-
-    setWindowWidth() {
-      this.windowWidth = window.innerWidth;
-    },
-
-    setListener() {
-      let timeout;
-
-      window.addEventListener(
-        "resize",
-        () => {
-          if (timeout) {
-            window.cancelAnimationFrame(timeout);
-          }
-
-          timeout = window.requestAnimationFrame(() => {
-            this.setWindowWidth();
-          });
-        },
-        { passive: true },
-      );
-    },
-
-    setBreakpoint(windowWidth) {
-      if (!windowWidth) return;
-
-      this.breakpoint = "xs";
-
-      if (windowWidth >= 640 && windowWidth < 768) {
-        this.breakpoint = "sm";
-      } else if (windowWidth >= 768 && windowWidth < 1024) {
-        this.breakpoint = "md";
-      } else if (windowWidth >= 1024 && windowWidth < 1280) {
-        this.breakpoint = "lg";
-      } else if (windowWidth >= 1280 && windowWidth < 1536) {
-        this.breakpoint = "xl";
-      } else if (windowWidth >= 1536) {
-        this.breakpoint = "2xl";
-      }
-
-      this.SET_BREAKPOINT(this.breakpoint);
-    },
-  },
-};
-</script>

package/ui.viewport/store/index.js

@@ -1,47 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    breakpoint: "",
-    mobileDevices: ["xs", "sm"],
-    portableDevices: ["xs", "sm", "md"],
-  },
-
-  getters: {
-    isLaptopDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "lg";
-    },
-
-    isTabletDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "md";
-    },
-
-    isMobileDevice(state) {
-      const { breakpoint, mobileDevices } = state;
-
-      return mobileDevices.includes(breakpoint);
-    },
-
-    isPortableDevice(state) {
-      const { breakpoint, portableDevices } = state;
-
-      return portableDevices.includes(breakpoint);
-    },
-
-    elementSize(state, getters) {
-      const { isMobileDevice } = getters;
-
-      return isMobileDevice ? "md" : "lg";
-    },
-  },
-
-  mutations: {
-    SET_BREAKPOINT(state, breakpoint) {
-      state.breakpoint = breakpoint;
-    },
-  },
-};