vueless 0.0.477 → 0.0.478-beta.0

package/composables/useBreakpoint.js

@@ -59,7 +59,7 @@ export default function useBreakpoint() {
   onBeforeUnmount(() => {
     if (isSSR) return;
 
-    window.removeEventListener("resize", resizeListener, { passive: true });
+    window.removeEventListener("resize", resizeListener);
   });
 
   watch(windowWidth, setBreakpoint, { immediate: true });

package/composables/useUI.js

@@ -11,7 +11,7 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig, mergeConfigs } from "../utils/utilUI.js";
+import { cx, cva, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
 
 import { cloneDeep, isCSR } from "../utils/utilHelper.js";
 import {
@@ -241,6 +241,209 @@ 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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,50 @@
+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 };
+}