@wfrog/vc/dist/es/components/tree-picker/tree-picker.mjs

vue3 组件库 vc

import './index.css'
import './popover-cascader.css'
import '../../chunk/E_WRn0OP.mjs';
import '../../chunk/DUd8IaU9.mjs';
/* empty css                    */
import { P as PopoverCascader, a as ElCascader } from '../../chunk/YQMGv8da.mjs';
import '../../chunk/D19ZZ4OA.mjs';
import '../../chunk/Bm4zCpG6.mjs';
import '../../chunk/cUoiVgQs.mjs';
import '../../chunk/CJQcPuNK.mjs';
import { defineComponent, useCssVars, unref, computed, useCssModule, useTemplateRef, ref, createBlock, openBlock, withCtx, createElementVNode, normalizeClass, createVNode, mergeProps, isRef, createTextVNode, toDisplayString, nextTick } from 'vue';
import { o as onClickOutside, u as useVModel } from '../../chunk/eQT9aAiW.mjs';
import { E as ElPopover } from '../../chunk/CGA7gSl6.mjs';
import { u as useToggle, a as useThrottleFn } from '../../chunk/GvCnndsC.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "tree-picker",
  props: {
    emptyText: {},
    placeholder: { default: "请选择" },
    disabled: { type: Boolean, default: false },
    multiple: { type: Boolean, default: false },
    modelValue: {},
    options: { default: () => [] },
    props: { default: () => ({}) },
    width: {},
    block: { type: Boolean },
    filterable: { type: Boolean },
    filterEmptyText: { default: "没有匹配到数据" }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    useCssVars((_ctx) => ({
      "v1c728f22": unref(myWidth)
    }));
    const props = __props;
    const emits = __emit;
    const myValue = useVModel(props, "modelValue", emits);
    const [popoverVisible, togglePopoverVisible] = useToggle();
    const handleSelectClick = useThrottleFn(() => !props.disabled && togglePopoverVisible(), 300);
    const cascaderProps = computed(() => ({
      label: props.props.label || "label",
      value: props.props.value || "value",
      children: props.props.children || "children",
      multiple: props.multiple,
      emitPath: false,
      ...props.props
    }));
    const myWidth = computed(() => {
      return props.width || (props.block ? "100%" : "214px");
    });
    const $style = useCssModule();
    const selectClassName = computed(() => ({ [$style["is-active"]]: popoverVisible.value, [$style.block]: props.block }));
    const containerRef = useTemplateRef("containerRef");
    onClickOutside(containerRef, (event) => {
      let target = event.target;
      let result = false;
      do {
        result = target.classList ? target.classList.contains($style.cascader) : false;
        target = target.parentNode;
      } while (result === false && target !== null && target.nodeName !== "BODY");
      !result && togglePopoverVisible(false);
    });
    const popoverRef = useTemplateRef("popoverRef");
    function updatePopper() {
      return nextTick(() => {
        popoverRef.value.popperRef.popperInstanceRef?.update();
      });
    }
    const keyword = ref("");
    function handleKeyup(event) {
      keyword.value = event.target.value;
    }
    function clear() {
      emits("update:modelValue", props.multiple ? [] : "");
      setTimeout(() => {
        nextTick(() => togglePopoverVisible(false));
      }, 0);
    }
    return (_ctx, _cache) => {
      const _component_ElCascader = ElCascader;
      const _component_ElPopover = ElPopover;
      return openBlock(), createBlock(_component_ElPopover, {
        ref_key: "popoverRef",
        ref: popoverRef,
        visible: unref(popoverVisible) && !unref(keyword),
        placement: "bottom",
        "popper-class": unref($style).popover,
        disabled: __props.filterable && !!unref(keyword)
      }, {
        reference: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass(unref($style).wrapper),
            onClickCapture: _cache[5] || (_cache[5] = //@ts-ignore
            (...args) => unref(handleSelectClick) && unref(handleSelectClick)(...args)),
            onKeyup: handleKeyup
          }, [
            createVNode(_component_ElCascader, mergeProps({
              modelValue: unref(myValue),
              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(myValue) ? myValue.value = $event : null),
              "collapse-tags": "",
              "collapse-tags-tooltip": "",
              clearable: "",
              options: __props.options,
              placeholder: __props.placeholder,
              filterable: __props.filterable,
              props: unref(cascaderProps),
              class: [unref(selectClassName), unref($style).cascader],
              "popper-class": { [unref($style)["cascader-popover"]]: !__props.filterable || !unref(keyword), [unref($style)["cascader-panel"]]: !!unref(keyword) }
            }, _ctx.$attrs, {
              onClear: clear,
              onBlur: _cache[4] || (_cache[4] = ($event) => keyword.value = "")
            }), {
              empty: withCtx(() => [
                createTextVNode(toDisplayString(__props.filterEmptyText), 1)
              ]),
              _: 1
            }, 16, ["modelValue", "options", "placeholder", "filterable", "props", "class", "popper-class"])
          ], 34)
        ]),
        default: withCtx(() => [
          createElementVNode("div", {
            ref_key: "containerRef",
            ref: containerRef,
            class: normalizeClass(unref($style).container)
          }, [
            createVNode(PopoverCascader, mergeProps({
              modelValue: unref(myValue),
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(myValue) ? myValue.value = $event : null),
              options: __props.options,
              props: unref(cascaderProps)
            }, _ctx.$attrs, {
              multiple: __props.multiple,
              onExpandChange: updatePopper,
              onChoiced: _cache[1] || (_cache[1] = ($event) => unref(togglePopoverVisible)(false)),
              onChange: _cache[2] || (_cache[2] = (val, node) => emits("change", val, node))
            }), null, 16, ["modelValue", "options", "props", "multiple"])
          ], 2)
        ]),
        _: 1
      }, 8, ["visible", "popper-class", "disabled"]);
    };
  }
});

/* unplugin-vue-components disabled */const popover = "_popover_q784j_1";
const container = "_container_q784j_6";
const wrapper = "_wrapper_q784j_13";
const block = "_block_q784j_18";
const cascader = "_cascader_q784j_26";
const style0 = {
	popover: popover,
	container: container,
	wrapper: wrapper,
	block: block,
	cascader: cascader,
	"is-active": "_is-active_q784j_33",
	"cascader-popover": "_cascader-popover_q784j_40",
	"cascader-panel": "_cascader-panel_q784j_44"
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_34 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_34 as _ };