@tmagic/form 1.4.6 → 1.4.8

package/src/containers/Container.vue

@@ -1,416 +0,0 @@
-<template>
-  <div
-    v-if="config"
-    :id="config.id"
-    :data-magic-id="config.id"
-    :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
-    :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
-  >
-    <m-fields-hidden
-      v-if="type === 'hidden'"
-      :model="model"
-      :config="config"
-      :name="config.name"
-      :disabled="disabled"
-      :prop="itemProp"
-    ></m-fields-hidden>
-
-    <component
-      v-else-if="items && !text && type && display"
-      :key="key(config)"
-      :size="size"
-      :is="tagName"
-      :model="model"
-      :last-values="lastValues"
-      :is-compare="isCompare"
-      :config="config"
-      :disabled="disabled"
-      :name="name"
-      :prop="itemProp"
-      :step-active="stepActive"
-      :expand-more="expand"
-      :label-width="itemLabelWidth"
-      @change="onChangeHandler"
-      @addDiffCount="onAddDiffCount"
-    ></component>
-
-    <template v-else-if="type && display && !showDiff">
-      <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :rules="rule"
-      >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="model"
-            :last-values="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-            @addDiffCount="onAddDiffCount"
-          ></component>
-          <template #content>
-            <div v-html="tooltip"></div>
-          </template>
-        </TMagicTooltip>
-
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="model"
-          :last-values="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-          @addDiffCount="onAddDiffCount"
-        ></component>
-
-        <div v-if="extra && type !== 'table'" v-html="extra" class="m-form-tip"></div>
-      </TMagicFormItem>
-
-      <TMagicTooltip v-if="config.tip" placement="left">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
-    </template>
-
-    <!-- 对比 -->
-    <template v-else-if="type && display && showDiff">
-      <!-- 上次内容 -->
-      <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :rules="rule"
-        style="background: #f7dadd"
-      >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="lastValues"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
-          <template #content>
-            <div v-html="tooltip"></div>
-          </template>
-        </TMagicTooltip>
-
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="lastValues"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
-
-        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
-      </TMagicFormItem>
-
-      <TMagicTooltip v-if="config.tip" placement="left">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
-      <!-- 当前内容 -->
-      <TMagicFormItem
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
-        :prop="itemProp"
-        :label-width="itemLabelWidth"
-        :rules="rule"
-        style="background: #def7da"
-      >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
-        <TMagicTooltip v-if="tooltip">
-          <component
-            :key="key(config)"
-            :size="size"
-            :is="tagName"
-            :model="model"
-            :config="config"
-            :name="name"
-            :disabled="disabled"
-            :prop="itemProp"
-            @change="onChangeHandler"
-          ></component>
-          <template #content>
-            <div v-html="tooltip"></div>
-          </template>
-        </TMagicTooltip>
-
-        <component
-          v-else
-          :key="key(config)"
-          :size="size"
-          :is="tagName"
-          :model="model"
-          :config="config"
-          :name="name"
-          :disabled="disabled"
-          :prop="itemProp"
-          @change="onChangeHandler"
-        ></component>
-
-        <div v-if="extra" v-html="extra" class="m-form-tip"></div>
-      </TMagicFormItem>
-
-      <TMagicTooltip v-if="config.tip" placement="left">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
-    </template>
-
-    <template v-else-if="items && display">
-      <template v-if="name || name === 0 ? model[name] : model">
-        <Container
-          v-for="item in items"
-          :key="key(item)"
-          :model="name || name === 0 ? model[name] : model"
-          :last-values="name || name === 0 ? lastValues[name] || {} : lastValues"
-          :is-compare="isCompare"
-          :config="item"
-          :size="size"
-          :disabled="disabled"
-          :step-active="stepActive"
-          :expand-more="expand"
-          :label-width="itemLabelWidth"
-          :prop="itemProp"
-          @change="onChangeHandler"
-          @addDiffCount="onAddDiffCount"
-        ></Container>
-      </template>
-    </template>
-
-    <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <TMagicButton type="primary" size="small" :disabled="false" link @click="expandHandler">{{
-        expand ? '收起配置' : '展开更多配置'
-      }}</TMagicButton>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
-import { WarningFilled } from '@element-plus/icons-vue';
-import { isEqual } from 'lodash-es';
-
-import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
-
-import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
-import { display as displayFunction, filterFunction, getRules } from '../utils/form';
-
-defineOptions({
-  name: 'MFormContainer',
-});
-
-const props = withDefaults(
-  defineProps<{
-    /** 表单值 */
-    model: FormValue;
-    /** 需对比的值（开启对比模式时传入） */
-    lastValues?: FormValue;
-    config: ChildConfig;
-    prop?: string;
-    disabled?: boolean;
-    labelWidth?: string;
-    expandMore?: boolean;
-    stepActive?: string | number;
-    size?: string;
-    /** 是否开启对比模式 */
-    isCompare?: boolean;
-  }>(),
-  {
-    prop: '',
-    size: 'small',
-    expandMore: false,
-    lastValues: () => ({}),
-    isCompare: false,
-  },
-);
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const expand = ref(false);
-
-const name = computed(() => props.config.name || '');
-// 是否展示两个版本的对比内容
-const showDiff = computed(() => {
-  if (!props.isCompare) return false;
-  const curValue = name.value ? props.model[name.value] : props.model;
-  const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
-  return !isEqual(curValue, lastValue);
-});
-
-const items = computed(() => (props.config as ContainerCommonConfig).items);
-
-const itemProp = computed(() => {
-  let n: string | number = '';
-  const { names } = props.config as any;
-  if (names?.[0]) {
-    [n] = names;
-  } else if (name.value) {
-    n = name.value;
-  } else {
-    return props.prop;
-  }
-  return `${props.prop}${props.prop ? '.' : ''}${n}`;
-});
-
-const tagName = computed(() => {
-  const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
-  if (typeof component !== 'string') return component;
-  return 'm-fields-text';
-});
-
-const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
-
-const text = computed(() => filterFunction(mForm, props.config.text, props));
-
-const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
-
-const extra = computed(() => filterFunction(mForm, props.config.extra, props));
-
-const rule = computed(() => getRules(mForm, props.config.rules, props));
-
-const type = computed((): string => {
-  let { type } = props.config;
-  if (typeof type === 'function') {
-    type = type(mForm, {
-      model: props.model,
-    });
-  }
-  if (type === 'form') return '';
-  if (type === 'container') return '';
-  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
-});
-
-const display = computed((): boolean => {
-  const value = displayFunction(mForm, props.config.display, props);
-
-  if (value === 'expand') {
-    return expand.value;
-  }
-  return value;
-});
-
-const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
-
-watchEffect(() => {
-  expand.value = props.expandMore;
-});
-
-// 监听是否展示对比内容，如果出现差异项则触发差异数计数事件
-watch(
-  showDiff,
-  (showDiff) => {
-    if (type.value === 'hidden') return;
-    if (items.value && !text.value && type.value && display.value) return;
-    if (display.value && showDiff && type.value) {
-      emit('addDiffCount');
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-const expandHandler = () => (expand.value = !expand.value);
-
-const key = (config: any) => config[mForm?.keyProps];
-
-const filterHandler = (filter: any, value: FormValue | number | string) => {
-  if (typeof filter === 'function') {
-    return filter(mForm, value, {
-      model: props.model,
-      values: mForm?.initValues,
-      formValue: mForm?.values,
-      prop: itemProp.value,
-      config: props.config,
-    });
-  }
-
-  if (filter === 'number') {
-    return +value;
-  }
-
-  return value;
-};
-
-const changeHandler = (onChange: any, value: FormValue | number | string) => {
-  if (typeof onChange === 'function') {
-    return onChange(mForm, value, {
-      model: props.model,
-      values: mForm?.initValues,
-      formValue: mForm?.values,
-      prop: itemProp.value,
-      config: props.config,
-    });
-  }
-};
-
-const trimHandler = (trim: any, value: FormValue | number | string) => {
-  if (typeof value === 'string' && trim) {
-    return value.replace(/^\s*/, '').replace(/\s*$/, '');
-  }
-};
-
-// 继续抛出给更高层级的组件
-const onAddDiffCount = () => emit('addDiffCount');
-
-const onChangeHandler = async function (v: FormValue, key?: string) {
-  const { filter, onChange, trim, name, dynamicKey } = props.config as any;
-  let value: FormValue | number | string = v;
-
-  try {
-    value = filterHandler(filter, v);
-    value = (await changeHandler(onChange, value)) ?? value;
-    value = trimHandler(trim, value) ?? value;
-  } catch (e) {
-    console.error(e);
-  }
-
-  // field内容下包含field-link时，model===value, 这里避免循环引用
-  if ((name || name === 0) && props.model !== value && (v !== value || props.model[name] !== value)) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.model[name] = value;
-  }
-  // 动态表单类型，根据value和key参数，直接修改model
-  if (key !== undefined && dynamicKey) {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.model[key] = value;
-  }
-  emit('change', props.model);
-};
-</script>

package/src/containers/Fieldset.vue

@@ -1,124 +0,0 @@
-<template>
-  <fieldset
-    v-if="name ? model[name] : model"
-    class="m-fieldset"
-    :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
-  >
-    <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
-      <TMagicCheckbox
-        v-model="model[name].value"
-        :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-        :true-value="1"
-        :false-value="0"
-        @update:modelValue="change"
-        ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
-      ></TMagicCheckbox>
-    </component>
-    <legend v-else>
-      <span v-html="config.legend"></span>
-      <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
-    </legend>
-
-    <div v-if="config.schematic && show" style="display: flex">
-      <div style="flex: 1">
-        <Container
-          v-for="(item, index) in config.items"
-          :key="key(item, index)"
-          :model="name ? model[name] : model"
-          :lastValues="name ? lastValues[name] : lastValues"
-          :is-compare="isCompare"
-          :rules="name ? rules[name] : []"
-          :config="item"
-          :prop="prop"
-          :disabled="disabled"
-          :labelWidth="lWidth"
-          :size="size"
-          @change="change"
-          @add-diff-count="onAddDiffCount()"
-        ></Container>
-      </div>
-
-      <img class="m-form-schematic" :src="config.schematic" />
-    </div>
-
-    <template v-else-if="show">
-      <Container
-        v-for="(item, index) in config.items"
-        :key="key(item, index)"
-        :model="name ? model[name] : model"
-        :lastValues="name ? lastValues[name] : lastValues"
-        :is-compare="isCompare"
-        :rules="name ? rules[name] : []"
-        :config="item"
-        :prop="prop"
-        :labelWidth="lWidth"
-        :size="size"
-        :disabled="disabled"
-        @change="change"
-        @addDiffCount="onAddDiffCount()"
-      ></Container>
-    </template>
-  </fieldset>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-
-import { TMagicCheckbox } from '@tmagic/design';
-
-import { FieldsetConfig, FormState } from '../schema';
-
-import Container from './Container.vue';
-
-defineOptions({
-  name: 'MFormFieldset',
-});
-
-const props = withDefaults(
-  defineProps<{
-    labelWidth?: string;
-    prop: string;
-    size?: string;
-    model: Record<string, any>;
-    lastValues?: Record<string, any>;
-    isCompare?: boolean;
-    config: FieldsetConfig;
-    rules?: any;
-    disabled?: boolean;
-  }>(),
-  {
-    rules: {},
-    prop: '',
-    lastValues: () => ({}),
-    isCompare: false,
-  },
-);
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const name = computed(() => props.config.name || '');
-
-const show = computed(() => {
-  if (props.config.expand && name.value) {
-    return props.model[name.value]?.value;
-  }
-  return true;
-});
-
-const lWidth = computed(() => {
-  if (props.config.items) {
-    return props.config.labelWidth || props.labelWidth;
-  }
-  return props.config.labelWidth || props.labelWidth || (props.config.text ? undefined : '0');
-});
-
-const change = () => {
-  emit('change', props.model);
-};
-
-const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
-
-const onAddDiffCount = () => emit('addDiffCount');
-</script>

package/src/containers/GroupList.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="m-fields-group-list">
-    <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
-    <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
-      <span class="el-table__empty-text">暂无数据</span>
-    </div>
-
-    <MFieldsGroupListItem
-      v-else
-      v-for="(item, index) in model[name]"
-      :key="index"
-      :model="item"
-      :lastValues="getLastValues(lastValues[name], index)"
-      :is-compare="isCompare"
-      :config="config"
-      :prop="prop"
-      :index="index"
-      :label-width="labelWidth"
-      :size="size"
-      :disabled="disabled"
-      :group-model="model[name]"
-      @remove-item="removeHandler"
-      @swap-item="swapHandler"
-      @change="changeHandler"
-      @addDiffCount="onAddDiffCount()"
-    ></MFieldsGroupListItem>
-
-    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">新增</TMagicButton>
-
-    <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { Grid } from '@element-plus/icons-vue';
-
-import { TMagicButton } from '@tmagic/design';
-
-import { FormState, GroupListConfig } from '../schema';
-import { initValue } from '../utils/form';
-
-import MFieldsGroupListItem from './GroupListItem.vue';
-
-defineOptions({
-  name: 'MFormGroupList',
-});
-
-const props = defineProps<{
-  model: any;
-  lastValues?: any;
-  isCompare?: boolean;
-  config: GroupListConfig;
-  name: string;
-  labelWidth?: string;
-  prop?: string;
-  size?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits(['change', 'addDiffCount']);
-
-const mForm = inject<FormState | undefined>('mForm');
-
-const addable = computed(() => {
-  if (!props.name) return false;
-
-  if (typeof props.config.addable === 'function') {
-    return props.config.addable(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  }
-
-  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
-});
-
-const changeHandler = () => {
-  if (!props.name) return false;
-
-  emit('change', props.model[props.name]);
-};
-
-const addHandler = async () => {
-  if (!props.name) return false;
-
-  let initValues = {};
-
-  if (typeof props.config.defaultAdd === 'function') {
-    initValues = await props.config.defaultAdd(mForm, {
-      model: props.model[props.name],
-      formValue: mForm?.values,
-      prop: props.prop,
-      config: props.config,
-    });
-  } else if (props.config.defaultAdd) {
-    initValues = props.config.defaultAdd;
-  }
-
-  const groupValue = await initValue(mForm, {
-    config: props.config.items,
-    initValues,
-  });
-
-  props.model[props.name].push(groupValue);
-};
-
-const removeHandler = (index: number) => {
-  if (!props.name) return false;
-
-  props.model[props.name].splice(index, 1);
-  changeHandler();
-};
-
-const swapHandler = (idx1: number, idx2: number) => {
-  if (!props.name) return false;
-
-  const [currRow] = props.model[props.name].splice(idx1, 1);
-  props.model[props.name].splice(idx2, 0, currRow);
-  changeHandler();
-};
-
-const toggleMode = () => {
-  props.config.type = 'table';
-  props.config.groupItems = props.config.items;
-  props.config.items = (props.config.tableItems ||
-    props.config.items.map((item: any) => ({
-      ...item,
-      label: item.label || item.text,
-      text: null,
-    }))) as any;
-};
-
-const onAddDiffCount = () => emit('addDiffCount');
-
-const getLastValues = (item: any, index: number) => item?.[index] || {};
-</script>