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

import { defineComponent, inject, ref, computed, watch, 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 { isTouchDevice, isUndefined, isArray } from "../_utils/is.mjs";
import { cascaderPanelProps } from "./types.mjs";
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__ */ 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 innerExpandTrigger = computed(() => {
      if (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);
      }
    };
    watch(
      () => props.options,
      (val) => {
        if (!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 (!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 (!isArray(panelInfo.value) || option.isLeaf || option.isActive || innerExpandTrigger.value !== "hover") {
        return;
      }
      expandOption(option, columnInfo);
    };
    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 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),
                    onMouseenter: ($event) => onMouseenter(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)
                  ], 42, _hoisted_2);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]);
          }),
          128
          /* KEYED_FRAGMENT */
        ))
      ]);
    };
  }
});
export {
  _sfc_main as default
};