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 <[email protected]> Co-authored-by: Emiya0306 <[email protected]> Co-authored-by: xuejunnan <[email protected]> Co-authored-by: ChunYan Huang <[email protected]>
Kyligence · Oct 24, 2023 · 8c0dc3e · 8c0dc3e
1 parent ce10949
commit 8c0dc3e
Show file tree

Hide file tree

Showing 29 changed files with 866 additions and 218 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -19,7 +19,8 @@
           3: {value: '我是根据选项一遍历出来的值'},
           6: {value: '我是根据选项二遍历出来的值'},
           9: {value: '我是根据选项三遍历出来的值'}
-        }
+        },
+        tabRadio: 3
       };
     },
     methods: {
@@ -30,6 +31,15 @@
   };
 </script>
 
+<style>
+  .demo-radio-tab .ksd-tag-ml {
+    margin-left:4px;
+  }
+  .demo-radio-tab .ksd-fs-14 {
+    font-size: 14px;
+  }
+</style>
+
 ## Radio 单选框
 
 :::tip 
@@ -41,17 +51,22 @@
 
 ### 基础用法
 
-由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
+由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。基础用法时，size 情况主要是 medium 和 small 两种
 
 :::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
 
 ```html
 <template>
-  <el-radio v-model="radio" label="1">备选项</el-radio>
-  <el-radio v-model="radio" label="2">备选项</el-radio>
-
-  <el-radio v-model="radio" size="small" label="1">小号备选项</el-radio>
-  <el-radio v-model="radio" size="small" label="2">小号备选项</el-radio>
+  <p>默认 size: medium</p>
+  <div>
+    <el-radio v-model="radio" label="1">备选项</el-radio>
+    <el-radio v-model="radio" label="2">备选项</el-radio>
+  </div>
+  <p style="margin-top:30px;">size: small</p>
+  <div>
+    <el-radio v-model="radio" size="small" label="1">小号备选项</el-radio>
+    <el-radio v-model="radio" size="small" label="2">小号备选项</el-radio>
+  </div>
 </template>
 
 <script>
@@ -177,7 +192,7 @@
 
 实际应用场景可能有更复杂的情况，可以根据实际情况进行处理，提供的demo是为了说明有提供change这个事件。
 
-### 按钮样式
+### 按钮样式（弃用）
 
 按钮样式的单选组合。
 
@@ -233,6 +248,120 @@
 ```
 :::
 
+
+### tab 按钮样式
+
+适用于纯单选效果的场景，没有其他整体模块与之联动的情况，使用此组件。
+
+如果是有 tab head 和 body 的场景，切换 head 时，底下集中的一块内容会跟着互斥变化的 UI 场景，请移步使用 [Tab](#/zh-CN/component/tabs#tab-button) 组件中的 button 模式。
+
+tab 按钮样式的单选组合，新增两个属性 is-tab 和 is-flex-equally，is-tab 控制 UI 风格，is-flex-equally 控制是否容器内等分展示
+
+:::demo 在 el-radio-group 元素上加上属性 is-tab 后，就定制为 tab 样式的单选按钮组 ，带上 is-flex-equally 属性的话就是等分模式
+```html
+<template>
+  <p>基础使用 size: medium，高度 34px</p>
+  <div>
+    <el-radio-group v-model="tabRadio" size="medium" :is-tab="true">
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>基础使用，不设 size， 默认 size 为 small，高度 32px</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true">
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>基础使用，size 为 mini 28px</p>
+  <div>
+    <el-radio-group v-model="tabRadio" size="mini" :is-tab="true">
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>label 内容比较少的情况</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true">
+      <el-radio :label="3">年</el-radio>
+      <el-radio :label="6">月</el-radio>
+      <el-radio :label="9">日</el-radio>
+    </el-radio-group>
+  </div>
+  <p>等分模式</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true" :is-flex-equally="true">
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>某个选项带一个 tag 标签</p>
+  <div class="demo-radio-tab">
+    <el-radio-group v-model="tabRadio" :is-tab="true" :is-flex-equally="true">
+      <el-radio :label="3">备选项 <el-tag class="ksd-tag-ml" is-light size="small">荐</el-tag></el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>某个选项带一个 icon 标签，hover 到 icon 上有 tooltip 提示</p>
+  <div class="demo-radio-tab">
+    <el-radio-group v-model="tabRadio" :is-tab="true">
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">
+        <span>备选项</span>
+        <el-tooltip placement="top" content="该选项需要注意xxx">
+          <i class="el-ksd-icon-info_border_16 ksd-tag-ml ksd-fs-14"></i>
+        </el-tooltip>
+      </el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+  <p>disable 整组</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true" disabled>
+      <el-radio :label="3">备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+
+  <p>disable 单项</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true">
+      <el-radio :label="3" disabled>备选项</el-radio>
+      <el-radio :label="6" disabled>备选项</el-radio>
+      <el-radio :label="9">备选项</el-radio>
+    </el-radio-group>
+  </div>
+
+  <p>均分模式时，disable 单项</p>
+  <div>
+    <el-radio-group v-model="tabRadio" :is-tab="true" :is-flex-equally="true">
+      <el-radio :label="3" disabled>备选项</el-radio>
+      <el-radio :label="6">备选项</el-radio>
+      <el-radio :label="9" disabled>备选项</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        tabRadio: 3
+      };
+    }
+  }
+</script>
+```
+:::
+
+
 ### 带有边框
 
 :::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
@@ -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%">
     <el-table-column