vueless 0.0.478-beta.2 → 0.0.478-beta.20

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/{composablesTs → composables}/useAutoPosition.ts

@@ -1,14 +1,9 @@
 import { computed, toValue, ref } from "vue";
-import { isSSR } from "../utilsTs/utilHelper.ts";
+import { isSSR } from "../utils/helper.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,7 +11,10 @@ export enum Position {
   Auto = "auto",
 }
 
-// TODO: Remove after full TS migration, use enum instead.
+export type Align = `${Direction}`;
+export type Position = { x: Align; y: Align };
+
+// TODO: Remove it after ui.form-date-picker-range and ui.form-date-picker ts migration (use enum there instead).
 export const POSITION = {
   left: "left",
   right: "right",
@@ -26,52 +24,52 @@ export const POSITION = {
 };
 
 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 +79,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 +98,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 → composables}/useBreakpoint.ts

@@ -1,34 +1,36 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
-import { isSSR } from "../utilsTs/utilHelper.ts";
+import { isSSR } from "../utils/helper.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/composables/useLocale.ts

@@ -0,0 +1,22 @@
+import { inject } from "vue";
+import createVuelessAdapter from "../adatper.locale/vueless.ts";
+
+import type { LocaleInstance, LocaleOptions } from "../adatper.locale/vueless.ts";
+import type { InjectionKey } from "vue";
+
+export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
+
+export function createLocale(options?: LocaleOptions) {
+  const i18n =
+    options?.adapter && options?.adapter?.name ? 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/composables/useMutationObserver.ts

@@ -0,0 +1,53 @@
+import { computed, onBeforeUnmount, onMounted, toValue, watch } from "vue";
+import { isSSR } from "../utils/helper.ts";
+
+import type { TemplateRefElement } from "../types.ts";
+
+export function useMutationObserver(
+  target: TemplateRefElement,
+  callback: MutationCallback,
+  config = { childList: true, attributes: true, characterData: true },
+) {
+  if (isSSR) return;
+
+  const observer = new MutationObserver(callback);
+  const targetValue = computed(() => toValue(target));
+
+  onMounted(() => {
+    if (!targetValue.value) return;
+
+    if (Array.isArray(targetValue.value)) {
+      targetValue.value.forEach((element) => {
+        observer.observe(element, config);
+      });
+    } else {
+      observer.observe(targetValue.value, config);
+    }
+  });
+
+  watch(
+    targetValue,
+    () => {
+      if (!targetValue.value) return;
+
+      if (Array.isArray(targetValue.value)) {
+        targetValue.value.forEach((element) => {
+          observer.observe(element, config);
+        });
+
+        return;
+      }
+
+      observer.observe(targetValue.value, config);
+    },
+    {
+      deep: true,
+    },
+  );
+
+  onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+
+  return { observer };
+}