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

package/dist/treeshaking/components/search/internal/SearchPanel.vue.mjs

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

package/dist/treeshaking/components/search-doc-result/OSearchDocResult.css

@@ -0,0 +1,156 @@
+.hover-icon-rotate .o-icon[data-v-25235996] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-25235996] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-doc-result[data-v-25235996] {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: var(--o-search-doc-result-content-min-height);
+  background-color: var(--o-color-fill2);
+}
+.o-search-doc-result .o-search-doc-result-back[data-v-25235996] {
+  margin-bottom: 24px;
+  color: var(--o-color-info2);
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+}
+@media (hover: hover) {
+.o-search-doc-result .o-search-doc-result-back[data-v-25235996]:hover {
+    color: var(--o-color-info1);
+}
+}
+@media (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-back[data-v-25235996] {
+    margin-bottom: 16px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-doc-result .o-search-doc-result-back[data-v-25235996] {
+    margin-bottom: 12px;
+}
+}
+.o-search-doc-result .o-search-doc-result-back .o-svg-icon[data-v-25235996] {
+  margin-right: 4px;
+  font-size: 16px;
+}
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+  margin-bottom: 24px;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 44px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    margin-bottom: 16px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-doc-result .o-search-doc-result-header-title[data-v-25235996] {
+    margin-bottom: 12px;
+}
+}
+.o-search-doc-result .o-search-doc-result-header-content[data-v-25235996] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+@media (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-header-content[data-v-25235996] {
+    margin-bottom: 4px;
+}
+}
+.o-search-doc-result .o-search-doc-result-header-content-desc[data-v-25235996] {
+  color: var(--o-color-info3);
+  font-size: 14px;
+  line-height: 22px;
+}
+.o-search-doc-result .o-search-doc-result-content-skeleton-loading[data-v-25235996] {
+  margin-top: 24px;
+  margin-bottom: 32px;
+}
+.o-search-doc-result .o-search-doc-result-content-skeleton-loading[data-v-25235996] .o-skeleton-item .o-skeleton-line:nth-child(1) {
+  width: 52%;
+  height: 28px;
+}
+.o-search-doc-result .o-search-doc-result-content-skeleton-loading[data-v-25235996] .o-skeleton-item .o-skeleton-line:nth-child(2) {
+  height: 48px;
+}
+.o-search-doc-result .o-search-doc-result-content-skeleton-loading[data-v-25235996] .o-skeleton-item .o-skeleton-line:nth-child(3) {
+  width: 38%;
+  height: 18px;
+}
+.o-search-doc-result .o-search-doc-result-content-skeleton-divider[data-v-25235996] {
+  margin: 16px 0;
+}
+.o-search-doc-result .o-search-doc-result-content.is-empty[data-v-25235996] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.o-search-doc-result .o-search-doc-result-content[data-v-25235996]:not(.is-empty) >  * {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--o-color-control4);
+}
+@media (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-content[data-v-25235996]:not(.is-empty) >  * {
+    padding: 12px 0;
+}
+}
+@media (max-width: 1200px) {
+.o-search-doc-result .o-search-doc-result-content[data-v-25235996]:not(.is-empty) >  * {
+    padding: 8px 0;
+}
+}
+.o-search-doc-result .o-search-doc-result-pagination[data-v-25235996] {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+@media (max-width: 1680px) {
+.o-search-doc-result .o-search-doc-result-pagination[data-v-25235996] {
+    margin-top: 12px;
+}
+}
+@media (max-width: 1200px) {
+.o-search-doc-result .o-search-doc-result-pagination[data-v-25235996] {
+    margin-top: 8px;
+}
+}
+.o-search-doc-result .o-search-doc-result-mb-bottom-text[data-v-25235996] {
+  margin-top: 16px;
+  color: var(--o-color-info3);
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+}

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

@@ -0,0 +1,56 @@
+type __VLS_Props = {
+    items: any[];
+    loading: boolean;
+    total?: number;
+    pageSizes?: number[];
+    noMore: boolean;
+    scrollContainer?: string | HTMLElement;
+    bottomOffset?: number;
+    hideSort?: boolean;
+};
+type __VLS_PublicProps = {
+    'page'?: number;
+    'pageSize'?: number;
+    'sortValue'?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'header-title'?(_: {}): any;
+        'header-desc'?(_: {}): any;
+        'header-sort-options'?(_: {}): any;
+        empty?(_: {}): any;
+        list?(_: {
+            items: any[];
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:pageSize": (value: number) => any;
+    "update:page": (value: number) => any;
+    "update:sortValue": (value: string) => any;
+} & {
+    "reach-bottom": () => any;
+    back: () => 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;
+    onBack?: (() => any) | undefined;
+    "onUpdate:sortValue"?: ((value: string) => any) | undefined;
+}>, {
+    total: number;
+    pageSizes: number[];
+    bottomOffset: number;
+    hideSort: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/treeshaking/components/search-doc-result/OSearchDocResult.vue.mjs

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

package/dist/treeshaking/components/search-doc-result/OSearchDocResult.vue2.mjs

@@ -0,0 +1,214 @@
+import { defineComponent, useModel, watch, onMounted, onUnmounted, computed, openBlock, createElementBlock, createElementVNode, unref, createVNode, toDisplayString, createCommentVNode, renderSlot, createTextVNode, withDirectives, withCtx, Fragment, renderList, createBlock, vShow, normalizeClass, mergeModels } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+import { OIconArrowLeft, ODropdown, OButton, OIconChevronDown, ODropdownItem, OSkeleton, isArray, OSkeletonText, ODivider, OPagination } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { useI18n } from "../../i18n/index.mjs";
+import OSearchResultEmpty from "../search-result/components/OSearchResultEmpty.vue.mjs";
+const _hoisted_1 = { class: "o-search-doc-result" };
+const _hoisted_2 = { class: "o-search-doc-result-header" };
+const _hoisted_3 = { class: "o-search-doc-result-header-title" };
+const _hoisted_4 = { class: "o-search-doc-result-header-content" };
+const _hoisted_5 = { class: "o-search-doc-result-header-content-desc" };
+const _hoisted_6 = { class: "o-search-doc-result-content-skeleton-loading" };
+const _hoisted_7 = {
+  key: 1,
+  class: "o-search-doc-result-mb-bottom-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OSearchDocResult",
+  props: /* @__PURE__ */ mergeModels({
+    items: {},
+    loading: { type: Boolean },
+    total: { default: 0 },
+    pageSizes: { default: () => [10, 20, 50] },
+    noMore: { type: Boolean },
+    scrollContainer: {},
+    bottomOffset: { default: 30 },
+    hideSort: { type: Boolean, default: false }
+  }, {
+    "page": { default: 1 },
+    "pageModifiers": {},
+    "pageSize": { default: 10 },
+    "pageSizeModifiers": {},
+    "sortValue": { default: "sortByRelevance" },
+    "sortValueModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["reach-bottom", "back"], ["update:page", "update:pageSize", "update:sortValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const page = useModel(__props, "page");
+    const pageSize = useModel(__props, "pageSize");
+    const sortValue = useModel(__props, "sortValue");
+    const emit = __emit;
+    const { 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);
+    const options = computed(() => [
+      {
+        label: t("search.sortByRelevance"),
+        value: "sortByRelevance"
+      },
+      {
+        label: t("search.sortByLatest"),
+        value: "sortByLatest"
+      }
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          !unref(lePadV) ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "o-search-doc-result-back",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("back"))
+          }, [
+            createVNode(unref(OIconArrowLeft)),
+            createElementVNode("span", null, toDisplayString(unref(t)("search.backToPreviousPage")), 1)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "header-title", {}, () => [
+              createTextVNode(toDisplayString(unref(t)("search.result")), 1)
+            ], true)
+          ]),
+          withDirectives(createElementVNode("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "header-desc", {}, () => [
+              createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("search.findCount", [__props.total])), 1)
+            ], true),
+            !__props.hideSort ? renderSlot(_ctx.$slots, "header-sort-options", { key: 0 }, () => [
+              createVNode(unref(ODropdown), { trigger: "hover" }, {
+                dropdown: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (item) => {
+                    return openBlock(), createBlock(unref(ODropdownItem), {
+                      key: item.value,
+                      label: item.label,
+                      value: item.value,
+                      onClick: ($event) => sortValue.value = item.value
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.label), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["label", "value", "onClick"]);
+                  }), 128))
+                ]),
+                default: withCtx(() => [
+                  createVNode(unref(OButton), {
+                    variant: "text",
+                    color: "primary"
+                  }, {
+                    suffix: withCtx(() => [
+                      createVNode(unref(OIconChevronDown), { class: "icon" })
+                    ]),
+                    default: withCtx(() => {
+                      var _a;
+                      return [
+                        createTextVNode(toDisplayString(((_a = options.value.find((item) => item.value === sortValue.value)) == null ? void 0 : _a.label) || "") + " ", 1)
+                      ];
+                    }),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], true) : createCommentVNode("", true)
+          ], 512), [
+            [vShow, !__props.loading]
+          ])
+        ]),
+        createVNode(unref(OSkeleton), {
+          animation: "",
+          loading: __props.loading && (!unref(lePadV) || page.value === 1)
+        }, {
+          template: withCtx(() => [
+            createElementVNode("div", _hoisted_6, [
+              (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-doc-result-content-skeleton-divider"
+                  })) : createCommentVNode("", true)
+                ], 64);
+              }), 64))
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["o-search-doc-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"]),
+        !__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,
+          layout: ["total", "pagesize", "pager", "jumper"],
+          class: "o-search-doc-result-pagination"
+        }, null, 8, ["page", "page-size", "total", "page-sizes"])) : createCommentVNode("", true),
+        unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          __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)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/search-doc-result/index.d.ts

@@ -0,0 +1,113 @@
+import { App } from 'vue';
+declare const OSearchDocResult: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        page?: number;
+        pageSize?: number;
+        sortValue?: string;
+    } & {
+        items: any[];
+        loading: boolean;
+        total?: number;
+        pageSizes?: number[];
+        noMore: boolean;
+        scrollContainer?: string | HTMLElement;
+        bottomOffset?: number;
+        hideSort?: boolean;
+    }> & Readonly<{
+        "onUpdate:pageSize"?: ((value: number) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onReach-bottom"?: (() => any) | undefined;
+        onBack?: (() => any) | undefined;
+        "onUpdate:sortValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:pageSize": (value: number) => any;
+        "update:page": (value: number) => any;
+        "update:sortValue": (value: string) => any;
+    } & {
+        "reach-bottom": () => any;
+        back: () => any;
+    }, import('vue').PublicProps, {
+        total: number;
+        pageSizes: number[];
+        bottomOffset: number;
+        hideSort: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        page?: number;
+        pageSize?: number;
+        sortValue?: string;
+    } & {
+        items: any[];
+        loading: boolean;
+        total?: number;
+        pageSizes?: number[];
+        noMore: boolean;
+        scrollContainer?: string | HTMLElement;
+        bottomOffset?: number;
+        hideSort?: boolean;
+    }> & Readonly<{
+        "onUpdate:pageSize"?: ((value: number) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onReach-bottom"?: (() => any) | undefined;
+        onBack?: (() => any) | undefined;
+        "onUpdate:sortValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        total: number;
+        pageSizes: number[];
+        bottomOffset: number;
+        hideSort: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{
+    page?: number;
+    pageSize?: number;
+    sortValue?: string;
+} & {
+    items: any[];
+    loading: boolean;
+    total?: number;
+    pageSizes?: number[];
+    noMore: boolean;
+    scrollContainer?: string | HTMLElement;
+    bottomOffset?: number;
+    hideSort?: boolean;
+}> & Readonly<{
+    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onReach-bottom"?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+    "onUpdate:sortValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:pageSize": (value: number) => any;
+    "update:page": (value: number) => any;
+    "update:sortValue": (value: string) => any;
+} & {
+    "reach-bottom": () => any;
+    back: () => any;
+}, string, {
+    total: number;
+    pageSizes: number[];
+    bottomOffset: number;
+    hideSort: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        'header-title'?(_: {}): any;
+        'header-desc'?(_: {}): any;
+        'header-sort-options'?(_: {}): any;
+        empty?(_: {}): any;
+        list?(_: {
+            items: any[];
+        }): any;
+    };
+}) & {
+    install(app: App): void;
+};
+export { OSearchDocResult };

package/dist/treeshaking/components/search-doc-result/index.mjs

@@ -0,0 +1,9 @@
+import _OSearchDocResult from "./OSearchDocResult.vue.mjs";
+const OSearchDocResult = Object.assign(_OSearchDocResult, {
+  install(app) {
+    app.component("OSearchDocResult", _OSearchDocResult);
+  }
+});
+export {
+  OSearchDocResult
+};