@tmagic/form 1.3.0-alpha.15 → 1.3.0-alpha.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.15",
+  "version": "1.3.0-alpha.17",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.15",
-    "@tmagic/utils": "1.3.0-alpha.15",
+    "@tmagic/design": "1.3.0-alpha.17",
+    "@tmagic/utils": "1.3.0-alpha.17",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.4"

package/src/FormDialog.vue

@@ -46,7 +46,7 @@
             <TMagicButton v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
               >下一步</TMagicButton
             >
-            <TMagicButton v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+            <TMagicButton v-else type="primary" size="small" :disabled="disabled" :loading="saveFetch" @click="save">{{
               confirmText
             }}</TMagicButton>
           </slot>

package/src/FormDrawer.vue

@@ -3,7 +3,7 @@
     class="m-form-drawer"
     v-model="visible"
     :title="title"
-    :close-on-press-escape="true"
+    :close-on-press-escape="closeOnPressEscape"
     :append-to-body="true"
     :show-close="true"
     :close-on-click-modal="true"
@@ -36,7 +36,9 @@
         <TMagicCol :span="12">
           <slot name="footer">
             <TMagicButton @click="hide">关闭</TMagicButton>
-            <TMagicButton type="primary" @click="submitHandler" :loading="saveFetch">{{ confirmText }}</TMagicButton>
+            <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+              confirmText
+            }}</TMagicButton>
           </slot>
         </TMagicCol>
       </TMagicRow>
@@ -64,12 +66,14 @@ withDefaults(
     width?: string | number;
     labelWidth?: string;
     disabled?: boolean;
+    closeOnPressEscape?: boolean;
     title?: string;
     zIndex?: number;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
   }>(),
   {
+    closeOnPressEscape: true,
     config: () => [],
     values: () => ({}),
     confirmText: '确定',

package/src/containers/Container.vue

@@ -14,7 +14,7 @@
     ></m-fields-hidden>
 
     <component
-      v-else-if="items && !config.text && type && display"
+      v-else-if="items && !text && type && display"
       :key="key(config)"
       :size="size"
       :is="tagName"
@@ -35,12 +35,12 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -91,13 +91,13 @@
       <!-- 上次内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
         style="background: #f7dadd"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -140,13 +140,13 @@
       <!-- 当前内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
         style="background: #def7da"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -294,6 +294,8 @@ const tagName = computed(() => {
 
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
+const text = computed(() => filterFunction(mForm, props.config.text, props));
+
 const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
 
 const extra = computed(() => filterFunction(mForm, props.config.extra, props));
@@ -331,7 +333,7 @@ watch(
   showDiff,
   (showDiff) => {
     if (type.value === 'hidden') return;
-    if (items.value && !props.config.text && type.value && display.value) return;
+    if (items.value && !text.value && type.value && display.value) return;
     if (display.value && showDiff && type.value) {
       emit('addDiffCount');
     }

package/src/containers/GroupList.vue

@@ -132,6 +132,7 @@ const toggleMode = () => {
       text: null,
     }))) as any;
 };
+
 const onAddDiffCount = () => emit('addDiffCount');
 
 const getLastValues = (item: any, index: number) => item?.[index] || {};

package/src/containers/GroupListItem.vue

@@ -88,7 +88,13 @@ const title = computed(() => {
     return props.model[props.config.titleKey];
   }
 
-  return `组 ${String(props.index)}`;
+  if (props.config.title) {
+    return filterFunction(mForm, props.config.title, props);
+  }
+
+  const titlePrefix = props.config.titlePrefix || '组';
+
+  return `${titlePrefix} ${String(props.index + 1)}`;
 });
 
 const length = computed(() => props.groupModel?.length || 0);
@@ -113,7 +119,7 @@ const showDelete = (index: number) => {
 };
 
 // 调换顺序
-const changeOrder = (offset = 0) => emit('swap-item', props.index, `${String(props.index)}${offset}`);
+const changeOrder = (offset = 0) => emit('swap-item', props.index, props.index + offset);
 
 const movable = () => {
   const { movable } = props.config;

package/src/fields/Cascader.vue

@@ -19,7 +19,7 @@ import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
 
-import { CascaderConfig, FormState } from '../schema';
+import type { CascaderConfig, FieldProps, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
@@ -27,17 +27,7 @@ defineOptions({
   name: 'MFormCascader',
 });
 
-const props = defineProps<{
-  config: CascaderConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CascaderConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Checkbox.vue

@@ -15,24 +15,14 @@ import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
 
-import { CheckboxConfig } from '../schema';
+import type { CheckboxConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormCheckbox',
 });
 
-const props = defineProps<{
-  config: CheckboxConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CheckboxConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/CheckboxGroup.vue

@@ -16,7 +16,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import { CheckboxGroupConfig, FormState } from '../schema';
+import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
 import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -24,17 +24,7 @@ defineOptions({
   name: 'MFormCheckGroup',
 });
 
-const props = defineProps<{
-  config: CheckboxGroupConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<CheckboxGroupConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/ColorPicker.vue

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

package/src/fields/Date.vue

@@ -15,26 +15,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateConfig } from '../schema';
+import type { DateConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDate',
 });
 
-const props = defineProps<{
-  config: DateConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DateConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/DateTime.vue

@@ -17,26 +17,18 @@
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DateTimeConfig } from '../schema';
+import type { DateTimeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateTime',
 });
 
-const props = defineProps<{
-  config: DateTimeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DateTimeConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Daterange.vue

@@ -19,24 +19,14 @@ import { ref, watch } from 'vue';
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
-import { DaterangeConfig } from '../schema';
+import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDateRange',
 });
 
-const props = defineProps<{
-  config: DaterangeConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<DaterangeConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Display.vue

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { DisplayConfig } from '../schema';
+import type { DisplayConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormDisplay',
 });
 
-const props = defineProps<{
-  config: DisplayConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+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

@@ -27,7 +27,7 @@ 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';
 
@@ -35,23 +35,13 @@ defineOptions({
   name: 'MFormDynamicField',
 });
 
-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>;
-}>();
+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

@@ -3,22 +3,14 @@
 </template>
 
 <script setup lang="ts">
-import { HiddenConfig } from '../schema';
+import type { FieldProps, HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormHidden',
 });
 
-const props = defineProps<{
-  config: HiddenConfig;
-  model: any;
-  initValues?: any;
-  values?: any;
-  name: string;
-  prop: string;
-  lastValues?: Record<string, any>;
-}>();
+const props = defineProps<FieldProps<HiddenConfig>>();
 
 useAddField(props.prop);
 </script>

package/src/fields/Link.vue

@@ -22,24 +22,14 @@ 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';
 
 defineOptions({
   name: 'MFormLink',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<LinkConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Number.vue

@@ -20,26 +20,19 @@ 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';
 
 defineOptions({
   name: 'MFormNumber',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<NumberConfig>>();
 
-const emit = defineEmits(['change', 'input']);
+const emit = defineEmits<{
+  change: [values: number];
+  input: [values: number];
+}>();
 
 useAddField(props.prop);
 
@@ -49,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

@@ -13,24 +13,14 @@
 <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';
 
 defineOptions({
   name: 'MFormRadioGroup',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<RadioGroupConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Select.vue

@@ -31,7 +31,7 @@ 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';
 
@@ -42,17 +42,7 @@ defineOptions({
   name: 'MFormSelect',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<SelectConfig>>();
 
 const emit = defineEmits(['change']);