@tmagic/form 1.1.6 → 1.2.0-beta.10

package/src/fields/Number.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input-number
+  <TMagicInputNumber
     v-if="model"
     v-model="model[name]"
     clearable
@@ -12,42 +12,40 @@
     :disabled="disabled"
     @change="changeHandler"
     @input="inputHandler"
-  ></el-input-number>
+  ></TMagicInputNumber>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup name="MFormNumber">
+import { inject } from 'vue';
+
+import { TMagicInputNumber } from '@tmagic/design';
 
 import { FormState, NumberConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-number',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<NumberConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change', 'input'],
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    const mForm = inject<FormState | null>('mForm');
-    return {
-      mForm,
-      changeHandler: (value: number) => {
-        emit('change', value);
-      },
-      inputHandler: (v: string) => {
-        emit('input', v);
-        mForm?.$emit('field-input', props.prop, v);
-      },
-    };
-  },
-});
+
+const props = defineProps<{
+  config: NumberConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change', 'input']);
+
+useAddField(props.prop);
+
+const mForm = inject<FormState | null>('mForm');
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+const inputHandler = (v: string) => {
+  emit('input', v);
+  mForm?.$emit('field-input', props.prop, v);
+};
 </script>

package/src/fields/RadioGroup.vue

@@ -1,33 +1,33 @@
 <template>
-  <el-radio-group v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <el-radio v-for="option in config.options" :label="option.value" :key="option.value">{{ option.text }}</el-radio>
-  </el-radio-group>
+  <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
+    <TMagicRadio v-for="option in config.options" :label="option.value" :key="`${option.value}`">{{
+      option.text
+    }}</TMagicRadio>
+  </TMagicRadioGroup>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup name="MFormRadioGroup">
+import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
-import fieldProps from '../utils/fieldProps';
+import { RadioGroupConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-radio-group',
+const props = defineProps<{
+  config: RadioGroupConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object,
-      required: true,
-    },
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
-    return {
-      changeHandler: (v: string | number | boolean) => emit('change', v),
-    };
-  },
-});
+useAddField(props.prop);
 </script>