Merge branch 'monorepo-dev'

package.json

@@ -16,7 +16,7 @@
     "new": "node ./config/script/new-component.mjs",
     "postinstall": "npx husky install",
     "preinstall": "npx only-allow pnpm",
-    "version:release": "pnpm --filter @yike-design/ui release && git push --follow-tags",
+    "version:release": "pnpm run build:comp && pnpm --filter @yike-design/ui release && git push --follow-tags",
     "build:comp": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:comp && pnpm --filter @yike-design/ui build:less",
     "build:less": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:less",
     "gen:icon": "pnpm --filter @yike-design/ui gen:icon",

packages/yike-design-demo/src/examples/calendar/calendar-min.vue

@@ -0,0 +1,8 @@
+<template>
+  <yk-calendar-min v-model="currentRef"></yk-calendar-min>
+</template>
+<script setup lang="ts">
+import { YkCalendarMin } from '@yike-design/ui/index'
+import { ref } from 'vue'
+const currentRef = ref(new Date())
+</script>

packages/yike-design-demo/src/examples/calendar/doc.md

@@ -6,6 +6,12 @@
 <CalendarPrimary/>
 :::
 
+:::snippet
+精简版
+这里展示日历精简版本
+<CalendarMin/>
+:::
+
 :::snippet
 自定义显示单元格内容
 使用具名插槽`date-cell`定义单元格显示的内容，可以获取到 `date` (当前日期)，`isSelected` 选择状态，`day` 格式化时间(YYYY-MM-DD)，`type` 类型(`prev | current | next`)

packages/yike-design-demo/src/examples/input/doc.md

@@ -110,7 +110,7 @@
 | ------ | -------------------------------- |
 | focus  | 输入框聚焦时触发                 |
 | blur   | 输入框失焦时触发                 |
-| clear  | 输入框失焦时触发                 |
+| clear  | 输入框清空时触发                 |
 | change | 输入框输入字符、退格、粘贴时触发 |
 | submit | 输入框聚焦时按 Enter 触发        |
 

packages/yike-design-demo/src/examples/modal/doc.md

@@ -40,7 +40,7 @@
 
 | 参数             | 描述                          | 类型                  | 默认值  |
 | ---------------- | ----------------------------- | --------------------- | ------- |
-| `size`           | 尺寸                          | `small \| large`      | `large` |
+| `size`           | 尺寸                          | `s \| m \| l \| xl`      | `l` |
 | `show-footer`    | 底部区域展示                  | `boolean`             | `true`  |
 | `title`          | modal 标题                    | `string`              | `-`     |
 | `to`             | modal 默认展开的 dom 选择器   | `string`              | `body`  |

packages/yike-design-demo/src/examples/modal/modal-small.vue

@@ -1,5 +1,5 @@
 <template>
-  <yk-modal v-model="visible" title="这里是标题小弹窗" size="small">
+  <yk-modal v-model="visible" title="这里是标题小弹窗" size="s">
     <span>这一块是modal对话框的内容部分，这里支持各种标签，组件</span>
   </yk-modal>
   <yk-button @click="showModal">modal 对话框</yk-button>

packages/yike-design-demo/src/examples/pagination/doc.md

@@ -3,83 +3,63 @@
 :::snippet
 基本用法
 分页的基本用法
-<PaginationPrimary/>
+<PaginationPrimary />
 :::
 
 :::snippet
 简洁模式
 通过设置 `simple` 属性开启简洁模式。
-<PaginationSimple/>
+<PaginationSimple />
 :::
 
 :::snippet
-禁用组件
-通过设置 `disabled` 属性禁用组件
-<PaginationDisabled/>
+尺寸
+通过设置 `size` 属性改变组件的尺寸。
+<PaginationSize />
 :::
 
 :::snippet
-固定组件宽度
-通过设置 `fix-width` 属性固定组件宽度
-<PaginationFixWidth/>
+固定宽度
+属性 `fix-width` 通过将 `pager-count - 1` 使组件的宽度固定。
+<PaginationFixWidth />
 :::
 
 :::snippet
-最大页码按钮数
-默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。 通过 `pager-count` 属性可以设置最大页码按钮数。
-<PaginationPagerCount/>
+禁用
+属性 `disabled` 可以禁用组件。
+<PaginationDisabled />
 :::
 
 :::snippet
-页码跳转
-快速跳转到某一页。
-<PaginationShowJumper/>
-:::
-
-:::snippet
-每页条数
-通过设置 `show-page-size`，展示每页条数选择器。
-<PaginationShowPageSize/>
-:::
-
-:::snippet
-每页条数选择器的选项列表
-通过设置 `page-size-options`，可以重新指定选择器的选项列表。设置为 `-1` 时表示显示全部。
-<PaginationPageSizeOptions/>
-:::
-
-:::snippet
-分页尺寸
-通过设置 `size` 属性获得不同尺寸的分页组件。该属性默认值为 `l`
-<PaginationDifferentSize/>
+布局
+属性 `layouts` 可以自定义分页组件的布局。
+<PaginationLayouts />
 :::
 
 :::snippet
 事件
-可以为组件的页面切换和分页大小改变添加事件监听。
-<PaginationEvents/>
+请前往控制台查看事件监听结果。
+<PaginationEvents />
 :::
 
 ### API
 
 #### Pagination Props
 
-| 参数                          | 描述                                            | 类型                | 默认值               |
-| ----------------------------- | ----------------------------------------------- | ------------------- | -------------------- |
-| total（必填）                 | 总数据量                                        | number              | -                    |
-| current / v-model:current     | 当前页数                                        | number              | -                    |
-| default-current               | 默认的页数                                      | number              | 1                    |
-| page-size / v-model:page-size | 每页展示的数据条数                              | number              | -                    |
-| default-page-size             | 默认每页展示的数据条数（-1 时表示显示全部数据） | number              | 10                   |
-| disabled                      | 禁用组件                                        | boolean             | false                |
-| fix-width                     | 固定宽度                                        | boolean             | false                |
-| pager-count                   | 最大显示页码数量                                | number              | 7                    |
-| page-size-options             | 数据条数选择器的选项列表                        | number[]            | [10, 20, 30, 40, 50] |
-| simple                        | 是否为简单分页                                  | boolean             | false                |
-| show-jumper                   | 是否显示页码跳转                                | boolean             | false                |
-| show-total                    | 是否显示总分页数                                | boolean             | false                |
-| show-page-size                | 是否显示数据条数选择器                          | boolean             | false                |
-| size                          | 组件尺寸                                        | 's'｜'m'｜'l'｜'xl' | 'l'                  |
+| 参数                          | 描述                                            | 类型                                                                 | 默认值                    |
+| ----------------------------- | ----------------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
+| total（必填）                 | 总数据量                                        | number                                                               | -                         |
+| current / v-model:current     | 当前页数                                        | number                                                               | -                         |
+| page-size / v-model:page-size | 每页展示的数据条数                              | number                                                               | -                         |
+| default-current               | 默认的页数                                      | number                                                               | 1                         |
+| default-page-size             | 默认每页展示的数据条数（-1 时表示显示全部数据） | number                                                               | 10                        |
+| page-size-options             | 数据条数选择器的选项列表                        | number[]                                                             | [10, 20, 30, 40, 50]      |
+| pager-count                   | 最大显示页码数量                                | number                                                               | 7                         |
+| layouts                       | 自定义分页器的布局                              | ('pager' \| 'prev' \| 'next' \| 'jumper' \| 'pageSize' \| 'total')[] | ['prev', 'pager', 'next'] |
+| fix-width                     | 固定宽度                                        | boolean                                                              | false                     |
+| size                          | 组件尺寸                                        | 's'｜'m'｜'l'｜'xl'                                                  | 'l'                       |
+| simple                        | 简单模式                                        | boolean                                                              | false                     |
+| disabled                      | 禁用组件                                        | boolean                                                              | false                     |
 
 #### Pagination Events
 

packages/yike-design-demo/src/examples/pagination/pagination-disabled.vue

@@ -1,21 +1,16 @@
 <template>
-  <div>
+  <yk-space dir="vertical">
+    <yk-switch v-model="disabled"></yk-switch>
     <yk-pagination
-      disabled
-      :total="50"
-      show-jumper
-      show-page-size
-      show-total
-    ></yk-pagination>
-  </div>
-  <div style="margin-top: 10px">
-    <yk-pagination
-      disabled
-      :total="50"
-      simple
-      show-jumper
-      show-page-size
-      show-total
-    ></yk-pagination>
-  </div>
+      :total="100"
+      :layouts="['total', 'prev', 'pager', 'next', 'pageSize', 'jumper']"
+      :disabled="disabled"
+    />
+  </yk-space>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const disabled = ref(true)
+</script>

packages/yike-design-demo/src/examples/pagination/pagination-events.vue

@@ -1,24 +1,24 @@
 <template>
-  <yk-pagination
-    v-model:current="current"
-    :total="1000"
-    show-jumper
-    show-page-size
-    show-total
-    @change="handleChange"
-    @page-size-change="handlePageSizeChange"
-  ></yk-pagination>
+  <yk-space overflow="auto">
+    <yk-pagination
+      v-model:current="current"
+      :total="1000"
+      @change="handleChange"
+      @page-size-change="handlePageSizeChange"
+    />
+  </yk-space>
 </template>
+
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
+
 const current = ref<number>(3)
-const handleChange = (current: number) => {
+
+function handleChange(current: number) {
   console.log(`current page is: ${current}`)
 }
-const handlePageSizeChange = (pageSize: number) => {
+
+function handlePageSizeChange(pageSize: number) {
   console.log(`current page size is: ${pageSize}`)
 }
-watch(current, (newVal) => {
-  console.log(`v-model value is: ${newVal}`)
-})
 </script>

packages/yike-design-demo/src/examples/pagination/pagination-fix-width.vue

@@ -1,3 +1,5 @@
 <template>
-  <yk-pagination :total="1000" fix-width></yk-pagination>
+  <yk-space overflow="auto">
+    <yk-pagination :total="1000" fix-width />
+  </yk-space>
 </template>

packages/yike-design-demo/src/examples/pagination/pagination-layouts.vue

@@ -0,0 +1,6 @@
+<template>
+  <yk-pagination
+    :total="1000"
+    :layouts="['total', 'pager', 'prev', 'next', 'pageSize', 'jumper']"
+  />
+</template>

packages/yike-design-demo/src/examples/pagination/pagination-primary.vue

@@ -1,7 +1,10 @@
 <template>
-  <yk-space dir="vertical">
-    <yk-pagination :total="30"></yk-pagination>
-    <yk-pagination :total="40"></yk-pagination>
-    <yk-pagination :total="50"></yk-pagination>
-  </yk-space>
+  <yk-slider v-model="value" :min="1" :max="1000" :step="1" />
+  <yk-pagination fix-width :total="value" style="margin-top: 12px" />
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(30)
+</script>

packages/yike-design-demo/src/examples/pagination/pagination-simple.vue

@@ -1,3 +1,3 @@
 <template>
-  <yk-pagination :total="50" simple></yk-pagination>
+  <yk-pagination :total="50" simple />
 </template>

packages/yike-design-demo/src/examples/pagination/pagination-different-size.vue → packages/yike-design-demo/src/examples/pagination/pagination-size.vue

@@ -1,26 +1,23 @@
 <template>
-  <div>
+  <yk-space dir="vertical">
     <yk-radio-group v-model="size" type="button">
       <yk-radio value="s">s</yk-radio>
       <yk-radio value="m">m</yk-radio>
       <yk-radio value="l">l</yk-radio>
       <yk-radio value="xl">xl</yk-radio>
     </yk-radio-group>
-  </div>
-  <div style="margin: 20px 0">
+
     <yk-pagination
       :total="2345"
       :size="size"
-      show-jumper
-      show-page-size
-      show-total
-    ></yk-pagination>
-  </div>
-  <div>
-    <yk-pagination :total="2345" :size="size" simple></yk-pagination>
-  </div>
+      :layouts="['total', 'prev', 'pager', 'next', 'pageSize', 'jumper']"
+    />
+    <yk-pagination :total="2345" :size="size" simple />
+  </yk-space>
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue'
+
 const size = ref<'s' | 'm' | 'l' | 'xl'>('l')
 </script>

packages/yike-design-demo/src/examples/time-picker/basic-time-picker.vue

@@ -0,0 +1,3 @@
+<template>
+  <yk-time-picker></yk-time-picker>
+</template>

packages/yike-design-demo/src/examples/time-picker/custom-step.vue

@@ -0,0 +1,9 @@
+<template>
+  <yk-time-picker
+    :step="{
+      hour: 2,
+      minute: 5,
+      second: 10,
+    }"
+  />
+</template>

packages/yike-design-demo/src/examples/time-picker/default-value.vue

@@ -0,0 +1,10 @@
+<template>
+  <yk-time-picker
+    :default-value="'23:11:06'"
+    :style="{ marginBottom: '20px' }"
+  ></yk-time-picker>
+  <yk-time-picker
+    :default-value="['23:11:06', '12:12:10']"
+    type="time-range"
+  ></yk-time-picker>
+</template>

packages/yike-design-demo/src/examples/time-picker/disabled-options.vue

@@ -0,0 +1,7 @@
+<template>
+  <yk-time-picker
+    :disabled-hours="() => [1, 2, 4, 14]"
+    :disabled-minutes="() => [1, 2, 3, 4, 14, 15, 16, 20, 50]"
+    :disabled-seconds="() => [1, 2, 3, 4, 5, 6, 7, 10, 14, 60]"
+  ></yk-time-picker>
+</template>

packages/yike-design-demo/src/examples/time-picker/disabled-picker.vue

@@ -0,0 +1,3 @@
+<template>
+  <yk-time-picker disabled></yk-time-picker>
+</template>