ep-craft 0.1.30 → 0.1.32

package/dist/components/autocomplete/EpAutocomplete.js

@@ -0,0 +1,465 @@
+import { EVENT_CODE as f } from "../../constants/aria.js";
+import { INPUT_EVENT as Q, UPDATE_MODEL_EVENT as R, CHANGE_EVENT as Ee } from "../../constants/event.js";
+import { isArray as A } from "@vue/shared";
+import { pick as we } from "lodash-unified";
+import { useDebounceFn as $e, onClickOutside as Ce } from "@vueuse/core";
+import { throwError as Se } from "../../utils/error.js";
+import { getEventCode as De } from "../../utils/dom/event.js";
+import { Loading as Ne } from "@element-plus/icons-vue";
+import { defineComponent as Ie, computed as E, useAttrs as Te, ref as v, onBeforeUnmount as Ae, onMounted as Fe, openBlock as w, createBlock as Ve, unref as o, withCtx as m, createElementVNode as X, normalizeStyle as Y, normalizeClass as $, createVNode as F, mergeProps as Z, createSlots as Pe, renderSlot as g, createElementBlock as D, withModifiers as _, createCommentVNode as ee, Fragment as Me, renderList as Oe, createTextVNode as Re, toDisplayString as Be } from "vue";
+import { useNamespace as Ke } from "../../hooks/use-namespace/index.js";
+import { useId as Ue } from "../../hooks/use-id/index.js";
+import "../../hooks/use-size/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "../../hooks/use-delayed-toggle/index.js";
+import "../../hooks/use-aria/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "../../hooks/use-empty-values/index.js";
+import { ElIcon as Le } from "../icon/index.js";
+import { useFormDisabled as We } from "../form/src/hooks/use-form-common-props.js";
+import { ElTooltip as qe } from "../tooltip/index.js";
+import { ElInput as te } from "../input/index.js";
+import { autocompleteEmits as He, autocompleteProps as ze } from "./autocomplete.js";
+import { ElScrollbar as xe } from "../scrollbar/index.js";
+const Ge = ["aria-expanded", "aria-owns"], je = { key: 0 }, Je = ["id", "aria-selected", "onClick"], oe = "ElAutocomplete", yt = /* @__PURE__ */ Ie({
+  name: oe,
+  inheritAttrs: !1,
+  props: ze,
+  emits: He,
+  setup(i, { expose: se, emit: le }) {
+    const l = i, u = le, ae = E(() => {
+      const e = te.props ?? [];
+      return we(
+        l,
+        A(e) ? e : Object.keys(e)
+      );
+    }), ne = Te(), B = We(), r = Ke("autocomplete"), p = v(), K = v(), N = v(), U = v();
+    let L = !1, C = !1;
+    const n = v([]), s = v(-1), W = v(""), c = v(!1), I = v(!1), y = v(!1), k = Ue(), re = E(() => ne.style), h = E(() => (n.value.length > 0 || y.value) && c.value), q = E(() => !l.hideLoading && y.value), ie = E(() => p.value ? Array.from(p.value.$el.querySelectorAll("input")) : []), ue = () => {
+      h.value && (W.value = `${p.value.$el.offsetWidth}px`);
+    }, ce = () => {
+      s.value = -1;
+    }, H = async (e) => {
+      if (I.value) return;
+      const t = (a) => {
+        y.value = !1, !I.value && (A(a) ? (n.value = a, s.value = l.highlightFirstItem ? 0 : -1) : Se(
+          oe,
+          "autocomplete suggestions must be an array"
+        ));
+      };
+      if (y.value = !0, A(l.fetchSuggestions)) t(l.fetchSuggestions);
+      else {
+        const a = await l.fetchSuggestions(e, t);
+        A(a) && t(a);
+      }
+    }, V = $e(
+      H,
+      E(() => l.debounce)
+    ), pe = (e) => {
+      const t = !!e;
+      if (u(Q, e), u(R, e), I.value = !1, c.value || (c.value = t), !l.triggerOnFocus && !e) {
+        I.value = !0, n.value = [];
+        return;
+      }
+      V(e);
+    }, fe = (e) => {
+      var t;
+      B.value || (((t = e.target) == null ? void 0 : t.tagName) !== "INPUT" || ie.value.includes(document.activeElement)) && (c.value = !0);
+    }, ve = (e) => {
+      u(Ee, e);
+    }, de = (e) => {
+      if (C)
+        C = !1;
+      else {
+        c.value = !0, u("focus", e);
+        const t = l.modelValue ?? "";
+        l.triggerOnFocus && !L && V(String(t));
+      }
+    }, z = (e) => {
+      setTimeout(() => {
+        var t;
+        if ((t = N.value) != null && t.isFocusInsideContent()) {
+          C = !0;
+          return;
+        }
+        c.value && S(), u("blur", e);
+      });
+    }, me = () => {
+      c.value = !1, u(R, ""), u("clear");
+    }, x = async () => {
+      var e;
+      (e = p.value) != null && e.isComposing || (h.value && s.value >= 0 && s.value < n.value.length ? P(n.value[s.value]) : (l.selectWhenUnmatched && (u("select", { value: l.modelValue }), n.value = [], s.value = -1), c.value = !0, V(String(l.modelValue))));
+    }, ge = (e) => {
+      h.value && (e.preventDefault(), e.stopPropagation(), S());
+    }, S = () => {
+      c.value = !1;
+    }, he = () => {
+      var e;
+      (e = p.value) == null || e.focus();
+    }, be = () => {
+      var e;
+      (e = p.value) == null || e.blur();
+    }, P = async (e) => {
+      u(Q, e[l.valueKey]), u(R, e[l.valueKey]), u("select", e), n.value = [], s.value = -1;
+    }, b = (e) => {
+      var j, J;
+      if (!h.value || y.value) return;
+      if (e < 0) {
+        if (!l.loopNavigation) {
+          s.value = -1;
+          return;
+        }
+        e = n.value.length - 1;
+      }
+      e >= n.value.length && (e = l.loopNavigation ? 0 : n.value.length - 1);
+      const [t, a] = ye(), d = a[e], O = t.scrollTop, { offsetTop: T, scrollHeight: G } = d;
+      T + G > O + t.clientHeight && (t.scrollTop = T + G - t.clientHeight), T < O && (t.scrollTop = T), s.value = e, (J = (j = p.value) == null ? void 0 : j.ref) == null || J.setAttribute(
+        "aria-activedescendant",
+        `${k.value}-item-${s.value}`
+      );
+    }, ye = () => {
+      const e = K.value.querySelector(
+        `.${r.be("suggestion", "wrap")}`
+      );
+      return [
+        e,
+        e.querySelectorAll(
+          `.${r.be("suggestion", "list")} li`
+        )
+      ];
+    }, M = Ce(U, (e) => {
+      var a;
+      if ((a = N.value) != null && a.isFocusInsideContent()) return;
+      const t = C;
+      C = !1, h.value && (t ? z(new FocusEvent("blur", e)) : S());
+    }), ke = (e) => {
+      switch (De(e)) {
+        case f.up:
+          e.preventDefault(), b(s.value - 1);
+          break;
+        case f.down:
+          e.preventDefault(), b(s.value + 1);
+          break;
+        case f.enter:
+        case f.numpadEnter:
+          e.preventDefault(), x();
+          break;
+        case f.tab:
+          S();
+          break;
+        case f.esc:
+          ge(e);
+          break;
+        case f.home:
+          e.preventDefault(), b(0);
+          break;
+        case f.end:
+          e.preventDefault(), b(n.value.length - 1);
+          break;
+        case f.pageUp:
+          e.preventDefault(), b(Math.max(0, s.value - 10));
+          break;
+        case f.pageDown:
+          e.preventDefault(), b(
+            Math.min(n.value.length - 1, s.value + 10)
+          );
+          break;
+      }
+    };
+    return Ae(() => {
+      M == null || M();
+    }), Fe(() => {
+      var t;
+      const e = (t = p.value) == null ? void 0 : t.ref;
+      e && ([
+        {
+          key: "role",
+          value: "textbox"
+        },
+        {
+          key: "aria-autocomplete",
+          value: "list"
+        },
+        {
+          key: "aria-controls",
+          value: k.value
+        },
+        {
+          key: "aria-activedescendant",
+          value: `${k.value}-item-${s.value}`
+        }
+      ].forEach(({ key: a, value: d }) => e.setAttribute(a, d)), L = e.hasAttribute("readonly"));
+    }), se({
+      /** @description the index of the currently highlighted item */
+      highlightedIndex: s,
+      /** @description autocomplete whether activated */
+      activated: c,
+      /** @description remote search loading status */
+      loading: y,
+      /** @description el-input component instance */
+      inputRef: p,
+      /** @description el-tooltip component instance */
+      popperRef: N,
+      /** @description fetch suggestions result */
+      suggestions: n,
+      /** @description triggers when a suggestion is clicked */
+      handleSelect: P,
+      /** @description handle keyboard enter event */
+      handleKeyEnter: x,
+      /** @description focus the input element */
+      focus: he,
+      /** @description blur the input element */
+      blur: be,
+      /** @description close suggestion */
+      close: S,
+      /** @description highlight an item in a suggestion */
+      highlight: b,
+      /** @description loading suggestion list */
+      getData: H
+    }), (e, t) => (w(), Ve(
+      o(qe),
+      {
+        ref_key: "popperRef",
+        ref: N,
+        visible: h.value,
+        placement: i.placement,
+        "fallback-placements": ["bottom-start", "top-start"],
+        "popper-class": [o(r).e("popper"), i.popperClass],
+        "popper-style": i.popperStyle,
+        "popper-options": i.popperOptions,
+        "show-arrow": i.showArrow,
+        teleported: i.teleported,
+        "append-to": i.appendTo,
+        "gpu-acceleration": !1,
+        pure: "",
+        "manual-mode": "",
+        effect: "light",
+        trigger: "click",
+        transition: `${o(r).namespace.value}-zoom-in-top`,
+        persistent: "",
+        role: "listbox",
+        onBeforeShow: ue,
+        onHide: ce
+      },
+      {
+        content: m(() => [
+          X(
+            "div",
+            {
+              ref_key: "regionRef",
+              ref: K,
+              class: $([
+                o(r).b("suggestion"),
+                o(r).is("loading", q.value)
+              ]),
+              style: Y({
+                [i.fitInputWidth ? "width" : "minWidth"]: W.value,
+                outline: "none"
+              }),
+              role: "region"
+            },
+            [
+              e.$slots.header ? (w(), D(
+                "div",
+                {
+                  key: 0,
+                  class: $(
+                    o(r).be("suggestion", "header")
+                  ),
+                  onClick: t[0] || (t[0] = _(() => {
+                  }, ["stop"]))
+                },
+                [g(e.$slots, "header")],
+                2
+              )) : ee("v-if", !0),
+              F(
+                o(xe),
+                {
+                  id: o(k),
+                  tag: "ul",
+                  "wrap-class": o(r).be("suggestion", "wrap"),
+                  "view-class": o(r).be("suggestion", "list"),
+                  role: "listbox"
+                },
+                {
+                  default: m(() => [
+                    q.value ? (w(), D("li", je, [
+                      g(e.$slots, "loading", {}, () => [
+                        F(
+                          o(Le),
+                          {
+                            class: $(
+                              o(r).is("loading")
+                            )
+                          },
+                          {
+                            default: m(() => [
+                              F(o(Ne))
+                            ]),
+                            _: 1
+                          },
+                          8,
+                          ["class"]
+                        )
+                      ])
+                    ])) : (w(!0), D(
+                      Me,
+                      { key: 1 },
+                      Oe(n.value, (a, d) => (w(), D(
+                        "li",
+                        {
+                          id: `${o(k)}-item-${d}`,
+                          key: d,
+                          class: $({
+                            highlighted: s.value === d
+                          }),
+                          role: "option",
+                          "aria-selected": s.value === d,
+                          // class ②：上游 JS 的 `$event` 未用亦无类型，strict 下须标注。
+                          onClick: (O) => P(a)
+                        },
+                        [
+                          g(
+                            e.$slots,
+                            "default",
+                            { item: a },
+                            () => [
+                              Re(
+                                Be(
+                                  a[i.valueKey]
+                                ),
+                                1
+                              )
+                            ]
+                          )
+                        ],
+                        10,
+                        Je
+                      ))),
+                      128
+                    ))
+                  ]),
+                  _: 3
+                },
+                8,
+                ["id", "wrap-class", "view-class"]
+              ),
+              e.$slots.footer ? (w(), D(
+                "div",
+                {
+                  key: 1,
+                  class: $(
+                    o(r).be("suggestion", "footer")
+                  ),
+                  onClick: t[1] || (t[1] = _(() => {
+                  }, ["stop"]))
+                },
+                [g(e.$slots, "footer")],
+                2
+              )) : ee("v-if", !0)
+            ],
+            6
+          )
+        ]),
+        default: m(() => [
+          X(
+            "div",
+            {
+              ref_key: "listboxRef",
+              ref: U,
+              class: $([o(r).b(), e.$attrs.class]),
+              style: Y(re.value),
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": h.value,
+              "aria-owns": o(k)
+            },
+            [
+              F(
+                o(te),
+                Z(
+                  {
+                    ref_key: "inputRef",
+                    ref: p
+                  },
+                  Z(ae.value, e.$attrs),
+                  {
+                    "model-value": i.modelValue,
+                    disabled: o(B),
+                    onInput: pe,
+                    onChange: ve,
+                    onFocus: de,
+                    onBlur: z,
+                    onClear: me,
+                    onKeydown: ke,
+                    onMousedown: fe
+                  }
+                ),
+                // class ②：`createSlots` 在 Vue 3.5.40 的公开签名是 **SSR 口径**——首参为
+                // `Record<string, SSRSlot>`、描述符 `fn` 要求 `SSRSlot`，而 `SSRSlot` /
+                // `CompiledSlotDescriptor` 均未导出；同时 `withCtx` 的返回类型被声明为宽泛的
+                // `Function`。两者叠加使上游编译产物的这一处无法自然通过类型检查，故按 Vue
+                // **自身签名的参数类型**做断言（参数形状与上游逐字相同，运行时零差异）。
+                // 注意首参 `{ _: 2 }` 是编译器写入的 `SlotFlags.DYNAMIC` 标记，**必须原样保留**。
+                Pe(
+                  { _: 2 },
+                  [
+                    e.$slots.prepend ? {
+                      name: "prepend",
+                      fn: m(() => [
+                        g(e.$slots, "prepend")
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    e.$slots.append ? {
+                      name: "append",
+                      fn: m(() => [
+                        g(e.$slots, "append")
+                      ]),
+                      key: "1"
+                    } : void 0,
+                    e.$slots.prefix ? {
+                      name: "prefix",
+                      fn: m(() => [
+                        g(e.$slots, "prefix")
+                      ]),
+                      key: "2"
+                    } : void 0,
+                    e.$slots.suffix ? {
+                      name: "suffix",
+                      fn: m(() => [
+                        g(e.$slots, "suffix")
+                      ]),
+                      key: "3"
+                    } : void 0
+                  ]
+                ),
+                1040,
+                ["model-value", "disabled"]
+              )
+            ],
+            14,
+            Ge
+          )
+        ]),
+        _: 3
+      },
+      8,
+      [
+        "visible",
+        "placement",
+        "popper-class",
+        "popper-style",
+        "popper-options",
+        "show-arrow",
+        "teleported",
+        "append-to",
+        "transition"
+      ]
+    ));
+  }
+});
+export {
+  yt as default
+};