@tmagic/form 1.2.0-beta.2 → 1.2.0-beta.3

package/src/containers/Container.vue

@@ -30,7 +30,7 @@
     ></component>
 
     <template v-else-if="type && display">
-      <el-form-item
+      <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
         :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
         :prop="itemProp"
@@ -38,7 +38,7 @@
         :rules="rule"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
-        <el-tooltip v-if="tooltip">
+        <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
             :size="size"
@@ -53,7 +53,7 @@
           <template #content>
             <div v-html="tooltip"></div>
           </template>
-        </el-tooltip>
+        </TMagicTooltip>
 
         <component
           v-else
@@ -69,19 +69,19 @@
         ></component>
 
         <div v-if="extra" v-html="extra" class="m-form-tip"></div>
-      </el-form-item>
+      </TMagicFormItem>
 
-      <el-tooltip v-if="config.tip" placement="left">
-        <el-icon style="line-height: 40px; margin-left: 5px"><warning-filled /></el-icon>
+      <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>
-      </el-tooltip>
+      </TMagicTooltip>
     </template>
 
     <template v-else-if="items && display">
       <template v-if="name || name === 0 ? model[name] : model">
-        <m-form-container
+        <Container
           v-for="item in items"
           :key="key(item)"
           :model="name || name === 0 ? model[name] : model"
@@ -92,202 +92,166 @@
           :label-width="itemLabelWidth"
           :prop="itemProp"
           @change="onChangeHandler"
-        ></m-form-container>
+        ></Container>
       </template>
     </template>
 
     <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <el-button text @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
+      <TMagicButton text @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</TMagicButton>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref, resolveComponent, watchEffect } from 'vue';
+<script setup lang="ts">
+import { computed, inject, ref, resolveComponent, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 
+import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
+
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
-export default defineComponent({
-  name: 'm-form-container',
-
-  components: { WarningFilled },
-
-  props: {
-    labelWidth: String,
-    expandMore: Boolean,
+const props = withDefaults(
+  defineProps<{
+    model: FormValue;
+    config: ChildConfig;
+    prop?: string;
+    labelWidth?: string;
+    expandMore?: boolean;
+    stepActive?: string | number;
+    size?: string;
+  }>(),
+  {
+    prop: '',
+    size: 'small',
+    expandMore: false,
+  },
+);
 
-    model: {
-      type: [Object, Array] as PropType<FormValue>,
-      required: true,
-    },
+const emit = defineEmits(['change']);
 
-    config: {
-      type: Object as PropType<ChildConfig>,
-      required: true,
-    },
+const mForm = inject<FormState | undefined>('mForm');
 
-    prop: {
-      type: String,
-      default: () => '',
-    },
+const expand = ref(false);
 
-    stepActive: {
-      type: [String, Number],
-    },
+const name = computed(() => props.config.name || '');
 
-    size: {
-      type: String,
-      default: 'small',
-    },
-  },
+const items = computed(() => (props.config as ContainerCommonConfig).items);
 
-  emits: ['change'],
+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}`;
+});
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const tagName = computed(() => {
+  const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
+  if (typeof component !== 'string') return component;
+  return 'm-fields-text';
+});
 
-    const expand = ref(false);
+const disabled = computed(() => filterFunction(mForm, props.config.disabled, props));
 
-    const name = computed(() => props.config.name || '');
+const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
 
-    const items = computed(() => (props.config as ContainerCommonConfig).items);
+const extra = computed(() => filterFunction(mForm, props.config.extra, props));
 
-    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 rule = computed(() => getRules(mForm, props.config.rules, props));
 
-    const tagName = computed(() => {
-      const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
-      if (typeof component !== 'string') return component;
-      return 'm-fields-text';
+const type = computed((): string => {
+  let { type } = props.config;
+  if (typeof type === 'function') {
+    type = type(mForm, {
+      model: props.model,
     });
+  }
+  if (type === 'form') return '';
+  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
+});
 
-    const disabled = computed(() => filterFunction(mForm, props.config.disabled, props));
+const display = computed((): boolean => {
+  if (props.config.display === 'expand') {
+    return expand.value;
+  }
 
-    const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
+  return displayFunction(mForm, props.config.display, props);
+});
 
-    const extra = computed(() => filterFunction(mForm, props.config.extra, props));
+const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
 
-    const rule = computed(() => getRules(mForm, props.config.rules, props));
+watchEffect(() => {
+  expand.value = props.expandMore;
+});
 
-    const type = computed((): string => {
-      let { type } = props.config;
-      if (typeof type === 'function') {
-        type = type(mForm, {
-          model: props.model,
-        });
-      }
-      if (type === 'form') return '';
-      return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
-    });
+const expandHandler = () => (expand.value = !expand.value);
 
-    const display = computed((): boolean => {
-      if (props.config.display === 'expand') {
-        return expand.value;
-      }
+const key = (config: any) => config[mForm?.keyProps];
 
-      return displayFunction(mForm, props.config.display, props);
+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,
     });
-
-    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
-
-    watchEffect(() => {
-      expand.value = props.expandMore;
+  }
+
+  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 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 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);
-    };
-
-    return {
-      expand,
-      name,
-      type,
-      disabled,
-      itemProp,
-      items,
-      display,
-      itemLabelWidth,
-      tagName,
-      rule,
-      tooltip,
-      extra,
-      key,
-      onChangeHandler,
-      expandHandler,
-    };
-  },
-});
+  }
+};
+
+const trimHandler = (trim: any, value: FormValue | number | string) => {
+  if (typeof value === 'string' && trim) {
+    return value.replace(/^\s*/, '').replace(/\s*$/, '');
+  }
+};
+
+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

@@ -5,13 +5,13 @@
     :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
   >
     <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
-      <el-checkbox
+      <TMagicCheckbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-label="1"
         :false-label="0"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
-      ></el-checkbox>
+      ></TMagicCheckbox>
     </component>
     <legend v-else>
       <span v-html="config.legend"></span>
@@ -20,7 +20,7 @@
 
     <div v-if="config.schematic && show" style="display: flex">
       <div style="flex: 1">
-        <m-form-container
+        <Container
           v-for="(item, index) in config.items"
           :key="key(item, index)"
           :model="name ? model[name] : model"
@@ -30,14 +30,14 @@
           :labelWidth="lWidth"
           :size="size"
           @change="change"
-        ></m-form-container>
+        ></Container>
       </div>
 
       <img class="m-form-schematic" :src="config.schematic" />
     </div>
 
     <template v-else-if="show">
-      <m-form-container
+      <Container
         v-for="(item, index) in config.items"
         :key="key(item, index)"
         :model="name ? model[name] : model"
@@ -47,7 +47,7 @@
         :labelWidth="lWidth"
         :size="size"
         @change="change"
-      ></m-form-container>
+      ></Container>
     </template>
   </fieldset>
 </template>
@@ -55,8 +55,12 @@
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue';
 
+import { TMagicCheckbox } from '@tmagic/design';
+
 import { FieldsetConfig, FormState } from '../schema';
 
+import Container from './Container.vue';
+
 const props = withDefaults(
   defineProps<{
     labelWidth?: string;
@@ -89,7 +93,7 @@ const lWidth = computed(() => {
   if (props.config.items) {
     return props.config.labelWidth || props.labelWidth;
   }
-  return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
+  return props.config.labelWidth || props.labelWidth || (props.config.text ? undefined : '0');
 });
 
 const change = () => {

package/src/containers/GroupList.vue

@@ -5,7 +5,7 @@
       <span class="el-table__empty-text">暂无数据</span>
     </div>
 
-    <m-fields-group-list-item
+    <MFieldsGroupListItem
       v-else
       v-for="(item, index) in model[name]"
       :key="index"
@@ -19,138 +19,106 @@
       @remove-item="removeHandler"
       @swap-item="swapHandler"
       @change="changeHandler"
-    ></m-fields-group-list-item>
+    ></MFieldsGroupListItem>
 
-    <el-button @click="addHandler" size="small" v-if="addable">添加组</el-button>
+    <TMagicButton @click="addHandler" size="small" v-if="addable">添加组</TMagicButton>
 
-    <el-button :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</el-button>
+    <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<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';
 
-export default defineComponent({
-  name: 'm-form-group-list',
-
-  components: { MFieldsGroupListItem },
+const props = defineProps<{
+  model: any;
+  config: GroupListConfig;
+  name: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+}>();
 
-  props: {
-    labelWidth: String,
+const emit = defineEmits(['change']);
 
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
+const mForm = inject<FormState | undefined>('mForm');
 
-    config: {
-      type: Object as PropType<GroupListConfig>,
-      default: () => ({}),
-    },
+const addable = computed(() => {
+  if (!props.name) return false;
 
-    prop: {
-      type: String,
-      default: '',
-    },
-
-    size: String,
+  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,
+    });
+  }
 
-    name: {
-      type: String,
-      default: '',
-    },
-  },
+  return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+});
 
-  emits: ['change'],
+const changeHandler = () => {
+  if (!props.name) return false;
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+  emit('change', props.model[props.name]);
+};
 
-    const addable = computed(() => {
-      if (!props.name) return false;
+const addHandler = async () => {
+  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,
-        });
-      }
+  let initValues = {};
 
-      return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+  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,
     });
-
-    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;
-    };
-    return {
-      Grid,
-      addable,
-      toggleMode,
-      removeHandler,
-      swapHandler,
-      changeHandler,
-      addHandler,
-    };
-  },
-});
+  } 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;
+};
 </script>