feat: bump to 2.4.6 (#222)

TencentBlueKing · Mar 2, 2022 · 3cdc787 · 3cdc787
1 parent e95010f
commit 3cdc787
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 12 deletions.
diff --git a/example/components/badge/readme.md b/example/components/badge/readme.md
@@ -1,16 +1,45 @@
 <script>
-    import { bkBadge, bkButton } from '@'
+    import { bkBadge, bkTable, bkTableColumn, bkButton } from '@'
 
     export default {
         components: {
             bkBadge,
-            bkButton
+            bkButton,
+            bkTable,
+            bkTableColumn
         },
         data () {
             return {
                 customBadge: {
                     visible: true
-                }
+                },
+                badgeStatusMap: {
+                    '完成': 'success',
+                    '进行中': 'primary',
+                    '失败': 'danger',
+                },
+                tableData: [{
+                    date: '2016-05-02',
+                    name: '王小虎虎虎虎',
+                    status: '完成',
+                    order: 2,
+                    address: '上海市普陀区金沙江路 1518 弄',
+                    tag: '家'
+                }, {
+                  date: '2016-05-04',
+                  name: '王小虎',
+                  status: '进行中',
+                  order: 3,
+                  address: '上海市普陀区金沙江路 1517 弄',
+                  tag: '公司'
+                }, {
+                  date: '2016-05-01',
+                  name: '王小虎',
+                  status: '失败',
+                  order: 4,
+                  address: '上海市普陀区金沙江路 1519 弄',
+                  tag: '家'
+                }]
             }
         },
         methods: {
@@ -75,6 +104,82 @@
 ```
 :::
 
+### 不包裹任何元素，独立使用 {page=#/badge}
+
+:::demo 可在不包裹任何元素情况下，独立使用 badge
+```html
+<template>
+    <bk-table class="my-table" :data="tableData" style="width: 100%" :max-height="400">
+        <bk-table-column prop="name" label="姓名" width="180">
+            <template slot-scope="props">
+                <span style="position: relative">
+                    {{props.row.name}}
+                    <bk-badge theme="danger" :val="props.row.order"></bk-badge>
+                </span>
+            </template>
+        </bk-table-column>
+        <bk-table-column prop="name" label="进度" width="180">
+            <template slot-scope="props">
+                <span style="position: relative">
+                    <bk-badge dot :theme="badgeStatusMap[props.row.status]"></bk-badge>
+                    {{props.row.status}}
+                </span>
+            </template>
+        </bk-table-column>
+        <bk-table-column prop="address" label="地址">
+        </bk-table-column>
+    </bk-table>
+</template>
+<script>
+    import { bkTable, bkTableColumn, bkBadge } from '{{BASE_LIB_NAME}}'
+    export default {
+        components: {
+            bkTable,
+            bkBadge,
+            bkTableColumn,
+            bkPopover
+        },
+        data () {
+            return {
+                badgeStatusMap: {
+                    '完成': 'success',
+                    '进行中': 'primary',
+                    '失败': 'danger',
+                },
+                tableData: [
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        status: '完成',
+                        order: 2,
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        tag: '家'
+                    },
+                    {
+                        date: '2016-05-04',
+                        name: '王小虎',
+                        status: '进行中',
+                        order: 3,
+                        address: '上海市普陀区金沙江路 1517 弄',
+                        tag: '公司'
+                    },
+                    {
+                        date: '2016-05-01',
+                        name: '王小虎',
+                        status: '失败',
+                        order: 4,
+                        address: '上海市普陀区金沙江路 1519 弄',
+                        tag: '家'
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+```
+:::
+
 ### 可自定义最大值 {page=#/badge}
 
 :::demo 配置参数 `val` 的值

diff --git a/example/components/big-tree/readme.md b/example/components/big-tree/readme.md
@@ -88,12 +88,14 @@
 
 ### 基础用法 {page=#/big-tree}
 
-:::demo 同步数据渲染, 通过设置 `show-checkbox` 开启节点勾选功能。
+:::demo 同步数据渲染, 通过设置 `show-checkbox` 开启节点勾选功能，通过设置 `enable-title-tip` 开启节点的 title 提示（浏览器的 title 提示）。
 
 ```html
 <template>
     <section>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            ref="tree"
+            enable-title-tip
             :show-checkbox="isShowCheckbox"
             :data="data"
             :show-link-line="isShowLinkLine"
@@ -261,7 +263,9 @@
 ```html
 <template>
     <section>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree"
             :selectable="true"
             :default-expanded-nodes="['0']"
             :default-selected-node="'0-2'"
@@ -321,7 +325,9 @@
         <div class="mb10">
             <bk-button @click="isShowCheckbox=!isShowCheckbox">是否显示节点复选框</bk-button>
         </div>
-        <bk-big-tree ref="tree"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree"
             :options="{ nameKey: 'name',folderKey: 'folder',idKey: 'identifier' }"
             :show-checkbox="isShowCheckbox"
             :data="tree"
@@ -401,7 +407,9 @@
                 </template>
             </bk-input>
         </div>
-        <bk-big-tree ref="tree3"
+        <bk-big-tree
+            enable-title-tip
+            ref="tree3"
             :show-checkbox="isShowCheckbox"
             :data="data"
             :show-link-line="isShowLinkLine2"
@@ -509,6 +517,7 @@
 | node-height | 单个节点的高度，用于虚拟滚动的数据计算， | Number | —— | `32` |
 | configurable | 仅作为数据展示用时，可将此属性配置为`false`，从而节省渲染开销，但会导致数据失去响应式的能力 | Boolean | —— | `true` |
 | padding | 节点左侧缩进的距离，默认为 16 | Number | —— | 16 |
+| enable-title-tip | 是否开启节点tip提示 | Boolean | —— | false |
 
 ### 事件 {page=#/big-tree}
 | 事件名称 | 说明 | 参数 |

diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
@@ -4,6 +4,20 @@
 
 <div class="changelog-wrapper">
 
+### 2.4.6 {page=#/changelog}
+###### 2022.03.03
+
+* **[add]**:
+    - [Badge 标记](#/badge) badge 组件支持[不包裹任何元素，独立使用](#/badge?anchor=bu-bao-guo-ren-he-yuan-su-du-li-shi-yong) [#18](https://github.com/TencentBlueKing/bkui-vue2/issues/18)
+    - [Big Tree 大树](#/big-tree) 新增 enable-title-tip 配置用来开启节点的 title 提示（浏览器的 title 提示）
+    - [Cascade 级联选框](#/cascade) 支持触发表单校验
+* **[fix]**:
+    - [Table 表格](#/table) 修复表格会被外部 white-space 样式影响问题
+    - [Affix 图钉](#/affix) 修复 affix 组件设置 target 后无宽度问题
+    - [Input 输入框](#/input) 数字输入框，修复设置最大最小输入范围清空内容后，点击加减控制图标，无论限制范围(min, max)，都会从 1 开始递增的问题
+
+---
+
 ### 2.4.5 {page=#/changelog}
 ###### 2022.01.20
 

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

diff --git a/src/components/affix/affix.vue b/src/components/affix/affix.vue
@@ -124,13 +124,16 @@ export default {
   methods: {
     // 解决设置滚动容器时window滚动Affix对象已固定不随滚的问题
     setTargetLoop () {
+      const rect = this.targetEl.getBoundingClientRect()
       if (this.offsetType === 'top') {
         this.styles = {
-          top: `${this.targetEl.getBoundingClientRect().top + this.offsetTop}px`
+          top: `${rect.top + this.offsetTop}px`,
+          width: `${rect.width}px`
         }
       } else {
         this.styles = {
-          bottom: `${window.innerHeight - this.targetEl.getBoundingClientRect().bottom + this.offsetBottom}px`
+          bottom: `${window.innerHeight - rect.bottom + this.offsetBottom}px`,
+          width: `${rect.width}px`
         }
       }
     },

diff --git a/src/components/big-tree/tree-item.vue b/src/components/big-tree/tree-item.vue
@@ -65,7 +65,7 @@
         :class="['node-icon', props.node.nodeIcon]">
       </i>
     </div>
-    <div class="node-content">
+    <div class="node-content" :title="props.enableTitleTip ? props.node.name : false">
       <slot
         :node="props.node"
         :data="props.node.data">

diff --git a/src/components/big-tree/tree.vue b/src/components/big-tree/tree.vue
@@ -43,6 +43,7 @@
     <!-- 非虚拟滚动 -->
     <template v-for="node in nodes" v-else>
       <tree-item
+        :enable-title-tip="enableTitleTip"
         :node="node"
         :ref="node.id"
         :key="node.id">
@@ -175,6 +176,10 @@ export default {
     size: {
       type: String,
       default: 'normal'
+    },
+    enableTitleTip: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

diff --git a/src/components/cascade/cascade.vue b/src/components/cascade/cascade.vue
@@ -307,6 +307,10 @@ export default {
   },
   watch: {
     showCascade (val) {
+      if (!val) {
+        // 通知表单组件，可用于实时验证
+        this.dispatch('bk-form-item', 'form-blur')
+      }
       this.$emit('toggle', val)
       this.filterableStatus = this.searchContent !== ''
       if (val) {
@@ -547,6 +551,8 @@ export default {
         const selectedList = this.multiple ? this.multipleSelectedList : this.selectedList
         this.$emit('input', newId)
         this.$emit('change', newId, oldId, JSON.parse(JSON.stringify(selectedList)))
+        // 通知表单组件，可用于实时验证
+        this.dispatch('bk-form-item', 'form-change')
       }
     },
     exposeMultiple (oldId) {

diff --git a/src/components/input/input.vue b/src/components/input/input.vue
@@ -522,6 +522,7 @@ export default {
       }
     },
     handleNumberDelete (event) {
+      this.curValue === '' && (this.curValue = this.max)
       const curNumberValue = Number(this.curValue)
       if (curNumberValue - 1 >= this.min) {
         const curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || ''
@@ -536,6 +537,7 @@ export default {
       }
     },
     handleNumberAdd (event) {
+      this.curValue === '' && (this.curValue = this.min)
       const curNumberValue = Number(this.curValue)
       if (curNumberValue <= this.max - 1) {
         const curLenAfterDot = (String(curNumberValue) || '').split('.')[1] || ''

diff --git a/src/ui/pagination.css b/src/ui/pagination.css
@@ -5,6 +5,7 @@ $hoverBackground: #eaf3ff;
 
 .bk-page {
     overflow: hidden;
+    white-space: normal;
     .icon-angle-right, .icon-angle-left {
         line-height: 36px;
         font-size: $iconNormalSize;

diff --git a/src/ui/table.css b/src/ui/table.css
@@ -13,6 +13,7 @@ $tableCurrentRowBackground: #ecf5ff;
 $tableInfoColor: #909399;
 
 .bk-table {
+    white-space: normal;
     position: relative;
     overflow: hidden;
     box-sizing: border-box;