origam 0.1.0

package/dist/src/composables/Commons/border.composable.spec.js

@@ -0,0 +1,34 @@
+import { useBorder } from "@foxy/composables";
+describe("border.ts", () => {
+  it.each([
+    // Invalid or empty
+    [{}, { class: [], styles: [] }],
+    [{ border: null }, { class: [], styles: [] }],
+    // Border number triggering parsing style
+    [{ border: 1 }, { class: [], styles: ["border-width: 1px"] }],
+    // Border string triggering parsing style
+    [{ border: "4px" }, {
+      class: [],
+      styles: ["border-width: 4px", "border-style: solid", "border-color: currentColor"]
+    }],
+    [{ border: "8px dashed" }, {
+      class: [],
+      styles: ["border-width: 8px", "border-style: dashed", "border-color: currentColor"]
+    }],
+    [{ border: "16px #6fb8f2" }, {
+      class: [],
+      styles: ["border-width: 16px", "border-style: solid", "border-color: #6fb8f2"]
+    }],
+    [{ border: "0 10px 0 0" }, {
+      class: [],
+      styles: ["border-block-start-width: 0", "border-block-end-width: 0", "border-inline-start-width: 10px", "border-inline-end-width: 0", "border-style: solid", "border-color: currentColor"]
+    }],
+    // Border Boolean triggering class
+    [{ border: true }, { class: ["test--border"], styles: [] }],
+    [{ border: "" }, { class: ["test--border"], styles: [] }]
+  ])("should have the correct classes & styles using %s", (props, expected) => {
+    const { borderClasses, borderStyles } = useBorder(props, "test");
+    expect(borderStyles.value).toEqual(expected.styles);
+    expect(borderClasses.value).toEqual(expected.class);
+  });
+});

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalendar = useCalendar;
+var _composables = require("@foxy/composables");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useCalendar(props) {
+  const adapter = (0, _composables.useDate)();
+  const model = (0, _composables.useVModel)(props, "date", [], v => (0, _utils.wrapInArray)(v));
+  const year = (0, _composables.useVModel)(props, "year", void 0, v => {
+    const value = v != null ? Number(v) : adapter.getYear(displayValue.value);
+    return adapter.startOfYear(adapter.setYear(adapter.date(), value));
+  }, v => adapter.getYear(v));
+  const month = (0, _composables.useVModel)(props, "month", void 0, v => {
+    const value = v != null ? Number(v) : adapter.getMonth(displayValue.value);
+    const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
+    return adapter.setMonth(date, value);
+  }, v => adapter.getMonth(v));
+  const displayValue = (0, _vue.computed)(() => {
+    if (props.displayValue) return adapter.date(props.displayValue);
+    if (model.value.length > 0) return adapter.date(model.value[0]);
+    if (props.min) return adapter.date(props.min);
+    if (Array.isArray(props.allowedDates)) return adapter.date(props.allowedDates[0]);
+    return adapter.date();
+  });
+  const weekDays = (0, _vue.computed)(() => {
+    const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
+    return props.weekdays?.map(day => (day + firstDayOfWeek) % 7);
+  });
+  const weeksInMonth = (0, _vue.computed)(() => {
+    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
+    const days = weeks.flat();
+    const daysInMonth2 = 6 * 7;
+    if (props.weeksInMonth === "static" && days.length < daysInMonth2) {
+      const lastDay = days[days.length - 1];
+      let week = [];
+      for (let day = 1; day <= daysInMonth2 - days.length; day++) {
+        week.push(adapter.addDays(lastDay, day));
+        if (day % 7 === 0) {
+          weeks.push(week);
+          week = [];
+        }
+      }
+    }
+    return weeks;
+  });
+  const daysInWeek = (0, _vue.computed)(() => {
+    const lastDay = adapter.startOfWeek(displayValue.value, props.firstDayOfWeek);
+    const week = [];
+    for (let day = 0; day <= 6; day++) {
+      week.push(adapter.addDays(lastDay, day));
+    }
+    const today = adapter.date();
+    return genDays(week, today);
+  });
+  const daysInMonth = (0, _vue.computed)(() => {
+    const days = weeksInMonth.value.flat();
+    const today = adapter.date();
+    return genDays(days, today);
+  });
+  const weekNumbers = (0, _vue.computed)(() => {
+    return weeksInMonth.value.map(week => {
+      return week.length ? (0, _utils.getWeek)(adapter, week[0]) : null;
+    });
+  });
+  const genDays = (days, today) => {
+    return days.filter(date => {
+      return weekDays.value?.includes(adapter.toJsDate(date).getDay());
+    }).map((date, index) => {
+      const isoDate = adapter.toISO(date);
+      const isAdjacent = !adapter.isSameMonth(date, month.value);
+      const isStart = adapter.isSameDay(date, adapter.startOfMonth(month.value));
+      const isEnd = adapter.isSameDay(date, adapter.endOfMonth(month.value));
+      const isSame = adapter.isSameDay(date, month.value);
+      return {
+        date,
+        isoDate,
+        formatted: adapter.format(date, "keyboardDate"),
+        year: adapter.getYear(date),
+        month: adapter.getMonth(date),
+        isDisabled: isDisabled(date),
+        isWeekStart: index % 7 === 0,
+        isWeekEnd: index % 7 === 6,
+        isToday: adapter.isSameDay(date, today),
+        isAdjacent,
+        isHidden: isAdjacent && !props.showAdjacentMonths,
+        isStart,
+        isSelected: model.value.some(value => adapter.isSameDay(date, value)),
+        isEnd,
+        isSame,
+        localized: adapter.format(date, "dayOfMonth")
+      };
+    });
+  };
+  const isDisabled = value => {
+    if (props.disabled) return true;
+    const date = adapter.date(value);
+    if (props.min && adapter.isAfter(adapter.date(props.min), date)) return true;
+    if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
+    if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
+      return !props.allowedDates.some(d => adapter.isSameDay(adapter.date(d), date));
+    }
+    if (typeof props.allowedDates === "function") {
+      return !props.allowedDates(date);
+    }
+    return false;
+  };
+  return {
+    displayValue,
+    daysInMonth,
+    daysInWeek,
+    genDays,
+    model,
+    weeksInMonth,
+    weekDays,
+    weekNumbers
+  };
+}

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

@@ -0,0 +1,11 @@
+import type { ICalendarProps, IDay } from "@foxy/interfaces";
+export declare function useCalendar(props: ICalendarProps): {
+    displayValue: import("vue").ComputedRef<any>;
+    daysInMonth: import("vue").ComputedRef<IDay[]>;
+    daysInWeek: import("vue").ComputedRef<IDay[]>;
+    genDays: (days: unknown[], today: unknown) => Array<IDay>;
+    model: any;
+    weeksInMonth: import("vue").ComputedRef<any>;
+    weekDays: import("vue").ComputedRef<any>;
+    weekNumbers: import("vue").ComputedRef<any>;
+};

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

@@ -0,0 +1,132 @@
+import { useDate, useVModel } from "@foxy/composables";
+import { getWeek, wrapInArray } from "@foxy/utils";
+import { computed } from "vue";
+export function useCalendar(props) {
+  const adapter = useDate();
+  const model = useVModel(
+    props,
+    "date",
+    [],
+    (v) => wrapInArray(v)
+  );
+  const year = useVModel(
+    props,
+    "year",
+    void 0,
+    (v) => {
+      const value = v != null ? Number(v) : adapter.getYear(displayValue.value);
+      return adapter.startOfYear(adapter.setYear(adapter.date(), value));
+    },
+    (v) => adapter.getYear(v)
+  );
+  const month = useVModel(
+    props,
+    "month",
+    void 0,
+    (v) => {
+      const value = v != null ? Number(v) : adapter.getMonth(displayValue.value);
+      const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
+      return adapter.setMonth(date, value);
+    },
+    (v) => adapter.getMonth(v)
+  );
+  const displayValue = computed(() => {
+    if (props.displayValue) return adapter.date(props.displayValue);
+    if (model.value.length > 0) return adapter.date(model.value[0]);
+    if (props.min) return adapter.date(props.min);
+    if (Array.isArray(props.allowedDates)) return adapter.date(props.allowedDates[0]);
+    return adapter.date();
+  });
+  const weekDays = computed(() => {
+    const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
+    return props.weekdays?.map((day) => (day + firstDayOfWeek) % 7);
+  });
+  const weeksInMonth = computed(() => {
+    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
+    const days = weeks.flat();
+    const daysInMonth2 = 6 * 7;
+    if (props.weeksInMonth === "static" && days.length < daysInMonth2) {
+      const lastDay = days[days.length - 1];
+      let week = [];
+      for (let day = 1; day <= daysInMonth2 - days.length; day++) {
+        week.push(adapter.addDays(lastDay, day));
+        if (day % 7 === 0) {
+          weeks.push(week);
+          week = [];
+        }
+      }
+    }
+    return weeks;
+  });
+  const daysInWeek = computed(() => {
+    const lastDay = adapter.startOfWeek(displayValue.value, props.firstDayOfWeek);
+    const week = [];
+    for (let day = 0; day <= 6; day++) {
+      week.push(adapter.addDays(lastDay, day));
+    }
+    const today = adapter.date();
+    return genDays(week, today);
+  });
+  const daysInMonth = computed(() => {
+    const days = weeksInMonth.value.flat();
+    const today = adapter.date();
+    return genDays(days, today);
+  });
+  const weekNumbers = computed(() => {
+    return weeksInMonth.value.map((week) => {
+      return week.length ? getWeek(adapter, week[0]) : null;
+    });
+  });
+  const genDays = (days, today) => {
+    return days.filter((date) => {
+      return weekDays.value?.includes(adapter.toJsDate(date).getDay());
+    }).map((date, index) => {
+      const isoDate = adapter.toISO(date);
+      const isAdjacent = !adapter.isSameMonth(date, month.value);
+      const isStart = adapter.isSameDay(date, adapter.startOfMonth(month.value));
+      const isEnd = adapter.isSameDay(date, adapter.endOfMonth(month.value));
+      const isSame = adapter.isSameDay(date, month.value);
+      return {
+        date,
+        isoDate,
+        formatted: adapter.format(date, "keyboardDate"),
+        year: adapter.getYear(date),
+        month: adapter.getMonth(date),
+        isDisabled: isDisabled(date),
+        isWeekStart: index % 7 === 0,
+        isWeekEnd: index % 7 === 6,
+        isToday: adapter.isSameDay(date, today),
+        isAdjacent,
+        isHidden: isAdjacent && !props.showAdjacentMonths,
+        isStart,
+        isSelected: model.value.some((value) => adapter.isSameDay(date, value)),
+        isEnd,
+        isSame,
+        localized: adapter.format(date, "dayOfMonth")
+      };
+    });
+  };
+  const isDisabled = (value) => {
+    if (props.disabled) return true;
+    const date = adapter.date(value);
+    if (props.min && adapter.isAfter(adapter.date(props.min), date)) return true;
+    if (props.max && adapter.isAfter(date, adapter.date(props.max))) return true;
+    if (Array.isArray(props.allowedDates) && props.allowedDates.length > 0) {
+      return !props.allowedDates.some((d) => adapter.isSameDay(adapter.date(d), date));
+    }
+    if (typeof props.allowedDates === "function") {
+      return !props.allowedDates(date);
+    }
+    return false;
+  };
+  return {
+    displayValue,
+    daysInMonth,
+    daysInWeek,
+    genDays,
+    model,
+    weeksInMonth,
+    weekDays,
+    weekNumbers
+  };
+}

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBackgroundColor = useBackgroundColor;
+exports.useBothColor = useBothColor;
+exports.useColor = useColor;
+exports.useColorEffect = useColorEffect;
+exports.useTextColor = useTextColor;
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useColor(colors) {
+  const colorStyles = (0, _vue.computed)(() => {
+    const styles = [];
+    if (colors.value.background) {
+      if (colors.value.background === "transparent") {
+        styles.push(`background-color: ${colors.value.background}`);
+      }
+      if ((0, _utils.isCssColor)(colors.value.background)) {
+        styles.push(`background-color: ${colors.value.background}`);
+        if (!colors.value.text && (0, _utils.isParsableColor)(colors.value.background)) {
+          const backgroundColor = (0, _utils.parseColor)(colors.value.background);
+          if (backgroundColor.a == null || backgroundColor.a === 1) {
+            styles.push(`color: ${(0, _utils.getForeground)(backgroundColor)}`);
+          }
+        }
+      }
+    }
+    if (colors.value.text) {
+      if ((0, _utils.isCssColor)(colors.value.text)) {
+        styles.push(`color: ${colors.value.text}`);
+      }
+    }
+    return styles;
+  });
+  return {
+    colorStyles
+  };
+}
+function useBothColor(bgColorProps, colorProps, name) {
+  const bothColors = (0, _vue.computed)(() => {
+    return {
+      text: (0, _vue.isRef)(colorProps) ? colorProps.value : name ? colorProps[name] : null,
+      background: (0, _vue.isRef)(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
+    };
+  });
+  return useColor(bothColors);
+}
+function useTextColor(props, name) {
+  const colors = (0, _vue.computed)(() => ({
+    text: (0, _vue.isRef)(props) ? props.value : name ? props[name] : null
+  }));
+  const {
+    colorStyles: textColorStyles
+  } = useColor(colors);
+  return {
+    textColorStyles
+  };
+}
+function useBackgroundColor(props, name) {
+  const colors = (0, _vue.computed)(() => ({
+    background: (0, _vue.isRef)(props) ? props.value : name ? props[name] : null
+  }));
+  const {
+    colorStyles: backgroundColorStyles
+  } = useColor(colors);
+  return {
+    backgroundColorStyles
+  };
+}
+function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _vue.ref)(false)) {
+  const activeColor = (0, _vue.computed)(() => {
+    return props.activeColor ? props.activeColor : props.color;
+  });
+  const hoverColor = (0, _vue.computed)(() => {
+    return props.hoverColor ? props.hoverColor : props.color;
+  });
+  const color = (0, _vue.computed)(() => {
+    return isHover.value ? hoverColor.value : isActive.value ? activeColor.value : props.color;
+  });
+  const activeBgColor = (0, _vue.computed)(() => {
+    return props.activeBgColor ? props.activeBgColor : props.bgColor;
+  });
+  const hoverBgColor = (0, _vue.computed)(() => {
+    return props.hoverBgColor ? props.hoverBgColor : props.bgColor;
+  });
+  const bgColor = (0, _vue.computed)(() => {
+    return isHover.value ? hoverBgColor.value : isActive.value ? activeBgColor.value : props.bgColor;
+  });
+  const {
+    colorStyles
+  } = useBothColor(bgColor, color);
+  return {
+    colorStyles,
+    color,
+    bgColor
+  };
+}

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

@@ -0,0 +1,23 @@
+import type { IColorProps } from "@foxy/interfaces";
+import type { TColor } from '@foxy/types';
+import type { ComputedRef, Ref } from 'vue';
+export declare function useColor(colors: ComputedRef<{
+    background?: TColor;
+    text?: TColor;
+}>): {
+    colorStyles: ComputedRef<never[]>;
+};
+export declare function useBothColor<T extends Record<K, TColor>, K extends string>(bgColorProps: T | Ref<TColor> | ComputedRef<TColor>, colorProps: T | Ref<TColor> | ComputedRef<TColor>, name?: K): {
+    colorStyles: ComputedRef<never[]>;
+};
+export declare function useTextColor<T extends Record<K, TColor>, K extends string>(props: T | Ref<TColor>, name?: K): {
+    textColorStyles: ComputedRef<never[]>;
+};
+export declare function useBackgroundColor<T extends Record<K, TColor>, K extends string>(props: T | Ref<TColor>, name?: K): {
+    backgroundColorStyles: ComputedRef<never[]>;
+};
+export declare function useColorEffect(props: IColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>): {
+    colorStyles: ComputedRef<never[]>;
+    color: ComputedRef<any>;
+    bgColor: ComputedRef<any>;
+};

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

@@ -0,0 +1,73 @@
+import { getForeground, isCssColor, isParsableColor, parseColor } from "@foxy/utils";
+import { computed, isRef, ref } from "vue";
+export function useColor(colors) {
+  const colorStyles = computed(() => {
+    const styles = [];
+    if (colors.value.background) {
+      if (colors.value.background === "transparent") {
+        styles.push(`background-color: ${colors.value.background}`);
+      }
+      if (isCssColor(colors.value.background)) {
+        styles.push(`background-color: ${colors.value.background}`);
+        if (!colors.value.text && isParsableColor(colors.value.background)) {
+          const backgroundColor = parseColor(colors.value.background);
+          if (backgroundColor.a == null || backgroundColor.a === 1) {
+            styles.push(`color: ${getForeground(backgroundColor)}`);
+          }
+        }
+      }
+    }
+    if (colors.value.text) {
+      if (isCssColor(colors.value.text)) {
+        styles.push(`color: ${colors.value.text}`);
+      }
+    }
+    return styles;
+  });
+  return { colorStyles };
+}
+export function useBothColor(bgColorProps, colorProps, name) {
+  const bothColors = computed(() => {
+    return {
+      text: isRef(colorProps) ? colorProps.value : name ? colorProps[name] : null,
+      background: isRef(bgColorProps) ? bgColorProps.value : name ? bgColorProps[name] : null
+    };
+  });
+  return useColor(bothColors);
+}
+export function useTextColor(props, name) {
+  const colors = computed(() => ({
+    text: isRef(props) ? props.value : name ? props[name] : null
+  }));
+  const { colorStyles: textColorStyles } = useColor(colors);
+  return { textColorStyles };
+}
+export function useBackgroundColor(props, name) {
+  const colors = computed(() => ({
+    background: isRef(props) ? props.value : name ? props[name] : null
+  }));
+  const { colorStyles: backgroundColorStyles } = useColor(colors);
+  return { backgroundColorStyles };
+}
+export function useColorEffect(props, isHover = ref(false), isActive = ref(false)) {
+  const activeColor = computed(() => {
+    return props.activeColor ? props.activeColor : props.color;
+  });
+  const hoverColor = computed(() => {
+    return props.hoverColor ? props.hoverColor : props.color;
+  });
+  const color = computed(() => {
+    return isHover.value ? hoverColor.value : isActive.value ? activeColor.value : props.color;
+  });
+  const activeBgColor = computed(() => {
+    return props.activeBgColor ? props.activeBgColor : props.bgColor;
+  });
+  const hoverBgColor = computed(() => {
+    return props.hoverBgColor ? props.hoverBgColor : props.bgColor;
+  });
+  const bgColor = computed(() => {
+    return isHover.value ? hoverBgColor.value : isActive.value ? activeBgColor.value : props.bgColor;
+  });
+  const { colorStyles } = useBothColor(bgColor, color);
+  return { colorStyles, color, bgColor };
+}

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDate = createDate;
+exports.useDate = useDate;
+var _composables = require("@foxy/composables");
+var _consts = require("@foxy/consts");
+var _services = require("@foxy/services");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function createDate(options, locale) {
+  const _options = (0, _utils.mergeDeep)({
+    adapter: _services.DateAdapter,
+    locale: {
+      af: "af-ZA",
+      // ar: '', # not the same value for all variants
+      bg: "bg-BG",
+      ca: "ca-ES",
+      ckb: "",
+      cs: "cs-CZ",
+      de: "de-DE",
+      el: "el-GR",
+      en: "en-US",
+      // es: '', # not the same value for all variants
+      et: "et-EE",
+      fa: "fa-IR",
+      fi: "fi-FI",
+      // fr: '', #not the same value for all variants
+      hr: "hr-HR",
+      hu: "hu-HU",
+      he: "he-IL",
+      id: "id-ID",
+      it: "it-IT",
+      ja: "ja-JP",
+      ko: "ko-KR",
+      lv: "lv-LV",
+      lt: "lt-LT",
+      nl: "nl-NL",
+      no: "no-NO",
+      pl: "pl-PL",
+      pt: "pt-PT",
+      ro: "ro-RO",
+      ru: "ru-RU",
+      sk: "sk-SK",
+      sl: "sl-SI",
+      srCyrl: "sr-SP",
+      srLatn: "sr-SP",
+      sv: "sv-SE",
+      th: "th-TH",
+      tr: "tr-TR",
+      az: "az-AZ",
+      uk: "uk-UA",
+      vi: "vi-VN",
+      zhHans: "zh-CN",
+      zhHant: "zh-TW"
+    }
+  }, options);
+  return {
+    options: _options,
+    instance: (0, _utils.createInstance)(_options, locale)
+  };
+}
+function useDate() {
+  const options = (0, _vue.inject)(_consts.FOXY_DATE_OPTIONS_KEY);
+  if (!options) throw new Error("[Foxy] Could not find injected date options");
+  const locale = (0, _composables.useLocale)();
+  return (0, _utils.createInstance)(options, locale);
+}

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

@@ -0,0 +1,6 @@
+import type { IDateOptions, ILocaleInstance } from "@foxy/interfaces";
+export declare function createDate(options: IDateOptions | undefined, locale: ILocaleInstance): {
+    options: IDateOptions;
+    instance: any;
+};
+export declare function useDate(): any;

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

@@ -0,0 +1,63 @@
+import { useLocale } from "@foxy/composables";
+import { FOXY_DATE_OPTIONS_KEY } from "@foxy/consts";
+import { DateAdapter } from "@foxy/services";
+import { createInstance, mergeDeep } from "@foxy/utils";
+import { inject } from "vue";
+export function createDate(options, locale) {
+  const _options = mergeDeep({
+    adapter: DateAdapter,
+    locale: {
+      af: "af-ZA",
+      // ar: '', # not the same value for all variants
+      bg: "bg-BG",
+      ca: "ca-ES",
+      ckb: "",
+      cs: "cs-CZ",
+      de: "de-DE",
+      el: "el-GR",
+      en: "en-US",
+      // es: '', # not the same value for all variants
+      et: "et-EE",
+      fa: "fa-IR",
+      fi: "fi-FI",
+      // fr: '', #not the same value for all variants
+      hr: "hr-HR",
+      hu: "hu-HU",
+      he: "he-IL",
+      id: "id-ID",
+      it: "it-IT",
+      ja: "ja-JP",
+      ko: "ko-KR",
+      lv: "lv-LV",
+      lt: "lt-LT",
+      nl: "nl-NL",
+      no: "no-NO",
+      pl: "pl-PL",
+      pt: "pt-PT",
+      ro: "ro-RO",
+      ru: "ru-RU",
+      sk: "sk-SK",
+      sl: "sl-SI",
+      srCyrl: "sr-SP",
+      srLatn: "sr-SP",
+      sv: "sv-SE",
+      th: "th-TH",
+      tr: "tr-TR",
+      az: "az-AZ",
+      uk: "uk-UA",
+      vi: "vi-VN",
+      zhHans: "zh-CN",
+      zhHant: "zh-TW"
+    }
+  }, options);
+  return {
+    options: _options,
+    instance: createInstance(_options, locale)
+  };
+}
+export function useDate() {
+  const options = inject(FOXY_DATE_OPTIONS_KEY);
+  if (!options) throw new Error("[Foxy] Could not find injected date options");
+  const locale = useLocale();
+  return createInstance(options, locale);
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDelay = useDelay;
+var _utils = require("@foxy/utils");
+function useDelay(props, cb) {
+  let clearDelay = () => {};
+  const runDelay = isOpening => {
+    clearDelay?.();
+    const delay = Number(isOpening ? props.openDelay : props.closeDelay);
+    return new Promise(resolve => {
+      clearDelay = (0, _utils.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/delay.composable.d.ts

@@ -0,0 +1,6 @@
+import type { IDelayProps } from '@foxy/interfaces';
+export declare function useDelay(props: IDelayProps, cb?: (value: boolean) => void): {
+    clearDelay: () => void;
+    runOpenDelay: () => Promise<unknown>;
+    runCloseDelay: () => Promise<unknown>;
+};