@tmagic/form 1.4.16 → 1.4.18

package/dist/style.css

@@ -46,10 +46,10 @@
 .m-form .el-tabs {
   margin-bottom: 10px;
 }
-.m-form .el-form-item.hidden > .el-form-item__label {
+.m-form .el-form-item.tmagic-form-hidden > .el-form-item__label {
   display: none;
 }
-.m-form .t-form__item.hidden > .t-form__label {
+.m-form .t-form__item.tmagic-form-hidden > .t-form__label {
   display: none;
 }
 

package/dist/tmagic-form.js

@@ -165,7 +165,7 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-const _hoisted_1$d = ["id", "data-magic-id"];
+const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
 const _hoisted_2$8 = ["innerHTML", "title"];
 const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
@@ -319,8 +319,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_Container = resolveComponent("Container", true);
       return _ctx.config ? (openBlock(), createElementBlock("div", {
         key: 0,
-        id: _ctx.config.id,
-        "data-magic-id": _ctx.config.id,
+        "data-tmagic-id": _ctx.config.id,
+        "data-tmagic-form-item-prop": itemProp.value,
         style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
         class: normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
       }, [
@@ -349,7 +349,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
             rules: rule.value
@@ -422,7 +422,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         ], 64)) : type.value && display$1.value && showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
             rules: rule.value
@@ -490,7 +490,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           })) : createCommentVNode("", true),
           createVNode(unref(TMagicFormItem), {
             style: normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-            class: normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+            class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
             rules: rule.value
@@ -2455,7 +2455,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     useAddField(props.prop);
-    props.model[props.name] = datetimeFormatter(props.model[props.name], "");
+    props.model[props.name] = datetimeFormatter(props.model[props.name], "", "YYYY/MM/DD");
     const changeHandler = (v) => {
       emit("change", v);
     };
@@ -2467,8 +2467,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         size: _ctx.size,
         placeholder: _ctx.config.placeholder,
         disabled: _ctx.disabled,
-        format: _ctx.config.format,
-        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+        format: _ctx.config.format || "YYYY/MM/DD",
+        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD",
         onChange: changeHandler
       }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
     };
@@ -2532,7 +2532,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           return;
         }
         if (Array.isArray(v)) {
-          props.model[item] = datetimeFormatter(v[index]?.toString(), "");
+          props.model[item] = datetimeFormatter(
+            v[index]?.toString(),
+            "",
+            props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+          );
         } else {
           props.model[item] = void 0;
         }
@@ -2544,7 +2548,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         emit(
           "change",
           value2.map((item) => {
-            if (item) return datetimeFormatter(item, "");
+            if (item) return datetimeFormatter(item, "", props.config.valueFormat || "YYYY/MM/DD HH:mm:ss");
             return void 0;
           })
         );
@@ -2567,8 +2571,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         "unlink-panels": true,
         disabled: _ctx.disabled,
         "default-time": _ctx.config.defaultTime,
+        "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+        "date-format": _ctx.config.dateFormat || "YYYY/MM/DD",
+        "time-format": _ctx.config.timeFormat || "HH:mm:ss",
         onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+      }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
     };
   }
 });
@@ -2599,7 +2606,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       if (value === "Invalid Date") {
         props.model[props.name] = "";
       } else {
-        props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+        props.model[props.name] = datetimeFormatter(
+          props.model[props.name],
+          "",
+          props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+        );
       }
     }
     const changeHandler = (v) => {
@@ -4164,7 +4175,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           return;
         }
         if (Array.isArray(v)) {
-          props.model[item] = datetimeFormatter(v[index]?.toString(), "");
+          props.model[item] = v[index];
         } else {
           props.model[item] = void 0;
         }

package/dist/tmagic-form.umd.cjs

@@ -164,7 +164,7 @@
     return valuesTmp || {};
   };
 
-  const _hoisted_1$d = ["id", "data-magic-id"];
+  const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
   const _hoisted_2$8 = ["innerHTML", "title"];
   const _hoisted_3$5 = ["innerHTML"];
   const _hoisted_4$4 = ["innerHTML"];
@@ -318,8 +318,8 @@
         const _component_Container = vue.resolveComponent("Container", true);
         return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          id: _ctx.config.id,
-          "data-magic-id": _ctx.config.id,
+          "data-tmagic-id": _ctx.config.id,
+          "data-tmagic-form-item-prop": itemProp.value,
           style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
           class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
         }, [
@@ -348,7 +348,7 @@
           }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : type.value && display$1.value && !showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -421,7 +421,7 @@
           ], 64)) : type.value && display$1.value && showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -489,7 +489,7 @@
             })) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -2454,7 +2454,7 @@
       const props = __props;
       const emit = __emit;
       useAddField(props.prop);
-      props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "");
+      props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "", "YYYY/MM/DD");
       const changeHandler = (v) => {
         emit("change", v);
       };
@@ -2466,8 +2466,8 @@
           size: _ctx.size,
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
-          format: _ctx.config.format,
-          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          format: _ctx.config.format || "YYYY/MM/DD",
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD",
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
       };
@@ -2531,7 +2531,11 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = utils.datetimeFormatter(
+              v[index]?.toString(),
+              "",
+              props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+            );
           } else {
             props.model[item] = void 0;
           }
@@ -2543,7 +2547,7 @@
           emit(
             "change",
             value2.map((item) => {
-              if (item) return utils.datetimeFormatter(item, "");
+              if (item) return utils.datetimeFormatter(item, "", props.config.valueFormat || "YYYY/MM/DD HH:mm:ss");
               return void 0;
             })
           );
@@ -2566,8 +2570,11 @@
           "unlink-panels": true,
           disabled: _ctx.disabled,
           "default-time": _ctx.config.defaultTime,
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          "date-format": _ctx.config.dateFormat || "YYYY/MM/DD",
+          "time-format": _ctx.config.timeFormat || "HH:mm:ss",
           onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+        }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
       };
     }
   });
@@ -2598,7 +2605,11 @@
         if (value === "Invalid Date") {
           props.model[props.name] = "";
         } else {
-          props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+          props.model[props.name] = utils.datetimeFormatter(
+            props.model[props.name],
+            "",
+            props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+          );
         }
       }
       const changeHandler = (v) => {
@@ -4163,7 +4174,7 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = v[index];
           } else {
             props.model[item] = void 0;
           }

package/package.json

@@ -1,8 +1,9 @@
 {
-  "version": "1.4.16",
+  "version": "1.4.18",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
+    "dist/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-form.umd.cjs",
@@ -54,8 +55,8 @@
   "peerDependencies": {
     "vue": "^3.4.35",
     "typescript": "*",
-    "@tmagic/utils": "1.4.16",
-    "@tmagic/design": "1.4.16"
+    "@tmagic/design": "1.4.18",
+    "@tmagic/utils": "1.4.18"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     v-if="config"
-    :id="config.id"
-    :data-magic-id="config.id"
+    :data-tmagic-id="config.id"
+    :data-tmagic-form-item-prop="itemProp"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
     :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >
@@ -37,7 +37,7 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -93,7 +93,7 @@
       <!-- 上次内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
@@ -142,7 +142,7 @@
       <!-- 当前内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
+        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"

package/src/fields/Date.vue

@@ -5,8 +5,8 @@
     :size="size"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    :format="config.format"
-    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :format="config.format || 'YYYY/MM/DD'"
+    :value-format="config.valueFormat || 'YYYY/MM/DD'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '');
+props.model[props.name] = datetimeFormatter(props.model[props.name], '', 'YYYY/MM/DD');
 
 const changeHandler = (v: string) => {
   emit('change', v);

package/src/fields/DateTime.vue

@@ -37,7 +37,11 @@ if (props.model) {
   if (value === 'Invalid Date') {
     props.model[props.name] = '';
   } else {
-    props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat);
+    props.model[props.name] = datetimeFormatter(
+      props.model[props.name],
+      '',
+      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
+    );
   }
 }
 

package/src/fields/Daterange.vue

@@ -9,6 +9,9 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
+    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
+    :date-format="config.dateFormat || 'YYYY/MM/DD'"
+    :time-format="config.timeFormat || 'HH:mm:ss'"
     @change="changeHandler"
   ></TMagicDatePicker>
 </template>
@@ -71,7 +74,11 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = datetimeFormatter(
+        v[index]?.toString(),
+        '',
+        props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
+      );
     } else {
       props.model[item] = undefined;
     }
@@ -85,7 +92,7 @@ const changeHandler = (v: Date[]) => {
     emit(
       'change',
       value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '');
+        if (item) return datetimeFormatter(item, '', props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss');
         return undefined;
       }),
     );

package/src/fields/Timerange.vue

@@ -17,7 +17,6 @@
 import { ref, watch } from 'vue';
 
 import { TMagicTimePicker } from '@tmagic/design';
-import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
 import { useAddField } from '../utils/useAddField';
@@ -59,7 +58,7 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+      props.model[item] = v[index];
     } else {
       props.model[item] = undefined;
     }

package/src/schema.ts

@@ -296,6 +296,9 @@ export interface DaterangeConfig extends FormItem {
   type: 'daterange';
   defaultTime?: Date[];
   names?: string[];
+  valueFormat?: string;
+  dateFormat?: string;
+  timeFormat?: string;
 }
 
 /**

package/src/theme/form.scss

@@ -29,13 +29,13 @@
     margin-bottom: 10px;
   }
 
-  .el-form-item.hidden {
+  .el-form-item.tmagic-form-hidden {
     > .el-form-item__label {
       display: none;
     }
   }
 
-  .t-form__item.hidden {
+  .t-form__item.tmagic-form-hidden {
     > .t-form__label {
       display: none;
     }

package/types/schema.d.ts

@@ -229,6 +229,9 @@ export interface DaterangeConfig extends FormItem {
     type: 'daterange';
     defaultTime?: Date[];
     names?: string[];
+    valueFormat?: string;
+    dateFormat?: string;
+    timeFormat?: string;
 }
 /**
  * html编辑器