Merge pull request #21 from ivy-design/dev

v1.6.0 版本
ivy-design · Jan 30, 2024 · 402479a · 402479a
2 parents a629d7c + 248f1da
commit 402479a
Show file tree

Hide file tree

Showing 27 changed files with 1,613 additions and 376 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -31,6 +31,10 @@ jobs:
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - run: pnpm
       - run: pnpm run publish
         env:

diff --git a/.markdownlint.json b/.markdownlint.json
@@ -59,7 +59,14 @@
       "ivy-result",
       "ivy-tabs",
       "ivy-tab-pane",
-      "ivy-split"
+      "ivy-split",
+      "ivy-switch",
+      "ivy-badge",
+      "ivy-timeline",
+      "ivy-timeline-item",
+      "ivy-steps",
+      "ivy-step",
+      "ivy-tip"
     ]
   }
 }
diff --git a/README.md b/README.md
@@ -96,6 +96,7 @@ pnpm test:unit
 | Scrollbar       | 滚动条                  |
 | split           | 分割面板                |
 | notification    | 通知框                  |
+| pagination      | 分页器                  |
 
 ## 代办
 

diff --git a/packages/docs/src/.vitepress/theme/style.css b/packages/docs/src/.vitepress/theme/style.css
@@ -3,30 +3,22 @@ textarea {
   border-radius: 4px;
   padding: 4px 8px;
 }
-
 @media (min-width: 1440px) {
-  #VPContent.VPContent {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  #VPContent.VPContent.has-sidebar {
-    padding-left: var(--vp-sidebar-width);
-    padding-right: 0;
+  html,
+  body {
+    font-size: 14px;
   }
-  .Layout aside.VPSidebar {
-    padding-left: 32px;
-    width: var(--vp-sidebar-width);
-  }
-  .Layout .VPNavBar.has-sidebar > .container > .title {
-    padding-left: 32px;
-    width: var(--vp-sidebar-width);
+}
+@media (min-width: 1920px) {
+  :root {
+    --vp-layout-max-width: 1900px;
   }
-  .Layout .VPNavBar.has-sidebar .content {
-    padding-left: var(--vp-sidebar-width);
-    padding-right: 32px;
+  html,
+  body {
+    font-size: 16px;
   }
-  .Layout .VPDoc.has-aside .content-container {
-    max-width: 1000px;
+  #VPContent .VPDoc.has-aside .content-container {
+    max-width: 1200px;
   }
 }
 /*重置默认主题的字体大小*/

diff --git a/packages/docs/src/changelog.md b/packages/docs/src/changelog.md
@@ -1,5 +1,20 @@
 # 更新日志
 
+## v1.6.0 版本
+
+Feats：
+
+- 增加 `pagination` 组件
+- `Icon` 组件实现改为字体图标
+
+Fixed：
+
+- 修复文档在 1920 宽度下标题显示异常
+
+Refactor：
+
+- `Radio` 组件定义 Props 时使用 TS interface 定义
+
 ## v1.5.0 版本
 
 Feats：

diff --git a/packages/docs/src/components/avatar.md b/packages/docs/src/components/avatar.md
@@ -41,9 +41,9 @@ Avatar 组件可以用来代表人物或对象， 支持使用图片、图标或
 支持使用图片，图标或者文字作为 Avatar。
 
 <ivy-space size="custom" gap="24px">
-<ivy-avatar content="User"></ivy-avatar>
-<ivy-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></ivy-avatar>
-<ivy-avatar><ivy-icon name="user" size="24px"></ivy-icon></ivy-avatar>
+  <ivy-avatar content="User"></ivy-avatar>
+  <ivy-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></ivy-avatar>
+  <ivy-avatar><ivy-icon name="user" size="20px"></ivy-icon></ivy-avatar>
 </ivy-space>
 
 ```html
@@ -52,7 +52,7 @@ Avatar 组件可以用来代表人物或对象， 支持使用图片、图标或
   <ivy-avatar
     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
   ></ivy-avatar>
-  <ivy-avatar><ivy-icon name="user" size="24px"></ivy-icon></ivy-avatar>
+  <ivy-avatar><ivy-icon name="user" size="20px"></ivy-icon></ivy-avatar>
 </ivy-space>
 ```
 

diff --git a/packages/docs/src/components/index.md b/packages/docs/src/components/index.md
@@ -107,6 +107,7 @@ ReactDOM.render(<ivy-button>button</ivy-button>, document.body);
 | Scrollbar       | 滚动条                       |
 | split           | 分割面板                     |
 | notification    | 通知框                       |
+| pagination      | 分页器                       |
 
 ## 未完成组件
 

diff --git a/packages/docs/src/components/pagination.md b/packages/docs/src/components/pagination.md
@@ -1,5 +1,32 @@
 # Pagination 分页
 
+当数据量过多时，使用分页分解数据。
+
 ## 基础用法
 
-<ivy-pagination></ivy-pagination>
+<ivy-pagination total="700" prev-text="上一页" next-text="下一页"></ivy-pagination>
+
+## 设置最大页码按钮数
+
+默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。 通过 `pager-count` 属性可以设置最大页码按钮数。
+
+<ivy-pagination total="700" pager-count="9" prev-text="上一页" next-text="下一页"></ivy-pagination>
+
+## Props
+
+| 属性名      | 说明                                     | 类型      | 可选值 | 默认值 |
+| ----------- | ---------------------------------------- | --------- | ------ | ------ |
+| current     | 类型                                     | `string`  | -      | 1      |
+| size        | 每页显示条目个数                         | `boolean` | -      | 10     |
+| total       | 总条目数                                 | `boolean` | -      | 0      |
+| pager-count | 最大页码按钮数。当总页数超过该值时会折叠 | `string`  | -      | 7      |
+| prev-text   | 显示的上一页文字                         | `string`  | -      | Prev   |
+| next-text   | 显示的下一页文字                         | `string`  | -      | Next   |
+
+## Events
+
+| 名称           | 说明                 | 类型                         |
+| -------------- | -------------------- | ---------------------------- |
+| current-change | 当页码改变时触发     | `({current:number}) => void` |
+| prev-page      | 点击上一页按钮时触发 | `({current:number}) => void` |
+| next-page      | 点击下一页按钮时触发 | `({current:number}) => void` |
diff --git a/packages/docs/src/components/radio.md b/packages/docs/src/components/radio.md
@@ -27,9 +27,9 @@
 在 `Radio` 上添加 `disabled` 属性可以禁用组件
 
 <ivy-radio-group  value="1">
-<ivy-radio label="1">苹果</ivy-radio>
-<ivy-radio label="2" disabled>橘子</ivy-radio>
-<ivy-radio label="3">香蕉</ivy-radio>
+  <ivy-radio label="1">苹果</ivy-radio>
+  <ivy-radio label="2" disabled>橘子</ivy-radio>
+  <ivy-radio label="3">香蕉</ivy-radio>
 </ivy-radio-group>
 
 ```html
@@ -45,9 +45,9 @@
 在 `RadioGroup` 上添加 `disabled` 属性可以禁用组件
 
 <ivy-radio-group disabled value="1">
-<ivy-radio label="1">苹果</ivy-radio>
-<ivy-radio label="2">橘子</ivy-radio>
-<ivy-radio label="3">香蕉</ivy-radio>
+  <ivy-radio label="1">苹果</ivy-radio>
+  <ivy-radio label="2">橘子</ivy-radio>
+  <ivy-radio label="3">香蕉</ivy-radio>
 </ivy-radio-group>
 
 ```html

diff --git a/packages/docs/src/components/steps.md b/packages/docs/src/components/steps.md
@@ -14,9 +14,9 @@
 
 ```html
 <ivy-steps>
-    <ivy-step  header="验证手机号"></ivy-step>
-    <ivy-step header="修改密码"></ivy-step>
-    <ivy-step header="完成"></ivy-step>
+  <ivy-step header="验证手机号"></ivy-step>
+  <ivy-step header="修改密码"></ivy-step>
+  <ivy-step header="完成"></ivy-step>
 </ivy-steps>
 ```
 
@@ -32,9 +32,9 @@
 
 ```html
 <ivy-steps current="2">
-    <ivy-step  header="验证手机号">验证手机号是否正确</ivy-step>
-    <ivy-step header="修改密码">设置新密码</ivy-step>
-    <ivy-step header="完成">修改完成</ivy-step>
+  <ivy-step header="验证手机号">验证手机号是否正确</ivy-step>
+  <ivy-step header="修改密码">设置新密码</ivy-step>
+  <ivy-step header="完成">修改完成</ivy-step>
 </ivy-steps>
 ```
 

diff --git a/packages/docs/src/components/timeline.md b/packages/docs/src/components/timeline.md
@@ -5,21 +5,21 @@
 只设置时间和描述
 
 <ivy-timeline>
-    <ivy-timeline-item timestamp="2020-8-12">
-    本周美国大选公布结果
-    </ivy-timeline-item>
-    <ivy-timeline-item timestamp="2020-9-12">
-    本周美国大选公布结果
-    </ivy-timeline-item>
-    <ivy-timeline-item timestamp="2020-10-12">
-    本周美国大选公布结果
-    </ivy-timeline-item>
-    <ivy-timeline-item timestamp="2020-11-12">
-    本周美国大选公布结果
-    </ivy-timeline-item>
-    <ivy-timeline-item timestamp="2020-12-12">
-    本周美国大选公布结果
-    </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-8-12">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-9-12">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-10-12">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-11-12">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-12-12">
+  本周美国大选公布结果
+  </ivy-timeline-item>
 </ivy-timeline>
 
 ```html

diff --git a/packages/docs/src/preview.md b/packages/docs/src/preview.md
@@ -0,0 +1,142 @@
+# 组件预览
+
+## Icon 图标
+
+<ivy-icon name="download"></ivy-icon>
+<ivy-icon name="edit" class="margin-left"></ivy-icon>
+<ivy-icon name="reading" class="margin-left"></ivy-icon>
+
+## Button 按钮
+
+<ivy-button>默认</ivy-button>
+<ivy-button type="primary">主要</ivy-button>
+<ivy-button type="success">成功</ivy-button>
+<ivy-button type="warning">警告</ivy-button>
+<ivy-button type="danger">错误</ivy-button>
+<ivy-button type="info">提示</ivy-button>
+
+## Link 链接
+
+<ivy-link href="https://www.baidu.com">default</ivy-link>
+<ivy-link type="primary" class="margin-left">primary</ivy-link>
+<ivy-link type="success" class="margin-left">success</ivy-link>
+<ivy-link type="warning" class="margin-left">warning</ivy-link>
+<ivy-link type="danger" class="margin-left">danger</ivy-link>
+<ivy-link type="info" class="margin-left">info</ivy-link>
+
+## Text 文字
+
+<ivy-text>default</ivy-text>
+<ivy-text type="primary" class="margin-left">primary</ivy-text>
+<ivy-text type="success" class="margin-left">success</ivy-text>
+<ivy-text type="warning" class="margin-left">warning</ivy-text>
+<ivy-text type="danger" class="margin-left">danger</ivy-text>
+<ivy-text type="info" class="margin-left">info</ivy-text>
+
+## Switch
+
+<ivy-switch checked></ivy-switch>
+<ivy-switch class="margin-left"></ivy-switch>
+
+## Radio
+
+<ivy-radio-group value="1">
+<ivy-radio label="1" check>苹果</ivy-radio>
+<ivy-radio label="2">橘子</ivy-radio>
+<ivy-radio label="3">香蕉</ivy-radio>
+</ivy-radio-group>
+
+## Checkbox
+
+<ivy-checkbox-group>
+    <ivy-checkbox label="1" checked>苹果</ivy-checkbox>
+    <ivy-checkbox label="2">橘子</ivy-checkbox>
+    <ivy-checkbox label="3">香蕉</ivy-checkbox>
+</ivy-checkbox-group>
+
+## Tag 标签
+
+<ivy-tag type="primary">primary</ivy-tag>
+<ivy-tag type="success">success</ivy-tag>
+<ivy-tag type="warning">warning</ivy-tag>
+<ivy-tag type="danger">danger</ivy-tag>
+<ivy-tag type="info">info</ivy-tag>
+
+## Badge
+
+<ivy-badge value="12">
+    <ivy-button>评论</ivy-button>
+</ivy-badge>
+<ivy-badge value="10" class="margin-left-large">
+    <ivy-button>踩</ivy-button>
+</ivy-badge>
+<ivy-badge value="22" class="margin-left-large">
+    <ivy-button>点赞</ivy-button>
+</ivy-badge>
+
+## Collapse 折叠面板
+
+<ivy-collapse>
+    <ivy-collapse-item index="1" header="史蒂夫·乔布斯">
+        <div>史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</div>
+    </ivy-collapse-item>
+    <ivy-collapse-item index="2" header="斯蒂夫·盖瑞·沃兹尼亚克">
+        <div>斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</div>
+    </ivy-collapse-item>
+    <ivy-collapse-item index="3" header="乔纳森·伊夫">
+        <div>乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</div>
+    </ivy-collapse-item>
+</ivy-collapse>
+
+## Details
+
+<ivy-details summary="浣溪沙">
+    十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
+</ivy-details>
+
+## Timeline
+
+<ivy-timeline>
+  <ivy-timeline-item timestamp="2020-8-12" type="primary">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-9-12" type="success">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-10-12" type="warning">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-11-12" type="danger">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+  <ivy-timeline-item timestamp="2020-12-12" type="info">
+  本周美国大选公布结果
+  </ivy-timeline-item>
+</ivy-timeline>
+
+## Steps
+
+<ivy-steps>
+    <ivy-step header="验证手机号"></ivy-step>
+    <ivy-step header="修改密码"></ivy-step>
+    <ivy-step header="完成"></ivy-step>
+</ivy-steps>
+
+## Rate
+
+<ivy-rate value="2"></ivy-rate>
+
+## Avatar
+
+<ivy-space size="custom" gap="24px">
+<ivy-avatar content="User"></ivy-avatar>
+<ivy-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></ivy-avatar>
+<ivy-avatar><ivy-icon name="user" size="24px"></ivy-icon></ivy-avatar>
+</ivy-space>
+
+## Tip
+
+<ivy-tip type="info">主要消息提示的文案</ivy-tip>
+<ivy-tip type="success" class="margin-top">成功消息提示的文案</ivy-tip>
+<ivy-tip type="warning" class="margin-top">警告消息提示的文案</ivy-tip>
+<ivy-tip type="danger" class="margin-top">错误消息提示的文案</ivy-tip>