Merge pull request #423 from ielgnaw/patch

feat: bump to 2.5.8-beta.1
TencentBlueKing · Jul 29, 2023 · 9de8bab · 9de8bab
2 parents 56d811c + bd98a8f
commit 9de8bab
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 44 deletions.
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
@@ -8,6 +8,15 @@
 
 <div class="changelog-wrapper">
 
+### 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/date-picker/readme.md b/example/components/date-picker/readme.md
@@ -630,41 +630,41 @@
     </div>
 </template>
 <script>
-    import { bkDatePicker } from '{{BASE_LIB_NAME}}'
+  import { bkDatePicker } from '{{BASE_LIB_NAME}}'
 
-    export default {
-        components: {
-            bkDatePicker
-        },
-        data () {
-            return {
-                initDateTimeRange: [new Date(), new Date()]
-            }
-        },
-        methods: {
-            getCellClass (cell) {
-              const hasPoint = Math.random() * 10 > 5
-              return hasPoint ? 'cell-x-Class' : ''
-            }
-        }
+  export default {
+    components: {
+      bkDatePicker
+    },
+    data () {
+      return {
+        initDateTimeRange: [new Date(), new Date()]
+      }
+    },
+    methods: {
+      getCellClass (cell) {
+        const hasPoint = Math.random() * 10 > 5
+        return hasPoint ? 'cell-x-Class' : ''
+      }
     }
+  }
 </script>
 <style lang="postcss">
-    .cell-x-Class {
-      position: relative;
-      &::after {
-        content: '';
-        height: 5px;
-        background: red;
-        position: absolute;
-        left: 15px;
-        /* right: 5px; */
-        bottom: 2px;
-        border-radius: 50%;
-        border: solid 1px red;
-        width: 5px;
-      }
+  .cell-x-Class {
+    position: relative;
+    &::after {
+      content: '';
+      height: 5px;
+      background: red;
+      position: absolute;
+      left: 15px;
+      /* right: 5px; */
+      bottom: 2px;
+      border-radius: 50%;
+      border: solid 1px red;
+      width: 5px;
     }
+  }
 </style>
 ```
 :::
@@ -677,11 +677,11 @@
 <template>
   <div>
     <p class="mb5">年选择器</p>
-    <bk-date-picker type="year" v-model="initDateTime" @change="handleChange" />
+    <bk-date-picker type="year" v-model="initDateTime" @change="handleChange" :cell-class="getCellClass" />
   </div>
   <div>
     <p class="mb5">月选择器</p>
-    <bk-date-picker type="month" v-model="initDateTime" @change="handleChange" />
+    <bk-date-picker type="month" v-model="initDateTime" @change="handleChange" :cell-class="getCellClass" />
   </div>
 </template>
 <script>
@@ -700,10 +700,31 @@
       handleChange (date) {
         console.warn('handleChange', date)
         this.value = date
+      },
+      getCellClass (cell) {
+        const hasPoint = Math.random() * 10 > 5
+        return hasPoint ? 'cell-x-Class' : ''
       }
     }
   }
 </script>
+<style lang="postcss">
+  .cell-x-Class {
+    position: relative;
+    &::after {
+      content: '';
+      height: 5px;
+      background: red;
+      position: absolute;
+      left: 15px;
+      /* right: 5px; */
+      bottom: 2px;
+      border-radius: 50%;
+      border: solid 1px red;
+      width: 5px;
+    }
+  }
+</style>
 ```
 :::
 

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

diff --git a/src/components/date-picker/base/month-table.vue b/src/components/date-picker/base/month-table.vue
@@ -73,6 +73,13 @@ export default {
     }
   },
   methods: {
+    getExternalCellClass (cell) {
+      if (typeof this.cellClass === 'function') {
+        return this.cellClass(cell)
+      }
+
+      return ''
+    },
     getCellCls (cell) {
       return [
         `bk-date-picker-cells-cell`,
@@ -81,7 +88,8 @@ export default {
           [`bk-date-picker-cells-cell-disabled`]: cell.disabled,
           // [`bk-date-picker-cells-cell-focused`]: cell.focused,
           [`bk-date-picker-cells-cell-range`]: cell.range && !cell.start && !cell.end
-        }
+        },
+        this.getExternalCellClass(cell)
       ]
     },
     tCell (nr) {

diff --git a/src/components/date-picker/base/year-table.vue b/src/components/date-picker/base/year-table.vue
@@ -72,6 +72,13 @@ export default {
     }
   },
   methods: {
+    getExternalCellClass (cell) {
+      if (typeof this.cellClass === 'function') {
+        return this.cellClass(cell)
+      }
+
+      return ''
+    },
     getCellCls (cell) {
       return [
         'bk-date-picker-cells-cell',
@@ -80,7 +87,8 @@ export default {
           'bk-date-picker-cells-cell-disabled': cell.disabled,
           // ['bk-date-picker-cells-cell-focused']: cell.focused,
           'bk-date-picker-cells-cell-range': cell.range && !cell.start && !cell.end
-        }
+        },
+        this.getExternalCellClass(cell)
       ]
     }
   }

diff --git a/src/ui/form.css b/src/ui/form.css
@@ -269,36 +269,36 @@
         input[type="url"],
         textarea,
         select {
-            border-color: $dangerColor;
-            color: $dangerColor;
+            border-color: $newRedColor;
+            color: $newRedColor;
 
             /*&::placeholder {
-                color: $dangerColor;
+                color: $newRedColor;
             }*/
         }
 
         .bk-textarea-wrapper {
-            border-color: $dangerColor;
+            border-color: $newRedColor;
         }
 
         .bk-tag-selector .bk-tag-input {
-            border-color: $dangerColor;
+            border-color: $newRedColor;
             /*.placeholder {
-                color: $dangerColor;
+                color: $newRedColor;
             }*/
         }
 
         .bk-form-tip {
             .bk-tip-text {
-                color: $dangerColor;
+                color: $newRedColor;
             }
         }
 
         .bk-select {
-            border-color: $dangerColor;
+            border-color: $newRedColor;
 
             /*&.is-default-trigger.is-unselected:before {
-                color: $dangerColor;
+                color: $newRedColor;
             }*/
         }
     }