Merge pull request #462 from ielgnaw/patch

feat: bump to 2.5.8
TencentBlueKing · Dec 5, 2023 · b89bcfc · b89bcfc
2 parents 7203dae + b47ae8c
commit b89bcfc
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 65 deletions.
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
@@ -8,74 +8,27 @@
 
 <div class="changelog-wrapper">
 
-### 2.5.8-beta.12 {page=#/changelog}
-
-* **[fix]**:
-    - [Tab 选项卡](#/tab) 修复 tab 组件 type 类型为 card-tab 一直抛 warn 问题
-* **[add]**:
-    - [Table表格](#/table) Column resize style update
-
----
-
-### 2.5.8-beta.11 {page=#/changelog}
+### 2.5.8 {page=#/changelog}
+###### 2023.12.05
 
 * **[add]**:
+    - [DatePicker 日期选择器](#/date-picker) 年/月选择器新增 `cell-class` 配置项以支持自定义日期样式
+    - [Form 表单](#/form) 验证时错误信息样式调整
     - [Message 消息提示](#/message) 高阶模式图钉增加取消快捷键
-
----
-
-### 2.5.8-beta.10 {page=#/changelog}
-
-* **[fix]**:
-    - [Message 消息提示](#/message) 高阶模式容器 zIndex 问题修复
-
----
-
-### 2.5.8-beta.9 {page=#/changelog}
-
-* **[fix]**:
-    - [Pagination 分页](#/pagination) 修复跳转分页输入非整数时显示错误的问题
-
----
-
-### 2.5.8-beta.8 {page=#/changelog}
-
-* **[fix]**:
-    - [Message 消息提示](#/message) 高阶模式支持多开 & 互斥模式
-
----
-
-### 2.5.8-beta.5 {page=#/changelog}
-
+    - [Table表格](#/table) Column resize style update
+    - [Table表格](#/table) 增加[合并行或列](#/table?anchor=he-bing-xing-huo-lie)示例
 * **[fix]**:
     - [Message 消息提示](#/message) [规范化高阶使用配置](#/message?anchor=gao-jie-yong-fa) 问题修复
     - [Select 下拉选框](#/select) 修复 checkbox 模式时 options 的 disabled 属性没有传递问题
-
----
-
-### 2.5.8-beta.3 {page=#/changelog}
-
+    - [Message 消息提示](#/message) 高阶模式支持多开 & 互斥模式
+    - [Pagination 分页](#/pagination) 修复跳转分页输入非整数时显示错误的问题
+    - [Message 消息提示](#/message) 高阶模式容器 zIndex 问题修复
+    - [Tab 选项卡](#/tab) 修复 tab 组件 type 类型为 card-tab 一直抛 warn 的问题
 * **[update]**:
     - [DatePicker 日期选择器](#/date-picker) 年/月/日选择器 `cell-class` 配置回调函数参数增加 `pickerType` 属性，标识当前是什么类型的 picker
 
 ---
 
-### 2.5.8-beta.2 {page=#/changelog}
-
-* **[add]**:
-    - [DatePicker 日期选择器](#/date-picker) 年/月/日选择器 `cell-class` 配置回调函数参数增加 `pickerType` 属性，标识当前是什么类型的 picker
-
----
-
-### 2.5.8-beta.1 {page=#/changelog}
-
-* **[add]**:
-    - [DatePicker 日期选择器](#/date-picker) 年/月选择器新增 `cell-class` 配置项以支持自定义日期样式
-* **[update]**:
-    - [Form 表单](#/form) 验证时错误信息样式调整
-
----
-
 ### 2.5.7 {page=#/changelog}
 ###### 2023.07.24
 

diff --git a/example/components/select/example.vue b/example/components/select/example.vue
@@ -28,7 +28,7 @@
 
 <template>
   <section>
-    <bk-select searchable searchable-min-count="31" :multiple="multiple" v-model="value" :remote-method="remote" :display-tag="true" :tag-fixed-height="false" selected-style="checkbox">
+    <bk-select searchable :searchable-min-count="31" :multiple="multiple" v-model="value" :remote-method="remote" :display-tag="true" :tag-fixed-height="false" selected-style="checkbox">
       <bk-option v-for="(option, index) in options"
         :key="option.id"
         v-bind="option"

diff --git a/example/components/sideslider/readme.md b/example/components/sideslider/readme.md
@@ -14,7 +14,8 @@
         data () {
             return {
                 defaultSettings: {
-                    isShow: false
+                    isShow: false,
+                    title: '更多参数配置'
                 },
                 customSettings: {
                     isShow: false,
@@ -141,7 +142,7 @@
 <template>
     <div>
         <bk-button :type="'primary'" @click="defaultSettings.isShow = true">默认配置</bk-button>
-        <bk-sideslider :is-show.sync="defaultSettings.isShow" :quick-close="true">
+        <bk-sideslider :is-show.sync="defaultSettings.isShow" :title="defaultSettings.title" :quick-close="true">
             <div slot="content">
                 <div style="height: 1000px;"></div>
             </div>

diff --git a/example/components/sideslider/single.vue b/example/components/sideslider/single.vue
@@ -27,7 +27,7 @@
 -->
 
 <template>
-  <bk-sideslider :is-show.sync="isShow" :quick-close="true" :width="defaultSettings.width" transfer="true">
+  <bk-sideslider :is-show.sync="isShow" :quick-close="true" :width="defaultSettings.width" :transfer="true">
     <template>
       <div slot="content">
         qweeqw

diff --git a/example/components/table/readme.md b/example/components/table/readme.md
@@ -186,10 +186,72 @@
             fields: settingFields,
             selectedFields: settingFields.slice(0, 4),
             size: 'small'
-          }
+          },
+          spanMethodData: [
+              {
+                  ip: '192.168.0.1',
+                  source: 'QQ',
+                  status: '创建中',
+                  create_time: '2018-05-25 15:02:24'
+              },
+              {
+                  ip: '192.168.0.2',
+                  source: '微信',
+                  status: '正常',
+                  create_time: '2018-05-25 15:02:24'
+              },
+              {
+                  ip: '192.168.0.2',
+                  source: '微信',
+                  status: '正常',
+                  create_time: '2018-05-25 15:02:24'
+              },
+              {
+                  ip: '192.168.0.2',
+                  source: '微信',
+                  status: '正常',
+                  create_time: '2018-05-25 15:02:24'
+              },
+              {
+                  ip: '192.168.0.2',
+                  source: '微信',
+                  status: '正常',
+                  create_time: '2018-05-25 15:02:24'
+              },
+              {
+                  ip: '192.168.0.2',
+                  source: '微信',
+                  status: '正常',
+                  create_time: '2018-05-25 15:02:24'
+              }
+          ]
         }
       },
       methods: {
+        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+          if (rowIndex % 2 === 0) {
+            if (columnIndex === 0) {
+              return [1, 2];
+            } else if (columnIndex === 1) {
+              return [0, 0];
+            }
+          }
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+          if (columnIndex === 0) {
+            if (rowIndex % 2 === 0) {
+              return {
+                rowspan: 2,
+                colspan: 1
+              };
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              };
+            }
+          }
+        },
         handleScrollToBottom() {
           this.bottomLoadingOptions.isLoading = true
           setTimeout(() => {
@@ -1558,6 +1620,114 @@ export default {
 ```
 :::
 
+### 合并行或列 {page=#/table}
+
+:::demo 配置`span-method`属性设置合并行或列
+
+```html
+
+<template>
+    <div>
+        <p>合并行</p>
+        <bk-table :data="spanMethodData" :span-method="arraySpanMethod" col-border>
+            <bk-table-column label="名称/内网IP" prop="ip"></bk-table-column>
+            <bk-table-column label="来源" prop="source"></bk-table-column>
+            <bk-table-column label="状态" prop="status"></bk-table-column>
+            <bk-table-column label="创建时间" prop="create_time"></bk-table-column>
+        </bk-table>
+    </div>
+    <div style="margin-top: 30px;">
+        <p>合并列</p>
+        <bk-table :data="spanMethodData" :span-method="objectSpanMethod" col-border>
+            <bk-table-column label="名称/内网IP" prop="ip"></bk-table-column>
+            <bk-table-column label="来源" prop="source"></bk-table-column>
+            <bk-table-column label="状态" prop="status"></bk-table-column>
+            <bk-table-column label="创建时间" prop="create_time"></bk-table-column>
+        </bk-table>
+    </div>
+</template>
+<script>
+    import {
+        bkTable,
+        bkTableColumn
+    } from '{{BASE_LIB_NAME}}'
+    export default {
+        components: {
+            bkTable,
+            bkTableColumn
+        },
+        data() {
+            return {
+                spanMethodData: [{
+                        ip: '192.168.0.1',
+                        source: 'QQ',
+                        status: '创建中',
+                        create_time: '2018-05-25 15:02:24'
+                    },
+                    {
+                        ip: '192.168.0.2',
+                        source: '微信',
+                        status: '正常',
+                        create_time: '2018-05-25 15:02:24'
+                    },
+                    {
+                        ip: '192.168.0.2',
+                        source: '微信',
+                        status: '正常',
+                        create_time: '2018-05-25 15:02:24'
+                    },
+                    {
+                        ip: '192.168.0.2',
+                        source: '微信',
+                        status: '正常',
+                        create_time: '2018-05-25 15:02:24'
+                    },
+                    {
+                        ip: '192.168.0.2',
+                        source: '微信',
+                        status: '正常',
+                        create_time: '2018-05-25 15:02:24'
+                    },
+                    {
+                        ip: '192.168.0.2',
+                        source: '微信',
+                        status: '正常',
+                        create_time: '2018-05-25 15:02:24'
+                    }
+                ]
+            }
+        },
+        methods: {
+            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+                if (rowIndex % 2 === 0) {
+                    if (columnIndex === 0) {
+                        return [1, 2];
+                    } else if (columnIndex === 1) {
+                        return [0, 0];
+                    }
+                }
+            },
+            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+                if (columnIndex === 0) {
+                    if (rowIndex % 2 === 0) {
+                        return {
+                            rowspan: 2,
+                            colspan: 1
+                        };
+                    } else {
+                        return {
+                            rowspan: 0,
+                            colspan: 0
+                        };
+                    }
+                }
+            }
+        }
+    }
+</script>
+```
+:::
+
 
 ### bk-table 属性 {page=#/table}
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |

diff --git a/example/components/tooltips/example.vue b/example/components/tooltips/example.vue
@@ -14,7 +14,7 @@
     </div> -->
     <div class="example-item">
       <bk-button
-        v-bk-tooltips="{ content: '<div style=\'color: red\'>asdasd</div>', allowHTML: false }">
+        v-bk-tooltips="{ content: '*', allowHTML: false }">
         allowHTML - false
       </bk-button>
     </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bk-magic-vue",
-  "version": "2.5.8-beta.12",
+  "version": "2.5.8",
   "description": "基于蓝鲸 Magicbox 和 Vue 的前端组件库",
   "main": "dist/bk-magic-vue.min.js",
   "files": [

diff --git a/src/components/sideslider/sideslider.vue b/src/components/sideslider/sideslider.vue
@@ -36,7 +36,7 @@
           </div>
           <div class="bk-sideslider-title" :style="{ padding: calcDirection === 'left' ? '0 0 0 50px' : '0 0 0 30px' }">
             <slot name="header">
-              {{title || t('bk.sideslider.title')}}
+              <div class="title-content">{{title || t('bk.sideslider.title')}}</div>
             </slot>
           </div>
         </div>

diff --git a/src/ui/sideslider.css b/src/ui/sideslider.css
@@ -67,6 +67,11 @@
         font-size: 16px;
         /* font-weight: bold; */
         color: $newBlackColor1;
+        .title-content {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
     }
     &-content {
         overflow: auto;