@tmagic/form 1.7.6 → 1.7.7

package/dist/tmagic-form.js

@@ -4560,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": "开始时间",
@@ -4606,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"]);
     };
   }
 });

package/dist/tmagic-form.umd.cjs

@@ -7490,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": "开始时间",
@@ -7536,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"]);
       };
     }
   });

package/package.json

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

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>