@tmagic/form 1.3.0-alpha.9 → 1.3.0-beta.1

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']);
 

package/src/fields/Switch.vue

@@ -14,30 +14,22 @@ import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
 
-import { SwitchConfig } from '../schema';
+import type { FieldProps, SwitchConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormSwitch',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<SwitchConfig>>();
 
-const emit = defineEmits(['change']);
+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

@@ -29,32 +29,25 @@ 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';
 
 defineOptions({
   name: 'MFormText',
 });
 
-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>;
-}>();
+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

@@ -17,32 +17,25 @@ 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';
 
 defineOptions({
   name: 'MFormTextarea',
 });
 
-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>;
-}>();
+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

@@ -13,26 +13,18 @@
 <script lang="ts" setup>
 import { TMagicTimePicker } from '@tmagic/design';
 
-import { TimeConfig } from '../schema';
+import type { FieldProps, TimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormTime',
 });
 
-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>;
-}>();
+const props = defineProps<FieldProps<TimeConfig>>();
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 useAddField(props.prop);
 

package/src/fields/Timerange.vue

@@ -0,0 +1,76 @@
+<template>
+  <TMagicTimePicker
+    v-model="value"
+    is-range
+    range-separator="-"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    :size="size"
+    :unlink-panels="true"
+    :disabled="disabled"
+    :default-time="config.defaultTime"
+    @change="changeHandler"
+  ></TMagicTimePicker>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { TMagicTimePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DaterangeConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormTimeRange',
+});
+
+const props = defineProps<FieldProps<DaterangeConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { names } = props.config;
+const value = ref<(Date | undefined)[] | null>([]);
+
+if (props.model !== undefined && names?.length) {
+  watch(
+    [() => props.model[names[0]], () => props.model[names[1]]],
+    ([start, end], [preStart, preEnd]) => {
+      if (!value.value) {
+        value.value = [];
+      }
+      if (!start || !end) value.value = [];
+      if (start !== preStart) value.value[0] = start;
+      if (end !== preEnd) value.value[1] = end;
+    },
+    {
+      immediate: true,
+    },
+  );
+}
+
+const setValue = (v: Date[] | Date) => {
+  names?.forEach((item, index) => {
+    if (!props.model) {
+      return;
+    }
+    if (Array.isArray(v)) {
+      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+    } else {
+      props.model[item] = undefined;
+    }
+  });
+};
+
+const changeHandler = (v: Date[]) => {
+  const value = v || [];
+  if (names?.length) {
+    setValue(value);
+  }
+  emit('change', value);
+};
+</script>

package/src/index.ts

@@ -38,12 +38,14 @@ import DynamicField from './fields/DynamicField.vue';
 import Hidden from './fields/Hidden.vue';
 import Link from './fields/Link.vue';
 import Number from './fields/Number.vue';
+import NumberRange from './fields/NumberRange.vue';
 import RadioGroup from './fields/RadioGroup.vue';
 import Select from './fields/Select.vue';
 import Switch from './fields/Switch.vue';
 import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
+import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
@@ -56,6 +58,7 @@ export * from './utils/useAddField';
 
 export { default as MForm } from './Form.vue';
 export { default as MFormDialog } from './FormDialog.vue';
+export { default as MFormDrawer } from './FormDrawer.vue';
 export { default as MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
 export { default as MPanel } from './containers/Panel.vue';
@@ -65,6 +68,7 @@ export { default as MTable } from './containers/Table.vue';
 export { default as MGroupList } from './containers/GroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
+export { default as MNumberRange } from './fields/NumberRange.vue';
 export { default as MTextarea } from './fields/Textarea.vue';
 export { default as MHidden } from './fields/Hidden.vue';
 export { default as MDate } from './fields/Date.vue';
@@ -73,6 +77,7 @@ export { default as MTime } from './fields/Time.vue';
 export { default as MCheckbox } from './fields/Checkbox.vue';
 export { default as MSwitch } from './fields/Switch.vue';
 export { default as MDaterange } from './fields/Daterange.vue';
+export { default as MTimerange } from './fields/Timerange.vue';
 export { default as MColorPicker } from './fields/ColorPicker.vue';
 export { default as MCheckboxGroup } from './fields/CheckboxGroup.vue';
 export { default as MRadioGroup } from './fields/RadioGroup.vue';
@@ -108,11 +113,13 @@ export default {
     app.component('m-form-tab', Tabs);
     app.component('m-fields-text', Text);
     app.component('m-fields-number', Number);
+    app.component('m-fields-number-range', NumberRange);
     app.component('m-fields-textarea', Textarea);
     app.component('m-fields-hidden', Hidden);
     app.component('m-fields-date', Date);
     app.component('m-fields-datetime', DateTime);
     app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-timerange', Timerange);
     app.component('m-fields-time', Time);
     app.component('m-fields-checkbox', Checkbox);
     app.component('m-fields-switch', Switch);

package/src/schema.ts

@@ -21,6 +21,18 @@ export interface ValidateError {
   field: string;
 }
 
+export interface FieldProps<T = any> {
+  config: T;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+  lastValues?: Record<string, any>;
+}
+
 /**
  * 整个表单的数据，会注入到各个组件中去
  */
@@ -72,7 +84,7 @@ export interface FormItem {
   /** 值发生改变时调用的方法 */
   onChange?: OnChangeHandler;
   /** label 标签的文本 */
-  text?: string;
+  text?: string | FilterFunction;
   /** 右侧感叹号 */
   tip?: string;
 
@@ -146,7 +158,7 @@ export type TypeFunction = (
   },
 ) => string;
 
-type FilterFunction = (
+export type FilterFunction = (
   mForm: FormState | undefined,
   data: {
     model: Record<any, any>;
@@ -339,6 +351,13 @@ export interface NumberConfig extends FormItem {
   placeholder?: string;
 }
 
+/**
+ * 数值范围
+ */
+export interface NumberRangeConfig extends FormItem {
+  type?: 'number-range';
+}
+
 /**
  * 隐藏域
  */
@@ -661,6 +680,8 @@ export interface GroupListConfig extends FormItem {
   groupItems?: FormConfig;
   tableItems?: FormConfig;
   titleKey?: string;
+  titlePrefix?: string;
+  title?: string | FilterFunction;
   itemExtra?: string | FilterFunction;
   expandAll?: boolean;
   addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;

package/src/theme/form-drawer.scss

@@ -0,0 +1,11 @@
+.m-form-drawer {
+  .el-drawer__header {
+    margin: 0;
+  }
+
+  .m-drawer-body {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

package/src/theme/index.scss

@@ -1,4 +1,5 @@
 @use "./form-dialog.scss";
+@use "./form-drawer.scss";
 @use "./form.scss";
 @use "./date-time.scss";
 @use "./link.scss";
@@ -8,3 +9,4 @@
 @use "./table.scss";
 @use "./select.scss";
 @use "./tabs.scss";
+@use "./number-range.scss";

package/src/theme/number-range.scss

@@ -0,0 +1,8 @@
+.m-fields-number-range {
+  display: flex;
+  align-items: center;
+
+  .split-tag {
+    margin: 0 5px;
+  }
+}

package/src/theme/panel.scss

@@ -16,3 +16,9 @@
     margin-left: 5px;
   }
 }
+
+.m-container-panel {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+}

package/src/utils/config.ts

@@ -22,6 +22,6 @@ const setConfig = (option: any): void => {
   $MAGIC_FORM = option;
 };
 
-const getConfig = (key: string): unknown => $MAGIC_FORM[key];
+const getConfig = <T = unknown>(key: string): T => $MAGIC_FORM[key];
 
 export { getConfig, setConfig };

package/src/utils/form.ts

@@ -174,7 +174,7 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
     return false;
   }
 
-  if (multiple) {
+  if (multiple || type === 'number-range') {
     return [];
   }
 
@@ -193,6 +193,7 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
     formValue: mForm?.values || props.model,
     prop: props.prop,
     config: props.config,
+    index: props.index,
   });
 };
 

package/types/Form.vue.d.ts

@@ -3,21 +3,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
-    initValues: Object;
+    initValues: Record<string, any>;
     /** 需对比的值（开启对比模式时传入） */
-    lastValues?: Object | undefined;
+    lastValues?: Record<string, any> | undefined;
     /** 是否开启对比模式 */
     isCompare?: boolean | undefined;
-    parentValues?: Object | undefined;
+    parentValues?: Record<string, any> | undefined;
     labelWidth?: string | undefined;
     disabled?: boolean | undefined;
     height?: string | undefined;
     stepActive?: string | number | undefined;
-    size?: "default" | "small" | "large" | undefined;
+    size?: "large" | "default" | "small" | undefined;
     inline?: boolean | undefined;
     labelPosition?: string | undefined;
     keyProp?: string | undefined;
     popperClass?: string | undefined;
+    extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>, {
     config: () => never[];
     initValues: () => {};
@@ -43,21 +44,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
-    initValues: Object;
+    initValues: Record<string, any>;
     /** 需对比的值（开启对比模式时传入） */
-    lastValues?: Object | undefined;
+    lastValues?: Record<string, any> | undefined;
     /** 是否开启对比模式 */
     isCompare?: boolean | undefined;
-    parentValues?: Object | undefined;
+    parentValues?: Record<string, any> | undefined;
     labelWidth?: string | undefined;
     disabled?: boolean | undefined;
     height?: string | undefined;
     stepActive?: string | number | undefined;
-    size?: "default" | "small" | "large" | undefined;
+    size?: "large" | "default" | "small" | undefined;
     inline?: boolean | undefined;
     labelPosition?: string | undefined;
     keyProp?: string | undefined;
     popperClass?: string | undefined;
+    extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;
 }>, {
     config: () => never[];
     initValues: () => {};
@@ -77,11 +79,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     "onField-change"?: ((...args: any[]) => any) | undefined;
 }, {
     config: FormConfig;
-    initValues: Object;
-    lastValues: Object;
+    initValues: Record<string, any>;
+    lastValues: Record<string, any>;
     isCompare: boolean;
     keyProp: string;
-    parentValues: Object;
+    parentValues: Record<string, any>;
     labelWidth: string;
     disabled: boolean;
     stepActive: string | number;