@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/es/packages/components/cascader/src/cascader.vue2.mjs

@@ -1,8 +1,9 @@
-import { defineComponent, inject, ref, computed, provide, watch, nextTick, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, createVNode, unref, withModifiers, createCommentVNode, withCtx } from 'vue';
+import { defineComponent, inject, ref, computed, provide, watch, nextTick, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, vShow, createCommentVNode, renderSlot, createElementVNode, toDisplayString, createVNode, withModifiers, createBlock, Teleport, withCtx, Fragment, renderList, createTextVNode } from 'vue';
 import { ToIcon } from '../../icon/index.mjs';
 import { ToFloat } from '../../float/index.mjs';
-import _sfc_main$1 from './cascader-item.vue2.mjs';
-import { t } from '../../../locale/index.mjs';
+import CascaderItem from './cascader-item.vue.mjs';
+import { langKey, t } from '../../../locale/index.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 import { deepClone } from '../../../utils/util.mjs';
 
 const __default__ = defineComponent({
@@ -21,14 +22,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     labelText: { default: "label" },
     valueText: { default: "value" },
     childrenText: { default: "children" },
-    placeholder: { default: "\u8BF7\u9009\u62E9" },
-    optionWidth: { default: "16em" },
-    optionCol: { default: "" },
+    placeholder: { default: "" },
+    optionWidth: { default: "" },
     data: { default: () => [] },
-    comparable: { type: Boolean, default: false }
+    comparable: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    desc: { default: "" },
+    prefix: { default: "" },
+    showAllLevels: { type: Boolean, default: true },
+    checkedDatas: { default: () => [] },
+    flex: { type: Boolean, default: false }
   },
-  emits: ["change", "update:modelValue"],
+  emits: ["change", "update:modelValue", "update:checkedDatas"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ToFormItem = inject("ToFormItem", {});
     const props = __props;
     const ToForm = inject("ToForm", {});
     const iconValue = ref("unfold");
@@ -39,8 +46,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const $el = ref(null);
     const currentLevel = ref(0);
     const checkedData = ref([]);
+    const optionLevels = ref([data_.value]);
     const valueStore = ref([]);
     const disabled = ref(props.disabled);
+    const errorTip = ref("");
+    const errorType = ref("rule");
     const floatWidth = computed(() => {
       let unit = "em";
       let sArr = [];
@@ -58,22 +68,33 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } else {
           omit = Number(props.optionWidth);
         }
+        return `${(currentLevel.value + 1) * omit}${unit}`;
+      } else {
+        return "";
       }
-      return `${(currentLevel.value + 1) * omit}${unit}`;
     });
     const setClass = computed(() => {
-      const arr = ["to-form-readonly"];
-      if (props.mode) {
-        arr.push(`mode-${props.mode}`);
-      }
-      if (ToForm && (ToForm == null ? void 0 : ToForm.comparable) || props.comparable) {
-        arr.push("to-compare");
-      }
-      if (changed.value) {
-        arr.push("to-cascader-changed");
-      }
-      if (disabled.value || props.disabled) {
-        arr.push("is-disabled");
+      const arr = ["to-disable-target"];
+      if (errorTip.value) {
+        arr.push("to-cascader-mode-line");
+        arr.push("to-cascader-color-danger");
+        arr.push("to-cascader-tip-show");
+      } else {
+        if (props.mode) {
+          arr.push(...getModeClasses(props.mode));
+        }
+        if (ToForm && (ToForm == null ? void 0 : ToForm.comparable) || props.comparable) {
+          arr.push("to-compare");
+        }
+        if (changed.value) {
+          arr.push("to-cascader-changed");
+        }
+        if (disabled.value || props.disabled) {
+          arr.push("is-disabled");
+        }
+        if (!value_.value) {
+          arr.push("is-placeholder");
+        }
       }
       return arr;
     });
@@ -95,19 +116,32 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return false;
       }
     });
+    const validateRequired = computed(() => {
+      if (props.required) {
+        return "true";
+      } else if (ToFormItem && ToFormItem.required) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+    const validateDesc = computed(() => {
+      if (props.desc) {
+        return props.desc;
+      } else if (ToFormItem && ToFormItem.label) {
+        return ToFormItem.label;
+      } else {
+        return "";
+      }
+    });
     provide("pProps", {
-      props,
-      setLevel,
-      close,
-      setParentCheckedByValue,
-      store: data_.value,
-      setViewData
+      props
     });
     watch(
       () => props.modelValue,
       (val) => {
         value_.value = val;
-        if (props.data && props.data.length) {
+        if (props.data) {
           nextTick(() => {
             setLabel();
           });
@@ -115,6 +149,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    watch(
+      () => props.data,
+      (val) => {
+        data_.value = initData(val);
+        checkedData.value = [];
+        optionLevels.value = [data_.value];
+        setLabel();
+      },
+      { deep: true }
+    );
     const emit = __emit;
     function initData(data, levels = 0) {
       let arr = deepClone(data);
@@ -136,7 +180,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       return tem;
     }
     function handleClick() {
+      errorTip.value = "";
       if (!(props.disabled || disabled.value)) {
+        if (iconValue.value === "unfold") {
+          setOptionLevelsByCheckedData();
+        }
         cascaderFloat.value.toggle($el.value);
         iconValue.value = iconValue.value === "unfold" ? "fold" : "unfold";
       }
@@ -146,6 +194,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         valueLabel.value = "";
         resetCheckedData(data_.value);
         checkedData.value = [];
+        optionLevels.value = [data_.value];
         value_.value = "";
         change("");
       }
@@ -153,7 +202,47 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     function setLevel(idx) {
       currentLevel.value = idx;
     }
-    function setParentCheckedByValue(arr, value, level) {
+    function setParentCheckedByValue(value, level) {
+      fixStore(data_.value, value, level);
+    }
+    function getChildren(item) {
+      const children = item[props.childrenText];
+      return Array.isArray(children) ? children : [];
+    }
+    function setOptionLevelsByCheckedData() {
+      const levels = [data_.value];
+      let currentData = data_.value;
+      for (const item of checkedData.value) {
+        const current = currentData.find((k) => k[props.valueText] === item[props.valueText]);
+        if (!current)
+          break;
+        const children = getChildren(current);
+        if (!children.length)
+          break;
+        levels.push(children);
+        currentData = children;
+      }
+      optionLevels.value = levels;
+      setLevel(levels.length - 1);
+    }
+    function handleItemSelect(item) {
+      const level = item.level || 0;
+      const children = getChildren(item);
+      optionLevels.value = optionLevels.value.slice(0, level + 1);
+      setParentCheckedByValue(item[props.valueText], level);
+      if (children.length) {
+        optionLevels.value = [...optionLevels.value, children];
+        setLevel(level + 1);
+        if (props.any) {
+          setViewData();
+        }
+      } else {
+        setLevel(level);
+        setViewData();
+        close();
+      }
+    }
+    function fixStore(arr, value, level) {
       arr.forEach((item) => {
         if (item.level === level) {
           if (item[props.valueText] === value) {
@@ -164,7 +253,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }
         } else {
           if (item[props.childrenText] && item[props.childrenText].length) {
-            setParentCheckedByValue(item[props.childrenText], value, level);
+            fixStore(item[props.childrenText], value, level);
           }
         }
       });
@@ -200,7 +289,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function setViewData() {
       let labelArr = checkedData.value.map((item) => item[props.labelText]);
-      valueLabel.value = labelArr.join(" / ");
+      let leafArr = checkedData.value.map((item) => item.isLeaf);
+      if (props.showAllLevels) {
+        valueLabel.value = labelArr.join(" / ");
+      } else {
+        if (leafArr[leafArr.length - 1]) {
+          valueLabel.value = labelArr[labelArr.length - 1];
+        } else {
+          valueLabel.value = "";
+        }
+      }
       let leafItem = [];
       if (!props.any) {
         leafItem = checkedData.value.filter((item) => item.isLeaf);
@@ -213,29 +311,49 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function close() {
-      cascaderFloat.value.toggle($el.value);
+      cascaderFloat.value.close();
     }
     function afterClose() {
       setLevel(0);
+      iconValue.value = "unfold";
     }
     function change(v) {
-      emit("change", v, checkedData.value);
       emit("update:modelValue", v);
+      emit("change", v, checkedData.value);
     }
     const setLabel = () => {
+      resetCheckedData(data_.value);
       if (value_.value) {
-        valueLabel.value = getLabelPath(value_.value, data_.value);
+        valueLabel.value = getLabelPath(value_.value, data_.value) || value_.value;
+        checkedData.value.forEach((item) => {
+          item.isSelect = true;
+        });
       } else {
+        checkedData.value = [];
         valueLabel.value = props.placeholder;
       }
+      setOptionLevelsByCheckedData();
     };
-    function getLabelPath(value, data, path = []) {
+    function getLabelPath(value, data, path = [], pData = [], syncCheckedData = true) {
       for (const item of data) {
         if (item[props.valueText] === value) {
-          return [...path, item[props.labelText]].join(" / ");
+          let tem = [];
+          if (syncCheckedData) {
+            checkedData.value = [...pData, item];
+          }
+          if (props.showAllLevels) {
+            tem = [...path, item[props.labelText]].join(" / ");
+          } else {
+            if (item.isLeaf) {
+              tem = item[props.labelText];
+            } else {
+              tem = "";
+            }
+          }
+          return tem;
         }
         if (item[props.childrenText] && item[props.childrenText].length) {
-          const result = getLabelPath(value, item[props.childrenText], [...path, item[props.labelText]]);
+          const result = getLabelPath(value, item[props.childrenText], [...path, item[props.labelText]], [...pData, item], syncCheckedData);
           if (result) {
             return result;
           }
@@ -253,65 +371,211 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const setDisabled = (f) => {
       disabled.value = f;
     };
+    const getCheckData = () => {
+      return checkedData.value;
+    };
+    watch(
+      () => checkedData.value,
+      (val) => {
+        emit("update:checkedDatas", val);
+      }
+    );
     __expose({
       compare,
       restore,
       changed,
-      setDisabled
+      setDisabled,
+      errorTip,
+      errorType,
+      getCheckData
     });
     return (_ctx, _cache) => {
       const _component_to_scroll = resolveComponent("to-scroll");
       const _directive_tip = resolveDirective("tip");
+      const _directive_color = resolveDirective("color");
       return withDirectives((openBlock(), createElementBlock("div", {
         ref_key: "$el",
         ref: $el,
+        key: unref(langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
         class: normalizeClass(["to-cascader", setClass.value]),
         style: normalizeStyle(setStyle.value),
+        role: "button",
         onClick: handleClick
       }, [
+        validateRequired.value ? withDirectives((openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "to-validate",
+          req: validateRequired.value,
+          desc: validateDesc.value,
+          value: value_.value ? "true" : ""
+        }, null, 8, ["req", "desc", "value"])), [
+          [vShow, false]
+        ]) : createCommentVNode("v-if", true),
+        _ctx.$slots.prefix ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: "to-cascader-prefix"
+        }, [
+          renderSlot(_ctx.$slots, "prefix")
+        ])) : createCommentVNode("v-if", true),
+        props.prefix ? (openBlock(), createElementBlock("span", {
+          key: 2,
+          class: "to-cascader-prefix-text"
+        }, [
+          createElementVNode(
+            "span",
+            null,
+            toDisplayString(props.prefix),
+            1
+            /* TEXT */
+          )
+        ])) : createCommentVNode("v-if", true),
         createElementVNode("span", { class: "to-cascader-content" }, [
           createElementVNode("span", { class: "to-cascader-value" }, [
-            value_.value ? (openBlock(), createElementBlock("span", { key: 0 }, toDisplayString(valueLabel.value), 1)) : (openBlock(), createElementBlock("span", {
-              key: 1,
-              class: "to-cascader-placeholder"
-            }, toDisplayString(_ctx.placeholder), 1))
+            value_.value ? (openBlock(), createElementBlock(
+              "span",
+              { key: 0 },
+              toDisplayString(valueLabel.value),
+              1
+              /* TEXT */
+            )) : (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 1,
+                class: "to-cascader-placeholder"
+              },
+              toDisplayString(_ctx.placeholder || unref(t)("to.cascader.placeholder")),
+              1
+              /* TEXT */
+            ))
           ])
         ]),
         _ctx.clearable && value_.value ? (openBlock(), createElementBlock("span", {
-          key: 0,
+          key: 3,
           class: "to-cascader-clear"
         }, [
           createVNode(unref(ToIcon), {
             value: "close",
             onClick: withModifiers(handleClear, ["stop"])
           })
-        ])) : createCommentVNode("", true),
+        ])) : createCommentVNode("v-if", true),
         createElementVNode("span", { class: "to-cascader-arrow" }, [
-          createCommentVNode("", true)
+          createCommentVNode("v-if", true)
         ]),
-        createVNode(unref(ToFloat), {
-          ref_key: "cascaderFloat",
-          ref: cascaderFloat,
-          class: "to-cascader-layer",
-          width: floatWidth.value,
-          onClosed: afterClose
-        }, {
-          default: withCtx(() => [
-            !data_.value.length ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              style: { "text-align": "center", "color": "#ccc", "padding": "0 0.3em" }
-            }, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("", true),
-            createVNode(_component_to_scroll, null, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$1, { data: data_.value }, null, 8, ["data"])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["width"])
-      ], 6)), [
-        [_directive_tip, changed.value ? unref(t)("to.common.originalValue", getLabelPath(valueStore.value[0], data_.value)) : ""]
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["to-cascader", setClass.value])
+            },
+            [
+              createVNode(unref(ToFloat), {
+                ref_key: "cascaderFloat",
+                ref: cascaderFloat,
+                global: false,
+                class: "to-cascader-layer",
+                width: floatWidth.value,
+                lazy: "",
+                align: "left",
+                onClosed: afterClose
+              }, {
+                default: withCtx(() => [
+                  !data_.value.length ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      style: { "text-align": "center", "color": "#ccc", "padding": "3em 0.3em" }
+                    },
+                    toDisplayString(unref(t)("to.cascader.noData")),
+                    1
+                    /* TEXT */
+                  )) : createCommentVNode("v-if", true),
+                  createVNode(_component_to_scroll, {
+                    onClick: withModifiers(() => {
+                    }, ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", { class: "to-cascader-options" }, [
+                        (openBlock(true), createElementBlock(
+                          Fragment,
+                          null,
+                          renderList(optionLevels.value, (levelData, levelIndex) => {
+                            return openBlock(), createBlock(CascaderItem, {
+                              key: levelIndex,
+                              data: levelData,
+                              onSelect: handleItemSelect
+                            }, null, 8, ["data"]);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["width"])
+            ],
+            2
+            /* CLASS */
+          )
+        ])),
+        errorTip.value ? withDirectives((openBlock(), createElementBlock("span", {
+          key: 4,
+          class: "to-box-tip"
+        }, [
+          errorType.value === "rule" ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.cascader.inputError")) + " ",
+                1
+                /* TEXT */
+              ),
+              withDirectives(createVNode(
+                unref(ToIcon),
+                {
+                  style: { "height": "auto" },
+                  value: "help",
+                  color: "danger",
+                  mode: "toast"
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              ), [
+                [
+                  _directive_tip,
+                  errorTip.value,
+                  void 0,
+                  { danger: true }
+                ]
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 1 },
+            [
+              createTextVNode(
+                toDisplayString(unref(t)("to.cascader.required")),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])), [
+          [_directive_color, "danger"]
+        ]) : createCommentVNode("v-if", true)
+      ], 14, ["flex"])), [
+        [_directive_tip, changed.value ? unref(t)("to.common.originalValue", getLabelPath(valueStore.value[0], data_.value, [], [], false)) : ""]
       ]);
     };
   }