@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/forms/index.css

@@ -1,83 +1,83 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-forms {
-  --el-forms-inline-right: 16px;
-  --el-forms-row-height: 32px;
-  --el-input-height: var(--el-forms-row-height);
+.forms {
+  --forms-inline-right: 16px;
+  --forms-row-height: 32px;
+  --el-input-height: var(--forms-row-height);
 }
-.el-forms .el-form--label-center .el-form-item__label {
+.forms .el-form--label-center .el-form-item__label {
   justify-content: center;
   text-align: center;
 }
-.el-forms .el-form--label-left .el-form-item__label {
+.forms .el-form--label-left .el-form-item__label {
   justify-content: flex-start;
   text-align: left;
 }
-.el-forms .el-form-item__label {
-  text-align: right;
+.forms .el-form-item__label {
+  text-align: left;
 }
-.el-forms-div--column .el-forms-li {
+.forms-div--column .forms-li {
   display: inline-flex;
   margin-right: 0;
 }
-.el-forms-div--inline .el-forms-elf {
+.forms-div--inline .forms-elf {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.el-forms-div--inline .el-forms-li {
+.forms-div--inline .forms-li {
   height: fit-content;
-  margin-right: var(--el-forms-inline-right);
+  margin-right: var(--forms-inline-right);
 }
-.el-forms-div--box .el-forms-elf {
+.forms-div--box .forms-elf {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.el-forms-div--box .el-forms-li {
+.forms-div--box .forms-li {
   box-sizing: border-box;
   margin-right: 0;
-  padding-right: var(--el-forms-inline-right);
+  padding-right: var(--forms-inline-right);
 }
-.el-forms-div--query .el-forms-elf {
+.forms-div--query .forms-elf {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
-.el-forms-div--query .el-forms-li {
+.forms-div--query .forms-li {
   height: fit-content;
-  margin-top: var(--el-forms-query-interval);
-  margin-bottom: var(--el-forms-query-interval);
-  margin-right: var(--el-forms-inline-right);
+  margin-top: var(--forms-query-interval);
+  margin-bottom: var(--forms-query-interval);
+  margin-right: var(--forms-inline-right);
 }
-.el-forms-div--query .el-forms-li .el-form-item {
+.forms-div--query .forms-li .el-form-item {
   margin-bottom: 0;
   flex: 1;
 }
-.el-forms-li .el-form-item {
-  margin-bottom: var(--el-forms-item-bottom);
+.forms-li .el-form-item {
+  margin-bottom: var(--forms-item-bottom);
   flex: 1;
 }
-.el-forms-elf {
+.forms-elf {
   text-align: left;
 }
-.el-forms-elf.center .el-form-item__label {
+.forms-elf.center .el-form-item__label {
   justify-content: center;
 }

package/dist/components/forms/index.d.ts

@@ -1,5 +1,8 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, Component, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, PropType, Reactive, ComponentProvideOptions, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, Plugin } from 'vue';
+import { FormItemRule, FormItemProp, FormValidateCallback, FormValidationResult, FormItemContext } from 'element-plus/es/index';
+import { OnCleanup } from '@vue/reactivity';
 declare const Forms: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         list: {
             type: {
                 (arrayLength: number): ListObj[];
@@ -32,7 +35,7 @@ declare const Forms: {
         };
         compons: {
             type: () => {
-                [key: string]: import('vue').Component;
+                [key: string]: Component;
             };
             default(): {};
         };
@@ -119,13 +122,13 @@ declare const Forms: {
             type: FunctionConstructor;
         };
     }>> & Readonly<{}>, {
-        el: import('vue').Ref<any, any>;
+        el: Ref<any, any>;
         closeForm: () => void;
         submitForm: (callback?: Function) => void;
         validateField: (...arr: any[]) => void;
         resetFields: () => void;
         validate: () => Promise<unknown>;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         param: Record<string, any>;
         list: ListObj[];
         disabled: boolean;
@@ -135,17 +138,17 @@ declare const Forms: {
         inline: boolean;
         column: number;
         compons: {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
         inlineBox: boolean;
         query: boolean;
         queryInterval: string;
         inlineRight: string;
         itemBottom: string;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
         refEl: HTMLDivElement;
         refForm: ({
-            $: import('vue').ComponentInternalInstance;
+            $: ComponentInternalInstance;
             $data: {};
             $props: Partial<{
                 readonly disabled: boolean;
@@ -175,11 +178,11 @@ declare const Forms: {
                 readonly hideRequiredAsterisk: boolean;
                 readonly scrollToError: boolean;
                 readonly scrollIntoViewOptions: boolean | Record<string, any>;
-                readonly size?: ("" | "small" | "default" | "large") | undefined;
-                readonly rules?: Partial<Record<string, import('element-plus/es/index').FormItemRule | import('element-plus/es/index').FormItemRule[]>> | undefined;
+                readonly size?: ("" | "default" | "small" | "large") | undefined;
+                readonly rules?: Partial<Record<string, FormItemRule | FormItemRule[]>> | undefined;
                 readonly model?: Record<string, any> | undefined;
-                onValidate?: ((prop: import('element-plus/es/index').FormItemProp, isValid: boolean, message: string) => any) | undefined | undefined;
-            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "disabled" | "labelWidth" | "labelPosition" | "inlineMessage" | "showMessage" | "requireAsteriskPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions">;
+                onValidate?: ((prop: FormItemProp, isValid: boolean, message: string) => any) | undefined | undefined;
+            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "disabled" | "labelWidth" | "labelPosition" | "inlineMessage" | "showMessage" | "requireAsteriskPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -187,23 +190,23 @@ declare const Forms: {
                 [x: string]: unknown;
             };
             $slots: Readonly<{
-                [name: string]: import('vue').Slot<any> | undefined;
+                [name: string]: Slot<any> | undefined;
             }>;
-            $root: import('vue').ComponentPublicInstance | null;
-            $parent: import('vue').ComponentPublicInstance | null;
+            $root: ComponentPublicInstance | null;
+            $parent: ComponentPublicInstance | null;
             $host: Element | null;
-            $emit: (event: "validate", prop: import('element-plus/es/index').FormItemProp, isValid: boolean, message: string) => void;
+            $emit: (event: "validate", prop: FormItemProp, isValid: boolean, message: string) => void;
             $el: any;
-            $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            $options: ComponentOptionsBase<Readonly< ExtractPropTypes<{
                 readonly model: ObjectConstructor;
                 readonly rules: {
-                    readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/index').FormItemRule | import('element-plus/es/index').FormItemRule[]>>>;
+                    readonly type: PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
                 readonly labelPosition: {
-                    readonly type: import('vue').PropType<"left" | "right" | "top">;
+                    readonly type: PropType<"left" | "right" | "top">;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -211,7 +214,7 @@ declare const Forms: {
                     readonly default: "right";
                 };
                 readonly requireAsteriskPosition: {
-                    readonly type: import('vue').PropType<"left" | "right">;
+                    readonly type: PropType<"left" | "right">;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -219,7 +222,7 @@ declare const Forms: {
                     readonly default: "left";
                 };
                 readonly labelWidth: {
-                    readonly type: import('vue').PropType<string | number>;
+                    readonly type: PropType<string | number>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -227,7 +230,7 @@ declare const Forms: {
                     readonly default: "";
                 };
                 readonly labelSuffix: {
-                    readonly type: import('vue').PropType<string>;
+                    readonly type: PropType<string>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -238,7 +241,7 @@ declare const Forms: {
                 readonly inlineMessage: BooleanConstructor;
                 readonly statusIcon: BooleanConstructor;
                 readonly showMessage: {
-                    readonly type: import('vue').PropType<boolean>;
+                    readonly type: PropType<boolean>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -246,7 +249,7 @@ declare const Forms: {
                     readonly default: true;
                 };
                 readonly validateOnRuleChange: {
-                    readonly type: import('vue').PropType<boolean>;
+                    readonly type: PropType<boolean>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -256,7 +259,7 @@ declare const Forms: {
                 readonly hideRequiredAsterisk: BooleanConstructor;
                 readonly scrollToError: BooleanConstructor;
                 readonly scrollIntoViewOptions: {
-                    readonly type: import('vue').PropType<boolean | Record<string, any>>;
+                    readonly type: PropType<boolean | Record<string, any>>;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
@@ -264,24 +267,24 @@ declare const Forms: {
                     readonly default: true;
                 };
                 readonly size: {
-                    readonly type: import('vue').PropType<"" | "small" | "default" | "large">;
+                    readonly type: PropType<"" | "default" | "small" | "large">;
                     readonly required: false;
                     readonly validator: ((val: unknown) => boolean) | undefined;
                     __epPropKey: true;
                 };
                 readonly disabled: BooleanConstructor;
             }>> & {
-                onValidate?: ((prop: import('element-plus/es/index').FormItemProp, isValid: boolean, message: string) => any) | undefined;
+                onValidate?: ((prop: FormItemProp, isValid: boolean, message: string) => any) | undefined;
             }, {
-                validate: (callback?: import('element-plus/es/index').FormValidateCallback) => import('element-plus/es/index').FormValidationResult;
-                validateField: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[], callback?: import('element-plus/es/index').FormValidateCallback) => import('element-plus/es/index').FormValidationResult;
-                resetFields: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[]) => void;
-                clearValidate: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[]) => void;
-                scrollToField: (prop: import('element-plus/es/index').FormItemProp) => void;
-                getField: (prop: import('element-plus/es/index').FormItemProp) => import('element-plus/es/index').FormItemContext | undefined;
-                fields: import('vue').Reactive<import('element-plus/es/index').FormItemContext[]>;
-            }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                validate: (prop: import('element-plus/es/index').FormItemProp, isValid: boolean, message: string) => void;
+                validate: (callback?: FormValidateCallback) => FormValidationResult;
+                validateField: (props?: FormItemProp | FormItemProp[], callback?: FormValidateCallback) => FormValidationResult;
+                resetFields: (props?: FormItemProp | FormItemProp[]) => void;
+                clearValidate: (props?: FormItemProp | FormItemProp[]) => void;
+                scrollToField: (prop: FormItemProp) => void;
+                getField: (prop: FormItemProp) => FormItemContext | undefined;
+                fields: Reactive< FormItemContext[]>;
+            }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+                validate: (prop: FormItemProp, isValid: boolean, message: string) => void;
             }, string, {
                 readonly disabled: boolean;
                 readonly inline: boolean;
@@ -296,7 +299,7 @@ declare const Forms: {
                 readonly statusIcon: boolean;
                 readonly hideRequiredAsterisk: boolean;
                 readonly scrollToError: boolean;
-            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
                 beforeMount?: (() => void) | (() => void)[];
@@ -309,13 +312,13 @@ declare const Forms: {
                 beforeUnmount?: (() => void) | (() => void)[];
                 destroyed?: (() => void) | (() => void)[];
                 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 | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+                renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            $nextTick: nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
         } & Readonly<{
             readonly disabled: boolean;
             readonly inline: boolean;
@@ -330,16 +333,16 @@ declare const Forms: {
             readonly statusIcon: boolean;
             readonly hideRequiredAsterisk: boolean;
             readonly scrollToError: boolean;
-        }> & Omit<Readonly<import('vue').ExtractPropTypes<{
+        }> & Omit<Readonly< ExtractPropTypes<{
             readonly model: ObjectConstructor;
             readonly rules: {
-                readonly type: import('vue').PropType<Partial<Record<string, import('element-plus/es/index').FormItemRule | import('element-plus/es/index').FormItemRule[]>>>;
+                readonly type: PropType<Partial<Record<string, FormItemRule | FormItemRule[]>>>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
             readonly labelPosition: {
-                readonly type: import('vue').PropType<"left" | "right" | "top">;
+                readonly type: PropType<"left" | "right" | "top">;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -347,7 +350,7 @@ declare const Forms: {
                 readonly default: "right";
             };
             readonly requireAsteriskPosition: {
-                readonly type: import('vue').PropType<"left" | "right">;
+                readonly type: PropType<"left" | "right">;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -355,7 +358,7 @@ declare const Forms: {
                 readonly default: "left";
             };
             readonly labelWidth: {
-                readonly type: import('vue').PropType<string | number>;
+                readonly type: PropType<string | number>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -363,7 +366,7 @@ declare const Forms: {
                 readonly default: "";
             };
             readonly labelSuffix: {
-                readonly type: import('vue').PropType<string>;
+                readonly type: PropType<string>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -374,7 +377,7 @@ declare const Forms: {
             readonly inlineMessage: BooleanConstructor;
             readonly statusIcon: BooleanConstructor;
             readonly showMessage: {
-                readonly type: import('vue').PropType<boolean>;
+                readonly type: PropType<boolean>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -382,7 +385,7 @@ declare const Forms: {
                 readonly default: true;
             };
             readonly validateOnRuleChange: {
-                readonly type: import('vue').PropType<boolean>;
+                readonly type: PropType<boolean>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -392,7 +395,7 @@ declare const Forms: {
             readonly hideRequiredAsterisk: BooleanConstructor;
             readonly scrollToError: BooleanConstructor;
             readonly scrollIntoViewOptions: {
-                readonly type: import('vue').PropType<boolean | Record<string, any>>;
+                readonly type: PropType<boolean | Record<string, any>>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -400,35 +403,35 @@ declare const Forms: {
                 readonly default: true;
             };
             readonly size: {
-                readonly type: import('vue').PropType<"" | "small" | "default" | "large">;
+                readonly type: PropType<"" | "default" | "small" | "large">;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
             readonly disabled: BooleanConstructor;
         }>> & {
-            onValidate?: ((prop: import('element-plus/es/index').FormItemProp, isValid: boolean, message: string) => any) | undefined;
-        }, "disabled" | "labelWidth" | "labelPosition" | "inlineMessage" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields"> & import('vue').ShallowUnwrapRef<{
-            validate: (callback?: import('element-plus/es/index').FormValidateCallback) => import('element-plus/es/index').FormValidationResult;
-            validateField: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[], callback?: import('element-plus/es/index').FormValidateCallback) => import('element-plus/es/index').FormValidationResult;
-            resetFields: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[]) => void;
-            clearValidate: (props?: import('element-plus/es/index').FormItemProp | import('element-plus/es/index').FormItemProp[]) => void;
-            scrollToField: (prop: import('element-plus/es/index').FormItemProp) => void;
-            getField: (prop: import('element-plus/es/index').FormItemProp) => import('element-plus/es/index').FormItemContext | undefined;
-            fields: import('vue').Reactive<import('element-plus/es/index').FormItemContext[]>;
-        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            onValidate?: ((prop: FormItemProp, isValid: boolean, message: string) => any) | undefined;
+        }, "disabled" | "labelWidth" | "labelPosition" | "inlineMessage" | "showMessage" | "validate" | "clearValidate" | "requireAsteriskPosition" | "labelSuffix" | "inline" | "statusIcon" | "validateOnRuleChange" | "hideRequiredAsterisk" | "scrollToError" | "scrollIntoViewOptions" | "validateField" | "resetFields" | "scrollToField" | "getField" | "fields"> & ShallowUnwrapRef<{
+            validate: (callback?: FormValidateCallback) => FormValidationResult;
+            validateField: (props?: FormItemProp | FormItemProp[], callback?: FormValidateCallback) => FormValidationResult;
+            resetFields: (props?: FormItemProp | FormItemProp[]) => void;
+            clearValidate: (props?: FormItemProp | FormItemProp[]) => void;
+            scrollToField: (prop: FormItemProp) => void;
+            getField: (prop: FormItemProp) => FormItemContext | undefined;
+            fields: Reactive< FormItemContext[]>;
+        }> & {} & ComponentCustomProperties & {} & {
             $slots: {
                 default?(_: {}): any;
             };
         }) | null;
-    }, any, import('vue').ComponentProvideOptions, {
+    }, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         list: {
             type: {
                 (arrayLength: number): ListObj[];
@@ -461,7 +464,7 @@ declare const Forms: {
         };
         compons: {
             type: () => {
-                [key: string]: import('vue').Component;
+                [key: string]: Component;
             };
             default(): {};
         };
@@ -548,7 +551,7 @@ declare const Forms: {
             type: FunctionConstructor;
         };
     }>> & Readonly<{}>, {
-        el: import('vue').Ref<any, any>;
+        el: Ref<any, any>;
         closeForm: () => void;
         submitForm: (callback?: Function) => void;
         validateField: (...arr: any[]) => void;
@@ -564,7 +567,7 @@ declare const Forms: {
         inline: boolean;
         column: number;
         compons: {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
         inlineBox: boolean;
         query: boolean;
@@ -575,7 +578,7 @@ declare const Forms: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     list: {
         type: {
             (arrayLength: number): ListObj[];
@@ -608,7 +611,7 @@ declare const Forms: {
     };
     compons: {
         type: () => {
-            [key: string]: import('vue').Component;
+            [key: string]: Component;
         };
         default(): {};
     };
@@ -695,13 +698,13 @@ declare const Forms: {
         type: FunctionConstructor;
     };
 }>> & Readonly<{}>, {
-    el: import('vue').Ref<any, any>;
+    el: Ref<any, any>;
     closeForm: () => void;
     submitForm: (callback?: Function) => void;
     validateField: (...arr: any[]) => void;
     resetFields: () => void;
     validate: () => Promise<unknown>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     param: Record<string, any>;
     list: ListObj[];
     disabled: boolean;
@@ -711,14 +714,14 @@ declare const Forms: {
     inline: boolean;
     column: number;
     compons: {
-        [key: string]: import('vue').Component;
+        [key: string]: Component;
     };
     inlineBox: boolean;
     query: boolean;
     queryInterval: string;
     inlineRight: string;
     itemBottom: string;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: {}) => any>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { Forms, Forms as default };

package/dist/components/forms/index.scss

@@ -5,18 +5,18 @@ $forms: 'forms';
 	#{vdm('inline-right', $forms)}: 16px;
 	#{vdm('row-height', $forms)}: 32px;
 
-	--#{$namespace}-input-height: var(#{vdm('row-height', $forms)});
+	--#{e()}input-height: var(#{vdm('row-height', $forms)});
 
-	.#{$namespace}-form--label-center .#{$namespace}-form-item__label {
+	.#{e()}form--label-center .#{e()}form-item__label {
 		justify-content: center;
 		text-align: center;
 	}
-	.#{$namespace}-form--label-left .#{$namespace}-form-item__label {
+	.#{e()}form--label-left .#{e()}form-item__label {
 		justify-content: flex-start;
 		text-align: left;
 	}
-	.#{$namespace}-form-item__label {
-		text-align: right;
+	.#{e()}form-item__label {
+		text-align: left;
 	}
 	&-div--column {
 		.#{z($forms, 'li')} {
@@ -64,14 +64,14 @@ $forms: 'forms';
 			margin-top: var(vdm('query-interval', $forms));
 			margin-bottom: var(vdm('query-interval', $forms));
 			margin-right: var(vdm('inline-right', $forms));
-			.#{$namespace}-form-item {
+			.#{e()}form-item {
 				margin-bottom: 0;
 				flex: 1;
 			}
 		}
 	}
 	&-li {
-		.#{$namespace}-form-item {
+		.#{e()}form-item {
 			margin-bottom: var(vdm('item-bottom', $forms));
 			flex: 1;
 		}
@@ -84,7 +84,7 @@ $forms: 'forms';
 		// }
 		&.center {
 			// text-align: center;
-			.#{$namespace}-form-item__label {
+			.#{e()}form-item__label {
 				justify-content: center;
 			}
 		}

package/dist/components/forms/index.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const Forms = withInstall(SrcVue, 'Forms');
+export {
+   Forms,
+   Forms as default
+};