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

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"
@@ -10,55 +10,35 @@
       :model="name ? model[name] : model"
       :prop="prop"
       :size="size"
+      :disabled="disabled"
       @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;
+  disabled?: 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,72 @@
 <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"
+          :disabled="disabled"
           :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;
+    disabled?: boolean;
+  }>(),
+  {
+    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>