@tmagic/form 1.3.1 → 1.3.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.1",
+  "version": "1.3.3",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -37,14 +37,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.1",
-    "@tmagic/utils": "1.3.1",
+    "@tmagic/design": "1.3.3",
+    "@tmagic/utils": "1.3.3",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
@@ -52,7 +52,7 @@
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.3.8",
     "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",

package/src/FormBox.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="m-form-box">
+    <div ref="boxBody" class="m-box-body">
+      <Form
+        ref="form"
+        :size="size"
+        :disabled="disabled"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        :label-position="labelPosition"
+        :inline="inline"
+        @change="changeHandler"
+      ></Form>
+      <slot></slot>
+    </div>
+
+    <TMagicRow class="dialog-footer">
+      <TMagicCol :span="12" style="text-align: left">
+        <div style="min-height: 1px">
+          <slot name="left"></slot>
+        </div>
+      </TMagicCol>
+      <TMagicCol :span="12">
+        <slot name="footer">
+          <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+            confirmText
+          }}</TMagicButton>
+        </slot>
+      </TMagicCol>
+    </TMagicRow>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicCol, TMagicRow } from '@tmagic/design';
+
+import Form from './Form.vue';
+import type { FormConfig } from './schema';
+
+defineOptions({
+  name: 'MFormDialog',
+});
+
+withDefaults(
+  defineProps<{
+    config?: FormConfig;
+    values?: Object;
+    parentValues?: Object;
+    width?: string | number;
+    labelWidth?: string;
+    disabled?: boolean;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+    inline?: boolean;
+    labelPosition?: string;
+  }>(),
+  {
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['submit', 'change', 'error']);
+
+const form = ref<InstanceType<typeof Form>>();
+const boxBody = ref<HTMLDivElement>();
+const saveFetch = ref(false);
+const bodyHeight = ref(0);
+
+watchEffect(() => {
+  if (boxBody.value) {
+    bodyHeight.value = boxBody.value.clientHeight;
+  }
+});
+
+const submitHandler = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (e) {
+    emit('error', e);
+  }
+};
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const show = () => {};
+
+const hide = () => {};
+
+defineExpose({
+  form,
+  saveFetch,
+  bodyHeight,
+
+  show,
+  hide,
+});
+</script>

package/src/index.ts

@@ -59,6 +59,7 @@ export * from './utils/useAddField';
 export { default as MForm } from './Form.vue';
 export { default as MFormDialog } from './FormDialog.vue';
 export { default as MFormDrawer } from './FormDrawer.vue';
+export { default as MFormBox } from './FormBox.vue';
 export { default as MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
 export { default as MPanel } from './containers/Panel.vue';

package/src/schema.ts

@@ -72,19 +72,19 @@ export interface FormItem {
   /** 字段名 */
   name?: string | number;
   /** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
-  extra?: string | FilterFunction;
+  extra?: string | FilterFunction<string>;
   /** 配置提示信息 */
-  tooltip?: string | FilterFunction;
+  tooltip?: string | FilterFunction<string>;
   /** 是否置灰 */
   disabled?: boolean | FilterFunction;
   /** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
   key?: string;
   /** 是否显示 */
-  display?: boolean | 'expand' | FilterFunction;
+  display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
   /** 值发生改变时调用的方法 */
   onChange?: OnChangeHandler;
   /** label 标签的文本 */
-  text?: string | FilterFunction;
+  text?: string | FilterFunction<string>;
   /** 右侧感叹号 */
   tip?: string;
 
@@ -158,7 +158,7 @@ export type TypeFunction = (
   },
 ) => string;
 
-export type FilterFunction = (
+export type FilterFunction<T = boolean> = (
   mForm: FormState | undefined,
   data: {
     model: Record<any, any>;
@@ -168,7 +168,7 @@ export type FilterFunction = (
     prop: string;
     config: any;
   },
-) => boolean;
+) => T;
 
 type OnChangeHandler = (
   mForm: FormState | undefined,
@@ -667,7 +667,7 @@ export interface TableConfig extends FormItem {
   /** 是否显示全屏按钮 */
   enableFullscreen?: boolean;
   fixed?: boolean;
-  itemExtra?: string | FilterFunction;
+  itemExtra?: string | FilterFunction<string>;
   rowKey?: string;
 }
 
@@ -680,8 +680,8 @@ export interface GroupListConfig extends FormItem {
   tableItems?: FormConfig;
   titleKey?: string;
   titlePrefix?: string;
-  title?: string | FilterFunction;
-  itemExtra?: string | FilterFunction;
+  title?: string | FilterFunction<string>;
+  itemExtra?: string | FilterFunction<string>;
   expandAll?: boolean;
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
   defaultAdd?: (mForm: FormState | undefined, data: any) => any;

package/src/theme/form-box.scss

@@ -0,0 +1,18 @@
+.m-form-box {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  width: 100%;
+  .el-box__header {
+    margin: 0;
+  }
+
+  .m-box-body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .dialog-footer {
+    margin-top: 16px;
+  }
+}

package/src/theme/index.scss

@@ -10,3 +10,4 @@
 @use "./select.scss";
 @use "./tabs.scss";
 @use "./number-range.scss";
+@use "./form-box.scss";

package/src/utils/form.ts

@@ -181,7 +181,7 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
   return '';
 };
 
-export const filterFunction = (mForm: FormState | undefined, config: any, props: any) => {
+export const filterFunction = <T = any>(mForm: FormState | undefined, config: T, props: any) => {
   if (typeof config !== 'function') {
     return config;
   }

package/types/FormBox.vue.d.ts

@@ -0,0 +1,363 @@
+import type { FormConfig } from './schema';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config?: FormConfig | undefined;
+    values?: Object | undefined;
+    parentValues?: Object | undefined;
+    width?: string | number | undefined;
+    labelWidth?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "large" | "default" | "small" | undefined;
+    confirmText?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
+}>, {
+    config: () => never[];
+    values: () => {};
+    confirmText: string;
+}>, {
+    form: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            config: FormConfig;
+            initValues: Record<string, any>;
+            lastValues: Record<string, any>;
+            isCompare: boolean;
+            keyProp: string;
+            parentValues: Record<string, any>;
+            labelWidth: string;
+            disabled: boolean;
+            stepActive: string | number;
+            height: string;
+            inline: boolean;
+            labelPosition: string;
+        }> & Omit<{
+            readonly config: FormConfig;
+            readonly initValues: Record<string, any>;
+            readonly lastValues: Record<string, any>;
+            readonly isCompare: boolean;
+            readonly keyProp: string;
+            readonly parentValues: Record<string, any>;
+            readonly labelWidth: string;
+            readonly disabled: boolean;
+            readonly stepActive: string | number;
+            readonly height: string;
+            readonly inline: boolean;
+            readonly labelPosition: string;
+            readonly popperClass?: string | undefined;
+            readonly size?: "large" | "default" | "small" | undefined;
+            readonly extendState?: ((state: import("./schema").FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            config: {
+                type: import("vue").PropType<FormConfig>;
+                required: true;
+                default: () => never[];
+            };
+            popperClass: {
+                type: import("vue").PropType<string>;
+            };
+            initValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                required: true;
+                default: () => {};
+            };
+            lastValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                default: () => {};
+            };
+            isCompare: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            keyProp: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            parentValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                default: () => {};
+            };
+            labelWidth: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            stepActive: {
+                type: import("vue").PropType<string | number>;
+                default: number;
+            };
+            size: {
+                type: import("vue").PropType<"large" | "default" | "small">;
+            };
+            height: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            inline: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            labelPosition: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            extendState: {
+                type: import("vue").PropType<(state: import("./schema").FormState) => Record<string, any> | Promise<Record<string, any>>>;
+            };
+        }>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        }, "config" | "initValues" | "lastValues" | "isCompare" | "keyProp" | "parentValues" | "labelWidth" | "disabled" | "stepActive" | "height" | "inline" | "labelPosition">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $emit: (event: "change" | "field-input" | "field-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            config: {
+                type: import("vue").PropType<FormConfig>;
+                required: true;
+                default: () => never[];
+            };
+            popperClass: {
+                type: import("vue").PropType<string>;
+            };
+            initValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                required: true;
+                default: () => {};
+            };
+            lastValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                default: () => {};
+            };
+            isCompare: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            keyProp: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            parentValues: {
+                type: import("vue").PropType<Record<string, any>>;
+                default: () => {};
+            };
+            labelWidth: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            stepActive: {
+                type: import("vue").PropType<string | number>;
+                default: number;
+            };
+            size: {
+                type: import("vue").PropType<"large" | "default" | "small">;
+            };
+            height: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            inline: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            labelPosition: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            extendState: {
+                type: import("vue").PropType<(state: import("./schema").FormState) => Record<string, any> | Promise<Record<string, any>>>;
+            };
+        }>> & {
+            onChange?: ((...args: any[]) => any) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        }, {
+            values: import("vue").Ref<import("./schema").FormValue>;
+            lastValuesProcessed: import("vue").Ref<import("./schema").FormValue>;
+            formState: import("./schema").FormState;
+            initialized: import("vue").Ref<boolean>;
+            changeHandler: () => void;
+            resetForm: () => any;
+            submitForm: (native?: boolean | undefined) => Promise<any>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], string, {
+            config: FormConfig;
+            initValues: Record<string, any>;
+            lastValues: Record<string, any>;
+            isCompare: boolean;
+            keyProp: string;
+            parentValues: Record<string, any>;
+            labelWidth: string;
+            disabled: boolean;
+            stepActive: string | number;
+            height: string;
+            inline: boolean;
+            labelPosition: string;
+        }, {}, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $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> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        config: {
+            type: import("vue").PropType<FormConfig>;
+            required: true;
+            default: () => never[];
+        };
+        popperClass: {
+            type: import("vue").PropType<string>;
+        };
+        initValues: {
+            type: import("vue").PropType<Record<string, any>>;
+            required: true;
+            default: () => {};
+        };
+        lastValues: {
+            type: import("vue").PropType<Record<string, any>>;
+            default: () => {};
+        };
+        isCompare: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        keyProp: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        parentValues: {
+            type: import("vue").PropType<Record<string, any>>;
+            default: () => {};
+        };
+        labelWidth: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        stepActive: {
+            type: import("vue").PropType<string | number>;
+            default: number;
+        };
+        size: {
+            type: import("vue").PropType<"large" | "default" | "small">;
+        };
+        height: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        inline: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        labelPosition: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        extendState: {
+            type: import("vue").PropType<(state: import("./schema").FormState) => Record<string, any> | Promise<Record<string, any>>>;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        "onField-input"?: ((...args: any[]) => any) | undefined;
+        "onField-change"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{
+        values: import("vue").Ref<import("./schema").FormValue>;
+        lastValuesProcessed: import("vue").Ref<import("./schema").FormValue>;
+        formState: import("./schema").FormState;
+        initialized: import("vue").Ref<boolean>;
+        changeHandler: () => void;
+        resetForm: () => any;
+        submitForm: (native?: boolean | undefined) => Promise<any>;
+    }> & {} & import("vue").ComponentCustomProperties & {}) | undefined>;
+    saveFetch: import("vue").Ref<boolean>;
+    bodyHeight: import("vue").Ref<number>;
+    show: () => void;
+    hide: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "submit" | "error")[], "change" | "submit" | "error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    config?: FormConfig | undefined;
+    values?: Object | undefined;
+    parentValues?: Object | undefined;
+    width?: string | number | undefined;
+    labelWidth?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "large" | "default" | "small" | undefined;
+    confirmText?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
+}>, {
+    config: () => never[];
+    values: () => {};
+    confirmText: string;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}, {
+    config: FormConfig;
+    values: Object;
+    confirmText: string;
+}, {}>, {
+    default?(_: {}): any;
+    left?(_: {}): any;
+    footer?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};