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

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/activity';
 export * from './components/anchor-bar';
 export * from './components/article';
+export * from './components/article-pagination';
 export * from './components/banner';
 export * from './components/brand';
 export * from './components/config-provider';

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

@@ -1,104 +1,41 @@
-.hover-icon-rotate .o-icon[data-v-e830d8e0] {
+.hover-icon-rotate .o-icon[data-v-effe6b29] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-e830d8e0] {
+.hover-icon-rotate:hover .o-icon[data-v-effe6b29] {
     transform: rotate(-180deg);
 }
 }
-.o-article[data-v-e830d8e0] {
-  --o-gap-1: 4px;
-  --o-gap-2: 8px;
-  --o-gap-3: 12px;
-  --o-gap-4: 16px;
-  --o-gap-5: 24px;
-  --o-gap-6: 32px;
-  --o-gap-7: 40px;
-  --o-gap-8: 48px;
-  --o-gap-9: 64px;
-  --o-gap-10: 72px;
-}
-@media (max-width: 1680px) {
-.o-article[data-v-e830d8e0] {
-    --o-gap-1: 4px;
-    --o-gap-2: 8px;
-    --o-gap-3: 8px;
-    --o-gap-4: 12px;
-    --o-gap-5: 16px;
-    --o-gap-6: 24px;
-    --o-gap-7: 24px;
-    --o-gap-8: 40px;
-    --o-gap-9: 48px;
-    --o-gap-10: 56px;
-}
-}
-@media (max-width: 1200px) {
-.o-article[data-v-e830d8e0] {
-    --o-gap-1: 4px;
-    --o-gap-2: 8px;
-    --o-gap-3: 8px;
-    --o-gap-4: 8px;
-    --o-gap-5: 12px;
-    --o-gap-6: 16px;
-    --o-gap-7: 16px;
-    --o-gap-8: 24px;
-    --o-gap-9: 32px;
-    --o-gap-10: 40px;
-}
-}
-@media (max-width: 840px) {
-.o-article[data-v-e830d8e0] {
-    --o-gap-1: 4px;
-    --o-gap-2: 8px;
-    --o-gap-3: 12px;
-    --o-gap-4: 16px;
-    --o-gap-5: 24px;
-    --o-gap-6: 28px;
-    --o-gap-7: 12px;
-    --o-gap-8: 24px;
-    --o-gap-9: 32px;
-    --o-gap-10: 32px;
-}
-}
-@media (max-width: 600px) {
-.o-article[data-v-e830d8e0] {
-    --o-gap-1: 4px;
-    --o-gap-2: 8px;
-    --o-gap-3: 12px;
-    --o-gap-4: 16px;
-    --o-gap-5: 24px;
-    --o-gap-6: 28px;
-    --o-gap-7: 12px;
-    --o-gap-8: 24px;
-    --o-gap-9: 32px;
-    --o-gap-10: 32px;
-}
-}
-.o-article[data-v-e830d8e0] {
+.o-article[data-v-effe6b29] {
   display: flex;
   flex-direction: column;
   min-width: 0;
   border-radius: var(--o-article-radius);
 }
-.o-article__header[data-v-e830d8e0] {
-  padding: var(--o-gap-6);
+.o-article__header[data-v-effe6b29] {
+  padding: 32px;
   border-radius: var(--o-article-radius) var(--o-article-radius) 0 0;
-  background-image: var(--v073a757a);
+  background-image: var(--v421a9b14);
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-size: cover;
 }
-@media (max-width: 840px) {
-.o-article__header[data-v-e830d8e0] {
+@media (max-width: 1680px) {
+.o-article__header[data-v-effe6b29] {
+    padding: 24px;
+}
+}
+@media (max-width: 1200px) {
+.o-article__header[data-v-effe6b29] {
     padding: 16px;
 }
 }
 @media (max-width: 600px) {
-.o-article__header[data-v-e830d8e0] {
+.o-article__header[data-v-effe6b29] {
     padding: 12px;
 }
 }
-.o-article__title[data-v-e830d8e0] {
+.o-article__title[data-v-effe6b29] {
   margin: 0;
   color: var(--o-color-info1);
   font-weight: 600;
@@ -106,30 +43,30 @@
   line-height: 44px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-article__title[data-v-e830d8e0] {
+.o-article__title[data-v-effe6b29] {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-article__title[data-v-e830d8e0] {
+.o-article__title[data-v-effe6b29] {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-article__title[data-v-e830d8e0] {
+.o-article__title[data-v-effe6b29] {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (max-width: 600px) {
-.o-article__title[data-v-e830d8e0] {
+.o-article__title[data-v-effe6b29] {
     font-size: 16px;
     line-height: 24px;
 }
 }
-.o-article__meta[data-v-e830d8e0] {
+.o-article__meta[data-v-effe6b29] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -138,7 +75,7 @@
   row-gap: 8px;
   margin-top: 8px;
 }
-.o-article__tags[data-v-e830d8e0] {
+.o-article__tags[data-v-effe6b29] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -147,65 +84,75 @@
   padding: 0;
   list-style: none;
 }
-.o-article__tags-divider[data-v-e830d8e0] {
+.o-article__tags-divider[data-v-effe6b29] {
   --o-divider-label-gap: 0;
   height: 20px;
 }
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
   flex-shrink: 0;
   color: var(--o-color-info3);
   font-size: 14px;
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
     font-size: 14px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-article__update-time[data-v-e830d8e0] {
+.o-article__update-time[data-v-effe6b29] {
     flex-basis: 100%;
 }
 }
-.o-article__tag[data-v-e830d8e0] {
+.o-article__tag[data-v-effe6b29] {
   --tag-height: 24px;
   --tag-padding: 0 11px;
 }
-.o-article__content[data-v-e830d8e0] {
-  padding: var(--o-gap-6);
+.o-article__content[data-v-effe6b29] {
+  padding: 32px;
   background-color: var(--o-color-fill2);
   border-radius: 0 0 var(--o-article-radius) var(--o-article-radius);
 }
+@media (max-width: 1680px) {
+.o-article__content[data-v-effe6b29] {
+    padding: 24px;
+}
+}
+@media (max-width: 1200px) {
+.o-article__content[data-v-effe6b29] {
+    padding: 16px;
+}
+}
 @media (max-width: 840px) {
-.o-article__content[data-v-e830d8e0] {
+.o-article__content[data-v-effe6b29] {
     padding: 12px;
 }
 }
-.o-article__content--no-first-margin[data-v-e830d8e0] .o-markdown > .o-markdown-body > div:first-child > *:first-child {
+.o-article__content--no-first-margin[data-v-effe6b29] .o-markdown > .o-markdown-body > div:first-child > *:first-child {
   margin-top: 0;
 }
-.o-article__content--hide-first-h1[data-v-e830d8e0] .o-markdown > .o-markdown-body > div:first-child > h1:first-of-type {
+.o-article__content--hide-first-h1[data-v-effe6b29] .o-markdown > .o-markdown-body > div:first-child > h1:first-of-type {
   display: none;
 }
-.o-article__content--hide-first-h1[data-v-e830d8e0] .o-markdown > .o-markdown-body > div:first-child > h1:first-of-type + * {
+.o-article__content--hide-first-h1[data-v-effe6b29] .o-markdown > .o-markdown-body > div:first-child > h1:first-of-type + * {
   margin-top: 0;
 }

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

@@ -1,4 +1,4 @@
-import { OMarkdownPaginationItemT } from '../markdown/types';
+import { OArticlePaginationItemT } from '../article-pagination/types';
 type __VLS_Props = {
     /** 文章标题（必填） */
     title: string;
@@ -8,10 +8,10 @@ type __VLS_Props = {
     tags?: string[];
     /** 所属社区（可选），渲染为标签并置于标签列表首位，用垂直分隔线与其余标签隔开 */
     community?: string;
-    /** 上一篇（可选），透传给 OMarkdownPagination */
-    prev?: OMarkdownPaginationItemT | null;
-    /** 下一篇（可选），透传给 OMarkdownPagination */
-    next?: OMarkdownPaginationItemT | null;
+    /** 上一篇（可选），透传给 OArticlePagination */
+    prev?: OArticlePaginationItemT | null;
+    /** 下一篇（可选），透传给 OArticlePagination */
+    next?: OArticlePaginationItemT | null;
     /** 透传给 OMarkdown：禁用 H2 增强 */
     disableH2?: boolean;
     /** 透传给 OMarkdown：禁用表格增强 */
@@ -28,11 +28,11 @@ type __VLS_Props = {
     removeFirstTopMargin?: boolean;
     /** 是否自动隐藏正文中的第一个 h1（该 h1 通常与标题重复，作为页面标题展示），默认 true */
     autoHideFirstH1?: boolean;
-    /** 透传给 OMarkdownPagination：上一篇文案，留空取 i18n 默认值 */
+    /** 透传给 OArticlePagination：上一篇文案，留空取 i18n 默认值 */
     prevLabel?: string;
-    /** 透传给 OMarkdownPagination：下一篇文案，留空取 i18n 默认值 */
+    /** 透传给 OArticlePagination：下一篇文案，留空取 i18n 默认值 */
     nextLabel?: string;
-    /** 透传给 OMarkdownPagination：是否显示顶部分割线 */
+    /** 透传给 OArticlePagination：是否显示顶部分割线 */
     divider?: boolean;
     /** 圆角 */
     radius?: string;
@@ -47,17 +47,17 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    navigate: (type: "prev" | "next", item: OMarkdownPaginationItemT) => any;
+    navigate: (type: "prev" | "next", item: OArticlePaginationItemT) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onNavigate?: ((type: "prev" | "next", item: OMarkdownPaginationItemT) => any) | undefined;
+    onNavigate?: ((type: "prev" | "next", item: OArticlePaginationItemT) => any) | undefined;
 }>, {
     disableH2: boolean;
     disableTable: boolean;
     disableImg: boolean;
     disableCode: boolean;
     markdownBodyClass: string;
-    prev: OMarkdownPaginationItemT | null;
-    next: OMarkdownPaginationItemT | null;
+    prev: OArticlePaginationItemT | null;
+    next: OArticlePaginationItemT | null;
     divider: boolean;
     radius: string;
     tags: string[];

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

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

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

@@ -1,7 +1,7 @@
 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 _OMarkdownPagination from "../markdown/OMarkdownPagination.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" };
@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["navigate"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v073a757a": headerBgStyle.value
+      "v421a9b14": headerBgStyle.value
     }));
     const props = __props;
     const emit = __emit;
@@ -117,7 +117,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 16),
-          createVNode(_OMarkdownPagination, {
+          createVNode(_OArticlePagination, {
             prev: __props.prev,
             next: __props.next,
             "prev-label": __props.prevLabel,

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;
+    };
+};