vft 0.0.249 → 0.0.252

package/es/hooks/index.js

@@ -1,51 +1,54 @@
 import { useAttrs as r } from "./use-attrs/index.js";
-import { useDelayedToggle as s } from "./use-delayed-toggle/index.js";
-import { useDraggable as m } from "./use-draggable/index.js";
-import { useFocus as a } from "./use-focus/index.js";
-import { FORWARD_REF_INJECTION_KEY as f, useForwardRef as d, useForwardRefDirective as I } from "./use-forward-ref/index.js";
-import { ID_INJECTION_KEY as n, useId as i, useIdInjection as E } from "./use-id/index.js";
-import { useLockscreen as g } from "./use-lockscreen/index.js";
-import { createModelToggleComposable as c, useModelToggle as C, useModelToggleEmits as _ } from "./use-model-toggle/index.js";
-import { _bem as K, defaultNamespace as O, namespaceContextKey as R, useGetDerivedNamespace as F, useNamespace as b } from "./use-namespace/index.js";
-import { useOrderedChildren as Y } from "./use-ordered-children/index.js";
-import { usePopper as y } from "./use-popper/index.js";
-import { usePopperContainer as P, usePopperContainerId as S } from "./use-popper-container/index.js";
-import { useSameTarget as v } from "./use-same-target/index.js";
-import { SIZE_INJECTION_KEY as z, useGlobalSize as A } from "./use-size/index.js";
-import { useThrottleRender as j } from "./use-throttle-render/index.js";
-import { useTimeout as L } from "./use-timeout/index.js";
-import { ZINDEX_INJECTION_KEY as X, defaultInitialZIndex as q, useZIndex as B, zIndexContextKey as H } from "./use-z-index/index.js";
+import { useDraggable as s } from "./use-draggable/index.js";
+import { useFocus as u } from "./use-focus/index.js";
+import { FORWARD_REF_INJECTION_KEY as x, useForwardRef as a, useForwardRefDirective as f } from "./use-forward-ref/index.js";
+import { ID_INJECTION_KEY as d, useId as n, useIdInjection as l } from "./use-id/index.js";
+import { useLockscreen as C } from "./use-lockscreen/index.js";
+import { createModelToggleComposable as E, useModelToggle as N, useModelToggleEmits as T } from "./use-model-toggle/index.js";
+import { defaultNamespace as _, namespaceContextKey as D, useGetDerivedNamespace as F, useNamespace as K } from "./use-namespace/index.js";
+import { useOrderedChildren as R } from "./use-ordered-children/index.js";
+import { usePopper as Y } from "./use-popper/index.js";
+import { usePopperContainer as b, usePopperContainerId as h } from "./use-popper-container/index.js";
+import { useSameTarget as P } from "./use-same-target/index.js";
+import { SIZE_INJECTION_KEY as v, useGlobalSize as w } from "./use-size/index.js";
+import { useThrottleRender as z } from "./use-throttle-render/index.js";
+import { useTimeout as G } from "./use-timeout/index.js";
+import { ZINDEX_INJECTION_KEY as j, defaultInitialZIndex as k, useZIndex as L, zIndexContextKey as X } from "./use-z-index/index.js";
+import { useCalcInputWidth as B } from "./use-calc-input-width/index.js";
+import { useComposition as Q } from "./use-composition/index.js";
+import { useFocusController as V } from "./use-focus-controller/index.js";
 export {
-  f as FORWARD_REF_INJECTION_KEY,
-  n as ID_INJECTION_KEY,
-  z as SIZE_INJECTION_KEY,
-  X as ZINDEX_INJECTION_KEY,
-  K as _bem,
-  c as createModelToggleComposable,
-  q as defaultInitialZIndex,
-  O as defaultNamespace,
-  R as namespaceContextKey,
+  x as FORWARD_REF_INJECTION_KEY,
+  d as ID_INJECTION_KEY,
+  v as SIZE_INJECTION_KEY,
+  j as ZINDEX_INJECTION_KEY,
+  E as createModelToggleComposable,
+  k as defaultInitialZIndex,
+  _ as defaultNamespace,
+  D as namespaceContextKey,
   r as useAttrs,
-  s as useDelayedToggle,
-  m as useDraggable,
-  a as useFocus,
-  d as useForwardRef,
-  I as useForwardRefDirective,
+  B as useCalcInputWidth,
+  Q as useComposition,
+  s as useDraggable,
+  u as useFocus,
+  V as useFocusController,
+  a as useForwardRef,
+  f as useForwardRefDirective,
   F as useGetDerivedNamespace,
-  A as useGlobalSize,
-  i as useId,
-  E as useIdInjection,
-  g as useLockscreen,
-  C as useModelToggle,
-  _ as useModelToggleEmits,
-  b as useNamespace,
-  Y as useOrderedChildren,
-  y as usePopper,
-  P as usePopperContainer,
-  S as usePopperContainerId,
-  v as useSameTarget,
-  j as useThrottleRender,
-  L as useTimeout,
-  B as useZIndex,
-  H as zIndexContextKey
+  w as useGlobalSize,
+  n as useId,
+  l as useIdInjection,
+  C as useLockscreen,
+  N as useModelToggle,
+  T as useModelToggleEmits,
+  K as useNamespace,
+  R as useOrderedChildren,
+  Y as usePopper,
+  b as usePopperContainer,
+  h as usePopperContainerId,
+  P as useSameTarget,
+  z as useThrottleRender,
+  G as useTimeout,
+  L as useZIndex,
+  X as zIndexContextKey
 };

package/es/hooks/use-calc-input-width/index.d.ts

@@ -0,0 +1,7 @@
+export declare function useCalcInputWidth(): {
+    calculatorRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    calculatorWidth: import("vue").Ref<number, number>;
+    inputStyle: import("vue").ComputedRef<{
+        minWidth: string;
+    }>;
+};

package/es/hooks/use-calc-input-width/index.js

@@ -0,0 +1,17 @@
+import { shallowRef as r, ref as a, computed as c } from "vue";
+import { useResizeObserver as u } from "@vueuse/core";
+function d() {
+  const t = r(), e = a(0), o = 11, l = c(() => ({
+    minWidth: `${Math.max(e.value, o)}px`
+  }));
+  return u(t, () => {
+    e.value = t.value?.getBoundingClientRect().width ?? 0;
+  }), {
+    calculatorRef: t,
+    calculatorWidth: e,
+    inputStyle: l
+  };
+}
+export {
+  d as useCalcInputWidth
+};

package/es/hooks/use-composition/index.d.ts

@@ -0,0 +1,12 @@
+interface UseCompositionOptions {
+    afterComposition: (event: CompositionEvent) => void;
+    emit?: ((event: 'compositionstart', evt: CompositionEvent) => void) & ((event: 'compositionupdate', evt: CompositionEvent) => void) & ((event: 'compositionend', evt: CompositionEvent) => void);
+}
+export declare function useComposition({ afterComposition, emit, }: UseCompositionOptions): {
+    isComposing: import("vue").Ref<boolean, boolean>;
+    handleComposition: (event: CompositionEvent) => void;
+    handleCompositionStart: (event: CompositionEvent) => void;
+    handleCompositionUpdate: (event: CompositionEvent) => void;
+    handleCompositionEnd: (event: CompositionEvent) => void;
+};
+export {};

package/es/hooks/use-composition/index.js

@@ -0,0 +1,28 @@
+import { ref as c, nextTick as l } from "vue";
+import { isKorean as m } from "@vft/utils";
+function f({
+  afterComposition: e,
+  emit: n
+}) {
+  const t = c(!1), p = (o) => {
+    n?.("compositionstart", o), t.value = !0;
+  }, i = (o) => {
+    n?.("compositionupdate", o);
+    const a = o.target?.value, r = a[a.length - 1] || "";
+    t.value = !m(r);
+  }, s = (o) => {
+    n?.("compositionend", o), t.value && (t.value = !1, l(() => e(o)));
+  };
+  return {
+    isComposing: t,
+    handleComposition: (o) => {
+      o.type === "compositionend" ? s(o) : i(o);
+    },
+    handleCompositionStart: p,
+    handleCompositionUpdate: i,
+    handleCompositionEnd: s
+  };
+}
+export {
+  f as useComposition
+};

package/es/hooks/use-delayed-toggle/index.d.ts

@@ -1,10 +1,14 @@
+import type { ExtractPropTypes, ToRefs } from 'vue';
+export declare const useDelayedToggleProps: {
+    readonly showAfter: import("vft/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    readonly hideAfter: import("vft/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
+    readonly autoClose: import("vft/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+};
 export type UseDelayedToggleProps = {
     open: (event?: Event) => void;
     close: (event?: Event) => void;
-    showAfter: number;
-    hideAfter: number;
-};
-export declare const useDelayedToggle: ({ showAfter, hideAfter, open, close, }: UseDelayedToggleProps) => {
+} & ToRefs<ExtractPropTypes<typeof useDelayedToggleProps>>;
+export declare const useDelayedToggle: ({ showAfter, hideAfter, autoClose, open, close, }: UseDelayedToggleProps) => {
     onOpen: (event?: Event) => void;
     onClose: (event?: Event) => void;
 };

package/es/hooks/use-delayed-toggle/index.js

@@ -1,25 +1,60 @@
-import { unref as n } from "vue";
-import { useTimeout as u } from "../use-timeout/index.js";
-const f = ({
-  showAfter: t = 0,
-  hideAfter: r = 200,
-  open: s,
-  close: m
+import { unref as t } from "vue";
+import "@vueuse/core";
+import { isNumber as c } from "@vft/utils";
+import "../../utils/ns-cover.js";
+import { buildProps as a } from "../../utils/vue/props/runtime.js";
+import { useTimeout as s } from "../use-timeout/index.js";
+const h = a({
+  /**
+   * @description delay of appearance, in millisecond
+   */
+  showAfter: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @description delay of disappear, in millisecond
+   */
+  hideAfter: {
+    type: Number,
+    default: 200
+  },
+  /**
+   * @description disappear automatically, in millisecond
+   */
+  autoClose: {
+    type: Number,
+    default: 0
+  }
+}), D = ({
+  showAfter: m,
+  hideAfter: i,
+  autoClose: n,
+  open: l,
+  close: r
 }) => {
-  const { registerTimeout: e } = u();
+  const { registerTimeout: u } = s(), {
+    registerTimeout: p,
+    cancelTimeout: f
+  } = s();
   return {
-    onOpen: (o) => {
-      e(() => {
-        s(o);
-      }, n(t));
+    onOpen: (e) => {
+      u(() => {
+        l(e);
+        const o = t(n);
+        c(o) && o > 0 && p(() => {
+          r(e);
+        }, o);
+      }, t(m));
     },
-    onClose: (o) => {
-      e(() => {
-        m(o);
-      }, n(r));
+    onClose: (e) => {
+      f(), u(() => {
+        r(e);
+      }, t(i));
     }
   };
 };
 export {
-  f as useDelayedToggle
+  D as useDelayedToggle,
+  h as useDelayedToggleProps
 };

package/es/hooks/use-empty-values/index.d.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, InjectionKey, Ref } from 'vue';
+type EmptyValuesContext = ExtractPropTypes<typeof useEmptyValuesProps>;
+export declare const emptyValuesContextKey: InjectionKey<Ref<EmptyValuesContext>>;
+export declare const SCOPE = "use-empty-values";
+export declare const DEFAULT_EMPTY_VALUES: (string | null | undefined)[];
+export declare const DEFAULT_VALUE_ON_CLEAR: undefined;
+export declare const useEmptyValuesProps: {
+    readonly emptyValues: ArrayConstructor;
+    readonly valueOnClear: import("vft/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
+};
+export declare const useEmptyValues: (props: EmptyValuesContext, defaultValue?: null | undefined) => {
+    emptyValues: import("vue").ComputedRef<unknown[]>;
+    valueOnClear: import("vue").ComputedRef<any>;
+    isEmptyValue: (value: any) => boolean;
+};
+export {};

package/es/hooks/use-empty-values/index.js

@@ -0,0 +1,37 @@
+import { getCurrentInstance as v, inject as m, ref as r, computed as o } from "vue";
+import "@vueuse/core";
+import { isFunction as t } from "@vft/utils";
+import { debugWarn as c } from "../../utils/error.js";
+import "../../utils/ns-cover.js";
+import { buildProps as y } from "../../utils/vue/props/runtime.js";
+const C = Symbol("emptyValuesContextKey"), p = "use-empty-values", d = ["", void 0, null], f = void 0, _ = y({
+  /**
+   * @description empty values supported by the component
+   */
+  emptyValues: Array,
+  /**
+   * @description return value when cleared, if you want to set `undefined`, use `() => undefined`
+   */
+  valueOnClear: {
+    type: [String, Number, Boolean, Function],
+    default: void 0,
+    validator: (e) => t(e) ? !e() : !e
+  }
+}), g = (e, a) => {
+  const l = v() ? m(C, r({})) : r({}), u = o(
+    () => e.emptyValues || l.value.emptyValues || d
+  ), n = o(() => t(e.valueOnClear) ? e.valueOnClear() : e.valueOnClear !== void 0 ? e.valueOnClear : t(l.value.valueOnClear) ? l.value.valueOnClear() : l.value.valueOnClear !== void 0 ? l.value.valueOnClear : a !== void 0 ? a : f), s = (i) => u.value.includes(i);
+  return u.value.includes(n.value) || c(p, "value-on-clear should be a value of empty-values"), {
+    emptyValues: u,
+    valueOnClear: n,
+    isEmptyValue: s
+  };
+};
+export {
+  d as DEFAULT_EMPTY_VALUES,
+  f as DEFAULT_VALUE_ON_CLEAR,
+  p as SCOPE,
+  C as emptyValuesContextKey,
+  g as useEmptyValues,
+  _ as useEmptyValuesProps
+};

package/es/hooks/use-focus-controller/index.d.ts

@@ -0,0 +1,27 @@
+import type { ShallowRef } from 'vue';
+import type { MaybeRef } from '@vueuse/core';
+interface UseFocusControllerOptions {
+    disabled?: MaybeRef<boolean>;
+    /**
+     * return true to cancel focus
+     * @param event FocusEvent
+     */
+    beforeFocus?: (event: FocusEvent) => boolean | undefined;
+    afterFocus?: () => void;
+    /**
+     * return true to cancel blur
+     * @param event FocusEvent
+     */
+    beforeBlur?: (event: FocusEvent) => boolean | undefined;
+    afterBlur?: () => void;
+}
+export declare function useFocusController<T extends {
+    focus: () => void;
+}>(target: ShallowRef<T | undefined>, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur, }?: UseFocusControllerOptions): {
+    isFocused: import("vue").Ref<boolean, boolean>;
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef: ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    handleFocus: (event: FocusEvent) => void;
+    handleBlur: (event: FocusEvent) => void;
+};
+export {};

package/es/hooks/use-focus-controller/index.js

@@ -0,0 +1,38 @@
+import { getCurrentInstance as F, shallowRef as x, ref as b, watch as g, unref as c, onMounted as w } from "vue";
+import { useEventListener as u } from "@vueuse/core";
+import { isElement as C, isFunction as p } from "@vft/utils";
+import { isFocusable as k } from "../../utils/dom/aria.js";
+import "../../utils/ns-cover.js";
+import "lodash-es";
+function B(s, {
+  disabled: n,
+  beforeFocus: i,
+  afterFocus: v,
+  beforeBlur: f,
+  afterBlur: E
+} = {}) {
+  const d = F(), { emit: m } = d, t = x(), o = b(!1), a = (e) => {
+    const r = p(i) ? i(e) : !1;
+    c(n) || o.value || r || (o.value = !0, m("focus", e), v?.());
+  }, l = (e) => {
+    const r = p(f) ? f(e) : !1;
+    c(n) || e.relatedTarget && t.value?.contains(e.relatedTarget) || r || (o.value = !1, m("blur", e), E?.());
+  }, h = (e) => {
+    c(n) || k(e.target) || t.value?.contains(document.activeElement) && t.value !== document.activeElement || s.value?.focus();
+  };
+  return g([t, () => c(n)], ([e, r]) => {
+    e && (r ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", "-1"));
+  }), u(t, "focus", a, !0), u(t, "blur", l, !0), u(t, "click", h, !0), process.env.NODE_ENV === "test" && w(() => {
+    const e = C(s.value) ? s.value : document.querySelector("input,textarea");
+    e && (u(e, "focus", a, !0), u(e, "blur", l, !0));
+  }), {
+    isFocused: o,
+    /** Avoid using wrapperRef and handleFocus/handleBlur together */
+    wrapperRef: t,
+    handleFocus: a,
+    handleBlur: l
+  };
+}
+export {
+  B as useFocusController
+};

package/es/hooks/use-id/index.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/core';
+import { type MaybeRef } from '@vueuse/core';
 import type { InjectionKey, Ref } from 'vue';
 export type ElIdInjectionContext = {
     prefix: number;

package/es/hooks/use-id/index.js

@@ -1,16 +1,16 @@
-import { isClient as n } from "@vueuse/core";
+import { unref as n, inject as i, getCurrentInstance as c } from "vue";
+import { isClient as s, computedEager as u } from "@vueuse/core";
 import "@vft/utils";
-import { debugWarn as i } from "../../utils/error.js";
+import { debugWarn as d } from "../../utils/error.js";
 import "../../utils/ns-cover.js";
 import "lodash-es";
-import { computed as c, unref as s, inject as u, getCurrentInstance as d } from "vue";
 import { useGetDerivedNamespace as p } from "../use-namespace/index.js";
 const r = {
   prefix: Math.floor(Math.random() * 1e4),
   current: 0
-}, m = Symbol("elIdInjection"), I = () => d() ? u(m, r) : r, h = (o) => {
-  const e = I();
-  !n && e === r && i(
+}, m = Symbol("vftIdInjection"), a = () => c() ? i(m, r) : r, N = (t) => {
+  const e = a();
+  !s && e === r && d(
     "IdInjection",
     `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
 usage: app.provide(ID_INJECTION_KEY, {
@@ -18,13 +18,13 @@ usage: app.provide(ID_INJECTION_KEY, {
   current: number,
 })`
   );
-  const t = p();
-  return c(
-    () => s(o) || `${t.value}-id-${e.prefix}-${e.current++}`
+  const o = p();
+  return u(
+    () => n(t) || `${o.value}-id-${e.prefix}-${e.current++}`
   );
 };
 export {
   m as ID_INJECTION_KEY,
-  h as useId,
-  I as useIdInjection
+  N as useId,
+  a as useIdInjection
 };

package/es/hooks/use-namespace/index.d.ts

@@ -1,10 +1,9 @@
 import type { InjectionKey, Ref } from 'vue';
 export declare const defaultNamespace = "vft";
-export declare const _bem: (namespace: string, block: string, blockSuffix: string, element: string, modifier: string) => string;
 export declare const namespaceContextKey: InjectionKey<Ref<string | undefined>>;
-export declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string>) => import("vue").ComputedRef<string>;
-export declare const useNamespace: (block: string) => {
-    namespace: Ref<string, string>;
+export declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string | undefined>) => import("vue").ComputedRef<string>;
+export declare const useNamespace: (block: string, namespaceOverrides?: Ref<string | undefined>) => {
+    namespace: import("vue").ComputedRef<string>;
     b: (blockSuffix?: string) => string;
     e: (element?: string) => string;
     m: (modifier?: string) => string;
@@ -16,9 +15,9 @@ export declare const useNamespace: (block: string) => {
         (name: string, state: boolean | undefined): string;
         (name: string): string;
     };
-    cssVar: (object: Record<string, string | undefined>) => Record<string, string>;
+    cssVar: (object: Record<string, string>) => Record<string, string>;
     cssVarName: (name: string) => string;
-    cssVarBlock: (object: Record<string, string | undefined>) => Record<string, string>;
+    cssVarBlock: (object: Record<string, string>) => Record<string, string>;
     cssVarBlockName: (name: string) => string;
 };
 export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

package/es/hooks/use-namespace/index.js

@@ -1,13 +1,12 @@
-import { useGlobalConfig as v } from "../../components/config-provider/hooks/use-global-config.js";
-import { inject as p, ref as l, computed as N, unref as V } from "vue";
-const $ = "vft", y = "is-", c = (a, t, o, u, m) => {
-  let r = `${a}-${t}`;
-  return o && (r += `-${o}`), u && (r += `__${u}`), m && (r += `--${m}`), r;
-}, B = Symbol("localeContextKey"), d = (a) => {
-  const t = a || p(B, l($));
-  return N(() => V(t) || $);
-}, q = (a) => {
-  const t = v("namespace", $);
+import { getCurrentInstance as p, inject as N, ref as v, computed as V, unref as y } from "vue";
+const m = "vft", l = "is-", c = (a, r, t, o, $) => {
+  let u = `${a}-${r}`;
+  return t && (u += `-${t}`), o && (u += `__${o}`), $ && (u += `--${$}`), u;
+}, B = Symbol("namespaceContextKey"), C = (a) => {
+  const r = a || (p() ? N(B, v(m)) : v(m));
+  return V(() => y(r) || m);
+}, f = (a, r) => {
+  const t = C(r);
   return {
     namespace: t,
     b: (s = "") => c(t.value, a, s, "", ""),
@@ -19,7 +18,7 @@ const $ = "vft", y = "is-", c = (a, t, o, u, m) => {
     bem: (s, e, n) => s && e && n ? c(t.value, a, s, e, n) : "",
     is: (s, ...e) => {
       const n = e.length >= 1 ? e[0] : !0;
-      return s && n ? `${y}${s}` : "";
+      return s && n ? `${l}${s}` : "";
     },
     // css
     cssVar: (s) => {
@@ -39,9 +38,8 @@ const $ = "vft", y = "is-", c = (a, t, o, u, m) => {
   };
 };
 export {
-  c as _bem,
-  $ as defaultNamespace,
+  m as defaultNamespace,
   B as namespaceContextKey,
-  d as useGetDerivedNamespace,
-  q as useNamespace
+  C as useGetDerivedNamespace,
+  f as useNamespace
 };