@tmagic/form 1.1.6 → 1.2.0-beta.10

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" name="MFormGroupList">
+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>

package/src/containers/GroupListItem.vue

@@ -1,33 +1,33 @@
 <template>
   <div class="m-fields-group-list-item">
     <div>
-      <el-icon style="margin-right: 7px" @click="expandHandler"
+      <TMagicIcon style="margin-right: 7px" @click="expandHandler"
         ><CaretBottom v-if="expand" /><CaretRight v-else
-      /></el-icon>
+      /></TMagicIcon>
 
-      <el-button text @click="expandHandler">{{ title }}</el-button>
+      <TMagicButton text @click="expandHandler">{{ title }}</TMagicButton>
 
-      <el-button
+      <TMagicButton
         v-show="showDelete(parseInt(String(index)))"
         text
         :icon="Delete"
         style="color: #f56c6c"
         @click="removeHandler"
-      ></el-button>
+      ></TMagicButton>
 
       <template v-if="movable()">
-        <el-button v-show="index !== 0" text size="small" @click="changeOrder(-1)"
-          >上移<el-icon><CaretTop /></el-icon
-        ></el-button>
-        <el-button v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
-          >下移<el-icon><CaretBottom /></el-icon
-        ></el-button>
+        <TMagicButton v-show="index !== 0" text size="small" @click="changeOrder(-1)"
+          >上移<TMagicIcon><CaretTop /></TMagicIcon
+        ></TMagicButton>
+        <TMagicButton v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
+          >下移<TMagicIcon><CaretBottom /></TMagicIcon
+        ></TMagicButton>
       </template>
 
       <span v-if="itemExtra" v-html="itemExtra" class="m-form-tip"></span>
     </div>
 
-    <m-form-container
+    <Container
       v-if="expand"
       :config="rowConfig"
       :model="model"
@@ -35,125 +35,88 @@
       :prop="`${prop}${prop ? '.' : ''}${String(index)}`"
       :size="size"
       @change="changeHandler"
-    ></m-form-container>
+    ></Container>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+<script setup lang="ts" name="MFormGroupListItem">
+import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
+import { TMagicButton, TMagicIcon } from '@tmagic/design';
+
 import { FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
-export default defineComponent({
-  name: 'm-form-group-list-item',
-
-  components: { CaretBottom, CaretRight, CaretTop },
-
-  props: {
-    labelWidth: String,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<GroupListConfig>,
-      default: () => ({}),
-    },
-
-    prop: String,
-
-    size: String,
-
-    index: {
-      type: [Number, String, Symbol],
-      default: 0,
-    },
-
-    groupModel: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  emits: ['swap-item', 'remove-item', 'change'],
-
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
-    const expand = ref(false);
-
-    watchEffect(() => {
-      expand.value = !props.index;
-    });
-
-    const rowConfig = computed(() => ({
-      type: 'row',
-      span: props.config.span || 24,
-      items: props.config.items,
-      labelWidth: props.config.labelWidth,
-      [mForm?.keyProp || '__key']: `${props.config[mForm?.keyProp || '__key']}${String(props.index)}`,
-    }));
-
-    const title = computed(() => {
-      if (props.config.titleKey && props.model[props.config.titleKey]) {
-        return props.model[props.config.titleKey];
-      }
-
-      return `组 ${String(props.index)}`;
-    });
-
-    const length = computed(() => props.groupModel?.length || 0);
-
-    const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, props));
-
-    const removeHandler = () => emit('remove-item', props.index);
-
-    const changeHandler = () => emit('change');
-
-    const expandHandler = () => {
-      expand.value = !expand.value;
-    };
-
-    // 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
-    const showDelete = (index: number) => {
-      const deleteFunc = props.config.delete;
-      if (deleteFunc && typeof deleteFunc === 'function') {
-        return deleteFunc(props.model, index, mForm?.values);
-      }
-      return true;
-    };
-
-    // 调换顺序
-    const changeOrder = (offset = 0) => emit('swap-item', props.index, `${String(props.index)}${offset}`);
-
-    const movable = () => {
-      const { movable } = props.config;
-
-      // 没有设置时，默认可移动
-      if (movable === undefined) return true;
-      if (typeof movable === 'function') {
-        return movable(mForm, props.index || 0, props.model, props.groupModel);
-      }
-      return movable;
-    };
-
-    return {
-      expand,
-      expandHandler,
-      title,
-      showDelete,
-      removeHandler,
-      movable,
-      changeOrder,
-      itemExtra,
-      rowConfig,
-      changeHandler,
-      length,
-      Delete,
-    };
-  },
+import Container from './Container.vue';
+
+const props = defineProps<{
+  model: any;
+  groupModel: any[];
+  config: GroupListConfig;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  index: number;
+}>();
+
+const emit = defineEmits(['swap-item', 'remove-item', 'change']);
+
+const mForm = inject<FormState | undefined>('mForm');
+const expand = ref(false);
+
+watchEffect(() => {
+  expand.value = !props.index;
+});
+
+const rowConfig = computed(() => ({
+  type: 'row',
+  span: props.config.span || 24,
+  items: props.config.items,
+  labelWidth: props.config.labelWidth,
+  [mForm?.keyProp || '__key']: `${props.config[mForm?.keyProp || '__key']}${String(props.index)}`,
+}));
+
+const title = computed(() => {
+  if (props.config.titleKey && props.model[props.config.titleKey]) {
+    return props.model[props.config.titleKey];
+  }
+
+  return `组 ${String(props.index)}`;
 });
+
+const length = computed(() => props.groupModel?.length || 0);
+
+const itemExtra = computed(() => filterFunction(mForm, props.config.itemExtra, props));
+
+const removeHandler = () => emit('remove-item', props.index);
+
+const changeHandler = () => emit('change');
+
+const expandHandler = () => {
+  expand.value = !expand.value;
+};
+
+// 希望支持单行可控制是否显示删除按钮，不会影响现有逻辑
+const showDelete = (index: number) => {
+  const deleteFunc = props.config.delete;
+  if (deleteFunc && typeof deleteFunc === 'function') {
+    return deleteFunc(props.model, index, mForm?.values);
+  }
+  return true;
+};
+
+// 调换顺序
+const changeOrder = (offset = 0) => emit('swap-item', props.index, `${String(props.index)}${offset}`);
+
+const movable = () => {
+  const { movable } = props.config;
+
+  // 没有设置时，默认可移动
+  if (movable === undefined) return true;
+  if (typeof movable === 'function') {
+    return movable(mForm, props.index || 0, props.model, props.groupModel);
+  }
+  return movable;
+};
 </script>

package/src/containers/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card
+  <TMagicCard
     v-if="items && items.length"
     class="box-card m-form-panel"
     :body-style="{ display: expand ? 'block' : 'none' }"
@@ -7,7 +7,7 @@
     <template #header>
       <div class="clearfix">
         <a href="javascript:" style="width: 100%; display: block" @click="expand = !expand">
-          <el-icon><caret-bottom v-if="expand" /><caret-right v-else /></el-icon> {{ filter(config.title) }}
+          <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon> {{ filter(config.title) }}
           <span v-if="config && config.extra" v-html="config.extra" class="m-form-tip"></span>
         </a>
       </div>
@@ -18,7 +18,7 @@
 
       <div v-if="config.schematic" style="display: flex">
         <div style="flex: 1">
-          <m-form-container
+          <Container
             v-for="(item, index) in items"
             :key="item[mForm?.keyProp || '__key'] ?? index"
             :config="item"
@@ -27,14 +27,14 @@
             :size="size"
             :label-width="config.labelWidth || labelWidth"
             @change="changeHandler"
-          ></m-form-container>
+          ></Container>
         </div>
 
         <img class="m-form-schematic" :src="config.schematic" />
       </div>
 
       <template v-else>
-        <m-form-container
+        <Container
           v-for="(item, index) in items"
           :key="item[mForm?.keyProp || '__key'] ?? index"
           :config="item"
@@ -43,64 +43,41 @@
           :size="size"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
-        ></m-form-container>
+        ></Container>
       </template>
     </div>
-  </el-card>
+  </TMagicCard>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
+<script setup lang="ts" name="MFormPanel">
+import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
+import { TMagicCard, TMagicIcon } from '@tmagic/design';
+
 import { FormState, PanelConfig } from '../schema';
 import { filterFunction } from '../utils/form';
 
-export default defineComponent({
-  name: 'm-form-panel',
-
-  components: { CaretBottom, CaretRight },
-
-  props: {
-    labelWidth: String,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<PanelConfig>,
-      default: () => ({}),
-    },
-
-    prop: String,
-
-    size: String,
-
-    name: String,
-  },
+import Container from './Container.vue';
 
-  emits: ['change'],
+const props = defineProps<{
+  model: any;
+  config: PanelConfig;
+  name: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+}>();
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const emit = defineEmits(['change']);
 
-    const expand = ref(props.config.expand !== false);
+const mForm = inject<FormState | undefined>('mForm');
 
-    const items = computed(() => props.config.items);
+const expand = ref(props.config.expand !== false);
 
-    const filter = (config: any) => filterFunction(mForm, config, props);
+const items = computed(() => props.config.items);
 
-    const changeHandler = () => emit('change', props.model);
+const filter = (config: any) => filterFunction(mForm, config, props);
 
-    return {
-      mForm,
-      expand,
-      items,
-      filter,
-      changeHandler,
-    };
-  },
-});
+const changeHandler = () => emit('change', props.model);
 </script>

package/src/containers/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row :gutter="10">
+  <TMagicRow :gutter="10">
     <Col
       v-for="(col, index) in config.items"
       :key="col[mForm?.keyProp || '__key'] ?? index"
@@ -12,53 +12,31 @@
       :size="size"
       @change="changeHandler"
     />
-  </el-row>
+  </TMagicRow>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+<script setup lang="ts" name="MFormRow">
+import { inject } from 'vue';
+
+import { TMagicRow } from '@tmagic/design';
 
 import { FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
-export default defineComponent({
-  name: 'm-form-row',
-
-  components: { Col },
-
-  props: {
-    labelWidth: String,
-    expandMore: Boolean,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<RowConfig>,
-      default: () => ({}),
-    },
-
-    prop: String,
-
-    name: String,
-
-    size: String,
-  },
-
-  emits: ['change'],
+const props = defineProps<{
+  model: any;
+  config: RowConfig;
+  name: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  expandMore?: boolean;
+}>();
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const emit = defineEmits(['change']);
 
-    const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
+const mForm = inject<FormState | undefined>('mForm');
 
-    return {
-      mForm,
-      changeHandler,
-    };
-  },
-});
+const changeHandler = () => emit('change', props.name ? props.model[props.name] : props.model);
 </script>