vft 0.0.283 → 0.0.288

package/es/components/input-tag/composables/index.d.ts

@@ -0,0 +1,4 @@
+export * from './use-drag-tag';
+export * from './use-hovering';
+export * from './use-input-tag';
+export * from './use-input-tag-dom';

package/es/components/input-tag/composables/index.js

@@ -0,0 +1,10 @@
+import { useDragTag as e } from "./use-drag-tag.js";
+import { useHovering as t } from "./use-hovering.js";
+import { useInputTag as g } from "./use-input-tag.js";
+import { useInputTagDom as a } from "./use-input-tag-dom.js";
+export {
+  e as useDragTag,
+  t as useHovering,
+  g as useInputTag,
+  a as useInputTagDom
+};

package/es/components/input-tag/composables/use-drag-tag.d.ts

@@ -0,0 +1,15 @@
+import { type ShallowRef } from 'vue';
+type DropType = 'before' | 'after';
+interface UseDragTagOptions {
+    wrapperRef: ShallowRef<HTMLElement | undefined>;
+    handleDragged: (draggingIndex: number, dropIndex: number, type: DropType) => void;
+    afterDragged?: () => void;
+}
+export declare function useDragTag({ wrapperRef, handleDragged, afterDragged, }: UseDragTagOptions): {
+    dropIndicatorRef: ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    showDropIndicator: import("vue").Ref<boolean, boolean>;
+    handleDragStart: (event: DragEvent, index: number) => void;
+    handleDragOver: (event: DragEvent, index: number) => void;
+    handleDragEnd: (event: DragEvent) => void;
+};
+export {};

package/es/components/input-tag/composables/use-drag-tag.js

@@ -0,0 +1,63 @@
+import { shallowRef as x, ref as C } from "vue";
+import "@vueuse/core";
+import { isUndefined as u, getStyle as E, setStyle as M } from "@vft/utils";
+import "../../../utils/ns-cover.js";
+import "lodash-es";
+import { useNamespace as B } from "../../../hooks/use-namespace/index.js";
+import "../../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+function z({
+  wrapperRef: s,
+  handleDragged: S,
+  afterDragged: $
+}) {
+  const p = B("input-tag"), g = x(), l = C(!1);
+  let e, n, i, t;
+  function m(o) {
+    return `.${p.e("inner")} .${p.namespace.value}-tag:nth-child(${o + 1})`;
+  }
+  function P(o, r) {
+    e = r, n = s.value.querySelector(
+      m(r)
+    ), n && (n.style.opacity = "0.5"), o.dataTransfer.effectAllowed = "move";
+  }
+  function w(o, r) {
+    if (i = r, o.preventDefault(), o.dataTransfer.dropEffect = "move", u(e) || e === r) {
+      l.value = !1;
+      return;
+    }
+    const a = s.value.querySelector(m(r)).getBoundingClientRect(), v = e + 1 !== r, h = e - 1 !== r, y = o.clientX - a.left, N = v ? h ? 0.5 : 1 : -1, b = h ? v ? 0.5 : 0 : 1;
+    y <= a.width * N ? t = "before" : y > a.width * b ? t = "after" : t = void 0;
+    const D = s.value.querySelector(
+      `.${p.e("inner")}`
+    ), f = D.getBoundingClientRect(), c = Number.parseFloat(E(D, "gap")) / 2, q = a.top - f.top;
+    let d = -9999;
+    if (t === "before")
+      d = Math.max(
+        a.left - f.left - c,
+        Math.floor(-c / 2)
+      );
+    else if (t === "after") {
+      const T = a.right - f.left;
+      d = T + (f.width === T ? Math.floor(c / 2) : c);
+    }
+    M(g.value, {
+      top: `${q}px`,
+      left: `${d}px`
+    }), l.value = !!t;
+  }
+  function I(o) {
+    o.preventDefault(), n && (n.style.opacity = ""), t && !u(e) && !u(i) && e !== i && S(e, i, t), l.value = !1, e = void 0, n = null, i = void 0, t = void 0, $?.();
+  }
+  return {
+    dropIndicatorRef: g,
+    showDropIndicator: l,
+    handleDragStart: P,
+    handleDragOver: w,
+    handleDragEnd: I
+  };
+}
+export {
+  z as useDragTag
+};

package/es/components/input-tag/composables/use-hovering.d.ts

@@ -0,0 +1,5 @@
+export declare function useHovering(): {
+    hovering: import("vue").Ref<boolean, boolean>;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};

package/es/components/input-tag/composables/use-hovering.js

@@ -0,0 +1,16 @@
+import { ref as n } from "vue";
+function s() {
+  const e = n(!1);
+  return {
+    hovering: e,
+    handleMouseEnter: () => {
+      e.value = !0;
+    },
+    handleMouseLeave: () => {
+      e.value = !1;
+    }
+  };
+}
+export {
+  s as useHovering
+};

package/es/components/input-tag/composables/use-input-tag-dom.d.ts

@@ -0,0 +1,58 @@
+import type { ComputedRef, Ref, StyleValue } from 'vue';
+import type { ComponentSize } from 'vft/es/constants';
+import type { InputTagProps } from '../input-tag';
+interface UseInputTagDomOptions {
+    props: InputTagProps;
+    isFocused: Ref<boolean>;
+    hovering: Ref<boolean>;
+    disabled: ComputedRef<boolean>;
+    inputValue: Ref<string | undefined>;
+    size: ComputedRef<ComponentSize>;
+    validateState: ComputedRef<string>;
+    validateIcon: ComputedRef<boolean>;
+    needStatusIcon: ComputedRef<boolean>;
+}
+export declare function useInputTagDom({ props, isFocused, hovering, disabled, inputValue, size, validateState, validateIcon, needStatusIcon, }: UseInputTagDomOptions): {
+    ns: {
+        namespace: ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    nsInput: {
+        namespace: ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    containerKls: ComputedRef<unknown[]>;
+    containerStyle: ComputedRef<StyleValue>;
+    innerKls: ComputedRef<string[]>;
+    showClear: ComputedRef<boolean | "" | 0 | undefined>;
+    showSuffix: ComputedRef<boolean | "" | import("vue").Slot<any>>;
+};
+export {};

package/es/components/input-tag/composables/use-input-tag-dom.js

@@ -0,0 +1,49 @@
+import { useAttrs as w, useSlots as y, computed as l } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import "../../../utils/ns-cover.js";
+import "lodash-es";
+import { useNamespace as c } from "../../../hooks/use-namespace/index.js";
+import "../../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+function j({
+  props: t,
+  isFocused: a,
+  hovering: n,
+  disabled: s,
+  inputValue: m,
+  size: v,
+  validateState: p,
+  validateIcon: f,
+  needStatusIcon: g
+}) {
+  const u = w(), o = y(), e = c("input-tag"), d = c("input"), h = l(() => [
+    e.b(),
+    e.is("focused", a.value),
+    e.is("hovering", n.value),
+    e.is("disabled", s.value),
+    e.m(v.value),
+    e.e("wrapper"),
+    u.class
+  ]), b = l(() => [
+    u.style
+  ]), x = l(() => [
+    e.e("inner"),
+    e.is("draggable", t.draggable),
+    e.is("left-space", !t.modelValue?.length && !o.prefix),
+    e.is("right-space", !t.modelValue?.length && !i.value)
+  ]), r = l(() => t.clearable && !s.value && !t.readonly && (t.modelValue?.length || m.value) && (a.value || n.value)), i = l(() => o.suffix || r.value || p.value && f.value && g.value);
+  return {
+    ns: e,
+    nsInput: d,
+    containerKls: h,
+    containerStyle: b,
+    innerKls: x,
+    showClear: r,
+    showSuffix: i
+  };
+}
+export {
+  j as useInputTagDom
+};

package/es/components/input-tag/composables/use-input-tag.d.ts

@@ -0,0 +1,32 @@
+import type { FormItemContext } from 'vft/es/components/form';
+import type { InputTagProps } from '../input-tag';
+interface UseInputTagOptions {
+    props: InputTagProps;
+    emit: any;
+    formItem?: FormItemContext;
+}
+export declare function useInputTag({ props, emit, formItem }: UseInputTagOptions): {
+    inputRef: import("vue").ShallowRef<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+    wrapperRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    isFocused: import("vue").Ref<boolean, boolean>;
+    isComposing: import("vue").Ref<boolean, boolean>;
+    inputValue: import("vue").Ref<string | undefined, string | undefined>;
+    size: import("vue").ComputedRef<import("vft/es/constants").ComponentSize>;
+    tagSize: import("vue").ComputedRef<"default" | "small">;
+    placeholder: import("vue").ComputedRef<string | undefined>;
+    closable: import("vue").ComputedRef<boolean>;
+    disabled: import("vue").ComputedRef<boolean>;
+    inputLimit: import("vue").ComputedRef<boolean>;
+    handleDragged: (draggingIndex: number, dropIndex: number, type: "before" | "after") => void;
+    handleInput: (event: Event) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
+    handleAddTag: () => void;
+    handleRemoveTag: (index: number) => void;
+    handleClear: () => void;
+    handleCompositionStart: (event: CompositionEvent) => void;
+    handleCompositionUpdate: (event: CompositionEvent) => void;
+    handleCompositionEnd: (event: CompositionEvent) => void;
+    focus: () => void;
+    blur: () => void;
+};
+export {};

package/es/components/input-tag/composables/use-input-tag.js

@@ -0,0 +1,110 @@
+import { shallowRef as B, ref as L, computed as c, watch as G } from "vue";
+import { EVENT_CODE as g } from "../../../constants/aria.js";
+import { CHANGE_EVENT as i, INPUT_EVENT as H, UPDATE_MODEL_EVENT as d } from "../../../constants/event.js";
+import "@vueuse/core";
+import { isUndefined as K } from "@vft/utils";
+import { debugWarn as C } from "../../../utils/error.js";
+import "../../../utils/ns-cover.js";
+import { castArray as M } from "lodash-es";
+import "../../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../../hooks/use-z-index/index.js";
+import { useComposition as W } from "../../../hooks/use-composition/index.js";
+import { useFocusController as j } from "../../../hooks/use-focus-controller/index.js";
+import "../../form/index.js";
+import { useFormDisabled as q, useFormSize as I } from "../../form/hooks/use-form-common-props.js";
+function se({ props: t, emit: l, formItem: h }) {
+  const m = q(), E = I(), r = B(), o = L(), D = c(() => ["small"].includes(E.value) ? "small" : "default"), N = c(() => t.modelValue?.length ? void 0 : t.placeholder), w = c(() => !(t.readonly || m.value)), f = c(() => K(t.max) ? !1 : (t.modelValue?.length ?? 0) >= t.max), V = (e) => {
+    const a = [...t.modelValue ?? [], ...M(e)];
+    l(d, a), l(i, a), l("add-tag", e), o.value = void 0;
+  }, P = (e) => {
+    const a = e.split(t.delimiter).filter((n) => n && n !== e);
+    if (t.max) {
+      const n = t.max - (t.modelValue?.length ?? 0);
+      a.splice(n);
+    }
+    return a.length === 1 ? a[0] : a;
+  }, b = (e) => {
+    if (f.value) {
+      o.value = void 0;
+      return;
+    }
+    if (!v.value) {
+      if (t.delimiter && o.value) {
+        const a = P(o.value);
+        a.length && V(a);
+      }
+      l(H, e.target.value);
+    }
+  }, _ = (e) => {
+    if (!v.value)
+      switch (e.code) {
+        case t.trigger:
+          e.preventDefault(), e.stopPropagation(), u();
+          break;
+        case g.numpadEnter:
+          t.trigger === g.enter && (e.preventDefault(), e.stopPropagation(), u());
+          break;
+        case g.backspace:
+          !o.value && t.modelValue?.length && (e.preventDefault(), e.stopPropagation(), T(t.modelValue.length - 1));
+          break;
+      }
+  }, u = () => {
+    const e = o.value?.trim();
+    !e || f.value || V(e);
+  }, T = (e) => {
+    const a = (t.modelValue ?? []).slice(), [n] = a.splice(e, 1);
+    l(d, a), l(i, a), l("remove-tag", n);
+  }, k = () => {
+    o.value = void 0, l(d, void 0), l(i, void 0), l("clear");
+  }, p = (e, a, n) => {
+    const s = (t.modelValue ?? []).slice(), [x] = s.splice(e, 1), y = a > e && n === "before" ? -1 : a < e && n === "after" ? 1 : 0;
+    s.splice(a + y, 0, x), l(d, s), l(i, s);
+  }, A = () => {
+    r.value?.focus();
+  }, F = () => {
+    r.value?.blur();
+  }, { wrapperRef: R, isFocused: U } = j(r, {
+    disabled: m,
+    afterBlur() {
+      t.saveOnBlur ? u() : o.value = void 0, t.validateEvent && h?.validate?.("blur").catch((e) => C(e));
+    }
+  }), {
+    isComposing: v,
+    handleCompositionStart: z,
+    handleCompositionUpdate: O,
+    handleCompositionEnd: S
+  } = W({ afterComposition: b });
+  return G(
+    () => t.modelValue,
+    () => {
+      t.validateEvent && h?.validate?.(i).catch((e) => C(e));
+    }
+  ), {
+    inputRef: r,
+    wrapperRef: R,
+    isFocused: U,
+    isComposing: v,
+    inputValue: o,
+    size: E,
+    tagSize: D,
+    placeholder: N,
+    closable: w,
+    disabled: m,
+    inputLimit: f,
+    handleDragged: p,
+    handleInput: b,
+    handleKeydown: _,
+    handleAddTag: u,
+    handleRemoveTag: T,
+    handleClear: k,
+    handleCompositionStart: z,
+    handleCompositionUpdate: O,
+    handleCompositionEnd: S,
+    focus: A,
+    blur: F
+  };
+}
+export {
+  se as useInputTag
+};

package/es/components/input-tag/index.d.ts

@@ -0,0 +1,6 @@
+import InputTag from './input-tag.vue';
+import type { SFCWithInstall } from 'vft/es/utils';
+export declare const VftInputTag: SFCWithInstall<typeof InputTag>;
+export default VftInputTag;
+export * from './input-tag';
+export type { InputTagInstance } from './instance';

package/es/components/input-tag/index.js

@@ -0,0 +1,15 @@
+import "@vueuse/core";
+import "@vft/utils";
+import "../../utils/ns-cover.js";
+import { withInstall as t } from "../../utils/vue/install.js";
+import "lodash-es";
+import "vue";
+import o from "./input-tag.vue2.js";
+import { inputTagEmits as g, inputTagProps as l } from "./input-tag.js";
+const s = t(o);
+export {
+  s as VftInputTag,
+  s as default,
+  g as inputTagEmits,
+  l as inputTagProps
+};

package/es/components/input-tag/input-tag.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentSize } from 'vft/es/constants';
+import type { ExtractPropTypes, __ExtractPublicPropTypes, PropType } from 'vue';
+export declare const inputTagProps: {
+    readonly modelValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly max: NumberConstructor;
+    readonly tagType: import("vft/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "info", boolean>;
+    readonly tagEffect: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly trigger: import("vft/es/utils").EpPropFinalized<(new (...args: any[]) => "Enter" | "Space") | (() => "Enter" | "Space") | (((new (...args: any[]) => "Enter" | "Space") | (() => "Enter" | "Space")) | null)[], unknown, unknown, string, boolean>;
+    readonly draggable: BooleanConstructor;
+    readonly delimiter: import("vft/es/utils").EpPropFinalized<readonly [StringConstructor, RegExpConstructor], unknown, unknown, "", boolean>;
+    readonly size: {
+        readonly type: PropType<import("vft/es/utils").EpPropMergeType<(new (...args: any[]) => "" | "default" | "small" | "large") | (() => ComponentSize) | (((new (...args: any[]) => "" | "default" | "small" | "large") | (() => ComponentSize)) | null)[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly clearable: BooleanConstructor;
+    readonly disabled: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    readonly validateEvent: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly readonly: BooleanConstructor;
+    readonly autofocus: BooleanConstructor;
+    readonly id: import("vft/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
+    readonly tabindex: import("vft/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
+    readonly maxlength: {
+        readonly type: PropType<import("vft/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly minlength: {
+        readonly type: PropType<import("vft/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly placeholder: StringConstructor;
+    readonly autocomplete: import("vft/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "off", boolean>;
+    readonly saveOnBlur: import("vft/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly ariaLabel: StringConstructor;
+};
+export type InputTagProps = ExtractPropTypes<typeof inputTagProps>;
+export type InputTagPropsPublic = __ExtractPublicPropTypes<typeof inputTagProps>;
+export declare const inputTagEmits: {
+    "update:modelValue": (value?: string[]) => boolean;
+    change: (value?: string[]) => boolean;
+    input: (value: string) => boolean;
+    'add-tag': (value: string | string[]) => boolean;
+    'remove-tag': (value: string) => boolean;
+    focus: (evt: FocusEvent) => boolean;
+    blur: (evt: FocusEvent) => boolean;
+    clear: () => boolean;
+};
+export type InputTagEmits = typeof inputTagEmits;

package/es/components/input-tag/input-tag.js

@@ -0,0 +1,138 @@
+import "@vueuse/core";
+import { isString as t, isArray as r, isUndefined as o } from "@vft/utils";
+import { EVENT_CODE as i } from "../../constants/aria.js";
+import { INPUT_EVENT as n, CHANGE_EVENT as l, UPDATE_MODEL_EVENT as p } from "../../constants/event.js";
+import "../../utils/ns-cover.js";
+import { buildProps as d, definePropType as a } from "../../utils/vue/props/runtime.js";
+import "vue";
+const c = d({
+  /**
+   * @description binding value
+   */
+  modelValue: {
+    type: a(Array)
+  },
+  /**
+   * @description max number tags that can be enter
+   */
+  max: Number,
+  /**
+   * @description tag type
+   */
+  tagType: { type: String, default: "info" },
+  /**
+   * @description tag effect
+   */
+  tagEffect: { type: String },
+  /**
+   * @description the key to trigger input tag
+   */
+  trigger: {
+    type: a(String),
+    default: i.enter
+  },
+  /**
+   * @description whether tags can be dragged
+   */
+  draggable: Boolean,
+  /**
+   * @description add a tag when a delimiter is matched
+   */
+  delimiter: {
+    type: [String, RegExp],
+    default: ""
+  },
+  /**
+   * @description input box size
+   */
+  size: {
+    type: String
+  },
+  /**
+   * @description whether to show clear button
+   */
+  clearable: Boolean,
+  /**
+   * @description whether to disable input-tag
+   */
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @description whether to trigger form validation
+   */
+  validateEvent: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description native input readonly
+   */
+  readonly: Boolean,
+  /**
+   * @description native input autofocus
+   */
+  autofocus: Boolean,
+  /**
+   * @description same as `id` in native input
+   */
+  id: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * @description same as `tabindex` in native input
+   */
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  /**
+   * @description same as `maxlength` in native input
+   */
+  maxlength: {
+    type: [String, Number]
+  },
+  /**
+   * @description same as `minlength` in native input
+   */
+  minlength: {
+    type: [String, Number]
+  },
+  /**
+   * @description placeholder of input
+   */
+  placeholder: String,
+  /**
+   * @description native input autocomplete
+   */
+  autocomplete: {
+    type: String,
+    default: "off"
+  },
+  /**
+   * @description whether to save the input value when the input loses focus
+   */
+  saveOnBlur: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description native `aria-label` attribute
+   */
+  ariaLabel: String
+}), S = {
+  [p]: (e) => r(e) || o(e),
+  [l]: (e) => r(e) || o(e),
+  [n]: (e) => t(e),
+  "add-tag": (e) => t(e) || r(e),
+  "remove-tag": (e) => t(e),
+  focus: (e) => e instanceof FocusEvent,
+  blur: (e) => e instanceof FocusEvent,
+  clear: () => !0
+};
+export {
+  S as inputTagEmits,
+  c as inputTagProps
+};