matrix_components 2.0.385 → 2.0.387

package/dist/matrix_components.js

@@ -54768,13 +54768,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     useCssVars((_ctx) => ({
-      "v559d034a": customBackgroundColor.value,
-      "v0bb2d35a": gapV.value,
-      "v3c916c9a": superLabelWidth.value,
-      "v0d7e97b8": subLabelWidth.value,
-      "v27948c7e": height.value,
-      "v47dc42cc": labelWidth.value,
-      "v43859357": _ctx.$props.labelColor
+      "d86e963a": customBackgroundColor.value,
+      "v29bb78a1": gapV.value,
+      "v5eeb3be8": superLabelWidth.value,
+      "v4ebdf251": subLabelWidth.value,
+      "aaabad70": height.value,
+      "v6020d25a": labelWidth.value,
+      "v6c180d20": _ctx.$props.labelColor
     }));
     const props = __props;
     const initialValues = ref$1(/* @__PURE__ */ new Map());
@@ -55136,6 +55136,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         for (let colIndex = 0; colIndex < row.length; colIndex++) {
           const item = row[colIndex];
           if (item.key) {
+            const oldValue = deepClone(item.value);
             if (item.defaultValue !== void 0) {
               item.value = deepClone(item.defaultValue);
             } else {
@@ -55152,11 +55153,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             if (item.delValue !== void 0) {
               item.delValue = [];
             }
+            if (JSON.stringify(oldValue) !== JSON.stringify(item.value) && item.events) {
+              if (item.events.change && typeof item.events.change === "function") {
+                setTimeout(() => {
+                  item.events.change(item.value);
+                }, 0);
+              }
+              if (item.events.input && typeof item.events.input === "function") {
+                setTimeout(() => {
+                  item.events.input(item.value);
+                }, 0);
+              }
+            }
           }
           if (item.children && Array.isArray(item.children)) {
             for (let childIndex = 0; childIndex < item.children.length; childIndex++) {
               const child = item.children[childIndex];
               if (child.key) {
+                const oldChildValue = deepClone(child.value);
                 if (child.defaultValue !== void 0) {
                   child.value = deepClone(child.defaultValue);
                 } else {
@@ -55173,6 +55187,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 if (child.delValue !== void 0) {
                   child.delValue = [];
                 }
+                if (JSON.stringify(oldChildValue) !== JSON.stringify(child.value) && child.events) {
+                  if (child.events.change && typeof child.events.change === "function") {
+                    setTimeout(() => {
+                      child.events.change(child.value);
+                    }, 0);
+                  }
+                  if (child.events.input && typeof child.events.input === "function") {
+                    setTimeout(() => {
+                      child.events.input(child.value);
+                    }, 0);
+                  }
+                }
               }
             }
           }
@@ -55184,11 +55210,110 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         initializeDefaultValues(props.rows);
       }
     }
+    function getReadOnlyDisplayValue(rowInfo) {
+      var _a3, _b, _c2, _d, _e, _f;
+      if (!props.readOnly) {
+        return rowInfo.value;
+      }
+      if (rowInfo.component && ((_a3 = rowInfo.params) == null ? void 0 : _a3.options)) {
+        const componentName = (rowInfo.component.name + "").replace("-", "").toLowerCase();
+        if (componentName.indexOf("cascader") !== -1) {
+          return getCascaderDisplayValue(rowInfo);
+        }
+        const isSelectComponent = componentName.indexOf("select") !== -1 || componentName.indexOf("radio") !== -1 || componentName.indexOf("checkbox") !== -1;
+        if (isSelectComponent) {
+          const options = rowInfo.params.options;
+          const valueKey = ((_b = rowInfo.params.props) == null ? void 0 : _b.value) || "value";
+          const labelKey = ((_c2 = rowInfo.params.props) == null ? void 0 : _c2.label) || "label";
+          if (Array.isArray(rowInfo.value)) {
+            const selectedLabels = rowInfo.value.map((val) => {
+              const option = options.find((opt) => opt[valueKey] === val);
+              return option ? option[labelKey] : val;
+            });
+            return selectedLabels.join("，");
+          }
+          const selectedOption = options.find((opt) => opt[valueKey] === rowInfo.value);
+          return selectedOption ? selectedOption[labelKey] : rowInfo.value;
+        }
+      }
+      if (rowInfo.component && rowInfo.component.name && (rowInfo.component.name + "").toLowerCase().indexOf("switch") !== -1) {
+        if (rowInfo.value) {
+          return ((_d = rowInfo.params) == null ? void 0 : _d["active-text"]) || "启用";
+        } else {
+          return ((_e = rowInfo.params) == null ? void 0 : _e["inactive-text"]) || "禁用";
+        }
+      }
+      if (rowInfo.component && rowInfo.component.name && (rowInfo.component.name + "").toLowerCase().indexOf("rate") !== -1) {
+        const max2 = ((_f = rowInfo.params) == null ? void 0 : _f.max) || 5;
+        return `${rowInfo.value || 0}/${max2}`;
+      }
+      if (rowInfo.component && rowInfo.component.name && (rowInfo.component.name + "").toLowerCase().indexOf("slider") !== -1) {
+        if (Array.isArray(rowInfo.value)) {
+          return `${rowInfo.value[0]} - ${rowInfo.value[1]}`;
+        }
+        return rowInfo.value || 0;
+      }
+      if (rowInfo.component && rowInfo.component.name && (rowInfo.component.name + "").toLowerCase().indexOf("colorpicker") !== -1) {
+        return rowInfo.value || "";
+      }
+      return rowInfo.value;
+    }
+    const getComponentValue = computed(() => {
+      return (rowInfo) => {
+        const value = getReadOnlyDisplayValue(rowInfo);
+        return value ?? props.valueEmptyTag ?? "";
+      };
+    });
+    function getCascaderDisplayValue(rowInfo) {
+      var _a3, _b, _c2, _d;
+      if (!rowInfo.value || !((_a3 = rowInfo.params) == null ? void 0 : _a3.options)) {
+        return rowInfo.value;
+      }
+      const options = rowInfo.params.options;
+      const valueKey = ((_b = rowInfo.params.props) == null ? void 0 : _b.value) || "value";
+      const labelKey = ((_c2 = rowInfo.params.props) == null ? void 0 : _c2.label) || "label";
+      const childrenKey = ((_d = rowInfo.params.props) == null ? void 0 : _d.children) || "children";
+      const separator = rowInfo.params.separator || " / ";
+      if (Array.isArray(rowInfo.value)) {
+        const labels = [];
+        let currentOptions = options;
+        for (const value of rowInfo.value) {
+          const currentOption = currentOptions.find((opt) => opt[valueKey] === value);
+          if (!currentOption) {
+            return rowInfo.value.join(separator);
+          }
+          labels.push(currentOption[labelKey]);
+          if (currentOption[childrenKey] && Array.isArray(currentOption[childrenKey])) {
+            currentOptions = currentOption[childrenKey];
+          } else {
+            break;
+          }
+        }
+        return labels.join(separator);
+      }
+      const findOptionInTree = (opts, targetValue) => {
+        for (const option of opts) {
+          if (option[valueKey] === targetValue) {
+            return option[labelKey];
+          }
+          if (option[childrenKey] && Array.isArray(option[childrenKey])) {
+            const result = findOptionInTree(option[childrenKey], targetValue);
+            if (result) {
+              return option[labelKey] + separator + result;
+            }
+          }
+        }
+        return null;
+      };
+      const label = findOptionInTree(options, rowInfo.value);
+      return label || rowInfo.value;
+    }
     __expose({
       getFormNodeByKey,
       getFormKvData,
       resetForm,
-      initDefaultValues
+      initDefaultValues,
+      getReadOnlyDisplayValue
     });
     return (_ctx, _cache) => {
       const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -55324,8 +55449,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_el_tooltip, {
                     "hide-after": 0,
                     "show-after": 500,
-                    disabled: !(__props.readOnly && !rowInfo.readOnlyUseComponent && typeof rowInfo.value === "string"),
-                    content: rowInfo.value || "",
+                    disabled: !(__props.readOnly && !rowInfo.readOnlyUseComponent),
+                    content: getComponentValue.value(rowInfo),
                     placement: "top-start",
                     "popper-class": "detail-view-tooltip"
                   }, {
@@ -55339,7 +55464,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                             props.model.indexOf("table") > -1 ? "model-table" : "",
                             props.model.indexOf("vertical") > -1 ? "vertical" : "horizontal"
                           ])
-                        }, toDisplayString(rowInfo.value ?? __props.valueEmptyTag ?? ""), 3)) : (openBlock(), createElementBlock("span", {
+                        }, toDisplayString(getComponentValue.value(rowInfo)), 3)) : (openBlock(), createElementBlock("span", {
                           key: 1,
                           class: normalizeClass([
                             "detial-row-item-value",
@@ -55469,7 +55594,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NsForm = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e7f01e1e"]]);
+const NsForm = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-99d9d615"]]);
 const _hoisted_1$1 = { class: "title-image-view" };
 const _hoisted_2 = { class: "content-model-title" };
 const _hoisted_3 = { class: "title-text" };