Merge pull request #244 from ielgnaw/master

feat: bump to 2.4.8
TencentBlueKing · Apr 20, 2022 · c176dff · c176dff
2 parents 3e9f115 + dcfdd60
commit c176dff
Show file tree

Hide file tree

Showing 29 changed files with 525 additions and 223 deletions.
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
@@ -4,6 +4,23 @@
 
 <div class="changelog-wrapper">
 
+### 2.4.8 {page=#/changelog}
+###### 2022.04.21
+
+* **[add]**:
+    - [DatePicker 日期选择器](#/date-picker) 新增 `cell-class` 配置项以支持自定义日期样式 [#229](https://github.com/TencentBlueKing/bkui-vue2/issues/229)
+    - [Table 表格](#/table) `bk-table-column` 增加 `tippy-options` 属性自定义配置表格的设置弹层 [#232](https://github.com/TencentBlueKing/bkui-vue2/issues/232)
+* **[fix]**:
+    - [Slider 滑动选择器](#/slider) 修复 min-value 设置为负值时无法正确渲染的问题 [#231](https://github.com/TencentBlueKing/bkui-vue2/issues/231)
+    - [TimePicker 时间选择器](#/time-picker) 修复 timer-picker 弹框偶发不会关闭的问题（页面存在多个 timer-picker 时 clickoutside 混乱的问题）
+* **[update]**:
+    - [Swiper 轮播图](#/swiper) 监听父容器高宽变化
+    - [VirtualScroll 虚拟滚动](#/virtual-scroll) 优化虚拟滚动折叠展开逻辑
+    - [Info 提示框](#/info-box) `maskClose`, `escClose` 默认值改为 `true`
+    - [Color 色彩](#/color), [Font 字体](#/font) 文档页面样式优化
+
+---
+
 ### 2.4.7 {page=#/changelog}
 ###### 2022.03.24
 

diff --git a/example/components/color/readme.md b/example/components/color/readme.md
@@ -23,7 +23,7 @@
 ### 辅助色 {page=#/color}
 运维行业主要是对线上业务进行维护和检测，更为注重业务健康状况，为此使用红（危险）、橙（预警）、绿（健康）三种颜色作为辅助色。
 
-<div class="color-wrapper">
+<div class="color-wrapper help-color">
     <div class="color-item">
         <div class="main-color" style="background-color: #ea3636;color: #ffa7ab;"><span>#EA3636</span></div>
         <div class="other-color">
@@ -56,7 +56,7 @@
 ### 中性色 {page=#/color}
 在中性色的设计上加入环境色，使颜色更自然，和主题色搭配更为和谐。
 
-<div class="color-wrapper">
+<div class="color-wrapper middle-color">
     <div class="color-item color-item-max">
         <div class="main-color" style="background-color: #63656e;color: #979ba5;"><span>#63656E</span></div>
         <div class="other-color">

diff --git a/example/components/date-picker/example.vue b/example/components/date-picker/example.vue
@@ -36,24 +36,23 @@
       <bk-button @click="dialogConfig.visiable = true" class="mr10">
         弹框
       </bk-button>
-      <bk-dialog v-model="dialogConfig.visiable" title="填写名称"
+      <bk-dialog
+        v-model="dialogConfig.visiable"
+        title="填写名称"
         :header-position="dialogConfig.headerPosition"
-        :width="dialogConfig.width">
+        :width="dialogConfig.width"
+      >
         <bk-date-picker :start-date="new Date(1991, 4, 14)"></bk-date-picker>
         <bk-time-picker v-model="initTime" :placeholder="'选择时间'"></bk-time-picker>
         <bk-select v-model="selectValue" style="width: 250px;" searchable>
-          <bk-option v-for="(option, index) in list"
-            :key="index"
-            :id="option.id"
-            :name="option.name">
-          </bk-option>
+          <bk-option v-for="(option, index) in list" :key="index" :id="option.id" :name="option.name"> </bk-option>
         </bk-select>
       </bk-dialog>
     </div>
     <div class="example-item">
       <div class="inner">
         <p><span class="bk-text-minor">基本使用</span></p>
-        <bk-date-picker :start-date="new Date(1991, 4, 14)"></bk-date-picker>
+        <bk-date-picker :cell-class="getCellClass" :start-date="new Date(1991, 4, 14)"></bk-date-picker>
         <!-- <bk-date-picker :value="['2016-01-01', '2016-02-15']" :type="'daterange'" @on-change></bk-date-picker> -->
       </div>
       <div class="inner">
@@ -84,7 +83,11 @@
     <div class="example-item">
       <div class="inner">
         <p><span class="bk-text-minor">快捷方式 datetime</span></p>
-        <bk-date-picker :shortcuts="shortcuts1" :type="'datetime'" :time-picker-options="{ steps: [1, 10, 10] }"></bk-date-picker>
+        <bk-date-picker
+          :shortcuts="shortcuts1"
+          :type="'datetime'"
+          :time-picker-options="{ steps: [1, 10, 10] }"
+        ></bk-date-picker>
       </div>
       <div class="inner">
         <p><span class="bk-text-minor">快捷方式 datetime（快捷方式关闭弹层）</span></p>
@@ -153,33 +156,36 @@
     <div class="example-item">
       <div class="inner">
         <p><span class="bk-text-minor">placeholder</span></p>
-        <bk-date-picker :open="open" :value="value"
+        <bk-date-picker
+          :open="open"
+          :value="value"
           @change="handleChange"
           @clear="handleClear"
           @pick-success="handleOk"
           @open-change="handleOpenChange"
         >
           <a slot="trigger" href="javascript:void(0)" @click="handleClick">
             <template v-if="value === ''">Select date</template>
-            <template v-else>{{value}}</template>
+            <template v-else>{{ value }}</template>
           </a>
         </bk-date-picker>
       </div>
       <div class="inner">
         <p><span class="bk-text-minor">datetimerange</span></p>
-        <bk-date-picker :type="'datetimerange'" v-model="datetimerangeInitVal" :time-picker-options="{
-          disabledHours: [1, 5, 10],
-          disabledMinutes: [0, 10, 20]
-        }"></bk-date-picker>
+        <bk-date-picker
+          :type="'datetimerange'"
+          v-model="datetimerangeInitVal"
+          :time-picker-options="{
+            disabledHours: [1, 5, 10],
+            disabledMinutes: [0, 10, 20]
+          }"
+        ></bk-date-picker>
       </div>
     </div>
     <div class="example-item">
       <div class="inner">
         <p><span class="bk-text-minor">快捷选择区域插槽</span></p>
-        <bk-date-picker
-          :value="value"
-          :placement="'top-start'"
-          :type="'datetimerange'">
+        <bk-date-picker :value="value" :placement="'top-start'" :type="'datetimerange'">
           <div slot="shortcuts">自定义插槽</div>
         </bk-date-picker>
       </div>
@@ -221,8 +227,8 @@ export default {
           value () {
             return new Date()
           },
-          onClick: picker => {
-            console.error(picker)
+          onClick: (picker) => {
+            console.log(picker)
           }
         },
         {
@@ -232,8 +238,8 @@ export default {
             date.setTime(date.getTime() - 3600 * 1000 * 24)
             return date
           },
-          onClick: picker => {
-            console.error(picker)
+          onClick: (picker) => {
+            console.log(picker)
           }
         },
         {
@@ -243,8 +249,8 @@ export default {
             date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
             return date
           },
-          onClick: picker => {
-            console.error(picker)
+          onClick: (picker) => {
+            console.log(picker)
           }
         }
       ],
@@ -256,8 +262,8 @@ export default {
             const start = new Date()
             return [start, end]
           },
-          onClick: picker => {
-            console.error(picker)
+          onClick: (picker) => {
+            console.log(picker)
           }
         },
         {
@@ -326,30 +332,47 @@ export default {
       this.open = !this.open
     },
     handleChange (date) {
-      console.error('handleChange', date)
+      console.log('handleChange', date)
       this.value = date
     },
     handleClear () {
-      console.error('handleClear')
+      console.log('handleClear')
       this.open = false
     },
     handleOk () {
-      console.error('handleOK')
+      console.log('handleOK')
       this.open = false
     },
     handleOpenChange (isOpen) {
-      console.error(isOpen)
+      console.log(isOpen)
+    },
+    getCellClass (cell) {
+      const hasPoint = Math.random() * 10 > 5
+      return hasPoint ? 'cell-x-Class' : ''
     }
   }
 }
 </script>
 <style lang="postcss">
-    .custom-cls {
-        &.bk-date-picker {
-            width: 400px;
-        }
-        .bk-date-picker-dropdown {
-            background-color: #ddd;
-        }
-    }
+.custom-cls {
+  &.bk-date-picker {
+    width: 400px;
+  }
+  .bk-date-picker-dropdown {
+    background-color: #ddd;
+  }
+}
+
+.cell-x-Class {
+  position: relative;
+  &::after {
+    content: '';
+    height: 1px;
+    background: red;
+    position: absolute;
+    left: 5px;
+    right: 5px;
+    bottom: 0;
+  }
+}
 </style>