bkui-vue 0.0.1-beta.46 → 0.0.1-beta.47

package/lib/checkbox/checkbox.d.ts

@@ -3,9 +3,7 @@ export declare const checkboxProps: {
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
@@ -35,9 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
@@ -62,10 +58,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: import("vue-types").VueTypeDef<string>;
 }, {
-    currentValue: import("vue").ComputedRef<string | number | boolean>;
     isFocus: import("vue").Ref<boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
+    isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
     handleChange: (event: Event) => void;
@@ -73,9 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };

package/lib/checkbox/checkbox.less

@@ -31,6 +31,23 @@
     }
   }
 
+  &.is-indeterminated {
+    .bk-checkbox-input {
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 8px;
+        height: 2px;
+        background: #fff;
+        border: none;
+        border-radius: 2px;
+        content: '';
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
   &.is-disabled {
     color: #c4c6cc;
     cursor: not-allowed;

package/lib/checkbox/checkbox.variable.css

@@ -119,6 +119,18 @@
   transform: scaleY(1) rotate(45deg);
   transform-origin: center;
 }
+.bk-checkbox.is-indeterminated .bk-checkbox-input:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  background: #fff;
+  border: none;
+  border-radius: 2px;
+  content: '';
+  transform: translate(-50%, -50%);
+}
 .bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;

package/lib/checkbox/common.d.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey, Ref } from 'vue';
+import { type InjectionKey, type Ref } from 'vue';
 import type { ICheckboxGroupContext } from './type';
 export declare const checkboxGroupKey: InjectionKey<ICheckboxGroupContext>;
 export declare function useFocus(): [Ref<boolean>, {
@@ -6,8 +6,8 @@ export declare function useFocus(): [Ref<boolean>, {
     focus: () => void;
 }];
 export declare const useCheckbox: () => {
-    value: import("vue").ComputedRef<string | number | boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
+    isChecked: Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleChange: (event: Event) => void;
 };

package/lib/checkbox/index.d.ts

@@ -16,9 +16,7 @@ declare const BkCheckbox: {
             modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
                 default: string | number | boolean;
             };
-            label: import("vue-types").VueTypeDef<string | number | boolean> & {
-                required: true;
-            };
+            label: import("vue-types").VueTypeDef<string | number | boolean>;
             trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
                 default: string | number | boolean;
             };
@@ -63,9 +61,7 @@ declare const BkCheckbox: {
             modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
                 default: string | number | boolean;
             };
-            label: import("vue-types").VueTypeDef<string | number | boolean> & {
-                required: true;
-            };
+            label: import("vue-types").VueTypeDef<string | number | boolean>;
             trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
                 default: string | number | boolean;
             };
@@ -93,10 +89,10 @@ declare const BkCheckbox: {
             onChange?: (...args: any[]) => any;
             "onUpdate:modelValue"?: (...args: any[]) => any;
         }, {
-            currentValue: import("vue").ComputedRef<string | number | boolean>;
             isFocus: import("vue").Ref<boolean>;
-            isChecked: import("vue").ComputedRef<boolean>;
+            isChecked: import("vue").Ref<boolean>;
             isDisabled: import("vue").ComputedRef<boolean>;
+            setChecked: (value?: boolean) => void;
             handleBlur: () => void;
             handleFocus: () => void;
             handleChange: (event: Event) => void;
@@ -132,9 +128,7 @@ declare const BkCheckbox: {
         modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
             default: string | number | boolean;
         };
-        label: import("vue-types").VueTypeDef<string | number | boolean> & {
-            required: true;
-        };
+        label: import("vue-types").VueTypeDef<string | number | boolean>;
         trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
             default: string | number | boolean;
         };
@@ -162,10 +156,10 @@ declare const BkCheckbox: {
         onChange?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{
-        currentValue: import("vue").ComputedRef<string | number | boolean>;
         isFocus: import("vue").Ref<boolean>;
-        isChecked: import("vue").ComputedRef<boolean>;
+        isChecked: import("vue").Ref<boolean>;
         isDisabled: import("vue").ComputedRef<boolean>;
+        setChecked: (value?: boolean) => void;
         handleBlur: () => void;
         handleFocus: () => void;
         handleChange: (event: Event) => void;
@@ -177,9 +171,7 @@ declare const BkCheckbox: {
     modelValue: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
-    label: import("vue-types").VueTypeDef<string | number | boolean> & {
-        required: true;
-    };
+    label: import("vue-types").VueTypeDef<string | number | boolean>;
     trueLabel: import("vue-types").VueTypeDef<string | number | boolean> & {
         default: string | number | boolean;
     };
@@ -207,10 +199,10 @@ declare const BkCheckbox: {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
-    currentValue: import("vue").ComputedRef<string | number | boolean>;
     isFocus: import("vue").Ref<boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
+    isChecked: import("vue").Ref<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
+    setChecked: (value?: boolean) => void;
     handleBlur: () => void;
     handleFocus: () => void;
     handleChange: (event: Event) => void;

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

package/lib/checkbox/type.d.ts

@@ -3,17 +3,13 @@ import type { CheckboxProps } from './checkbox';
 import type { CheckboxGroupProps } from './checkbox-group';
 export declare type ICheckboxInstance = ComponentPublicInstance<CheckboxProps, {
     isChecked: boolean;
-    checked: boolean;
     label: string;
-    currentValue: CheckboxProps['label'];
+    setChecked: (value: boolean) => void;
 }>;
 export interface ICheckboxGroupContext {
     name: 'CheckboxGroup';
     props: CheckboxGroupProps;
-    state: {
-        localValue: CheckboxProps['label'][];
-    };
     register: (checkboxInstance: ICheckboxInstance) => void;
     unregister: (checkboxInstance: ICheckboxInstance) => void;
-    handleChange: (checked: boolean, value: CheckboxProps['label']) => void;
+    handleChange: () => void;
 }

package/lib/form/compose-form-item.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import("vue").DefineComponent<{
+    headBackgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    tailBackgroundColor: StringConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    headBackgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    tailBackgroundColor: StringConstructor;
+}>>, {
+    headBackgroundColor: string;
+}>;
+export default _default;

package/lib/form/form.css

@@ -1,11 +1,22 @@
 .bk-form {
   text-align: left;
 }
-.bk-form .bk-form-item {
+.bk-form--vertical .bk-form-item {
+  flex-direction: column;
+}
+.bk-form--vertical .bk-form-label {
+  width: auto;
+  padding-right: 0;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-content {
+  text-align: left;
+}
+.bk-form-item {
   display: flex;
   margin-bottom: 24px;
 }
-.bk-form .bk-form-item.is-required .bk-form-label:after {
+.bk-form-item.is-required .bk-form-label:after {
   position: absolute;
   width: 14px;
   line-height: 32px;
@@ -13,7 +24,7 @@
   text-align: center;
   content: '*';
 }
-.bk-form .bk-form-label {
+.bk-form-label {
   position: relative;
   width: 150px;
   padding-right: 24px;
@@ -23,11 +34,11 @@
   color: #63656e;
   text-align: right;
 }
-.bk-form .bk-form-content {
+.bk-form-content {
   position: relative;
   line-height: 32px;
 }
-.bk-form .bk-form-error {
+.bk-form-error {
   position: absolute;
   left: 0;
   padding-top: 4px;
@@ -36,14 +47,64 @@
   color: #ea3636;
   text-align: left;
 }
-.bk-form--vertical .bk-form-item {
-  flex-direction: column;
+.bk-compose-form-item {
+  display: inline-block;
 }
-.bk-form--vertical .bk-form-label {
+.bk-compose-form-item > .bk-input,
+.bk-compose-form-item > .bk-select,
+.bk-compose-form-item > .bk-cascade,
+.bk-compose-form-item > .bk-color-picker,
+.bk-compose-form-item > .bk-date-picker,
+.bk-compose-form-item > .bk-tag-input,
+.bk-compose-form-item > .bk-tag-selector,
+.bk-compose-form-item > .bk-search-select {
+  float: left;
   width: auto;
-  padding-right: 0;
-  text-align: left;
+  margin-left: -1px;
 }
-.bk-form--vertical .bk-form-content {
-  text-align: left;
+.bk-compose-form-item .bk-input,
+.bk-compose-form-item .bk-form-password,
+.bk-compose-form-item .bk-form-textarea,
+.bk-compose-form-item .bk-select,
+.bk-compose-form-item .bk-cascade,
+.bk-compose-form-item .bk-color-picker,
+.bk-compose-form-item .bk-date-picker .bk-date-picker-editor,
+.bk-compose-form-item .bk-tag-input,
+.bk-compose-form-item .bk-search-select {
+  border-radius: 0;
+}
+.bk-compose-form-item .bk-input.control-active,
+.bk-compose-form-item .bk-select.is-focus,
+.bk-compose-form-item .bk-cascade.is-focus,
+.bk-compose-form-item .bk-color-picker.bk-color-picker-show-dropdown,
+.bk-compose-form-item .bk-color-picker:hover,
+.bk-compose-form-item .bk-date-picker .bk-date-picker-editor:focus,
+.bk-compose-form-item .bk-tag-input.active,
+.bk-compose-form-item .bk-tag-selector,
+.bk-compose-form-item .bk-search-select.is-focus {
+  z-index: 1;
+  opacity: 1;
+}
+.bk-compose-form-item .bk-compose-form-item-head.bk-input,
+.bk-compose-form-item .bk-compose-form-item-head.bk-select,
+.bk-compose-form-item .bk-compose-form-item-head.bk-cascade,
+.bk-compose-form-item .bk-compose-form-item-head.bk-color-picker,
+.bk-compose-form-item .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
+.bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
+.bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
+.bk-compose-form-item .bk-compose-form-item-head.bk-search-select {
+  margin-left: 0;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.bk-compose-form-item .bk-compose-form-item-tail.bk-input,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-select,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-cascade,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-color-picker,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-date-picker,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
+.bk-compose-form-item .bk-compose-form-item-tail.bk-search-select {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }

package/lib/form/form.less

@@ -1,64 +1,138 @@
-.bk-form {
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-form {
   text-align: left;
 
-  .bk-form-item {
-    display: flex;
-    margin-bottom: 24px;
+  &--vertical {
+    .@{bk-prefix}-form-item {
+      flex-direction: column;
+    }
 
-    &.is-required {
-      .bk-form-label {
-        &:after {
-          position: absolute;
-          width: 14px;
-          line-height: 32px;
-          color: #ea3636;
-          text-align: center;
-          content: '*';
-        }
-      }
+    .@{bk-prefix}-form-label {
+      width: auto;
+      padding-right: 0;
+      text-align: left;
+    }
+
+    .@{bk-prefix}-form-content {
+      text-align: left;
     }
   }
+}
 
-  .bk-form-label {
-    position: relative;
-    width: 150px;
-    padding-right: 24px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 32px;
-    color: #63656e;
-    text-align: right;
+.@{bk-prefix}-form-item {
+  display: flex;
+  margin-bottom: 24px;
+
+  &.is-required {
+    .@{bk-prefix}-form-label {
+      &:after {
+        position: absolute;
+        width: 14px;
+        line-height: 32px;
+        color: #ea3636;
+        text-align: center;
+        content: '*';
+      }
+    }
   }
+}
 
-  .bk-form-content {
-    position: relative;
-    line-height: 32px;
+.@{bk-prefix}-form-label {
+  position: relative;
+  width: 150px;
+  padding-right: 24px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: right;
+}
+
+.@{bk-prefix}-form-content {
+  position: relative;
+  line-height: 32px;
+}
+
+.@{bk-prefix}-form-error {
+  position: absolute;
+  left: 0;
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: #ea3636;
+  text-align: left;
+  
+}
+
+.@{bk-prefix}-compose-form-item {
+  display: inline-block;
+  display: inline-block;
+
+  & > .bk-input,
+  & > .bk-select,
+  & > .bk-cascade,
+  & > .bk-color-picker,
+  & > .bk-date-picker,
+  & > .bk-tag-input,
+  & > .bk-tag-selector,
+  & > .bk-search-select {
+    float: left;
+    width: auto;
+    margin-left: -1px;
   }
 
-  .bk-form-error {
-    position: absolute;
-    left: 0;
-    padding-top: 4px;
-    font-size: 12px;
-    line-height: 1;
-    color: #ea3636;
-    text-align: left;
-    
+  .bk-input,
+  .bk-form-password,
+  .bk-form-textarea,
+  .bk-select,
+  .bk-cascade,
+  .bk-color-picker,
+  .bk-date-picker .bk-date-picker-editor,
+  .bk-tag-input,
+  .bk-search-select {
+    border-radius: 0;
   }
 
-  &--vertical {
-    .bk-form-item {
-      flex-direction: column;
-    }
+  .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 {
+    z-index: 1;
+    opacity: 1;
+  }
 
-    .bk-form-label {
-      width: auto;
-      padding-right: 0;
-      text-align: left;
+  .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 {
+      margin-left: 0;
+      border-top-right-radius: 0px;
+      border-bottom-right-radius: 0px;
     }
+  }
 
-    .bk-form-content {
-      text-align: left;
+  .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 {
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
     }
   }
 }