vft 0.0.345 → 0.0.346

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

@@ -1,97 +1,89 @@
-import { defineComponent as a, inject as n, computed as D, unref as o, createElementBlock as Y, openBlock as J, withModifiers as u, normalizeStyle as G, normalizeClass as P, renderSlot as z } from "vue";
+import { defineComponent as S, inject as t, computed as D, unref as F } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import { composeEventHandlers as Y } from "../../utils/event.js";
+import "../config-provider/hooks/use-global-config.js";
+import { EVENT_CODE as J } from "../../constants/aria.js";
+import "lodash-es";
+import { composeRefs as y } from "../../utils/vue/refs.js";
 import "../focus-trap/focus-trap.vue2.js";
-import { FOCUS_TRAP_INJECTION_KEY as B } from "../focus-trap/tokens.js";
+import { FOCUS_TRAP_INJECTION_KEY as G } from "../focus-trap/tokens.js";
 import "../focus-trap/utils.js";
 import "../roving-focus-group/roving-focus-group.vue2.js";
 import "../roving-focus-group/roving-focus-group-impl.vue2.js";
 import "../roving-focus-group/roving-focus-item.vue2.js";
-import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as M } from "../roving-focus-group/types.js";
-import { ROVING_FOCUS_GROUP_INJECTION_KEY as U } from "../roving-focus-group/tokens.js";
-import { focusFirst as V } from "../roving-focus-group/utils.js";
-import { EVENT_CODE as x } from "../../constants/aria.js";
-import "@vueuse/core";
-import "@vft/utils";
-import { composeEventHandlers as A } from "../../utils/event.js";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import { composeRefs as W } from "../../utils/vue/refs.js";
-import { useNamespace as k } from "../../hooks/use-namespace/index.js";
+import { ROVING_FOCUS_COLLECTION_INJECTION_KEY as P } from "../roving-focus-group/types.js";
+import { ROVING_FOCUS_GROUP_INJECTION_KEY as b } from "../roving-focus-group/tokens.js";
+import { focusFirst as U } from "../roving-focus-group/utils.js";
+import { useNamespace as V } 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 $ } from "./tokens.js";
-import { DROPDOWN_COLLECTION_INJECTION_KEY as j, FIRST_LAST_KEYS as H, LAST_KEYS as q } from "./types.js";
-import { useDropdown as Q } from "./useDropdown.js";
-const X = ["role", "aria-labelledby"], Z = a({
-  name: "VftDropdownMenu"
-}), yo = /* @__PURE__ */ a({
-  ...Z,
-  props: {
-    onKeydown: { type: Function }
-  },
-  setup(_) {
-    const O = _, i = k("dropdown"), { _elDropdownSize: E } = Q(), I = E.value, { focusTrapRef: N, onKeydown: C } = n(
-      B,
+import { DROPDOWN_INJECTION_KEY as A } from "./tokens.js";
+import { dropdownMenuProps as M, DROPDOWN_COLLECTION_INJECTION_KEY as W, FIRST_LAST_KEYS as h, LAST_KEYS as x } from "./dropdown.js";
+import { useDropdown as z } from "./useDropdown.js";
+const Eo = S({
+  name: "VftDropdownMenu",
+  props: M,
+  setup(c) {
+    const n = V("dropdown"), { _elDropdownSize: d } = z(), i = d.value, { focusTrapRef: f, onKeydown: u } = t(
+      G,
       void 0
-    ), { contentRef: m, role: T, triggerId: R } = n(
-      $,
+    ), { contentRef: m, role: a, triggerId: _ } = t(
+      A,
       void 0
-    ), { collectionRef: w, getItems: K } = n(
-      j,
+    ), { collectionRef: O, getItems: I } = t(
+      W,
       void 0
     ), {
-      rovingFocusGroupRef: v,
-      rovingFocusGroupRootStyle: y,
-      tabIndex: h,
-      onBlur: p,
-      onFocus: l,
-      onMousedown: d
-    } = n(U, void 0), { collectionRef: S } = n(
-      M,
+      rovingFocusGroupRef: l,
+      rovingFocusGroupRootStyle: E,
+      tabIndex: N,
+      onBlur: C,
+      onFocus: T,
+      onMousedown: R
+    } = t(b, void 0), { collectionRef: K } = t(
+      P,
       void 0
-    ), F = D(() => [i.b("menu"), i.bm("menu", I?.value)]), L = W(
+    ), w = D(() => [n.b("menu"), n.bm("menu", i?.value)]), v = y(
       m,
-      w,
-      N,
-      v,
-      S
-    ), b = A(
-      (e) => {
-        O.onKeydown?.(e);
+      O,
+      f,
+      l,
+      K
+    ), L = Y(
+      (o) => {
+        c.onKeydown?.(o);
       },
-      (e) => {
-        const { currentTarget: r, code: t, target: f } = e;
-        if (r.contains(f), x.tab === t && e.stopImmediatePropagation(), e.preventDefault(), f !== o(m) || !H.includes(t)) return;
-        const c = K().filter(
-          (s) => !s.disabled
-        ).map((s) => s.ref);
-        q.includes(t) && c.reverse(), V(c);
+      (o) => {
+        const { currentTarget: g, code: r, target: p } = o;
+        if (g.contains(
+          p
+        ), J.tab === r && o.stopImmediatePropagation(), o.preventDefault(), p !== F(m) || !h.includes(r))
+          return;
+        const s = I().filter(
+          (e) => !e.disabled
+        ).map((e) => e.ref);
+        x.includes(r) && s.reverse(), U(s);
       }
-    ), g = (e) => {
-      b(e), C(e);
+    );
+    return {
+      size: i,
+      rovingFocusGroupRootStyle: E,
+      tabIndex: N,
+      dropdownKls: w,
+      role: a,
+      triggerId: _,
+      dropdownListWrapperRef: v,
+      handleKeydown: (o) => {
+        L(o), u(o);
+      },
+      onBlur: C,
+      onFocus: T,
+      onMousedown: R
     };
-    return (e, r) => (J(), Y("ul", {
-      ref: o(L),
-      class: P(F.value),
-      style: G(o(y)),
-      tabindex: -1,
-      role: o(T),
-      "aria-labelledby": o(R),
-      onBlur: r[0] || (r[0] = //@ts-ignore
-      (...t) => o(p) && o(p)(...t)),
-      onFocus: r[1] || (r[1] = //@ts-ignore
-      (...t) => o(l) && o(l)(...t)),
-      onKeydown: u(g, ["self"]),
-      onMousedown: r[2] || (r[2] = u(
-        //@ts-ignore
-        (...t) => o(d) && o(d)(...t),
-        ["self"]
-      ))
-    }, [
-      z(e.$slots, "default")
-    ], 46, X));
   }
 });
 export {
-  yo as default
+  Eo as default
 };

package/es/components/dropdown/dropdown.js

@@ -0,0 +1,182 @@
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import { EVENT_CODE as e } from "../../constants/aria.js";
+import "vue";
+import { buildProps as o, definePropType as t } from "../../utils/vue/props/runtime.js";
+import { createCollectionWithScope as p } from "../collection/collection.js";
+import "../popper/index.js";
+const f = o({
+  /**
+   * @description how to trigger
+   */
+  trigger: {
+    type: t([String, Array]),
+    default: "hover"
+  },
+  triggerKeys: {
+    type: t(Array),
+    default: () => [
+      e.enter,
+      e.numpadEnter,
+      e.space,
+      e.down
+    ]
+  },
+  effect: {
+    type: String,
+    default: "light"
+  },
+  /**
+   * @description menu button type, refer to `Button` Component, only works when `split-button` is true
+   */
+  type: {
+    type: t(String)
+  },
+  /**
+   * @description placement of pop menu
+   */
+  placement: {
+    type: t(String),
+    default: "bottom"
+  },
+  /**
+   * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+   */
+  popperOptions: {
+    type: t(Object),
+    default: () => ({})
+  },
+  id: String,
+  /**
+   * @description menu size, also works on the split button
+   */
+  size: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description whether a button group is displayed
+   */
+  splitButton: Boolean,
+  /**
+   * @description whether to hide menu after clicking menu-item
+   */
+  hideOnClick: {
+    type: Boolean,
+    default: !0
+  },
+  loop: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description delay time before show a dropdown (only works when trigger is `hover`)
+   */
+  showTimeout: {
+    type: Number,
+    default: 150
+  },
+  /**
+   * @description delay time before hide a dropdown (only works when trigger is `hover`)
+   */
+  hideTimeout: {
+    type: Number,
+    default: 150
+  },
+  /**
+   * @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown
+   */
+  tabindex: {
+    type: t([Number, String]),
+    default: 0
+  },
+  /**
+   * @description the max height of menu
+   */
+  maxHeight: {
+    type: t([Number, String]),
+    default: ""
+  },
+  /**
+   * @description custom class name for Dropdown's dropdown
+   */
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  /**
+   * @description whether to disable
+   */
+  disabled: Boolean,
+  /**
+   * @description the ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation'
+   */
+  role: {
+    type: String,
+    default: "menu"
+  },
+  buttonProps: {
+    type: t(Object)
+  },
+  /**
+   * @description whether the dropdown popup is teleported to the body
+   */
+  teleported: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description when dropdown inactive and `persistent` is `false` , dropdown menu will be destroyed
+   */
+  persistent: {
+    type: Boolean,
+    default: !0
+  }
+}), c = o({
+  /**
+   * @description a command to be dispatched to Dropdown's `command` callback
+   */
+  command: {
+    type: [Object, String, Number],
+    default: () => ({})
+  },
+  /**
+   * @description whether the item is disabled
+   */
+  disabled: Boolean,
+  /**
+   * @description whether a divider is displayed
+   */
+  divided: Boolean,
+  textValue: String,
+  /**
+   * @description custom icon
+   */
+  icon: {
+    type: String
+  }
+}), O = o({
+  onKeydown: { type: t(Function) }
+}), r = [
+  e.down,
+  e.pageDown,
+  e.home
+], n = [e.up, e.pageUp, e.end], g = [...r, ...n], {
+  VftCollection: E,
+  VftCollectionItem: S,
+  COLLECTION_INJECTION_KEY: N,
+  COLLECTION_ITEM_INJECTION_KEY: C
+} = p("Dropdown");
+export {
+  N as DROPDOWN_COLLECTION_INJECTION_KEY,
+  C as DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,
+  r as FIRST_KEYS,
+  g as FIRST_LAST_KEYS,
+  n as LAST_KEYS,
+  E as VftCollection,
+  S as VftCollectionItem,
+  c as dropdownItemProps,
+  O as dropdownMenuProps,
+  f as dropdownProps
+};

package/es/components/dropdown/dropdown.vue.js

@@ -1,4 +1,128 @@
-import f from "./dropdown.vue2.js";
+import c from "./dropdown.vue2.js";
+import { resolveComponent as r, createElementBlock as h, openBlock as i, normalizeClass as a, createVNode as n, createBlock as v, createCommentVNode as w, createSlots as y, withCtx as o, renderSlot as t, mergeProps as s } from "vue";
+import C from "../../_virtual/_plugin-vue_export-helper.js";
+function B(e, k, S, z, E, T) {
+  const p = r("dropdown-collection"), d = r("roving-focus-group"), f = r("vft-scrollbar"), u = r("only-child"), g = r("vft-tooltip"), l = r("vft-button"), b = r("vft-icon"), m = r("vft-button-group");
+  return i(), h("div", {
+    class: a([e.ns.b(), e.ns.is("disabled", e.disabled)])
+  }, [
+    n(g, {
+      ref: "popperRef",
+      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": [e.ns.e("popper"), e.popperClass],
+      "reference-element": e.referenceElementRef?.$el,
+      trigger: e.trigger,
+      "trigger-keys": e.triggerKeys,
+      "trigger-target-el": e.contentRef,
+      "show-after": e.trigger === "hover" ? e.showTimeout : 0,
+      "stop-popper-mouse-event": !1,
+      "virtual-ref": e.triggeringElementRef,
+      "virtual-triggering": e.splitButton,
+      disabled: e.disabled,
+      transition: `${e.ns.namespace.value}-zoom-in-top`,
+      teleported: e.teleported,
+      pure: "",
+      persistent: e.persistent,
+      onBeforeShow: e.handleBeforeShowTooltip,
+      onShow: e.handleShowTooltip,
+      onBeforeHide: e.handleBeforeHideTooltip
+    }, y({
+      content: o(() => [
+        n(f, {
+          ref: "scrollbar",
+          "wrap-style": e.wrapStyle,
+          tag: "div",
+          "view-class": e.ns.e("list")
+        }, {
+          default: o(() => [
+            n(d, {
+              loop: e.loop,
+              "current-tab-id": e.currentTabId,
+              orientation: "horizontal",
+              onCurrentTabIdChange: e.handleCurrentTabIdChange,
+              onEntryFocus: e.handleEntryFocus
+            }, {
+              default: o(() => [
+                n(p, null, {
+                  default: o(() => [
+                    t(e.$slots, "dropdown")
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            }, 8, ["loop", "current-tab-id", "onCurrentTabIdChange", "onEntryFocus"])
+          ]),
+          _: 3
+        }, 8, ["wrap-style", "view-class"])
+      ]),
+      _: 2
+    }, [
+      e.splitButton ? void 0 : {
+        name: "default",
+        fn: o(() => [
+          n(u, {
+            id: e.triggerId,
+            ref: "triggeringElementRef",
+            role: "button",
+            tabindex: e.tabindex
+          }, {
+            default: o(() => [
+              t(e.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["id", "tabindex"])
+        ]),
+        key: "0"
+      }
+    ]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported", "persistent", "onBeforeShow", "onShow", "onBeforeHide"]),
+    e.splitButton ? (i(), v(m, { key: 0 }, {
+      default: o(() => [
+        n(l, s({ ref: "referenceElementRef" }, e.buttonProps, {
+          size: e.dropdownSize,
+          type: e.type,
+          disabled: e.disabled,
+          tabindex: e.tabindex,
+          onClick: e.handlerMainButtonClick
+        }), {
+          default: o(() => [
+            t(e.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["size", "type", "disabled", "tabindex", "onClick"]),
+        n(l, s({
+          id: e.triggerId,
+          ref: "triggeringElementRef"
+        }, e.buttonProps, {
+          role: "button",
+          size: e.dropdownSize,
+          type: e.type,
+          class: e.ns.e("caret-button"),
+          disabled: e.disabled,
+          tabindex: e.tabindex,
+          "aria-label": "切换下拉菜单"
+        }), {
+          default: o(() => [
+            n(b, {
+              class: a(e.ns.e("icon")),
+              icon: "icon-arrow-down"
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+        }, 16, ["id", "size", "type", "class", "disabled", "tabindex"])
+      ]),
+      _: 3
+    })) : w("", !0)
+  ], 2);
+}
+const F = /* @__PURE__ */ C(c, [["render", B]]);
 export {
-  f as default
+  F as default
 };