@tmagic/form 1.7.4 → 1.7.6

package/dist/tmagic-form.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, withCtx, createVNode, inject, ref, computed, watchEffect, watch, resolveComponent, normalizeStyle, normalizeClass, mergeProps, resolveDynamicComponent, Fragment, renderList, createTextVNode, toDisplayString, toRaw, readonly, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, onUnmounted, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
+import { readonly, defineComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, withCtx, createVNode, inject, ref, computed, watchEffect, watch, resolveComponent, normalizeStyle, normalizeClass, mergeProps, resolveDynamicComponent, Fragment, renderList, createTextVNode, toDisplayString, toRaw, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, onUnmounted, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, DocumentCopy, CaretTop, Position, Grid, Plus, Sort, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
 import { TMagicTooltip, TMagicIcon, TMagicFormItem, TMagicButton, TMagicCheckbox, TMagicCard, TMagicPopover, TMagicInputNumber, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessage, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, useZIndex, TMagicTable, TMagicUpload, TMagicPagination, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
@@ -9,14 +9,23 @@ import { createPopper } from '@popperjs/core';
 import Sortable from 'sortablejs';
 export * from '@tmagic/form-schema';
 
-const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
+const TABLE_SELECT_TYPES = /* @__PURE__ */ new Set(["table-select", "tableSelect"]);
+const isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
   if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
     asyncLoad.name = name;
     value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
   }
 };
-const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
+const MULTIPLE_VALUE_TYPES = /* @__PURE__ */ new Set([
+  "checkbox-group",
+  "checkboxGroup",
+  "table",
+  "cascader",
+  "group-list",
+  "groupList"
+]);
+const isMultipleValue = (type) => typeof type === "string" && MULTIPLE_VALUE_TYPES.has(type);
 const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
   if (Array.isArray(initValue2[name])) {
     value[name] = initValue2[name].map((v, index) => createValues(mForm, items, v, value[name]?.[index]));
@@ -50,22 +59,18 @@ const initValueItem = function(mForm, item, initValue2, value) {
   const { names } = item;
   const { type, name } = item;
   if (isTableSelect(type) && name) {
-    value[name] = initValue2[name] || "";
+    value[name] = initValue2[name] ?? "";
     return value;
   }
   asyncLoadConfig(value, initValue2, item);
   if (name && !items && typeof initValue2?.[name] !== "undefined") {
     if (typeof value[name] === "undefined") {
-      if (type === "number") {
-        value[name] = Number(initValue2[name]);
-      } else {
-        value[name] = typeof initValue2[name] === "object" ? initValue2[name] : initValue2[name];
-      }
+      value[name] = type === "number" ? Number(initValue2[name]) : initValue2[name];
     }
     return value;
   }
   if (names) {
-    return names.forEach((n) => value[n] = initValue2[n] || "");
+    return names.forEach((n) => value[n] = initValue2[n] ?? "");
   }
   if (!name) {
     return createValues(mForm, items, initValue2, value);
@@ -91,7 +96,7 @@ const createValues = function(mForm, config = [], initValue2 = {}, value = {}) {
   }
   return value;
 };
-const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }) {
+const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple, names }) {
   if (typeof defaultValue === "function") {
     return defaultValue(mForm);
   }
@@ -110,15 +115,18 @@ const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }
   if (multiple || type === "number-range") {
     return [];
   }
+  if (type === "daterange" && !names) {
+    return [];
+  }
   return "";
 };
 const filterFunction = (mForm, config, props) => {
   if (typeof config === "function") {
     return config(mForm, {
-      values: mForm?.initValues || {},
-      model: props.model,
-      parent: mForm?.parentValues || {},
-      formValue: mForm?.values || props.model,
+      values: readonly(mForm?.initValues || {}),
+      model: readonly(props.model),
+      parent: readonly(mForm?.parentValues || {}),
+      formValue: readonly(mForm?.values || props.model),
       prop: props.prop,
       config: props.config,
       index: props.index,
@@ -187,7 +195,7 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
     let time;
     if (["x", "timestamp"].includes(format)) {
       time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-    } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+    } else if (typeof v === "string" && v.includes("Z") || v instanceof Date) {
       dayjs.extend(utc);
       time = dayjs(v).utcOffset(8).format(format);
     } else {
@@ -200,9 +208,10 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
   }
   return defaultValue;
 };
-const getDataByPage = (data = [], pagecontext, pagesize) => data.filter(
-  (item, index) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize
-);
+const getDataByPage = (data = [], pagecontext, pagesize) => {
+  const start = pagecontext * pagesize;
+  return data.slice(start, start + pagesize);
+};
 const sortArray = (data, newIndex, oldIndex, sortKey) => {
   if (newIndex === oldIndex) {
     return data;
@@ -210,7 +219,8 @@ const sortArray = (data, newIndex, oldIndex, sortKey) => {
   if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
     return data;
   }
-  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+  const item = data[oldIndex];
+  const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
   if (sortKey) {
     for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
       newData[v][sortKey] = i;
@@ -220,10 +230,22 @@ const sortArray = (data, newIndex, oldIndex, sortKey) => {
 };
 const sortChange = (data, { prop, order }) => {
   if (order === "ascending") {
-    data = data.sort((a, b) => a[prop] - b[prop]);
+    data.sort((a, b) => a[prop] - b[prop]);
   } else if (order === "descending") {
-    data = data.sort((a, b) => b[prop] - a[prop]);
+    data.sort((a, b) => b[prop] - a[prop]);
+  }
+};
+const createObjectProp = (prop, key, name) => {
+  if (prop === "") {
+    return key;
+  }
+  const itemPath = `${prop}`.split(".");
+  if (name) {
+    if (`${itemPath[itemPath.length - 1]}` === `${name}`) {
+      return `${[...itemPath.slice(0, -1), key].join(".")}`;
+    }
   }
+  return `${[...itemPath, key].join(".")}`;
 };
 
 const _hoisted_1$e = {
@@ -463,11 +485,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         value = filterHandler(filter, v);
         if (typeof onChange === "function") {
           const setModel = (key2, value2) => {
-            if (props.config.name) {
-              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key2), value: value2 });
-            } else {
-              newChangeRecords.push({ propPath: itemProp.value, value: value2 });
-            }
+            newChangeRecords.push({ propPath: createObjectProp(itemProp.value, key2, props.config.name), value: value2 });
           };
           const setFormValue = (key2, value2) => {
             newChangeRecords.push({ propPath: key2, value: value2 });
@@ -2629,15 +2647,22 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const mForm = inject("mForm");
     if (props.config.initValue && props.model) {
       props.model[props.name] = props.config.initValue;
     }
+    const text = computed(() => {
+      if (props.config.displayText) {
+        return filterFunction(mForm, props.config.displayText, props);
+      }
+      return props.model[props.name];
+    });
     useAddField(props.prop);
     return (_ctx, _cache) => {
       return __props.model ? (openBlock(), createElementBlock(
         "span",
         _hoisted_1$8,
-        toDisplayString(__props.model[__props.name]),
+        toDisplayString(text.value),
         1
         /* TEXT */
       )) : createCommentVNode("v-if", true);
@@ -5873,4 +5898,4 @@ const index = {
   }
 };
 
-export { _sfc_main$q as MCascader, _sfc_main$p as MCheckbox, _sfc_main$o as MCheckboxGroup, _sfc_main$n as MColorPicker, _sfc_main$A as MContainer, _sfc_main$m as MDate, _sfc_main$k as MDateTime, _sfc_main$l as MDaterange, _sfc_main$j as MDisplay, _sfc_main$i as MDynamicField, _sfc_main$z as MFieldset, _sfc_main$y as MFlexLayout, _sfc_main$g as MForm, _sfc_main as MFormBox, _sfc_main$f as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$w as MGroupList, _sfc_main$h as MHidden, _sfc_main$e as MLink, _sfc_main$d as MNumber, _sfc_main$c as MNumberRange, _sfc_main$v as MPanel, _sfc_main$b as MRadioGroup, _sfc_main$t as MRow, _sfc_main$a as MSelect, _sfc_main$9 as MSwitch, _sfc_main$2 as MTable, _sfc_main$r as MTabs, _sfc_main$8 as MText, _sfc_main$7 as MTextarea, _sfc_main$6 as MTime, _sfc_main$5 as MTimerange, createForm, createValues, datetimeFormatter, index as default, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange, useAddField };
+export { _sfc_main$q as MCascader, _sfc_main$p as MCheckbox, _sfc_main$o as MCheckboxGroup, _sfc_main$n as MColorPicker, _sfc_main$A as MContainer, _sfc_main$m as MDate, _sfc_main$k as MDateTime, _sfc_main$l as MDaterange, _sfc_main$j as MDisplay, _sfc_main$i as MDynamicField, _sfc_main$z as MFieldset, _sfc_main$y as MFlexLayout, _sfc_main$g as MForm, _sfc_main as MFormBox, _sfc_main$f as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$w as MGroupList, _sfc_main$h as MHidden, _sfc_main$e as MLink, _sfc_main$d as MNumber, _sfc_main$c as MNumberRange, _sfc_main$v as MPanel, _sfc_main$b as MRadioGroup, _sfc_main$t as MRow, _sfc_main$a as MSelect, _sfc_main$9 as MSwitch, _sfc_main$2 as MTable, _sfc_main$r as MTabs, _sfc_main$8 as MText, _sfc_main$7 as MTextarea, _sfc_main$6 as MTime, _sfc_main$5 as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, index as default, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange, useAddField };

package/dist/tmagic-form.umd.cjs

@@ -1695,7 +1695,7 @@
   var Promise$1 = getNative(root, 'Promise');
 
   /* Built-in method references that are verified to be native. */
-  var Set = getNative(root, 'Set');
+  var Set$1 = getNative(root, 'Set');
 
   /** `Object#toString` result references. */
   var mapTag$5 = '[object Map]',
@@ -1710,7 +1710,7 @@
   var dataViewCtorString = toSource(DataView),
       mapCtorString = toSource(Map$1),
       promiseCtorString = toSource(Promise$1),
-      setCtorString = toSource(Set),
+      setCtorString = toSource(Set$1),
       weakMapCtorString = toSource(WeakMap);
 
   /**
@@ -1726,7 +1726,7 @@
   if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag$3) ||
       (Map$1 && getTag(new Map$1) != mapTag$5) ||
       (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-      (Set && getTag(new Set) != setTag$5) ||
+      (Set$1 && getTag(new Set$1) != setTag$5) ||
       (WeakMap && getTag(new WeakMap) != weakMapTag$1)) {
     getTag = function(value) {
       var result = baseGetTag(value),
@@ -2939,14 +2939,23 @@
     return baseIsEqual(value, other);
   }
 
-  const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
+  const TABLE_SELECT_TYPES = /* @__PURE__ */ new Set(["table-select", "tableSelect"]);
+  const isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
     if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
       asyncLoad.name = name;
       value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
     }
   };
-  const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
+  const MULTIPLE_VALUE_TYPES = /* @__PURE__ */ new Set([
+    "checkbox-group",
+    "checkboxGroup",
+    "table",
+    "cascader",
+    "group-list",
+    "groupList"
+  ]);
+  const isMultipleValue = (type) => typeof type === "string" && MULTIPLE_VALUE_TYPES.has(type);
   const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
     if (Array.isArray(initValue2[name])) {
       value[name] = initValue2[name].map((v, index) => createValues(mForm, items, v, value[name]?.[index]));
@@ -2980,22 +2989,18 @@
     const { names } = item;
     const { type, name } = item;
     if (isTableSelect(type) && name) {
-      value[name] = initValue2[name] || "";
+      value[name] = initValue2[name] ?? "";
       return value;
     }
     asyncLoadConfig(value, initValue2, item);
     if (name && !items && typeof initValue2?.[name] !== "undefined") {
       if (typeof value[name] === "undefined") {
-        if (type === "number") {
-          value[name] = Number(initValue2[name]);
-        } else {
-          value[name] = typeof initValue2[name] === "object" ? initValue2[name] : initValue2[name];
-        }
+        value[name] = type === "number" ? Number(initValue2[name]) : initValue2[name];
       }
       return value;
     }
     if (names) {
-      return names.forEach((n) => value[n] = initValue2[n] || "");
+      return names.forEach((n) => value[n] = initValue2[n] ?? "");
     }
     if (!name) {
       return createValues(mForm, items, initValue2, value);
@@ -3021,7 +3026,7 @@
     }
     return value;
   };
-  const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }) {
+  const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple, names }) {
     if (typeof defaultValue === "function") {
       return defaultValue(mForm);
     }
@@ -3040,15 +3045,18 @@
     if (multiple || type === "number-range") {
       return [];
     }
+    if (type === "daterange" && !names) {
+      return [];
+    }
     return "";
   };
   const filterFunction = (mForm, config, props) => {
     if (typeof config === "function") {
       return config(mForm, {
-        values: mForm?.initValues || {},
-        model: props.model,
-        parent: mForm?.parentValues || {},
-        formValue: mForm?.values || props.model,
+        values: vue.readonly(mForm?.initValues || {}),
+        model: vue.readonly(props.model),
+        parent: vue.readonly(mForm?.parentValues || {}),
+        formValue: vue.readonly(mForm?.values || props.model),
         prop: props.prop,
         config: props.config,
         index: props.index,
@@ -3117,7 +3125,7 @@
       let time;
       if (["x", "timestamp"].includes(format)) {
         time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-      } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+      } else if (typeof v === "string" && v.includes("Z") || v instanceof Date) {
         dayjs.extend(utc);
         time = dayjs(v).utcOffset(8).format(format);
       } else {
@@ -3130,9 +3138,10 @@
     }
     return defaultValue;
   };
-  const getDataByPage = (data = [], pagecontext, pagesize) => data.filter(
-    (item, index) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize
-  );
+  const getDataByPage = (data = [], pagecontext, pagesize) => {
+    const start = pagecontext * pagesize;
+    return data.slice(start, start + pagesize);
+  };
   const sortArray = (data, newIndex, oldIndex, sortKey) => {
     if (newIndex === oldIndex) {
       return data;
@@ -3140,7 +3149,8 @@
     if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
       return data;
     }
-    const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+    const item = data[oldIndex];
+    const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
     if (sortKey) {
       for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
         newData[v][sortKey] = i;
@@ -3150,10 +3160,22 @@
   };
   const sortChange = (data, { prop, order }) => {
     if (order === "ascending") {
-      data = data.sort((a, b) => a[prop] - b[prop]);
+      data.sort((a, b) => a[prop] - b[prop]);
     } else if (order === "descending") {
-      data = data.sort((a, b) => b[prop] - a[prop]);
+      data.sort((a, b) => b[prop] - a[prop]);
+    }
+  };
+  const createObjectProp = (prop, key, name) => {
+    if (prop === "") {
+      return key;
+    }
+    const itemPath = `${prop}`.split(".");
+    if (name) {
+      if (`${itemPath[itemPath.length - 1]}` === `${name}`) {
+        return `${[...itemPath.slice(0, -1), key].join(".")}`;
+      }
     }
+    return `${[...itemPath, key].join(".")}`;
   };
 
   const _hoisted_1$e = {
@@ -3393,11 +3415,7 @@
           value = filterHandler(filter, v);
           if (typeof onChange === "function") {
             const setModel = (key2, value2) => {
-              if (props.config.name) {
-                newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key2), value: value2 });
-              } else {
-                newChangeRecords.push({ propPath: itemProp.value, value: value2 });
-              }
+              newChangeRecords.push({ propPath: createObjectProp(itemProp.value, key2, props.config.name), value: value2 });
             };
             const setFormValue = (key2, value2) => {
               newChangeRecords.push({ propPath: key2, value: value2 });
@@ -5559,15 +5577,22 @@
     },
     setup(__props) {
       const props = __props;
+      const mForm = vue.inject("mForm");
       if (props.config.initValue && props.model) {
         props.model[props.name] = props.config.initValue;
       }
+      const text = vue.computed(() => {
+        if (props.config.displayText) {
+          return filterFunction(mForm, props.config.displayText, props);
+        }
+        return props.model[props.name];
+      });
       useAddField(props.prop);
       return (_ctx, _cache) => {
         return __props.model ? (vue.openBlock(), vue.createElementBlock(
           "span",
           _hoisted_1$8,
-          vue.toDisplayString(__props.model[__props.name]),
+          vue.toDisplayString(text.value),
           1
           /* TEXT */
         )) : vue.createCommentVNode("v-if", true);
@@ -8836,6 +8861,7 @@
   exports.MTime = _sfc_main$6;
   exports.MTimerange = _sfc_main$5;
   exports.createForm = createForm;
+  exports.createObjectProp = createObjectProp;
   exports.createValues = createValues;
   exports.datetimeFormatter = datetimeFormatter;
   exports.default = index;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.4",
+  "version": "1.7.6",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,9 +51,9 @@
   "peerDependencies": {
     "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.4",
-    "@tmagic/form-schema": "1.7.4",
-    "@tmagic/utils": "1.7.4"
+    "@tmagic/utils": "1.7.6",
+    "@tmagic/form-schema": "1.7.6",
+    "@tmagic/design": "1.7.6"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -180,7 +180,7 @@ import type {
   FormValue,
   ToolTipConfigType,
 } from '../schema';
-import { display as displayFunction, filterFunction, getRules } from '../utils/form';
+import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 import FormLabel from './FormLabel.vue';
 
@@ -416,11 +416,7 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
 
     if (typeof onChange === 'function') {
       const setModel = (key: string, value: any) => {
-        if (props.config.name) {
-          newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
-        } else {
-          newChangeRecords.push({ propPath: itemProp.value, value });
-        }
+        newChangeRecords.push({ propPath: createObjectProp(itemProp.value, key, props.config.name), value });
       };
 
       const setFormValue = (key: string, value: any) => {

package/src/fields/Display.vue

@@ -1,9 +1,12 @@
 <template>
-  <span v-if="model">{{ model[name] }}</span>
+  <span v-if="model">{{ text }}</span>
 </template>
 
 <script setup lang="ts">
-import type { DisplayConfig, FieldProps } from '../schema';
+import { computed, inject } from 'vue';
+
+import type { DisplayConfig, FieldProps, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -12,9 +15,19 @@ defineOptions({
 
 const props = defineProps<FieldProps<DisplayConfig>>();
 
+const mForm = inject<FormState | undefined>('mForm');
+
 if (props.config.initValue && props.model) {
   props.model[props.name] = props.config.initValue;
 }
 
+const text = computed(() => {
+  if (props.config.displayText) {
+    return filterFunction<string>(mForm, props.config.displayText, props);
+  }
+
+  return props.model[props.name];
+});
+
 useAddField(props.prop);
 </script>

package/src/utils/form.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { readonly } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
@@ -42,10 +43,11 @@ interface DefaultItem {
   type: string;
   filter: string;
   multiple: boolean;
+  names?: string[];
 }
 
-const isTableSelect = (type?: string | TypeFunction) =>
-  typeof type === 'string' && ['table-select', 'tableSelect'].includes(type);
+const TABLE_SELECT_TYPES = new Set(['table-select', 'tableSelect']);
+const isTableSelect = (type?: string | TypeFunction) => typeof type === 'string' && TABLE_SELECT_TYPES.has(type);
 
 const asyncLoadConfig = (value: FormValue, initValue: FormValue, { asyncLoad, name, type }: HtmlField) => {
   // 富文本配置了异步加载
@@ -55,9 +57,15 @@ const asyncLoadConfig = (value: FormValue, initValue: FormValue, { asyncLoad, na
   }
 };
 
-const isMultipleValue = (type?: string | TypeFunction) =>
-  typeof type === 'string' &&
-  ['checkbox-group', 'checkboxGroup', 'table', 'cascader', 'group-list', 'groupList'].includes(type);
+const MULTIPLE_VALUE_TYPES = new Set([
+  'checkbox-group',
+  'checkboxGroup',
+  'table',
+  'cascader',
+  'group-list',
+  'groupList',
+]);
+const isMultipleValue = (type?: string | TypeFunction) => typeof type === 'string' && MULTIPLE_VALUE_TYPES.has(type);
 
 const initItemsValue = (
   mForm: FormState | undefined,
@@ -113,7 +121,7 @@ const initValueItem = function (
   const { type, name } = item as ChildConfig;
 
   if (isTableSelect(type) && name) {
-    value[name] = initValue[name] || '';
+    value[name] = initValue[name] ?? '';
     return value;
   }
 
@@ -122,18 +130,14 @@ const initValueItem = function (
   // 这种情况比较多，提前结束
   if (name && !items && typeof initValue?.[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
-      if (type === 'number') {
-        value[name] = Number(initValue[name]);
-      } else {
-        value[name] = typeof initValue[name] === 'object' ? initValue[name] : initValue[name];
-      }
+      value[name] = type === 'number' ? Number(initValue[name]) : initValue[name];
     }
 
     return value;
   }
 
   if (names) {
-    return names.forEach((n: string) => (value[n] = initValue[n] || ''));
+    return names.forEach((n: string) => (value[n] = initValue[n] ?? ''));
   }
 
   if (!name) {
@@ -173,7 +177,10 @@ export const createValues = function (
   return value;
 };
 
-const getDefaultValue = function (mForm: FormState | undefined, { defaultValue, type, filter, multiple }: DefaultItem) {
+const getDefaultValue = function (
+  mForm: FormState | undefined,
+  { defaultValue, type, filter, multiple, names }: DefaultItem,
+) {
   if (typeof defaultValue === 'function') {
     return defaultValue(mForm);
   }
@@ -199,6 +206,10 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
     return [];
   }
 
+  if (type === 'daterange' && !names) {
+    return [];
+  }
+
   return '';
 };
 
@@ -209,10 +220,10 @@ export const filterFunction = <T = any>(
 ) => {
   if (typeof config === 'function') {
     return (config as FilterFunction<T>)(mForm, {
-      values: mForm?.initValues || {},
-      model: props.model,
-      parent: mForm?.parentValues || {},
-      formValue: mForm?.values || props.model,
+      values: readonly(mForm?.initValues || {}),
+      model: readonly(props.model),
+      parent: readonly(mForm?.parentValues || {}),
+      formValue: readonly(mForm?.values || props.model),
       prop: props.prop,
       config: props.config,
       index: props.index,
@@ -304,7 +315,8 @@ export const datetimeFormatter = (
     let time: string | number;
     if (['x', 'timestamp'].includes(format)) {
       time = dayjs(Number.isNaN(Number(v)) ? v : Number(v)).valueOf();
-    } else if ((typeof v === 'string' && v.includes('Z')) || v.constructor === Date) {
+    } else if ((typeof v === 'string' && v.includes('Z')) || v instanceof Date) {
+      // dayjs.extend 内部有防重复机制 (plugin.$i)，无需额外判断
       dayjs.extend(utc);
       // UTC字符串时间或Date对象格式化为北京时间
       time = dayjs(v).utcOffset(8).format(format);
@@ -320,10 +332,10 @@ export const datetimeFormatter = (
   return defaultValue;
 };
 
-export const getDataByPage = (data: any[] = [], pagecontext: number, pagesize: number) =>
-  data.filter(
-    (item: any, index: number) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize,
-  );
+export const getDataByPage = (data: any[] = [], pagecontext: number, pagesize: number) => {
+  const start = pagecontext * pagesize;
+  return data.slice(start, start + pagesize);
+};
 
 export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortKey?: string) => {
   if (newIndex === oldIndex) {
@@ -334,7 +346,9 @@ export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortK
     return data;
   }
 
-  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+  // 先取出要移动的元素，再使用 toSpliced 避免修改原数组
+  const item = data[oldIndex];
+  const newData = data.toSpliced(oldIndex, 1).toSpliced(newIndex, 0, item);
 
   if (sortKey) {
     for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
@@ -347,8 +361,23 @@ export const sortArray = (data: any[], newIndex: number, oldIndex: number, sortK
 
 export const sortChange = (data: any[], { prop, order }: SortProp) => {
   if (order === 'ascending') {
-    data = data.sort((a: any, b: any) => a[prop] - b[prop]);
+    data.sort((a: any, b: any) => a[prop] - b[prop]);
   } else if (order === 'descending') {
-    data = data.sort((a: any, b: any) => b[prop] - a[prop]);
+    data.sort((a: any, b: any) => b[prop] - a[prop]);
+  }
+};
+
+export const createObjectProp = (prop: string, key: string, name?: string | number) => {
+  if (prop === '') {
+    return key;
+  }
+
+  const itemPath = `${prop}`.split('.');
+
+  if (name) {
+    if (`${itemPath[itemPath.length - 1]}` === `${name}`) {
+      return `${[...itemPath.slice(0, -1), key].join('.')}`;
+    }
   }
+  return `${[...itemPath, key].join('.')}`;
 };

package/types/index.d.ts

@@ -31,6 +31,7 @@ declare const datetimeFormatter: (v: string | Date, defaultValue?: string, forma
 declare const getDataByPage: (data: any[] | undefined, pagecontext: number, pagesize: number) => any[];
 declare const sortArray: (data: any[], newIndex: number, oldIndex: number, sortKey?: string) => any[];
 declare const sortChange: (data: any[], { prop, order }: SortProp) => void;
+declare const createObjectProp: (prop: string, key: string, name?: string | number) => string;
 
 declare const useAddField: (prop?: string) => void;
 
@@ -1330,5 +1331,5 @@ declare const _default: {
     install(app: App, opt?: FormInstallOptions): void;
 };
 
-export { _default$2 as MCascader, _default$c as MCheckbox, _default$7 as MCheckboxGroup, _default$8 as MColorPicker, _default$s as MContainer, _default$f as MDate, _default$e as MDateTime, _default$a as MDaterange, _default$5 as MDisplay, _default$1 as MDynamicField, _default$r as MFieldset, _default$q as MFlexLayout, _default$w as MForm, _default$t as MFormBox, _default$v as MFormDialog, _default$u as MFormDrawer, _default$l as MGroupList, _default$g as MHidden, _default$4 as MLink, _default$j as MNumber, _default$i as MNumberRange, _default$p as MPanel, _default$6 as MRadioGroup, _default$o as MRow, _default$3 as MSelect, _default$b as MSwitch, _default$m as MTable, _default$n as MTabs, _default$k as MText, _default$h as MTextarea, _default$d as MTime, _default$9 as MTimerange, createForm, createValues, datetimeFormatter, _default as default, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange, useAddField };
+export { _default$2 as MCascader, _default$c as MCheckbox, _default$7 as MCheckboxGroup, _default$8 as MColorPicker, _default$s as MContainer, _default$f as MDate, _default$e as MDateTime, _default$a as MDaterange, _default$5 as MDisplay, _default$1 as MDynamicField, _default$r as MFieldset, _default$q as MFlexLayout, _default$w as MForm, _default$t as MFormBox, _default$v as MFormDialog, _default$u as MFormDrawer, _default$l as MGroupList, _default$g as MHidden, _default$4 as MLink, _default$j as MNumber, _default$i as MNumberRange, _default$p as MPanel, _default$6 as MRadioGroup, _default$o as MRow, _default$3 as MSelect, _default$b as MSwitch, _default$m as MTable, _default$n as MTabs, _default$k as MText, _default$h as MTextarea, _default$d as MTime, _default$9 as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, _default as default, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange, useAddField };
 export type { ChangeRecord, ContainerChangeEventData, FormInstallOptions, ValidateError };