@tmagic/form 1.7.5 → 1.7.7

package/dist/tmagic-form.js

@@ -235,6 +235,18 @@ const sortChange = (data, { prop, order }) => {
     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 = {
   key: 0,
@@ -473,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 });
@@ -4552,44 +4560,81 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     useAddField(props.prop);
     const { names } = props.config;
     const value = ref([]);
-    if (props.model !== void 0 && names?.length) {
-      watch(
-        [() => props.model[names[0]], () => props.model[names[1]]],
-        ([start, end], [preStart, preEnd]) => {
-          if (!value.value) {
-            value.value = [];
+    const getFullDatetime = (item) => item ? `${dayjs().format("YYYY/MM/DD")} ${item}` : "";
+    const getFormat = () => `YYYY/MM/DD ${props.config.valueFormat || "HH:mm:ss"}`;
+    const timeFormatter = (time, format) => datetimeFormatter(getFullDatetime(time), "", format).substring(11);
+    if (props.model !== void 0) {
+      if (names?.length) {
+        const unWatch = watch(
+          [() => props.model[names[0]], () => props.model[names[1]]],
+          ([start, end], [preStart, preEnd]) => {
+            if (!value.value) {
+              value.value = [];
+            }
+            const format = getFormat();
+            if (!start || !end) value.value = [];
+            if (start !== preStart) value.value[0] = timeFormatter(start, format);
+            if (end !== preEnd) value.value[1] = timeFormatter(end, format);
+          },
+          {
+            immediate: true
           }
-          if (!start || !end) value.value = [];
-          if (start !== preStart) value.value[0] = start;
-          if (end !== preEnd) value.value[1] = end;
-        },
-        {
-          immediate: true
-        }
-      );
+        );
+        onUnmounted(() => {
+          unWatch();
+        });
+      } else if (props.name) {
+        const unWatch = watch(
+          () => props.model[props.name],
+          (v = []) => {
+            if (Array.isArray(v)) {
+              value.value = v.map((item) => item ? timeFormatter(item, getFormat()) : void 0);
+            } else {
+              value.value = [];
+            }
+          },
+          {
+            immediate: true
+          }
+        );
+        onUnmounted(() => {
+          unWatch();
+        });
+      }
     }
-    const setValue = (v) => {
-      names?.forEach((item, index) => {
-        if (!props.model) {
-          return;
-        }
-        if (Array.isArray(v)) {
-          props.model[item] = v[index];
-        } else {
-          props.model[item] = void 0;
-        }
-      });
-    };
     const changeHandler = (v) => {
       const value2 = v || [];
-      if (names?.length) {
-        setValue(value2);
+      if (props.name) {
+        emit("change", value2);
+      } else {
+        if (props.config.names?.length) {
+          const newChangeRecords = [];
+          props.config.names.forEach((item, index) => {
+            if (!props.model) {
+              return;
+            }
+            if (Array.isArray(v)) {
+              newChangeRecords.push({
+                propPath: props.prop ? `${props.prop}.${item}` : item,
+                value: v[index]
+              });
+            } else {
+              newChangeRecords.push({
+                propPath: props.prop ? `${props.prop}.${item}` : item,
+                value: void 0
+              });
+            }
+          });
+          emit("change", props.model, {
+            changeRecords: newChangeRecords
+          });
+        }
       }
-      emit("change", value2);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicTimePicker), {
-        "model-value": value.value,
+        modelValue: value.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
         "is-range": "",
         "range-separator": "-",
         "start-placeholder": "开始时间",
@@ -4598,8 +4643,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "unlink-panels": true,
         disabled: __props.disabled,
         "default-time": __props.config.defaultTime,
-        "onUpdate:modelValue": changeHandler
-      }, null, 8, ["model-value", "size", "disabled", "default-time"]);
+        format: __props.config.format || "HH:mm:ss",
+        "value-format": __props.config.valueFormat || "HH:mm:ss",
+        onChange: changeHandler
+      }, null, 8, ["modelValue", "size", "disabled", "default-time", "format", "value-format"]);
     };
   }
 });
@@ -5890,4 +5937,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

@@ -3165,6 +3165,18 @@
       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 = {
     key: 0,
@@ -3403,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 });
@@ -7482,44 +7490,81 @@
       useAddField(props.prop);
       const { names } = props.config;
       const value = vue.ref([]);
-      if (props.model !== void 0 && names?.length) {
-        vue.watch(
-          [() => props.model[names[0]], () => props.model[names[1]]],
-          ([start, end], [preStart, preEnd]) => {
-            if (!value.value) {
-              value.value = [];
+      const getFullDatetime = (item) => item ? `${dayjs().format("YYYY/MM/DD")} ${item}` : "";
+      const getFormat = () => `YYYY/MM/DD ${props.config.valueFormat || "HH:mm:ss"}`;
+      const timeFormatter = (time, format) => datetimeFormatter(getFullDatetime(time), "", format).substring(11);
+      if (props.model !== void 0) {
+        if (names?.length) {
+          const unWatch = vue.watch(
+            [() => props.model[names[0]], () => props.model[names[1]]],
+            ([start, end], [preStart, preEnd]) => {
+              if (!value.value) {
+                value.value = [];
+              }
+              const format = getFormat();
+              if (!start || !end) value.value = [];
+              if (start !== preStart) value.value[0] = timeFormatter(start, format);
+              if (end !== preEnd) value.value[1] = timeFormatter(end, format);
+            },
+            {
+              immediate: true
             }
-            if (!start || !end) value.value = [];
-            if (start !== preStart) value.value[0] = start;
-            if (end !== preEnd) value.value[1] = end;
-          },
-          {
-            immediate: true
-          }
-        );
+          );
+          vue.onUnmounted(() => {
+            unWatch();
+          });
+        } else if (props.name) {
+          const unWatch = vue.watch(
+            () => props.model[props.name],
+            (v = []) => {
+              if (Array.isArray(v)) {
+                value.value = v.map((item) => item ? timeFormatter(item, getFormat()) : void 0);
+              } else {
+                value.value = [];
+              }
+            },
+            {
+              immediate: true
+            }
+          );
+          vue.onUnmounted(() => {
+            unWatch();
+          });
+        }
       }
-      const setValue = (v) => {
-        names?.forEach((item, index) => {
-          if (!props.model) {
-            return;
-          }
-          if (Array.isArray(v)) {
-            props.model[item] = v[index];
-          } else {
-            props.model[item] = void 0;
-          }
-        });
-      };
       const changeHandler = (v) => {
         const value2 = v || [];
-        if (names?.length) {
-          setValue(value2);
+        if (props.name) {
+          emit("change", value2);
+        } else {
+          if (props.config.names?.length) {
+            const newChangeRecords = [];
+            props.config.names.forEach((item, index) => {
+              if (!props.model) {
+                return;
+              }
+              if (Array.isArray(v)) {
+                newChangeRecords.push({
+                  propPath: props.prop ? `${props.prop}.${item}` : item,
+                  value: v[index]
+                });
+              } else {
+                newChangeRecords.push({
+                  propPath: props.prop ? `${props.prop}.${item}` : item,
+                  value: void 0
+                });
+              }
+            });
+            emit("change", props.model, {
+              changeRecords: newChangeRecords
+            });
+          }
         }
-        emit("change", value2);
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTimePicker), {
-          "model-value": value.value,
+          modelValue: value.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
           "is-range": "",
           "range-separator": "-",
           "start-placeholder": "开始时间",
@@ -7528,8 +7573,10 @@
           "unlink-panels": true,
           disabled: __props.disabled,
           "default-time": __props.config.defaultTime,
-          "onUpdate:modelValue": changeHandler
-        }, null, 8, ["model-value", "size", "disabled", "default-time"]);
+          format: __props.config.format || "HH:mm:ss",
+          "value-format": __props.config.valueFormat || "HH:mm:ss",
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "disabled", "default-time", "format", "value-format"]);
       };
     }
   });
@@ -8853,6 +8900,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.5",
+  "version": "1.7.7",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -51,9 +51,9 @@
   "peerDependencies": {
     "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.5",
-    "@tmagic/form-schema": "1.7.5",
-    "@tmagic/utils": "1.7.5"
+    "@tmagic/utils": "1.7.7",
+    "@tmagic/design": "1.7.7",
+    "@tmagic/form-schema": "1.7.7"
   },
   "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/Timerange.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicTimePicker
-    :model-value="value"
+    v-model="value"
     is-range
     range-separator="-"
     start-placeholder="开始时间"
@@ -9,16 +9,20 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
-    @update:model-value="changeHandler"
+    :format="config.format || 'HH:mm:ss'"
+    :value-format="config.valueFormat || 'HH:mm:ss'"
+    @change="changeHandler"
   ></TMagicTimePicker>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
 
 import { TMagicTimePicker } from '@tmagic/design';
 
-import type { DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -32,43 +36,83 @@ const emit = defineEmits(['change']);
 useAddField(props.prop);
 
 const { names } = props.config;
-const value = ref<(Date | undefined)[] | null>([]);
+const value = ref<(Date | string | undefined)[] | null>([]);
 
-if (props.model !== undefined && names?.length) {
-  watch(
-    [() => props.model[names[0]], () => props.model[names[1]]],
-    ([start, end], [preStart, preEnd]) => {
-      if (!value.value) {
-        value.value = [];
-      }
-      if (!start || !end) value.value = [];
-      if (start !== preStart) value.value[0] = start;
-      if (end !== preEnd) value.value[1] = end;
-    },
-    {
-      immediate: true,
-    },
-  );
-}
+const getFullDatetime = (item: string) => (item ? `${dayjs().format('YYYY/MM/DD')} ${item}` : '');
+const getFormat = () => `YYYY/MM/DD ${props.config.valueFormat || 'HH:mm:ss'}`;
+const timeFormatter = (time: string, format: string) =>
+  (datetimeFormatter(getFullDatetime(time), '', format) as string).substring(11);
 
-const setValue = (v: Date[] | Date) => {
-  names?.forEach((item, index) => {
-    if (!props.model) {
-      return;
-    }
-    if (Array.isArray(v)) {
-      props.model[item] = v[index];
-    } else {
-      props.model[item] = undefined;
-    }
-  });
-};
+if (props.model !== undefined) {
+  if (names?.length) {
+    const unWatch = watch(
+      [() => props.model[names[0]], () => props.model[names[1]]],
+      ([start, end], [preStart, preEnd]) => {
+        if (!value.value) {
+          value.value = [];
+        }
+
+        const format = getFormat();
+        if (!start || !end) value.value = [];
+        if (start !== preStart) value.value[0] = timeFormatter(start, format);
+        if (end !== preEnd) value.value[1] = timeFormatter(end, format);
+      },
+      {
+        immediate: true,
+      },
+    );
+    onUnmounted(() => {
+      unWatch();
+    });
+  } else if (props.name) {
+    const unWatch = watch(
+      () => props.model[props.name],
+      (v = []) => {
+        if (Array.isArray(v)) {
+          value.value = v.map((item: string) => (item ? timeFormatter(item, getFormat()) : undefined));
+        } else {
+          value.value = [];
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+    onUnmounted(() => {
+      unWatch();
+    });
+  }
+}
 
 const changeHandler = (v: Date[]) => {
   const value = v || [];
-  if (names?.length) {
-    setValue(value);
+
+  if (props.name) {
+    emit('change', value);
+  } else {
+    if (props.config.names?.length) {
+      const newChangeRecords: ChangeRecord[] = [];
+      props.config.names.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: v[index],
+          });
+        } else {
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: undefined,
+          });
+        }
+      });
+
+      emit('change', props.model, {
+        changeRecords: newChangeRecords,
+      });
+    }
   }
-  emit('change', value);
 };
 </script>

package/src/utils/form.ts

@@ -366,3 +366,18 @@ export const sortChange = (data: any[], { prop, order }: SortProp) => {
     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 };