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

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/form/form-item.d.ts

@@ -3,7 +3,9 @@ declare const formItemProps: {
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    labelWidth: import("vue-types").VueTypeDef<string | number>;
+    labelWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     labelPosition: import("vue-types").VueTypeDef<string>;
     property: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -49,7 +51,9 @@ declare const _default: import("vue").DefineComponent<{
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    labelWidth: import("vue-types").VueTypeDef<string | number>;
+    labelWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     labelPosition: import("vue-types").VueTypeDef<string>;
     property: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -90,7 +94,11 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    isShowLabel: import("vue").ComputedRef<boolean>;
     labelStyles: import("vue").ComputedRef<any>;
+    contentStyles: import("vue").ComputedRef<{
+        "margin-left": any;
+    }>;
     isFormTypeVertical: import("vue").ComputedRef<boolean>;
     validate: (trigger?: String) => Promise<boolean>;
     clearValidate: () => void;
@@ -100,7 +108,9 @@ declare const _default: import("vue").DefineComponent<{
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
-    labelWidth: import("vue-types").VueTypeDef<string | number>;
+    labelWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     labelPosition: import("vue-types").VueTypeDef<string>;
     property: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -145,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
     required: boolean;
     property: string;
     email: boolean;
+    labelWidth: string | number;
     max: number;
     min: number;
     maxlength: number;

package/lib/form/form.css

@@ -1,19 +1,18 @@
 .bk-form {
   text-align: left;
 }
-.bk-form--vertical .bk-form-item {
-  flex-direction: column;
-}
 .bk-form--vertical .bk-form-label {
+  float: unset;
   width: auto;
   padding-right: 0;
+  margin-bottom: 8px;
+  line-height: 20px;
   text-align: left;
 }
 .bk-form--vertical .bk-form-content {
   text-align: left;
 }
 .bk-form-item {
-  display: flex;
   margin-bottom: 24px;
 }
 .bk-form-item.is-required .bk-form-label:after {
@@ -31,16 +30,24 @@
 .bk-form-item.is-error .bk-tag-input {
   border-color: #ea3636;
 }
+.bk-form-item:after,
+.bk-form-item:before {
+  display: table;
+  content: '';
+}
+.bk-form-item:after {
+  clear: both;
+}
 .bk-form-label {
   position: relative;
-  width: 150px;
+  float: left;
   padding-right: 24px;
   font-size: 14px;
   font-weight: normal;
   line-height: 32px;
   color: #63656e;
   text-align: right;
-  flex: 0 0 auto;
+  vertical-align: middle;
 }
 .bk-form-label-description {
   cursor: pointer;
@@ -49,7 +56,6 @@
 .bk-form-content {
   position: relative;
   line-height: 32px;
-  flex: 1;
 }
 .bk-form-error {
   position: absolute;

package/lib/form/form.less

@@ -4,13 +4,13 @@
   text-align: left;
 
   &--vertical {
-    .@{bk-prefix}-form-item {
-      flex-direction: column;
-    }
 
     .@{bk-prefix}-form-label {
+      float: unset;
       width: auto;
       padding-right: 0;
+      margin-bottom: 8px;
+      line-height: 20px;
       text-align: left;
     }
 
@@ -21,7 +21,6 @@
 }
 
 .@{bk-prefix}-form-item {
-  display: flex;
   margin-bottom: 24px;
 
   &.is-required {
@@ -46,18 +45,29 @@
       border-color: #ea3636;
     }
   }
+
+  &:after,
+  &:before {
+    display: table;
+    content: ''
+  }
+
+  &:after {
+    clear: both
+  }
 }
 
 .@{bk-prefix}-form-label {
   position: relative;
-  width: 150px;
+  float: left;
   padding-right: 24px;
   font-size: 14px;
   font-weight: normal;
   line-height: 32px;
   color: #63656e;
   text-align: right;
-  flex: 0 0 auto;
+  text-align: right;
+  vertical-align: middle;
 }
 .@{bk-prefix}-form-label-description {
   cursor: pointer;
@@ -67,7 +77,6 @@
 .@{bk-prefix}-form-content {
   position: relative;
   line-height: 32px;
-  flex: 1;
 }
 
 .@{bk-prefix}-form-error {
@@ -92,69 +101,69 @@
   display: inline-block;
   display: inline-block;
 
-  & > .bk-input,
-  & > .bk-textarea,
-  & > .bk-select,
-  & > .bk-cascade,
-  & > .bk-color-picker,
-  & > .bk-date-picker,
-  & > .bk-tag-input,
-  & > .bk-tag-selector,
-  & > .bk-search-select {
+  & > .@{bk-prefix}-input,
+  & > .@{bk-prefix}-textarea,
+  & > .@{bk-prefix}-select,
+  & > .@{bk-prefix}-cascade,
+  & > .@{bk-prefix}-color-picker,
+  & > .@{bk-prefix}-date-picker,
+  & > .@{bk-prefix}-tag-input,
+  & > .@{bk-prefix}-tag-selector,
+  & > .@{bk-prefix}-search-select {
     float: left;
     width: auto;
     margin-left: -1px;
   }
 
-  .bk-input,
-  .bk-form-password,
-  .bk-textarea,
-  .bk-select,
-  .bk-cascade,
-  .bk-color-picker,
-  .bk-date-picker .bk-date-picker-editor,
-  .bk-tag-input,
-  .bk-search-select {
+  .@{bk-prefix}-input,
+  .@{bk-prefix}-form-password,
+  .@{bk-prefix}-textarea,
+  .@{bk-prefix}-select,
+  .@{bk-prefix}-cascade,
+  .@{bk-prefix}-color-picker,
+  .@{bk-prefix}-date-picker .@{bk-prefix}-date-picker-editor,
+  .@{bk-prefix}-tag-input,
+  .@{bk-prefix}-search-select {
     border-radius: 0;
   }
 
-  .bk-input.control-active,
-  .bk-select.is-focus,
-  .bk-cascade.is-focus,
-  .bk-color-picker.bk-color-picker-show-dropdown,
-  .bk-color-picker:hover,
-  .bk-date-picker .bk-date-picker-editor:focus,
-  .bk-tag-input.active,
-  .bk-tag-selector,
-  .bk-search-select.is-focus {
+  .@{bk-prefix}-input.control-active,
+  .@{bk-prefix}-select.is-focus,
+  .@{bk-prefix}-cascade.is-focus,
+  .@{bk-prefix}-color-picker.@{bk-prefix}-color-picker-show-dropdown,
+  .@{bk-prefix}-color-picker:hover,
+  .@{bk-prefix}-date-picker .@{bk-prefix}-date-picker-editor:focus,
+  .@{bk-prefix}-tag-input.active,
+  .@{bk-prefix}-tag-selector,
+  .@{bk-prefix}-search-select.is-focus {
     z-index: 1;
     opacity: 1;
   }
 
-  .bk-compose-form-item-head {
-    &.bk-input,
-    &.bk-select,
-    &.bk-cascade,
-    &.bk-color-picker,
-    &.bk-date-picker .bk-date-picker-editor,
-    &.bk-tag-input,
-    &.bk-tag-input,
-    &.bk-search-select {
+  .@{bk-prefix}-compose-form-item-head {
+    &.@{bk-prefix}-input,
+    &.@{bk-prefix}-select,
+    &.@{bk-prefix}-cascade,
+    &.@{bk-prefix}-color-picker,
+    &.@{bk-prefix}-date-picker .@{bk-prefix}-date-picker-editor,
+    &.@{bk-prefix}-tag-input,
+    &.@{bk-prefix}-tag-input,
+    &.@{bk-prefix}-search-select {
       margin-left: 0;
       border-top-right-radius: 0px;
       border-bottom-right-radius: 0px;
     }
   }
 
-  .bk-compose-form-item-tail {
-    &.bk-input,
-    &.bk-select,
-    &.bk-cascade,
-    &.bk-color-picker,
-    &.bk-date-picker,
-    &.bk-tag-input,
-    &.bk-tag-input,
-    &.bk-search-select {
+  .@{bk-prefix}-compose-form-item-tail {
+    &.@{bk-prefix}-input,
+    &.@{bk-prefix}-select,
+    &.@{bk-prefix}-cascade,
+    &.@{bk-prefix}-color-picker,
+    &.@{bk-prefix}-date-picker,
+    &.@{bk-prefix}-tag-input,
+    &.@{bk-prefix}-tag-input,
+    &.@{bk-prefix}-search-select {
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
     }