@qynpm/ui 1.0.46 → 1.1.0

package/dist/shared/index-CESgJwIg.mjs

@@ -0,0 +1,328 @@
+import { defineComponent as de, useAttrs as ce, ref as C, computed as E, watch as W, onBeforeUnmount as fe, openBlock as x, createElementBlock as G, normalizeClass as pe, createVNode as ge, mergeProps as J, withKeys as he, createSlots as me, withCtx as m, renderSlot as y, createElementVNode as X, toDisplayString as Y, createCommentVNode as ye, createBlock as ve, createTextVNode as be } from "vue";
+import { useFormDisabled as qe, ElButton as Ve, ElAutocomplete as Se } from "element-plus";
+import { _ as _e } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Be = /* @__PURE__ */ de({
+  name: "QySearchInput",
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    modelValue: { type: [String, Number, null], required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: void 0 },
+    placeholder: { type: String, required: !1, default: "请输入搜索内容" },
+    removeSpace: { type: Boolean, required: !1, default: !1 },
+    trimMode: { type: String, required: !1, default: "none" },
+    clearable: { type: Boolean, required: !1, default: !0 },
+    showButton: { type: Boolean, required: !1, default: !0 },
+    buttonText: { type: String, required: !1, default: "搜索" },
+    buttonProps: { type: Object, required: !1, default: () => ({}) },
+    suggestions: { type: Array, required: !1, default: () => [] },
+    fetchSuggestions: { type: [Function, null], required: !1, default: null },
+    fetchSuggestionsMethod: { type: [Function, null], required: !1, default: null },
+    debounce: { type: Number, required: !1, default: 300 },
+    minLength: { type: Number, required: !1, default: 1 },
+    triggerOnFocus: { type: Boolean, required: !1, default: !1 },
+    searchOnEnter: { type: Boolean, required: !1, default: !0 },
+    searchOnSelect: { type: Boolean, required: !1, default: !1 },
+    highlightKeyword: { type: Boolean, required: !1, default: !0 },
+    teleported: { type: Boolean, required: !1, default: !0 },
+    appendTo: { type: String, required: !1, default: "body" },
+    popperClass: { type: String, required: !1, default: "" },
+    fitInputWidth: { type: Boolean, required: !1, default: !0 }
+  },
+  emits: ["update:modelValue", "search", "clear", "input", "change", "focus", "blur", "enter", "select", "visible-change", "suggestions-change", "error"],
+  setup(o, { expose: F, emit: a }) {
+    const n = o, l = a, M = ce(), u = qe(), s = C(null), c = C(d(n.modelValue)), _ = E(() => d(n.modelValue)), Z = E(
+      () => ["qy-search-input__popper", n.popperClass].filter(Boolean).join(" ")
+    ), $ = E(() => d(n.modelValue)), f = C("");
+    let p = 0, g = !1;
+    function h() {
+      p++, s.value && (s.value.loading = !1, s.value.suggestions = []);
+    }
+    W(
+      () => n.modelValue,
+      (e) => {
+        c.value = d(e), c.value !== f.value && h();
+      }
+    );
+    function d(e) {
+      return e == null ? "" : String(e);
+    }
+    function A(e) {
+      return n.removeSpace ? e.replace(/\s+/g, "") : e;
+    }
+    function B(e, t) {
+      return n.trimMode !== t ? e : e.trim();
+    }
+    function v(e) {
+      return A(d(e));
+    }
+    function b(e) {
+      c.value = e, l("update:modelValue", e);
+    }
+    function w(e, t = "") {
+      return {
+        ...e,
+        label: e.label || e.value,
+        value: e.value || e.label,
+        description: e.description || t
+      };
+    }
+    function q(e = []) {
+      return e.flatMap((t) => {
+        if (Array.isArray(t.items)) {
+          const r = t;
+          return r.items.map((i) => w(i, r.groupLabel));
+        }
+        return w(t);
+      });
+    }
+    function I(e) {
+      const t = e.toLowerCase();
+      return (r) => [r.label, r.value, r.description].filter(Boolean).some((i) => String(i).toLowerCase().includes(t));
+    }
+    function L(e) {
+      return e ? e.length >= n.minLength : n.triggerOnFocus;
+    }
+    function V(e) {
+      l("suggestions-change", e), l("visible-change", e.length > 0);
+    }
+    async function O(e) {
+      if (!L(e))
+        return [];
+      if (n.fetchSuggestionsMethod)
+        return await new Promise((j) => {
+          var Q;
+          (Q = n.fetchSuggestionsMethod) == null || Q.call(n, e, (se) => {
+            j(q(se));
+          });
+        });
+      if (n.fetchSuggestions) {
+        const i = await n.fetchSuggestions(e);
+        return q(Array.isArray(i) ? i : []);
+      }
+      const t = q(n.suggestions);
+      return e ? t.filter(I(e)) : t;
+    }
+    async function ee(e, t) {
+      if (g || u.value || e !== c.value) {
+        t([]);
+        return;
+      }
+      const r = ++p;
+      f.value = e;
+      try {
+        const i = await O(e);
+        if (g || r !== p) return;
+        V(i), t(i);
+      } catch (i) {
+        if (g || r !== p) return;
+        l("error", i), V([]), t([]);
+      }
+    }
+    function T() {
+      var e, t;
+      u.value || !f.value || (t = (e = s.value) == null ? void 0 : e.getData) == null || t.call(e, f.value);
+    }
+    function te(e) {
+      if (u.value) return;
+      const t = v(e);
+      h(), b(t);
+    }
+    function ne(e) {
+      const t = v(e);
+      c.value = t, l("input", t);
+    }
+    function le(e) {
+      const t = B(v(e), "change");
+      t !== d(n.modelValue) && b(t), l("change", t);
+    }
+    function re(e) {
+      l("focus", e);
+    }
+    function ae(e) {
+      const t = B(c.value, "blur");
+      t !== d(n.modelValue) && b(t), l("blur", e), l("visible-change", !1);
+    }
+    function P() {
+      h(), f.value = "", S(), c.value = "", l("update:modelValue", ""), l("clear"), V([]);
+    }
+    function oe(e) {
+      l("enter", e), n.searchOnEnter && z();
+    }
+    function z() {
+      u.value || l("search", d(n.modelValue));
+    }
+    function ue(e) {
+      l("select", e), n.searchOnSelect && l("search", e.value);
+    }
+    function k(e) {
+      return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+    }
+    function D(e) {
+      return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    }
+    function ie(e) {
+      const t = k(e || "");
+      if (!n.highlightKeyword || !_.value) return t;
+      const r = D(k(_.value));
+      return r ? t.replace(
+        new RegExp(`(${r})`, "ig"),
+        '<mark class="qy-search-input__mark">$1</mark>'
+      ) : t;
+    }
+    function N() {
+      var e, t;
+      (t = (e = s.value) == null ? void 0 : e.focus) == null || t.call(e);
+    }
+    function K() {
+      var e, t;
+      (t = (e = s.value) == null ? void 0 : e.blur) == null || t.call(e);
+    }
+    function H() {
+      var e, t, r;
+      (r = (t = (e = s.value) == null ? void 0 : e.inputRef) == null ? void 0 : t.select) == null || r.call(t);
+    }
+    function R() {
+      P();
+    }
+    function S() {
+      var e, t;
+      (t = (e = s.value) == null ? void 0 : e.close) == null || t.call(e);
+    }
+    W(u, (e) => {
+      e && (h(), S());
+    }), fe(() => {
+      g = !0, h();
+    }), F({
+      // 暴露搜索框常用控制方法，供弹窗打开后聚焦或失败后重试建议项。
+      focus: N,
+      blur: K,
+      select: H,
+      clear: R,
+      closePanel: S,
+      retryFetch: T
+    });
+    const U = { props: n, emit: l, attrs: M, resolvedDisabled: u, autocompleteRef: s, innerValue: c, normalizedKeyword: _, mergedPopperClass: Z, displayValue: $, lastQuery: f, get queryVersion() {
+      return p;
+    }, set queryVersion(e) {
+      p = e;
+    }, get disposed() {
+      return g;
+    }, set disposed(e) {
+      g = e;
+    }, invalidateSuggestions: h, stringifyValue: d, sanitizeSpaces: A, sanitizeTrim: B, sanitizeImmediate: v, emitModelValue: b, normalizeItem: w, flattenSuggestionList: q, createFilter: I, canQuery: L, emitSuggestions: V, resolveSuggestionList: O, querySuggestions: ee, retryFetch: T, handleUpdateModelValue: te, handleInput: ne, handleChange: le, handleFocus: re, handleBlur: ae, handleClear: P, handleEnter: oe, triggerSearch: z, handleSelect: ue, escapeHtml: k, escapeRegExp: D, renderHighlighted: ie, focus: N, blur: K, select: H, clear: R, closePanel: S, get ElAutocomplete() {
+      return Se;
+    }, get ElButton() {
+      return Ve;
+    } };
+    return Object.defineProperty(U, "__isScriptSetup", { enumerable: !1, value: !0 }), U;
+  }
+}), we = { class: "qy-search-input__item" }, ke = ["innerHTML"], Ce = {
+  key: 0,
+  class: "qy-search-input__item-description"
+};
+function Ee(o, F, a, n, l, M) {
+  return x(), G(
+    "div",
+    {
+      class: pe(["qy-search-input", { "is-disabled": n.resolvedDisabled }])
+    },
+    [
+      ge(n.ElAutocomplete, J({ ref: "autocompleteRef" }, n.attrs, {
+        "model-value": n.displayValue,
+        disabled: n.resolvedDisabled,
+        placeholder: a.placeholder,
+        clearable: a.clearable,
+        debounce: a.debounce,
+        "fetch-suggestions": n.querySuggestions,
+        "trigger-on-focus": a.triggerOnFocus,
+        teleported: a.teleported,
+        "fit-input-width": a.fitInputWidth,
+        "popper-class": n.mergedPopperClass,
+        "append-to": a.appendTo,
+        "value-key": "value",
+        "onUpdate:modelValue": n.handleUpdateModelValue,
+        onInput: n.handleInput,
+        onChange: n.handleChange,
+        onFocus: n.handleFocus,
+        onBlur: n.handleBlur,
+        onClear: n.handleClear,
+        onSelect: n.handleSelect,
+        onKeydown: he(n.handleEnter, ["enter"])
+      }), me({
+        default: m(({ item: u }) => [
+          y(o.$slots, "item", {
+            item: u,
+            keyword: n.normalizedKeyword
+          }, () => [
+            X("div", we, [
+              X("div", {
+                class: "qy-search-input__item-label",
+                innerHTML: n.renderHighlighted(u.label || u.value || "")
+              }, null, 8, ke),
+              u.description ? (x(), G(
+                "div",
+                Ce,
+                Y(u.description),
+                1
+                /* TEXT */
+              )) : ye("v-if", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+        /* DYNAMIC */
+      }, [
+        o.$slots.prefix ? {
+          name: "prefix",
+          fn: m(() => [
+            y(o.$slots, "prefix", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        o.$slots.suffix ? {
+          name: "suffix",
+          fn: m(() => [
+            y(o.$slots, "suffix", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        o.$slots.prepend ? {
+          name: "prepend",
+          fn: m(() => [
+            y(o.$slots, "prepend", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        o.$slots.append || a.showButton ? {
+          name: "append",
+          fn: m(() => [
+            o.$slots.append ? y(o.$slots, "append", {}, void 0, !0, 0) : (x(), ve(n.ElButton, J({ key: 1 }, a.buttonProps, {
+              loading: a.loading,
+              disabled: n.resolvedDisabled,
+              onClick: n.triggerSearch
+            }), {
+              default: m(() => [
+                be(
+                  Y(a.buttonText),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            }, 16, ["loading", "disabled"]))
+          ]),
+          key: "3"
+        } : void 0
+      ]), 1040, ["model-value", "disabled", "placeholder", "clearable", "debounce", "trigger-on-focus", "teleported", "fit-input-width", "popper-class", "append-to"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const Ae = /* @__PURE__ */ _e(Be, [["render", Ee], ["__scopeId", "data-v-e2afec40"], ["__file", "/home/runner/work/qy-component/qy-component/packages/ui/lib/qy-search-input/index.vue"]]);
+export {
+  Ae as C
+};