@opendesign-plus-test/components 0.0.1-rc.189 → 0.0.1-rc.190

package/dist/treeshaking/components/article/OArticle.vue2.mjs

@@ -0,0 +1,136 @@
+import { defineComponent, useCssVars, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, createBlock, unref, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, normalizeClass, createVNode, normalizeProps, guardReactiveProps, renderSlot } from "vue";
+import { OTag, ODivider } from "@opensig/opendesign";
+import _OMarkdown from "../markdown/OMarkdown.vue.mjs";
+import _OArticlePagination from "../article-pagination/OArticlePagination.vue.mjs";
+import { useI18n } from "../../i18n/index.mjs";
+const _hoisted_1 = { class: "o-article__header" };
+const _hoisted_2 = { class: "o-article__title" };
+const _hoisted_3 = {
+  key: 0,
+  class: "o-article__meta"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "o-article__tags"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "o-article__update-time"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OArticle",
+  props: {
+    title: {},
+    headerBg: {},
+    tags: { default: () => [] },
+    community: {},
+    prev: { default: null },
+    next: { default: null },
+    disableH2: { type: Boolean, default: false },
+    disableTable: { type: Boolean, default: false },
+    disableImg: { type: Boolean, default: false },
+    disableCode: { type: Boolean, default: false },
+    updateTime: {},
+    markdownBodyClass: { default: "o-markdown-body" },
+    removeFirstTopMargin: { type: Boolean, default: true },
+    autoHideFirstH1: { type: Boolean, default: true },
+    prevLabel: {},
+    nextLabel: {},
+    divider: { type: Boolean, default: true },
+    radius: { default: "var(--o-radius-xs)" }
+  },
+  emits: ["navigate"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "cb7fb230": headerBgStyle.value
+    }));
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const markdownProps = computed(() => ({
+      disableH1: true,
+      disableH2: props.disableH2,
+      disableTable: props.disableTable,
+      disableImg: props.disableImg,
+      disableCode: props.disableCode,
+      markdownBodyClass: props.markdownBodyClass
+    }));
+    const onNavigate = (type, item) => {
+      emit("navigate", type, item);
+    };
+    const headerBgStyle = computed(() => props.headerBg ? `url(${props.headerBg})` : "none");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "o-article",
+        style: normalizeStyle({
+          "--o-article-radius": __props.radius
+        })
+      }, [
+        createElementVNode("header", _hoisted_1, [
+          createElementVNode("h1", _hoisted_2, toDisplayString(__props.title), 1),
+          __props.tags.length || __props.updateTime || __props.community ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            __props.tags.length || __props.community ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              __props.community ? (openBlock(), createBlock(unref(OTag), {
+                key: 0,
+                class: "o-article__tag",
+                size: "large",
+                variant: "outline",
+                round: __props.community === "MindSpore" ? "pill" : __props.radius
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.community), 1)
+                ]),
+                _: 1
+              }, 8, ["round"])) : createCommentVNode("", true),
+              __props.community && __props.tags.length ? (openBlock(), createBlock(unref(ODivider), {
+                key: 1,
+                direction: "v",
+                class: "o-article__tags-divider"
+              })) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tags, (tag) => {
+                return openBlock(), createBlock(unref(OTag), {
+                  key: tag,
+                  class: "o-article__tag",
+                  size: "large",
+                  variant: "outline",
+                  round: __props.community === "MindSpore" ? "pill" : __props.radius
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(tag), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["round"]);
+              }), 128))
+            ])) : createCommentVNode("", true),
+            __props.updateTime ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(t)("md.updateTime")) + toDisplayString(__props.updateTime), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["o-article__content", {
+            "o-article__content--no-first-margin": __props.removeFirstTopMargin,
+            "o-article__content--hide-first-h1": __props.autoHideFirstH1
+          }])
+        }, [
+          createVNode(_OMarkdown, normalizeProps(guardReactiveProps(markdownProps.value)), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }, 16),
+          createVNode(_OArticlePagination, {
+            prev: __props.prev,
+            next: __props.next,
+            "prev-label": __props.prevLabel,
+            "next-label": __props.nextLabel,
+            divider: __props.divider,
+            radius: __props.radius,
+            onNavigate
+          }, null, 8, ["prev", "next", "prev-label", "next-label", "divider", "radius"])
+        ], 2)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/article/OArticleList.css

@@ -0,0 +1,232 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-article-list .article-filter {
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  padding: var(--o-gap-5) var(--o-gap-6);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-article-list .article-filter {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-article-list .article-filter {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-article-list .article-filter {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-article-list .article-filter {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1680px) {
+.o-article-list .article-filter {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: ) {
+.o-article-list .article-filter {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+@media (max-width: 840px) {
+.o-article-list .article-filter {
+    padding: var(--o-gap-3) var(--o-gap-3);
+}
+}
+.o-article-list .article-filter + .article-content {
+  margin-top: var(--grid-column-gutter);
+}
+.o-article-list .article-content .o-card {
+  --card-main-padding: 24px;
+  height: 100%;
+}
+@media (max-width: 840px) {
+.o-article-list .article-content .o-card {
+    --card-main-padding: 8px;
+    --card-h-cover-width: 36%;
+}
+}
+.o-article-list .article-content .o-card:hover .o-card-title {
+  color: var(--o-color-primary1);
+}
+.o-article-list .article-content .o-card .o-card-cover-img {
+  height: 266px;
+}
+@media (min-width: 1921px) {
+.o-article-list .article-content .o-card .o-card-cover-img {
+    height: 266px;
+}
+}
+@media (max-width: 1680px) {
+.o-article-list .article-content .o-card .o-card-cover-img {
+    height: 245px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-article-list .article-content .o-card .o-card-cover-img {
+    height: 184px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-article-list .article-content .o-card .o-card-cover-img {
+    height: 184px;
+}
+}
+@media (max-width: 600px) {
+.o-article-list .article-content .o-card .o-card-cover-img {
+    height: 100%;
+}
+}
+@media (max-width: 600px) {
+.o-article-list .article-content .o-card.o-card-layout-v .o-card-cover-img {
+    height: 184px;
+}
+}
+.o-article-list .article-content .o-card .o-card-detail {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--o-gap-1);
+}
+.o-article-list .article-content .o-card .o-card-detail .item-type {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--o-gap-1);
+}
+.o-article-list .article-content .o-card .o-card-detail .item-type.empty-tag {
+  border-color: transparent;
+}
+.o-article-list .article-content .o-card .o-card-detail .item-type .o-tag-icon {
+  display: flex;
+  align-items: center;
+}
+.o-article-list .article-content .o-card .o-card-detail .item-desc {
+  width: 100%;
+  color: var(--o-color-info2);
+  position: relative;
+  height: 2lh;
+  overflow: hidden;
+}
+.o-article-list .article-content .o-card .o-card-detail .item-desc::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 4em;
+  height: 1lh;
+  pointer-events: none;
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 80%);
+}
+[data-o-theme*=dark] .o-article-list .article-content .o-card .o-card-detail .item-desc::after {
+  background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-4), 1) 80%);
+}
+.o-article-list .article-content .o-card .item-info {
+  color: var(--o-color-info3);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-article-list .article-content .o-card .item-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-article-list .article-content .o-card .item-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-article-list .article-content .o-card .item-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-article-list .article-content .o-card .item-info {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-article-list .article-content .o-card .item-info span {
+  display: flex;
+  align-items: center;
+}
+.o-article-list .article-content .o-card .item-info span + span {
+  margin-left: var(--o-gap-4);
+}
+@media (max-width: 1680px) {
+.o-article-list .article-content .o-card .item-info span + span {
+    margin-left: var(--o-gap-3);
+}
+}
+@media (min-width: ) {
+.o-article-list .article-content .o-card .item-info span + span {
+    margin-left: var(--o-gap-2);
+}
+}
+.o-article-list .article-content .o-card .item-info span .o-icon {
+  display: inline-flex;
+  margin-right: var(--o-gap-2);
+  font-size: 16px;
+}
+.o-article-list .article-content .o-card .item-info span .o-icon svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+.o-article-list .article-empty {
+  padding: var(--o-gap-8) 0;
+}
+@media (max-width: 1680px) {
+.o-article-list .article-empty {
+    padding: var(--o-gap-7) 0;
+}
+}
+@media (min-width: ) {
+.o-article-list .article-empty {
+    padding: var(--o-gap-5) 0;
+}
+}
+@media (max-width: 840px) {
+.o-article-list .article-empty {
+    padding: var(--o-gap-4) 0;
+}
+}
+.o-article-list .article-pagination {
+  margin-top: var(--grid-column-gutter);
+  display: flex;
+  justify-content: flex-end;
+}
+@media (max-width: 840px) {
+.o-article-list .article-pagination {
+    justify-content: center;
+}
+}
+.o-article-list .article-pagination .o-pagination {
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: rgb(var(--o-white));
+}

package/dist/treeshaking/components/article/OArticleList.vue.d.ts

@@ -0,0 +1,54 @@
+import { ArticleItemT, ArticleListPropsT } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** 筛选条件区，不传时不渲染筛选区块 */
+        filter?: () => any;
+        /** 列表项卡片自定义渲染（栅格布局、分页逻辑仍由组件内部处理），插槽参数为当前项数据、索引与解析后的封面；不传时渲染内置 OCard */
+        card?: (props: {
+            item: ArticleItemT;
+            index: number;
+            cover?: string;
+        }) => any;
+        /** 空状态，列表为空时展示 */
+        empty?: () => any;
+    }> & {
+        /** 筛选条件区，不传时不渲染筛选区块 */
+        filter?: () => any;
+        /** 列表项卡片自定义渲染（栅格布局、分页逻辑仍由组件内部处理），插槽参数为当前项数据、索引与解析后的封面；不传时渲染内置 OCard */
+        card?: (props: {
+            item: ArticleItemT;
+            index: number;
+            cover?: string;
+        }) => any;
+        /** 空状态，列表为空时展示 */
+        empty?: () => any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ArticleListPropsT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "page-change": (value: {
+        page: number;
+        pageSize: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<ArticleListPropsT> & Readonly<{
+    "onPage-change"?: ((value: {
+        page: number;
+        pageSize: number;
+    }) => any) | undefined;
+}>, {
+    data: ArticleItemT[];
+    pageSizes: number[];
+    pageSize: number;
+    defaultCovers: string[];
+    mobileLayout: "h" | "v";
+}, {}, {}, {}, 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/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
+};