Merge pull request #29 from sunkint/dev

v0.4.0

Author: sunkint

.vitepress/config.js

@@ -54,6 +54,7 @@ module.exports = {
           'Swiper',
           'InfiniteScroll',
           'Preview',
+          'Steps',
         ].map(buildNavChildren),
       },
       {

README.md

@@ -77,6 +77,7 @@ make build
 - [x] Mention
 - [x] Preview
 - [x] DatePicker
+- [x] Steps
 
 ## 作者
 

docs/components/alert/closable.vue

@@ -3,6 +3,9 @@
     <sk-alert v-if="show" closable @close="show = false">
       <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
     </sk-alert>
+    <sk-alert v-if="show2" closable @close="show2 = false" size="small">
+      <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
+    </sk-alert>
   </div>
 </template>
 
@@ -11,6 +14,7 @@ export default {
   data() {
     return {
       show: true,
+      show2: true,
     };
   },
 };

docs/components/alert/index.md

@@ -4,12 +4,36 @@
 
 <div class="docs-preview-part">
   <sk-alert><b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a></sk-alert>
+  <sk-alert size="small"><b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a></sk-alert>
 </div>
 
 ```vue
 <template>
   <div class="docs-preview-part">
     <sk-alert><b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a></sk-alert>
+    <sk-alert size="small">
+      <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
+    </sk-alert>
+  </div>
+</template>
+```
+
+### 带图标
+
+<div class="docs-preview-part">
+  <sk-alert icon="ok"><b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a></sk-alert>
+  <sk-alert icon="ok" size="small"><b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a></sk-alert>
+</div>
+
+```vue
+<template>
+  <div class="docs-preview-part">
+    <sk-alert icon="ok">
+      <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
+    </sk-alert>
+    <sk-alert icon="ok" size="small">
+      <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
+    </sk-alert>
   </div>
 </template>
 ```
@@ -24,6 +48,9 @@
     <sk-alert v-if="show" closable @close="show = false">
       <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
     </sk-alert>
+    <sk-alert v-if="show2" closable @close="show2 = false" size="small">
+      <b>好棒！</b> 你成功阅读了这条重要的信息。<a href="#">查看更多…</a>
+    </sk-alert>
   </div>
 </template>
 
@@ -126,10 +153,12 @@ export default {
 
 ### API
 
-| 参数     | 说明       | 类型   | 可选值                                                                          | 默认值  |
-| -------- | ---------- | ------ | ------------------------------------------------------------------------------- | ------- |
-| type     | 样式类型   | string | `primary`、`secondary`、`success`、`info`、`warning`、`danger`、`light`、`dark` | `info`  |
-| closable | 是否可关闭 | string |                                                                                 | `false` |
+| 参数     | 说明       | 类型   | 可选值                                                                          | 默认值   |
+| -------- | ---------- | ------ | ------------------------------------------------------------------------------- | -------- |
+| type     | 样式类型   | string | `primary`、`secondary`、`success`、`info`、`warning`、`danger`、`light`、`dark` | `info`   |
+| size     | 尺寸       | string | `normal`、 `small`                                                              | `normal` |
+| icon     | 前置图标   | string | 详见 [Icon](../icon/index#内置图标) 组件的 type                                 | -        |
+| closable | 是否可关闭 | string |                                                                                 | `false`  |
 
 ### 事件
 

docs/components/avatar/index.md

@@ -115,6 +115,7 @@
 | size     | 头像大小                          | number、string | `small`、`default`、`large`、数字（最小 20） | `default` |
 | shape    | 头像形状                          | string         | `circle`、`square`                           | `circle`  |
 | bordered | 是否有边框                        | bool           |                                              | `false`   |
+| inline   | 是否行内块                        | bool           |                                              | `false`   |
 | src      | 图片路径                          | string         |                                              | -         |
 | icon     | 图标类型，和 `src` 需要二选一赋值 | string         |                                              | -         |
 | href     | 头像点击时打开的链接              | string         |                                              | -         |

docs/components/datepicker/index.md

@@ -140,6 +140,7 @@ format 参数请参考 [**date-fns** format](https://date-fns.org/v2.17.0/docs/f
 | clearable    | 是否支持清除                                                                             | bool                  |                             | `false`                  |
 | format       | 自定义日期显示格式，详见 [**date-fns** format](https://date-fns.org/v2.17.0/docs/format) | string                |                             | `yyyy-MM-dd`             |
 | startView    | 开始选择的面板类型                                                                       | string                | `day`、`month`、`year`      | `day`                    |
+| initViewDate | 没有选定值时，展开的默认日期                                                             | Date                  |                             | `new Date()`             |
 | minDate      | 最小选择的日期                                                                           | Date                  |                             | -                        |
 | maxDate      | 最大选择的日期                                                                           | Date                  |                             | -                        |
 | weekStartsOn | 一周的开始日，0 代表周日，6 代表周六                                                     | number                | 0 - 6                       | 1                        |

docs/components/steps/basic.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="docs-preview-part">
+    <sk-steps :current="current">
+      <sk-step title="第一步" description="填写注册信息" />
+      <sk-step title="第二步" description="完善用户资料" />
+      <sk-step title="第三步" description="注册成功" />
+    </sk-steps>
+    <sk-button @click="prev">上一步</sk-button>
+    <sk-button @click="next">下一步</sk-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+    };
+  },
+  methods: {
+    prev() {
+      if (this.current > 0) {
+        this.current--;
+      }
+    },
+    next() {
+      if (this.current < 2) {
+        this.current++;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+button {
+  margin-top: 12px;
+}
+</style>

docs/components/steps/error.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="docs-preview-part">
+    <sk-steps :current="current" status="error">
+      <sk-step title="第一步" description="填写注册信息" />
+      <sk-step title="第二步" description="完善用户资料" />
+      <sk-step title="第三步" description="注册成功" />
+    </sk-steps>
+    <sk-button @click="prev">上一步</sk-button>
+    <sk-button @click="next">下一步</sk-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+    };
+  },
+  methods: {
+    prev() {
+      if (this.current > 0) {
+        this.current--;
+      }
+    },
+    next() {
+      if (this.current < 2) {
+        this.current++;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+button {
+  margin-top: 12px;
+}
+</style>

docs/components/steps/icon.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="docs-preview-part">
+    <sk-steps :current="current">
+      <sk-step title="第一步" icon="buy" description="填写注册信息" />
+      <sk-step title="第二步" icon="car" description="完善用户资料" />
+      <sk-step title="第三步" icon="drift-bottle" description="注册成功" />
+    </sk-steps>
+    <sk-button @click="prev">上一步</sk-button>
+    <sk-button @click="next">下一步</sk-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+    };
+  },
+  methods: {
+    prev() {
+      if (this.current > 0) {
+        this.current--;
+      }
+    },
+    next() {
+      if (this.current < 2) {
+        this.current++;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+button {
+  margin-top: 12px;
+}
+</style>