@opendesign-plus/components 0.0.1-rc.87 → 0.0.1-rc.88

package/dist/treeshaking/components/article/OArticleList.vue.mjs

@@ -0,0 +1,205 @@
+import { defineComponent, useSlots, ref, computed, watch, openBlock, createElementBlock, unref, renderSlot, createCommentVNode, createElementVNode, createBlock, withCtx, Fragment, renderList, createVNode, createSlots, normalizeClass, toDisplayString, resolveDynamicComponent, createTextVNode } from "vue";
+import { ORow, OCol, OCard, OTag, OIcon, OPagination } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import OEmpty from "../empty/OEmpty.vue.mjs";
+import IconTime from "../../_virtual/icon-time.mjs";
+import IconAvatar from "../../_virtual/icon-avatar-line.mjs";
+const _hoisted_1 = { class: "o-article-list" };
+const _hoisted_2 = {
+  key: 0,
+  class: "article-filter"
+};
+const _hoisted_3 = { class: "article-content" };
+const _hoisted_4 = {
+  key: 1,
+  class: "item-desc"
+};
+const _hoisted_5 = { class: "item-info" };
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = { key: 2 };
+const _hoisted_9 = {
+  key: 1,
+  class: "article-pagination"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OArticleList",
+  props: {
+    data: { default: () => [] },
+    pageSize: { default: 9 },
+    pageSizes: { default: () => [9, 18, 45] },
+    defaultCovers: { default: () => [] },
+    emptyImg: {},
+    mobileLayout: { default: "h" }
+  },
+  emits: ["page-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const { lePadV } = useScreen();
+    const current = ref(1);
+    const size = ref(props.pageSize);
+    const total = computed(() => props.data.length);
+    const items = computed(() => props.data.slice((current.value - 1) * size.value, current.value * size.value));
+    const showPagination = computed(() => total.value > size.value);
+    watch(
+      () => props.pageSize,
+      (val) => {
+        size.value = val;
+      }
+    );
+    watch(
+      () => props.data,
+      () => {
+        current.value = 1;
+      }
+    );
+    watch([total, size], () => {
+      const maxPage = Math.max(1, Math.ceil(total.value / size.value));
+      if (current.value > maxPage) {
+        current.value = maxPage;
+      }
+    });
+    const changePage = ({ page, pageSize }) => {
+      current.value = page;
+      size.value = pageSize;
+      emit("page-change", { page, pageSize });
+    };
+    const authorText = (author) => Array.isArray(author) ? author.join(" ") : author;
+    const getCover = (item, index) => {
+      if (item.cover) {
+        return item.cover;
+      }
+      const covers = props.defaultCovers;
+      return covers.length ? covers[index % covers.length] : void 0;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        unref(slots).filter ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "filter")
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3, [
+          total.value ? (openBlock(), createBlock(unref(ORow), {
+            key: 0,
+            gap: "var(--grid-column-gutter)",
+            wrap: "wrap"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
+                return openBlock(), createBlock(unref(OCol), {
+                  key: item.title,
+                  flex: "0 1 33.33%",
+                  "pad-v": { flex: "0 1 50%" },
+                  phone: { flex: "0 1 100%" }
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "card", {
+                      item,
+                      index,
+                      cover: getCover(item, index)
+                    }, () => [
+                      createVNode(unref(OCard), {
+                        title: item.title,
+                        "title-row": 2,
+                        "title-max-row": 2,
+                        cover: getCover(item, index),
+                        href: item.href,
+                        layout: unref(lePadV) ? __props.mobileLayout : "v"
+                      }, createSlots({
+                        detail: withCtx(() => [
+                          item.tag ? (openBlock(), createBlock(unref(OTag), {
+                            key: 0,
+                            variant: "outline",
+                            class: normalizeClass(["item-type", !item.tag.label && "empty-tag"])
+                          }, createSlots({
+                            default: withCtx(() => [
+                              createElementVNode("span", null, toDisplayString(item.tag.label), 1)
+                            ]),
+                            _: 2
+                          }, [
+                            item.tag.icon ? {
+                              name: "icon",
+                              fn: withCtx(() => [
+                                createVNode(unref(OIcon), null, {
+                                  default: withCtx(() => [
+                                    (openBlock(), createBlock(resolveDynamicComponent(item.tag.icon)))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              key: "0"
+                            } : void 0
+                          ]), 1032, ["class"])) : createCommentVNode("", true),
+                          item.description ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(item.description), 1)) : createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, [
+                        item.date || item.author || item.location ? {
+                          name: "footer",
+                          fn: withCtx(() => [
+                            createElementVNode("div", _hoisted_5, [
+                              item.date ? (openBlock(), createElementBlock("span", _hoisted_6, [
+                                createVNode(unref(OIcon), null, {
+                                  default: withCtx(() => [
+                                    createVNode(unref(IconTime))
+                                  ]),
+                                  _: 1
+                                }),
+                                createTextVNode(" " + toDisplayString(item.date), 1)
+                              ])) : createCommentVNode("", true),
+                              item.author ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                                createVNode(unref(OIcon), null, {
+                                  default: withCtx(() => [
+                                    createVNode(unref(IconAvatar))
+                                  ]),
+                                  _: 1
+                                }),
+                                createTextVNode(" " + toDisplayString(authorText(item.author)), 1)
+                              ])) : createCommentVNode("", true),
+                              item.location ? (openBlock(), createElementBlock("span", _hoisted_8, [
+                                createVNode(unref(OIcon), null, {
+                                  default: withCtx(() => [
+                                    createVNode(unref(IconAvatar))
+                                  ]),
+                                  _: 1
+                                }),
+                                createTextVNode(" " + toDisplayString(item.location), 1)
+                              ])) : createCommentVNode("", true)
+                            ])
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["title", "cover", "href", "layout"])
+                    ])
+                  ]),
+                  _: 2
+                }, 1024);
+              }), 128))
+            ]),
+            _: 3
+          })) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+            createVNode(OEmpty, {
+              class: "article-empty",
+              img: __props.emptyImg
+            }, null, 8, ["img"])
+          ])
+        ]),
+        showPagination.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+          createVNode(unref(OPagination), {
+            page: current.value,
+            simple: unref(lePadV),
+            "show-total": true,
+            "page-size": size.value,
+            total: total.value,
+            "page-sizes": __props.pageSizes,
+            onChange: changePage
+          }, null, 8, ["page", "simple", "page-size", "total", "page-sizes"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/article/OArticleList.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./OArticleList.vue.mjs";
+import './OArticleList.css';
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/article/index.d.ts

@@ -5,8 +5,8 @@ declare const OArticle: {
         headerBg?: string;
         tags?: string[];
         community?: string;
-        prev?: import('../../index').OMarkdownPaginationItemT | null;
-        next?: import('../../index').OMarkdownPaginationItemT | null;
+        prev?: import('../../index').OArticlePaginationItemT | null;
+        next?: import('../../index').OArticlePaginationItemT | null;
         disableH2?: boolean;
         disableTable?: boolean;
         disableImg?: boolean;
@@ -20,17 +20,17 @@ declare const OArticle: {
         divider?: boolean;
         radius?: string;
     }> & Readonly<{
-        onNavigate?: ((type: "prev" | "next", item: import('../../index').OMarkdownPaginationItemT) => any) | undefined;
+        onNavigate?: ((type: "prev" | "next", item: import('../../index').OArticlePaginationItemT) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        navigate: (type: "prev" | "next", item: import('../../index').OMarkdownPaginationItemT) => any;
+        navigate: (type: "prev" | "next", item: import('../../index').OArticlePaginationItemT) => any;
     }, import('vue').PublicProps, {
         disableH2: boolean;
         disableTable: boolean;
         disableImg: boolean;
         disableCode: boolean;
         markdownBodyClass: string;
-        prev: import('../../index').OMarkdownPaginationItemT | null;
-        next: import('../../index').OMarkdownPaginationItemT | null;
+        prev: import('../../index').OArticlePaginationItemT | null;
+        next: import('../../index').OArticlePaginationItemT | null;
         divider: boolean;
         radius: string;
         tags: string[];
@@ -48,8 +48,8 @@ declare const OArticle: {
         headerBg?: string;
         tags?: string[];
         community?: string;
-        prev?: import('../../index').OMarkdownPaginationItemT | null;
-        next?: import('../../index').OMarkdownPaginationItemT | null;
+        prev?: import('../../index').OArticlePaginationItemT | null;
+        next?: import('../../index').OArticlePaginationItemT | null;
         disableH2?: boolean;
         disableTable?: boolean;
         disableImg?: boolean;
@@ -63,15 +63,15 @@ declare const OArticle: {
         divider?: boolean;
         radius?: string;
     }> & Readonly<{
-        onNavigate?: ((type: "prev" | "next", item: import('../../index').OMarkdownPaginationItemT) => any) | undefined;
+        onNavigate?: ((type: "prev" | "next", item: import('../../index').OArticlePaginationItemT) => any) | undefined;
     }>, {}, {}, {}, {}, {
         disableH2: boolean;
         disableTable: boolean;
         disableImg: boolean;
         disableCode: boolean;
         markdownBodyClass: string;
-        prev: import('../../index').OMarkdownPaginationItemT | null;
-        next: import('../../index').OMarkdownPaginationItemT | null;
+        prev: import('../../index').OArticlePaginationItemT | null;
+        next: import('../../index').OArticlePaginationItemT | null;
         divider: boolean;
         radius: string;
         tags: string[];
@@ -86,8 +86,8 @@ declare const OArticle: {
     headerBg?: string;
     tags?: string[];
     community?: string;
-    prev?: import('../../index').OMarkdownPaginationItemT | null;
-    next?: import('../../index').OMarkdownPaginationItemT | null;
+    prev?: import('../../index').OArticlePaginationItemT | null;
+    next?: import('../../index').OArticlePaginationItemT | null;
     disableH2?: boolean;
     disableTable?: boolean;
     disableImg?: boolean;
@@ -101,17 +101,17 @@ declare const OArticle: {
     divider?: boolean;
     radius?: string;
 }> & Readonly<{
-    onNavigate?: ((type: "prev" | "next", item: import('../../index').OMarkdownPaginationItemT) => any) | undefined;
+    onNavigate?: ((type: "prev" | "next", item: import('../../index').OArticlePaginationItemT) => any) | undefined;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    navigate: (type: "prev" | "next", item: import('../../index').OMarkdownPaginationItemT) => any;
+    navigate: (type: "prev" | "next", item: import('../../index').OArticlePaginationItemT) => any;
 }, string, {
     disableH2: boolean;
     disableTable: boolean;
     disableImg: boolean;
     disableCode: boolean;
     markdownBodyClass: string;
-    prev: import('../../index').OMarkdownPaginationItemT | null;
-    next: import('../../index').OMarkdownPaginationItemT | null;
+    prev: import('../../index').OArticlePaginationItemT | null;
+    next: import('../../index').OArticlePaginationItemT | null;
     divider: boolean;
     radius: string;
     tags: string[];
@@ -124,4 +124,81 @@ declare const OArticle: {
 }) & {
     install(app: App): void;
 };
-export { OArticle };
+declare const OArticleList: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../index').ArticleListPropsT> & Readonly<{
+        "onPage-change"?: ((value: {
+            page: number;
+            pageSize: number;
+        }) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "page-change": (value: {
+            page: number;
+            pageSize: number;
+        }) => any;
+    }, import('vue').PublicProps, {
+        data: import('../../index').ArticleItemT[];
+        pageSizes: number[];
+        pageSize: number;
+        defaultCovers: string[];
+        mobileLayout: "h" | "v";
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../../index').ArticleListPropsT> & Readonly<{
+        "onPage-change"?: ((value: {
+            page: number;
+            pageSize: number;
+        }) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        data: import('../../index').ArticleItemT[];
+        pageSizes: number[];
+        pageSize: number;
+        defaultCovers: string[];
+        mobileLayout: "h" | "v";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('../../index').ArticleListPropsT> & Readonly<{
+    "onPage-change"?: ((value: {
+        page: number;
+        pageSize: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "page-change": (value: {
+        page: number;
+        pageSize: number;
+    }) => any;
+}, string, {
+    data: import('../../index').ArticleItemT[];
+    pageSizes: number[];
+    pageSize: number;
+    defaultCovers: string[];
+    mobileLayout: "h" | "v";
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<{
+        filter?: () => any;
+        card?: (props: {
+            item: import('../../index').ArticleItemT;
+            index: number;
+            cover?: string;
+        }) => any;
+        empty?: () => any;
+    }> & {
+        filter?: () => any;
+        card?: (props: {
+            item: import('../../index').ArticleItemT;
+            index: number;
+            cover?: string;
+        }) => any;
+        empty?: () => any;
+    };
+}) & {
+    install(app: App): void;
+};
+export { OArticle, OArticleList };
+export * from './types';

package/dist/treeshaking/components/article/index.mjs

@@ -1,9 +1,17 @@
 import _OArticle from "./OArticle.vue.mjs";
+import _sfc_main from "./OArticleList.vue.mjs";
+import './OArticleList.css';
 const OArticle = Object.assign(_OArticle, {
   install(app) {
     app.component("OArticle", _OArticle);
   }
 });
+const OArticleList = Object.assign(_sfc_main, {
+  install(app) {
+    app.component("OArticleList", _sfc_main);
+  }
+});
 export {
-  OArticle
+  OArticle,
+  OArticleList
 };

package/dist/treeshaking/components/article/types.d.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+/** 文章类型标签（卡片详情区顶部展示） */
+export interface ArticleTagT {
+    label: string;
+    icon?: Component;
+}
+/** 文章列表项（新闻/博客通用） */
+export interface ArticleItemT {
+    title: string;
+    description?: string;
+    cover?: string;
+    href?: string;
+    date?: string;
+    author?: string | string[];
+    location?: string;
+    tag?: ArticleTagT;
+    [key: string]: any;
+}
+export interface ArticleListPropsT {
+    data: ArticleItemT[];
+    pageSize?: number;
+    pageSizes?: number[];
+    defaultCovers?: string[];
+    emptyImg?: string;
+    mobileLayout?: 'h' | 'v';
+}