@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/dist/treeshaking/components/header-search/OHeaderSearch.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./OHeaderSearch.vue2.mjs";
+import './OHeaderSearch.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OHeaderSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a97b8e7c"]]);
+export {
+  _OHeaderSearch as default
+};

package/dist/treeshaking/components/header-search/OHeaderSearch.vue2.mjs

@@ -0,0 +1,419 @@
+import { defineComponent, computed, ref, toRef, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, unref, withCtx, createVNode, createCommentVNode, createSlots, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, Transition } from "vue";
+import { OIcon } from "@opensig/opendesign";
+import { useDebounceFn, onClickOutside } from "@vueuse/core";
+import { useScreen } from "@opendesign-plus/composables";
+import SearchImageInput from "../search/internal/SearchImageInput.vue.mjs";
+import SearchPanel from "../search/internal/SearchPanel.vue.mjs";
+import { useSearchHistory } from "../search/composables/useSearchHistory.mjs";
+import { useI18n } from "../../i18n/index.mjs";
+import IconSearch from "../../_virtual/icon-header-search.mjs";
+import IconBack from "../../_virtual/icon-header-back.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "o-header-search-drawer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OHeaderSearch",
+  props: {
+    modelValue: { default: "" },
+    placeholder: {},
+    expandedPlaceholder: {},
+    expandDirection: { default: "left" },
+    clearable: { type: Boolean, default: true },
+    historyItems: { default: () => [] },
+    maxHistoryCount: { default: 6 },
+    storeHistory: { type: Boolean, default: false },
+    historyTitle: {},
+    storageKey: { default: "search-history" },
+    hotItems: { default: () => [] },
+    hotTitle: {},
+    recommendItems: { default: () => [] },
+    searchUrl: {},
+    searchUrlOpenBlank: { type: Boolean, default: true },
+    searchTextMobile: {},
+    imagePlaceholder: {},
+    enableImageSearch: { type: Boolean, default: false },
+    imageUrl: { default: "" },
+    uploadImage: {},
+    maxImageSize: { default: 10 * 1024 * 1024 },
+    imageUploadTooltip: {},
+    suggestItems: { default: () => [] },
+    onestepItems: { default: () => [] },
+    suggestTitle: {},
+    onestepTitle: {},
+    noDataText: {},
+    highlightKeyword: { type: Boolean, default: true },
+    debounce: { default: 300 },
+    autoSaveHistory: { type: Boolean, default: true },
+    showSuggestEmpty: { type: Boolean, default: true },
+    allowedImageTypes: {},
+    mobile: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:historyItems", "update:imageUrl", "focus", "blur", "input", "clear", "search", "recommend-click", "onestep-click", "history-click", "hot-click", "hot-refresh", "delete-history", "delete-history-item", "image-upload-start", "image-upload-success", "image-upload-error", "image-validate-error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { lePadV } = useScreen();
+    const { t } = useI18n();
+    const isMobileMode = computed(() => props.mobile === true || lePadV.value);
+    const wrapperRef = ref(null);
+    const inputRef = ref();
+    const isShowDrawer = ref(false);
+    const internalImageStaged = ref(false);
+    const internalImageUrl = ref("");
+    const hasImage = computed(() => !!props.imageUrl || internalImageStaged.value);
+    const innerValue = computed({
+      get: () => props.modelValue,
+      set: (val) => emit("update:modelValue", val)
+    });
+    const historyItemsRef = toRef(props, "historyItems");
+    const storageKeyRef = toRef(props, "storageKey");
+    const storeHistoryRef = toRef(props, "storeHistory");
+    const maxHistoryRef = toRef(props, "maxHistoryCount");
+    const history = useSearchHistory({
+      initial: historyItemsRef,
+      storageKey: storageKeyRef,
+      storeHistory: storeHistoryRef,
+      maxHistoryCount: maxHistoryRef,
+      onChange: (items) => emit("update:historyItems", items)
+    });
+    const placeholder = computed(() => {
+      if (props.imageUrl) {
+        return props.imagePlaceholder ?? t("search.extendedPlaceholder");
+      }
+      if (isShowDrawer.value && props.enableImageSearch) {
+        return props.imagePlaceholder ?? t("search.imagePlaceholder");
+      }
+      if (isShowDrawer.value) {
+        return props.expandedPlaceholder ?? t("search.expandedPlaceholder");
+      }
+      return props.placeholder ?? t("search.placeholder");
+    });
+    const emitInputDebounced = useDebounceFn((val) => emit("input", val), () => props.debounce);
+    watch(innerValue, (val) => emitInputDebounced(val));
+    onClickOutside(wrapperRef, () => {
+      if (isMobileMode.value) return;
+      closeDrawer();
+    });
+    const openDrawer = () => {
+      isShowDrawer.value = true;
+    };
+    const closeDrawer = () => {
+      if (isMobileMode.value) return;
+      isShowDrawer.value = false;
+    };
+    const handleFocus = () => {
+      openDrawer();
+      emit("focus");
+    };
+    const handleBlur = () => {
+      emit("blur");
+    };
+    const runSearch = async (overrideKeyword) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_b = (_a = inputRef.value) == null ? void 0 : _a.getIsUploading) == null ? void 0 : _b.call(_a)) {
+        await ((_d = (_c = inputRef.value).awaitUpload) == null ? void 0 : _d.call(_c));
+      }
+      const keyword = overrideKeyword !== void 0 ? overrideKeyword.trim() : innerValue.value.trim();
+      const imageUrl = internalImageUrl.value || ((_f = (_e = inputRef.value) == null ? void 0 : _e.getUploadedUrl) == null ? void 0 : _f.call(_e)) || props.imageUrl;
+      if (!keyword && !imageUrl) return;
+      if (props.autoSaveHistory && keyword) {
+        history.push(keyword);
+      }
+      emit("search", { keyword, imageUrl: imageUrl || void 0 });
+      (_h = (_g = inputRef.value) == null ? void 0 : _g.blur) == null ? void 0 : _h.call(_g);
+      isShowDrawer.value = false;
+      if (props.searchUrl) {
+        const params = new URLSearchParams();
+        if (keyword) params.set("q", keyword);
+        if (imageUrl) params.set("imageUrl", imageUrl);
+        const sep = props.searchUrl.includes("?") ? "&" : "?";
+        const url = `${props.searchUrl}${sep}${params.toString()}`;
+        if (typeof window !== "undefined") {
+          window.open(url, props.searchUrlOpenBlank ? "_blank" : "_self", props.searchUrlOpenBlank ? "noopener,noreferrer" : "");
+        }
+      }
+    };
+    const handleClear = () => {
+      var _a, _b;
+      innerValue.value = "";
+      emit("clear");
+      (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    };
+    const handleSuggestClick = (item) => {
+      emit("recommend-click", item);
+      innerValue.value = item.key;
+      runSearch(item.key ?? "");
+    };
+    const handleRecommendClick = (val) => {
+      emit("recommend-click", val);
+      runSearch(val);
+    };
+    const handleOnestepClick = (item) => {
+      emit("onestep-click", item);
+      if (item.path && typeof window !== "undefined") {
+        window.open(item.path, "_blank", "noopener,noreferrer");
+      }
+    };
+    const handleHistoryClick = (val) => {
+      emit("history-click", val);
+      runSearch(val);
+    };
+    const handleHotClick = (val) => {
+      emit("hot-click", val);
+      runSearch(val);
+    };
+    const handleHistoryRemove = (val) => {
+      history.remove(val);
+      emit("delete-history-item", val);
+    };
+    const handleHistoryClear = () => {
+      const removed = [...history.items.value];
+      history.clearAll();
+      emit("delete-history", removed);
+    };
+    const handleBack = () => {
+      innerValue.value = "";
+      internalImageStaged.value = false;
+      emit("update:imageUrl", "");
+      isShowDrawer.value = false;
+    };
+    const handleImageUploadStart = (file) => {
+      internalImageStaged.value = true;
+      internalImageUrl.value = "";
+      emit("image-upload-start", file);
+    };
+    const handleImageUploadSuccess = (url, file) => {
+      internalImageUrl.value = url;
+      emit("update:imageUrl", url);
+      emit("image-upload-success", url, file);
+    };
+    const handleImageClear = () => {
+      internalImageStaged.value = false;
+      internalImageUrl.value = "";
+      emit("update:imageUrl", "");
+    };
+    const showPanel = computed(() => {
+      if (!isShowDrawer.value) return false;
+      if (hasImage.value) return false;
+      return true;
+    });
+    __expose({
+      focus: () => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      },
+      blur: () => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
+      },
+      open: openDrawer,
+      close: closeDrawer,
+      search: runSearch
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["o-header-search", { "is-mobile-mode": isMobileMode.value }])
+      }, [
+        createElementVNode("div", {
+          ref_key: "wrapperRef",
+          ref: wrapperRef,
+          class: normalizeClass(["o-header-search-pos", {
+            "is-pc": !isMobileMode.value,
+            "is-mobile": isMobileMode.value,
+            "is-left": __props.expandDirection === "left",
+            "is-right": __props.expandDirection === "right",
+            "is-focus": isShowDrawer.value
+          }])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["o-header-search-row", { "is-focus": isShowDrawer.value }])
+          }, [
+            isMobileMode.value && isShowDrawer.value ? (openBlock(), createBlock(unref(OIcon), {
+              key: 0,
+              class: "o-header-search-back-icon",
+              onClick: handleBack
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(IconBack))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            createVNode(SearchImageInput, {
+              ref_key: "inputRef",
+              ref: inputRef,
+              modelValue: innerValue.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+              "image-url": __props.imageUrl,
+              placeholder: placeholder.value,
+              "enable-image-search": __props.enableImageSearch,
+              "upload-image": __props.uploadImage,
+              "max-image-size": __props.maxImageSize,
+              "image-upload-tooltip": __props.imageUploadTooltip,
+              clearable: __props.clearable && isShowDrawer.value,
+              expanded: isShowDrawer.value && hasImage.value,
+              "allowed-image-types": __props.allowedImageTypes,
+              size: "medium",
+              class: normalizeClass(["o-header-search-input", { "is-collapsed": !isShowDrawer.value }]),
+              "onUpdate:imageUrl": _cache[1] || (_cache[1] = (url) => emit("update:imageUrl", url)),
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onEnter: runSearch,
+              onClear: handleClear,
+              onImageClear: handleImageClear,
+              onImageUploadStart: handleImageUploadStart,
+              onImageUploadSuccess: handleImageUploadSuccess,
+              onImageUploadError: _cache[2] || (_cache[2] = (error, file) => emit("image-upload-error", error, file)),
+              onImageValidateError: _cache[3] || (_cache[3] = (reason, file) => emit("image-validate-error", reason, file))
+            }, createSlots({
+              prefix: withCtx(() => [
+                renderSlot(_ctx.$slots, "input-prefix", {}, void 0, true)
+              ]),
+              suffix: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "input-suffix", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots["image-preview"] ? {
+                name: "preview",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "image-preview", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["modelValue", "image-url", "placeholder", "enable-image-search", "upload-image", "max-image-size", "image-upload-tooltip", "clearable", "expanded", "allowed-image-types", "class"]),
+            isMobileMode.value && isShowDrawer.value ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: "o-header-search-text",
+              onClick: runSearch
+            }, toDisplayString(__props.searchTextMobile ?? unref(t)("search")), 1)) : createCommentVNode("", true)
+          ], 2),
+          createVNode(Transition, { name: "o-header-search-drawer" }, {
+            default: withCtx(() => [
+              showPanel.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "drawer", {
+                  recommendItems: __props.recommendItems,
+                  historyItems: unref(history).items.value,
+                  hotItems: __props.hotItems,
+                  suggestItems: __props.suggestItems,
+                  onestepItems: __props.onestepItems,
+                  keyword: __props.modelValue
+                }, () => [
+                  createVNode(SearchPanel, {
+                    keyword: __props.modelValue,
+                    "onestep-items": __props.onestepItems,
+                    "onestep-title": __props.onestepTitle,
+                    "suggest-items": __props.suggestItems,
+                    "suggest-title": __props.suggestTitle,
+                    "recommend-items": __props.recommendItems,
+                    "history-items": unref(history).items.value,
+                    "history-title": __props.historyTitle,
+                    "hot-items": __props.hotItems,
+                    "hot-title": __props.hotTitle,
+                    "no-data-text": __props.noDataText,
+                    "highlight-keyword": __props.highlightKeyword,
+                    "hide-on-keyword": true,
+                    "show-suggest-empty": __props.showSuggestEmpty,
+                    onOnestepClick: handleOnestepClick,
+                    onSuggestClick: handleSuggestClick,
+                    onRecommendClick: handleRecommendClick,
+                    onHistoryClick: handleHistoryClick,
+                    onHistoryRemove: handleHistoryRemove,
+                    onHistoryClear: handleHistoryClear,
+                    onHotClick: handleHotClick,
+                    onHotRefresh: _cache[4] || (_cache[4] = ($event) => emit("hot-refresh"))
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots["recommend-header"] ? {
+                      name: "recommend-header",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "recommend-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.$slots["recommend-content"] ? {
+                      name: "recommend-content",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "recommend-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "1"
+                    } : void 0,
+                    _ctx.$slots["onestep-header"] ? {
+                      name: "onestep-header",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "onestep-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "2"
+                    } : void 0,
+                    _ctx.$slots["onestep-content"] ? {
+                      name: "onestep-content",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "onestep-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "3"
+                    } : void 0,
+                    _ctx.$slots["suggest-header"] ? {
+                      name: "suggest-header",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "suggest-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "4"
+                    } : void 0,
+                    _ctx.$slots["suggest-content"] ? {
+                      name: "suggest-content",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "suggest-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "5"
+                    } : void 0,
+                    _ctx.$slots["history-header"] ? {
+                      name: "history-header",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "history-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "6"
+                    } : void 0,
+                    _ctx.$slots["history-content"] ? {
+                      name: "history-content",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "history-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "7"
+                    } : void 0,
+                    _ctx.$slots["hot-header"] ? {
+                      name: "hot-header",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "hot-header", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "8"
+                    } : void 0,
+                    _ctx.$slots["hot-content"] ? {
+                      name: "hot-content",
+                      fn: withCtx((slotProps) => [
+                        renderSlot(_ctx.$slots, "hot-content", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+                      ]),
+                      key: "9"
+                    } : void 0
+                  ]), 1032, ["keyword", "onestep-items", "onestep-title", "suggest-items", "suggest-title", "recommend-items", "history-items", "history-title", "hot-items", "hot-title", "no-data-text", "highlight-keyword", "show-suggest-empty"])
+                ], true)
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 2),
+        isMobileMode.value ? (openBlock(), createBlock(unref(OIcon), {
+          key: 0,
+          class: "o-header-search-mobile-icon",
+          onClick: openDrawer
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(IconSearch))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};