vueless 0.0.478-beta.1 → 0.0.478-beta.10

package/adatper.locale/vue-i18n.ts

@@ -0,0 +1,14 @@
+import type { I18n } from "vue-i18n";
+
+export default function createVueI18nAdapter(i18n: I18n) {
+  return {
+    name: "vue-i18n",
+    locale: i18n.global.locale,
+    fallback: i18n.global.fallbackLocale,
+    messages: i18n.global.messages,
+    // @ts-expect-error Type instantiation is excessively deep and possibly infinite
+    t: (key: string, ...params: unknown[]) => i18n.global.t(key, params),
+    tm: i18n.global.tm,
+    n: i18n.global.n,
+  };
+}

package/adatper.locale/{vueless.js → vueless.ts}

@@ -1,11 +1,35 @@
 import { shallowRef, ref } from "vue";
 import { merge } from "lodash-es";
 
-import en from "./locales/en.js";
+import en from "./locales/en.ts";
+
+import type { Ref } from "vue";
+import type { UnknownObject } from "../types.ts";
+
+export interface LocaleMessages {
+  [key: string]: LocaleMessages | string;
+}
+
+export interface LocaleOptions {
+  messages?: LocaleMessages;
+  locale?: string;
+  fallback?: string;
+  adapter?: LocaleInstance;
+}
+
+export interface LocaleInstance {
+  name: string;
+  messages: Ref<LocaleMessages>;
+  locale: Ref<string>;
+  fallback: Ref<string>;
+  t: (key: string, ...params: unknown[]) => string;
+  n: (value: number) => string;
+  tm: (key: string, ...params: unknown[]) => string;
+}
 
 const FALLBACK_LOCALE_CODE = "en";
 
-export default function createVuelessAdapter(options) {
+export default function createVuelessAdapter(options?: LocaleOptions): LocaleInstance {
   const current = shallowRef(options?.locale ?? FALLBACK_LOCALE_CODE);
   const fallback = shallowRef(options?.fallback ?? FALLBACK_LOCALE_CODE);
 
@@ -22,12 +46,16 @@ export default function createVuelessAdapter(options) {
   };
 }
 
-function createTranslateFunction(current, fallback, messages) {
-  return (key, ...params) => {
+function createTranslateFunction(
+  current: Ref<string>,
+  fallback: Ref<string>,
+  messages: Ref<LocaleMessages>,
+) {
+  return (key: string, ...params: unknown[]) => {
     const currentLocale = current.value && messages.value[current.value];
     const fallbackLocale = fallback.value && messages.value[fallback.value];
 
-    let str = getObjectValueByPath(currentLocale, key, null);
+    let str = getObjectValueByPath<LocaleMessages | string, unknown>(currentLocale, key, null);
 
     if (!str) {
       // eslint-disable-next-line no-console
@@ -49,16 +77,20 @@ function createTranslateFunction(current, fallback, messages) {
       str = key;
     }
 
-    return replace(str, params);
+    return replace(String(str), params);
   };
 }
 
-function createTranslateMessageFunction(current, fallback, messages) {
-  return (key) => {
+function createTranslateMessageFunction(
+  current: Ref<string>,
+  fallback: Ref<string>,
+  messages: Ref<LocaleMessages>,
+) {
+  return (key: string) => {
     const currentLocale = current.value && messages.value[current.value];
     const fallbackLocale = fallback.value && messages.value[fallback.value];
 
-    let str = getObjectValueByPath(currentLocale, key, null);
+    let str = getObjectValueByPath<LocaleMessages | string, unknown>(currentLocale, key, null);
 
     if (str === undefined) {
       // eslint-disable-next-line no-console
@@ -68,51 +100,67 @@ function createTranslateMessageFunction(current, fallback, messages) {
       str = getObjectValueByPath(fallbackLocale, key, null);
     }
 
-    return str;
+    return String(str);
   };
 }
 
-const replace = (str, params) => {
+const replace = (str: string, params: unknown[]) => {
   return str.replace(/\{(\d+)\}/g, (match, index) => {
     return String(params[+index]);
   });
 };
 
-function createNumberFunction(current, fallback) {
-  return (value, options) => {
+function createNumberFunction(current: Ref<string>, fallback: Ref<string>) {
+  return (value: number, options?: Intl.NumberFormatOptions) => {
     const numberFormat = new Intl.NumberFormat([current.value, fallback.value], options);
 
     return numberFormat.format(value);
   };
 }
 
-export function getObjectValueByPath(obj, path, fallback) {
+export function getObjectValueByPath<T, K = unknown>(
+  obj: T,
+  path?: string,
+  fallback?: K,
+): K | undefined {
   if (obj == null || !path || typeof path !== "string") return fallback;
-  if (obj[path] !== undefined) return obj[path];
+
+  const unknownObject = obj as UnknownObject;
+
+  if (unknownObject[path] !== undefined) {
+    return unknownObject[path] as K;
+  }
+
   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) {
+export function getNestedValue<T, K = unknown>(
+  obj: T | null | undefined,
+  path: (string | number)[],
+  fallback?: K,
+): K | undefined {
   const last = path.length - 1;
 
   if (last < 0) {
-    return obj === undefined ? fallback : obj;
+    return obj === undefined ? fallback : (obj as unknown as K);
   }
 
+  const unknownObject = obj as Record<string | number, unknown>;
+
   for (let i = 0; i < last; i++) {
     if (obj == null) {
       return fallback;
     }
 
-    obj = obj[path[i]];
+    obj = unknownObject[path[i]] as T;
   }
 
   if (obj == null) {
     return fallback;
   }
 
-  return obj[path[last]] === undefined ? fallback : obj[path[last]];
+  return (unknownObject[path[last]] === undefined ? fallback : unknownObject[path[last]]) as K;
 }

package/assets/icons/sentiment_satisfied.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M624.57-531.57q22.97 0 39.2-16.22Q680-564.02 680-587t-16.23-39.21q-16.23-16.22-39.2-16.22-22.98 0-39.09 16.14-16.11 16.14-16.11 39.21 0 23.06 16.1 39.29 16.1 16.22 39.1 16.22Zm-289.14 0q22.98 0 39.09-16.14 16.11-16.14 16.11-39.21 0-23.06-16.1-39.29-16.1-16.22-39.1-16.22-22.97 0-39.2 16.22Q280-609.98 280-587t16.23 39.21q16.23 16.22 39.2 16.22ZM480-261q66 0 121.5-35.5T682-393h-55.11q-22.52 38.8-61.83 59.59-39.31 20.78-84.59 20.78-45.27 0-84.94-20.28-39.66-20.29-61.18-60.09H278q26 61 81 96.5T480-261Zm.01 186.98q-84.21 0-158.28-31.86-74.08-31.86-129.03-86.82-54.96-54.95-86.82-129.02-31.86-74.06-31.86-158.27 0-84.21 31.86-158.28 31.86-74.08 86.78-129.05 54.92-54.97 129-86.93 74.08-31.97 158.31-31.97t158.33 31.95q74.1 31.95 129.06 86.88 54.95 54.94 86.9 129.05 31.96 74.1 31.96 158.36 0 84.24-31.97 158.31-31.96 74.08-86.93 129-54.97 54.93-129.04 86.79-74.06 31.86-158.27 31.86ZM480-480Zm0 337.85q141.42 0 239.63-98.22 98.22-98.21 98.22-239.63 0-141.42-98.22-239.63-98.21-98.22-239.63-98.22-141.42 0-239.63 98.22-98.22 98.21-98.22 239.63 0 141.42 98.22 239.63 98.21 98.22 239.63 98.22Z"/></svg>

package/composables/useUI.js

@@ -11,7 +11,7 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
+import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/utilUI.js";
 
 import { cloneDeep, isCSR } from "../utils/utilHelper.js";
 import {
@@ -241,209 +241,6 @@ function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStra
   }
 }
 
-/**
- * Recursively merge config objects with removing tailwind classes duplicates.
- * @param {Object} defaultConfig
- * @param {Object} globalConfig
- * @param {Object} propsConfig
- * @param {Object} config - final merged config.
- * @param {boolean} isReplace - enables class replacement instead of merge.
- * @param {boolean} isVarinants - if true, prevents adding a "base" key into nested objects.
- *
- * @returns {Object}
- */
-function mergeConfigs({
-  defaultConfig,
-  globalConfig,
-  propsConfig,
-  config = {},
-  isReplace = false,
-  isVariants = false,
-}) {
-  globalConfig = cloneDeep(globalConfig || {});
-  propsConfig = cloneDeep(propsConfig || {});
-
-  const isGlobalConfig = Object.keys(globalConfig).length;
-  const isPropsConfig = Object.keys(propsConfig).length;
-
-  // Add unique keys from defaultConfig to composedConfig
-  let composedConfig = cloneDeep(defaultConfig);
-
-  // Add unique keys from globalConfig to composedConfig
-  for (let key in globalConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = globalConfig[key];
-    }
-  }
-
-  // Add unique keys from propsConfig to composedConfig
-  for (let key in propsConfig) {
-    if (!Object.keys(composedConfig).includes(key)) {
-      composedConfig[key] = propsConfig[key];
-    }
-  }
-
-  const {
-    i18n,
-    defaults,
-    strategy,
-    safelist,
-    component,
-    safelistColors,
-    defaultVariants,
-    compoundVariants,
-  } = SYSTEM_CONFIG_KEY;
-
-  for (let key in composedConfig) {
-    if (isGlobalConfig || isPropsConfig) {
-      if (key === safelist || key === safelistColors) {
-        if (propsConfig[key]) {
-          // eslint-disable-next-line no-console
-          console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
-        }
-      } else if (key === component) {
-        config[key] = propsConfig[key] || defaultConfig[key];
-
-        if (globalConfig[key]) {
-          // eslint-disable-next-line no-console
-          console.warn(`Passing '${key}' key in 'config' prop or by global config is not allowed.`);
-        }
-      } else if (key === strategy) {
-        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === defaults || key === defaultVariants) {
-        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
-      } else if (key === compoundVariants) {
-        config[key] = mergeCompoundVariants({
-          defaultConfig: composedConfig,
-          globalConfig,
-          propsConfig,
-          isReplace,
-          key,
-        });
-      } else {
-        const isObjectComposedConfig = typeof composedConfig[key] === "object";
-        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
-        const isObjectPropsConfig = typeof propsConfig[key] === "object";
-
-        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
-        const isEmpty = composedConfig[key] === null;
-        const isI18n = key === i18n;
-
-        if (key === "variants" && !isVariants) {
-          isVariants = true;
-        }
-
-        config[key] =
-          isObject && !isEmpty && !isI18n
-            ? mergeConfigs({
-                defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
-                globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
-                propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
-                config: stringToObject(composedConfig[key], { addBase: !isVariants }),
-                isReplace,
-                isVariants,
-              })
-            : isReplace || isI18n
-              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
-              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
-      }
-    } else {
-      config[key] = composedConfig[key];
-    }
-  }
-
-  return config;
-}
-
-/**
- Turn simplified nested component config to regular config.
- @param {Object | String} value
- @param {Boolean} addBase
- @returns {Object}
- */
-function stringToObject(value, { addBase = false }) {
-  if (value === undefined) value = "";
-
-  return typeof value !== "object" ? addBase && { base: value } : value;
-}
-
-/**
- * Merge CVA compound variants arrays.
- * @param {Object} defaultConfig
- * @param {Object} globalConfig
- * @param {Object} propsConfig
- * @param {string} key
- * @param {boolean} isReplace - enables class replacement instead of merge.
- *
- * @returns {Array}
- */
-function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
-  if (
-    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
-    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
-    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
-  ) {
-    // eslint-disable-next-line no-console
-    console.error("CompoundVariants should be an array.");
-  }
-
-  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
-  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
-
-  const config = defaultConfig[key].map((defaultConfigItem) => {
-    /**
-     * Compare two objects by keys for match.
-     * @param {Object} configItem
-     * @returns {Boolean}
-     */
-    function isSameItem(configItem) {
-      const hasConfigItemKeys = Object.keys(defaultConfigItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      const hasDefaultConfigItemKeys = Object.keys(configItem)
-        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
-        .every((item) => !!item);
-
-      return hasConfigItemKeys && hasDefaultConfigItemKeys;
-    }
-
-    /**
-     * Find the same compound variant item in custom config if exist.
-     * @param {Object} config
-     * @returns {Object|undefined}
-     */
-    function findItem(config = []) {
-      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
-      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
-
-      if (~globalConfigUniqueItemIndex) {
-        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
-      }
-
-      if (~propsConfigUniqueItemIndex) {
-        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
-      }
-
-      return config.find(isSameItem);
-    }
-
-    const globalConfigItem = findItem(globalConfig[key]);
-    const propsConfigItem = findItem(propsConfig[key]);
-
-    return globalConfigItem || propsConfigItem
-      ? {
-          ...defaultConfigItem,
-          class: isReplace
-            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
-            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
-        }
-      : defaultConfigItem;
-  });
-
-  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
-}
-
 /**
  * Merge component classes from "class" attribute into final config.
  * @param {Object} config

package/composablesTs/useAutoPosition.ts

@@ -1,14 +1,9 @@
 import { computed, toValue, ref } from "vue";
 import { isSSR } from "../utilsTs/utilHelper.ts";
 
-import type { Ref, ComputedRef } from "vue";
+import type { ComputedRef, MaybeRef, Reactive } from "vue";
 
-interface PositionXY {
-  x: Position;
-  y: Position;
-}
-
-export enum Position {
+export enum Direction {
   Left = "left",
   Right = "right",
   Top = "top",
@@ -16,62 +11,56 @@ export enum Position {
   Auto = "auto",
 }
 
-// TODO: Remove after full TS migration, use enum instead.
-export const POSITION = {
-  left: "left",
-  right: "right",
-  top: "top",
-  bottom: "bottom",
-  auto: "auto",
-};
+export type Align = `${Direction}`;
+export type Position = { x: Align; y: Align };
 
 export function useAutoPosition(
-  anchorElement: Ref<HTMLElement | null>,
-  targetElement: Ref<HTMLElement | null>,
-  position: PositionXY | ComputedRef<PositionXY>,
-  preferredPosition: PositionXY | ComputedRef<PositionXY>,
+  anchorElement: MaybeRef<HTMLElement | null>,
+  targetElement: MaybeRef<HTMLElement | null>,
+  position: Reactive<Position> | ComputedRef<Position>,
+  preferredPosition: Reactive<Position> | ComputedRef<Position>,
 ) {
   const localAnchorElement = computed(() => toValue(anchorElement));
   const localTargetElement = computed(() => toValue(targetElement));
   const localPosition = computed(() => toValue(position));
   const localPreferredPosition = computed(() => toValue(preferredPosition));
 
-  const preferredOpenDirectionY = ref(localPreferredPosition.value?.y || Position.Bottom);
-  const preferredOpenDirectionX = ref(localPreferredPosition.value?.x || Position.Left);
+  const preferredOpenDirectionY = ref(localPreferredPosition.value.y || Direction.Bottom);
+  const preferredOpenDirectionX = ref(localPreferredPosition.value.x || Direction.Left);
 
   const isTop = computed(() => {
-    if (localPosition.value.y !== Position.Auto) {
-      return localPosition.value.y === Position.Top;
+    if (localPosition.value.y !== Direction.Auto) {
+      return localPosition.value.y === Direction.Top;
     }
 
-    return preferredOpenDirectionY.value === Position.Top;
+    return preferredOpenDirectionY.value === Direction.Top;
   });
 
   const isLeft = computed(() => {
-    if (localPosition.value.x !== Position.Auto) {
-      return localPosition.value.x === Position.Left;
+    if (localPosition.value.x !== Direction.Auto) {
+      return localPosition.value.x === Direction.Left;
     }
 
-    return preferredOpenDirectionX.value === Position.Left;
+    return preferredOpenDirectionX.value === Direction.Left;
   });
 
   const isBottom = computed(() => {
-    if (localPosition.value.y !== Position.Auto) {
-      return localPosition.value.y === Position.Bottom;
+    if (localPosition.value.y !== Direction.Auto) {
+      return localPosition.value.y === Direction.Bottom;
     }
 
-    return preferredOpenDirectionY.value === Position.Bottom;
+    return preferredOpenDirectionY.value === Direction.Bottom;
   });
 
   const isRight = computed(() => {
-    if (localPosition.value.x !== Position.Auto) {
-      return localPosition.value.x === Position.Right;
+    if (localPosition.value.x !== Direction.Auto) {
+      return localPosition.value.x === Direction.Right;
     }
 
-    return preferredOpenDirectionX.value === Position.Right;
+    return preferredOpenDirectionX.value === Direction.Right;
   });
 
-  function adjustPositionY(): void {
+  function adjustPositionY() {
     if (isSSR || !localAnchorElement.value || !localTargetElement.value) return;
 
     const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
@@ -81,18 +70,18 @@ export function useAutoPosition(
     const hasEnoughSpaceAbove =
       spaceAbove > localTargetElement.value.getBoundingClientRect().height;
 
-    if (localPreferredPosition.value.y === Position.Bottom) {
+    if (localPreferredPosition.value.y === Direction.Bottom) {
       preferredOpenDirectionY.value =
-        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? Position.Bottom : Position.Top;
+        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? Direction.Bottom : Direction.Top;
     }
 
-    if (localPreferredPosition.value.y === Position.Top) {
+    if (localPreferredPosition.value.y === Direction.Top) {
       preferredOpenDirectionY.value =
-        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? Position.Top : Position.Bottom;
+        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? Direction.Top : Direction.Bottom;
     }
   }
 
-  function adjustPositionX(): void {
+  function adjustPositionX() {
     if (isSSR || !localAnchorElement.value || !localTargetElement.value) return;
 
     const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
@@ -100,14 +89,14 @@ export function useAutoPosition(
     const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
     const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
 
-    if (localPreferredPosition.value.x === Position.Right) {
+    if (localPreferredPosition.value.x === Direction.Right) {
       preferredOpenDirectionX.value =
-        hasEnoughSpaceRight || spaceRight > spaceLeft ? Position.Right : Position.Left;
+        hasEnoughSpaceRight || spaceRight > spaceLeft ? Direction.Right : Direction.Left;
     }
 
-    if (localPreferredPosition.value.x === Position.Left) {
+    if (localPreferredPosition.value.x === Direction.Left) {
       preferredOpenDirectionX.value =
-        hasEnoughSpaceLeft || spaceLeft > spaceRight ? Position.Left : Position.Right;
+        hasEnoughSpaceLeft || spaceLeft > spaceRight ? Direction.Left : Direction.Right;
     }
   }
 

package/composablesTs/useBreakpoint.ts

@@ -3,32 +3,34 @@ import { isSSR } from "../utilsTs/utilHelper.ts";
 
 import type { Ref } 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,
-};
+enum BreakpointName {
+  Xs = "xs",
+  Sm = "sm",
+  Md = "md",
+  Lg = "lg",
+  Xl = "xl",
+  "2xl" = "2xl",
+}
+
+enum BreakpointWidth {
+  Xs = 0,
+  Sm = 640,
+  Md = 768,
+  Lg = 1024,
+  Xl = 1280,
+  "2xl" = 1536,
+}
+
+type Breakpoint = `${BreakpointName}`;
 
 const mobileDevices = ["xs", "sm"];
 const portableDevices = ["xs", "sm", "md"];
 
 export default function useBreakpoint() {
-  let timeout: number;
+  let timeout: number | undefined;
 
-  const windowWidth: Ref<number | undefined> = ref(undefined);
-  const currentBreakpoint = ref(BREAKPOINT_NAME.xs);
+  const windowWidth = ref(0);
+  const currentBreakpoint: Ref<Breakpoint> = ref(BreakpointName.Xs);
 
   const isMobileBreakpoint = computed(() => {
     return mobileDevices.includes(currentBreakpoint.value);
@@ -39,15 +41,16 @@ export default function useBreakpoint() {
   });
 
   const isLaptopBreakpoint = computed(() => {
-    return currentBreakpoint.value === BREAKPOINT_NAME.lg;
+    return currentBreakpoint.value === BreakpointName.Lg;
   });
 
   const isPortableBreakpoint = computed(() => {
     return portableDevices.includes(currentBreakpoint.value);
   });
 
+  // TODO: Why do we need this? Maybe we should rename it.
   const elementSize = computed(() => {
-    return isMobileBreakpoint.value ? BREAKPOINT_NAME.md : BREAKPOINT_NAME.lg;
+    return isMobileBreakpoint.value ? BreakpointName.Md : BreakpointName.Lg;
   });
 
   onMounted(() => {
@@ -78,21 +81,21 @@ export default function useBreakpoint() {
     });
   }
 
-  function setBreakpoint(newWindowWidth: number | undefined) {
+  function setBreakpoint(newWindowWidth: number) {
     if (newWindowWidth === undefined) return;
 
     currentBreakpoint.value = "xs";
 
-    if (newWindowWidth >= BREAKPOINT.sm && newWindowWidth < BREAKPOINT.md) {
-      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";
+    if (newWindowWidth >= BreakpointWidth.Sm && newWindowWidth < BreakpointWidth.Sm) {
+      currentBreakpoint.value = BreakpointName.Sm;
+    } else if (newWindowWidth >= BreakpointWidth.Md && newWindowWidth < BreakpointWidth.Lg) {
+      currentBreakpoint.value = BreakpointName.Md;
+    } else if (newWindowWidth >= BreakpointWidth.Lg && newWindowWidth < BreakpointWidth.Xl) {
+      currentBreakpoint.value = BreakpointName.Lg;
+    } else if (newWindowWidth >= BreakpointWidth.Xl && newWindowWidth < BreakpointWidth["2xl"]) {
+      currentBreakpoint.value = BreakpointName.Xl;
+    } else if (newWindowWidth >= BreakpointWidth["2xl"]) {
+      currentBreakpoint.value = BreakpointName["2xl"];
     }
   }
 

package/composablesTs/useLocale.ts

@@ -1,17 +1,14 @@
 import { inject } from "vue";
-import createVuelessAdapter from "../adatper.locale/vueless.js";
+import createVuelessAdapter from "../adatper.locale/vueless.ts";
 
-export const LocaleSymbol = Symbol.for("vueless:locale");
+import type { LocaleInstance, LocaleOptions } from "../adatper.locale/vueless.ts";
+import type { InjectionKey } from "vue";
 
-function isLocaleInstance(obj): boolean {
-  return obj.name !== null;
-}
+export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
 
-export function createLocale(options) {
+export function createLocale(options: LocaleOptions) {
   const i18n =
-    options?.adapter && isLocaleInstance(options?.adapter)
-      ? options?.adapter
-      : createVuelessAdapter(options);
+    options?.adapter && options?.adapter?.name ? options?.adapter : createVuelessAdapter(options);
 
   return { ...i18n };
 }