Merge pull request #344 from ecaps1038/monorepo-dev

v0.0.13
ecaps1038 · Mar 25, 2024 · b7beb29 · b7beb29
2 parents 73c043c + 4051dcb
commit b7beb29
Show file tree

Hide file tree

Showing 95 changed files with 796 additions and 616 deletions.
diff --git a/packages/demo-test/src/style.css b/packages/demo-test/src/style.css
@@ -35,25 +35,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-family: inherit;
-  font-weight: 500;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background-color: #1a1a1a;
-  transition: border-color 0.25s;
-  cursor: pointer;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 .card {
   padding: 2em;
 }

diff --git a/packages/yike-design-demo/src/components/Snippet.vue b/packages/yike-design-demo/src/components/Snippet.vue
@@ -56,7 +56,7 @@ function onCopy() {
   <div class="demo-block">
     <slot name="demo"></slot>
   </div>
-  <yk-space class="flex-end" :size="8">
+  <yk-space class="snippet-icon" justify="end" :size="8">
     <div class="icon" @click="onCopy"><icon-copy-outline /></div>
     <div
       class="icon"
@@ -94,10 +94,7 @@ function onCopy() {
   transition: all @animats;
 }
 
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
-
+.snippet-icon {
   .icon {
     display: flex;
     justify-content: center;

diff --git a/packages/yike-design-demo/src/examples/modal/doc.md b/packages/yike-design-demo/src/examples/modal/doc.md
@@ -38,22 +38,24 @@
 
 ### API
 
-| 参数          | 描述                          | 类型             | 默认值  |
-| ------------- | ----------------------------- | ---------------- | ------- |
-| `size`        | 尺寸                          | `small \| large` | `large` |
-| `show-footer` | 底部区域展示                  | `boolean`        | `true`  |
-| `title`       | modal 标题                    | `string`         | `''`    |
-| `to`          | modal 默认展开的 dom 选择器   | `string`         | `body`  |
-| `scrollable`  | 页面可否滚动                  | `boolean`        | `false` |
-| `closeable`   | 点击遮罩层是否关闭 modal      | `boolean`        | `false` |
-| `showMask`    | 是否展示遮罩层                | `boolean`        | `true`  |
-| `escapable`   | 是否可以点击 esc 键关闭 modal | `boolean`        | `true`  |
+| 参数             | 描述                          | 类型                  | 默认值  |
+| ---------------- | ----------------------------- | --------------------- | ------- |
+| `size`           | 尺寸                          | `small \| large`      | `large` |
+| `show-footer`    | 底部区域展示                  | `boolean`             | `true`  |
+| `title`          | modal 标题                    | `string`              | `-`     |
+| `to`             | modal 默认展开的 dom 选择器   | `string`              | `body`  |
+| `scrollable`     | 页面可否滚动                  | `boolean`             | `false` |
+| `closeable`      | 点击遮罩层是否关闭 modal      | `boolean`             | `false` |
+| `showMask`       | 是否展示遮罩层                | `boolean`             | `true`  |
+| `escapable`      | 是否可以点击 esc 键关闭 modal | `boolean`             | `true`  |
+| `content-height` | 使内容在固定高度内滚动        | `string    \| number` | `-`     |
 
 ### Methods
 
-| 方法           | 描述                   | 入参类型   | 默认值   |
-| -------------- | ---------------------- | ---------- | -------- |
-| `onCloseModal` | 对话框关闭时的回调函数 | `Function` | `()=>{}` |
+| 方法           | 描述                     | 入参类型   | 默认值   |
+| -------------- | ------------------------ | ---------- | -------- |
+| `onCloseModal` | 对话框关闭时的回调函数   | `Function` | `()=>{}` |
+| `onSubmit`     | 对话点击确定时的回调函数 | `Function` | `()=>{}` |
 
 ### 插槽
 

diff --git a/packages/yike-design-demo/src/examples/modal/modal-base.vue b/packages/yike-design-demo/src/examples/modal/modal-base.vue
@@ -11,4 +11,4 @@ const showModal = () => {
   visible.value = true
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/modal/modal-close.vue b/packages/yike-design-demo/src/examples/modal/modal-close.vue
@@ -15,4 +15,4 @@ const closeModal = () => {
   proxy.$message({ type: 'success', message: '这里是对话框关闭的回调函数' })
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue b/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue
@@ -11,4 +11,4 @@ const showModal = () => {
   visible.value = true
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/modal/modal-footer.vue b/packages/yike-design-demo/src/examples/modal/modal-footer.vue
@@ -12,4 +12,4 @@ const showModal = () => {
   visible.value = true
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/modal/modal-header.vue b/packages/yike-design-demo/src/examples/modal/modal-header.vue
@@ -12,4 +12,4 @@ const showModal = () => {
   visible.value = true
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/modal/modal-small.vue b/packages/yike-design-demo/src/examples/modal/modal-small.vue
@@ -11,4 +11,4 @@ const showModal = () => {
   visible.value = true
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
diff --git a/packages/yike-design-demo/src/examples/table/doc.md b/packages/yike-design-demo/src/examples/table/doc.md
@@ -24,6 +24,12 @@
 <TableCustomHeader/>
 :::
 
+:::snippet
+自定义内容
+通过设置 slot 来自定义内容。
+<TableTbody/>
+:::
+
 ### API
 
 #### Table 属性
@@ -50,9 +56,10 @@
 | formatter | 用来格式化内容     | function(row, column, cellValue, index) | —       |
 | align     | 对齐方式           | left / center / right                   | left    |
 
-#### Table-column 插槽
+#### Table 插槽
 
-| 参数    | 描述                                               |
-| ------- | -------------------------------------------------- |
-| default | 自定义列的内容 作用域参数为 { row, column, index } |
-| header  | 自定义表头的内容， 作用域参数为 { column, index }  |
+| 参数    | 描述                                                                           |
+| ------- | ------------------------------------------------------------------------------ |
+| default | 自定义列的内容 作用域参数为 { row, column, index } 其中 index 为所在行的索引值 |
+| header  | 自定义表头的内容， 作用域参数为 { column, index }                              |
+| tbody   | 自定义表的内容                                                                 |
diff --git a/packages/yike-design-demo/src/examples/table/table-custom.vue b/packages/yike-design-demo/src/examples/table/table-custom.vue
@@ -1,27 +1,75 @@
 <template>
-  <yk-table :data="dataList" @selection-change="handleSelectionChange">
+  <yk-table
+    ref="tableRef"
+    :data="dataList"
+    @selection-change="handleSelectionChange"
+  >
+    <yk-table-column type="selection"></yk-table-column>
     <yk-table-column property="name" label="用户名"></yk-table-column>
     <yk-table-column property="email" label="邮箱"></yk-table-column>
     <yk-table-column property="bir" label="生日"></yk-table-column>
     <yk-table-column property="desc" label="操作">
-      <yk-button type="secondary" status="primary">添加</yk-button>
-      <yk-button type="outline" status="primary" style="margin-left: 8px">
-        删除
-      </yk-button>
+      <template #default="{ row, index }">
+        <yk-button type="secondary" status="primary" @click="handleAdd(row)">
+          添加
+        </yk-button>
+        <yk-button
+          type="outline"
+          status="primary"
+          style="margin-left: 8px"
+          @click="handleDelete(index)"
+        >
+          删除
+        </yk-button>
+      </template>
     </yk-table-column>
   </yk-table>
 </template>
 <script setup lang="ts">
-const dataList = []
-for (let index = 0; index < 5; index++) {
-  dataList.push({
+import { reactive , ref } from 'vue'
+
+const tableRef = ref(null)
+const dataList = reactive([
+  {
     name: '浩哥看沟通',
     email: 'xigeotmete@qq.com',
     bir: '1994.03.12',
+  },
+  {
+    name: 'Line2',
+    email: '',
+    bir: '1994.03.12',
+  },
+
+  {
+    name: 'DF的删除测试',
+    email: 'xx',
+    bir: '2052.1.1',
     // desc: '这句话不知道 当讲不当讲，反正就是想讲一讲的',
-  })
-}
+  },
+  {
+    name: 'DF的编辑测试',
+    email: 'nn',
+    bir: '2052.1.1',
+    // desc: '这句话不知道 当讲不当讲，反正就是想讲一讲的',
+  },
+  {
+    name: 'DFIndex测试',
+    email: 'tt',
+    bir: '2052.1.1',
+    // desc: '这句话不知道 当讲不当讲，反正就是想讲一讲的',
+  },
+])
+
 const handleSelectionChange = (val) => {
   console.log(val)
 }
+const handleAdd = (e) => {
+  console.log('🚀 Add ~ e:', e)
+}
+const handleDelete = (index) => {
+  console.log('🚀 Delete ~ e:', index)
+  dataList.splice(index, 1)
+  console.log('🚀 ~ handleDelete ~ dataList:', dataList)
+}
 </script>
diff --git a/packages/yike-design-demo/src/examples/table/table-tbody.vue b/packages/yike-design-demo/src/examples/table/table-tbody.vue
@@ -0,0 +1,43 @@
+<template>
+  <yk-table :data="dataList">
+    <yk-table-column property="name" label="用户名"></yk-table-column>
+    <yk-table-column property="email" label="邮箱"></yk-table-column>
+    <yk-table-column property="bir" label="生日"></yk-table-column>
+    <yk-table-column property="desc" label="简介"></yk-table-column>
+    <yk-table-column
+      property="manage"
+      label="操作"
+      align="right"
+    ></yk-table-column>
+    <template #tbody>
+      <tr v-for="(item, index) in dataList" :key="index" class="yk-table__row">
+        <td class="yk-table__cell">
+          <yk-input v-model="item.name" />
+        </td>
+        <td class="yk-table__cell">
+          {{ item.email }}
+        </td>
+        <td class="yk-table__cell">
+          {{ item.bir }}
+        </td>
+        <td class="yk-table__cell">
+          {{ item.desc }}
+        </td>
+        <td class="yk-table__cell text-right">
+          <yk-text type="primary" style="cursor: pointer">删除</yk-text>
+        </td>
+      </tr>
+    </template>
+  </yk-table>
+</template>
+<script setup lang="ts">
+const dataList = []
+for (let index = 0; index < 5; index++) {
+  dataList.push({
+    name: '浩哥看沟通',
+    email: 'xigeotmete@qq.com',
+    bir: '1994.03.12',
+    desc: '这句话不知道 当讲不当讲，反正就是想讲一讲的',
+  })
+}
+</script>
diff --git a/packages/yike-design-demo/src/style/markdown.less b/packages/yike-design-demo/src/style/markdown.less
@@ -112,17 +112,17 @@
     }
 
     th {
-      padding-left: @space-m;
+      padding: 0 @space-xl;
       font-size: @size-s;
       font-weight: 600;
       text-align: left;
-      background-color: @bg-color-m;
+      background-color: @bg-color-s;
       transition: background-color @animats;
-      line-height: 44px;
+      line-height: 56px;
     }
 
     td {
-      padding: 10px @space-m;
+      padding: @space-l @space-xl;
       max-width: 240px;
       border-top: 1px solid @line-color-s;
       text-align: left;

diff --git a/packages/yike-design-demo/src/views/develop/getting-started.md b/packages/yike-design-demo/src/views/develop/getting-started.md
@@ -2,7 +2,7 @@
 
 ### 安装方式
 
-```
+```ts
 npm install --save-dev @yike-design/ui
 ```
 

diff --git a/packages/yike-design-ui/CHANGELOG.md b/packages/yike-design-ui/CHANGELOG.md
@@ -1,6 +1,35 @@
 # 更新日志 
 
 
+### [0.0.13](https://github.com/ecaps1038/yike-design-dev/compare/v0.0.12...v0.0.13) (2024-03-25)
+
+
+### ✨ Features | 新功能
+
+* **test:** remove doc default button style ([43e237e](https://github.com/ecaps1038/yike-design-dev/commit/43e237e00b917fafdeeb4c3f34fd05f7b2d4c96b))
+
+
+### ✏️ Documentation | 文档
+
+* Modal组件文档优化 ([b55c32d](https://github.com/ecaps1038/yike-design-dev/commit/b55c32dc7e4ce3323774e1a4c44330993a73ea07))
+* modal组件文档修改 ([91998a3](https://github.com/ecaps1038/yike-design-dev/commit/91998a35b4d9fd8151e6559e0bfc32ab7e8028b0))
+* **started:** modify start code style ([9722a20](https://github.com/ecaps1038/yike-design-dev/commit/9722a20ae3f64b9880858d63c9c40f45320e983f))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* **button:** fix status style repeat ([f70340e](https://github.com/ecaps1038/yike-design-dev/commit/f70340e78aae096b273aef74866166caa31c154b))
+* **button:** simplify class names ([9ad8b2e](https://github.com/ecaps1038/yike-design-dev/commit/9ad8b2edd8193f975c3f4b994a2816821c7f57cd))
+* **input:** remove multiple bem ([96a3d27](https://github.com/ecaps1038/yike-design-dev/commit/96a3d276711c38b72a172405cab544f50e5cf425))
+* modal组件新增content-hight属性 ([ba18e91](https://github.com/ecaps1038/yike-design-dev/commit/ba18e91e120192c164482c80ed2733f6504157ff))
+* **space:** fix space undifined ([#337](https://github.com/ecaps1038/yike-design-dev/issues/337)) ([743931f](https://github.com/ecaps1038/yike-design-dev/commit/743931f0a451104853b482f00e9aeca3f9ec03a0))
+* **styles:** 优化颜色混合模式 ([111b962](https://github.com/ecaps1038/yike-design-dev/commit/111b9624a2b2fc3f11c4db53e27bbb7083ca8c9c))
+* **styles:** 优化颜色混合模式 ([4392dc8](https://github.com/ecaps1038/yike-design-dev/commit/4392dc8c19964311eacd54f6b2e3bfb18904ceb0))
+* **table:** 优化样式 ([02bca5e](https://github.com/ecaps1038/yike-design-dev/commit/02bca5e8b30bf72638698c59851ec1539e314ae6))
+* **table:** 简单增加内容插槽 ([a880f3d](https://github.com/ecaps1038/yike-design-dev/commit/a880f3da423e91771153349f9666f70dd8bcd342))
+* table组件样式调整 ([0648ff4](https://github.com/ecaps1038/yike-design-dev/commit/0648ff4ef4ebb215084eb8dda15f2f0906e31889))
+* table组件样式调整 ([e1a8480](https://github.com/ecaps1038/yike-design-dev/commit/e1a8480519ba90bafd09046786c08a2e44982d01))
+
 ### [0.0.12](https://github.com/ecaps1038/yike-design-dev/compare/v0.0.11...v0.0.12) (2024-03-20)
 
 

diff --git a/packages/yike-design-ui/components/alert/style/variables.less b/packages/yike-design-ui/components/alert/style/variables.less
@@ -1,4 +1,4 @@
-@import '../../styles/color/colors.less';
+@import '../../styles/basis.less';
 @alert-info-color: @pcolor;
 @alert-success-color: @scolor;
 @alert-warning-color: @wcolor;

diff --git a/packages/yike-design-ui/components/anchor/style/index.less b/packages/yike-design-ui/components/anchor/style/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/color/colors.less';
+@import '../../styles/basis.less';
 @import '../../scrollbar/style/index.less';
 .yk-anchor {
   position: relative;

diff --git a/packages/yike-design-ui/components/avatar/style/index.less b/packages/yike-design-ui/components/avatar/style/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/color/colors.less';
+@import '../../styles/basis.less';
 .yk-avatar {
   display: inline-flex;
   justify-content: center;

diff --git a/packages/yike-design-ui/components/back-top/style/index.less b/packages/yike-design-ui/components/back-top/style/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/color/colors.less';
+@import '../../styles/basis.less';
 .yk-backtop {
   position: fixed;
   z-index: 999;

diff --git a/packages/yike-design-ui/components/badge/style/index.less b/packages/yike-design-ui/components/badge/style/index.less
@@ -1,4 +1,4 @@
-@import '../../styles/color/colors.less';
+@import '../../styles/basis.less';
 .modal {
   &-enter {
     &-from {