@opendesign-plus-test/components 0.0.1-rc.220 → 0.0.1-rc.222

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

@@ -0,0 +1,116 @@
+import { defineComponent, useModel, openBlock, createElementBlock, createElementVNode, renderSlot, unref, createBlock, withCtx, Fragment, renderList, createCommentVNode, createVNode, mergeModels } from "vue";
+import { isArray, OSelect, OOption, OSkeleton, OSkeletonText, ODivider, OPagination } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+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 _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OSearchResult",
+  props: /* @__PURE__ */ mergeModels({
+    versions: {},
+    items: {},
+    loading: { type: Boolean },
+    relativeItems: {},
+    total: { default: 0 },
+    pageSizes: { default: () => [10, 20, 50] },
+    submitFeedback: {}
+  }, {
+    "version": {},
+    "versionModifiers": {},
+    "page": { default: 1 },
+    "pageModifiers": {},
+    "pageSize": { default: 10 },
+    "pageSizeModifiers": {}
+  }),
+  emits: ["update:version", "update:page", "update:pageSize"],
+  setup(__props) {
+    const versionVal = useModel(__props, "version");
+    const page = useModel(__props, "page");
+    const pageSize = useModel(__props, "pageSize");
+    const { lePad, lePadV } = useScreen();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "content-header", {}, () => [
+              unref(isArray)(__props.versions) && __props.versions.length ? (openBlock(), createBlock(unref(OSelect), {
+                key: 0,
+                modelValue: versionVal.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => versionVal.value = $event),
+                size: "large",
+                class: "o-search-result-version-select"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.versions, (item) => {
+                    return openBlock(), createBlock(unref(OOption), {
+                      key: item.value,
+                      value: item.value,
+                      label: item.label
+                    }, null, 8, ["value", "label"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])) : createCommentVNode("", true)
+            ], true),
+            createVNode(unref(OSkeleton), {
+              animation: "",
+              loading: __props.loading
+            }, {
+              template: withCtx(() => [
+                createElementVNode("div", _hoisted_4, [
+                  (openBlock(), createElementBlock(Fragment, null, renderList(7, (_, i) => {
+                    return openBlock(), createElementBlock(Fragment, { key: i }, [
+                      createVNode(unref(OSkeletonText), { rows: 3 }),
+                      i !== 6 ? (openBlock(), createBlock(unref(ODivider), {
+                        key: 0,
+                        class: "o-search-result-content-skeleton-divider"
+                      })) : createCommentVNode("", true)
+                    ], 64);
+                  }), 64))
+                ])
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_5, [
+                  !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)
+                ])
+              ]),
+              _: 3
+            }, 8, ["loading"]),
+            createVNode(OSearchResultFeedbackBanner, { submit: __props.submitFeedback }, null, 8, ["submit"]),
+            !__props.loading && __props.total > 0 && !unref(lePadV) ? (openBlock(), createBlock(unref(OPagination), {
+              key: 0,
+              page: page.value,
+              "onUpdate:page": _cache[1] || (_cache[1] = ($event) => page.value = $event),
+              "page-size": pageSize.value,
+              "onUpdate:pageSize": _cache[2] || (_cache[2] = ($event) => pageSize.value = $event),
+              total: __props.total,
+              "page-sizes": __props.pageSizes,
+              class: "o-search-result-pagination"
+            }, null, 8, ["page", "page-size", "total", "page-sizes"])) : createCommentVNode("", true)
+          ]),
+          !unref(lePad) ? renderSlot(_ctx.$slots, "right", { key: 0 }, () => [
+            createElementVNode("div", _hoisted_6, [
+              createVNode(OSearchResultRelative, { "relative-items": __props.relativeItems }, null, 8, ["relative-items"]),
+              createVNode(OSearchResultFeedback, { submit: __props.submitFeedback }, null, 8, ["submit"])
+            ])
+          ], true) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,125 @@
+.hover-icon-rotate .o-icon[data-v-0faab97b] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-0faab97b] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-result-header[data-v-0faab97b] {
+  background-image: var(--v5b9f5904);
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+@media (max-width: 840px) {
+.o-search-result-header[data-v-0faab97b] {
+    background-image: none;
+    background-color: var(--o-color-fill2);
+}
+}
+.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+  position: relative;
+  height: 280px;
+  padding-top: 80px;
+  max-width: var(--grid-20);
+  margin: 0 auto;
+}
+@media (max-width: 1680px) {
+.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+    height: 220px;
+    padding-top: 52px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+    height: 180px;
+    padding-top: 34px;
+    padding-left: 32px;
+    padding-right: 32px;
+}
+}
+@media (max-width: 840px) {
+.o-search-result-header .o-search-result-header-content[data-v-0faab97b] {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    padding: 0;
+    max-width: none;
+}
+}
+.o-search-result-header .o-search-result-header-back[data-v-0faab97b] {
+  display: none;
+}
+.o-search-result-header .o-search-result-header-search-btn[data-v-0faab97b] {
+  display: none;
+}
+.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+  max-width: var(--grid-15);
+}
+@media (min-width: ) {
+.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+    max-width: var(--grid-10);
+}
+}
+@media (max-width: 840px) {
+.o-search-result-header .o-search-result-header-input-row[data-v-0faab97b] {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    padding: 8px 32px;
+}
+.o-search-result-header .o-search-result-header-back[data-v-0faab97b] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+.o-search-result-header .o-search-result-header-back .o-icon[data-v-0faab97b] {
+    font-size: 24px;
+}
+.o-search-result-header .o-search-result-header-input[data-v-0faab97b] {
+    flex: 1;
+    max-width: none;
+    margin: 0;
+}
+.o-search-result-header .o-search-result-header-search-btn[data-v-0faab97b] {
+    display: block;
+    flex-shrink: 0;
+    font-size: 16px;
+    line-height: 24px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+}
+@media (max-width: 600px) {
+.o-search-result-header .o-search-result-header-input-row[data-v-0faab97b] {
+    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;
+}
+}
+@media (max-width: 600px) {
+.o-search-result-header .o-search-result-header-tab-wrap[data-v-0faab97b] {
+    padding: 8px 24px;
+}
+}
+.o-search-result-header .o-search-result-header-tab-wrap .o-search-result-header-tab[data-v-0faab97b] {
+  --tab-nav-justify: start;
+}