@opendesign-plus/components 0.0.1-rc.90 → 0.0.1-rc.91

package/dist/treeshaking/components/search-result/OSearchResult.css

@@ -1,101 +1,165 @@
-.hover-icon-rotate .o-icon[data-v-1452b538] {
+.hover-icon-rotate .o-icon[data-v-9d8dd556] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-1452b538] {
+.hover-icon-rotate:hover .o-icon[data-v-9d8dd556] {
     transform: rotate(-180deg);
 }
 }
-.o-search-result[data-v-1452b538] {
+.o-search-result[data-v-9d8dd556] {
+  --o-search-result-page-header-hight: 0px;
+  --o-search-result-page-footer-hight: 0px;
   --o-search-result-radius: var(--o-radius-xs);
-}
-.o-search-result .o-search-result-content-wrap[data-v-1452b538] {
-  display: flex;
-  max-width: var(--grid-20);
-  padding: 40px 0 72px;
-  margin: 0 auto;
+  --o-search-result-header-height: 280px;
+  --o-search-content-padding-top: 40px;
+  --o-search-content-padding-bottom: 72px;
+  --o-search-content-padding-left: 0px;
+  --o-search-content-padding-right: 0px;
+  --o-search-content-min-height: calc(
+    100vh - var(--o-search-result-page-header-hight) - var(--o-search-result-page-footer-hight) - var(--o-search-result-header-height) - var(
+        --o-search-content-padding-top
+      ) - var(--o-search-content-padding-bottom)
+  );
+  background-color: var(--o-color-fill2);
 }
 @media (max-width: 1680px) {
-.o-search-result .o-search-result-content-wrap[data-v-1452b538] {
-    padding: 24px 0 56px;
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 220px;
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 56px;
 }
 }
 @media (max-width: 1200px) {
-.o-search-result .o-search-result-content-wrap[data-v-1452b538] {
-    padding: 16px 32px 40px;
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 180px;
+    --o-search-content-padding-top: 16px;
+    --o-search-content-padding-bottom: 40px;
+    --o-search-content-padding-left: 32px;
+    --o-search-content-padding-right: 32px;
 }
 }
 @media (max-width: 840px) {
-.o-search-result .o-search-result-content-wrap[data-v-1452b538] {
-    padding: 24px 32px 40px;
+.o-search-result[data-v-9d8dd556] {
+    --o-search-result-header-height: 90px;
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 40px;
 }
 }
 @media (max-width: 600px) {
-.o-search-result .o-search-result-content-wrap[data-v-1452b538] {
-    padding: 24px;
-    padding-bottom: 32px;
+.o-search-result[data-v-9d8dd556] {
+    --o-search-content-padding-top: 24px;
+    --o-search-content-padding-bottom: 32px;
+    --o-search-content-padding-left: 24px;
+    --o-search-content-padding-right: 24px;
+}
+}
+@media (max-width: 840px) {
+.o-search-result.is-hide-tab-mobile[data-v-9d8dd556] {
+    --o-search-result-header-height: 56px;
+}
 }
+.o-search-result .o-search-result-content-wrap[data-v-9d8dd556] {
+  display: flex;
+  max-width: var(--grid-20);
+  min-height: var(--o-search-content-min-height);
+  padding: var(--o-search-content-padding-top) var(--o-search-content-padding-right) var(--o-search-content-padding-bottom) var(--o-search-content-padding-left);
+  margin: 0 auto;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-9d8dd556] {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: var(--o-search-content-min-height);
   padding-right: var(--grid-column-gutter);
   border-right: 1px solid var(--o-color-control4);
 }
 @media (max-width: 1200px) {
-.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-left-content[data-v-9d8dd556] {
     border-right: none;
+    padding-right: 0;
 }
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-9d8dd556] {
   width: var(--grid-5);
   padding-left: var(--grid-column-gutter);
 }
 @media (max-width: 1680px) {
-.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-right-content[data-v-9d8dd556] {
     width: var(--grid-6);
 }
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] {
   margin-top: 24px;
   margin-bottom: 32px;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-1452b538] .o-skeleton-item .o-skeleton-line:nth-child(1) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(1) {
   width: 52%;
   height: 28px;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-1452b538] .o-skeleton-item .o-skeleton-line:nth-child(2) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(2) {
   height: 48px;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-1452b538] .o-skeleton-item .o-skeleton-line:nth-child(3) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-loading[data-v-9d8dd556] .o-skeleton-item .o-skeleton-line:nth-child(3) {
   width: 38%;
   height: 18px;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-divider[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-content-skeleton-divider[data-v-9d8dd556] {
   margin: 16px 0;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-version-select[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-version-select[data-v-9d8dd556] {
   width: 320px;
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] {
+  flex: 1;
   padding: 24px 0;
 }
 @media (max-width: 1680px) {
-.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] {
     padding: 16px 0;
 }
 }
-.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:first-child) {
+  padding-top: 16px;
+  border-top: 1px solid var(--o-color-control4);
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:first-child) {
+    padding-top: 12px;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:last-child) {
+  padding-bottom: 16px;
+}
+@media (max-width: 1680px) {
+.o-search-result .o-search-result-content-wrap .o-search-result-content[data-v-9d8dd556] >  *:not(:last-child) {
+    padding-bottom: 12px;
+}
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-content.is-empty[data-v-9d8dd556] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
   display: flex;
   justify-content: flex-end;
   margin-top: 32px;
 }
 @media (max-width: 1680px) {
-.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
     margin-top: 24px;
 }
 }
 @media (max-width: 1200px) {
-.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-1452b538] {
+.o-search-result .o-search-result-content-wrap .o-search-result-pagination[data-v-9d8dd556] {
     margin-top: 16px;
 }
+}
+.o-search-result .o-search-result-content-wrap .o-search-result-mb-bottom-text[data-v-9d8dd556] {
+  margin-top: 16px;
+  color: var(--o-color-info3);
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
 }

package/dist/treeshaking/components/search-result/OSearchResult.vue.d.ts

@@ -11,6 +11,10 @@ type __VLS_Props = {
         searchFlag: boolean;
         feedbackText: string;
     }) => Promise<boolean>;
+    noMore: boolean;
+    scrollContainer?: string | HTMLElement;
+    bottomOffset?: number;
+    hideTabOnMobile?: boolean;
 };
 type __VLS_PublicProps = {
     'version'?: SelectValueT;
@@ -35,13 +39,20 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     "update:pageSize": (value: number) => any;
     "update:page": (value: number) => any;
     "update:version": (value: SelectValueT) => any;
+} & {
+    "reach-bottom": () => any;
+    "click-relative-search-item": (item: OSearchRelativeItemT) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:pageSize"?: ((value: number) => any) | undefined;
     "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onReach-bottom"?: (() => any) | undefined;
+    "onClick-relative-search-item"?: ((item: OSearchRelativeItemT) => any) | undefined;
     "onUpdate:version"?: ((value: SelectValueT) => any) | undefined;
 }>, {
     total: number;
     pageSizes: number[];
+    bottomOffset: number;
+    hideTabOnMobile: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/treeshaking/components/search-result/OSearchResult.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OSearchResult.vue2.mjs";
 import './OSearchResult.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OSearchResult = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1452b538"]]);
+const _OSearchResult = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9d8dd556"]]);
 export {
   _OSearchResult as default
 };

package/dist/treeshaking/components/search-result/OSearchResult.vue2.mjs

@@ -1,16 +1,20 @@
-import { defineComponent, useModel, openBlock, createElementBlock, createElementVNode, renderSlot, unref, createBlock, withCtx, Fragment, renderList, createCommentVNode, createVNode, mergeModels } from "vue";
+import { defineComponent, useModel, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, unref, createBlock, withCtx, Fragment, renderList, createCommentVNode, createVNode, createTextVNode, toDisplayString, mergeModels } from "vue";
+import { useThrottleFn } from "@vueuse/core";
 import { isArray, OSelect, OOption, OSkeleton, OSkeletonText, ODivider, OPagination } from "@opensig/opendesign";
 import { useScreen } from "@opendesign-plus/composables";
+import { useI18n } from "../../i18n/index.mjs";
 import OSearchResultEmpty from "./components/OSearchResultEmpty.vue.mjs";
 import OSearchResultFeedback from "./components/OSearchResultFeedback.vue.mjs";
 import OSearchResultFeedbackBanner from "./components/OSearchResultFeedbackBanner.vue.mjs";
 import OSearchResultRelative from "./components/OSearchResultRelative.vue.mjs";
-const _hoisted_1 = { class: "o-search-result" };
-const _hoisted_2 = { class: "o-search-result-content-wrap" };
-const _hoisted_3 = { class: "o-search-result-left-content" };
-const _hoisted_4 = { class: "o-search-result-content-skeleton-loading" };
-const _hoisted_5 = { class: "o-search-result-content" };
-const _hoisted_6 = { class: "o-search-result-right-content" };
+const _hoisted_1 = { class: "o-search-result-content-wrap" };
+const _hoisted_2 = { class: "o-search-result-left-content" };
+const _hoisted_3 = { class: "o-search-result-content-skeleton-loading" };
+const _hoisted_4 = {
+  key: 1,
+  class: "o-search-result-mb-bottom-text"
+};
+const _hoisted_5 = { class: "o-search-result-right-content" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OSearchResult",
   props: /* @__PURE__ */ mergeModels({
@@ -20,7 +24,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     relativeItems: {},
     total: { default: 0 },
     pageSizes: { default: () => [10, 20, 50] },
-    submitFeedback: {}
+    submitFeedback: {},
+    noMore: { type: Boolean },
+    scrollContainer: {},
+    bottomOffset: { default: 30 },
+    hideTabOnMobile: { type: Boolean, default: false }
   }, {
     "version": {},
     "versionModifiers": {},
@@ -29,16 +37,62 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "pageSize": { default: 10 },
     "pageSizeModifiers": {}
   }),
-  emits: ["update:version", "update:page", "update:pageSize"],
-  setup(__props) {
+  emits: /* @__PURE__ */ mergeModels(["click-relative-search-item", "reach-bottom"], ["update:version", "update:page", "update:pageSize"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
     const versionVal = useModel(__props, "version");
     const page = useModel(__props, "page");
     const pageSize = useModel(__props, "pageSize");
+    const emit = __emit;
     const { lePad, lePadV } = useScreen();
+    const { t } = useI18n();
+    let scrollEl = null;
+    const getScrollEl = () => {
+      if (!props.scrollContainer) {
+        return window;
+      }
+      if (typeof props.scrollContainer === "string") {
+        return document.querySelector(props.scrollContainer) ?? window;
+      }
+      return props.scrollContainer;
+    };
+    const onScroll = useThrottleFn(() => {
+      if (!lePadV.value || props.loading || props.noMore) {
+        return;
+      }
+      const el = scrollEl;
+      if (!el) {
+        return;
+      }
+      const isWin = el === window;
+      const scrollTop = isWin ? window.scrollY : el.scrollTop;
+      const clientHeight = isWin ? window.innerHeight : el.clientHeight;
+      const scrollHeight = isWin ? document.documentElement.scrollHeight : el.scrollHeight;
+      if (scrollTop + clientHeight >= scrollHeight - props.bottomOffset) {
+        emit("reach-bottom");
+      }
+    }, 200);
+    const bindScroll = () => {
+      unbindScroll();
+      if (!props.scrollContainer) {
+        return;
+      }
+      scrollEl = getScrollEl();
+      scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    };
+    const unbindScroll = () => {
+      scrollEl == null ? void 0 : scrollEl.removeEventListener("scroll", onScroll);
+      scrollEl = null;
+    };
+    watch(() => props.scrollContainer, bindScroll);
+    onMounted(bindScroll);
+    onUnmounted(unbindScroll);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["o-search-result", { "is-hide-tab-mobile": __props.hideTabOnMobile }])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
             renderSlot(_ctx.$slots, "content-header", {}, () => [
               unref(isArray)(__props.versions) && __props.versions.length ? (openBlock(), createBlock(unref(OSelect), {
                 key: 0,
@@ -61,10 +115,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], true),
             createVNode(unref(OSkeleton), {
               animation: "",
-              loading: __props.loading
+              loading: __props.loading && (!unref(lePadV) || page.value === 1)
             }, {
               template: withCtx(() => [
-                createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_3, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(7, (_, i) => {
                     return openBlock(), createElementBlock(Fragment, { key: i }, [
                       createVNode(unref(OSkeletonText), { rows: 3 }),
@@ -77,14 +131,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])
               ]),
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", {
+                  class: normalizeClass(["o-search-result-content", { "is-empty": !unref(isArray)(__props.items) || __props.items.length === 0 }])
+                }, [
                   !unref(isArray)(__props.items) || __props.items.length === 0 ? renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
                     createVNode(OSearchResultEmpty)
                   ], true) : renderSlot(_ctx.$slots, "list", {
                     key: 1,
                     items: __props.items
                   }, void 0, true)
-                ])
+                ], 2)
               ]),
               _: 3
             }, 8, ["loading"]),
@@ -97,17 +153,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onUpdate:pageSize": _cache[2] || (_cache[2] = ($event) => pageSize.value = $event),
               total: __props.total,
               "page-sizes": __props.pageSizes,
+              layout: ["total", "pagesize", "pager", "jumper"],
               class: "o-search-result-pagination"
-            }, null, 8, ["page", "page-size", "total", "page-sizes"])) : createCommentVNode("", true)
+            }, null, 8, ["page", "page-size", "total", "page-sizes"])) : createCommentVNode("", true),
+            unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              __props.noMore ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(unref(t)("search.reachBottom")), 1)
+              ], 64)) : !__props.loading && page.value >= 1 && __props.items.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(unref(t)("search.loadMore")), 1)
+              ], 64)) : __props.loading && page.value > 1 && __props.items.length ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                createTextVNode(toDisplayString(unref(t)("search.loading")), 1)
+              ], 64)) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true)
           ]),
           !unref(lePad) ? renderSlot(_ctx.$slots, "right", { key: 0 }, () => [
-            createElementVNode("div", _hoisted_6, [
-              createVNode(OSearchResultRelative, { "relative-items": __props.relativeItems }, null, 8, ["relative-items"]),
+            createElementVNode("div", _hoisted_5, [
+              createVNode(OSearchResultRelative, {
+                "relative-items": __props.relativeItems,
+                onClickRelativeSearchItem: _cache[3] || (_cache[3] = ($event) => emit("click-relative-search-item", $event))
+              }, null, 8, ["relative-items"]),
               createVNode(OSearchResultFeedback, { submit: __props.submitFeedback }, null, 8, ["submit"])
             ])
           ], true) : createCommentVNode("", true)
         ])
-      ]);
+      ], 2);
     };
   }
 });

package/dist/treeshaking/components/search-result/OSearchResultHeader.css

@@ -1,24 +1,24 @@
-.hover-icon-rotate .o-icon[data-v-0faab97b] {
+.hover-icon-rotate .o-icon[data-v-018008e1] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-0faab97b] {
+.hover-icon-rotate:hover .o-icon[data-v-018008e1] {
     transform: rotate(-180deg);
 }
 }
-.o-search-result-header[data-v-0faab97b] {
-  background-image: var(--v5b9f5904);
+.o-search-result-header[data-v-018008e1] {
+  background-image: var(--v1c86e469);
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-size: cover;
 }
 @media (max-width: 840px) {
-.o-search-result-header[data-v-0faab97b] {
+.o-search-result-header[data-v-018008e1] {
     background-image: none;
     background-color: var(--o-color-fill2);
 }
 }
-.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-content[data-v-018008e1] {
   position: relative;
   height: 280px;
   padding-top: 80px;
@@ -26,13 +26,13 @@
   margin: 0 auto;
 }
 @media (max-width: 1680px) {
-.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-content[data-v-018008e1] {
     height: 220px;
     padding-top: 52px;
 }
 }
 @media (max-width: 1200px) {
-.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-content[data-v-018008e1] {
     height: 180px;
     padding-top: 34px;
     padding-left: 32px;
@@ -40,36 +40,79 @@
 }
 }
 @media (max-width: 840px) {
-.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
-    display: flex;
-    flex-direction: column;
-    height: auto;
+.o-search-result-header .o-search-result-header-content[data-v-018008e1] {
+    height: 90px;
     padding: 0;
-    max-width: none;
+    box-shadow: var(--o-shadow-2);
 }
 }
-.o-search-result-header .o-search-result-header-back[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-back[data-v-018008e1] {
   display: none;
 }
-.o-search-result-header .o-search-result-header-search-btn[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-search-btn[data-v-018008e1] {
   display: none;
 }
-.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] {
   max-width: var(--grid-15);
+  background-color: transparent;
+}
+.o-search-result-header .o-search-result-header-input.is-focus[data-v-018008e1] {
+  z-index: 100;
 }
 @media (min-width: ) {
-.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] {
     max-width: var(--grid-10);
 }
 }
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] .o-input.o_box-large {
+  --_box-height: 40px;
+}
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] .o-search-image-input-icon {
+  font-size: 24px;
+}
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] .o-search-image-input.is-expanded {
+  background-color: var(--o-color-fill2);
+}
+.o-search-result-header .o-search-result-header-tab-wrap[data-v-018008e1] {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+@media (max-width: 1200px) {
+.o-search-result-header .o-search-result-header-tab-wrap[data-v-018008e1] {
+    width: calc(100% - 64px);
+}
+}
+@media (max-width: 840px) {
+.o-search-result-header .o-search-result-header-tab-wrap[data-v-018008e1] {
+    width: 100%;
+    padding: 0 32px;
+}
+}
+@media (max-width: 600px) {
+.o-search-result-header .o-search-result-header-tab-wrap[data-v-018008e1] {
+    padding: 0 24px;
+}
+}
+.o-search-result-header .o-search-result-header-tab-wrap .o-search-result-header-tab[data-v-018008e1] {
+  --tab-nav-justify: start;
+}
+.o-search-result-header .o-search-result-header-tab-wrap .o-search-result-header-tab[data-v-018008e1] .o-tab-nav-list {
+  --tab-nav-gap: 40px;
+}
+@media (max-width: 1680px) {
+.o-search-result-header .o-search-result-header-tab-wrap .o-search-result-header-tab[data-v-018008e1] .o-tab-nav-list {
+    --tab-nav-gap: 16px;
+}
+}
 @media (max-width: 840px) {
-.o-search-result-header .o-search-result-header-input-row[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-input-row[data-v-018008e1] {
     display: flex;
     align-items: center;
-    gap: 24px;
+    gap: 16px;
     padding: 8px 32px;
 }
-.o-search-result-header .o-search-result-header-back[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-back[data-v-018008e1] {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -78,15 +121,15 @@
     background: none;
     cursor: pointer;
 }
-.o-search-result-header .o-search-result-header-back .o-icon[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-back .o-icon[data-v-018008e1] {
     font-size: 24px;
 }
-.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-input[data-v-018008e1] {
     flex: 1;
     max-width: none;
     margin: 0;
 }
-.o-search-result-header .o-search-result-header-search-btn[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-search-btn[data-v-018008e1] {
     display: block;
     flex-shrink: 0;
     font-size: 16px;
@@ -96,30 +139,24 @@
 }
 }
 @media (max-width: 600px) {
-.o-search-result-header .o-search-result-header-input-row[data-v-0faab97b] {
+.o-search-result-header .o-search-result-header-input-row[data-v-018008e1] {
     padding: 8px 24px;
 }
 }
-.o-search-result-header .o-search-result-header-tab-wrap[data-v-0faab97b] {
-  position: absolute;
-  bottom: 0;
-}
 @media (max-width: 840px) {
-.o-search-result-header .o-search-result-header-tab-wrap[data-v-0faab97b] {
-    position: static;
-    padding: 8px 32px 0;
-    overflow-x: auto;
-    z-index: 0;
-}
-.o-search-result-header .o-search-result-header-tab-wrap[data-v-0faab97b] .o-tab-navs {
-    flex-wrap: nowrap;
+.o-search-result-header.is-responsive[data-v-018008e1] {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 999;
 }
 }
-@media (max-width: 600px) {
-.o-search-result-header .o-search-result-header-tab-wrap[data-v-0faab97b] {
-    padding: 8px 24px;
+@media (max-width: 840px) {
+.o-search-result-header.is-hide-tab-mobile .o-search-result-header-content[data-v-018008e1] {
+    height: 56px;
 }
+.o-search-result-header.is-hide-tab-mobile .o-search-result-header-tab-wrap[data-v-018008e1] {
+    display: none;
 }
-.o-search-result-header .o-search-result-header-tab-wrap .o-search-result-header-tab[data-v-0faab97b] {
-  --tab-nav-justify: start;
 }

package/dist/treeshaking/components/search-result/OSearchResultHeader.vue.d.ts

@@ -5,9 +5,12 @@ type __VLS_Props = {
     bg?: string;
     tabs?: OSearchItemT[];
     inputProps?: OSearchInputPropsT;
+    responsive?: boolean;
+    hideTabOnMobile?: boolean;
 };
 type __VLS_PublicProps = {
     'searchInput'?: string;
+    'imageUrl'?: string;
     'tab'?: string | number;
 } & __VLS_Props;
 declare function __VLS_template(): {
@@ -650,15 +653,20 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     search: (payload: OSearchPayload) => any;
+    "update:imageUrl": (value: string) => any;
     back: () => any;
     "update:searchInput": (value: string) => any;
     "update:tab": (value: string | number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSearch?: ((payload: OSearchPayload) => any) | undefined;
+    "onUpdate:imageUrl"?: ((value: string) => any) | undefined;
     onBack?: (() => any) | undefined;
     "onUpdate:searchInput"?: ((value: string) => any) | undefined;
     "onUpdate:tab"?: ((value: string | number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    responsive: boolean;
+    hideTabOnMobile: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     searchInputRef: ({
         $: import('vue').ComponentInternalInstance;
         $data: {};

package/dist/treeshaking/components/search-result/OSearchResultHeader.vue.mjs

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