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

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">
+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">
+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">
+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>

package/src/containers/Step.vue

@@ -1,82 +1,70 @@
 <template>
   <div>
-    <el-steps :active="active" align-center :space="config.space">
-      <el-step
+    <TMagicSteps :active="active" align-center :space="config.space">
+      <TMagicStep
         v-for="(item, index) in config.items"
         :key="item.__key"
         :title="item.title"
         :active="active"
         @click="stepClick(index)"
-      ></el-step>
-    </el-steps>
+      ></TMagicStep>
+    </TMagicSteps>
 
     <template v-for="(step, index) in config.items">
       <template v-for="item in step.items">
-        <m-form-container
+        <Container
           v-if="item"
           v-show="active - 1 === index"
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
           :model="step.name ? model[step.name] : model"
-          :prop="step.name"
+          :prop="`${step.name}`"
           :size="size"
           :label-width="config.labelWidth || labelWidth"
           @change="changeHandler"
-        ></m-form-container>
+        ></Container>
       </template>
     </template>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType, ref, watchEffect } from 'vue';
+<script setup lang="ts">
+import { inject, ref, watchEffect } from 'vue';
 
-import { FormState, StepConfig } from '../schema';
-
-export default defineComponent({
-  name: 'm-form-step',
-
-  props: {
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
+import { TMagicStep, TMagicSteps } from '@tmagic/design';
 
-    config: {
-      type: Object as PropType<StepConfig>,
-      default: () => ({}),
-    },
-
-    stepActive: {
-      type: Number,
-      default: () => 1,
-    },
+import { FormState, StepConfig } from '../schema';
 
-    size: String,
+import Container from './Container.vue';
 
-    labelWidth: String,
+const props = withDefaults(
+  defineProps<{
+    model: any;
+    config: StepConfig;
+    stepActive?: number;
+    labelWidth?: string;
+    size?: string;
+  }>(),
+  {
+    stepActive: 1,
   },
+);
 
-  emits: ['change'],
+const emit = defineEmits(['change']);
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
-    const active = ref(1);
+const mForm = inject<FormState | undefined>('mForm');
+const active = ref(1);
 
-    watchEffect(() => {
-      active.value = props.stepActive;
-    });
-
-    const stepClick = (index: number) => {
-      active.value = index + 1;
-      mForm?.$emit('update:stepActive', active.value);
-    };
+watchEffect(() => {
+  active.value = props.stepActive;
+});
 
-    const changeHandler = () => {
-      emit('change', props.model);
-    };
+const stepClick = (index: number) => {
+  active.value = index + 1;
+  mForm?.$emit('update:stepActive', active.value);
+};
 
-    return { mForm, active, stepClick, changeHandler };
-  },
-});
+const changeHandler = () => {
+  emit('change', props.model);
+};
 </script>