@opensig/opendesign/es/cascader/OCascaderPanel.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, inject, ref, watch, computed, watchEffect, createElementBlock, openBlock, Fragment, renderList, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, createVNode, unref } from "vue";
import { selectOptionInjectKey } from "../select/provide.mjs";
import { IconChevronRight } from "../_utils/icons.mjs";
import CascaderTree from "./cascader.mjs";
import { isUndefined, isArray } from "../_utils/is.mjs";
import { cascaderPanelProps } from "./types.mjs";
const _hoisted_1 = { class: "o-cascader-panel" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "o-cascader-option-label" };
const _hoisted_4 = {
  key: 0,
  class: "o-cascader-option-arrow"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OCascaderPanel",
  props: cascaderPanelProps,
  emits: ["change", "update:modelValue"],
  setup(__props, { emit: __emit }) {
    const selectInject = inject(selectOptionInjectKey, null);
    const props = __props;
    const emits = __emit;
    const _value = ref(props.modelValue);
    const inputLabel = ref("");
    const cascaderTree = new CascaderTree();
    const panelInfo = ref();
    const getSelectedInfo = () => {
      var _a;
      let rlt = {
        label: "",
        path: []
      };
      (_a = panelInfo.value) == null ? void 0 : _a.forEach((columnInfo, index) => [
        columnInfo.forEach((option) => {
          if (option.isActive) {
            rlt.label += `${index === 0 ? "" : "/"}${String(option.label)}`;
            rlt.path.push(option.value);
          }
        })
      ]);
      return rlt;
    };
    watch(
      () => props.options,
      (val) => {
        if (!isUndefined(val)) {
          cascaderTree.updateTree(val);
          panelInfo.value = cascaderTree.getPanelInfo(_value.value);
          inputLabel.value = getSelectedInfo().label;
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    const currentVal = computed(() => {
      return selectInject == null ? void 0 : selectInject.selectValue.value;
    });
    const onClick = (option, columnInfo) => {
      var _a, _b;
      if (!isArray(panelInfo.value)) {
        return;
      }
      while (option.depth < panelInfo.value.length) {
        (_a = panelInfo.value) == null ? void 0 : _a.pop();
      }
      columnInfo.forEach((item) => {
        item.isActive = item.value === option.value;
      });
      if (!option.isLeaf) {
        const node = cascaderTree.getNode(cascaderTree.root, option.value);
        if (node) {
          panelInfo.value.push(cascaderTree.getNextColumnInfo(node));
        }
      } else {
        const { label, path } = getSelectedInfo();
        _value.value = path;
        inputLabel.value = label;
        if ((_b = currentVal.value) == null ? void 0 : _b.includes(path[path.length - 1])) {
          return;
        }
        if (props.pathMode) {
          emits("change", path);
          emits("update:modelValue", path);
        } else {
          emits("change", path[path.length - 1]);
          emits("update:modelValue", path[path.length - 1]);
        }
        selectInject == null ? void 0 : selectInject.select(
          {
            label: inputLabel.value,
            value: path[path.length - 1]
          },
          true
        );
      }
    };
    watchEffect(() => {
      selectInject == null ? void 0 : selectInject.select(
        {
          label: inputLabel.value,
          value: isArray(_value.value) ? _value.value[_value.value.length - 1] : _value.value
        },
        false
      );
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(
          Fragment,
          null,
          renderList(panelInfo.value, (columnInfo, index) => {
            return openBlock(), createElementBlock("ul", {
              key: index,
              class: "o-cascader-options"
            }, [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(columnInfo, (option) => {
                  return openBlock(), createElementBlock("li", {
                    key: option.value,
                    class: normalizeClass(["o-cascader-option", { "o-cascader-option-selected": option.isActive }]),
                    onClick: ($event) => onClick(option, columnInfo)
                  }, [
                    createElementVNode(
                      "span",
                      _hoisted_3,
                      toDisplayString(option.label),
                      1
                      /* TEXT */
                    ),
                    !option.isLeaf ? (openBlock(), createElementBlock("span", _hoisted_4, [
                      createVNode(unref(IconChevronRight))
                    ])) : createCommentVNode("v-if", true)
                  ], 10, _hoisted_2);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]);
          }),
          128
          /* KEYED_FRAGMENT */
        ))
      ]);
    };
  }
});
export {
  _sfc_main as default
};