@tmagic/form 1.3.0-alpha.2 → 1.3.0-alpha.21

package/src/fields/Display.vue

@@ -2,19 +2,15 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts" name="MFormDisplay">
-import { DisplayConfig } from '../schema';
+<script setup lang="ts">
+import type { DisplayConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: DisplayConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormDisplay',
+});
+
+const props = defineProps<FieldProps<DisplayConfig>>();
 
 if (props.config.initValue && props.model) {
   // eslint-disable-next-line vue/no-setup-props-destructure

package/src/fields/DynamicField.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MFormDynamicField">
+<script lang="ts" setup>
 /**
  * 动态表单，目前只支持input类型字段
  * inputType: 'dynamic-field',
@@ -27,27 +27,21 @@ import { onBeforeUnmount, reactive, watch } from 'vue';
 
 import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
-import { DynamicFieldConfig } from '../schema';
+import type { DynamicFieldConfig, FieldProps } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: DynamicFieldConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormDynamicField',
+});
+
+const props = defineProps<FieldProps<DynamicFieldConfig>>();
 
 const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-const request = getConfig('request') as Function;
+const request = getConfig<Function>('request');
 const fieldMap = reactive<{ [key: string]: any }>({
   value: {},
 });

package/src/fields/Hidden.vue

@@ -2,19 +2,15 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts" name="MFormHidden">
-import { HiddenConfig } from '../schema';
+<script setup lang="ts">
+import type { FieldProps, HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: HiddenConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormHidden',
+});
+
+const props = defineProps<FieldProps<HiddenConfig>>();
 
 useAddField(props.prop);
 </script>

package/src/fields/Link.vue

@@ -16,26 +16,20 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MFormLink">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
-import { FormState, LinkConfig } from '../schema';
+import type { FieldProps, FormState, LinkConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: LinkConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormLink',
+});
+
+const props = defineProps<FieldProps<LinkConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Number.vue

@@ -15,27 +15,24 @@
   ></TMagicInputNumber>
 </template>
 
-<script lang="ts" setup name="MFormNumber">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
 
-import { FormState, NumberConfig } from '../schema';
+import type { FieldProps, FormState, NumberConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: NumberConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormNumber',
+});
+
+const props = defineProps<FieldProps<NumberConfig>>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [values: number];
+  input: [values: number];
+}>();
 
 useAddField(props.prop);
 
@@ -45,7 +42,7 @@ const changeHandler = (value: number) => {
   emit('change', value);
 };
 
-const inputHandler = (v: string) => {
+const inputHandler = (v: number) => {
   emit('input', v);
   mForm?.$emit('field-input', props.prop, v);
 };

package/src/fields/NumberRange.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="m-fields-number-range">
+    <TMagicInput
+      v-model="model[name][0]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="minChangeHandler"
+    ></TMagicInput>
+    <span class="split-tag">-</span>
+    <TMagicInput
+      v-model="model[name][1]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="maxChangeHandler"
+    ></TMagicInput>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TMagicInput } from '@tmagic/design';
+
+import type { FieldProps, NumberRangeConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormNumberRange',
+});
+
+const props = defineProps<FieldProps<NumberRangeConfig>>();
+
+const emit = defineEmits<{
+  change: [values: [number, number]];
+}>();
+
+useAddField(props.prop);
+
+if (!Array.isArray(props.model[props.name])) {
+  props.model[props.name] = [];
+}
+
+const minChangeHandler = (v: string) => {
+  emit('change', [Number(v), props.model[props.name][1]]);
+};
+
+const maxChangeHandler = (v: string) => {
+  emit('change', [props.model[props.name][0], Number(v)]);
+};
+</script>

package/src/fields/RadioGroup.vue

@@ -10,23 +10,17 @@
   </TMagicRadioGroup>
 </template>
 
-<script lang="ts" setup name="MFormRadioGroup">
+<script lang="ts" setup>
 import { TMagicRadio, TMagicRadioGroup } from '@tmagic/design';
 
-import { RadioGroupConfig } from '../schema';
+import type { FieldProps, RadioGroupConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: RadioGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormRadioGroup',
+});
+
+const props = defineProps<FieldProps<RadioGroupConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Select.vue

@@ -25,29 +25,24 @@
   </TMagicSelect>
 </template>
 
-<script lang="ts" setup name="MFormSelect">
+<script lang="ts" setup>
 import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
+import { getValueByKeyPath } from '@tmagic/utils';
 
-import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
+import type { FieldProps, FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
 import SelectOptionGroups from './SelectOptionGroups.vue';
 import SelectOptions from './SelectOptions.vue';
 
-const props = defineProps<{
-  config: SelectConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormSelect',
+});
+
+const props = defineProps<FieldProps<SelectConfig>>();
 
 const emit = defineEmits(['change']);
 
@@ -77,13 +72,17 @@ const equalValue = (value: any, v: any): boolean => {
 };
 
 const mapOptions = (data: any[]) => {
-  const { option } = props.config;
-  const { text } = option;
-  const { value } = option;
+  const {
+    option = {
+      text: 'text',
+      value: 'value',
+    },
+  } = props.config;
+  const { text = 'text', value = 'value' } = option;
 
   return data.map((item) => ({
-    text: typeof text === 'function' ? text(item) : item[text || 'text'],
-    value: typeof value === 'function' ? value(item) : item[value || 'value'],
+    text: typeof text === 'function' ? text(item) : item[text],
+    value: typeof value === 'function' ? value(item) : item[value],
   }));
 };
 
@@ -98,8 +97,10 @@ const getOptions = async () => {
 
   let items: SelectOption[] | SelectGroupOption[] = [];
 
-  const { config } = props;
-  const { option } = config;
+  const { option } = props.config;
+
+  if (!option) return [];
+
   const { root = '', totalKey = 'total' } = option;
   let { body = {}, url } = option;
 
@@ -157,12 +158,9 @@ const getOptions = async () => {
     });
   }
 
-  const optionsData = root.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
+  const optionsData = getValueByKeyPath(root, res);
 
-  const resTotal = globalThis.parseInt(
-    totalKey.split('.').reduce((accumulator, currentValue: any) => accumulator[currentValue], res),
-    10,
-  );
+  const resTotal = globalThis.parseInt(getValueByKeyPath(totalKey, res), 10);
   if (resTotal > 0) {
     total.value = resTotal;
   }
@@ -222,8 +220,10 @@ const getInitLocalOption = async () => {
 const getInitOption = async () => {
   if (!props.model) return [];
 
-  const { config } = props;
-  const { option } = config;
+  const { option } = props.config;
+
+  if (!option) return [];
+
   const { root = '', initRoot = '' } = option;
   let { initBody = {} } = option;
 
@@ -283,9 +283,7 @@ const getInitOption = async () => {
     });
   }
 
-  let initData = (initRoot || root)
-    .split('.')
-    .reduce((accumulator, currentValue: any) => accumulator[currentValue], res);
+  let initData = getValueByKeyPath(initRoot || root, res);
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];

package/src/fields/SelectOptionGroups.vue

@@ -2,7 +2,7 @@
   <TMagicOptionGroup v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
     <component
       v-for="(item, index) in group.options"
-      :is="uiComponent.component"
+      :is="uiComponent"
       :key="index"
       :label="item.label || item.text"
       :value="item.value"
@@ -12,14 +12,18 @@
   </TMagicOptionGroup>
 </template>
 
-<script lang="ts" setup name="MFormSelectOptionGroups">
+<script lang="ts" setup>
 import { getConfig, TMagicOptionGroup } from '@tmagic/design';
 
 import { SelectGroupOption } from '../schema';
 
+defineOptions({
+  name: 'MFormSelectOptionGroups',
+});
+
 defineProps<{
   options: SelectGroupOption[];
 }>();
 
-const uiComponent = getConfig('components').option;
+const uiComponent = getConfig('components')?.option.component || 'el-option';
 </script>

package/src/fields/SelectOptions.vue

@@ -8,11 +8,15 @@
   ></TMagicOption>
 </template>
 
-<script lang="ts" setup name="MFormSelectOptions">
+<script lang="ts" setup>
 import { TMagicOption } from '@tmagic/design';
 
 import { SelectOption } from '../schema';
 
+defineOptions({
+  name: 'MFormSelectOptions',
+});
+
 defineProps<{
   options: SelectOption[];
   valueKey?: string;

package/src/fields/Switch.vue

@@ -9,31 +9,27 @@
   ></TMagicSwitch>
 </template>
 
-<script lang="ts" setup name="MFormSwitch">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
 
-import { SwitchConfig } from '../schema';
+import type { FieldProps, SwitchConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: SwitchConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormSwitch',
+});
 
-const emit = defineEmits(['change']);
+const props = defineProps<FieldProps<SwitchConfig>>();
+
+const emit = defineEmits<{
+  change: [value: any];
+}>();
 
 useAddField(props.prop);
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: any) => {
   emit('change', value);
 };
 

package/src/fields/Text.vue

@@ -23,34 +23,31 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormText">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
-import { FormState, TextConfig } from '../schema';
+import type { FieldProps, FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: TextConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormText',
+});
+
+const props = defineProps<FieldProps<TextConfig>>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [value: string];
+  input: [value: string];
+}>();
 
 useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: string) => {
   emit('change', value);
 };
 

package/src/fields/Textarea.vue

@@ -12,33 +12,30 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormTextarea">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
-import { FormState, TextareaConfig } from '../schema';
+import type { FieldProps, FormState, TextareaConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: TextareaConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormTextarea',
+});
+
+const props = defineProps<FieldProps<TextareaConfig>>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [value: string];
+  input: [value: string];
+}>();
 
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');
 
-const changeHandler = (value: number) => {
+const changeHandler = (value: string) => {
   emit('change', value);
 };
 

package/src/fields/Time.vue

@@ -10,25 +10,21 @@
   ></TMagicTimePicker>
 </template>
 
-<script lang="ts" setup name="MFormTime">
+<script lang="ts" setup>
 import { TMagicTimePicker } from '@tmagic/design';
 
-import { TimeConfig } from '../schema';
+import type { FieldProps, TimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
-const props = defineProps<{
-  config: TimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+defineOptions({
+  name: 'MFormTime',
+});
+
+const props = defineProps<FieldProps<TimeConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);