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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.1",
+  "version": "1.3.0-alpha.3",
   "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.3",
+    "@tmagic/utils": "1.3.0-alpha.3",
     "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<{
     /** 表单配置 */

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

@@ -31,7 +31,7 @@
   </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,7 +42,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupListItem">
+<script setup lang="ts">
 import { computed, inject, ref, watchEffect } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
@@ -53,6 +53,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormGroupListItem',
+});
+
 const props = defineProps<{
   model: any;
   lastValues: any;

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

@@ -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;

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;
@@ -157,12 +162,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;
   }
@@ -283,9 +285,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>