vueless 0.0.478-beta.3 → 0.0.479

package/composablesTs/useAutoPosition.ts

@@ -1,115 +0,0 @@
-import { computed, toValue, ref } from "vue";
-import { isSSR } from "../utilsTs/utilHelper.ts";
-
-import type { Ref, ComputedRef } from "vue";
-
-interface PositionXY {
-  x: Position;
-  y: Position;
-}
-
-export enum Position {
-  Left = "left",
-  Right = "right",
-  Top = "top",
-  Bottom = "bottom",
-  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 function useAutoPosition(
-  anchorElement: Ref<HTMLElement | null>,
-  targetElement: Ref<HTMLElement | null>,
-  position: PositionXY | ComputedRef<PositionXY>,
-  preferredPosition: PositionXY | ComputedRef<PositionXY>,
-) {
-  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 isTop = computed(() => {
-    if (localPosition.value.y !== Position.Auto) {
-      return localPosition.value.y === Position.Top;
-    }
-
-    return preferredOpenDirectionY.value === Position.Top;
-  });
-
-  const isLeft = computed(() => {
-    if (localPosition.value.x !== Position.Auto) {
-      return localPosition.value.x === Position.Left;
-    }
-
-    return preferredOpenDirectionX.value === Position.Left;
-  });
-
-  const isBottom = computed(() => {
-    if (localPosition.value.y !== Position.Auto) {
-      return localPosition.value.y === Position.Bottom;
-    }
-
-    return preferredOpenDirectionY.value === Position.Bottom;
-  });
-
-  const isRight = computed(() => {
-    if (localPosition.value.x !== Position.Auto) {
-      return localPosition.value.x === Position.Right;
-    }
-
-    return preferredOpenDirectionX.value === Position.Right;
-  });
-
-  function adjustPositionY(): void {
-    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 === Position.Bottom) {
-      preferredOpenDirectionY.value =
-        hasEnoughSpaceBelow || spaceBelow > spaceAbove ? Position.Bottom : Position.Top;
-    }
-
-    if (localPreferredPosition.value.y === Position.Top) {
-      preferredOpenDirectionY.value =
-        hasEnoughSpaceAbove || spaceAbove > spaceBelow ? Position.Top : Position.Bottom;
-    }
-  }
-
-  function adjustPositionX(): void {
-    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 === Position.Right) {
-      preferredOpenDirectionX.value =
-        hasEnoughSpaceRight || spaceRight > spaceLeft ? Position.Right : Position.Left;
-    }
-
-    if (localPreferredPosition.value.x === Position.Left) {
-      preferredOpenDirectionX.value =
-        hasEnoughSpaceLeft || spaceLeft > spaceRight ? Position.Left : Position.Right;
-    }
-  }
-
-  return { isTop, isRight, isBottom, isLeft, adjustPositionY, adjustPositionX };
-}

package/composablesTs/useBreakpoint.ts

@@ -1,106 +0,0 @@
-import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
-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,
-};
-
-const mobileDevices = ["xs", "sm"];
-const portableDevices = ["xs", "sm", "md"];
-
-export default function useBreakpoint() {
-  let timeout: number;
-
-  const windowWidth: Ref<number | undefined> = 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(() => {
-    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 | undefined) {
-    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";
-    }
-  }
-
-  return {
-    isLaptopBreakpoint,
-    isTabletBreakpoint,
-    isMobileBreakpoint,
-    isPortableBreakpoint,
-    elementSize,
-  };
-}

package/composablesTs/useLocale.ts

@@ -1,25 +0,0 @@
-import { inject } from "vue";
-import createVuelessAdapter from "../adatper.locale/vueless.js";
-
-export const LocaleSymbol = Symbol.for("vueless:locale");
-
-function isLocaleInstance(obj): boolean {
-  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/composablesTs/useMutationObserver.ts

@@ -1,50 +0,0 @@
-import { onBeforeUnmount, onMounted, toValue, watch } from "vue";
-import { isSSR } from "../utilsTs/utilHelper.ts";
-
-import type { Ref } from "vue";
-
-export function useMutationObserver(
-  target: Ref<HTMLElement | null>,
-  callBack: () => void,
-  config = { childList: true, attributes: true, characterData: true },
-) {
-  if (isSSR) return;
-
-  const observer = new MutationObserver(callBack);
-
-  onMounted(() => {
-    if (!toValue(target)) return;
-
-    if (Array.isArray(toValue(target))) {
-      toValue(target).forEach((element) => {
-        observer.observe(element, config);
-      });
-    } else {
-      observer.observe(toValue(target), config);
-    }
-  });
-
-  watch(
-    () => toValue(target),
-    () => {
-      if (Array.isArray(toValue(target))) {
-        toValue(target).forEach((element) => {
-          observer.observe(element, config);
-        });
-
-        return;
-      }
-
-      observer.observe(toValue(target), config);
-    },
-    {
-      deep: true,
-    },
-  );
-
-  onBeforeUnmount(() => {
-    observer.disconnect();
-  });
-
-  return { observer };
-}