@opensig/opendesign/es/cascader-v2/OCascaderV2Label.vue.mjs

import { defineComponent, inject, ref, computed, watchEffect, createElementBlock, openBlock, Fragment, createCommentVNode, createElementVNode, createVNode, unref, renderList, normalizeClass, toDisplayString, createBlock, withCtx } from "vue";
import { OCheckbox } from "../checkbox/index.mjs";
import { ORadio } from "../radio/index.mjs";
import { OPopover } from "../popover/index.mjs";
import { IconLoading, IconChevronRight } from "../_utils/icons.mjs";
import { isOverflown } from "../_utils/dom.mjs";
import { cascaderV2InjectKey } from "./provide.mjs";
const _hoisted_1 = {
  key: 2,
  class: "o-cascader-v2-option-arrow"
};
const _hoisted_2 = { class: "o-cascader-v2-option-whole-label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OCascaderV2Label",
  props: {
    multiple: { type: Boolean },
    allowSelectAnyNode: { type: Boolean },
    disabled: { type: Boolean },
    value: {},
    label: {},
    labelParts: {},
    indeterminate: { type: Boolean },
    isLeaf: { type: Boolean },
    isFullySelected: { type: Boolean },
    loading: { type: Boolean }
  },
  emits: ["select"],
  setup(__props, { emit: __emit }) {
    const cascaderV2Inject = inject(cascaderV2InjectKey, null);
    const props = __props;
    const emit = __emit;
    const optionLabelRef = ref();
    const showPopover = ref(false);
    const checkedList = computed(() => (cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value) ?? []);
    const singleValue = computed(() => checkedList.value[0]);
    const checkboxChecked = ref(false);
    watchEffect(() => {
      const list = cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value;
      checkboxChecked.value = list ? list.includes(props.value) : false;
    });
    const checkboxModelValue = computed(() => {
      if (props.isFullySelected !== void 0) {
        return props.isFullySelected ? [props.value] : [];
      }
      return checkboxChecked.value ? [props.value] : [];
    });
    const labelParts = computed(() => {
      if (props.labelParts && props.labelParts.length > 0) {
        return props.labelParts;
      }
      return [{ text: props.label, isHighlighted: false }];
    });
    const onMouseenter = (e) => {
      showPopover.value = isOverflown(e.target);
    };
    const onMouseleave = () => {
      showPopover.value = false;
    };
    const onSelectorClick = (e) => {
      if (props.disabled) {
        return;
      }
      if (props.multiple || props.allowSelectAnyNode) {
        e.stopPropagation();
        e.preventDefault();
        emit("select");
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        Fragment,
        null,
        [
          createCommentVNode(" 单选 + allowSelectAnyNode：使用 ORadio "),
          !props.multiple && props.allowSelectAnyNode ? (openBlock(), createElementBlock("span", {
            key: 0,
            class: "o-cascader-v2-option-selector",
            onClick: onSelectorClick
          }, [
            createVNode(unref(ORadio), {
              "model-value": singleValue.value,
              value: props.value,
              disabled: props.disabled
            }, null, 8, ["model-value", "value", "disabled"])
          ])) : props.multiple ? (openBlock(), createElementBlock(
            Fragment,
            { key: 1 },
            [
              createCommentVNode(" 多选：使用 OCheckbox（allowSelectAnyNode 时阻止冒泡，否则让事件冒泡至 li） "),
              createElementVNode("span", {
                class: "o-cascader-v2-option-selector",
                onClick: onSelectorClick
              }, [
                createVNode(unref(OCheckbox), {
                  "model-value": checkboxModelValue.value,
                  value: props.value,
                  indeterminate: props.isFullySelected ? false : props.indeterminate,
                  disabled: props.disabled
                }, null, 8, ["model-value", "value", "indeterminate", "disabled"])
              ])
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )) : createCommentVNode("v-if", true),
          createCommentVNode(" 选项文本 "),
          createElementVNode(
            "span",
            {
              ref_key: "optionLabelRef",
              ref: optionLabelRef,
              class: "o-cascader-v2-option-label",
              onMouseenter,
              onMouseleave
            },
            [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(labelParts.value, (part, index) => {
                  return openBlock(), createElementBlock(
                    "span",
                    {
                      key: index,
                      class: normalizeClass({ "o-cascader-v2-option-highlight": part.isHighlighted })
                    },
                    toDisplayString(part.text),
                    3
                    /* TEXT, CLASS */
                  );
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            544
            /* NEED_HYDRATION, NEED_PATCH */
          ),
          createCommentVNode(" 非叶子节点展开箭头（懒加载时显示 loading 图标） "),
          !props.isLeaf ? (openBlock(), createElementBlock("span", _hoisted_1, [
            props.loading ? (openBlock(), createBlock(unref(IconLoading), {
              key: 0,
              class: "o-rotating"
            })) : (openBlock(), createBlock(unref(IconChevronRight), { key: 1 }))
          ])) : createCommentVNode("v-if", true),
          createVNode(unref(OPopover), {
            visible: showPopover.value,
            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => showPopover.value = $event),
            trigger: "none",
            target: optionLabelRef.value,
            "wrap-class": "o-cascader-v2-option-popover",
            position: "top"
          }, {
            default: withCtx(() => [
              createElementVNode("div", _hoisted_2, [
                (openBlock(true), createElementBlock(
                  Fragment,
                  null,
                  renderList(labelParts.value, (part, index) => {
                    return openBlock(), createElementBlock(
                      "span",
                      {
                        key: index,
                        class: normalizeClass({ "o-cascader-v2-option-popover-highlight": part.isHighlighted })
                      },
                      toDisplayString(part.text),
                      3
                      /* TEXT, CLASS */
                    );
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "target"])
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});
export {
  _sfc_main as default
};