origam 0.1.0

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

@@ -0,0 +1,39 @@
+import { filterItems } from "@foxy/utils";
+import { computed, ref, unref, watchEffect } from "vue";
+export function useFilter(props, items, query, options) {
+  const filteredItems = ref([]);
+  const filteredMatches = ref(/* @__PURE__ */ new Map());
+  const transformedItems = computed(() => options?.transform ? unref(items).map((item) => [item, options.transform(item)]) : unref(items));
+  watchEffect(() => {
+    const _query = typeof query === "function" ? query() : unref(query);
+    const strQuery = typeof _query !== "string" && typeof _query !== "number" ? "" : String(_query);
+    const results = filterItems(
+      transformedItems.value,
+      strQuery,
+      {
+        customKeyFilter: {
+          ...props.customKeyFilter,
+          ...unref(options?.customKeyFilter)
+        },
+        default: props.customFilter,
+        filterKeys: props.filterKeys,
+        filterMode: props.filterMode,
+        noFilter: props.noFilter
+      }
+    );
+    const originalItems = 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/focus.composable.cjs

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocus = useFocus;
+var _composables = require("@foxy/composables");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useFocus(props, name = (0, _utils.getCurrentInstanceName)()) {
+  const isFocused = (0, _composables.useVModel)(props, "focused");
+  const focusClasses = (0, _vue.computed)(() => {
+    return {
+      [`${name}--focused`]: isFocused.value
+    };
+  });
+  const onFocus = () => {
+    isFocused.value = true;
+  };
+  const onBlur = () => {
+    isFocused.value = false;
+  };
+  return {
+    focusClasses,
+    isFocused,
+    onFocus,
+    onBlur
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { IFocusProps } from '@foxy/interfaces';
+export declare function useFocus(props: IFocusProps, name?: any): {
+    focusClasses: import("vue").ComputedRef<{
+        [x: string]: any;
+    }>;
+    isFocused: any;
+    onFocus: () => void;
+    onBlur: () => void;
+};

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

@@ -0,0 +1,18 @@
+import { useVModel } from "@foxy/composables";
+import { getCurrentInstanceName } from "@foxy/utils";
+import { computed } from "vue";
+export function useFocus(props, name = getCurrentInstanceName()) {
+  const isFocused = useVModel(props, "focused");
+  const focusClasses = computed(() => {
+    return {
+      [`${name}--focused`]: isFocused.value
+    };
+  });
+  const onFocus = () => {
+    isFocused.value = true;
+  };
+  const onBlur = () => {
+    isFocused.value = false;
+  };
+  return { focusClasses, isFocused, onFocus, onBlur };
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGoTo = createGoTo;
+exports.useGoTo = useGoTo;
+var _composables = require("@foxy/composables");
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: (0, _utils.mergeDeep)((0, _utils.genDefaults)(), options)
+  };
+}
+function useGoTo(_options = {}) {
+  const goToInstance = (0, _vue.inject)(_consts.FOXY_GO_TO_KEY);
+  const {
+    isRtl
+  } = (0, _composables.useRtl)();
+  if (!goToInstance) throw new Error("[Foxy] Could not find injected goto instance");
+  const goTo = {
+    ...goToInstance,
+    rtl: (0, _vue.computed)(() => goToInstance.rtl.value || isRtl.value)
+  };
+  async function go(target, options) {
+    return (0, _utils.scrollTo)(target, (0, _utils.mergeDeep)(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return (0, _utils.scrollTo)(target, (0, _utils.mergeDeep)(_options, options), true, goTo);
+  };
+  return go;
+}

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

@@ -0,0 +1,7 @@
+import type { IGoToInstance, IGoToOptions, ILocaleInstance, IRtlInstance } from "@foxy/interfaces";
+import { ComponentPublicInstance } from "vue";
+export declare function createGoTo(options: IGoToOptions | undefined, locale: ILocaleInstance & IRtlInstance): IGoToInstance;
+export declare function useGoTo(_options?: Partial<IGoToOptions>): {
+    (target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<IGoToOptions>): Promise<any>;
+    horizontal(target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<IGoToOptions>): Promise<any>;
+};

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

@@ -0,0 +1,26 @@
+import { useRtl } from "@foxy/composables";
+import { FOXY_GO_TO_KEY } from "@foxy/consts";
+import { genDefaults, mergeDeep, scrollTo } from "@foxy/utils";
+import { computed, inject } from "vue";
+export function createGoTo(options, locale) {
+  return {
+    rtl: locale.isRtl,
+    options: mergeDeep(genDefaults(), options)
+  };
+}
+export function useGoTo(_options = {}) {
+  const goToInstance = inject(FOXY_GO_TO_KEY);
+  const { isRtl } = useRtl();
+  if (!goToInstance) throw new Error("[Foxy] Could not find injected goto instance");
+  const goTo = {
+    ...goToInstance,
+    rtl: computed(() => goToInstance.rtl.value || isRtl.value)
+  };
+  async function go(target, options) {
+    return scrollTo(target, mergeDeep(_options, options), false, goTo);
+  }
+  go.horizontal = async (target, options) => {
+    return scrollTo(target, mergeDeep(_options, options), true, goTo);
+  };
+  return go;
+}

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroup = useGroup;
+exports.useGroupItem = useGroupItem;
+var _composables = require("@foxy/composables");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useGroupItem(props, injectKey, required = true) {
+  const vm = (0, _utils.getCurrentInstance)("useGroupItem");
+  if (!vm) {
+    throw new Error("[Foxy] useGroupItem composable must be used inside a component setup function");
+  }
+  const id = (0, _utils.getUid)();
+  (0, _vue.provide)(Symbol.for(`${injectKey.description}:id`), id);
+  const group = (0, _vue.inject)(injectKey, null);
+  if (!group) {
+    if (!required) return group;
+    throw new Error(`[Foxy] Could not find useGroup injection with symbol ${injectKey.description}`);
+  }
+  const value = (0, _vue.toRef)(props, "value");
+  const disabled = (0, _vue.computed)(() => !!(group.disabled.value || props.disabled));
+  group.register({
+    id,
+    value,
+    disabled
+  }, vm);
+  (0, _vue.onBeforeUnmount)(() => {
+    group.unregister(id);
+  });
+  const isSelected = (0, _vue.computed)(() => {
+    return group.isSelected(id);
+  });
+  const selectedClass = (0, _vue.computed)(() => {
+    if (isSelected.value) {
+      return [group.selectedClass.value ? group.selectedClass.value : props.selectedClass];
+    }
+    return [];
+  });
+  (0, _vue.watch)(isSelected, value2 => {
+    vm.emit("group:selected", {
+      value: value2
+    });
+  });
+  return {
+    id,
+    isSelected,
+    toggle: () => group.select(id, !isSelected.value),
+    select: value2 => group.select(id, value2),
+    selectedClass,
+    value,
+    disabled,
+    group
+  };
+}
+function useGroup(props, injectKey) {
+  let isUnmounted = false;
+  const items = (0, _vue.reactive)([]);
+  const selected = (0, _composables.useVModel)(props, "modelValue", [], v => {
+    if (v == null) return [];
+    return (0, _utils.getIds)(items, (0, _utils.wrapInArray)(v));
+  }, v => {
+    const arr = (0, _utils.getValues)(items, v);
+    return props.multiple ? arr : arr[0];
+  });
+  const groupVm = (0, _utils.getCurrentInstance)("useGroup");
+  const register = (item, vm) => {
+    const unwrapped = item;
+    const key = Symbol.for(`${injectKey.description}:id`);
+    const children = (0, _utils.findChildrenWithProvide)(key, groupVm?.vnode);
+    const index = children.indexOf(vm);
+    if ((0, _vue.unref)(unwrapped.value) == null) {
+      unwrapped.value = index;
+    }
+    if (index > -1) {
+      items.splice(index, 0, unwrapped);
+    } else {
+      items.push(unwrapped);
+    }
+  };
+  const unregister = id => {
+    if (isUnmounted) return;
+    forceMandatoryValue();
+    const index = items.findIndex(item => item.id === id);
+    items.splice(index, 1);
+  };
+  const forceMandatoryValue = () => {
+    const item = items.find(item2 => !item2.disabled);
+    if (item && props.mandatory && !selected.value.length) {
+      selected.value = [item.id];
+    }
+  };
+  (0, _vue.onMounted)(() => {
+    forceMandatoryValue();
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    isUnmounted = true;
+  });
+  const select = (id, value) => {
+    const item = items.find(item2 => item2.id === id);
+    if (value && item?.disabled) return;
+    if (props.multiple) {
+      const internalValue = selected.value.slice();
+      const index = internalValue.findIndex(v => v === id);
+      const isSelected = ~index;
+      const newValue = value !== void 0 ? value : !isSelected;
+      if (isSelected && props.mandatory && internalValue.length <= 1) return;
+      if (!isSelected && props.max != null && internalValue.length + 1 > props.max) return;
+      if (index < 0 && newValue) internalValue.push(id);else if (index >= 0 && !newValue) internalValue.splice(index, 1);
+      selected.value = internalValue;
+    } else {
+      const isSelected = selected.value.includes(id);
+      if (props.mandatory && isSelected) return;
+      selected.value = (value !== void 0 ? value : !isSelected) ? [id] : [];
+    }
+  };
+  const step = offset => {
+    if (props.multiple) (0, _utils.consoleWarn)('This method is not supported when using "multiple" prop');
+    if (!selected.value.length) {
+      const item = items.find(item2 => !item2.disabled);
+      if (item) {
+        selected.value = [item.id];
+      }
+    } else {
+      const currentId = selected.value[0];
+      const currentIndex = items.findIndex(i => i.id === currentId);
+      let newIndex = (currentIndex + offset) % items.length;
+      let newItem = items[newIndex];
+      while (newItem.disabled && newIndex !== currentIndex) {
+        newIndex = (newIndex + offset) % items.length;
+        newItem = items[newIndex];
+      }
+      if (newItem.disabled) return;
+      selected.value = [items[newIndex].id];
+    }
+  };
+  const state = {
+    register,
+    unregister,
+    selected,
+    select,
+    disabled: (0, _vue.toRef)(props, "disabled"),
+    prev: () => step(items.length - 1),
+    next: () => step(1),
+    isSelected: id => selected.value.includes(id),
+    selectedClass: (0, _vue.computed)(() => props.selectedClass),
+    items: (0, _vue.computed)(() => items),
+    getItemIndex: value => (0, _utils.getItemIndex)(items, value)
+  };
+  (0, _vue.provide)(injectKey, state);
+  return state;
+}

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

@@ -0,0 +1,4 @@
+import type { IGroupItemProps, IGroupItemProvide, IGroupProps, IGroupProvide } from '@foxy/interfaces';
+import { InjectionKey } from 'vue';
+export declare function useGroupItem(props: IGroupItemProps, injectKey: InjectionKey<IGroupProvide>, required?: boolean): IGroupItemProvide | null;
+export declare function useGroup(props: IGroupProps, injectKey: InjectionKey<IGroupProvide>): IGroupProvide;

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

@@ -0,0 +1,173 @@
+import { useVModel } from "@foxy/composables";
+import {
+  consoleWarn,
+  findChildrenWithProvide,
+  getCurrentInstance,
+  getIds,
+  getItemIndex,
+  getUid,
+  getValues,
+  wrapInArray
+} from "@foxy/utils";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  toRef,
+  unref,
+  watch
+} from "vue";
+export function useGroupItem(props, injectKey, required = true) {
+  const vm = getCurrentInstance("useGroupItem");
+  if (!vm) {
+    throw new Error(
+      "[Foxy] useGroupItem composable must be used inside a component setup function"
+    );
+  }
+  const id = getUid();
+  provide(Symbol.for(`${injectKey.description}:id`), id);
+  const group = inject(injectKey, null);
+  if (!group) {
+    if (!required) return group;
+    throw new Error(`[Foxy] Could not find useGroup injection with symbol ${injectKey.description}`);
+  }
+  const value = toRef(props, "value");
+  const disabled = computed(() => !!(group.disabled.value || props.disabled));
+  group.register({
+    id,
+    value,
+    disabled
+  }, vm);
+  onBeforeUnmount(() => {
+    group.unregister(id);
+  });
+  const isSelected = computed(() => {
+    return group.isSelected(id);
+  });
+  const selectedClass = computed(() => {
+    if (isSelected.value) {
+      return [group.selectedClass.value ? group.selectedClass.value : props.selectedClass];
+    }
+    return [];
+  });
+  watch(isSelected, (value2) => {
+    vm.emit("group:selected", { value: value2 });
+  });
+  return {
+    id,
+    isSelected,
+    toggle: () => group.select(id, !isSelected.value),
+    select: (value2) => group.select(id, value2),
+    selectedClass,
+    value,
+    disabled,
+    group
+  };
+}
+export function useGroup(props, injectKey) {
+  let isUnmounted = false;
+  const items = reactive([]);
+  const selected = useVModel(
+    props,
+    "modelValue",
+    [],
+    (v) => {
+      if (v == null) return [];
+      return getIds(items, wrapInArray(v));
+    },
+    (v) => {
+      const arr = getValues(items, v);
+      return props.multiple ? arr : arr[0];
+    }
+  );
+  const groupVm = getCurrentInstance("useGroup");
+  const register = (item, vm) => {
+    const unwrapped = item;
+    const key = Symbol.for(`${injectKey.description}:id`);
+    const children = findChildrenWithProvide(key, groupVm?.vnode);
+    const index = children.indexOf(vm);
+    if (unref(unwrapped.value) == null) {
+      unwrapped.value = index;
+    }
+    if (index > -1) {
+      items.splice(index, 0, unwrapped);
+    } else {
+      items.push(unwrapped);
+    }
+  };
+  const unregister = (id) => {
+    if (isUnmounted) return;
+    forceMandatoryValue();
+    const index = items.findIndex((item) => item.id === id);
+    items.splice(index, 1);
+  };
+  const forceMandatoryValue = () => {
+    const item = items.find((item2) => !item2.disabled);
+    if (item && props.mandatory && !selected.value.length) {
+      selected.value = [item.id];
+    }
+  };
+  onMounted(() => {
+    forceMandatoryValue();
+  });
+  onBeforeUnmount(() => {
+    isUnmounted = true;
+  });
+  const select = (id, value) => {
+    const item = items.find((item2) => item2.id === id);
+    if (value && item?.disabled) return;
+    if (props.multiple) {
+      const internalValue = selected.value.slice();
+      const index = internalValue.findIndex((v) => v === id);
+      const isSelected = ~index;
+      const newValue = value !== void 0 ? value : !isSelected;
+      if (isSelected && props.mandatory && internalValue.length <= 1) return;
+      if (!isSelected && props.max != null && internalValue.length + 1 > props.max) return;
+      if (index < 0 && newValue) internalValue.push(id);
+      else if (index >= 0 && !newValue) internalValue.splice(index, 1);
+      selected.value = internalValue;
+    } else {
+      const isSelected = selected.value.includes(id);
+      if (props.mandatory && isSelected) return;
+      selected.value = (value !== void 0 ? value : !isSelected) ? [id] : [];
+    }
+  };
+  const step = (offset) => {
+    if (props.multiple) consoleWarn('This method is not supported when using "multiple" prop');
+    if (!selected.value.length) {
+      const item = items.find((item2) => !item2.disabled);
+      if (item) {
+        selected.value = [item.id];
+      }
+    } else {
+      const currentId = selected.value[0];
+      const currentIndex = items.findIndex((i) => i.id === currentId);
+      let newIndex = (currentIndex + offset) % items.length;
+      let newItem = items[newIndex];
+      while (newItem.disabled && newIndex !== currentIndex) {
+        newIndex = (newIndex + offset) % items.length;
+        newItem = items[newIndex];
+      }
+      if (newItem.disabled) return;
+      selected.value = [items[newIndex].id];
+    }
+  };
+  const state = {
+    register,
+    unregister,
+    selected,
+    select,
+    disabled: toRef(props, "disabled"),
+    prev: () => step(items.length - 1),
+    next: () => step(1),
+    isSelected: (id) => selected.value.includes(id),
+    selectedClass: computed(() => props.selectedClass),
+    items: computed(() => items),
+    getItemIndex: (value) => getItemIndex(items, value)
+  };
+  provide(injectKey, state);
+  return state;
+}

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHotkey = useHotkey;
+var _consts = require("@foxy/consts");
+var _hotkeyConst = require("@foxy/consts/Commons/hotkey.const.ts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useHotkey(keys, callback, options = {}) {
+  if (!_consts.IN_BROWSER) return function () {};
+  const {
+    event = "keydown",
+    inputs = false,
+    preventDefault = true,
+    sequenceTimeout = 1e3
+  } = options;
+  const isMac = navigator?.userAgent?.includes("Macintosh") ?? false;
+  let timeout = 0;
+  let keyGroups;
+  let isSequence = false;
+  let groupIndex = 0;
+  const clearTimer = () => {
+    if (!timeout) return;
+    clearTimeout(timeout);
+    timeout = 0;
+  };
+  const isInputFocused = () => {
+    if ((0, _vue.toValue)(inputs)) return false;
+    const activeElement = document.activeElement;
+    return activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable || activeElement.contentEditable === "true");
+  };
+  const resetSequence = () => {
+    groupIndex = 0;
+    clearTimer();
+  };
+  const handler = e => {
+    const group = keyGroups[groupIndex];
+    if (!group || isInputFocused()) return;
+    if (!matchesKeyGroup(e, group)) {
+      if (isSequence) resetSequence();
+      return;
+    }
+    if ((0, _vue.toValue)(preventDefault)) e.preventDefault();
+    if (!isSequence) {
+      callback(e);
+      return;
+    }
+    clearTimer();
+    groupIndex++;
+    if (groupIndex === keyGroups.length) {
+      callback(e);
+      resetSequence();
+      return;
+    }
+    timeout = window.setTimeout(resetSequence, (0, _vue.toValue)(sequenceTimeout));
+  };
+  const cleanup = () => {
+    window.removeEventListener((0, _vue.toValue)(event), handler);
+    clearTimer();
+  };
+  (0, _vue.watch)(() => (0, _vue.toValue)(keys), function (unrefKeys) {
+    cleanup();
+    if (unrefKeys) {
+      const groups = (0, _utils.splitKeySequence)(unrefKeys.toLowerCase());
+      isSequence = groups.length > 1;
+      keyGroups = groups;
+      resetSequence();
+      window.addEventListener((0, _vue.toValue)(event), handler);
+    }
+  }, {
+    immediate: true
+  });
+  (0, _vue.watch)(() => (0, _vue.toValue)(event), function (newEvent, oldEvent) {
+    if (oldEvent && keyGroups && keyGroups.length > 0) {
+      window.removeEventListener(oldEvent, handler);
+      window.addEventListener(newEvent, handler);
+    }
+  });
+  try {
+    (0, _utils.getCurrentInstance)("useHotkey");
+    (0, _vue.onBeforeUnmount)(cleanup);
+  } catch {
+    (0, _utils.consoleWarn)("Can't cleanup");
+  }
+  const parseKeyGroup = group => {
+    const parts = (0, _utils.splitKeyCombination)(group.toLowerCase());
+    if (parts.length === 0) {
+      return {
+        modifiers: Object.fromEntries(_hotkeyConst.KEYBOARD_MODIFIERS.map(m => [m, false])),
+        actualKey: void 0
+      };
+    }
+    const modifiers = Object.fromEntries(_hotkeyConst.KEYBOARD_MODIFIERS.map(m => [m, false]));
+    let actualKey;
+    for (const part of parts) {
+      if (_hotkeyConst.KEYBOARD_MODIFIERS.includes(part)) {
+        modifiers[part] = true;
+      } else {
+        actualKey = part;
+      }
+    }
+    return {
+      modifiers,
+      actualKey
+    };
+  };
+  const matchesKeyGroup = (e, group) => {
+    const {
+      modifiers,
+      actualKey
+    } = parseKeyGroup(group);
+    const expectCtrl = modifiers.ctrl || !isMac && (modifiers.cmd || modifiers.meta);
+    const expectMeta = isMac && (modifiers.cmd || modifiers.meta);
+    return e.ctrlKey === expectCtrl && e.metaKey === expectMeta && e.shiftKey === modifiers.shift && e.altKey === modifiers.alt && e.key.toLowerCase() === actualKey?.toLowerCase();
+  };
+  return cleanup;
+}

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

@@ -0,0 +1,3 @@
+import { IHotkeyOptions } from "@foxy/interfaces";
+import { MaybeRef } from "vue";
+export declare function useHotkey(keys: MaybeRef<string | undefined>, callback: (e: KeyboardEvent) => void, options?: IHotkeyOptions): () => void;