@tmagic/form 1.4.6 → 1.4.8

package/src/Form.vue

@@ -1,201 +0,0 @@
-<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

@@ -1,120 +0,0 @@
-<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

@@ -1,173 +0,0 @@
-<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

@@ -1,159 +0,0 @@
-<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>

package/src/containers/Col.vue

@@ -1,52 +0,0 @@
-<template>
-  <TMagicCol v-show="display && config.type !== 'hidden'" :span="span">
-    <Container
-      :model="model"
-      :lastValues="lastValues"
-      :is-compare="isCompare"
-      :config="config"
-      :prop="prop"
-      :label-width="config.labelWidth || labelWidth"
-      :expand-more="expandMore"
-      :size="size"
-      :disabled="disabled"
-      @change="changeHandler"
-      @add-diff-count="onAddDiffCount"
-    ></Container>
-  </TMagicCol>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import { TMagicCol } from '@tmagic/design';
-
-import { ChildConfig, FormState } from '../schema';
-import { display as displayFunction } from '../utils/form';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormCol',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues?: any;
-  isCompare?: boolean;
-  config: ChildConfig;
-  labelWidth?: string;
-  expandMore?: boolean;
-  span?: number;
-  size?: string;
-  prop?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-const display = computed(() => displayFunction(mForm, props.config.display, props));
-const changeHandler = () => emit('change', props.model);
-const onAddDiffCount = () => emit('addDiffCount');
-</script>