origam 0.1.0

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

@@ -0,0 +1,26 @@
+import { defer } from "@foxy/utils";
+export function useDelay(props, cb) {
+  let clearDelay = () => {
+  };
+  const runDelay = (isOpening) => {
+    clearDelay?.();
+    const delay = Number(isOpening ? props.openDelay : props.closeDelay);
+    return new Promise((resolve) => {
+      clearDelay = defer(delay, () => {
+        cb?.(isOpening);
+        resolve(isOpening);
+      });
+    });
+  };
+  const runOpenDelay = () => {
+    return runDelay(true);
+  };
+  const runCloseDelay = () => {
+    return runDelay(false);
+  };
+  return {
+    clearDelay,
+    runOpenDelay,
+    runCloseDelay
+  };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDensity = useDensity;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useDensity(props, name = (0, _utils.getCurrentInstanceName)()) {
+  const densityClasses = (0, _vue.computed)(() => {
+    const density = (0, _vue.isRef)(props) ? props.value : props.density;
+    const classes = [];
+    if (density == null) return classes;
+    if (density && _consts.PREDIFINED_DENSITY.includes(density)) {
+      classes.push(`${name}--density-${density}`);
+    }
+    return classes;
+  });
+  return {
+    densityClasses
+  };
+}

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

@@ -0,0 +1,5 @@
+import type { IDensityProps } from '@foxy/interfaces';
+import { Ref } from 'vue';
+export declare function useDensity(props: IDensityProps | Ref<number | string | undefined>, name?: any): {
+    densityClasses: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,15 @@
+import { PREDIFINED_DENSITY } from "@foxy/consts";
+import { getCurrentInstanceName } from "@foxy/utils";
+import { computed, isRef } from "vue";
+export function useDensity(props, name = getCurrentInstanceName()) {
+  const densityClasses = computed(() => {
+    const density = isRef(props) ? props.value : props.density;
+    const classes = [];
+    if (density == null) return classes;
+    if (density && PREDIFINED_DENSITY.includes(density)) {
+      classes.push(`${name}--density-${density}`);
+    }
+    return classes;
+  });
+  return { densityClasses };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDimension = useDimension;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useDimension(props) {
+  const dimensionStyles = (0, _vue.computed)(() => {
+    const dimensions = [];
+    _consts.DIMENSIONS_ARRAY.forEach(dimension => {
+      if (props[dimension]) {
+        dimensions.push(`${(0, _utils.toKebabCase)(dimension)}: ${(0, _utils.convertToUnit)(props[dimension])}`);
+      }
+    });
+    return dimensions;
+  });
+  return {
+    dimensionStyles
+  };
+}

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

@@ -0,0 +1,4 @@
+import type { IDimensionProps } from '@foxy/interfaces';
+export declare function useDimension(props: IDimensionProps): {
+    dimensionStyles: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,15 @@
+import { DIMENSIONS_ARRAY } from "@foxy/consts";
+import { convertToUnit, toKebabCase } from "@foxy/utils";
+import { computed } from "vue";
+export function useDimension(props) {
+  const dimensionStyles = computed(() => {
+    const dimensions = [];
+    DIMENSIONS_ARRAY.forEach((dimension) => {
+      if (props[dimension]) {
+        dimensions.push(`${toKebabCase(dimension)}: ${convertToUnit(props[dimension])}`);
+      }
+    });
+    return dimensions;
+  });
+  return { dimensionStyles };
+}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDisplay = createDisplay;
+exports.useDisplay = useDisplay;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useDisplay(props = {}, name = (0, _utils.getCurrentInstanceName)()) {
+  const display = (0, _vue.inject)(_consts.FOXY_DISPLAY_KEY);
+  if (!display) throw new Error("Could not find Foxy display injection");
+  const mobile = (0, _vue.computed)(() => {
+    if (!props.mobileBreakpoint) return display.mobile.value;
+    const breakpointValue = typeof props.mobileBreakpoint === "number" ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
+    return display.width.value < breakpointValue;
+  });
+  const displayClasses = (0, _vue.computed)(() => {
+    if (!name) return {};
+    return {
+      [`${name}--mobile`]: mobile.value
+    };
+  });
+  return {
+    ...display,
+    displayClasses,
+    mobile
+  };
+}
+function createDisplay(options, ssr) {
+  const {
+    thresholds,
+    mobileBreakpoint
+  } = (0, _utils.parseDisplayOptions)(options);
+  const height = (0, _vue.shallowRef)((0, _utils.getClientHeight)(ssr));
+  const platform = (0, _vue.shallowRef)((0, _utils.getPlatform)(ssr));
+  const state = (0, _vue.reactive)({});
+  const width = (0, _vue.shallowRef)((0, _utils.getClientWidth)(ssr));
+  function updateSize() {
+    height.value = (0, _utils.getClientHeight)();
+    width.value = (0, _utils.getClientWidth)();
+  }
+  function update() {
+    updateSize();
+    platform.value = (0, _utils.getPlatform)();
+  }
+  (0, _vue.watchEffect)(() => {
+    const xs = width.value < thresholds.sm;
+    const sm = width.value < thresholds.md && !xs;
+    const md = width.value < thresholds.lg && !(sm || xs);
+    const lg = width.value < thresholds.xl && !(md || sm || xs);
+    const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
+    const xxl = width.value >= thresholds.xxl;
+    const name = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : xl ? "xl" : "xxl";
+    const breakpointValue = typeof mobileBreakpoint === "number" ? mobileBreakpoint : thresholds[mobileBreakpoint];
+    const mobile = width.value < breakpointValue;
+    state.xs = xs;
+    state.sm = sm;
+    state.md = md;
+    state.lg = lg;
+    state.xl = xl;
+    state.xxl = xxl;
+    state.smAndUp = !xs;
+    state.mdAndUp = !(xs || sm);
+    state.lgAndUp = !(xs || sm || md);
+    state.xlAndUp = !(xs || sm || md || lg);
+    state.smAndDown = !(md || lg || xl || xxl);
+    state.mdAndDown = !(lg || xl || xxl);
+    state.lgAndDown = !(xl || xxl);
+    state.xlAndDown = !xxl;
+    state.name = name;
+    state.height = height.value;
+    state.width = width.value;
+    state.mobile = mobile;
+    state.mobileBreakpoint = mobileBreakpoint;
+    state.platform = platform.value;
+    state.thresholds = thresholds;
+  });
+  if (_consts.IN_BROWSER) {
+    window.addEventListener("resize", updateSize, {
+      passive: true
+    });
+  }
+  return {
+    ...(0, _vue.toRefs)(state),
+    update,
+    ssr: !!ssr
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { IDisplayInstance, IDisplayOptions, IDisplayProps } from '@foxy/interfaces';
+import type { TSSROptions } from '@foxy/types';
+export declare function useDisplay(props?: IDisplayProps, name?: any): {
+    displayClasses: import("vue").ComputedRef<{
+        [x: string]: any;
+    }>;
+    mobile: import("vue").ComputedRef<any>;
+};
+export declare function createDisplay(options?: IDisplayOptions, ssr?: TSSROptions): IDisplayInstance;

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

@@ -0,0 +1,68 @@
+import { FOXY_DISPLAY_KEY, IN_BROWSER } from "@foxy/consts";
+import { getClientHeight, getClientWidth, getCurrentInstanceName, getPlatform, parseDisplayOptions } from "@foxy/utils";
+import { computed, inject, reactive, shallowRef, toRefs, watchEffect } from "vue";
+export function useDisplay(props = {}, name = getCurrentInstanceName()) {
+  const display = inject(FOXY_DISPLAY_KEY);
+  if (!display) throw new Error("Could not find Foxy display injection");
+  const mobile = computed(() => {
+    if (!props.mobileBreakpoint) return display.mobile.value;
+    const breakpointValue = typeof props.mobileBreakpoint === "number" ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
+    return display.width.value < breakpointValue;
+  });
+  const displayClasses = computed(() => {
+    if (!name) return {};
+    return { [`${name}--mobile`]: mobile.value };
+  });
+  return { ...display, displayClasses, mobile };
+}
+export function createDisplay(options, ssr) {
+  const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);
+  const height = shallowRef(getClientHeight(ssr));
+  const platform = shallowRef(getPlatform(ssr));
+  const state = reactive({});
+  const width = shallowRef(getClientWidth(ssr));
+  function updateSize() {
+    height.value = getClientHeight();
+    width.value = getClientWidth();
+  }
+  function update() {
+    updateSize();
+    platform.value = getPlatform();
+  }
+  watchEffect(() => {
+    const xs = width.value < thresholds.sm;
+    const sm = width.value < thresholds.md && !xs;
+    const md = width.value < thresholds.lg && !(sm || xs);
+    const lg = width.value < thresholds.xl && !(md || sm || xs);
+    const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
+    const xxl = width.value >= thresholds.xxl;
+    const name = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : xl ? "xl" : "xxl";
+    const breakpointValue = typeof mobileBreakpoint === "number" ? mobileBreakpoint : thresholds[mobileBreakpoint];
+    const mobile = width.value < breakpointValue;
+    state.xs = xs;
+    state.sm = sm;
+    state.md = md;
+    state.lg = lg;
+    state.xl = xl;
+    state.xxl = xxl;
+    state.smAndUp = !xs;
+    state.mdAndUp = !(xs || sm);
+    state.lgAndUp = !(xs || sm || md);
+    state.xlAndUp = !(xs || sm || md || lg);
+    state.smAndDown = !(md || lg || xl || xxl);
+    state.mdAndDown = !(lg || xl || xxl);
+    state.lgAndDown = !(xl || xxl);
+    state.xlAndDown = !xxl;
+    state.name = name;
+    state.height = height.value;
+    state.width = width.value;
+    state.mobile = mobile;
+    state.mobileBreakpoint = mobileBreakpoint;
+    state.platform = platform.value;
+    state.thresholds = thresholds;
+  });
+  if (IN_BROWSER) {
+    window.addEventListener("resize", updateSize, { passive: true });
+  }
+  return { ...toRefs(state), update, ssr: !!ssr };
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragResizer = useDragResizer;
+var _composables = require("@foxy/composables");
+var _enums = require("@foxy/enums");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useDragResizer(el, value, min, max, axis) {
+  const resizing = (0, _vue.ref)(false);
+  const removeListeners = [];
+  const onUnmountedCleanupFns = [];
+  (0, _vue.onUnmounted)(() => {
+    onUnmountedCleanupFns.forEach(fn => fn());
+  });
+  const isHorizontal = (0, _vue.computed)(() => {
+    return axis === _enums.AXIS.X;
+  });
+  const onMouseDown = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const start = (0, _utils.getPosition)(e, isHorizontal.value ? _enums.CLIENT_POSITION.X : _enums.CLIENT_POSITION.Y);
+    const initialStart = value.value;
+    resizing.value = true;
+    const onMouseMove = e2 => {
+      const clickOffset = (0, _utils.getPosition)(e2, isHorizontal.value ? _enums.CLIENT_POSITION.X : _enums.CLIENT_POSITION.Y);
+      const delta = clickOffset - start;
+      value.value = (0, _utils.clamp)(initialStart + delta, min, max);
+    };
+    const onMouseUp = () => {
+      removeListeners.forEach(fn => fn());
+      resizing.value = false;
+    };
+    removeListeners.push(...[(0, _utils.addWindowListener)("mousemove", onMouseMove, onUnmountedCleanupFns), (0, _utils.addWindowListener)("mouseup", onMouseUp, onUnmountedCleanupFns)]);
+  };
+  const onTouchStart = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const start = (0, _utils.getPosition)(e, isHorizontal.value ? _enums.CLIENT_POSITION.X : _enums.CLIENT_POSITION.Y);
+    const initialStart = value.value;
+    resizing.value = true;
+    const onTouchMove = e2 => {
+      const clickOffset = (0, _utils.getPosition)(e2, isHorizontal.value ? _enums.CLIENT_POSITION.X : _enums.CLIENT_POSITION.Y);
+      const delta = clickOffset - start;
+      value.value = Math.max(min, Math.min(max, initialStart + delta));
+    };
+    const onTouchEnd = () => {
+      removeListeners.forEach(fn => fn());
+      resizing.value = false;
+    };
+    removeListeners.push(...[(0, _utils.addWindowListener)("touchmove", onTouchMove, onUnmountedCleanupFns), (0, _utils.addWindowListener)("touchend touchcancel", onTouchEnd, onUnmountedCleanupFns)]);
+  };
+  if (el) {
+    (0, _composables.useEventListener)(el, "mousedown", onMouseDown);
+    (0, _composables.useEventListener)(el, "touchstart", onTouchStart);
+  }
+}

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

@@ -0,0 +1,3 @@
+import type { TAxis } from '@foxy/types';
+import { Ref } from 'vue';
+export declare function useDragResizer(el: HTMLElement | undefined, value: Ref<number>, min: number, max: number, axis: TAxis): void;

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

@@ -0,0 +1,59 @@
+import { useEventListener } from "@foxy/composables";
+import { AXIS, CLIENT_POSITION } from "@foxy/enums";
+import { addWindowListener, clamp, getPosition } from "@foxy/utils";
+import { computed, onUnmounted, ref } from "vue";
+export function useDragResizer(el, value, min, max, axis) {
+  const resizing = ref(false);
+  const removeListeners = [];
+  const onUnmountedCleanupFns = [];
+  onUnmounted(() => {
+    onUnmountedCleanupFns.forEach((fn) => fn());
+  });
+  const isHorizontal = computed(() => {
+    return axis === AXIS.X;
+  });
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const start = getPosition(e, isHorizontal.value ? CLIENT_POSITION.X : CLIENT_POSITION.Y);
+    const initialStart = value.value;
+    resizing.value = true;
+    const onMouseMove = (e2) => {
+      const clickOffset = getPosition(e2, isHorizontal.value ? CLIENT_POSITION.X : CLIENT_POSITION.Y);
+      const delta = clickOffset - start;
+      value.value = clamp(initialStart + delta, min, max);
+    };
+    const onMouseUp = () => {
+      removeListeners.forEach((fn) => fn());
+      resizing.value = false;
+    };
+    removeListeners.push(...[
+      addWindowListener("mousemove", onMouseMove, onUnmountedCleanupFns),
+      addWindowListener("mouseup", onMouseUp, onUnmountedCleanupFns)
+    ]);
+  };
+  const onTouchStart = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const start = getPosition(e, isHorizontal.value ? CLIENT_POSITION.X : CLIENT_POSITION.Y);
+    const initialStart = value.value;
+    resizing.value = true;
+    const onTouchMove = (e2) => {
+      const clickOffset = getPosition(e2, isHorizontal.value ? CLIENT_POSITION.X : CLIENT_POSITION.Y);
+      const delta = clickOffset - start;
+      value.value = Math.max(min, Math.min(max, initialStart + delta));
+    };
+    const onTouchEnd = () => {
+      removeListeners.forEach((fn) => fn());
+      resizing.value = false;
+    };
+    removeListeners.push(...[
+      addWindowListener("touchmove", onTouchMove, onUnmountedCleanupFns),
+      addWindowListener("touchend touchcancel", onTouchEnd, onUnmountedCleanupFns)
+    ]);
+  };
+  if (el) {
+    useEventListener(el, "mousedown", onMouseDown);
+    useEventListener(el, "touchstart", onTouchStart);
+  }
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useElevation = useElevation;
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref)("rgb(0,0,0)"), name = (0, _utils.getCurrentInstanceName)()) {
+  const elevationClasses = (0, _vue.computed)(() => {
+    const elevation = (0, _vue.isRef)(props) ? props.value : props.elevation;
+    const classes = [];
+    if (elevation == null || flat.value) return classes;
+    classes.push(`${name}--elevated`);
+    return classes;
+  });
+  const elevationStyles = (0, _vue.computed)(() => {
+    const elevation = (0, _vue.isRef)(props) ? props.value : props.elevation;
+    const styles = [];
+    if (elevation == null || flat.value) return [];
+    styles.push((0, _utils.formatElevationStyle)(parseInt(elevation, 10), bgColor.value));
+    return styles;
+  });
+  return {
+    elevationClasses,
+    elevationStyles
+  };
+}

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

@@ -0,0 +1,7 @@
+import type { IElevationProps } from '@foxy/interfaces';
+import { TColor } from "@foxy/types";
+import { Ref } from 'vue';
+export declare function useElevation(props: IElevationProps | Ref<number | string | undefined>, flat?: Ref<boolean>, bgColor?: Ref<TColor>, name?: any): {
+    elevationClasses: import("vue").ComputedRef<string[]>;
+    elevationStyles: import("vue").ComputedRef<string[]>;
+};

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

@@ -0,0 +1,19 @@
+import { formatElevationStyle, getCurrentInstanceName } from "@foxy/utils";
+import { computed, isRef, ref } from "vue";
+export function useElevation(props, flat = ref(false), bgColor = ref("rgb(0,0,0)"), name = getCurrentInstanceName()) {
+  const elevationClasses = computed(() => {
+    const elevation = isRef(props) ? props.value : props.elevation;
+    const classes = [];
+    if (elevation == null || flat.value) return classes;
+    classes.push(`${name}--elevated`);
+    return classes;
+  });
+  const elevationStyles = computed(() => {
+    const elevation = isRef(props) ? props.value : props.elevation;
+    const styles = [];
+    if (elevation == null || flat.value) return [];
+    styles.push(formatElevationStyle(parseInt(elevation, 10), bgColor.value));
+    return styles;
+  });
+  return { elevationClasses, elevationStyles };
+}

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEventListener = useEventListener;
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = typeof window !== "undefined" ? window : void 0;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target) {
+    return _utils.noop;
+  }
+  if (!Array.isArray(events)) {
+    events = [events];
+  }
+  if (!Array.isArray(listeners)) {
+    listeners = [listeners];
+  }
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach(fn => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, opt) => {
+    el.addEventListener(event, listener, opt);
+    return () => el.removeEventListener(event, listener, opt);
+  };
+  const stopWatch = (0, _vue.watch)(() => [(0, _utils.unrefElement)(target), (0, _utils.resolveUnref)(options)], ([el, options2]) => {
+    cleanup();
+    if (!el) return;
+    cleanups.push(...events.flatMap(event => {
+      return listeners.map(listener => register(el, event, listener, options2));
+    }));
+  }, {
+    immediate: true,
+    flush: "post"
+  });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  (0, _utils.tryOnScopeDispose)(stop);
+  return stop;
+}

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

@@ -0,0 +1 @@
+export declare function useEventListener(...args: Array<any>): any;

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

@@ -0,0 +1,45 @@
+import { noop, resolveUnref, tryOnScopeDispose, unrefElement } from "@foxy/utils";
+import { watch } from "vue";
+export function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = typeof window !== "undefined" ? window : void 0;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target) {
+    return noop;
+  }
+  if (!Array.isArray(events)) {
+    events = [events];
+  }
+  if (!Array.isArray(listeners)) {
+    listeners = [listeners];
+  }
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, opt) => {
+    el.addEventListener(event, listener, opt);
+    return () => el.removeEventListener(event, listener, opt);
+  };
+  const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
+    cleanup();
+    if (!el) return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener, options2));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilter = useFilter;
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useFilter(props, items, query, options) {
+  const filteredItems = (0, _vue.ref)([]);
+  const filteredMatches = (0, _vue.ref)(/* @__PURE__ */new Map());
+  const transformedItems = (0, _vue.computed)(() => options?.transform ? (0, _vue.unref)(items).map(item => [item, options.transform(item)]) : (0, _vue.unref)(items));
+  (0, _vue.watchEffect)(() => {
+    const _query = typeof query === "function" ? query() : (0, _vue.unref)(query);
+    const strQuery = typeof _query !== "string" && typeof _query !== "number" ? "" : String(_query);
+    const results = (0, _utils.filterItems)(transformedItems.value, strQuery, {
+      customKeyFilter: {
+        ...props.customKeyFilter,
+        ...(0, _vue.unref)(options?.customKeyFilter)
+      },
+      default: props.customFilter,
+      filterKeys: props.filterKeys,
+      filterMode: props.filterMode,
+      noFilter: props.noFilter
+    });
+    const originalItems = (0, _vue.unref)(items);
+    const _filteredItems = [];
+    const _filteredMatches = /* @__PURE__ */new Map();
+    results.forEach(({
+      index,
+      matches
+    }) => {
+      const item = originalItems[index];
+      _filteredItems.push(item);
+      _filteredMatches.set(item.value, matches);
+    });
+    filteredItems.value = _filteredItems;
+    filteredMatches.value = _filteredMatches;
+  });
+  const getMatches = item => {
+    return filteredMatches.value.get(item.value);
+  };
+  return {
+    filteredItems,
+    filteredMatches,
+    getMatches
+  };
+}

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

@@ -0,0 +1,11 @@
+import type { IFiltersProps, IInternalItem } from '@foxy/interfaces';
+import type { TFilterKeyFunctions } from '@foxy/types';
+import { MaybeRef, Ref } from 'vue';
+export declare function useFilter<T extends IInternalItem>(props: IFiltersProps, items: MaybeRef<T[]>, query: Ref<string | undefined> | (() => string | undefined), options?: {
+    transform?: (item: T) => Record<string, unknown>;
+    customKeyFilter?: MaybeRef<TFilterKeyFunctions | undefined>;
+}): {
+    filteredItems: Ref<T[], T[]>;
+    filteredMatches: Ref<Map<unknown, Record<string, TFilterMatch>>, Map<unknown, Record<string, TFilterMatch>>>;
+    getMatches: (item: T) => Record<string, TFilterMatch> | undefined;
+};