@tmagic/form 1.1.6 → 1.2.0-beta.10

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