vft 0.0.345 → 0.0.346

package/es/components/dropdown/dropdown.vue2.js

@@ -1,269 +1,150 @@
-import { defineComponent as S, getCurrentInstance as Z, ref as i, computed as g, watch as _, toRef as b, onBeforeUnmount as x, provide as B, createElementBlock as ee, openBlock as T, normalizeClass as $, unref as t, createVNode as r, createBlock as te, createCommentVNode as oe, createSlots as re, withCtx as o, renderSlot as h, mergeProps as I } from "vue";
-import { VftButtonGroup as ne, VftButton as O } from "../button/index.js";
-import "../form/index.js";
-import { VftIcon as le } from "../icon/index.js";
-import ie from "../roving-focus-group/roving-focus-group.vue2.js";
+import { defineComponent as A, getCurrentInstance as G, ref as o, computed as i, watch as H, onBeforeUnmount as K, provide as g, toRef as C, unref as P } from "vue";
+import { VftButton as E } from "../button/index.js";
+import { VftTooltip as x } from "../tooltip/index.js";
+import { VftScrollbar as U } from "../scrollbar/index.js";
+import { VftIcon as z } from "../icon/index.js";
+import J from "../roving-focus-group/roving-focus-group.vue.js";
 import "../roving-focus-group/roving-focus-group-impl.vue2.js";
 import "../roving-focus-group/roving-focus-item.vue2.js";
 import "../roving-focus-group/types.js";
-import { EVENT_CODE as y } from "../../constants/aria.js";
-import { VftScrollbar as ae } from "../scrollbar/index.js";
-import { OnlyChild as se } from "../slot/only-child.js";
-import { VftTooltip as pe } from "../tooltip/index.js";
+import { OnlyChild as M } from "../slot/only-child.js";
+import "../form/index.js";
 import "@vueuse/core";
-import { isArray as de } from "@vft/utils";
-import { addUnit as fe } from "../../utils/helper.js";
+import "@vft/utils";
+import { addUnit as W, castArray as Y } from "../../utils/helper.js";
 import "lodash-es";
-import { useId as ue } from "../../hooks/use-id/index.js";
-import { useNamespace as me } from "../../hooks/use-namespace/index.js";
+import { useId as j } from "../../hooks/use-id/index.js";
+import { useNamespace as q } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { DROPDOWN_INJECTION_KEY as ce } from "./tokens.js";
-import { VftCollection as ve } from "./types.js";
-import { useFormSize as ge } from "../form/hooks/use-form-common-props.js";
-const be = S({
-  name: "vft-dropdown"
-}), Ge = /* @__PURE__ */ S({
-  ...be,
-  props: {
-    trigger: { default: "hover" },
-    effect: { default: "light" },
-    type: {},
-    placement: { default: "bottom" },
-    popperOptions: {},
-    id: {},
-    size: {},
-    splitButton: { type: Boolean },
-    hideOnClick: { type: Boolean, default: !0 },
-    loop: { type: Boolean, default: !0 },
-    showTimeout: { default: 150 },
-    hideTimeout: { default: 150 },
-    tabindex: { default: 0 },
-    maxHeight: { default: "" },
-    popperClass: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    role: { default: "menu" },
-    buttonProps: {},
-    teleported: { type: Boolean, default: !0 }
+import { dropdownProps as Q, VftCollection as X } from "./dropdown.js";
+import { DROPDOWN_INJECTION_KEY as Z, DROPDOWN_INSTANCE_INJECTION_KEY as ee } from "./tokens.js";
+import { useFormSize as oe } from "../form/hooks/use-form-common-props.js";
+const { ButtonGroup: ne } = E, $e = A({
+  name: "VftDropdown",
+  components: {
+    VftButton: E,
+    VftButtonGroup: ne,
+    VftScrollbar: U,
+    DropdownCollection: X,
+    VftTooltip: x,
+    RovingFocusGroup: J,
+    OnlyChild: M,
+    VftIcon: z
   },
-  emits: ["visible-change", "command", "click"],
-  setup(z, { expose: R, emit: L }) {
-    const n = me("dropdown"), a = z, p = L, V = Z(), l = i(), w = i(), u = i(null), s = i(null), N = i(null), m = i(null), C = i(!1), D = [y.enter, y.space, y.down], H = g(() => ({
-      maxHeight: fe(a.maxHeight)
-    })), P = ue().value, c = g(() => a.id || P);
-    _(
-      [l, b(a, "trigger")],
-      ([e, f], [E]) => {
-        const X = de(f) ? f : [f];
-        E?.$el?.removeEventListener && E.$el.removeEventListener(
+  props: Q,
+  emits: ["visible-change", "click", "command"],
+  setup(n, { emit: l }) {
+    const I = G(), s = q("dropdown"), t = o(), T = o(), u = o(), r = o(), w = o(null), a = o(null), m = o(!1), O = i(() => ({
+      maxHeight: W(n.maxHeight)
+    })), S = i(() => [s.m(f.value)]), p = i(() => Y(n.trigger)), L = j().value, d = i(() => n.id || L);
+    H(
+      [t, p],
+      ([e, F], [h]) => {
+        h?.$el?.removeEventListener && h.$el.removeEventListener(
           "pointerenter",
-          d
+          c
         ), e?.$el?.removeEventListener && e.$el.removeEventListener(
           "pointerenter",
-          d
-        ), e?.$el?.addEventListener && X.includes("hover") && e.$el.addEventListener(
+          c
+        ), e?.$el?.addEventListener && F.includes("hover") && e.$el.addEventListener(
           "pointerenter",
-          d
+          c
         );
       },
       { immediate: !0 }
-    ), x(() => {
-      l.value?.$el?.removeEventListener && l.value.$el.removeEventListener(
+    ), K(() => {
+      t.value?.$el?.removeEventListener && t.value.$el.removeEventListener(
         "pointerenter",
-        d
+        c
       );
     });
-    function A() {
-      k();
+    function N() {
+      v();
     }
-    function k() {
+    function v() {
       u.value?.onClose();
     }
-    function F() {
+    function R() {
       u.value?.onOpen();
     }
-    const v = ge();
-    function K(...e) {
-      p("command", ...e);
+    const f = oe();
+    function $(...e) {
+      l("command", ...e);
     }
-    function d() {
-      l.value?.$el?.focus();
+    function c() {
+      t.value?.$el?.focus({
+        preventScroll: !0
+      });
     }
-    function U() {
+    function b() {
     }
-    function G() {
-      t(s)?.focus(), m.value = null;
+    function k() {
+      const e = P(r);
+      p.value.includes("hover") && e?.focus({
+        preventScroll: !0
+      }), a.value = null;
     }
-    function J(e) {
-      m.value = e;
+    function B(e) {
+      a.value = e;
     }
-    function M(e) {
-      C.value || (e.preventDefault(), e.stopImmediatePropagation());
+    function D(e) {
+      m.value || (e.preventDefault(), e.stopImmediatePropagation());
     }
-    function W() {
-      p("visible-change", !0);
+    function V() {
+      l("visible-change", !0);
     }
-    function Y(e) {
-      e?.type === "keydown" && s.value?.focus();
+    function _(e) {
+      e?.type === "keydown" && r.value?.focus();
     }
-    function j() {
-      p("visible-change", !1);
+    function y() {
+      l("visible-change", !1);
     }
-    B(ce, {
-      contentRef: s,
-      role: g(() => a.role),
-      triggerId: c,
-      isUsingKeyboard: C,
-      onItemEnter: U,
-      onItemLeave: G
-    }), B("elDropdown", {
-      instance: V,
-      dropdownSize: v,
-      handleClick: A,
-      commandHandler: K,
-      trigger: b(a, "trigger"),
-      hideOnClick: b(a, "hideOnClick")
-    });
-    const q = (e) => {
-      e.preventDefault(), s.value?.focus?.({
-        preventScroll: !0
-      });
-    }, Q = (e) => {
-      p("click", e);
+    return g(Z, {
+      contentRef: r,
+      role: i(() => n.role),
+      triggerId: d,
+      isUsingKeyboard: m,
+      onItemEnter: b,
+      onItemLeave: k
+    }), g(ee, {
+      instance: I,
+      dropdownSize: f,
+      handleClick: N,
+      commandHandler: $,
+      trigger: C(n, "trigger"),
+      hideOnClick: C(n, "hideOnClick")
+    }), {
+      ns: s,
+      scrollbar: w,
+      wrapStyle: O,
+      dropdownTriggerKls: S,
+      dropdownSize: f,
+      triggerId: d,
+      currentTabId: a,
+      handleCurrentTabIdChange: B,
+      handlerMainButtonClick: (e) => {
+        l("click", e);
+      },
+      handleEntryFocus: D,
+      handleClose: v,
+      handleOpen: R,
+      handleBeforeShowTooltip: V,
+      handleShowTooltip: _,
+      handleBeforeHideTooltip: y,
+      onFocusAfterTrapped: (e) => {
+        e.preventDefault(), r.value?.focus?.({
+          preventScroll: !0
+        });
+      },
+      popperRef: u,
+      contentRef: r,
+      triggeringElementRef: t,
+      referenceElementRef: T
     };
-    return R({
-      handleClose: k,
-      handleOpen: F,
-      // Todo
-      onFocusAfterTrapped: q
-    }), (e, f) => (T(), ee("div", {
-      class: $([t(n).b(), t(n).is("disabled", e.disabled)])
-    }, [
-      r(t(pe), {
-        ref_key: "popperRef",
-        ref: u,
-        role: e.role,
-        effect: e.effect,
-        "fallback-placements": ["bottom", "top"],
-        "popper-options": e.popperOptions,
-        "gpu-acceleration": !1,
-        "hide-after": e.trigger === "hover" ? e.hideTimeout : 0,
-        "manual-mode": !0,
-        placement: e.placement,
-        "popper-class": [t(n).e("popper"), e.popperClass],
-        "reference-element": w.value?.$el,
-        trigger: e.trigger,
-        "trigger-keys": D,
-        "trigger-target-el": s.value,
-        "show-after": e.trigger === "hover" ? e.showTimeout : 0,
-        "stop-popper-mouse-event": !1,
-        "virtual-ref": l.value,
-        "virtual-triggering": e.splitButton,
-        disabled: e.disabled,
-        transition: `${t(n).namespace.value}-zoom-in-top`,
-        teleported: e.teleported,
-        pure: "",
-        persistent: "",
-        onBeforeShow: W,
-        onShow: Y,
-        onBeforeHide: j
-      }, re({
-        content: o(() => [
-          r(t(ae), {
-            ref_key: "scrollbar",
-            ref: N,
-            "wrap-style": H.value,
-            tag: "div",
-            "view-class": [t(n).e("list"), "test"]
-          }, {
-            default: o(() => [
-              r(t(ie), {
-                loop: e.loop,
-                "current-tab-id": m.value,
-                orientation: "horizontal",
-                onCurrentTabIdChange: J,
-                onEntryFocus: M
-              }, {
-                default: o(() => [
-                  r(t(ve), null, {
-                    default: o(() => [
-                      h(e.$slots, "dropdown")
-                    ]),
-                    _: 3
-                  })
-                ]),
-                _: 3
-              }, 8, ["loop", "current-tab-id"])
-            ]),
-            _: 3
-          }, 8, ["wrap-style", "view-class"])
-        ]),
-        _: 2
-      }, [
-        e.splitButton ? void 0 : {
-          name: "default",
-          fn: o(() => [
-            r(t(se), {
-              id: c.value,
-              ref_key: "triggeringElementRef",
-              ref: l,
-              role: "button",
-              tabindex: e.tabindex
-            }, {
-              default: o(() => [
-                h(e.$slots, "default")
-              ]),
-              _: 3
-            }, 8, ["id", "tabindex"])
-          ]),
-          key: "0"
-        }
-      ]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported"]),
-      e.splitButton ? (T(), te(t(ne), { key: 0 }, {
-        default: o(() => [
-          r(t(O), I({
-            ref_key: "referenceElementRef",
-            ref: w
-          }, e.buttonProps, {
-            size: t(v),
-            type: e.type,
-            disabled: e.disabled,
-            tabindex: e.tabindex,
-            onClick: Q
-          }), {
-            default: o(() => [
-              h(e.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["size", "type", "disabled", "tabindex"]),
-          r(t(O), I({
-            id: c.value,
-            ref_key: "triggeringElementRef",
-            ref: l
-          }, e.buttonProps, {
-            role: "button",
-            size: t(v),
-            type: e.type,
-            class: t(n).e("caret-button"),
-            disabled: e.disabled,
-            tabindex: e.tabindex,
-            "aria-label": "切换下拉菜单"
-          }), {
-            default: o(() => [
-              r(t(le), {
-                class: $(t(n).e("icon")),
-                icon: "icon-arrow-down"
-              }, null, 8, ["class"])
-            ]),
-            _: 1
-          }, 16, ["id", "size", "type", "class", "disabled", "tabindex"])
-        ]),
-        _: 3
-      })) : oe("", !0)
-    ], 2));
   }
 });
 export {
-  Ge as default
+  $e as default
 };

package/es/components/dropdown/index.js

@@ -2,20 +2,21 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as m, withNoopInstall as o } from "../../utils/vue/install.js";
+import { withInstall as p, withNoopInstall as o } from "../../utils/vue/install.js";
 import "lodash-es";
-import p from "./dropdown.vue2.js";
-import t from "./dropdown-item.vue2.js";
-import r from "./dropdown-menu.vue2.js";
-import { DROPDOWN_INJECTION_KEY as u } from "./tokens.js";
-const c = m(p, {
+import m from "./dropdown.vue.js";
+import t from "./dropdown-item.vue.js";
+import r from "./dropdown-menu.vue.js";
+import { DROPDOWN_INJECTION_KEY as a, DROPDOWN_INSTANCE_INJECTION_KEY as c } from "./tokens.js";
+const s = p(m, {
   DropdownItem: t,
   DropdownMenu: r
-}), d = o(t), I = o(r);
+}), O = o(t), l = o(r);
 export {
-  u as DROPDOWN_INJECTION_KEY,
-  c as VftDropdown,
-  d as VftDropdownItem,
-  I as VftDropdownMenu,
-  c as default
+  a as DROPDOWN_INJECTION_KEY,
+  c as DROPDOWN_INSTANCE_INJECTION_KEY,
+  s as VftDropdown,
+  O as VftDropdownItem,
+  l as VftDropdownMenu,
+  s as default
 };

package/es/components/dropdown/instance.d.ts

@@ -0,0 +1,2 @@
+import type Dropdown from './dropdown.vue';
+export type DropdownInstance = InstanceType<typeof Dropdown> & unknown;

package/es/components/dropdown/instance.js

@@ -0,0 +1 @@
+

package/es/components/dropdown/tokens.d.ts

@@ -1,10 +1,11 @@
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
-export type VftDropdownInjectionContext = {
-    contentRef: Ref<HTMLElement | null>;
-    role: ComputedRef<string>;
+export type ElDropdownInjectionContext = {
+    contentRef: Ref<HTMLElement | undefined>;
+    role: any;
     triggerId: ComputedRef<string>;
     isUsingKeyboard: Ref<boolean>;
     onItemLeave: (e: PointerEvent) => void;
     onItemEnter: (e: PointerEvent) => void;
 };
-export declare const DROPDOWN_INJECTION_KEY: InjectionKey<VftDropdownInjectionContext>;
+export declare const DROPDOWN_INJECTION_KEY: InjectionKey<ElDropdownInjectionContext>;
+export declare const DROPDOWN_INSTANCE_INJECTION_KEY = "vftDropdown";

package/es/components/dropdown/tokens.js

@@ -1,4 +1,5 @@
-const o = Symbol("VftDropdown");
+const o = Symbol("vftDropdown"), N = "vftDropdown";
 export {
-  o as DROPDOWN_INJECTION_KEY
+  o as DROPDOWN_INJECTION_KEY,
+  N as DROPDOWN_INSTANCE_INJECTION_KEY
 };

package/es/components/dropdown/useDropdown.d.ts

@@ -1,6 +1,5 @@
-import type { IElDropdownInstance } from './types';
+import type { IElDropdownInstance } from './dropdown';
 export declare const useDropdown: () => {
     elDropdown: IElDropdownInstance;
     _elDropdownSize: import("vue").ComputedRef<import("vue").ComputedRef<string> | undefined>;
 };
-export declare const initDropdownDomEvent: (dropdownChildren: any, triggerElm: any, _instance: any) => void;

package/es/components/dropdown/useDropdown.js

@@ -1,56 +1,15 @@
-import { buildShortUUID as k, addClass as T } from "@vft/utils";
-import { EVENT_CODE as t } from "../../constants/aria.js";
-import "@vueuse/core";
-import "../config-provider/hooks/use-global-config.js";
-import { inject as C, computed as O, ref as p } from "vue";
-import "lodash-es";
-import { useNamespace as S } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-const F = () => {
-  const r = C("elDropdown", {}), o = O(() => r?.dropdownSize);
+import { inject as e, computed as n } from "vue";
+import { DROPDOWN_INSTANCE_INJECTION_KEY as t } from "./tokens.js";
+const c = () => {
+  const o = e(
+    t,
+    {}
+  ), r = n(() => o?.dropdownSize);
   return {
-    elDropdown: r,
-    _elDropdownSize: o
+    elDropdown: o,
+    _elDropdownSize: r
   };
-}, V = (r, o, i) => {
-  const x = S("dropdown"), u = p(null), d = p(null), s = p(null), f = p(`dropdown-menu-${k()}`);
-  s.value = r?.subTree.el;
-  function c() {
-    o.setAttribute("tabindex", "-1"), d.value?.forEach((e) => {
-      e.setAttribute("tabindex", "-1");
-    });
-  }
-  function b(e) {
-    c(), e?.setAttribute("tabindex", "0");
-  }
-  function D(e) {
-    const n = e.code;
-    [t.up, t.down].includes(n) ? (c(), b(u.value[0]), u.value[0].focus(), e.preventDefault(), e.stopPropagation()) : n === t.enter ? i.handleClick() : [t.tab, t.esc].includes(n) && i.hide();
-  }
-  function A(e) {
-    const n = e.code, v = e.target, l = d.value.indexOf(v), w = d.value.length - 1;
-    let a;
-    [t.up, t.down].includes(n) ? (n === t.up ? a = l !== 0 ? l - 1 : 0 : a = l < w ? l + 1 : w, c(), b(u.value[a]), u.value[a].focus(), e.preventDefault(), e.stopPropagation()) : n === t.enter ? (m(), v.click(), i.props.hideOnClick && i.hide()) : [t.tab, t.esc].includes(n) && (i.hide(), m());
-  }
-  function h() {
-    s.value.setAttribute("id", f.value), o.setAttribute("aria-haspopup", "list"), o.setAttribute("aria-controls", f.value), i.props.splitButton || (o.setAttribute("role", "button"), o.setAttribute("tabindex", i.props.tabindex), T(o, x.b("selfdefine")));
-  }
-  function y() {
-    o?.addEventListener("keydown", D), s.value?.addEventListener("keydown", A, !0);
-  }
-  function I() {
-    u.value = s.value.querySelectorAll(
-      "[tabindex='-1']"
-    ), d.value = Array.from(u.value), y(), h();
-  }
-  function m() {
-    o.focus();
-  }
-  I();
 };
 export {
-  V as initDropdownDomEvent,
-  F as useDropdown
+  c as useDropdown
 };