@tmagic/form 1.3.0-alpha.1 → 1.3.0-alpha.11

package/src/fields/Select.vue

@@ -25,10 +25,11 @@
   </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 { getConfig } from '../utils/config';
@@ -37,6 +38,10 @@ import { useAddField } from '../utils/useAddField';
 import SelectOptionGroups from './SelectOptionGroups.vue';
 import SelectOptions from './SelectOptions.vue';
 
+defineOptions({
+  name: 'MFormSelect',
+});
+
 const props = defineProps<{
   config: SelectConfig;
   model: any;
@@ -77,13 +82,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 +107,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 +168,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 +230,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 +293,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,7 +9,7 @@
   ></TMagicSwitch>
 </template>
 
-<script lang="ts" setup name="MFormSwitch">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
 import { TMagicSwitch } from '@tmagic/design';
@@ -17,6 +17,10 @@ import { TMagicSwitch } from '@tmagic/design';
 import { SwitchConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormSwitch',
+});
+
 const props = defineProps<{
   config: SwitchConfig;
   model: any;

package/src/fields/Text.vue

@@ -23,7 +23,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormText">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
@@ -32,6 +32,10 @@ import { isNumber } from '@tmagic/utils';
 import { FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormText',
+});
+
 const props = defineProps<{
   config: TextConfig;
   model: any;

package/src/fields/Textarea.vue

@@ -12,7 +12,7 @@
   </TMagicInput>
 </template>
 
-<script lang="ts" setup name="MFormTextarea">
+<script lang="ts" setup>
 import { inject } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
@@ -20,6 +20,10 @@ import { TMagicInput } from '@tmagic/design';
 import { FormState, TextareaConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormTextarea',
+});
+
 const props = defineProps<{
   config: TextareaConfig;
   model: any;

package/src/fields/Time.vue

@@ -10,12 +10,16 @@
   ></TMagicTimePicker>
 </template>
 
-<script lang="ts" setup name="MFormTime">
+<script lang="ts" setup>
 import { TMagicTimePicker } from '@tmagic/design';
 
 import { TimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormTime',
+});
+
 const props = defineProps<{
   config: TimeConfig;
   model: any;

package/src/index.ts

@@ -82,45 +82,47 @@ 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-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

@@ -435,9 +435,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;
@@ -662,6 +662,7 @@ export interface GroupListConfig extends FormItem {
   tableItems?: FormConfig;
   titleKey?: string;
   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/types/Form.vue.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     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;
@@ -58,6 +59,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     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];
+} & {};