origam 0.1.0

package/dist/src/composables/Commons/layout.composable.js

@@ -0,0 +1,229 @@
+import { useResizeObserver } from "@foxy/composables";
+import { FOXY_LAYOUT_ITEM_KEY, FOXY_LAYOUT_KEY, ROOT_ZINDEX } from "@foxy/consts";
+import { convertToUnit, findChildrenWithProvide, generateLayers, getCurrentInstance, getUid, int } from "@foxy/utils";
+import {
+  computed,
+  inject,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  shallowRef
+} from "vue";
+export function useLayout() {
+  const layout = inject(FOXY_LAYOUT_KEY);
+  if (!layout) {
+    throw new Error("[Foxy] Could not find injected layout");
+  }
+  return {
+    getLayoutItem: layout.getLayoutItem,
+    mainRect: layout.mainRect,
+    mainStyles: layout.mainStyles,
+    mainId: layout.layoutId
+  };
+}
+export function useLayoutItem(options) {
+  const layout = inject(FOXY_LAYOUT_KEY);
+  if (!layout) {
+    throw new Error("[Foxy] Could not find injected layout");
+  }
+  const id = options.id ?? `layout-item-${getUid()}`;
+  const vm = getCurrentInstance("useLayoutItem");
+  provide(FOXY_LAYOUT_ITEM_KEY, shallowRef({ id }));
+  const isKeptAlive = shallowRef(false);
+  onDeactivated(() => {
+    isKeptAlive.value = true;
+  });
+  onActivated(() => {
+    isKeptAlive.value = false;
+  });
+  const {
+    layoutItemStyles,
+    layoutItemScrimStyles
+  } = layout.register(vm, {
+    ...options,
+    active: computed(() => isKeptAlive.value ? false : options.active.value),
+    id
+  });
+  onBeforeUnmount(() => {
+    layout.unregister(id);
+  });
+  return {
+    layoutItemStyles,
+    layoutRect: layout.layoutRect,
+    layoutItemScrimStyles,
+    layoutId: layout.layoutId
+  };
+}
+export function useCreateLayout(props) {
+  const parentLayout = inject(FOXY_LAYOUT_KEY, null);
+  const uid = getUid();
+  const layoutId = computed(() => props.id || `layout-${uid}`);
+  const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
+  const registered = ref([]);
+  const positions = reactive(/* @__PURE__ */ new Map());
+  const layoutSizes = reactive(/* @__PURE__ */ new Map());
+  const priorities = reactive(/* @__PURE__ */ new Map());
+  const activeItems = reactive(/* @__PURE__ */ new Map());
+  const disabledTransitions = reactive(/* @__PURE__ */ new Map());
+  const { resizeRef, contentRect: layoutRect } = useResizeObserver();
+  const computedOverlaps = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    const overlaps = props.overlaps ?? [];
+    for (const overlap of overlaps.filter((item) => item.includes(":"))) {
+      const [top, bottom] = overlap.split(":");
+      if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue;
+      const topPosition = positions.get(top);
+      const bottomPosition = positions.get(bottom);
+      const topAmount = layoutSizes.get(top);
+      const bottomAmount = layoutSizes.get(bottom);
+      if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue;
+      map.set(bottom, { position: topPosition.value, amount: int(topAmount.value) });
+      map.set(top, { position: bottomPosition.value, amount: -int(bottomAmount.value) });
+    }
+    return map;
+  });
+  const layers = computed(() => {
+    const uniquePriorities = [...new Set([...priorities.values()].map((p) => p.value))].sort((a, b) => a - b);
+    const layout = [];
+    for (const p of uniquePriorities) {
+      const items2 = registered.value.filter((id) => priorities.get(id)?.value === p);
+      layout.push(...items2);
+    }
+    return generateLayers(layout, positions, layoutSizes, activeItems);
+  });
+  const transitionsEnabled = computed(() => {
+    return !Array.from(disabledTransitions.values()).some((ref2) => ref2.value);
+  });
+  const mainRect = computed(() => {
+    return layers.value[layers.value.length - 1].layer;
+  });
+  const mainStyles = computed(() => {
+    return {
+      "left": convertToUnit(mainRect.value.left),
+      "right": convertToUnit(mainRect.value.right),
+      "top": convertToUnit(mainRect.value.top),
+      "bottom": convertToUnit(mainRect.value.bottom),
+      ...transitionsEnabled.value ? void 0 : { transition: "none" }
+    };
+  });
+  const items = computed(() => {
+    return layers.value.slice(1).map(({ id }, index) => {
+      const { layer } = layers.value[index];
+      const size = layoutSizes.get(id);
+      const position = positions.get(id);
+      return {
+        id,
+        ...layer,
+        size: Number(size.value),
+        position: position.value
+      };
+    });
+  });
+  const getLayoutItem = (id) => {
+    return items.value.find((item) => item.id === id);
+  };
+  const rootVm = getCurrentInstance("createLayout");
+  const isMounted = shallowRef(false);
+  onMounted(() => {
+    isMounted.value = true;
+  });
+  provide(FOXY_LAYOUT_KEY, {
+    register: (vm, {
+      id,
+      order,
+      position,
+      layoutSize,
+      elementSize,
+      active,
+      disableTransitions,
+      absolute
+    }) => {
+      priorities.set(id, order);
+      positions.set(id, position);
+      layoutSizes.set(id, layoutSize);
+      activeItems.set(id, active);
+      if (disableTransitions) {
+        disabledTransitions.set(id, disableTransitions);
+      }
+      const instances = findChildrenWithProvide(FOXY_LAYOUT_KEY, rootVm?.vnode);
+      const instanceIndex = instances.indexOf(vm);
+      if (instanceIndex > -1) registered.value.splice(instanceIndex, 0, id);
+      else registered.value.push(id);
+      const index = computed(() => items.value.findIndex((i) => i.id === id));
+      const zIndex = computed(() => rootZIndex.value + layers.value.length * 2 - index.value * 2);
+      const layoutItemStyles = computed(() => {
+        const isHorizontal = position.value === "left" || position.value === "right";
+        const isOppositeHorizontal = position.value === "right";
+        const isOppositeVertical = position.value === "bottom";
+        const styles = {
+          [position.value]: 0,
+          "z-index": zIndex.value,
+          "transform": `translate${isHorizontal ? "X" : "Y"}(${(active.value ? 0 : -110) * (isOppositeHorizontal || isOppositeVertical ? -1 : 1)}%)`,
+          "position": absolute.value || rootZIndex.value !== ROOT_ZINDEX ? "absolute" : "fixed",
+          ...transitionsEnabled.value ? void 0 : { "transition": "none" }
+        };
+        if (!isMounted.value) return styles;
+        const item = items.value[index.value];
+        if (!item) throw new Error(`[Foxy] Could not find layout item "${id}"`);
+        const overlap = computedOverlaps.value.get(id);
+        if (overlap) {
+          item[overlap.position] += overlap.amount;
+        }
+        return {
+          ...styles,
+          "height": isHorizontal ? `calc(100% - ${convertToUnit(item.top)} - ${convertToUnit(item.bottom)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0,
+          left: isOppositeHorizontal ? void 0 : convertToUnit(item.left),
+          right: isOppositeHorizontal ? convertToUnit(item.right) : void 0,
+          top: position.value !== "bottom" ? convertToUnit(item.top) : void 0,
+          bottom: position.value !== "top" ? convertToUnit(item.bottom) : void 0,
+          "width": !isHorizontal ? `calc(100% - ${convertToUnit(item.left)} - ${convertToUnit(item.right)})` : elementSize.value ? `${convertToUnit(elementSize.value)}` : void 0
+        };
+      });
+      const layoutItemScrimStyles = computed(() => ({
+        "z-index": zIndex.value - 1
+      }));
+      return { layoutItemStyles, layoutItemScrimStyles, zIndex };
+    },
+    unregister: (id) => {
+      priorities.delete(id);
+      positions.delete(id);
+      layoutSizes.delete(id);
+      activeItems.delete(id);
+      disabledTransitions.delete(id);
+      registered.value = registered.value.filter((v) => v !== id);
+    },
+    mainRect,
+    mainStyles,
+    getLayoutItem,
+    items,
+    layoutRect,
+    rootZIndex,
+    layoutId
+  });
+  const layoutClasses = computed(() => {
+    return [
+      "foxy-layout",
+      { "foxy-layout--full-height": props.fullHeight }
+    ];
+  });
+  const layoutStyles = computed(() => {
+    return {
+      "z-index": parentLayout ? rootZIndex.value : void 0,
+      "position": parentLayout ? "relative" : void 0,
+      "overflow": parentLayout ? "hidden" : void 0
+    };
+  });
+  return {
+    layoutClasses,
+    layoutStyles,
+    getLayoutItem,
+    items,
+    layoutRect,
+    layoutRef: resizeRef,
+    layoutId
+  };
+}

package/dist/src/composables/Commons/lazy.composable.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLazy = useLazy;
+var _vue = require("vue");
+function useLazy(props, active) {
+  const isBooted = (0, _vue.shallowRef)(false);
+  const hasContent = (0, _vue.computed)(() => isBooted.value || props.eager || active.value);
+  (0, _vue.watch)(active, () => isBooted.value = true);
+  const onAfterLeave = () => {
+    if (!props.eager) isBooted.value = false;
+  };
+  return {
+    isBooted,
+    hasContent,
+    onAfterLeave
+  };
+}

package/dist/src/composables/Commons/lazy.composable.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export declare function useLazy(props: {
+    eager: boolean;
+}, active: Ref<boolean>): {
+    isBooted: import("vue").ShallowRef<boolean, boolean>;
+    hasContent: import("vue").ComputedRef<boolean>;
+    onAfterLeave: () => void;
+};

package/dist/src/composables/Commons/lazy.composable.js

@@ -0,0 +1,10 @@
+import { computed, shallowRef, watch } from "vue";
+export function useLazy(props, active) {
+  const isBooted = shallowRef(false);
+  const hasContent = computed(() => isBooted.value || props.eager || active.value);
+  watch(active, () => isBooted.value = true);
+  const onAfterLeave = () => {
+    if (!props.eager) isBooted.value = false;
+  };
+  return { isBooted, hasContent, onAfterLeave };
+}

package/dist/src/composables/Commons/loader.composable.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLoader = useLoader;
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useLoader(props, name = (0, _utils.getCurrentInstanceName)()) {
+  const loaderClasses = (0, _vue.computed)(() => ({
+    [`${name}--loading`]: props.loading
+  }));
+  return {
+    loaderClasses
+  };
+}

package/dist/src/composables/Commons/loader.composable.d.ts

@@ -0,0 +1,6 @@
+import type { ILoaderProps } from '@foxy/interfaces';
+export declare function useLoader(props: ILoaderProps, name?: any): {
+    loaderClasses: import("vue").ComputedRef<{
+        [x: string]: any;
+    }>;
+};

package/dist/src/composables/Commons/loader.composable.js

@@ -0,0 +1,8 @@
+import { getCurrentInstanceName } from "@foxy/utils";
+import { computed } from "vue";
+export function useLoader(props, name = getCurrentInstanceName()) {
+  const loaderClasses = computed(() => ({
+    [`${name}--loading`]: props.loading
+  }));
+  return { loaderClasses };
+}

package/dist/src/composables/Commons/locale.composable.cjs

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLocale = createLocale;
+exports.createRtl = createRtl;
+exports.provideLocale = provideLocale;
+exports.provideRtl = provideRtl;
+exports.useLocale = useLocale;
+exports.useRtl = useRtl;
+var foxyMessages = _interopRequireWildcard(require("@foxy/assets/locales"));
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+var _vueI18n = require("vue-i18n");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function createLocale(options) {
+  const i18nOptions = (0, _utils.mergeDeep)({
+    locale: "en",
+    fallbackLocale: "en",
+    messages: JSON.parse(JSON.stringify(foxyMessages)),
+    // Fix problems with json file imported
+    legacy: false
+  }, options);
+  const i18n = (0, _vueI18n.createI18n)(i18nOptions);
+  const locale = (0, _utils.createVueI18nAdapter)({
+    i18n,
+    useI18n: _vueI18n.useI18n
+  });
+  const rtl = createRtl(locale, options);
+  return {
+    ...locale,
+    ...rtl
+  };
+}
+function useLocale() {
+  const locale = (0, _vue.inject)(_consts.FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected locale instance");
+  return locale;
+}
+function provideLocale(props) {
+  const locale = (0, _vue.inject)(_consts.FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected locale instance");
+  const i18n = locale.provide(props);
+  const rtl = provideRtl(i18n, locale.rtl, props);
+  const data = {
+    ...i18n,
+    ...rtl
+  };
+  (0, _vue.provide)(_consts.FOXY_LOCALE_KEY, data);
+  return data;
+}
+function createRtl(i18n, options) {
+  const rtl = (0, _vue.ref)(options?.rtl ?? _consts.LOCALE_RTL_DEFAULT);
+  const isRtl = (0, _vue.computed)(() => rtl.value[i18n.current.value] ?? false);
+  return {
+    isRtl,
+    rtl
+  };
+}
+function useRtl(name = (0, _utils.getCurrentInstanceName)()) {
+  const locale = (0, _vue.inject)(_consts.FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected rtl instance");
+  const rtlClasses = (0, _vue.computed)(() => {
+    return `${name}--is-${locale.isRtl.value ? "rtl" : "ltr"}`;
+  });
+  return {
+    isRtl: locale.isRtl,
+    rtlClasses
+  };
+}
+function provideRtl(locale, rtl, props) {
+  const isRtl = (0, _vue.computed)(() => props.rtl ?? rtl.value[locale.current.value] ?? false);
+  return {
+    isRtl,
+    rtl
+  };
+}

package/dist/src/composables/Commons/locale.composable.d.ts

@@ -0,0 +1,10 @@
+import type { ILocaleInstance, ILocaleOptions, ILocaleProps, IRtlInstance, IRtlOptions, IRtlProps } from "@foxy/interfaces";
+export declare function createLocale(options?: ILocaleOptions & IRtlOptions): any;
+export declare function useLocale(): {};
+export declare function provideLocale(props: ILocaleProps & IRtlProps): any;
+export declare function createRtl(i18n: ILocaleInstance, options?: IRtlOptions): IRtlInstance;
+export declare function useRtl(name?: any): {
+    isRtl: any;
+    rtlClasses: import("vue").ComputedRef<string>;
+};
+export declare function provideRtl(locale: ILocaleInstance, rtl: IRtlInstance['rtl'], props: IRtlProps): IRtlInstance;

package/dist/src/composables/Commons/locale.composable.js

@@ -0,0 +1,55 @@
+import * as foxyMessages from "@foxy/assets/locales";
+import { FOXY_LOCALE_KEY, LOCALE_RTL_DEFAULT } from "@foxy/consts";
+import { createVueI18nAdapter, getCurrentInstanceName, mergeDeep } from "@foxy/utils";
+import { computed, inject, provide, ref } from "vue";
+import { createI18n, useI18n } from "vue-i18n";
+export function createLocale(options) {
+  const i18nOptions = mergeDeep({
+    locale: "en",
+    fallbackLocale: "en",
+    messages: JSON.parse(JSON.stringify(foxyMessages)),
+    // Fix problems with json file imported
+    legacy: false
+  }, options);
+  const i18n = createI18n(i18nOptions);
+  const locale = createVueI18nAdapter({ i18n, useI18n });
+  const rtl = createRtl(locale, options);
+  return { ...locale, ...rtl };
+}
+export function useLocale() {
+  const locale = inject(FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected locale instance");
+  return locale;
+}
+export function provideLocale(props) {
+  const locale = inject(FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected locale instance");
+  const i18n = locale.provide(props);
+  const rtl = provideRtl(i18n, locale.rtl, props);
+  const data = { ...i18n, ...rtl };
+  provide(FOXY_LOCALE_KEY, data);
+  return data;
+}
+export function createRtl(i18n, options) {
+  const rtl = ref(options?.rtl ?? LOCALE_RTL_DEFAULT);
+  const isRtl = computed(() => rtl.value[i18n.current.value] ?? false);
+  return {
+    isRtl,
+    rtl
+  };
+}
+export function useRtl(name = getCurrentInstanceName()) {
+  const locale = inject(FOXY_LOCALE_KEY);
+  if (!locale) throw new Error("[Foxy] Could not find injected rtl instance");
+  const rtlClasses = computed(() => {
+    return `${name}--is-${locale.isRtl.value ? "rtl" : "ltr"}`;
+  });
+  return { isRtl: locale.isRtl, rtlClasses };
+}
+export function provideRtl(locale, rtl, props) {
+  const isRtl = computed(() => props.rtl ?? rtl.value[locale.current.value] ?? false);
+  return {
+    isRtl,
+    rtl
+  };
+}

package/dist/src/composables/Commons/location.composable.cjs

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocation = useLocation;
+exports.useLocationStrategies = useLocationStrategies;
+var _composables = require("@foxy/composables");
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useLocation(props, opposite = false, offset) {
+  const locationStyles = (0, _vue.computed)(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = (0, _utils.parseAnchor)(props.location.split(" ").length > 1 ? props.location : `${props.location} center`);
+    const getOffset = side2 => {
+      return offset ? offset(side2) : 0;
+    };
+    const styles = {};
+    if (side !== "center") {
+      if (opposite) styles[_consts.OPPOSITE_MAP[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== "center") {
+      if (opposite) styles[_consts.OPPOSITE_MAP[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === "center") styles.top = styles.left = "50%";else {
+        styles[{
+          top: "left",
+          bottom: "left",
+          left: "top",
+          right: "top"
+        }[side]] = "50%";
+      }
+      styles.transform = {
+        top: "translateX(-50%)",
+        bottom: "translateX(-50%)",
+        left: "translateY(-50%)",
+        right: "translateY(-50%)",
+        center: "translate(-50%, -50%)"
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+function useLocationStrategies(props, data) {
+  const contentStyles = (0, _vue.ref)({});
+  const updateLocation = (0, _vue.ref)();
+  const handleResize = e => {
+    updateLocation.value?.(e);
+  };
+  if (_consts.IN_BROWSER) {
+    (0, _composables.useToggleScope)(() => !!(data.isActive.value && props.locationStrategy), reset => {
+      (0, _vue.watch)(() => props.locationStrategy, reset);
+      (0, _vue.onScopeDispose)(() => {
+        window.removeEventListener("resize", handleResize);
+        updateLocation.value = void 0;
+      });
+      window.addEventListener("resize", handleResize, {
+        passive: true
+      });
+      if (props.locationStrategy) {
+        if (typeof props.locationStrategy === "function") {
+          updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;
+        } else {
+          updateLocation.value = _consts.LOCATION_STRATEGIES[props.locationStrategy](data, props, contentStyles)?.updateLocation;
+        }
+      }
+    });
+  }
+  return {
+    contentStyles,
+    updateLocation
+  };
+}

package/dist/src/composables/Commons/location.composable.d.ts

@@ -0,0 +1,8 @@
+import type { ILocationProps, ILocationStrategyData, ILocationStrategyProps } from '@foxy/interfaces';
+export declare function useLocation(props: ILocationProps, opposite?: boolean, offset?: (side: string) => number): {
+    locationStyles: import("vue").ComputedRef<Record<string, string | number>>;
+};
+export declare function useLocationStrategies(props: ILocationStrategyProps, data: ILocationStrategyData): {
+    contentStyles: import("vue").Ref<{}, {}>;
+    updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
+};

package/dist/src/composables/Commons/location.composable.js

@@ -0,0 +1,71 @@
+import { useToggleScope } from "@foxy/composables";
+import { IN_BROWSER, LOCATION_STRATEGIES, OPPOSITE_MAP } from "@foxy/consts";
+import { parseAnchor } from "@foxy/utils";
+import { computed, onScopeDispose, ref, watch } from "vue";
+export function useLocation(props, opposite = false, offset) {
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const { side, align } = parseAnchor(
+      props.location.split(" ").length > 1 ? props.location : `${props.location} center`
+    );
+    const getOffset = (side2) => {
+      return offset ? offset(side2) : 0;
+    };
+    const styles = {};
+    if (side !== "center") {
+      if (opposite) styles[OPPOSITE_MAP[side]] = `calc(100% - ${getOffset(side)}px)`;
+      else styles[side] = 0;
+    }
+    if (align !== "center") {
+      if (opposite) styles[OPPOSITE_MAP[align]] = `calc(100% - ${getOffset(align)}px)`;
+      else styles[align] = 0;
+    } else {
+      if (side === "center") styles.top = styles.left = "50%";
+      else {
+        styles[{
+          top: "left",
+          bottom: "left",
+          left: "top",
+          right: "top"
+        }[side]] = "50%";
+      }
+      styles.transform = {
+        top: "translateX(-50%)",
+        bottom: "translateX(-50%)",
+        left: "translateY(-50%)",
+        right: "translateY(-50%)",
+        center: "translate(-50%, -50%)"
+      }[side];
+    }
+    return styles;
+  });
+  return { locationStyles };
+}
+export function useLocationStrategies(props, data) {
+  const contentStyles = ref({});
+  const updateLocation = ref();
+  const handleResize = (e) => {
+    updateLocation.value?.(e);
+  };
+  if (IN_BROWSER) {
+    useToggleScope(() => !!(data.isActive.value && props.locationStrategy), (reset) => {
+      watch(() => props.locationStrategy, reset);
+      onScopeDispose(() => {
+        window.removeEventListener("resize", handleResize);
+        updateLocation.value = void 0;
+      });
+      window.addEventListener("resize", handleResize, { passive: true });
+      if (props.locationStrategy) {
+        if (typeof props.locationStrategy === "function") {
+          updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;
+        } else {
+          updateLocation.value = LOCATION_STRATEGIES[props.locationStrategy](data, props, contentStyles)?.updateLocation;
+        }
+      }
+    });
+  }
+  return {
+    contentStyles,
+    updateLocation
+  };
+}

package/dist/src/composables/Commons/margin.composable.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMargin = useMargin;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useMargin(props, name = (0, _utils.getCurrentInstanceName)()) {
+  const marginClasses = (0, _vue.computed)(() => {
+    const margin = props.margin;
+    const classes = [];
+    if (margin === true || margin === "") {
+      classes.push(`${name}--marged`);
+    }
+    return classes;
+  });
+  const marginStyles = (0, _vue.computed)(() => {
+    const margin = props.margin;
+    const styles = [];
+    if (typeof margin === "string" && margin !== "") {
+      const match = _consts.MARGIN_REGEX.exec(margin)?.groups;
+      if (match) {
+        Object.keys(match).forEach(key => {
+          const values = String(match[key]).split(" ");
+          styles.push(...(0, _utils.formatMarginStylesVar)(values));
+        });
+      }
+    } else if (typeof margin === "number") {
+      styles.push(`margin: ${(0, _utils.convertToUnit)(margin)}`);
+    }
+    return styles;
+  });
+  return {
+    marginClasses,
+    marginStyles
+  };
+}

package/dist/src/composables/Commons/margin.composable.d.ts

@@ -0,0 +1,5 @@
+import type { IMarginProps } from '@foxy/interfaces';
+export declare function useMargin(props: IMarginProps, name?: any): {
+    marginClasses: import("vue").ComputedRef<string[]>;
+    marginStyles: import("vue").ComputedRef<string[]>;
+};