bkui-vue 0.0.1-beta.99 → 0.0.2-beta.1

package/lib/fixed-navbar/index.d.ts

@@ -2,34 +2,58 @@ declare const BkFixedNavbar: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            position: string;
-            extCls: string;
-            modelValue: boolean;
-            navItems: unknown[];
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            navItems: import("vue-types").VueTypeValidableDef<unknown[]> & {
-                default: () => unknown[];
-            } & {
-                default: () => unknown[];
-            };
-            extCls: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            } & {
-                default: string;
-            };
-            position: import("vue-types").VueTypeDef<string> & {
-                default: string;
-            };
-            modelValue: import("vue-types").VueTypeValidableDef<boolean> & {
-                default: boolean;
-            } & {
-                default: boolean;
-            };
-        }>> & {
+        $props: {
+            extCls?: string;
+            position?: string;
+            modelValue?: boolean;
+            navItems?: unknown[];
+            class?: unknown;
+            style?: unknown;
             onClick?: (...args: any[]) => any;
+            key?: string | number | symbol;
+            ref?: import("vue").VNodeRef;
+            ref_for?: boolean;
+            ref_key?: string;
+            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
+            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
+            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
+            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
+            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
+            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[];
             "onUpdate:modelValue"?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "position" | "extCls" | "modelValue" | "navItems">;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -37,10 +61,10 @@ declare const BkFixedNavbar: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: import("vue").Slot;
+            [name: string]: import("vue").Slot<any>;
         }>;
-        $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, {}>>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>;
         $emit: (event: "click" | "update:modelValue", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
@@ -66,11 +90,11 @@ declare const BkFixedNavbar: {
             onClick?: (...args: any[]) => any;
             "onUpdate:modelValue"?: (...args: any[]) => any;
         }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], string, {
-            position: string;
             extCls: string;
+            position: string;
             modelValue: boolean;
             navItems: unknown[];
-        }> & {
+        }, {}, string, {}> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
             beforeMount?: (() => void) | (() => void)[];
@@ -85,11 +109,11 @@ declare const BkFixedNavbar: {
             unmounted?: (() => void) | (() => void)[];
             renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
             renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>, info: string) => boolean | void)[];
         };
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         navItems: import("vue-types").VueTypeValidableDef<unknown[]> & {
             default: () => unknown[];
@@ -112,7 +136,7 @@ declare const BkFixedNavbar: {
     }>> & {
         onClick?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
-    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
@@ -139,9 +163,9 @@ declare const BkFixedNavbar: {
     onClick?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], "click" | "update:modelValue", {
-    position: string;
     extCls: string;
+    position: string;
     modelValue: boolean;
     navItems: unknown[];
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default BkFixedNavbar;

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

@@ -4,7 +4,9 @@ declare const _default: import("vue").DefineComponent<{
         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<{
+}, {
+    resolveClassName: (cls: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     headBackgroundColor: {
         type: StringConstructor;
         default: string;
@@ -12,5 +14,5 @@ declare const _default: import("vue").DefineComponent<{
     tailBackgroundColor: StringConstructor;
 }>>, {
     headBackgroundColor: string;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ComputedRef, ExtractPropTypes } from 'vue';
 declare const formItemProps: {
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -44,7 +44,7 @@ declare const formItemProps: {
         default: string;
     };
 };
-export declare type FormItemProps = Readonly<ExtractPropTypes<typeof formItemProps>>;
+export type FormItemProps = Readonly<ExtractPropTypes<typeof formItemProps>>;
 declare const _default: import("vue").DefineComponent<{
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -90,12 +90,18 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    labelStyles: import("vue").ComputedRef<any>;
-    validate: (trigger?: String) => Promise<boolean>;
+    isShowLabel: ComputedRef<boolean>;
+    labelStyles: ComputedRef<any>;
+    contentStyles: ComputedRef<{
+        "margin-left": any;
+    }>;
+    isFormTypeVertical: ComputedRef<boolean>;
+    validate: (trigger?: string, showError?: boolean) => Promise<boolean>;
     clearValidate: () => void;
+    resolveClassName: (cls: string) => string;
     isError: import("vue").Ref<boolean>;
     errorMessage: import("vue").Ref<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -140,16 +146,16 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    label: string;
     required: boolean;
-    property: string;
+    label: string;
     email: boolean;
-    min: number;
+    property: string;
     max: number;
+    min: number;
     maxlength: number;
     rules: unknown[];
     autoCheck: boolean;
     description: string;
     errorDisplayType: string;
-}>;
+}, {}>;
 export default _default;

package/lib/form/form.css

@@ -1,39 +1,63 @@
+@keyframes form-error-appear-animation {
+  from {
+    opacity: 0;
+    transform: translateY(-30%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .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: 6px;
+  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 {
   position: absolute;
+  top: 0;
   width: 14px;
-  line-height: 32px;
   color: #ea3636;
   text-align: center;
   content: '*';
 }
+.bk-form-item.is-error .bk-input,
+.bk-form-item.is-error .bk-textarea,
+.bk-form-item.is-error .bk-date-picker-editor,
+.bk-form-item.is-error .bk-tag-input {
+  border-color: #ea3636;
+  transition: all 0.15s;
+}
+.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;
@@ -42,7 +66,6 @@
 .bk-form-content {
   position: relative;
   line-height: 32px;
-  flex: 1;
 }
 .bk-form-error {
   position: absolute;
@@ -52,6 +75,7 @@
   line-height: 1;
   color: #ea3636;
   text-align: left;
+  animation: form-error-appear-animation 0.15s;
 }
 .bk-form-error-tips {
   position: absolute;

package/lib/form/form.d.ts

@@ -3,7 +3,9 @@ export declare const formProps: {
     formType: import("vue-types").VueTypeDef<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>;
     model: import("vue-types").VueTypeValidableDef<{
         [key: string]: any;
@@ -20,12 +22,19 @@ export declare const formProps: {
         };
     };
 };
-export declare type FormProps = Readonly<ExtractPropTypes<typeof formProps>>;
+declare const formEvents: {
+    submit: any;
+    validate: (property: string, result: boolean, message: string) => boolean;
+};
+export type FormProps = Readonly<ExtractPropTypes<typeof formProps>>;
+export type FormEvents = typeof formEvents;
 declare const _default: import("vue").DefineComponent<{
     formType: import("vue-types").VueTypeDef<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>;
     model: import("vue-types").VueTypeValidableDef<{
         [key: string]: any;
@@ -46,12 +55,19 @@ declare const _default: import("vue").DefineComponent<{
     validate: (fields?: string | Array<string>) => Promise<{
         [key: string]: any;
     }>;
+    getValidateResult: () => Promise<boolean>;
     clearValidate: (fields?: string | Array<string>) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    resolveClassName: (cls: string) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: any;
+    validate: (property: string, result: boolean, message: string) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     formType: import("vue-types").VueTypeDef<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>;
     model: import("vue-types").VueTypeValidableDef<{
         [key: string]: any;
@@ -68,8 +84,10 @@ declare const _default: import("vue").DefineComponent<{
         };
     };
 }>> & {
-    onSubmit?: (...args: any[]) => any;
+    onSubmit?: ((...args: any[]) => any) | ((...args: unknown[]) => any);
+    onValidate?: (property: string, result: boolean, message: string) => any;
 }, {
+    labelWidth: string | number;
     rules: {
         [key: string]: any;
     };
@@ -77,5 +95,5 @@ declare const _default: import("vue").DefineComponent<{
     model: {
         [key: string]: any;
     };
-}>;
+}, {}>;
 export default _default;

package/lib/form/form.less

@@ -1,16 +1,28 @@
 @import '../styles/themes/themes.less';
 
+@keyframes form-error-appear-animation {
+  from {
+    opacity: 0;
+    transform: translateY(-30%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .@{bk-prefix}-form {
   text-align: left;
 
   &--vertical {
-    .@{bk-prefix}-form-item {
-      flex-direction: column;
-    }
 
     .@{bk-prefix}-form-label {
+      float: unset;
       width: auto;
       padding-right: 0;
+      margin-bottom: 6px;
+      line-height: 20px;
       text-align: left;
     }
 
@@ -21,33 +33,53 @@
 }
 
 .@{bk-prefix}-form-item {
-  display: flex;
   margin-bottom: 24px;
 
   &.is-required {
     .@{bk-prefix}-form-label {
       &:after {
         position: absolute;
+        top: 0;
         width: 14px;
-        line-height: 32px;
         color: #ea3636;
         text-align: center;
         content: '*';
       }
     }
   }
+
+  &.is-error {
+    .@{bk-prefix}-input,
+    .@{bk-prefix}-textarea,
+    .@{bk-prefix}-date-picker-editor,
+    .@{bk-prefix}-tag-input {
+      border-color: #ea3636;
+      transition: all .15s;
+    }
+  }
+
+  &: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;
@@ -57,7 +89,6 @@
 .@{bk-prefix}-form-content {
   position: relative;
   line-height: 32px;
-  flex: 1;
 }
 
 .@{bk-prefix}-form-error {
@@ -68,6 +99,7 @@
   line-height: 1;
   color: #ea3636;
   text-align: left;
+  animation: form-error-appear-animation .15s;
 }
 .@{bk-prefix}-form-error-tips {
   position: absolute;
@@ -82,69 +114,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;
     }