@tmagic/form 1.3.0-alpha.13 → 1.3.0-alpha.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.13",
+  "version": "1.3.0-alpha.15",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.13",
-    "@tmagic/utils": "1.3.0-alpha.13",
+    "@tmagic/design": "1.3.0-alpha.15",
+    "@tmagic/utils": "1.3.0-alpha.15",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.4"
@@ -56,7 +56,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
+    "vite": "^4.4.4",
     "vue-tsc": "^1.6.5"
   }
 }

package/src/FormDialog.vue

@@ -118,10 +118,6 @@ const hasStep = computed(() => {
   return false;
 });
 
-const cancel = () => {
-  dialogVisible.value = false;
-};
-
 const closeHandler = () => {
   stepActive.value = 1;
   emit('close');
@@ -148,6 +144,18 @@ const changeHandler = (value: any) => {
   emit('change', value);
 };
 
+const show = () => {
+  dialogVisible.value = true;
+};
+
+const hide = () => {
+  dialogVisible.value = false;
+};
+
+const cancel = () => {
+  hide();
+};
+
 defineExpose({
   form,
   saveFetch,
@@ -155,5 +163,7 @@ defineExpose({
 
   cancel,
   save,
+  show,
+  hide,
 });
 </script>

package/src/FormDrawer.vue

@@ -0,0 +1,130 @@
+<template>
+  <TMagicDrawer
+    class="m-form-drawer"
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="true"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="width"
+    :zIndex="zIndex"
+    @open="openHandler"
+    @opened="openedHandler"
+  >
+    <div v-if="visible" ref="drawerBody" class="m-drawer-body">
+      <Form
+        ref="form"
+        :size="size"
+        :disabled="disabled"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        @change="changeHandler"
+      ></Form>
+      <slot></slot>
+    </div>
+
+    <template #footer>
+      <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 @click="hide">关闭</TMagicButton>
+            <TMagicButton type="primary" @click="submitHandler" :loading="saveFetch">{{ confirmText }}</TMagicButton>
+          </slot>
+        </TMagicCol>
+      </TMagicRow>
+    </template>
+  </TMagicDrawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicCol, TMagicDrawer, 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;
+    title?: string;
+    zIndex?: number;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+  }>(),
+  {
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'submit', 'error', 'change', 'open', 'opened']);
+
+const form = ref<InstanceType<typeof Form>>();
+const drawerBody = ref<HTMLDivElement>();
+const visible = ref(false);
+const saveFetch = ref(false);
+const bodyHeight = ref(0);
+
+watchEffect(() => {
+  if (drawerBody.value) {
+    bodyHeight.value = drawerBody.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 openHandler = (value: any) => {
+  emit('open', value);
+};
+
+const openedHandler = (value: any) => {
+  emit('opened', value);
+};
+
+const show = () => {
+  visible.value = true;
+};
+
+const hide = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  bodyHeight,
+
+  show,
+  hide,
+});
+</script>

package/src/containers/Container.vue

@@ -2,8 +2,7 @@
   <div
     v-if="config"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
-    :class="config.className"
-    class="m-form-container"
+    :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >
     <m-fields-hidden
       v-if="type === 'hidden'"

package/src/index.ts

@@ -56,6 +56,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 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

@@ -146,7 +146,7 @@ export type TypeFunction = (
   },
 ) => string;
 
-type FilterFunction = (
+export type FilterFunction = (
   mForm: FormState | undefined,
   data: {
     model: Record<any, any>;

package/src/theme/form-drawer.scss

@@ -0,0 +1,11 @@
+.m-form-drawer {
+  .el-drawer__header {
+    margin: 0;
+  }
+
+  .m-drawer-body {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

package/src/theme/index.scss

@@ -1,4 +1,5 @@
 @use "./form-dialog.scss";
+@use "./form-drawer.scss";
 @use "./form.scss";
 @use "./date-time.scss";
 @use "./link.scss";

package/src/theme/panel.scss

@@ -16,3 +16,9 @@
     margin-left: 5px;
   }
 }
+
+.m-container-panel {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+}

package/types/FormDialog.vue.d.ts

@@ -278,6 +278,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dialogVisible: import("vue").Ref<boolean>;
     cancel: () => void;
     save: () => Promise<void>;
+    show: () => void;
+    hide: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "submit" | "error")[], "change" | "close" | "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;

package/types/FormDrawer.vue.d.ts

@@ -0,0 +1,333 @@
+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;
+    title?: string | undefined;
+    zIndex?: number | undefined;
+    size?: "default" | "small" | "large" | undefined;
+    confirmText?: string | undefined;
+}>, {
+    config: () => never[];
+    values: () => {};
+    confirmText: string;
+}>, {
+    form: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            config?: FormConfig | undefined;
+            initValues?: Object | undefined;
+            lastValues?: Object | undefined;
+            isCompare?: boolean | undefined;
+            keyProp?: string | undefined;
+            parentValues?: Object | undefined;
+            labelWidth?: string | undefined;
+            disabled?: boolean | undefined;
+            stepActive?: string | number | undefined;
+            height?: string | undefined;
+            inline?: boolean | undefined;
+            labelPosition?: string | undefined;
+            readonly popperClass?: string | undefined;
+            key?: string | number | symbol | undefined;
+            onChange?: ((...args: any[]) => any) | undefined;
+            readonly size?: "default" | "small" | "large" | undefined;
+            ref?: import("vue").VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            class?: unknown;
+            style?: unknown;
+            readonly extendState?: ((state: import("./schema").FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
+            "onField-input"?: ((...args: any[]) => any) | undefined;
+            "onField-change"?: ((...args: any[]) => any) | undefined;
+        };
+        $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<Object>;
+                required: true;
+                default: () => {};
+            };
+            lastValues: {
+                type: import("vue").PropType<Object>;
+                default: () => {};
+            };
+            isCompare: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            keyProp: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            parentValues: {
+                type: import("vue").PropType<Object>;
+                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<"default" | "small" | "large">;
+            };
+            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: Object;
+            lastValues: Object;
+            isCompare: boolean;
+            keyProp: string;
+            parentValues: Object;
+            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<Object>;
+            required: true;
+            default: () => {};
+        };
+        lastValues: {
+            type: import("vue").PropType<Object>;
+            default: () => {};
+        };
+        isCompare: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        keyProp: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        parentValues: {
+            type: import("vue").PropType<Object>;
+            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<"default" | "small" | "large">;
+        };
+        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" | "close" | "submit" | "error" | "open" | "opened")[], "change" | "close" | "submit" | "error" | "open" | "opened", 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;
+    title?: string | undefined;
+    zIndex?: number | undefined;
+    size?: "default" | "small" | "large" | undefined;
+    confirmText?: string | undefined;
+}>, {
+    config: () => never[];
+    values: () => {};
+    confirmText: string;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onOpened?: ((...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];
+} & {};

package/types/index.d.ts

@@ -5,6 +5,7 @@ export * from './utils/form';
 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 MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
 export { default as MPanel } from './containers/Panel.vue';

package/types/schema.d.ts

@@ -109,7 +109,7 @@ export interface Input {
 export type TypeFunction = (mForm: FormState | undefined, data: {
     model: Record<any, any>;
 }) => string;
-type FilterFunction = (mForm: FormState | undefined, data: {
+export type FilterFunction = (mForm: FormState | undefined, data: {
     model: Record<any, any>;
     values: Record<any, any>;
     parent?: Record<any, any>;