@opensig/opendesign/lib/cascader-v2/OCascaderV2Label.vue.js

"use strict";
const vue = require("vue");
const index$1 = require("../checkbox/index.js");
const index = require("../radio/index.js");
const index$2 = require("../popover/index.js");
const icons = require("../_utils/icons.js");
const dom = require("../_utils/dom.js");
const provide = require("./provide.js");
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__ */ vue.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 = vue.inject(provide.cascaderV2InjectKey, null);
    const props = __props;
    const emit = __emit;
    const optionLabelRef = vue.ref();
    const showPopover = vue.ref(false);
    const checkedList = vue.computed(() => (cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value) ?? []);
    const singleValue = vue.computed(() => checkedList.value[0]);
    const checkboxChecked = vue.ref(false);
    vue.watchEffect(() => {
      const list = cascaderV2Inject == null ? void 0 : cascaderV2Inject.selectValue.value;
      checkboxChecked.value = list ? list.includes(props.value) : false;
    });
    const checkboxModelValue = vue.computed(() => {
      if (props.isFullySelected !== void 0) {
        return props.isFullySelected ? [props.value] : [];
      }
      return checkboxChecked.value ? [props.value] : [];
    });
    const labelParts = vue.computed(() => {
      if (props.labelParts && props.labelParts.length > 0) {
        return props.labelParts;
      }
      return [{ text: props.label, isHighlighted: false }];
    });
    const onMouseenter = (e) => {
      showPopover.value = dom.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 vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.createCommentVNode(" 单选 + allowSelectAnyNode：使用 ORadio "),
          !props.multiple && props.allowSelectAnyNode ? (vue.openBlock(), vue.createElementBlock("span", {
            key: 0,
            class: "o-cascader-v2-option-selector",
            onClick: onSelectorClick
          }, [
            vue.createVNode(vue.unref(index.ORadio), {
              "model-value": singleValue.value,
              value: props.value,
              disabled: props.disabled
            }, null, 8, ["model-value", "value", "disabled"])
          ])) : props.multiple ? (vue.openBlock(), vue.createElementBlock(
            vue.Fragment,
            { key: 1 },
            [
              vue.createCommentVNode(" 多选：使用 OCheckbox（allowSelectAnyNode 时阻止冒泡，否则让事件冒泡至 li） "),
              vue.createElementVNode("span", {
                class: "o-cascader-v2-option-selector",
                onClick: onSelectorClick
              }, [
                vue.createVNode(vue.unref(index$1.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 */
          )) : vue.createCommentVNode("v-if", true),
          vue.createCommentVNode(" 选项文本 "),
          vue.createElementVNode(
            "span",
            {
              ref_key: "optionLabelRef",
              ref: optionLabelRef,
              class: "o-cascader-v2-option-label",
              onMouseenter,
              onMouseleave
            },
            [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(labelParts.value, (part, index2) => {
                  return vue.openBlock(), vue.createElementBlock(
                    "span",
                    {
                      key: index2,
                      class: vue.normalizeClass({ "o-cascader-v2-option-highlight": part.isHighlighted })
                    },
                    vue.toDisplayString(part.text),
                    3
                    /* TEXT, CLASS */
                  );
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            544
            /* NEED_HYDRATION, NEED_PATCH */
          ),
          vue.createCommentVNode(" 非叶子节点展开箭头（懒加载时显示 loading 图标） "),
          !props.isLeaf ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
            props.loading ? (vue.openBlock(), vue.createBlock(vue.unref(icons.IconLoading), {
              key: 0,
              class: "o-rotating"
            })) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconChevronRight), { key: 1 }))
          ])) : vue.createCommentVNode("v-if", true),
          vue.createVNode(vue.unref(index$2.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: vue.withCtx(() => [
              vue.createElementVNode("div", _hoisted_2, [
                (vue.openBlock(true), vue.createElementBlock(
                  vue.Fragment,
                  null,
                  vue.renderList(labelParts.value, (part, index2) => {
                    return vue.openBlock(), vue.createElementBlock(
                      "span",
                      {
                        key: index2,
                        class: vue.normalizeClass({ "o-cascader-v2-option-popover-highlight": part.isHighlighted })
                      },
                      vue.toDisplayString(part.text),
                      3
                      /* TEXT, CLASS */
                    );
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "target"])
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});
module.exports = _sfc_main;