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

"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", "onMouseenter"];
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 innerExpandTrigger = vue.computed(() => {
      if (is.isTouchDevice) {
        return "click";
      }
      if (props.expandTrigger === "hover" || props.expandTrigger === "click") {
        return props.expandTrigger;
      }
      return "click";
    });
    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;
    };
    const updateOSelectValue = (option) => {
      if (selectInject) {
        selectInject.registerOption(option);
        selectInject.select(option);
      }
    };
    vue.watch(
      () => props.options,
      (val) => {
        if (!is.isUndefined(val)) {
          cascaderTree.updateTree(val);
          panelInfo.value = cascaderTree.getPanelInfo(_value.value);
          const { label, path } = getSelectedInfo();
          inputLabel.value = label;
          updateOSelectValue({ label, value: path[path.length - 1] });
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    const selectOption = (option, columnInfo) => {
      var _a;
      while (option.depth < panelInfo.value.length) {
        (_a = panelInfo.value) == null ? void 0 : _a.pop();
      }
      columnInfo.forEach((item) => {
        item.isActive = item.value === option.value;
      });
      const { label, path } = getSelectedInfo();
      _value.value = path;
      inputLabel.value = label;
      if (props.pathMode) {
        emits("change", path);
        emits("update:modelValue", path);
      } else {
        emits("change", path[path.length - 1]);
        emits("update:modelValue", path[path.length - 1]);
      }
      updateOSelectValue({ label, value: path[path.length - 1] });
    };
    const expandOption = (option, columnInfo) => {
      var _a;
      while (option.depth < panelInfo.value.length) {
        (_a = panelInfo.value) == null ? void 0 : _a.pop();
      }
      columnInfo.forEach((item) => {
        item.isActive = item.value === option.value;
      });
      const node = cascaderTree.getNode(option.value);
      if (node) {
        panelInfo.value.push(cascaderTree.getColumnInfo(node));
      }
    };
    const onClick = (option, columnInfo) => {
      if (!is.isArray(panelInfo.value)) {
        return;
      }
      if (option.isLeaf) {
        selectOption(option, columnInfo);
      } else {
        if (option.isActive || innerExpandTrigger.value !== "click") {
          return;
        }
        expandOption(option, columnInfo);
      }
    };
    const onMouseenter = (option, columnInfo) => {
      if (!is.isArray(panelInfo.value) || option.isLeaf || option.isActive || innerExpandTrigger.value !== "hover") {
        return;
      }
      expandOption(option, columnInfo);
    };
    vue.watch(
      () => props.modelValue,
      (newValue) => {
        if (!newValue) return;
        panelInfo.value = cascaderTree.getPanelInfo(newValue);
        const { path, label } = getSelectedInfo();
        inputLabel.value = label;
        _value.value = path;
        updateOSelectValue({ label, value: path[path.length - 1] });
      }
    );
    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),
                    onMouseenter: ($event) => onMouseenter(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)
                  ], 42, _hoisted_2);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]);
          }),
          128
          /* KEYED_FRAGMENT */
        ))
      ]);
    };
  }
});
module.exports = _sfc_main;