@tmagic/form 1.4.8 → 1.4.9

package/package.json

@@ -1,9 +1,8 @@
 {
-  "version": "1.4.8",
+  "version": "1.4.9",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
-    "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-form.umd.cjs",
@@ -24,7 +23,8 @@
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "src"
   ],
   "license": "Apache-2.0",
   "engines": {
@@ -54,8 +54,8 @@
   "peerDependencies": {
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.8",
-    "@tmagic/utils": "1.4.8"
+    "@tmagic/design": "1.4.9",
+    "@tmagic/utils": "1.4.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -0,0 +1,201 @@
+<template>
+  <TMagicForm
+    class="m-form"
+    ref="tMagicForm"
+    :model="values"
+    :label-width="labelWidth"
+    :style="`height: ${height}`"
+    :inline="inline"
+    :label-position="labelPosition"
+  >
+    <template v-if="initialized && Array.isArray(config)">
+      <Container
+        v-for="(item, index) in config"
+        :disabled="disabled"
+        :key="item[keyProp] ?? index"
+        :config="item"
+        :model="values"
+        :last-values="lastValuesProcessed"
+        :is-compare="isCompare"
+        :label-width="item.labelWidth || labelWidth"
+        :step-active="stepActive"
+        :size="size"
+        @change="changeHandler"
+      ></Container>
+    </template>
+  </TMagicForm>
+</template>
+
+<script setup lang="ts">
+import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
+import { cloneDeep, isEqual } from 'lodash-es';
+
+import { TMagicForm } from '@tmagic/design';
+
+import Container from './containers/Container.vue';
+import { getConfig } from './utils/config';
+import { initValue } from './utils/form';
+import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
+
+defineOptions({
+  name: 'MForm',
+});
+
+const props = withDefaults(
+  defineProps<{
+    /** 表单配置 */
+    config: FormConfig;
+    /** 表单值 */
+    initValues: Record<string, any>;
+    /** 需对比的值（开启对比模式时传入） */
+    lastValues?: Record<string, any>;
+    /** 是否开启对比模式 */
+    isCompare?: boolean;
+    parentValues?: Record<string, any>;
+    labelWidth?: string;
+    disabled?: boolean;
+    height?: string;
+    stepActive?: string | number;
+    size?: 'small' | 'default' | 'large';
+    inline?: boolean;
+    labelPosition?: string;
+    keyProp?: string;
+    popperClass?: string;
+    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  }>(),
+  {
+    config: () => [],
+    initValues: () => ({}),
+    lastValues: () => ({}),
+    isCompare: false,
+    parentValues: () => ({}),
+    labelWidth: '200px',
+    disabled: false,
+    height: 'auto',
+    stepActive: 1,
+    inline: false,
+    labelPosition: 'right',
+    keyProp: '__key',
+  },
+);
+
+const emit = defineEmits(['change', 'error', 'field-input', 'field-change']);
+
+const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
+const initialized = ref(false);
+const values = ref<FormValue>({});
+const lastValuesProcessed = ref<FormValue>({});
+const fields = new Map<string, any>();
+
+const requestFuc = getConfig('request') as Function;
+
+const formState: FormState = reactive<FormState>({
+  keyProp: props.keyProp,
+  popperClass: props.popperClass,
+  config: props.config,
+  initValues: props.initValues,
+  isCompare: props.isCompare,
+  lastValues: props.lastValues,
+  parentValues: props.parentValues,
+  values,
+  lastValuesProcessed,
+  $emit: emit as (event: string, ...args: any[]) => void,
+  fields,
+  setField: (prop: string, field: any) => fields.set(prop, field),
+  getField: (prop: string) => fields.get(prop),
+  deleteField: (prop: string) => fields.delete(prop),
+  post: (options: any) => {
+    if (requestFuc) {
+      return requestFuc({
+        ...options,
+        method: 'POST',
+      });
+    }
+  },
+});
+
+watchEffect(async () => {
+  formState.initValues = props.initValues;
+  formState.lastValues = props.lastValues;
+  formState.isCompare = props.isCompare;
+  formState.config = props.config;
+  formState.keyProp = props.keyProp;
+  formState.popperClass = props.popperClass;
+  formState.parentValues = props.parentValues;
+
+  if (typeof props.extendState === 'function') {
+    const state = (await props.extendState(formState)) || {};
+    Object.entries(state).forEach(([key, value]) => {
+      formState[key] = value;
+    });
+  }
+});
+
+provide('mForm', formState);
+
+watch(
+  [() => props.config, () => props.initValues],
+  ([config], [preConfig]) => {
+    if (!isEqual(toRaw(config), toRaw(preConfig))) {
+      initialized.value = false;
+    }
+
+    initValue(formState, {
+      initValues: props.initValues,
+      config: props.config,
+    }).then((value) => {
+      values.value = value;
+      // 非对比模式，初始化完成
+      initialized.value = !props.isCompare;
+    });
+
+    if (props.isCompare) {
+      // 对比模式下初始化待对比的表单值
+      initValue(formState, {
+        initValues: props.lastValues,
+        config: props.config,
+      }).then((value) => {
+        lastValuesProcessed.value = value;
+        initialized.value = true;
+      });
+    }
+  },
+  { immediate: true },
+);
+
+const changeHandler = () => {
+  emit('change', values.value);
+};
+
+defineExpose({
+  values,
+  lastValuesProcessed,
+  formState,
+  initialized,
+
+  changeHandler,
+
+  resetForm: () => tMagicForm.value?.resetFields(),
+
+  submitForm: async (native?: boolean): Promise<any> => {
+    try {
+      await tMagicForm.value?.validate();
+      return native ? values.value : cloneDeep(toRaw(values.value));
+    } catch (invalidFields: any) {
+      emit('error', invalidFields);
+
+      const error: string[] = [];
+
+      Object.entries(invalidFields).forEach(([, ValidateError]) => {
+        (ValidateError as ValidateError[]).forEach(({ field, message }) => {
+          if (field && message) error.push(`${field} -> ${message}`);
+          if (field && !message) error.push(`${field} -> 出现错误`);
+          if (!field && message) error.push(`${message}`);
+        });
+      });
+
+      throw new Error(error.join('<br>'));
+    }
+  },
+});
+</script>

package/src/FormBox.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="m-form-box" :style="style">
+    <div class="m-box-body" :style="bodyHeight ? { height: `${bodyHeight}px` } : {}">
+      <TMagicScrollbar>
+        <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>
+      </TMagicScrollbar>
+    </div>
+
+    <div class="dialog-footer" :style="`height: ${footerHeight}px`">
+      <div>
+        <slot name="left"></slot>
+      </div>
+      <div>
+        <slot name="footer">
+          <TMagicButton type="primary" :size="size" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+            confirmText
+          }}</TMagicButton>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+
+import Form from './Form.vue';
+import type { FormConfig } from './schema';
+
+defineOptions({
+  name: 'MFormBox',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config?: FormConfig;
+    values?: Object;
+    parentValues?: Object;
+    width?: number;
+    height?: 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 footerHeight = 60;
+
+const style = computed(() => {
+  const style: { width?: string; height?: string } = {};
+  if (typeof props.width === 'number') {
+    style.width = `${props.width}px`;
+  }
+  if (typeof props.height === 'number') {
+    style.height = `${props.height}px`;
+  }
+  return style;
+});
+
+const form = ref<InstanceType<typeof Form>>();
+const saveFetch = ref(false);
+
+const bodyHeight = ref(0);
+
+watchEffect(() => {
+  if (!props.height) {
+    return;
+  }
+  bodyHeight.value = props.height - footerHeight;
+});
+
+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,
+
+  show,
+  hide,
+});
+</script>

package/src/FormDialog.vue

@@ -0,0 +1,173 @@
+<template>
+  <TMagicDialog
+    v-model="dialogVisible"
+    class="m-form-dialog"
+    top="20px"
+    append-to-body
+    :title="title"
+    :width="width"
+    :zIndex="zIndex"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="false"
+    @close="closeHandler"
+  >
+    <div
+      v-if="dialogVisible"
+      class="m-dialog-body"
+      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
+    >
+      <Form
+        v-model="stepActive"
+        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>
+
+    <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="cancel" size="small">取 消</TMagicButton>
+            <TMagicButton v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep"
+              >上一步</TMagicButton
+            >
+            <TMagicButton v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+              >下一步</TMagicButton
+            >
+            <TMagicButton v-else type="primary" size="small" :disabled="disabled" :loading="saveFetch" @click="save">{{
+              confirmText
+            }}</TMagicButton>
+          </slot>
+        </TMagicCol>
+      </TMagicRow>
+    </template>
+  </TMagicDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
+
+import Form from './Form.vue';
+import { FormConfig, StepConfig } from './schema';
+
+defineOptions({
+  name: 'MFormDialog',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config?: FormConfig;
+    values?: Object;
+    parentValues?: Object;
+    width?: string | number;
+    labelWidth?: string;
+    fullscreen?: boolean;
+    disabled?: boolean;
+    title?: string;
+    inline?: boolean;
+    labelPosition?: string;
+    zIndex?: number;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+  }>(),
+  {
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'submit', 'error', 'change']);
+
+const form = ref<InstanceType<typeof Form>>();
+const dialogVisible = ref(false);
+const saveFetch = ref(false);
+const stepActive = ref(1);
+const bodyHeight = ref(`${document.body.clientHeight - 194}px`);
+
+const stepCount = computed(() => {
+  const { length } = props.config;
+  for (let index = 0; index < length; index++) {
+    if (props.config[index].type === 'step') {
+      return (props.config[index] as StepConfig).items.length;
+    }
+  }
+  return 0;
+});
+
+const hasStep = computed(() => {
+  const { length } = props.config;
+  for (let index = 0; index < length; index++) {
+    if (props.config[index].type === 'step') {
+      return true;
+    }
+  }
+
+  return false;
+});
+
+const closeHandler = () => {
+  stepActive.value = 1;
+  emit('close');
+};
+
+const save = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (e) {
+    emit('error', e);
+  }
+};
+
+const preStep = () => {
+  stepActive.value -= 1;
+};
+
+const nextStep = () => {
+  stepActive.value += 1;
+};
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const show = () => {
+  dialogVisible.value = true;
+};
+
+const hide = () => {
+  dialogVisible.value = false;
+};
+
+const cancel = () => {
+  hide();
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  dialogVisible,
+
+  cancel,
+  save,
+  show,
+  hide,
+});
+</script>

package/src/FormDrawer.vue

@@ -0,0 +1,159 @@
+<template>
+  <TMagicDrawer
+    class="m-form-drawer"
+    ref="drawer"
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="closeOnPressEscape"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="width"
+    :zIndex="zIndex"
+    :before-close="beforeClose"
+    @open="openHandler"
+    @opened="openedHandler"
+    @close="closeHandler"
+    @closed="closedHandler"
+  >
+    <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"
+        :label-position="labelPosition"
+        :inline="inline"
+        @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="handleClose">关闭</TMagicButton>
+            <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+              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;
+    closeOnPressEscape?: boolean;
+    title?: string;
+    zIndex?: number;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+    inline?: boolean;
+    labelPosition?: string;
+    /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+  }>(),
+  {
+    closeOnPressEscape: true,
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'closed', 'submit', 'error', 'change', 'open', 'opened']);
+
+const drawer = ref<InstanceType<typeof TMagicDrawer>>();
+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 = () => {
+  emit('open');
+};
+
+const openedHandler = () => {
+  emit('opened');
+};
+
+const closeHandler = () => {
+  emit('close');
+};
+
+const closedHandler = () => {
+  emit('closed');
+};
+
+const show = () => {
+  visible.value = true;
+};
+
+const hide = () => {
+  visible.value = false;
+};
+
+/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
+const handleClose = () => {
+  drawer.value?.handleClose();
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  bodyHeight,
+
+  show,
+  hide,
+  handleClose,
+});
+</script>