@opensig/opendesign/lib/cascader/OCascaderPanel.vue.js

<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>

"use strict";
const vue = require("vue");
const provide = require("../select/provide.js");
const icons = require("../_utils/icons.js");
const cascader = require("./cascader.js");
const is = require("../_utils/is.js");
const types = require("./types.js");
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__ */ vue.defineComponent({
  __name: "OCascaderPanel",
  props: types.cascaderPanelProps,
  emits: ["change", "update:modelValue"],
  setup(__props, { emit: __emit }) {
    const selectInject = vue.inject(provide.selectOptionInjectKey, null);
    const props = __props;
    const emits = __emit;
    const _value = vue.ref(props.modelValue);
    const inputLabel = vue.ref("");
    const cascaderTree = new cascader();
    const panelInfo = vue.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;
    };
    vue.watch(
      () => props.options,
      (val) => {
        if (!is.isUndefined(val)) {
          cascaderTree.updateTree(val);
          panelInfo.value = cascaderTree.getPanelInfo(_value.value);
          inputLabel.value = getSelectedInfo().label;
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    const currentVal = vue.computed(() => {
      return selectInject == null ? void 0 : selectInject.selectValue.value;
    });
    const onClick = (option, columnInfo) => {
      var _a, _b;
      if (!is.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
        );
      }
    };
    vue.watchEffect(() => {
      selectInject == null ? void 0 : selectInject.select(
        {
          label: inputLabel.value,
          value: is.isArray(_value.value) ? _value.value[_value.value.length - 1] : _value.value
        },
        false
      );
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        (vue.openBlock(true), vue.createElementBlock(
          vue.Fragment,
          null,
          vue.renderList(panelInfo.value, (columnInfo, index) => {
            return vue.openBlock(), vue.createElementBlock("ul", {
              key: index,
              class: "o-cascader-options"
            }, [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(columnInfo, (option) => {
                  return vue.openBlock(), vue.createElementBlock("li", {
                    key: option.value,
                    class: vue.normalizeClass(["o-cascader-option", { "o-cascader-option-selected": option.isActive }]),
                    onClick: ($event) => onClick(option, columnInfo)
                  }, [
                    vue.createElementVNode(
                      "span",
                      _hoisted_3,
                      vue.toDisplayString(option.label),
                      1
                      /* TEXT */
                    ),
                    !option.isLeaf ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
                      vue.createVNode(vue.unref(icons.IconChevronRight))
                    ])) : vue.createCommentVNode("v-if", true)
                  ], 10, _hoisted_2);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]);
          }),
          128
          /* KEYED_FRAGMENT */
        ))
      ]);
    };
  }
});
module.exports = _sfc_main;