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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.1",
+  "version": "1.3.0-alpha.11",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,28 +36,27 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.1",
-    "@tmagic/utils": "1.3.0-alpha.1",
+    "@tmagic/design": "1.3.0-alpha.11",
+    "@tmagic/utils": "1.3.0-alpha.11",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vite": "^4.3.8",
+    "vue-tsc": "^1.6.5"
   }
 }

package/src/Form.vue

@@ -26,7 +26,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts" name="MForm">
+<script setup lang="ts">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import { isEqual } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
@@ -38,6 +38,10 @@ import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
 
+defineOptions({
+  name: 'MForm',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
@@ -58,6 +62,7 @@ const props = withDefaults(
     labelPosition?: string;
     keyProp?: string;
     popperClass?: string;
+    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
@@ -110,7 +115,7 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
-watchEffect(() => {
+watchEffect(async () => {
   formState.initValues = props.initValues;
   formState.lastValues = props.lastValues;
   formState.isCompare = props.isCompare;
@@ -118,6 +123,13 @@ watchEffect(() => {
   formState.keyProp = props.keyProp;
   formState.popperClass = props.popperClass;
   formState.parentValues = props.parentValues;
+
+  if (typeof props.extendState === 'function') {
+    const state = (await props.extendState(formState)) || {};
+    Object.entries(state).forEach(([key, value]) => {
+      formState[key] = value;
+    });
+  }
 });
 
 provide('mForm', formState);

package/src/FormDialog.vue

@@ -56,7 +56,7 @@
   </TMagicDialog>
 </template>
 
-<script setup lang="ts" name="MFormDialog">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
@@ -64,6 +64,10 @@ import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design
 import Form from './Form.vue';
 import { FormConfig, StepConfig } from './schema';
 
+defineOptions({
+  name: 'MFormDialog',
+});
+
 const props = withDefaults(
   defineProps<{
     config?: FormConfig;

package/src/containers/Col.vue

@@ -16,7 +16,7 @@
   </TMagicCol>
 </template>
 
-<script setup lang="ts" name="MFormCol">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
@@ -26,6 +26,10 @@ import { display as displayFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormCol',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/Container.vue

@@ -218,7 +218,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormContainer">
+<script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
@@ -228,6 +228,10 @@ import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
+defineOptions({
+  name: 'MFormContainer',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单值 */

package/src/containers/Fieldset.vue

@@ -61,7 +61,7 @@
   </fieldset>
 </template>
 
-<script lang="ts" setup name="MFormFieldset">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -70,6 +70,10 @@ import { FieldsetConfig, FormState } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormFieldset',
+});
+
 const props = withDefaults(
   defineProps<{
     labelWidth?: string;

package/src/containers/GroupList.vue

@@ -25,13 +25,13 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">添加组</TMagicButton>
+    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">新增</TMagicButton>
 
     <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupList">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 
@@ -42,6 +42,10 @@ import { initValue } from '../utils/form';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
+defineOptions({
+  name: 'MFormGroupList',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/GroupListItem.vue

@@ -42,8 +42,8 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupListItem">
-import { computed, inject, ref, watchEffect } from 'vue';
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicIcon } from '@tmagic/design';
@@ -53,6 +53,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormGroupListItem',
+});
+
 const props = defineProps<{
   model: any;
   lastValues: any;
@@ -69,11 +73,7 @@ const props = defineProps<{
 const emit = defineEmits(['swap-item', 'remove-item', 'change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
-const expand = ref(false);
-
-watchEffect(() => {
-  expand.value = !props.index;
-});
+const expand = ref(props.config.expandAll || !props.index);
 
 const rowConfig = computed(() => ({
   type: 'row',

package/src/containers/Panel.vue

@@ -57,7 +57,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts" name="MFormPanel">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
@@ -68,6 +68,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormPanel',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/Row.vue

@@ -19,7 +19,7 @@
   </TMagicRow>
 </template>
 
-<script setup lang="ts" name="MFormRow">
+<script setup lang="ts">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
@@ -28,6 +28,10 @@ import { FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
+defineOptions({
+  name: 'MFormRow',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/Step.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormStep">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
@@ -41,6 +41,10 @@ import { FormState, StepConfig } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormStep',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;

package/src/containers/Table.vue

@@ -122,7 +122,7 @@
       </TMagicTooltip>
       <slot></slot>
       <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-        >添加</TMagicButton
+        >新增一行</TMagicButton
       >
       &nbsp;
       <TMagicButton
@@ -174,7 +174,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormTable">
+<script setup lang="ts">
 import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
 import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
@@ -197,6 +197,10 @@ import { display as displayFunc, initValue } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTable',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;

package/src/containers/Tabs.vue

@@ -2,13 +2,13 @@
   <component
     v-model="activeTabName"
     v-bind="
-      tabsComponent.props({
+      tabsComponent?.props({
         type: config.tabType,
         editable: config.editable || false,
         tabPosition: config.tabPosition || 'top',
-      })
+      }) || {}
     "
-    :is="tabsComponent.component"
+    :is="tabsComponent?.component || 'el-tabs'"
     :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
     @tab-click="tabClickHandler"
     @tab-add="onTabAdd"
@@ -16,9 +16,11 @@
   >
     <component
       v-for="(tab, tabIndex) in tabs"
-      :is="tabPaneComponent.component"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-      v-bind="tabPaneComponent.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })"
+      v-bind="
+        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+      "
     >
       <template #label>
         <span>
@@ -67,7 +69,7 @@
   </component>
 </template>
 
-<script setup lang="ts" name="MFormTabs">
+<script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
 
@@ -78,12 +80,16 @@ import { display as displayFunc, filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormTabs',
+});
+
 type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components').tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabPaneComponent = getConfig('components')?.tabPane;
+const tabsComponent = getConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;

package/src/fields/Cascader.vue

@@ -14,7 +14,7 @@
   ></TMagicCascader>
 </template>
 
-<script setup lang="ts" name="MFormCascader">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicCascader } from '@tmagic/design';
@@ -23,6 +23,10 @@ import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormCascader',
+});
+
 const props = defineProps<{
   config: CascaderConfig;
   model: any;

package/src/fields/Checkbox.vue

@@ -10,7 +10,7 @@
   >
 </template>
 
-<script setup lang="ts" name="MFormCheckbox">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -18,6 +18,10 @@ import { TMagicCheckbox } from '@tmagic/design';
 import { CheckboxConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormCheckbox',
+});
+
 const props = defineProps<{
   config: CheckboxConfig;
   model: any;

package/src/fields/CheckboxGroup.vue

@@ -11,14 +11,18 @@
   </TMagicCheckboxGroup>
 </template>
 
-<script lang="ts" setup name="MFormCheckGroup">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
 import { CheckboxGroupConfig, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
-import { filterFunction } from '..';
+
+defineOptions({
+  name: 'MFormCheckGroup',
+});
 
 const props = defineProps<{
   config: CheckboxGroupConfig;

package/src/fields/ColorPicker.vue

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

package/src/fields/Date.vue

@@ -11,13 +11,17 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDate">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDate',
+});
+
 const props = defineProps<{
   config: DateConfig;
   model: any;

package/src/fields/DateTime.vue

@@ -13,13 +13,17 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateTime">
+<script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DateTimeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDateTime',
+});
+
 const props = defineProps<{
   config: DateTimeConfig;
   model: any;

package/src/fields/Daterange.vue

@@ -13,7 +13,7 @@
   ></TMagicDatePicker>
 </template>
 
-<script lang="ts" setup name="MFormDateRange">
+<script lang="ts" setup>
 import { ref, watch } from 'vue';
 
 import { TMagicDatePicker } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import { DaterangeConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDateRange',
+});
+
 const props = defineProps<{
   config: DaterangeConfig;
   model: any;

package/src/fields/Display.vue

@@ -2,10 +2,14 @@
   <span v-if="model">{{ model[name] }}</span>
 </template>
 
-<script setup lang="ts" name="MFormDisplay">
+<script setup lang="ts">
 import { DisplayConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDisplay',
+});
+
 const props = defineProps<{
   config: DisplayConfig;
   model: any;

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',
@@ -31,6 +31,10 @@ import { DynamicFieldConfig } from '../schema';
 import { getConfig } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormDynamicField',
+});
+
 const props = defineProps<{
   config: DynamicFieldConfig;
   model: any;

package/src/fields/Hidden.vue

@@ -2,10 +2,14 @@
   <input v-if="model" v-model="model[name]" type="hidden" />
 </template>
 
-<script setup lang="ts" name="MFormHidden">
+<script setup lang="ts">
 import { HiddenConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormHidden',
+});
+
 const props = defineProps<{
   config: HiddenConfig;
   model: any;

package/src/fields/Link.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MFormLink">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -25,6 +25,10 @@ import FormDialog from '../FormDialog.vue';
 import { FormState, LinkConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
+defineOptions({
+  name: 'MFormLink',
+});
+
 const props = defineProps<{
   config: LinkConfig;
   model: any;

package/src/fields/Number.vue

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

package/src/fields/RadioGroup.vue

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