st-comp 0.0.279 → 0.0.281

package/es/el-autocomplete-419bfbcf.js

@@ -0,0 +1,434 @@
+import { b as Ne, c as _, N as Ie, a as R, s as U, k as Te, m as F, u as Ae, V as De, t as Fe, w as Oe } from "./base-dd156b8e.js";
+import { b as N, U as P, I as W, C as re, l as Pe, E as Ve, g as Be, a as d } from "./el-popper-0454c8e8.js";
+import { a as Me } from "./index-a181f161.js";
+import { E as Ke, l as Re } from "./index-6a52dc7c.js";
+import { g as Ue, w as We } from "./use-form-item-784142b4.js";
+import { i as Le, E as ee } from "./el-input-d23f5442.js";
+import { E as qe } from "./index-d9379af4.js";
+import { defineComponent as He, computed as k, useAttrs as ze, ref as f, onBeforeUnmount as je, onMounted as xe, openBlock as w, createBlock as Ge, unref as s, withCtx as g, createElementVNode as te, normalizeClass as $, normalizeStyle as oe, createElementBlock as I, withModifiers as ae, renderSlot as m, createCommentVNode as se, createVNode as O, Fragment as Je, renderList as Qe, createTextVNode as Xe, toDisplayString as Ye, mergeProps as le, createSlots as Ze } from "vue";
+const _e = Ne({
+  ...Le,
+  /**
+  * @description key name of the input suggestion object for display
+  */
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  /**
+  * @description binding value
+  */
+  modelValue: {
+    type: [String, Number],
+    default: ""
+  },
+  /**
+  * @description debounce delay when typing, in milliseconds
+  */
+  debounce: {
+    type: Number,
+    default: 300
+  },
+  /**
+  * @description placement of the popup menu
+  */
+  placement: {
+    type: _(String),
+    values: [
+      "top",
+      "top-start",
+      "top-end",
+      "bottom",
+      "bottom-start",
+      "bottom-end"
+    ],
+    default: "bottom-start"
+  },
+  /**
+  * @description a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete
+  */
+  fetchSuggestions: {
+    type: _([Function, Array]),
+    default: Ie
+  },
+  /**
+  * @description custom class name for autocomplete's dropdown
+  */
+  popperClass: N.popperClass,
+  /**
+  * @description custom style for autocomplete's dropdown
+  */
+  popperStyle: N.popperStyle,
+  /**
+  * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+  */
+  popperOptions: N.popperOptions,
+  /**
+  * @description determines whether the arrow is displayed
+  */
+  showArrow: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+  * @description whether show suggestions when input focus
+  */
+  triggerOnFocus: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+  * @description whether to emit a `select` event on enter when there is no autocomplete match
+  */
+  selectWhenUnmatched: Boolean,
+  /**
+  * @description whether to hide the loading icon in remote search
+  */
+  hideLoading: Boolean,
+  /**
+  * @description whether select dropdown is teleported to the body
+  */
+  teleported: N.teleported,
+  /**
+  * @description which select dropdown appends to
+  */
+  appendTo: N.appendTo,
+  /**
+  * @description whether to highlight first item in remote search suggestions by default
+  */
+  highlightFirstItem: Boolean,
+  /**
+  * @description whether the width of the dropdown is the same as the input
+  */
+  fitInputWidth: Boolean,
+  /**
+  * @description whether keyboard navigation loops from end to start
+  */
+  loopNavigation: {
+    type: Boolean,
+    default: !0
+  }
+}), et = {
+  [P]: (o) => R(o) || U(o),
+  [W]: (o) => R(o) || U(o),
+  [re]: (o) => R(o) || U(o),
+  focus: (o) => o instanceof FocusEvent,
+  blur: (o) => o instanceof FocusEvent,
+  clear: () => !0,
+  select: (o) => Te(o)
+}, tt = ["aria-expanded", "aria-owns"], ot = { key: 0 }, at = [
+  "id",
+  "aria-selected",
+  "onClick"
+], ne = "ElAutocomplete";
+var st = /* @__PURE__ */ He({
+  name: ne,
+  inheritAttrs: !1,
+  __name: "autocomplete",
+  props: _e,
+  emits: et,
+  setup(o, { expose: ue, emit: ie }) {
+    const l = o, i = ie, pe = k(() => {
+      const e = ee.props ?? [];
+      return Pe(l, F(e) ? e : Object.keys(e));
+    }), ce = ze(), L = Ue(), u = Ae("autocomplete"), c = f(), q = f(), T = f(), H = f();
+    let z = !1, S = !1;
+    const r = f([]), a = f(-1), j = f(""), p = f(!1), A = f(!1), y = f(!1), E = Me(), de = k(() => ce.style), h = k(() => (r.value.length > 0 || y.value) && p.value), x = k(() => !l.hideLoading && y.value), fe = k(() => c.value ? Array.from(c.value.$el.querySelectorAll("input")) : []), ve = () => {
+      h.value && (j.value = `${c.value.$el.offsetWidth}px`);
+    }, ge = () => {
+      a.value = -1;
+    }, G = async (e) => {
+      if (A.value)
+        return;
+      const t = (n) => {
+        y.value = !1, !A.value && (F(n) ? (r.value = n, a.value = l.highlightFirstItem ? 0 : -1) : Fe(ne, "autocomplete suggestions must be an array"));
+      };
+      if (y.value = !0, F(l.fetchSuggestions))
+        t(l.fetchSuggestions);
+      else {
+        const n = await l.fetchSuggestions(e, t);
+        F(n) && t(n);
+      }
+    }, V = De(G, k(() => l.debounce)), me = (e) => {
+      const t = !!e;
+      if (i(W, e), i(P, e), A.value = !1, p.value || (p.value = t), !l.triggerOnFocus && !e) {
+        A.value = !0, r.value = [];
+        return;
+      }
+      V(e);
+    }, he = (e) => {
+      var t;
+      L.value || (((t = e.target) == null ? void 0 : t.tagName) !== "INPUT" || fe.value.includes(document.activeElement)) && (p.value = !0);
+    }, be = (e) => {
+      i(re, e);
+    }, ye = (e) => {
+      if (S)
+        S = !1;
+      else {
+        p.value = !0, i("focus", e);
+        const t = l.modelValue ?? "";
+        l.triggerOnFocus && !z && (r.value = [], a.value = -1, V(String(t)));
+      }
+    }, J = (e) => {
+      setTimeout(() => {
+        var t;
+        if ((t = T.value) != null && t.isFocusInsideContent()) {
+          S = !0;
+          return;
+        }
+        p.value && C(), i("blur", e);
+      });
+    }, Ee = () => {
+      p.value = !1, i(P, ""), i("clear");
+    }, Q = async () => {
+      var e;
+      (e = c.value) != null && e.isComposing || (h.value && a.value >= 0 && a.value < r.value.length ? B(r.value[a.value]) : (l.selectWhenUnmatched && (i("select", { value: l.modelValue }), r.value = [], a.value = -1), p.value = !0, V(String(l.modelValue))));
+    }, ke = (e) => {
+      h.value && (e.preventDefault(), e.stopPropagation(), C());
+    }, C = () => {
+      p.value = !1;
+    }, we = () => {
+      var e;
+      (e = c.value) == null || e.focus();
+    }, $e = () => {
+      var e;
+      (e = c.value) == null || e.blur();
+    }, B = async (e) => {
+      i(W, e[l.valueKey]), i(P, e[l.valueKey]), i("select", e), r.value = [], a.value = -1;
+    }, b = (e) => {
+      var Y, Z;
+      if (!h.value || y.value)
+        return;
+      if (e < 0) {
+        if (!l.loopNavigation) {
+          a.value = -1;
+          return;
+        }
+        e = r.value.length - 1;
+      }
+      e >= r.value.length && (e = l.loopNavigation ? 0 : r.value.length - 1);
+      const [t, n] = Se(), v = n[e], K = t.scrollTop, { offsetTop: D, scrollHeight: X } = v;
+      D + X > K + t.clientHeight && (t.scrollTop = D + X - t.clientHeight), D < K && (t.scrollTop = D), a.value = e, (Z = (Y = c.value) == null ? void 0 : Y.ref) == null || Z.setAttribute("aria-activedescendant", `${E.value}-item-${a.value}`);
+    }, Se = () => {
+      const e = q.value.querySelector(`.${u.be("suggestion", "wrap")}`);
+      return [e, e.querySelectorAll(`.${u.be("suggestion", "list")} li`)];
+    }, M = We(H, (e) => {
+      var n;
+      if ((n = T.value) != null && n.isFocusInsideContent())
+        return;
+      const t = S;
+      S = !1, h.value && (t ? J(new FocusEvent("blur", e)) : C());
+    }), Ce = (e) => {
+      switch (Be(e)) {
+        case d.up:
+          e.preventDefault(), b(a.value - 1);
+          break;
+        case d.down:
+          e.preventDefault(), b(a.value + 1);
+          break;
+        case d.enter:
+        case d.numpadEnter:
+          e.preventDefault(), Q();
+          break;
+        case d.tab:
+          C();
+          break;
+        case d.esc:
+          ke(e);
+          break;
+        case d.home:
+          e.preventDefault(), b(0);
+          break;
+        case d.end:
+          e.preventDefault(), b(r.value.length - 1);
+          break;
+        case d.pageUp:
+          e.preventDefault(), b(Math.max(0, a.value - 10));
+          break;
+        case d.pageDown:
+          e.preventDefault(), b(Math.min(r.value.length - 1, a.value + 10));
+          break;
+      }
+    };
+    return je(() => {
+      M == null || M();
+    }), xe(() => {
+      var t;
+      const e = (t = c.value) == null ? void 0 : t.ref;
+      e && ([
+        {
+          key: "role",
+          value: "textbox"
+        },
+        {
+          key: "aria-autocomplete",
+          value: "list"
+        },
+        {
+          key: "aria-controls",
+          value: E.value
+        },
+        {
+          key: "aria-activedescendant",
+          value: `${E.value}-item-${a.value}`
+        }
+      ].forEach(({ key: n, value: v }) => e.setAttribute(n, v)), z = e.hasAttribute("readonly"));
+    }), ue({
+      /** @description the index of the currently highlighted item */
+      highlightedIndex: a,
+      /** @description autocomplete whether activated */
+      activated: p,
+      /** @description remote search loading status */
+      loading: y,
+      /** @description el-input component instance */
+      inputRef: c,
+      /** @description el-tooltip component instance */
+      popperRef: T,
+      /** @description fetch suggestions result */
+      suggestions: r,
+      /** @description triggers when a suggestion is clicked */
+      handleSelect: B,
+      /** @description handle keyboard enter event */
+      handleKeyEnter: Q,
+      /** @description focus the input element */
+      focus: we,
+      /** @description blur the input element */
+      blur: $e,
+      /** @description close suggestion */
+      close: C,
+      /** @description highlight an item in a suggestion */
+      highlight: b,
+      /** @description loading suggestion list */
+      getData: G
+    }), (e, t) => (w(), Ge(s(Ve), {
+      ref_key: "popperRef",
+      ref: T,
+      visible: h.value,
+      placement: o.placement,
+      "fallback-placements": ["bottom-start", "top-start"],
+      "popper-class": [s(u).e("popper"), o.popperClass],
+      "popper-style": o.popperStyle,
+      "popper-options": o.popperOptions,
+      "show-arrow": o.showArrow,
+      teleported: o.teleported,
+      "append-to": o.appendTo,
+      "gpu-acceleration": !1,
+      pure: "",
+      "manual-mode": "",
+      effect: "light",
+      trigger: "click",
+      transition: `${s(u).namespace.value}-zoom-in-top`,
+      persistent: "",
+      role: "listbox",
+      onBeforeShow: ve,
+      onHide: ge
+    }, {
+      content: g(() => [te("div", {
+        ref_key: "regionRef",
+        ref: q,
+        class: $([s(u).b("suggestion"), s(u).is("loading", x.value)]),
+        style: oe({
+          [o.fitInputWidth ? "width" : "minWidth"]: j.value,
+          outline: "none"
+        }),
+        role: "region"
+      }, [
+        e.$slots.header ? (w(), I("div", {
+          key: 0,
+          class: $(s(u).be("suggestion", "header")),
+          onClick: t[0] || (t[0] = ae(() => {
+          }, ["stop"]))
+        }, [m(e.$slots, "header")], 2)) : se("v-if", !0),
+        O(s(qe), {
+          id: s(E),
+          tag: "ul",
+          "wrap-class": s(u).be("suggestion", "wrap"),
+          "view-class": s(u).be("suggestion", "list"),
+          role: "listbox"
+        }, {
+          default: g(() => [x.value ? (w(), I("li", ot, [m(e.$slots, "loading", {}, () => [O(s(Ke), { class: $(s(u).is("loading")) }, {
+            default: g(() => [O(s(Re))]),
+            _: 1
+          }, 8, ["class"])])])) : (w(!0), I(Je, { key: 1 }, Qe(r.value, (n, v) => (w(), I("li", {
+            id: `${s(E)}-item-${v}`,
+            key: v,
+            class: $({ highlighted: a.value === v }),
+            role: "option",
+            "aria-selected": a.value === v,
+            onClick: (K) => B(n)
+          }, [m(e.$slots, "default", { item: n }, () => [Xe(Ye(n[o.valueKey]), 1)])], 10, at))), 128))]),
+          _: 3
+        }, 8, [
+          "id",
+          "wrap-class",
+          "view-class"
+        ]),
+        e.$slots.footer ? (w(), I("div", {
+          key: 1,
+          class: $(s(u).be("suggestion", "footer")),
+          onClick: t[1] || (t[1] = ae(() => {
+          }, ["stop"]))
+        }, [m(e.$slots, "footer")], 2)) : se("v-if", !0)
+      ], 6)]),
+      default: g(() => [te("div", {
+        ref_key: "listboxRef",
+        ref: H,
+        class: $([s(u).b(), e.$attrs.class]),
+        style: oe(de.value),
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": h.value,
+        "aria-owns": s(E)
+      }, [O(s(ee), le({
+        ref_key: "inputRef",
+        ref: c
+      }, le(pe.value, e.$attrs), {
+        "model-value": o.modelValue,
+        disabled: s(L),
+        onInput: me,
+        onChange: be,
+        onFocus: ye,
+        onBlur: J,
+        onClear: Ee,
+        onKeydown: Ce,
+        onMousedown: he
+      }), Ze({ _: 2 }, [
+        e.$slots.prepend ? {
+          name: "prepend",
+          fn: g(() => [m(e.$slots, "prepend")]),
+          key: "0"
+        } : void 0,
+        e.$slots.append ? {
+          name: "append",
+          fn: g(() => [m(e.$slots, "append")]),
+          key: "1"
+        } : void 0,
+        e.$slots.prefix ? {
+          name: "prefix",
+          fn: g(() => [m(e.$slots, "prefix")]),
+          key: "2"
+        } : void 0,
+        e.$slots.suffix ? {
+          name: "suffix",
+          fn: g(() => [m(e.$slots, "suffix")]),
+          key: "3"
+        } : void 0
+      ]), 1040, ["model-value", "disabled"])], 14, tt)]),
+      _: 3
+    }, 8, [
+      "visible",
+      "placement",
+      "popper-class",
+      "popper-style",
+      "popper-options",
+      "show-arrow",
+      "teleported",
+      "append-to",
+      "transition"
+    ]));
+  }
+}), lt = st;
+const vt = Oe(lt);
+export {
+  vt as E
+};