vueless 0.0.478 → 0.0.480

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/composables/useAutoPosition.ts

@@ -0,0 +1,113 @@
+import { computed, toValue, ref } from "vue";
+import { isSSR } from "../utils/helper.ts";
+
+import type { ComputedRef, MaybeRef, Reactive } from "vue";
+
+export enum Direction {
+  Left = "left",
+  Right = "right",
+  Top = "top",
+  Bottom = "bottom",
+  Auto = "auto",
+}
+
+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",
+  top: "top",
+  bottom: "bottom",
+  auto: "auto",
+};
+
+export function useAutoPosition(
+  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 || Direction.Bottom);
+  const preferredOpenDirectionX = ref(localPreferredPosition.value.x || Direction.Left);
+
+  const isTop = computed(() => {
+    if (localPosition.value.y !== Direction.Auto) {
+      return localPosition.value.y === Direction.Top;
+    }
+
+    return preferredOpenDirectionY.value === Direction.Top;
+  });
+
+  const isLeft = computed(() => {
+    if (localPosition.value.x !== Direction.Auto) {
+      return localPosition.value.x === Direction.Left;
+    }
+
+    return preferredOpenDirectionX.value === Direction.Left;
+  });
+
+  const isBottom = computed(() => {
+    if (localPosition.value.y !== Direction.Auto) {
+      return localPosition.value.y === Direction.Bottom;
+    }
+
+    return preferredOpenDirectionY.value === Direction.Bottom;
+  });
+
+  const isRight = computed(() => {
+    if (localPosition.value.x !== Direction.Auto) {
+      return localPosition.value.x === Direction.Right;
+    }
+
+    return preferredOpenDirectionX.value === Direction.Right;
+  });
+
+  function adjustPositionY() {
+    if (isSSR || !localAnchorElement.value || !localTargetElement.value) return;
+
+    const spaceAbove = localAnchorElement.value.getBoundingClientRect().top;
+    const spaceBelow = window.innerHeight - localAnchorElement.value.getBoundingClientRect().bottom;
+    const hasEnoughSpaceBelow =
+      spaceBelow > localTargetElement.value.getBoundingClientRect().height;
+    const hasEnoughSpaceAbove =
+      spaceAbove > localTargetElement.value.getBoundingClientRect().height;
+
+    if (localPreferredPosition.value.y === Direction.Bottom) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? Direction.Bottom : Direction.Top;
+    }
+
+    if (localPreferredPosition.value.y === Direction.Top) {
+      preferredOpenDirectionY.value =
+        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? Direction.Top : Direction.Bottom;
+    }
+  }
+
+  function adjustPositionX() {
+    if (isSSR || !localAnchorElement.value || !localTargetElement.value) return;
+
+    const spaceRight = localAnchorElement.value.getBoundingClientRect().right;
+    const spaceLeft = window.innerWidth - localAnchorElement.value.getBoundingClientRect().left;
+    const hasEnoughSpaceLeft = spaceLeft > localTargetElement.value.getBoundingClientRect().width;
+    const hasEnoughSpaceRight = spaceRight > localTargetElement.value.getBoundingClientRect().width;
+
+    if (localPreferredPosition.value.x === Direction.Right) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceRight || spaceRight > spaceLeft ? Direction.Right : Direction.Left;
+    }
+
+    if (localPreferredPosition.value.x === Direction.Left) {
+      preferredOpenDirectionX.value =
+        hasEnoughSpaceLeft || spaceLeft > spaceRight ? Direction.Left : Direction.Right;
+    }
+  }
+
+  return { isTop, isRight, isBottom, isLeft, adjustPositionY, adjustPositionX };
+}

package/composables/useBreakpoint.ts

@@ -0,0 +1,109 @@
+import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
+import { isSSR } from "../utils/helper.ts";
+
+import type { Ref } from "vue";
+
+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 | undefined;
+
+  const windowWidth = ref(0);
+  const currentBreakpoint: Ref<Breakpoint> = ref(BreakpointName.Xs);
+
+  const isMobileBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isTabletBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isLaptopBreakpoint = computed(() => {
+    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 ? BreakpointName.Md : BreakpointName.Lg;
+  });
+
+  onMounted(() => {
+    if (isSSR) return;
+
+    windowWidth.value = window.innerWidth;
+
+    window.addEventListener("resize", resizeListener, { passive: true });
+  });
+
+  onBeforeUnmount(() => {
+    if (isSSR) return;
+
+    window.removeEventListener("resize", resizeListener);
+  });
+
+  watch(windowWidth, setBreakpoint, { immediate: true });
+
+  function resizeListener() {
+    if (isSSR) return;
+
+    if (timeout) {
+      window.cancelAnimationFrame(timeout);
+    }
+
+    timeout = window.requestAnimationFrame(() => {
+      windowWidth.value = window.innerWidth;
+    });
+  }
+
+  function setBreakpoint(newWindowWidth: number) {
+    if (newWindowWidth === undefined) return;
+
+    currentBreakpoint.value = "xs";
+
+    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"];
+    }
+  }
+
+  return {
+    isLaptopBreakpoint,
+    isTabletBreakpoint,
+    isMobileBreakpoint,
+    isPortableBreakpoint,
+    elementSize,
+  };
+}

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 };
+}