From 8c0dc3e011a0c6c5b1de587168ac6d304afe65be Mon Sep 17 00:00:00 2001 From: Qian Xia Date: Tue, 24 Oct 2023 15:15:39 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/4.x' into 4.x-hotfix (#176) * minor, add waypoint component and optimize table lazy load (#164) * update version * minor, fix table-data-cell expend bug (#166) * minor, add el-skeleton for table lazy loading (#167) * minor, optimize table (#168) * minor, add verifyPosition method for virtual render (#169) * minor, fix for chrome 60 not support DomRect.x.y * KDS-221,add radio tab btn (#171) * KDS-221,update tab btn (#172) * KDS-221,fix radio and tab button ui (#173) * minor, update icon --------- Co-authored-by: Jie Luo Co-authored-by: Emiya0306 Co-authored-by: xuejunnan <779730218@qq.com> Co-authored-by: ChunYan Huang --- .gitignore | 1 + CHANGELOG.zh-CN.md | 8 + build/config.js | 4 +- components.json | 3 +- examples/docs/zh-CN/radio.md | 147 ++++++++++++++- examples/docs/zh-CN/table.md | 1 + examples/docs/zh-CN/tabs.md | 170 +++++++++++++++++- examples/versions.json | 2 +- package.json | 6 +- packages/radio/src/radio-group.vue | 22 ++- packages/radio/src/radio.vue | 11 +- packages/table/src/table-body.js | 49 ++--- packages/table/src/table-data-cell.js | 144 --------------- packages/table/src/table-row.js | 146 +++++++++++++++ packages/table/src/table.vue | 33 ++++ packages/tabs/src/tabs.vue | 9 +- packages/theme-chalk/src/font-icon-new.scss | 10 +- .../theme-chalk/src/fonts-new/iconfont.json | 7 + .../theme-chalk/src/fonts-new/iconfont.ttf | Bin 35680 -> 35816 bytes .../theme-chalk/src/fonts-new/iconfont.woff | Bin 18340 -> 18424 bytes .../theme-chalk/src/fonts-new/iconfont.woff2 | Bin 15172 -> 15240 bytes packages/theme-chalk/src/index.scss | 1 + packages/theme-chalk/src/radio-group.scss | 7 + packages/theme-chalk/src/radio.scss | 59 +++++- packages/theme-chalk/src/tabs.scss | 68 +++++-- packages/theme-chalk/src/waypoint.scss | 0 packages/waypoint/index.js | 8 + packages/waypoint/waypoint.vue | 161 +++++++++++++++++ src/index.js | 7 +- 29 files changed, 866 insertions(+), 218 deletions(-) delete mode 100644 packages/table/src/table-data-cell.js create mode 100644 packages/table/src/table-row.js create mode 100644 packages/theme-chalk/src/waypoint.scss create mode 100644 packages/waypoint/index.js create mode 100644 packages/waypoint/waypoint.vue diff --git a/.gitignore b/.gitignore index 032c1b6dd0..ba9c85f481 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ waiter.config.js build/bin/algolia-key.js .envrc .env +package-lock.json diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 22e9afbdd4..7b02c34216 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,13 @@ ## 更新日志 +### 5.0.0-beta.7 +*2023-03-14* +- 新增：radio 组件的 tab 按钮展现方式 +- 更新：tab 组件的按钮形式时，扩展了 size 风格，加了 is-full 参数，控制是否撑满等分显示 + +*2023-02-16* +- 新增：Waypoint组件 +- 优化：Table组件单元格懒加载 ### 5.0.0 *2022-11-23* - 修改：色彩变量升级 diff --git a/build/config.js b/build/config.js index 9e23674166..bc149f7f93 100644 --- a/build/config.js +++ b/build/config.js @@ -28,9 +28,7 @@ transitionList.forEach(function(file) { }); externals = [Object.assign({ - vue: 'vue', - 'intersection-observer': 'intersection-observer', - 'vue-waypoint': 'vue-waypoint' + vue: 'vue' }, externals), nodeExternals()]; exports.externals = externals; diff --git a/components.json b/components.json index f3c77f7ec4..acae9b7f5a 100644 --- a/components.json +++ b/components.json @@ -72,5 +72,6 @@ "footer": "./packages/footer/index.js", "avatar": "./packages/avatar/index.js", "skeleton": "./packages/skeleton/index.js", - "skeleton-item": "./packages/skeleton-item/index.js" + "skeleton-item": "./packages/skeleton-item/index.js", + "waypoint": "./packages/waypoint/index.js" } diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md index fba534d741..4481026398 100644 --- a/examples/docs/zh-CN/radio.md +++ b/examples/docs/zh-CN/radio.md @@ -19,7 +19,8 @@ 3: {value: '我是根据选项一遍历出来的值'}, 6: {value: '我是根据选项二遍历出来的值'}, 9: {value: '我是根据选项三遍历出来的值'} - } + }, + tabRadio: 3 }; }, methods: { @@ -30,6 +31,15 @@ }; + + ## Radio 单选框 :::tip @@ -41,17 +51,22 @@ ### 基础用法 -由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 +由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。基础用法时，size 情况主要是 medium 和 small 两种 :::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。 ```html +``` +::: + + ### 带有边框 :::demo 设置`border`属性可以渲染为带有边框的单选框。 @@ -296,6 +425,8 @@ | disabled | 是否禁用 | boolean | — | false | | text-color | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff | | fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF | +| is-tab | 是否是 tab 按钮形式的 Radio | boolean | true/false | false | +| is-flex-equally | 是否占整行，同时均分每个选项 | boolean | true/false | false | ### Radio-group Events | 事件名称 | 说明 | 回调参数 | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index c15333c93f..a3c1534b61 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -2449,6 +2449,7 @@ table 空态效果有多种组合。 :data="tableData7" height="250" border + :scroll-ancestors="() => ['.page-component__scroll .el-scrollbar__wrap']" virtual-cell-height="40px" style="width: 100%"> tab.name !== targetName); + }, + changeBtnTabType1 (tab, event) { + console.log(tab, event); + }, + changeBtnTabType2 (tab, event) { + console.log(tab, event); + }, + changeBtnTabType3 (tab, event) { + console.log(tab, event); } } } + ## Tabs 标签页 @@ -571,10 +588,159 @@ vue版本升级后，要求v-for使用时要规定key属性，不然会报警告 ``` ::: +### Tab button + +适用于 Tab 场景，就是有 tab head 和 body 的场景，切换 head 时，底下集中的一块内容会跟着互斥变化的 UI 场景。当前用的比较多的尺寸是 small 这个尺寸。 +如果是纯单选效果的，请移步使用 [Radio](#/zh-CN/component/radio#tab-an-niu-yang-shi) 组件中的 radio tab button 模式。 + +:::demo +```html +

基础用法 - large size，高度 34px,同 radio 的 medium 高度，对应 UED 稿子的 large 尺寸

+
+ + 我是列表 tab 下的数据 + 我是图表 tab 下的数据 + +

同等效果的 medium - radio

+
+ + 列表 + 图表 + +
+
+
+

基础用法 - medium size，高度 32px,同 radio 的 small 高度，对应 UED 稿子的 medium 尺寸

+
+ + 我是列表 tab 下的数据 + 我是图表 tab 下的数据 + +

同等效果的 small - radio

+
+ + 列表 + 图表 + +
+
+
+

基础用法 - small size，高度 28px,同 radio 的 mini 高度，对应 UED 稿子的 small 尺寸

+
+ + 我是列表 tab 下的数据 + 我是图表 tab 下的数据 + +

同等效果的 mini - radio

+
+ + 列表 + 图表 + +
+
+
+

+某选项带 tag 或者 icon，同时对于tag 或者 icon 上hover 时显示 tips,hover 区域可以自由定义，el-tooltip 包起需要tips 的原始即可。label 以 slot 形式填充时，样式微调就依赖项目里，不在组件库中进行写死。 +
+文本和右侧元素之间，是 4px 的间距，实际使用时，项目里自己使用项目里的原子类吧~ +

+
+ + + + 列表 + + 荐 + + +
pane-data
+ + pane-chart + +
+
+

+ 基础用法 - small size，高度 32px +
均分撑满整行的方式 +

+
+ + pane-data + pane-chart + +
+
+

带 tag 的，均分撑满整行的方式

+
+ + + + 列表 + + 荐 + + +
pane-data
+ + pane-chart + +
+
+

基础用法 - disabled

+
+ + pane-data + pane-chart + +
+
+

撑满整行的 - disabled

+
+ + pane-data + pane-chart + +
+

label 内容比较少的时候

+
+ + 我是列表 tab 下的数据 + 我是图表 tab 下的数据 + +
+ + +``` +::: + ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| type | 风格类型 | string | card/border-card | — | +| size | 大小 | string | large/medium/small | — | +| type | 风格类型 | string | card/border-card/button | — | +| is-full | 是否占满全屏，不和 closable 等共用，配合 type 为 button 时效果使用 | boolean | true/false | false | | closable | 标签是否可关闭 | boolean | — | false | | addable | 标签是否可增加 | boolean | — | false | | editable | 标签是否同时可增加和关闭 | boolean | — | false | diff --git a/examples/versions.json b/examples/versions.json index ca446dce22..e3d2dfdfea 100644 --- a/examples/versions.json +++ b/examples/versions.json @@ -1 +1 @@ -{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","5.0.0-beta.6":"2.2"} \ No newline at end of file +{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","5.0.0-beta.7":"2.2"} diff --git a/package.json b/package.json index 0b2aa6a5a9..e7e791ff1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kyligence-ui", - "version": "5.0.0-beta.6", + "version": "5.0.0-beta.7", "description": "Kyligence UI for Vue", "main": "lib/kyligence-ui.common.js", "publishConfig": { @@ -65,9 +65,7 @@ "normalize-wheel": "^1.0.1", "sortablejs": "1.15.0", "throttle-debounce": "^1.0.1", - "user": "0.0.0", - "vue-waypoint": "^3.5.2", - "intersection-observer": "^0.12.2" + "user": "0.0.0" }, "peerDependencies": { "vue": "2.5.2" diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue index 145e2ae936..f66e9d691e 100644 --- a/packages/radio/src/radio-group.vue +++ b/packages/radio/src/radio-group.vue @@ -1,6 +1,10 @@