bkui-vue 0.0.1-beta.45 → 0.0.1-beta.48

package/lib/dialog/index.d.ts

@@ -7,14 +7,29 @@ declare const BkDialog: {
             height: string | number;
             title: string;
             showMask: boolean;
+            theme: string;
+            size: string;
             isShow: boolean;
             customClass: string | unknown[];
             scrollable: boolean;
+            closeIcon: boolean;
+            escClose: boolean;
+            maskClose: boolean;
+            fullscreen: boolean;
+            renderDirective: string;
             confirmText: string;
             cancelText: string;
             headerAlign: string;
             footerAlign: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            width: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: any;
+            };
+            height: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: any;
+            };
             confirmText: {
                 type: StringConstructor;
                 default: string;
@@ -37,18 +52,15 @@ declare const BkDialog: {
                 default: string;
                 validator: (value: string) => boolean;
             };
+            theme: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
             isShow: {
                 type: BooleanConstructor;
                 default: boolean;
             };
-            width: {
-                type: (NumberConstructor | StringConstructor)[];
-                default: string;
-            };
-            height: {
-                type: (NumberConstructor | StringConstructor)[];
-                default: string;
-            };
             customClass: {
                 type: (ArrayConstructor | StringConstructor)[];
                 default: string;
@@ -61,10 +73,37 @@ declare const BkDialog: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            closeIcon: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            escClose: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maskClose: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            fullscreen: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            size: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            renderDirective: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
         }>> & {
             onClosed?: (...args: any[]) => any;
             "onUpdate:isShow"?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "title" | "showMask" | "isShow" | "customClass" | "scrollable" | "confirmText" | "cancelText" | "headerAlign" | "footerAlign">;
+            onConfirm?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "title" | "showMask" | "theme" | "size" | "isShow" | "customClass" | "scrollable" | "closeIcon" | "escClose" | "maskClose" | "fullscreen" | "renderDirective" | "confirmText" | "cancelText" | "headerAlign" | "footerAlign">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -76,9 +115,17 @@ declare const BkDialog: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-        $emit: (event: "closed" | "update:isShow", ...args: any[]) => void;
+        $emit: (event: "closed" | "update:isShow" | "confirm", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            width: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: any;
+            };
+            height: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: any;
+            };
             confirmText: {
                 type: StringConstructor;
                 default: string;
@@ -101,18 +148,15 @@ declare const BkDialog: {
                 default: string;
                 validator: (value: string) => boolean;
             };
+            theme: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
             isShow: {
                 type: BooleanConstructor;
                 default: boolean;
             };
-            width: {
-                type: (NumberConstructor | StringConstructor)[];
-                default: string;
-            };
-            height: {
-                type: (NumberConstructor | StringConstructor)[];
-                default: string;
-            };
             customClass: {
                 type: (ArrayConstructor | StringConstructor)[];
                 default: string;
@@ -125,19 +169,55 @@ declare const BkDialog: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            closeIcon: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            escClose: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            maskClose: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            fullscreen: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            size: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            renderDirective: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
         }>> & {
             onClosed?: (...args: any[]) => any;
             "onUpdate:isShow"?: (...args: any[]) => any;
+            onConfirm?: (...args: any[]) => any;
         }, unknown, unknown, {}, {
             handleClose(): void;
-        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], string, {
+            handleConfirm(): void;
+            escCloseHandler(e: any): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow" | "confirm")[], string, {
             width: string | number;
             height: string | number;
             title: string;
             showMask: boolean;
+            theme: string;
+            size: string;
             isShow: boolean;
             customClass: string | unknown[];
             scrollable: boolean;
+            closeIcon: boolean;
+            escClose: boolean;
+            maskClose: boolean;
+            fullscreen: boolean;
+            renderDirective: string;
             confirmText: string;
             cancelText: string;
             headerAlign: string;
@@ -163,6 +243,14 @@ declare const BkDialog: {
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
+        width: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: any;
+        };
+        height: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: any;
+        };
         confirmText: {
             type: StringConstructor;
             default: string;
@@ -185,18 +273,15 @@ declare const BkDialog: {
             default: string;
             validator: (value: string) => boolean;
         };
+        theme: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
         isShow: {
             type: BooleanConstructor;
             default: boolean;
         };
-        width: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: string;
-        };
-        height: {
-            type: (NumberConstructor | StringConstructor)[];
-            default: string;
-        };
         customClass: {
             type: (ArrayConstructor | StringConstructor)[];
             default: string;
@@ -209,16 +294,53 @@ declare const BkDialog: {
             type: BooleanConstructor;
             default: boolean;
         };
+        closeIcon: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        escClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        maskClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        fullscreen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        renderDirective: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
     }>> & {
         onClosed?: (...args: any[]) => any;
         "onUpdate:isShow"?: (...args: any[]) => any;
+        onConfirm?: (...args: any[]) => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & {} & {
         handleClose(): void;
+        handleConfirm(): void;
+        escCloseHandler(e: any): void;
     } & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: any;
+    };
     confirmText: {
         type: StringConstructor;
         default: string;
@@ -241,18 +363,15 @@ declare const BkDialog: {
         default: string;
         validator: (value: string) => boolean;
     };
+    theme: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     isShow: {
         type: BooleanConstructor;
         default: boolean;
     };
-    width: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-    };
-    height: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: string;
-    };
     customClass: {
         type: (ArrayConstructor | StringConstructor)[];
         default: string;
@@ -265,19 +384,55 @@ declare const BkDialog: {
         type: BooleanConstructor;
         default: boolean;
     };
+    closeIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    escClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    renderDirective: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onClosed?: (...args: any[]) => any;
     "onUpdate:isShow"?: (...args: any[]) => any;
+    onConfirm?: (...args: any[]) => any;
 }, unknown, unknown, {}, {
     handleClose(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], "closed" | "update:isShow", {
+    handleConfirm(): void;
+    escCloseHandler(e: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow" | "confirm")[], "closed" | "update:isShow" | "confirm", {
     width: string | number;
     height: string | number;
     title: string;
     showMask: boolean;
+    theme: string;
+    size: string;
     isShow: boolean;
     customClass: string | unknown[];
     scrollable: boolean;
+    closeIcon: boolean;
+    escClose: boolean;
+    maskClose: boolean;
+    fullscreen: boolean;
+    renderDirective: string;
     confirmText: string;
     cancelText: string;
     headerAlign: string;

package/lib/dialog/index.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../button"),require("../modal"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../button","../modal"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue"),require("../button"),require("../modal")):t(e["../shared"],e.vue,e["../button"],e["../modal"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o,r)=>(()=>{"use strict";var n={4976:e=>{e.exports=o},8014:e=>{e.exports=r},4212:t=>{t.exports=e},748:e=>{e.exports=t}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var o=l[e]={exports:{}};return n[e](o,o.exports,a),o.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{a.r(i),a.d(i,{default:()=>c});var e=a(4212),t=a(748),o=a(4976),r=a.n(o),n=a(8014),l=a.n(n);const d=(0,t.defineComponent)({name:"Dialog",components:{BkModal:l(),BkButton:r()},props:Object.assign(Object.assign({},n.propsMixin),{confirmText:{type:String,default:"确定"},cancelText:{type:String,default:"取消"},title:{type:String,default:"Title"},headerAlign:{type:String,default:"left",validator:function(e){var t=["left","center","right"];return!(t.indexOf(e)<0&&(console.error("headerAlign property is not valid: '".concat(e,"',【").concat(t.join(" | "),"】")),1))}},footerAlign:{type:String,default:"right",validator:function(e){var t=["left","center","right"];return!(t.indexOf(e)<0&&(console.error("footerAlign property is not valid: '".concat(e,"',【").concat(t.join(" | "),"】")),1))}}}),emits:["closed","update:isShow"],methods:{handleClose:function(){this.$emit("update:isShow",!1),this.$emit("closed")}},render:function(){var e,o=this,n={header:function(){var e,r,n;return(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)("div",{class:"bk-dialog-tool"},[(0,t.createVNode)("span",{class:"bk-dialog-close",onClick:o.handleClose},[(0,t.createTextVNode)("+")])]),(0,t.createVNode)("div",{class:"bk-dialog-header"},[(0,t.createVNode)("span",{class:"bk-dialog-title",style:"text-align: ".concat(o.headerAlign)},[null!==(n=null===(r=(e=o.$slots).header)||void 0===r?void 0:r.call(e))&&void 0!==n?n:o.title])])])},default:function(){var e,t,r;return null!==(r=null===(t=(e=o.$slots).default)||void 0===t?void 0:t.call(e))&&void 0!==r?r:"default"},footer:function(){var e,n,l;return(0,t.createVNode)("div",{class:"bk-dialog-footer",style:"text-align: ".concat(o.footerAlign)},[null!==(l=null===(n=(e=o.$slots).footer)||void 0===n?void 0:n.call(e))&&void 0!==l?l:(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(r(),{onClick:o.handleClose,theme:"primary"},{default:function(){return[o.confirmText]}}),(0,t.createVNode)(r(),{onClick:o.handleClose},{default:function(){return[o.cancelText]}})])])}},a="bk-dialog-wrapper ".concat(this.scrollable?"scroll-able":"");return(0,t.createVNode)(l(),(0,t.mergeProps)(this.$props,{class:a}),"function"==typeof(e=n)||"[object Object]"===Object.prototype.toString.call(e)&&!(0,t.isVNode)(e)?n:{default:function(){return[n]}})}}),c=(0,e.withInstall)(d)})(),i})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../button"),require("../modal"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../button","../modal"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue"),require("../button"),require("../modal")):t(e["../shared"],e.vue,e["../button"],e["../modal"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o,r)=>(()=>{"use strict";var n={4976:e=>{e.exports=o},8014:e=>{e.exports=r},4212:t=>{t.exports=e},748:e=>{e.exports=t}},i={};function l(e){var t=i[e];if(void 0!==t)return t.exports;var o=i[e]={exports:{}};return n[e](o,o.exports,l),o.exports}l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},l.d=(e,t)=>{for(var o in t)l.o(t,o)&&!l.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{l.r(a),l.d(a,{default:()=>d});var e=l(4212),t=l(748),o=l(4976),r=l.n(o),n=l(8014),i=l.n(n);const s=(0,t.defineComponent)({name:"Dialog",components:{BkModal:i(),BkButton:r()},props:Object.assign(Object.assign({},n.propsMixin),{width:{type:[Number,String],default:null},height:{type:[Number,String],default:null},confirmText:{type:String,default:"确定"},cancelText:{type:String,default:"取消"},title:{type:String,default:"Title"},headerAlign:{type:String,default:"left",validator:function(e){var t=["left","center","right"];return!(t.indexOf(e)<0&&(console.error("headerAlign property is not valid: '".concat(e,"',【").concat(t.join(" | "),"】")),1))}},footerAlign:{type:String,default:"right",validator:function(e){var t=["left","center","right"];return!(t.indexOf(e)<0&&(console.error("footerAlign property is not valid: '".concat(e,"',【").concat(t.join(" | "),"】")),1))}},theme:{type:String,default:"primary",validator:function(e){return!(["primary","warning","success","danger"].indexOf(e)<0&&(console.error("theme property is not valid: '".concat(e,"'")),1))}}}),emits:["closed","update:isShow","confirm"],mounted:function(){this.escClose&&addEventListener("keydown",this.escCloseHandler)},beforeDestory:function(){this.escClose&&removeEventListener("keydown",this.escCloseHandler)},methods:{handleClose:function(){this.$emit("update:isShow",!1),this.$emit("closed")},handleConfirm:function(){this.$emit("update:isShow",!1),this.$emit("confirm")},escCloseHandler:function(e){this.isShow&&this.closeIcon&&27===e.keyCode&&this.handleClose()}},render:function(){var e,o=this,n={header:function(){var e,r,n;return[(0,t.createVNode)("div",{class:"bk-dialog-tool"},[(0,t.createVNode)("span",{class:["bk-dialog-close",o.closeIcon?"":"close-icon"],onClick:o.handleClose},[(0,t.createTextVNode)("+")])]),(0,t.createVNode)("div",{class:"bk-dialog-header"},[(0,t.createVNode)("span",{class:"bk-dialog-title",style:"text-align: ".concat(o.headerAlign)},[null!==(n=null===(r=(e=o.$slots).header)||void 0===r?void 0:r.call(e))&&void 0!==n?n:o.title])])]},default:function(){var e,t,r;return null!==(r=null===(t=(e=o.$slots).default)||void 0===t?void 0:t.call(e))&&void 0!==r?r:"default"},footer:function(){var e,n,i;return(0,t.createVNode)("div",{class:"bk-dialog-footer",style:"text-align: ".concat(o.footerAlign)},[null!==(i=null===(n=(e=o.$slots).footer)||void 0===n?void 0:n.call(e))&&void 0!==i?i:(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(r(),{onClick:o.handleConfirm,theme:o.theme},{default:function(){return[o.confirmText]}}),(0,t.createVNode)(r(),{style:"margin-left: 8px;",onClick:o.handleClose},{default:function(){return[o.cancelText]}})])])}},l="bk-dialog-wrapper ".concat(this.scrollable?"scroll-able":"");return(0,t.createVNode)(i(),(0,t.mergeProps)(this.$props,{class:l}),"function"==typeof(e=n)||"[object Object]"===Object.prototype.toString.call(e)&&!(0,t.isVNode)(e)?n:{default:function(){return[n]}})}}),d=(0,e.withInstall)(s)})(),a})()));

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;
 }