bkui-vue 0.0.1-beta.331 → 0.0.1-beta.333

package/lib/alert/alert.css

@@ -59,9 +59,13 @@
   margin-top: -8px;
   margin-right: -10px;
   font-size: 12px;
+  color: #c4c6cc;
   white-space: nowrap;
   cursor: pointer;
 }
+.bk-alert-close:hover {
+  color: #979ba5;
+}
 .bk-alert-close-icon {
   line-height: 1;
 }

package/lib/alert/alert.less

@@ -16,7 +16,7 @@
 @error-background-color: #ffeded;
 @error-icon-color: #ea3636;
 
-.bk-alert {
+.@{bk-prefix}-alert {
   position: relative;
   font-size: @font-size-base;
   color: #63656e;
@@ -25,90 +25,95 @@
   border: @border-width-base @border-style-base;
   border-radius: @border-radius-base;
 
-  .bk-alert-icon-info {
+  .@{bk-prefix}-alert-icon-info {
     display: flex; // 修复 svg 对不齐的问题（svg 是一个 inline 元素）
     margin-right: 8px;
     font-size: 16px;
     line-height: 1;
   }
 
-  
+
 }
 
-.bk-alert-wraper {
+.@{bk-prefix}-alert-wraper {
   display: flex;
   padding: 8px 10px;
 }
 
-.bk-alert-info {
+.@{bk-prefix}-alert-info {
   background-color: @info-background-color;
   border-color: @info-border-color;
 
-  .bk-alert-icon-info {
+  .@{bk-prefix}-alert-icon-info {
     color: @info-icon-color;
   }
 }
 
-.bk-alert-success {
+.@{bk-prefix}-alert-success {
   background-color: @success-background-color;
   border-color: @success-border-color;
 
-  .bk-alert-icon-info {
+  .@{bk-prefix}-alert-icon-info {
     color: @success-icon-color;
   }
 }
 
-.bk-alert-warning {
+.@{bk-prefix}-alert-warning {
   background-color: @warning-background-color;
   border-color: @warning-border-color;
 
-  .bk-alert-icon-info {
+  .@{bk-prefix}-alert-icon-info {
     color: @warning-icon-color;
   }
 }
 
-.bk-alert-error {
+.@{bk-prefix}-alert-error {
   background-color: @error-background-color;
   border-color: @error-border-color;
 
-  .bk-alert-icon-info {
+  .@{bk-prefix}-alert-icon-info {
     color: @error-icon-color;
   }
 }
 
-.bk-alert-content {
+.@{bk-prefix}-alert-content {
   display: flex;
   flex: 1;
   flex-direction: column;
   overflow: hidden;
 }
 
-.bk-alert-title {
+.@{bk-prefix}-alert-title {
   line-height: 16px;
 }
 
-.bk-alert-close {
+.@{bk-prefix}-alert-close {
   padding: 8px 12px 0 6px;
   margin-top: -8px;
   margin-right: -10px;
   font-size: 12px;
+  color: #c4c6cc;
   white-space: nowrap;
   cursor: pointer;
+
+  &:hover {
+    color: #979ba5;
+  }
 }
 
-.bk-alert-close-icon {
+.@{bk-prefix}-alert-close-icon {
   line-height: 1;
 }
 
-.bk-alert-leave-leave {
+.@{bk-prefix}-alert-leave-leave {
   opacity: 1;
 }
 
-.bk-alert-leave-leave-active {
+.@{bk-prefix}-alert-leave-leave-active {
   overflow: hidden;
   transition: opacity .15s, height .2s;
 }
 
-.bk-alert-leave-leave-to {
+.@{bk-prefix}-alert-leave-leave-to {
   opacity: 0;
 }

package/lib/alert/alert.variable.css

@@ -178,9 +178,13 @@
   margin-top: -8px;
   margin-right: -10px;
   font-size: 12px;
+  color: #c4c6cc;
   white-space: nowrap;
   cursor: pointer;
 }
+.bk-alert-close:hover {
+  color: #979ba5;
+}
 .bk-alert-close-icon {
   line-height: 1;
 }

package/lib/checkbox/checkbox.css

@@ -1,8 +1,12 @@
+.bk-checkbox-group {
+  display: inline-block;
+  letter-spacing: normal;
+}
 .bk-checkbox {
   display: inline-flex;
   justify-self: center;
+  align-items: center;
   font-size: 14px;
-  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
@@ -68,21 +72,20 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
   background: #dcdee5;
 }
-.bk-checkbox .bk-checkbox-input {
+.bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
-  margin-right: 5px;
   vertical-align: middle;
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-.bk-checkbox .bk-checkbox-input.small {
+.bk-checkbox-input.small {
   width: 14px;
   height: 14px;
 }
-.bk-checkbox .bk-checkbox-original {
+.bk-checkbox-original {
   position: absolute;
   top: 0;
   left: 0;
@@ -90,7 +93,8 @@
   width: 0;
   height: 0;
 }
-.bk-checkbox .bk-checkbox-label {
+.bk-checkbox-label {
   display: inline-block;
+  margin-left: 5px;
   vertical-align: middle;
 }

package/lib/checkbox/checkbox.less

@@ -1,20 +1,26 @@
 @import '../styles/themes/themes.less';
 
+.@{bk-prefix}-checkbox-group {
+  display: inline-block;
+  letter-spacing: normal;
+}
+
 .@{bk-prefix}-checkbox {
   display: inline-flex;
   justify-self: center;
+  align-items: center;
   font-size: 14px;
-  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
   user-select: none;
-  &~.@{bk-prefix}-checkbox {
+
+  & ~ .@{bk-prefix}-checkbox {
     margin-left: 30px;
   }
 
   &.is-checked {
-    .bk-checkbox-input {
+    .@{bk-prefix}-checkbox-input {
       background: @primary-color;
       border-color: @primary-color;
       transition: all .1s;
@@ -43,7 +49,7 @@
   }
 
   &.is-indeterminated {
-    .bk-checkbox-input {
+    .@{bk-prefix}-checkbox-input {
       background: @primary-color;
       border-color: @primary-color;
       transition: all .1s;
@@ -74,7 +80,7 @@
     color: #c4c6cc;
     cursor: not-allowed;
 
-    .bk-checkbox-input {
+    .@{bk-prefix}-checkbox-input {
       background: #fafbfd;
       border-color: @disable-color;
 
@@ -84,39 +90,39 @@
     }
 
     &.is-checked {
-      .bk-checkbox-input {
+      .@{bk-prefix}-checkbox-input {
         background: @disable-color;
       }
     }
   }
+}
 
-  .bk-checkbox-input {
-    position: relative;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: 5px;
-    vertical-align: middle;
-    border: 1px solid #979ba5;
-    border-radius: 2px;
-    
-    &.small {
-      width: 14px;
-      height: 14px;
-    }
-  }
+.@{bk-prefix}-checkbox-input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  border: 1px solid #979ba5;
+  border-radius: 2px;
 
-  .bk-checkbox-original {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 0;
-    height: 0;
+  &.small {
+    width: 14px;
+    height: 14px;
   }
+}
 
-  .bk-checkbox-label {
-    display: inline-block;
-    vertical-align: middle;
-  }
+.@{bk-prefix}-checkbox-original {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}
+
+.@{bk-prefix}-checkbox-label {
+  display: inline-block;
+  margin-left: 5px;
+  vertical-align: middle;
 }

package/lib/checkbox/checkbox.variable.css

@@ -117,11 +117,15 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
 }
+.bk-checkbox-group {
+  display: inline-block;
+  letter-spacing: normal;
+}
 .bk-checkbox {
   display: inline-flex;
   justify-self: center;
+  align-items: center;
   font-size: 14px;
-  line-height: 18px;
   letter-spacing: normal;
   color: #63656e;
   cursor: pointer;
@@ -187,21 +191,20 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
   background: var(--disable-color);
 }
-.bk-checkbox .bk-checkbox-input {
+.bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
   height: 16px;
-  margin-right: 5px;
   vertical-align: middle;
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-.bk-checkbox .bk-checkbox-input.small {
+.bk-checkbox-input.small {
   width: 14px;
   height: 14px;
 }
-.bk-checkbox .bk-checkbox-original {
+.bk-checkbox-original {
   position: absolute;
   top: 0;
   left: 0;
@@ -209,7 +212,8 @@
   width: 0;
   height: 0;
 }
-.bk-checkbox .bk-checkbox-label {
+.bk-checkbox-label {
   display: inline-block;
+  margin-left: 5px;
   vertical-align: middle;
 }

package/lib/checkbox/index.js

@@ -1 +1 @@
-!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],r);else{var t="object"==typeof exports?r(require("../shared"),require("vue")):r(e["../shared"],e.vue);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(self,((e,r)=>(()=>{"use strict";var t={4212:r=>{r.exports=e},748:e=>{e.exports=r}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var a=o[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{BkCheckbox:()=>c,BkCheckboxGroup:()=>s,default:()=>d});var e=n(4212);function r(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=new Array(r);t<r;t++)o[t]=e[t];return o}var t=n(748),o=Symbol("CheckboxGroup"),i={modelValue:e.PropTypes.oneOfType([String,Number,Boolean]).def(""),label:e.PropTypes.oneOfType([String,Number,Boolean]),trueLabel:e.PropTypes.oneOfType([String,Number,Boolean]).def(!0),falseLabel:e.PropTypes.oneOfType([String,Number,Boolean]).def(""),disabled:e.PropTypes.bool.def(!1),checked:e.PropTypes.bool.def(!1),indeterminate:e.PropTypes.bool,beforeChange:e.PropTypes.func,size:e.PropTypes.size().def("large")};const l=(0,t.defineComponent)({name:"Checkbox",props:i,emits:["update:modelValue","change"],setup:function(n){var a,i,l=function(){var e=(0,t.ref)(!1);return[e,{blur:function(){e.value=!1},focus:function(){e.value=!0}}]}(),u=(i=2,function(e){if(Array.isArray(e))return e}(a=l)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var o,n,a=[],i=!0,l=!1;try{for(t=t.call(e);!(i=(o=t.next()).done)&&(a.push(o.value),!r||a.length!==r);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==t.return||t.return()}finally{if(l)throw n}}return a}}(a,i)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?r(e,t):void 0}}(a,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=u[0],c=u[1],d=c.blur,p=c.focus,f=function(){var r=(0,t.getCurrentInstance)(),n=r.props,a=r.emit,i=(0,t.inject)(o,e.EMPTY_OBJ),l=!(0,e.isEmptyObj)(i),u=(0,t.ref)(n.checked),s=(0,t.computed)((function(){return!(!l||!i.props.disabled)||n.disabled}));return l?(0,t.watch)((function(){return i.props.modelValue}),(function(e){u.value=e.includes(n.label)}),{deep:!0}):(0,t.watch)((function(){return n.modelValue}),(function(e){""!==e&&(u.value=e===n.trueLabel)}),{immediate:!0}),(0,t.onMounted)((function(){l&&i.register(r.proxy)})),(0,t.onBeforeUnmount)((function(){l&&i.unregister(r.proxy)})),{isChecked:u,isDisabled:s,setChecked:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];u.value=e},handleChange:function(e){if(!s.value){var r=e.target;u.value=r.checked;var o=u.value?n.trueLabel:n.falseLabel;a("change",o),a("update:modelValue",o),l&&i.handleChange(),(0,t.nextTick)((function(){r.checked!==u.value&&(r.checked=u.value)}))}}}}();return{isFocus:s,isChecked:f.isChecked,isDisabled:f.isDisabled,setChecked:f.setChecked,handleBlur:d,handleFocus:p,handleChange:f.handleChange,size:n.size}},render:function(){var r=(0,e.classes)({"bk-checkbox":!0,"is-focused":this.isFocus,"is-checked":this.isChecked,"is-disabled":this.isDisabled,"is-indeterminated":this.indeterminate});return(0,t.createVNode)("label",{class:r},[(0,t.createVNode)("span",{class:[(0,e.resolveClassName)("checkbox-input"),this.size]},[(0,t.createVNode)("input",{role:"checkbox",type:"checkbox",class:"bk-checkbox-original",disabled:this.isDisabled,checked:this.isChecked,onChange:this.handleChange},null)]),this.$slots.default?this.$slots.default():(0,t.createVNode)("span",{class:"bk-checkbox-label"},[this.label])])}});var u={name:e.PropTypes.string.def(""),modelValue:e.PropTypes.array,disabled:e.PropTypes.bool,withValidate:e.PropTypes.bool.def(!0)};const s=(0,t.defineComponent)({name:"CheckboxGroup",props:u,emits:["change","update:modelValue"],setup:function(r,n){var a=(0,e.useFormItem)(),i=[];return(0,t.provide)(o,{name:"CheckboxGroup",props:r,register:function(e){i.push(e)},unregister:function(e){var r=i.indexOf(e);r>-1&&i.splice(r,1)},handleChange:function(){var e=i.reduce((function(e,r){return r.isChecked&&e.push(r.label),e}),[]);n.emit("update:modelValue",e),n.emit("change",e)}}),(0,t.watch)((function(){return r.modelValue}),(function(){var e;r.withValidate&&(null===(e=null==a?void 0:a.validate)||void 0===e||e.call(a,"change"))})),(0,t.onMounted)((function(){var e=r.modelValue||[];i.forEach((function(r){e.includes(r.label)&&r.setChecked(!0)}))})),{}},render:function(){var e;return(0,t.createVNode)("div",{class:"bk-checkbox-group"},[null===(e=this.$slots)||void 0===e?void 0:e.default()])}});var c=(0,e.withInstallProps)(l,{Group:s});const d=c})(),a})()));
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],r);else{var t="object"==typeof exports?r(require("../shared"),require("vue")):r(e["../shared"],e.vue);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(self,((e,r)=>(()=>{"use strict";var t={4212:r=>{r.exports=e},748:e=>{e.exports=r}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var a=o[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{BkCheckbox:()=>c,BkCheckboxGroup:()=>s,default:()=>d});var e=n(4212);function r(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=new Array(r);t<r;t++)o[t]=e[t];return o}var t=n(748),o=Symbol("CheckboxGroup"),l={modelValue:e.PropTypes.oneOfType([String,Number,Boolean]).def(""),label:e.PropTypes.oneOfType([String,Number,Boolean]),trueLabel:e.PropTypes.oneOfType([String,Number,Boolean]).def(!0),falseLabel:e.PropTypes.oneOfType([String,Number,Boolean]).def(""),disabled:e.PropTypes.bool.def(!1),checked:e.PropTypes.bool.def(!1),indeterminate:e.PropTypes.bool,beforeChange:e.PropTypes.func,size:e.PropTypes.size().def("large")};const i=(0,t.defineComponent)({name:"Checkbox",props:l,emits:["update:modelValue","change"],setup:function(n){var a,l,i=function(){var e=(0,t.ref)(!1);return[e,{blur:function(){e.value=!1},focus:function(){e.value=!0}}]}(),u=(l=2,function(e){if(Array.isArray(e))return e}(a=i)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var o,n,a=[],l=!0,i=!1;try{for(t=t.call(e);!(l=(o=t.next()).done)&&(a.push(o.value),!r||a.length!==r);l=!0);}catch(e){i=!0,n=e}finally{try{l||null==t.return||t.return()}finally{if(i)throw n}}return a}}(a,l)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?r(e,t):void 0}}(a,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=u[0],c=u[1],d=c.blur,p=c.focus,f=function(){var r=(0,t.getCurrentInstance)(),n=r.props,a=r.emit,l=(0,t.inject)(o,e.EMPTY_OBJ),i=!(0,e.isEmptyObj)(l),u=(0,t.ref)(n.checked),s=(0,t.computed)((function(){return!(!i||!l.props.disabled)||n.disabled}));return i?(0,t.watch)((function(){return l.props.modelValue}),(function(e){u.value=e.includes(n.label)}),{deep:!0}):(0,t.watch)((function(){return n.modelValue}),(function(e){""!==e&&(u.value=e===n.trueLabel)}),{immediate:!0}),(0,t.onMounted)((function(){i&&l.register(r.proxy)})),(0,t.onBeforeUnmount)((function(){i&&l.unregister(r.proxy)})),{isChecked:u,isDisabled:s,setChecked:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];u.value=e},handleChange:function(e){if(!s.value){var r=e.target;u.value=r.checked;var o=u.value?n.trueLabel:n.falseLabel;a("change",o),a("update:modelValue",o),i&&l.handleChange(),(0,t.nextTick)((function(){r.checked!==u.value&&(r.checked=u.value)}))}}}}();return{isFocus:s,isChecked:f.isChecked,isDisabled:f.isDisabled,setChecked:f.setChecked,handleBlur:d,handleFocus:p,handleChange:f.handleChange,size:n.size}},render:function(){var r=this,o=(0,e.classes)({"bk-checkbox":!0,"is-focused":this.isFocus,"is-checked":this.isChecked,"is-disabled":this.isDisabled,"is-indeterminated":this.indeterminate});return(0,t.createVNode)("label",{class:o},[(0,t.createVNode)("span",{class:[(0,e.resolveClassName)("checkbox-input"),this.size]},[(0,t.createVNode)("input",{role:"checkbox",type:"checkbox",class:"bk-checkbox-original",disabled:this.isDisabled,checked:this.isChecked,onChange:this.handleChange},null)]),r.label||r.$slots.default?(0,t.createVNode)("span",{class:"bk-checkbox-label"},[r.$slots.default?r.$slots.default():r.label]):null])}});var u={name:e.PropTypes.string.def(""),modelValue:e.PropTypes.array,disabled:e.PropTypes.bool,withValidate:e.PropTypes.bool.def(!0)};const s=(0,t.defineComponent)({name:"CheckboxGroup",props:u,emits:["change","update:modelValue"],setup:function(r,n){var a=(0,e.useFormItem)(),l=[];return(0,t.provide)(o,{name:"CheckboxGroup",props:r,register:function(e){l.push(e)},unregister:function(e){var r=l.indexOf(e);r>-1&&l.splice(r,1)},handleChange:function(){var e=l.reduce((function(e,r){return r.isChecked&&e.push(r.label),e}),[]);n.emit("update:modelValue",e),n.emit("change",e)}}),(0,t.watch)((function(){return r.modelValue}),(function(){var e;r.withValidate&&(null===(e=null==a?void 0:a.validate)||void 0===e||e.call(a,"change"))})),(0,t.onMounted)((function(){var e=r.modelValue||[];l.forEach((function(r){e.includes(r.label)&&r.setChecked(!0)}))})),{}},render:function(){var e;return(0,t.createVNode)("div",{class:"bk-checkbox-group"},[null===(e=this.$slots)||void 0===e?void 0:e.default()])}});var c=(0,e.withInstallProps)(i,{Group:s});const d=c})(),a})()));

package/lib/date-picker/date-picker.css

@@ -182,6 +182,7 @@
   float: left;
 }
 .bk-picker-confirm {
+  display: flex;
   height: 42px;
   padding: 0 20px;
   clear: both;
@@ -190,6 +191,7 @@
   text-align: right;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
+  justify-content: flex-end;
 }
 .bk-picker-confirm a {
   color: #979ba5;
@@ -203,13 +205,16 @@
   cursor: not-allowed;
 }
 .bk-picker-confirm .bk-picker-confirm-time {
-  float: left;
   height: 100%;
+  margin-right: auto;
   color: #979ba5;
 }
 .bk-picker-confirm .bk-picker-confirm-time.is-disabled {
   color: #c4c6cc;
 }
+.bk-picker-confirm .bk-picker-confirm-action {
+  flex: 1;
+}
 .bk-date-picker-header {
   height: 46px;
   font-size: 14px;

package/lib/date-picker/date-picker.d.ts

@@ -126,6 +126,7 @@ declare const _default: import("vue").DefineComponent<{
     hasHeader: import("vue").ComputedRef<boolean>;
     hasFooter: import("vue").ComputedRef<boolean>;
     hasShortcuts: import("vue").ComputedRef<boolean>;
+    hasConfirm: import("vue").ComputedRef<boolean>;
     fontSizeCls: import("vue").ComputedRef<string>;
     longWidthCls: import("vue").ComputedRef<string>;
     localReadonly: import("vue").ComputedRef<boolean>;
@@ -146,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: () => void;
     onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
     onPickSuccess: () => void;
+    handleToggleTime: () => void;
     showClose: import("vue").Ref<boolean>;
     visible: import("vue").Ref<boolean>;
     internalValue: import("vue").Ref<any>;

package/lib/date-picker/date-picker.less

@@ -221,6 +221,7 @@
 }
 
 .bk-picker-confirm {
+  display: flex;
   height: 42px;
   padding: 0 20px;
   clear: both;
@@ -229,6 +230,7 @@
   text-align: right;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
+  justify-content: flex-end;
 
   a {
     color: #979ba5;
@@ -245,14 +247,18 @@
   }
 
   .bk-picker-confirm-time {
-    float: left;
     height: 100%;
+    margin-right: auto;
     color: #979ba5;
 
     &.is-disabled {
       color: #c4c6cc;
     }
   }
+
+  .bk-picker-confirm-action {
+    flex: 1;
+  }
 }
 
 .bk-date-picker-header {

package/lib/date-picker/date-picker.variable.css

@@ -301,6 +301,7 @@
   float: left;
 }
 .bk-picker-confirm {
+  display: flex;
   height: 42px;
   padding: 0 20px;
   clear: both;
@@ -309,6 +310,7 @@
   text-align: right;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
+  justify-content: flex-end;
 }
 .bk-picker-confirm a {
   color: #979ba5;
@@ -322,13 +324,16 @@
   cursor: not-allowed;
 }
 .bk-picker-confirm .bk-picker-confirm-time {
-  float: left;
   height: 100%;
+  margin-right: auto;
   color: #979ba5;
 }
 .bk-picker-confirm .bk-picker-confirm-time.is-disabled {
   color: #c4c6cc;
 }
+.bk-picker-confirm .bk-picker-confirm-action {
+  flex: 1;
+}
 .bk-date-picker-header {
   height: 46px;
   font-size: 14px;

package/lib/date-picker/index.d.ts

@@ -304,6 +304,7 @@ declare const BkDatePicker: {
             hasHeader: import("vue").ComputedRef<boolean>;
             hasFooter: import("vue").ComputedRef<boolean>;
             hasShortcuts: import("vue").ComputedRef<boolean>;
+            hasConfirm: import("vue").ComputedRef<boolean>;
             fontSizeCls: import("vue").ComputedRef<string>;
             longWidthCls: import("vue").ComputedRef<string>;
             localReadonly: import("vue").ComputedRef<boolean>;
@@ -324,6 +325,7 @@ declare const BkDatePicker: {
             handleClear: () => void;
             onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
             onPickSuccess: () => void;
+            handleToggleTime: () => void;
             showClose: import("vue").Ref<boolean>;
             visible: import("vue").Ref<boolean>;
             internalValue: import("vue").Ref<any>;
@@ -525,6 +527,7 @@ declare const BkDatePicker: {
         hasHeader: import("vue").ComputedRef<boolean>;
         hasFooter: import("vue").ComputedRef<boolean>;
         hasShortcuts: import("vue").ComputedRef<boolean>;
+        hasConfirm: import("vue").ComputedRef<boolean>;
         fontSizeCls: import("vue").ComputedRef<string>;
         longWidthCls: import("vue").ComputedRef<string>;
         localReadonly: import("vue").ComputedRef<boolean>;
@@ -545,6 +548,7 @@ declare const BkDatePicker: {
         handleClear: () => void;
         onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
         onPickSuccess: () => void;
+        handleToggleTime: () => void;
         showClose: import("vue").Ref<boolean>;
         visible: import("vue").Ref<boolean>;
         internalValue: import("vue").Ref<any>;
@@ -703,6 +707,7 @@ declare const BkDatePicker: {
     hasHeader: import("vue").ComputedRef<boolean>;
     hasFooter: import("vue").ComputedRef<boolean>;
     hasShortcuts: import("vue").ComputedRef<boolean>;
+    hasConfirm: import("vue").ComputedRef<boolean>;
     fontSizeCls: import("vue").ComputedRef<string>;
     longWidthCls: import("vue").ComputedRef<string>;
     localReadonly: import("vue").ComputedRef<boolean>;
@@ -723,6 +728,7 @@ declare const BkDatePicker: {
     handleClear: () => void;
     onPick: (_dates: any, visible: boolean, type: any, shortcut: any) => void;
     onPickSuccess: () => void;
+    handleToggleTime: () => void;
     showClose: import("vue").Ref<boolean>;
     visible: import("vue").Ref<boolean>;
     internalValue: import("vue").Ref<any>;