bkui-vue 0.0.1-beta.22 → 0.0.1-beta.220

package/lib/form/form.variable.css

@@ -1,11 +1,157 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+}
 .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-label {
+.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;
+}
+.bk-form-label {
+  position: relative;
   width: 150px;
   padding-right: 24px;
   font-size: 14px;
@@ -13,12 +159,18 @@
   line-height: 32px;
   color: #63656e;
   text-align: right;
+  flex: 0 0 auto;
+}
+.bk-form-label-description {
+  cursor: pointer;
+  border-bottom: 1px dashed #979ba5;
 }
-.bk-form .bk-form-content {
+.bk-form-content {
   position: relative;
   line-height: 32px;
+  flex: 1;
 }
-.bk-form .bk-form-error {
+.bk-form-error {
   position: absolute;
   left: 0;
   padding-top: 4px;
@@ -27,13 +179,73 @@
   color: #ea3636;
   text-align: left;
 }
-.bk-form--vertical .bk-form-item {
-  flex-direction: column;
+.bk-form-error-tips {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 16px;
+  line-height: 1;
+  color: #ea3636;
 }
-.bk-form--vertical .bk-form-label {
+.bk-compose-form-item {
+  display: inline-block;
+}
+.bk-compose-form-item > .bk-input,
+.bk-compose-form-item > .bk-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-compose-form-item > .bk-tag-input,
+.bk-compose-form-item > .bk-tag-selector,
+.bk-compose-form-item > .bk-search-select {
+  float: left;
   width: auto;
-  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-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/index.d.ts

@@ -1,29 +1,25 @@
+import ComposeFormItem from './compose-form-item';
 import { formProps } from './form';
 import FormItem from './form-item';
+export * from './type';
 declare const BkForm: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            rules: {
+                [key: string]: any;
+            };
             formType: string;
-            labelWidth: number;
-            labelPosition: string;
             model: {
                 [key: string]: any;
             };
-            rules: unknown[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            formType: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            };
-            labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-                default: number;
-            };
-            labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            } & {
+            formType: import("vue-types").VueTypeDef<string> & {
                 default: string;
             };
+            labelWidth: import("vue-types").VueTypeDef<string | number>;
+            labelPosition: import("vue-types").VueTypeDef<string>;
             model: import("vue-types").VueTypeValidableDef<{
                 [key: string]: any;
             }> & {
@@ -31,10 +27,16 @@ declare const BkForm: {
                     [key: string]: any;
                 };
             };
-            rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
-                default: () => unknown[];
+            rules: import("vue-types").VueTypeValidableDef<{
+                [key: string]: any;
+            }> & {
+                default: () => {
+                    [key: string]: any;
+                };
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "formType" | "labelWidth" | "labelPosition" | "model" | "rules">;
+        }>> & {
+            onSubmit?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "rules" | "formType" | "model">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -46,20 +48,14 @@ declare const BkForm: {
         }>;
         $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: string, ...args: any[]) => void;
+        $emit: (event: "submit", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            formType: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            };
-            labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-                default: number;
-            };
-            labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-                default: string;
-            } & {
+            formType: import("vue-types").VueTypeDef<string> & {
                 default: string;
             };
+            labelWidth: import("vue-types").VueTypeDef<string | number>;
+            labelPosition: import("vue-types").VueTypeDef<string>;
             model: import("vue-types").VueTypeValidableDef<{
                 [key: string]: any;
             }> & {
@@ -67,22 +63,29 @@ declare const BkForm: {
                     [key: string]: any;
                 };
             };
-            rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
-                default: () => unknown[];
+            rules: import("vue-types").VueTypeValidableDef<{
+                [key: string]: any;
+            }> & {
+                default: () => {
+                    [key: string]: any;
+                };
             };
-        }>>, {
-            validate: (fields: string | string[]) => Promise<{
+        }>> & {
+            onSubmit?: (...args: any[]) => any;
+        }, {
+            handleSubmit: (event: Event) => void;
+            validate: (fields?: string | string[]) => Promise<{
                 [key: string]: any;
             }>;
-            clearValidate: (fields: string | string[]) => void;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            clearValidate: (fields?: string | string[]) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], string, {
+            rules: {
+                [key: string]: any;
+            };
             formType: string;
-            labelWidth: number;
-            labelPosition: string;
             model: {
                 [key: string]: any;
             };
-            rules: unknown[];
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -104,17 +107,11 @@ declare const BkForm: {
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        formType: import("vue-types").VueTypeValidableDef<string> & {
-            default: string;
-        };
-        labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-            default: number;
-        };
-        labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-            default: string;
-        } & {
+        formType: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
+        labelWidth: import("vue-types").VueTypeDef<string | number>;
+        labelPosition: import("vue-types").VueTypeDef<string>;
         model: import("vue-types").VueTypeValidableDef<{
             [key: string]: any;
         }> & {
@@ -122,30 +119,31 @@ declare const BkForm: {
                 [key: string]: any;
             };
         };
-        rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
-            default: () => unknown[];
+        rules: import("vue-types").VueTypeValidableDef<{
+            [key: string]: any;
+        }> & {
+            default: () => {
+                [key: string]: any;
+            };
         };
-    }>> & import("vue").ShallowUnwrapRef<{
-        validate: (fields: string | string[]) => Promise<{
+    }>> & {
+        onSubmit?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        handleSubmit: (event: Event) => void;
+        validate: (fields?: string | string[]) => Promise<{
             [key: string]: any;
         }>;
-        clearValidate: (fields: string | string[]) => void;
+        clearValidate: (fields?: string | string[]) => void;
     }> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    formType: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    };
-    labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-        default: number;
-    };
-    labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
+    formType: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    labelWidth: import("vue-types").VueTypeDef<string | number>;
+    labelPosition: import("vue-types").VueTypeDef<string>;
     model: import("vue-types").VueTypeValidableDef<{
         [key: string]: any;
     }> & {
@@ -153,33 +151,36 @@ declare const BkForm: {
             [key: string]: any;
         };
     };
-    rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
-        default: () => unknown[];
+    rules: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
     };
-}>>, {
-    validate: (fields: string | string[]) => Promise<{
+}>> & {
+    onSubmit?: (...args: any[]) => any;
+}, {
+    handleSubmit: (event: Event) => void;
+    validate: (fields?: string | string[]) => Promise<{
         [key: string]: any;
     }>;
-    clearValidate: (fields: string | string[]) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    clearValidate: (fields?: string | string[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", {
+    rules: {
+        [key: string]: any;
+    };
     formType: string;
-    labelWidth: number;
-    labelPosition: string;
     model: {
         [key: string]: any;
     };
-    rules: unknown[];
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
     FormItem: import("vue").DefineComponent<{
         label: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
-        labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-            default: number;
-        };
-        labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-            default: string;
-        };
+        labelWidth: import("vue-types").VueTypeDef<string | number>;
+        labelPosition: import("vue-types").VueTypeDef<string>;
         property: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         } & {
@@ -215,9 +216,13 @@ declare const BkForm: {
         description: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        errorDisplayType: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
     }, {
-        labelStyles: import("vue").ComputedRef<object>;
-        validate: () => any;
+        labelStyles: import("vue").ComputedRef<any>;
+        isFormTypeVertical: import("vue").ComputedRef<boolean>;
+        validate: (trigger?: String) => Promise<boolean>;
         clearValidate: () => void;
         isError: import("vue").Ref<boolean>;
         errorMessage: import("vue").Ref<string>;
@@ -225,12 +230,8 @@ declare const BkForm: {
         label: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
-        labelWidth: import("vue-types").VueTypeValidableDef<number> & {
-            default: number;
-        };
-        labelPosition: import("vue-types").VueTypeValidableDef<string> & {
-            default: string;
-        };
+        labelWidth: import("vue-types").VueTypeDef<string | number>;
+        labelPosition: import("vue-types").VueTypeDef<string>;
         property: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         } & {
@@ -266,21 +267,38 @@ declare const BkForm: {
         description: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        errorDisplayType: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
     }>>, {
         label: string;
         required: boolean;
         property: string;
         email: boolean;
-        description: string;
-        labelWidth: number;
-        labelPosition: string;
-        rules: unknown[];
         max: number;
         min: number;
         maxlength: number;
+        rules: unknown[];
         autoCheck: boolean;
+        description: string;
+        errorDisplayType: string;
+    }>;
+    ComposeFormItem: 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 BkForm;
-export { BkForm, FormItem as BkFormItem, };
+export { BkForm, FormItem as BkFormItem, ComposeFormItem as BkComposeFormItem, };
 export type { formProps, };

package/lib/form/index.js

@@ -1 +1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("../shared"),require("vue")):"function"==typeof define&&define.amd?define(["exports","../shared","vue"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Shared,e.Vue)}(this,(function(e,r,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n={exports:{}};!function(e){e.exports=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},e.exports.__esModule=!0,e.exports.default=e.exports}(n);var s=o(n.exports),i=Symbol("form"),a={formType:r.PropTypes.string,labelWidth:r.PropTypes.number,labelPosition:r.PropTypes.string.def("right"),model:r.PropTypes.object,rules:r.PropTypes.array},u=t.defineComponent({name:"BKForm",props:a,setup:function(e){var r=[];t.provide(i,{props:e,register:function(e){r.push(e)},unregister:function(e){r=r.reduce((function(r,t){return t!==e&&r.push(t),r}),[])}});return{validate:function(t){var o={};t?o=("string"==typeof t?[t]:t).reduce((function(e,r){return Object.assign(Object.assign({},e),s({},r,!0))}),{}):o=r.reduce((function(e,r){return r.property?Object.assign(Object.assign({},e),s({},r.property,!0)):e}),{});return Promise.all(r.reduce((function(e,r){return o[r.property]&&e.push(r.validate()),e}),[])).then((function(){return Promise.resolve(e.model)}))},clearValidate:function(e){var t={};e?t=("string"==typeof e?[e]:e).reduce((function(e,r){return Object.assign(Object.assign({},e),s({},r,!0))}),{}):t=r.reduce((function(e,r){return Object.assign(Object.assign({},e),s({},r.property,!0))}),{});r.forEach((function(e){return t[e.property]&&e.clearValidate()}))}}},render:function(){var e,o,n=r.classes(s({"bk-form":!0},"bk-form--".concat(this.formType),!0));return t.createVNode("form",{class:n},[null===(o=(e=this.$slots).default)||void 0===o?void 0:o.call(e)])}}),l={exports:{}},p={exports:{}},c={exports:{}};!function(e){e.exports=function(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},e.exports.__esModule=!0,e.exports.default=e.exports}(c),function(e){var r=c.exports;e.exports=function(e){if(Array.isArray(e))return r(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(p);var f={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(f);var d={exports:{}};!function(e){var r=c.exports;e.exports=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}},e.exports.__esModule=!0,e.exports.default=e.exports}(d);var m={exports:{}};!function(e){e.exports=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.")},e.exports.__esModule=!0,e.exports.default=e.exports}(m),function(e){var r=p.exports,t=f.exports,o=d.exports,n=m.exports;e.exports=function(e){return r(e)||t(e)||o(e)||n()},e.exports.__esModule=!0,e.exports.default=e.exports}(l);var g=o(l.exports),b={required:function(e){return console.log("required"),""!==e},min:function(e,r){return console.log("min"),e>=r},max:function(e,r){return console.log("max"),r>=e},email:function(e){return console.log("email"),/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(e)},maxlength:function(e,r){return console.log("maxlength"),e.length<=r}},x={label:r.PropTypes.string,labelWidth:r.PropTypes.number,labelPosition:r.PropTypes.string,property:r.PropTypes.string.def(""),required:r.PropTypes.bool.def(!1),email:r.PropTypes.bool.def(!1),max:r.PropTypes.number,min:r.PropTypes.number,maxlength:r.PropTypes.number,rules:r.PropTypes.array,autoCheck:r.PropTypes.bool.def(!1),description:r.PropTypes.string},y=t.defineComponent({name:"BKFormItem",props:x,setup:function(e){var r=t.getCurrentInstance(),o=t.reactive({isError:!1,errorMessage:""}),n=t.inject(i),s=Boolean(n),a=t.computed((function(){var r={width:"",textAlign:""},t=e.labelWidth||s&&n.props.labelWidth;return t&&(r.width="".concat(t,"px")),(e.labelPosition||s&&n.props.labelPosition)&&(r["text-align"]="labelPosition"),r}));return t.onMounted((function(){s&&n.register(r.proxy)})),t.onBeforeUnmount((function(){s&&n.unregister(r.proxy)})),Object.assign(Object.assign({},t.toRefs(o)),{labelStyles:a,validate:function(){if(!e.property||s&&!n.props.model)return Promise.resolve();var r,t,i,a,u,l=[];s&&n.props.rules&&(r=n.props.rules,t=e.property,Object.prototype.hasOwnProperty.call(r,t))&&(l=n.props.rules[e.property]),e.rules&&(l=e.rules),i=l,a=function(e){var r=[];return e.required&&r.push({validator:b.required,message:"".concat(e.label,"不能为空"),trigger:"blur"}),e.email&&r.push({validator:b.email,message:"".concat(e.label,"格式不正确"),trigger:"blur"}),Number(e.max)>-1&&r.push({validator:function(r){return b.max(r,e.max)},message:"".concat(e.label,"最大值").concat(e.max),trigger:"blur"}),Number(e.min)>-1&&r.push({validator:function(r){return b.min(r,e.min)},message:"".concat(e.label,"最小值").concat(e.min),trigger:"blur"}),Number(e.maxlength)>-1&&r.push({validator:function(r){return b.maxlength(r,e.maxlength)},message:"".concat(e.label,"最大长度").concat(e.maxlength),trigger:"blur"}),r}(e),u=i.map((function(e){return{validator:e.required?b.required:e.email?b.email:Number(e.max)>-1?function(r){return b.max(r,e.max)}:Number(e.min)>-1||Number(e.maxlength)>-1?function(r){return b.min(r,e.max)}:function(){return!0},message:e.message,trigger:e.trigger}})),l=[].concat(g(a),g(u));var p,c=n.props.model[e.property],f=(p=-1,function(){if((p+=1)>=l.length)return Promise.resolve();var e=l[p];return Promise.resolve().then((function(){var r=e.validator(c);return"boolean"!=typeof r&&"function"==typeof r.then?r.then((function(){return f}),(function(){return o.isError=!0,o.errorMessage=e.message,Promise.reject(e.message)})):r?f():(o.isError=!0,o.errorMessage=e.message,Promise.reject(e.message))}))});return f()},clearValidate:function(){o.isError=!1,o.errorMessage=""}})},render:function(){var e=r.classes({"is-error":this.isError,"is-required":this.required},"bk-form-item");return t.createVNode("div",{class:e},[t.createVNode("div",{class:"bk-form-label",style:this.labelStyles},[this.label]),t.createVNode("div",{class:"bk-form-content"},[this.$slots.default(),this.isError&&t.createVNode("div",{class:"bk-form-error"},[this.errorMessage])])])}}),h=r.withInstallProps(u,{FormItem:y});e.BkForm=h,e.BkFormItem=y,e.default=h,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("../shared"),require("vue"),require("lodash"),require("../directives"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","lodash","../directives","../icon"],r);else{var t="object"==typeof exports?r(require("../shared"),require("vue"),require("lodash"),require("../directives"),require("../icon")):r(e["../shared"],e.vue,e.lodash,e["../directives"],e["../icon"]);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(self,((e,r,t,o,n)=>(()=>{"use strict";var i={4061:e=>{e.exports=o},6870:e=>{e.exports=n},4212:r=>{r.exports=e},467:e=>{e.exports=t},748:e=>{e.exports=r}},s={};function a(e){var r=s[e];if(void 0!==r)return r.exports;var t=s[e]={exports:{}};return i[e](t,t.exports,a),t.exports}a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{a.r(l),a.d(l,{BkComposeFormItem:()=>o,BkForm:()=>y,BkFormItem:()=>v,default:()=>h});var e=a(4212),r=a(748),t=function(e){return e.__v_isVNode};const o=(0,r.defineComponent)({name:"ComposeFormItem",props:{headBackgroundColor:{type:String,default:"#FAFBFD"},tailBackgroundColor:String},render:function(){if(!this.$slots.default)return null;var e=this.$slots.default();if(e.length>1){for(var o=e.length,n=0,i=null;n<o;){if(t(e[n])){i=e[n];break}n+=1}for(var s=o-1,a=null;s>=0&&s>n;){if(t(e[s])){a=e[s];break}s-=1}if(i&&a){i.props||(i.props={});var l="bk-compose-form-item-head";i.props.class&&(l+=" ".concat(i.props.class)),this.headBackgroundColor&&(i.props.style=Object.assign(i.props.style||{},{"background-color":this.headBackgroundColor})),i.props.class=l,a.props||(a.props={});var u="bk-compose-form-item-tail";a.props.class&&(u+=" ".concat(a.props.class)),this.tailBackgroundColor&&(a.props.style=Object.assign(a.props.style||{},{"background-color":this.tailBackgroundColor})),a.props.class=u}}return(0,r.h)("div",{class:"bk-compose-form-item"},e)}});function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var i={formType:e.PropTypes.oneOf(["default","vertical"]).def("default"),labelWidth:e.PropTypes.oneOfType([Number,String]),labelPosition:e.PropTypes.oneOf(["left","center","right"]),model:e.PropTypes.object,rules:e.PropTypes.object};const s=(0,r.defineComponent)({name:"Form",props:i,emits:["submit"],setup:function(t,o){var i=[];return(0,r.provide)(e.formKey,{props:t,register:function(e){i.push(e)},unregister:function(e){i=i.reduce((function(r,t){return t!==e&&r.push(t),r}),[])}}),{handleSubmit:function(e){e.preventDefault(),o.emit("submit")},validate:function(e){var r={};return r=e?("string"==typeof e?[e]:e).reduce((function(e,r){return Object.assign(Object.assign({},e),n({},r,!0))}),{}):i.reduce((function(e,r){return r.property?Object.assign(Object.assign({},e),n({},r.property,!0)):e}),{}),Promise.all(i.reduce((function(e,t){return r[t.property]&&e.push(t.validate()),e}),[])).then((function(){return Promise.resolve(t.model)}))},clearValidate:function(e){var r={};r=e?("string"==typeof e?[e]:e).reduce((function(e,r){return Object.assign(Object.assign({},e),n({},r,!0))}),{}):i.reduce((function(e,r){return Object.assign(Object.assign({},e),n({},r.property,!0))}),{}),i.forEach((function(e){return r[e.property]&&e.clearValidate()}))}}},render:function(){var t,o,i=(0,e.classes)(n({"bk-form":!0},"bk-form--".concat(this.formType),!0));return(0,r.createVNode)("form",{class:i,onSubmit:this.handleSubmit},[null===(o=(t=this.$slots).default)||void 0===o?void 0:o.call(t)])}});function u(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}function c(e){return function(e){if(Array.isArray(e))return u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(e){if("string"==typeof e)return u(e,r);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)?u(e,r):void 0}}(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 p=a(467),d=a(4061),f=a(6870);const m={required:function(e){return""!==e&&null!=e},min:function(e,r){return e>=r},max:function(e,r){return r>=e},email:function(e){return/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(e)},maxlength:function(e,r){return e.length<=r},pattern:function(e,r){return r.test(e)}};var b={label:e.PropTypes.string,labelWidth:e.PropTypes.oneOfType([Number,String]),labelPosition:e.PropTypes.oneOf(["left","center","right"]),property:e.PropTypes.string.def(""),required:e.PropTypes.bool.def(!1),email:e.PropTypes.bool.def(!1),max:e.PropTypes.number,min:e.PropTypes.number,maxlength:e.PropTypes.number,rules:e.PropTypes.array,autoCheck:e.PropTypes.bool.def(!1),description:e.PropTypes.string,errorDisplayType:e.PropTypes.oneOf(["tooltips","normal"]).def("normal")},g=function(e){return void 0!==e};const v=(0,r.defineComponent)({name:"FormItem",directives:{bkTooltips:d.bkTooltips},props:b,setup:function(t){var o=(0,r.getCurrentInstance)(),n=(0,r.reactive)({isError:!1,errorMessage:""}),i=(0,e.useForm)(),s=Boolean(i),a=(0,r.computed)((function(){return!!s&&"vertical"===i.props.formType})),l=(0,r.computed)((function(){var e={width:"",paddingRight:"",textAlign:""},r=g(t.labelWidth)?t.labelWidth:s&&i.props.labelWidth;g(r)&&(e.width="".concat(r,"px"),e.paddingRight=r?"":"0px");var o=t.labelPosition||s&&i.props.labelPosition;return o&&(e["text-align"]=o),e})),u=function(e){if(!t.property||s&&!i.props.model)return Promise.resolve(!0);var r,o,a,l,u,d=[];s&&i.props.rules&&(r=i.props.rules,o=t.property,Object.prototype.hasOwnProperty.call(r,o))&&(d=i.props.rules[t.property]),t.rules&&(d=t.rules),d=function(e,r){return r.reduce((function(r,t){return t.trigger&&e?((Array.isArray(t.trigger)?t.trigger:[t.trigger]).includes(e)&&r.push(t),r):(r.push(t),r)}),[])}(e,(a=d,l=function(e){var r=[];return e.required&&r.push({validator:m.required,message:"".concat(e.label,"不能为空"),trigger:"blur"}),e.email&&r.push({validator:m.email,message:"".concat(e.label,"格式不正确"),trigger:"blur"}),Number(e.max)>-1&&r.push({validator:function(r){return m.max(r,e.max)},message:"".concat(e.label,"最大值").concat(e.max),trigger:"blur"}),Number(e.min)>-1&&r.push({validator:function(r){return m.min(r,e.min)},message:"".concat(e.label,"最小值").concat(e.min),trigger:"blur"}),Number(e.maxlength)>-1&&r.push({validator:function(r){return m.maxlength(r,e.maxlength)},message:"".concat(e.label,"最大长度").concat(e.maxlength),trigger:"blur"}),r}(t),u=a.reduce((function(e,r){var t;if(r.required)t=m.required;else if(r.email)t=m.email;else if(Number(r.max)>-1)t=function(e){return m.max(e,r.max)};else if(Number(r.min)>-1)t=function(e){return m.min(e,r.max)};else if(Number(r.maxlength)>-1)t=function(e){return m.min(e,r.max)};else if("[object RegExp]"===Object.prototype.toString.call(r.pattern))t=function(e){return m.pattern(e,r.pattern)};else{if("[object Function]"!==Object.prototype.toString.call(r.validator))return e;t=r.validator}return e.push({validator:t,message:r.message,trigger:r.trigger}),e}),[]),[].concat(c(l),c(u)))),d.length>0&&(n.isError=!1,n.errorMessage="");var f,b=(0,p.get)(i.props.model,t.property),g=(f=-1,function(){if((f+=1)>=d.length)return Promise.resolve(!0);var e=d[f];return Promise.resolve().then((function(){var r=e.validator(b);return"boolean"!=typeof r&&"function"==typeof r.then?r.then((function(r){if(!1===r)return Promise.reject(e.message)})).then((function(){return g()}),(function(){return n.isError=!0,n.errorMessage=e.message,Promise.reject(e.message)})):r?g():(n.isError=!0,n.errorMessage=e.message,Promise.reject(e.message))}))});return g()},d=function(){n.isError=!1,n.errorMessage=""};return(0,r.provide)(e.formItemKey,Object.assign(Object.assign({},t),{validate:u,clearValidate:d})),(0,r.onMounted)((function(){s&&i.register(o.proxy)})),(0,r.onBeforeUnmount)((function(){s&&i.unregister(o.proxy)})),Object.assign(Object.assign({},(0,r.toRefs)(n)),{labelStyles:l,isFormTypeVertical:a,validate:u,clearValidate:d})},render:function(){var t,o,n,i,s=this,a=(0,e.classes)({"bk-form-item":!0,"is-error":this.isError,"is-required":this.required});return(0,r.createVNode)("div",{class:a},[(0,r.createVNode)("div",{class:"bk-form-label",style:this.labelStyles},[s.$slots.label?s.$slots.label():s.description?(0,r.withDirectives)((0,r.createVNode)("span",{class:{"bk-form-label-description":Boolean(s.description)}},[s.label]),[[(0,r.resolveDirective)("bk-tooltips"),s.description]]):s.label,this.isFormTypeVertical&&(null===(o=(t=this.$slots).labelAppend)||void 0===o?void 0:o.call(t))]),(0,r.createVNode)("div",{class:"bk-form-content"},[null===(i=(n=this.$slots).default)||void 0===i?void 0:i.call(n),s.isError?"tooltips"===s.errorDisplayType?(0,r.withDirectives)((0,r.createVNode)("div",{class:"bk-form-error-tips"},[(0,r.createVNode)(f.ExclamationCircleShape,null,null)]),[[(0,r.resolveDirective)("bk-tooltips"),s.errorMessage]]):(0,r.createVNode)("div",{class:"bk-form-error"},[s.$slots.error?s.$slots.error(s.errorMessage):s.errorMessage]):null])])}});var y=(0,e.withInstallProps)(s,{FormItem:v,ComposeFormItem:o});const h=y})(),l})()));

package/lib/form/type.d.ts

@@ -1,21 +1,23 @@
 import type { FormProps } from './form';
 import type { FormItemProps } from './form-item';
-export interface IFormItemContext extends FormItemProps {
-    validate: () => Promise<boolean>;
-    clearValidate: () => void;
-}
 export interface IFormContext {
     props: FormProps;
     register: (IFormItemContext: any) => void;
     unregister: (IFormItemContext: any) => void;
 }
-export declare type IFormItemRules = Array<{
+export interface IFormItemContext extends FormItemProps {
+    validate: (trigger?: string) => Promise<boolean>;
+    clearValidate: () => void;
+}
+export interface IFormItemRule {
     required?: boolean;
     email?: boolean;
     min?: number;
     max?: number;
     maxlength?: number;
+    pattern?: RegExp;
     validator?: (any: any) => boolean | Promise<boolean>;
     message: string;
     trigger: 'blur' | 'change';
-}>;
+}
+export declare type IFormItemRules = Array<IFormItemRule>;

package/lib/form/validator.d.ts

@@ -4,5 +4,6 @@ declare const _default: {
     max: (value: number, max: number) => boolean;
     email: (value: string) => boolean;
     maxlength: (value: string, maxlength: number) => boolean;
+    pattern: (value: string, pattern: RegExp) => boolean;
 };
 export default _default;