@opendesign-plus-test/components 0.0.1-rc.64 → 0.0.1-rc.66

package/dist/esm/components/search/OSearchInput.vue2.mjs

@@ -0,0 +1,297 @@
+import { defineComponent as de, ref as w, computed as T, toRef as S, watch as ge, openBlock as m, createElementBlock as c, normalizeClass as me, createElementVNode as $, createVNode as x, createSlots as z, withCtx as u, renderSlot as r, normalizeProps as h, guardReactiveProps as f, Transition as ce, unref as E, createCommentVNode as P, toDisplayString as B, Fragment as H, renderList as F, createTextVNode as he } from "vue";
+import { useDebounceFn as fe, onClickOutside as ye } from "@vueuse/core";
+import pe from "./internal/SearchImageInput.vue.mjs";
+import ve from "./internal/SearchPanel.vue.mjs";
+import { useSearchHistory as ke } from "./composables/useSearchHistory.mjs";
+import { useI18n as we } from "../../i18n/index.mjs";
+const Ie = { class: "o-search-input-box" }, be = {
+  key: 0,
+  class: "o-search-input-dropdown"
+}, Ce = {
+  key: 0,
+  class: "o-search-input-suggest-list-row"
+}, Se = { class: "o-search-input-suggest-list-label" }, He = { class: "o-search-input-suggest-list" }, Ue = ["onClick"], Te = { key: 0 }, Re = /* @__PURE__ */ de({
+  __name: "OSearchInput",
+  props: {
+    modelValue: { default: "" },
+    imageUrl: { default: "" },
+    size: { default: "large" },
+    placeholder: {},
+    imagePlaceholder: {},
+    enableImageSearch: { type: Boolean, default: !1 },
+    uploadImage: {},
+    maxImageSize: { default: 10 * 1024 * 1024 },
+    imageUploadTooltip: {},
+    allowedImageTypes: {},
+    suggestItems: { default: () => [] },
+    onestepItems: { default: () => [] },
+    suggestTitle: {},
+    onestepTitle: {},
+    noDataText: {},
+    showSuggestEmpty: { type: Boolean, default: !0 },
+    highlightKeyword: { type: Boolean, default: !0 },
+    debounce: { default: 300 },
+    enableHistory: { type: Boolean, default: !0 },
+    historyItems: { default: () => [] },
+    maxHistoryCount: { default: 6 },
+    storeHistory: { type: Boolean, default: !1 },
+    storageKey: { default: "search-history" },
+    historyTitle: {},
+    autoSaveHistory: { type: Boolean, default: !0 },
+    hotItems: { default: () => [] },
+    hotTitle: {},
+    suggestList: { default: () => [] },
+    suggestListLabel: {},
+    clearable: { type: Boolean, default: !0 },
+    closeOnSearch: { type: Boolean, default: !0 },
+    closeOnClickOutside: { type: Boolean, default: !0 },
+    openOnFocus: { type: Boolean, default: !0 },
+    alwaysInlineThumbnail: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:imageUrl", "update:historyItems", "focus", "blur", "input", "clear", "search", "recommend-click", "onestep-click", "history-click", "hot-click", "suggest-list-click", "delete-history", "delete-history-item", "image-upload-start", "image-upload-success", "image-upload-error", "image-validate-error"],
+  setup(o, { expose: D, emit: K }) {
+    const l = o, a = K, { t: N } = we();
+    function j(e) {
+      const s = [], d = /<em>(.*?)<\/em>/g;
+      let t = 0, i;
+      for (; (i = d.exec(e)) !== null; )
+        i.index > t && s.push({ text: e.slice(t, i.index), em: !1 }), s.push({ text: i[1], em: !0 }), t = i.index + i[0].length;
+      return t < e.length && s.push({ text: e.slice(t), em: !1 }), s;
+    }
+    const v = w(), V = w(null), n = T({
+      get: () => l.modelValue,
+      set: (e) => a("update:modelValue", e)
+    }), y = w(!1), O = w(!1), U = w(!1), I = w(!1), A = T(() => {
+      if (!y.value || l.imageUrl || I.value) return !1;
+      const e = !!n.value && (l.suggestItems.length > 0 || l.onestepItems.length > 0 || l.showSuggestEmpty), s = l.enableHistory && p.items.value.length > 0 && !n.value, d = l.hotItems.length > 0 && !n.value;
+      return !!(e || l.openOnFocus && (s || d));
+    }), q = S(l, "historyItems"), G = S(l, "storageKey"), J = S(l, "storeHistory"), M = S(l, "maxHistoryCount"), p = ke({
+      initial: q,
+      storageKey: G,
+      storeHistory: J,
+      maxHistoryCount: M,
+      onChange: (e) => a("update:historyItems", e)
+    });
+    let b = !1;
+    const Q = fe((e) => {
+      if (b) {
+        b = !1;
+        return;
+      }
+      a("input", e);
+    }, () => l.debounce);
+    ge(n, (e) => {
+      Q(e);
+    }), ye(V, () => {
+      l.closeOnClickOutside && (O.value || U.value || (y.value = !1));
+    });
+    const W = () => {
+      y.value = !0, a("focus");
+    }, X = () => {
+      a("blur");
+    }, k = async (e) => {
+      var t, i, g, L, C, R;
+      (i = (t = v.value) == null ? void 0 : t.getIsUploading) != null && i.call(t) && await ((L = (g = v.value).awaitUpload) == null ? void 0 : L.call(g));
+      const s = e !== void 0 ? e.trim() : n.value.trim(), d = ((R = (C = v.value) == null ? void 0 : C.getUploadedUrl) == null ? void 0 : R.call(C)) || l.imageUrl;
+      !s && !d || (l.autoSaveHistory && s && p.push(s), l.closeOnSearch && (y.value = !1), a("search", { keyword: s, imageUrl: d || void 0 }));
+    }, Y = () => {
+      n.value = "", a("clear");
+    }, Z = (e) => {
+      a("recommend-click", e), b = !0, n.value = e.key, k(e.key ?? "");
+    }, _ = (e) => {
+      if (a("onestep-click", e), e.path) {
+        const s = e.path;
+        typeof window < "u" && window.open(s, "_blank", "noopener,noreferrer");
+      }
+    }, ee = (e) => {
+      a("history-click", e), k(e);
+    }, te = (e) => {
+      a("hot-click", e), k(e);
+    }, se = (e) => {
+      p.remove(e), a("delete-history-item", e);
+    }, oe = () => {
+      const e = [...p.items.value];
+      p.clearAll(), a("delete-history", e);
+    }, le = (e) => {
+      const s = e.replace(/<[^>]+>/g, "");
+      a("suggest-list-click", s), b = !0, n.value = s, k(s);
+    }, ae = (e) => {
+      O.value = e, e || (U.value = !0, setTimeout(() => {
+        U.value = !1;
+      }, 100));
+    }, ie = T(
+      () => !!l.imageUrl && (l.alwaysInlineThumbnail || !y.value)
+    ), ne = (e) => {
+      I.value = !0, a("image-upload-start", e);
+    }, re = (e, s) => {
+      I.value = !1, a("image-upload-success", e, s);
+    }, ue = () => {
+      I.value = !1, a("update:imageUrl", "");
+    };
+    return D({
+      focus: () => {
+        var e, s;
+        return (s = (e = v.value) == null ? void 0 : e.focus) == null ? void 0 : s.call(e);
+      },
+      blur: () => {
+        var e, s;
+        return (s = (e = v.value) == null ? void 0 : e.blur) == null ? void 0 : s.call(e);
+      },
+      search: k,
+      saveHistory: (e) => p.push(e ?? n.value)
+    }), (e, s) => {
+      var d;
+      return m(), c("div", {
+        ref_key: "wrapperRef",
+        ref: V,
+        class: me(["o-search-input", { "is-focus": y.value }])
+      }, [
+        $("div", Ie, [
+          x(pe, {
+            ref_key: "inputRef",
+            ref: v,
+            modelValue: n.value,
+            "onUpdate:modelValue": s[0] || (s[0] = (t) => n.value = t),
+            "image-url": o.imageUrl,
+            placeholder: o.placeholder,
+            "image-placeholder": o.imagePlaceholder,
+            size: o.size,
+            "enable-image-search": o.enableImageSearch,
+            "upload-image": o.uploadImage,
+            "max-image-size": o.maxImageSize,
+            "image-upload-tooltip": o.imageUploadTooltip,
+            "allowed-image-types": o.allowedImageTypes,
+            expanded: y.value && !l.alwaysInlineThumbnail,
+            "inline-thumbnail": ie.value,
+            clearable: o.clearable,
+            class: "o-search-input-field",
+            "onUpdate:imageUrl": s[1] || (s[1] = (t) => a("update:imageUrl", t)),
+            onFocus: W,
+            onBlur: X,
+            onEnter: k,
+            onClear: Y,
+            onImageClear: ue,
+            onImageUploadStart: ne,
+            onImageUploadSuccess: re,
+            onImageUploadError: s[2] || (s[2] = (t, i) => a("image-upload-error", t, i)),
+            onImageValidateError: s[3] || (s[3] = (t, i) => a("image-validate-error", t, i)),
+            onPreviewChange: ae
+          }, z({
+            prefix: u(() => [
+              r(e.$slots, "input-prefix", {}, void 0, !0)
+            ]),
+            suffix: u((t) => [
+              r(e.$slots, "input-suffix", h(f(t)), void 0, !0)
+            ]),
+            _: 2
+          }, [
+            e.$slots["image-preview"] ? {
+              name: "preview",
+              fn: u((t) => [
+                r(e.$slots, "image-preview", h(f(t)), void 0, !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "image-url", "placeholder", "image-placeholder", "size", "enable-image-search", "upload-image", "max-image-size", "image-upload-tooltip", "allowed-image-types", "expanded", "inline-thumbnail", "clearable"]),
+          x(ce, { name: "o-search-input-dropdown" }, {
+            default: u(() => [
+              A.value ? (m(), c("div", be, [
+                r(e.$slots, "dropdown", { keyword: o.modelValue }, () => [
+                  x(ve, {
+                    keyword: o.modelValue,
+                    "onestep-items": o.onestepItems,
+                    "onestep-title": o.onestepTitle,
+                    "suggest-items": o.suggestItems,
+                    "suggest-title": o.suggestTitle,
+                    "history-items": o.enableHistory ? E(p).items.value : [],
+                    "history-title": o.historyTitle,
+                    "hot-items": o.hotItems,
+                    "hot-title": o.hotTitle,
+                    "no-data-text": o.noDataText,
+                    "highlight-keyword": o.highlightKeyword,
+                    "hide-on-keyword": !0,
+                    "show-suggest-empty": o.showSuggestEmpty,
+                    "history-layout": "list",
+                    onOnestepClick: _,
+                    onSuggestClick: Z,
+                    onHistoryClick: ee,
+                    onHistoryRemove: se,
+                    onHistoryClear: oe,
+                    onHotClick: te
+                  }, z({ _: 2 }, [
+                    e.$slots["onestep-header"] ? {
+                      name: "onestep-header",
+                      fn: u((t) => [
+                        r(e.$slots, "onestep-header", h(f(t)), void 0, !0)
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    e.$slots["onestep-content"] ? {
+                      name: "onestep-content",
+                      fn: u((t) => [
+                        r(e.$slots, "onestep-content", h(f(t)), void 0, !0)
+                      ]),
+                      key: "1"
+                    } : void 0,
+                    e.$slots["suggest-header"] ? {
+                      name: "suggest-header",
+                      fn: u((t) => [
+                        r(e.$slots, "suggest-header", h(f(t)), void 0, !0)
+                      ]),
+                      key: "2"
+                    } : void 0,
+                    e.$slots["suggest-content"] ? {
+                      name: "suggest-content",
+                      fn: u((t) => [
+                        r(e.$slots, "suggest-content", h(f(t)), void 0, !0)
+                      ]),
+                      key: "3"
+                    } : void 0,
+                    e.$slots["history-header"] ? {
+                      name: "history-header",
+                      fn: u((t) => [
+                        r(e.$slots, "history-header", h(f(t)), void 0, !0)
+                      ]),
+                      key: "4"
+                    } : void 0,
+                    e.$slots["history-content"] ? {
+                      name: "history-content",
+                      fn: u((t) => [
+                        r(e.$slots, "history-content", h(f(t)), void 0, !0)
+                      ]),
+                      key: "5"
+                    } : void 0
+                  ]), 1032, ["keyword", "onestep-items", "onestep-title", "suggest-items", "suggest-title", "history-items", "history-title", "hot-items", "hot-title", "no-data-text", "highlight-keyword", "show-suggest-empty"])
+                ], !0)
+              ])) : P("", !0)
+            ]),
+            _: 3
+          })
+        ]),
+        (d = o.suggestList) != null && d.length ? (m(), c("div", Ce, [
+          r(e.$slots, "suggest-list", { items: o.suggestList }, () => [
+            $("span", Se, B(o.suggestListLabel ?? E(N)("search.suggestListLabel")), 1),
+            $("ul", He, [
+              (m(!0), c(H, null, F(o.suggestList, (t, i) => (m(), c("li", {
+                key: t + i,
+                class: "o-search-input-suggest-list-item",
+                onClick: (g) => le(t)
+              }, [
+                (m(!0), c(H, null, F(j(t), (g) => (m(), c(H, {
+                  key: g.text + String(g.em)
+                }, [
+                  g.em ? (m(), c("em", Te, B(g.text), 1)) : (m(), c(H, { key: 1 }, [
+                    he(B(g.text), 1)
+                  ], 64))
+                ], 64))), 128))
+              ], 8, Ue))), 128))
+            ])
+          ], !0)
+        ])) : P("", !0)
+      ], 2);
+    };
+  }
+});
+export {
+  Re as default
+};

package/dist/esm/components/search/composables/useImageSearch.mjs

@@ -0,0 +1,87 @@
+import { ref as g, onBeforeUnmount as R } from "vue";
+function O(a) {
+  const n = g(""), s = g(null), v = g(""), i = g(!1);
+  let d = null;
+  const U = (e) => {
+    var t, u, c, o;
+    const l = (t = a.allowedImageTypes) == null ? void 0 : t.value, r = l && l.length > 0 ? l.includes(e.type) : (u = e.type) == null ? void 0 : u.startsWith("image/");
+    return !e.type || !r ? ((c = a.onValidationError) == null || c.call(a, "type", e), !1) : a.maxImageSize.value > 0 && e.size > a.maxImageSize.value ? ((o = a.onValidationError) == null || o.call(a, "size", e), !1) : !0;
+  }, f = () => {
+    if (n.value)
+      try {
+        URL.revokeObjectURL(n.value);
+      } catch {
+      }
+    n.value = "", s.value = null, v.value = "", i.value = !1, d = null;
+  }, h = (e) => {
+    if (!e) {
+      s.value || f();
+      return;
+    }
+    if (v.value !== e) {
+      if (n.value && n.value.startsWith("blob:"))
+        try {
+          URL.revokeObjectURL(n.value);
+        } catch {
+        }
+      v.value = e, n.value = e, s.value = null;
+    }
+  }, m = (e) => {
+    var r, t;
+    if (!U(e)) return;
+    f(), s.value = e, n.value = URL.createObjectURL(e), (r = a.onUploadStart) == null || r.call(a, e);
+    const l = (t = a.uploadImage) == null ? void 0 : t.value;
+    l && (i.value = !0, d = Promise.resolve().then(() => l(e)).then((u) => {
+      var c;
+      u && s.value === e && (v.value = u, (c = a.onUploadSuccess) == null || c.call(a, u, e));
+    }).catch((u) => {
+      var c;
+      (c = a.onUploadError) == null || c.call(a, u, e);
+    }).finally(() => {
+      i.value = !1;
+    }));
+  }, y = (e) => {
+    var r;
+    const l = (r = e.clipboardData) == null ? void 0 : r.items;
+    if (l)
+      for (let t = 0; t < l.length; t++) {
+        const u = l[t];
+        if (u.type.startsWith("image/")) {
+          const c = u.getAsFile();
+          c && m(c);
+          break;
+        }
+      }
+  }, b = (e) => {
+    e.preventDefault(), e.stopPropagation();
+  }, k = (e) => {
+    var r, t;
+    e.preventDefault(), e.stopPropagation();
+    const l = (t = (r = e.dataTransfer) == null ? void 0 : r.files) == null ? void 0 : t[0];
+    l && l.type.startsWith("image/") && m(l);
+  }, I = (e) => {
+    var t;
+    const l = e.target, r = (t = l.files) == null ? void 0 : t[0];
+    r && m(r), l && (l.value = "");
+  }, L = (e) => {
+    e && (e.value = "", e.click());
+  }, P = () => d ?? Promise.resolve();
+  return R(f), {
+    previewUrl: n,
+    file: s,
+    uploadedUrl: v,
+    isUploading: i,
+    onPaste: y,
+    onDrop: k,
+    onDragOver: b,
+    onFileChange: I,
+    pickFile: L,
+    handleImageFile: m,
+    reset: f,
+    setExternalUrl: h,
+    awaitUpload: P
+  };
+}
+export {
+  O as useImageSearch
+};

package/dist/esm/components/search/composables/useKeywordHighlight.mjs

@@ -0,0 +1,18 @@
+const h = /[.*+?^${}()|[\]\\]/g;
+function r(t, c) {
+  const l = (c || "").trim();
+  if (!l) return [{ text: t, match: !1 }];
+  const a = l.replace(h, "\\$&"), i = new RegExp(a, "gi"), s = [];
+  let n = 0, e;
+  for (; (e = i.exec(t)) !== null; ) {
+    if (e.index === i.lastIndex) {
+      i.lastIndex++;
+      continue;
+    }
+    e.index > n && s.push({ text: t.slice(n, e.index), match: !1 }), s.push({ text: e[0], match: !0 }), n = e.index + e[0].length;
+  }
+  return n < t.length && s.push({ text: t.slice(n), match: !1 }), s;
+}
+export {
+  r as highlightKeywordParts
+};

package/dist/esm/components/search/composables/useSearchHistory.mjs

@@ -0,0 +1,39 @@
+import { ref as d, watch as p, onMounted as h } from "vue";
+function I(i) {
+  const { initial: n, storageKey: l, storeHistory: c, maxHistoryCount: s, onChange: o } = i, t = d([...n.value]), f = () => {
+    if (!(!c.value || typeof localStorage > "u"))
+      try {
+        t.value.length ? localStorage.setItem(l.value, JSON.stringify(t.value)) : localStorage.removeItem(l.value);
+      } catch {
+      }
+  }, u = (e) => {
+    t.value = e, f(), o == null || o(t.value);
+  }, v = () => {
+    if (!(!c.value || typeof localStorage > "u"))
+      try {
+        const e = localStorage.getItem(l.value);
+        if (!e) return;
+        const r = JSON.parse(e);
+        if (Array.isArray(r) && r.length) {
+          const a = Array.from(/* @__PURE__ */ new Set([...r, ...t.value]));
+          t.value = a.slice(0, s.value), o == null || o(t.value);
+        }
+      } catch {
+      }
+  }, m = (e) => {
+    const r = e == null ? void 0 : e.trim();
+    if (!r) return;
+    const a = [r, ...t.value.filter((S) => S !== r)];
+    a.length > s.value && (a.length = s.value), u(a);
+  }, y = (e) => {
+    u(t.value.filter((r) => r !== e));
+  }, g = () => {
+    u([]);
+  };
+  return p(n, (e) => {
+    e !== t.value && (t.value = [...e]);
+  }), h(v), { items: t, push: m, remove: y, clearAll: g };
+}
+export {
+  I as useSearchHistory
+};

package/dist/esm/components/search/index.mjs

@@ -0,0 +1,9 @@
+import t from "./OSearchInput.vue.mjs";
+const e = Object.assign(t, {
+  install(n) {
+    n.component("OSearchInput", t);
+  }
+});
+export {
+  e as OSearchInput
+};

package/dist/esm/components/search/internal/HighlightText.css

@@ -0,0 +1,12 @@
+.hover-icon-rotate .o-icon[data-v-2a99e23c] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-2a99e23c] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-highlight-text .is-match[data-v-2a99e23c] {
+  color: var(--o-color-primary1);
+  font-weight: 600;
+}

package/dist/esm/components/search/internal/HighlightText.vue.mjs

@@ -0,0 +1,7 @@
+import t from "./HighlightText.vue2.mjs";
+import './HighlightText.css';
+import o from "../../../_plugin-vue_export-helper.mjs";
+const i = /* @__PURE__ */ o(t, [["__scopeId", "data-v-2a99e23c"]]);
+export {
+  i as default
+};

package/dist/esm/components/search/internal/HighlightText.vue2.mjs

@@ -0,0 +1,22 @@
+import { defineComponent as l, computed as c, openBlock as e, createElementBlock as r, Fragment as i, renderList as p, normalizeClass as h, toDisplayString as m } from "vue";
+import { highlightKeywordParts as u } from "../composables/useKeywordHighlight.mjs";
+const d = { class: "o-search-highlight-text" }, y = /* @__PURE__ */ l({
+  __name: "HighlightText",
+  props: {
+    text: {},
+    keyword: {},
+    enabled: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const t = a, n = c(() => !t.enabled || !t.keyword ? [{ text: t.text, match: !1 }] : u(t.text, t.keyword));
+    return (x, f) => (e(), r("span", d, [
+      (e(!0), r(i, null, p(n.value, (o, s) => (e(), r("span", {
+        key: s,
+        class: h({ "is-match": o.match })
+      }, m(o.text), 3))), 128))
+    ]));
+  }
+});
+export {
+  y as default
+};