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

package/src/index.ts

@@ -38,6 +38,7 @@ 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';
@@ -56,6 +57,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 +67,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';
@@ -82,45 +85,48 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
-const defaultInstallOpt = {};
+export interface InstallOptions {
+  [key: string]: any;
+}
 
-const install = (app: App, opt: any) => {
-  const option = Object.assign(defaultInstallOpt, opt);
+const defaultInstallOpt: InstallOptions = {};
 
-  // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$MAGIC_FORM = option;
-  setConfig(option);
+export default {
+  install(app: App, opt: InstallOptions = {}) {
+    const option = Object.assign(defaultInstallOpt, opt);
 
-  app.component('m-form', Form);
-  app.component('m-form-dialog', FormDialog);
-  app.component('m-form-container', Container);
-  app.component('m-form-fieldset', Fieldset);
-  app.component('m-form-group-list', GroupList);
-  app.component('m-form-panel', Panel);
-  app.component('m-form-row', Row);
-  app.component('m-form-step', MStep);
-  app.component('m-form-table', Table);
-  app.component('m-form-tab', Tabs);
-  app.component('m-fields-text', Text);
-  app.component('m-fields-number', Number);
-  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-time', Time);
-  app.component('m-fields-checkbox', Checkbox);
-  app.component('m-fields-switch', Switch);
-  app.component('m-fields-color-picker', ColorPicker);
-  app.component('m-fields-checkbox-group', CheckboxGroup);
-  app.component('m-fields-radio-group', RadioGroup);
-  app.component('m-fields-display', Display);
-  app.component('m-fields-link', Link);
-  app.component('m-fields-select', Select);
-  app.component('m-fields-cascader', Cascader);
-  app.component('m-fields-dynamic-field', DynamicField);
-};
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$MAGIC_FORM = option;
+    setConfig(option);
 
-export default {
-  install,
+    app.component('m-form', Form);
+    app.component('m-form-dialog', FormDialog);
+    app.component('m-form-container', Container);
+    app.component('m-form-fieldset', Fieldset);
+    app.component('m-form-group-list', GroupList);
+    app.component('m-form-panel', Panel);
+    app.component('m-form-row', Row);
+    app.component('m-form-step', MStep);
+    app.component('m-form-table', Table);
+    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-time', Time);
+    app.component('m-fields-checkbox', Checkbox);
+    app.component('m-fields-switch', Switch);
+    app.component('m-fields-color-picker', ColorPicker);
+    app.component('m-fields-checkbox-group', CheckboxGroup);
+    app.component('m-fields-radio-group', RadioGroup);
+    app.component('m-fields-display', Display);
+    app.component('m-fields-link', Link);
+    app.component('m-fields-select', Select);
+    app.component('m-fields-cascader', Cascader);
+    app.component('m-fields-dynamic-field', DynamicField);
+  },
 };

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';
+}
+
 /**
  * 隐藏域
  */
@@ -435,9 +454,9 @@ export interface SelectConfig extends FormItem, Input {
   allowCreate?: boolean;
   filterable?: boolean;
   group?: boolean;
-  options: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
-  remote: true;
-  option: {
+  options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
+  remote?: true;
+  option?: {
     url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
     method?: 'jsonp' | string;
@@ -661,7 +680,10 @@ 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;
   defaultAdd?: (mForm: FormState | undefined, data: any) => any;
   delete?: (model: any, index: number | string | symbol, values: any) => boolean | 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

@@ -13,11 +13,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     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: () => {};
@@ -38,7 +39,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     initialized: import("vue").Ref<boolean>;
     changeHandler: () => void;
     resetForm: () => any;
-    submitForm: (native?: boolean) => Promise<any>;
+    submitForm: (native?: boolean | undefined) => Promise<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input" | "field-change")[], "change" | "field-input" | "field-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /** 表单配置 */
     config: FormConfig;
@@ -53,11 +54,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     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: () => {};
@@ -88,7 +90,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     height: string;
     inline: boolean;
     labelPosition: string;
-}>;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -100,7 +102,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};