hongluan-business-ui/es/components/tree-selector/src/index.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, computed, inject, watch, onMounted, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, mergeProps, renderSlot, createElementVNode, toDisplayString, createElementBlock } from 'vue';
import { HlSelector, HlTree, HlScrollbar, formItemContextKey, FormItemEvents } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "TreeSelector",
  components: {
    HlSelector,
    HlTree,
    HlScrollbar
  },
  props: {
    modelValue: [Array, String, Number, Object],
    treeProps: Object,
    clearable: Boolean,
    placeholder: String,
    placement: String,
    collapseTags: Boolean,
    filterable: Boolean,
    size: {
      type: String,
      default: null
    },
    popperClass: {
      type: String,
      default: ""
    },
    disabled: Boolean
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const { prefix } = usePrefix();
    const hlSelector = ref(null);
    const selectorTree = ref(null);
    const treeStyle = ref({});
    const propsLabel = computed(() => {
      return props.treeProps.props.label || "label";
    });
    const formItem = inject(formItemContextKey, {});
    watch(() => props.modelValue, () => {
      setSelected();
    });
    watch(() => props.treeProps.data, () => {
      setSelected();
    });
    const valueChange = (value) => {
      var _a;
      emit("update:modelValue", value);
      emit("change", value);
      (_a = formItem.validate) == null ? void 0 : _a.call(formItem, FormItemEvents.change);
    };
    const nodeClick = (data, node, component) => {
      const treeProps = props.treeProps;
      const children = data[treeProps.props.children];
      const value = data[treeProps.nodeKey];
      if ((children && children.length || treeProps.lazy && !data["isLeaf"]) && !treeProps.checkStrictly) {
        component.proxy.handleExpandIconClick();
      } else if (!treeProps.showCheckbox && !data.disabled) {
        if (value !== props.modelValue) {
          valueChange(value);
        }
        hlSelector.value.togglePopperVisible(false);
      }
    };
    const checkChange = () => {
      const leafOnly = !props.treeProps.checkStrictly;
      const keys = selectorTree.value.getCheckedKeys(leafOnly);
      valueChange(keys);
    };
    const setSelected = () => {
      if (props.treeProps.showCheckbox && Array.isArray(props.modelValue)) {
        selectorTree.value.setCheckedKeys(props.modelValue);
        const selectedNodes = selectorTree.value.getCheckedNodes(!props.treeProps.checkStrictly);
        hlSelector.value.setValue(selectedNodes);
      } else {
        const selectedNode = selectorTree.value.getNode(props.modelValue);
        hlSelector.value.setValue(selectedNode ? selectedNode.data[propsLabel.value] : "");
      }
    };
    const resizePopper = (inputWrapper) => {
      treeStyle.value.width = 30 + inputWrapper.offsetWidth + "px";
    };
    const onInput = (val) => {
      if (props.filterable) {
        selectorTree.value.filter(val);
      }
    };
    const onClear = () => {
      if (props.filterable) {
        selectorTree.value.filter("");
      }
      selectorTree.value.setCheckedNodes([]);
      valueChange(props.treeProps.showCheckbox ? [] : "");
    };
    const removeTag = (tag) => {
      let treeNodes = selectorTree.value.getCheckedNodes(!props.treeProps.checkStrictly);
      treeNodes = treeNodes.filter((n) => n !== tag.text);
      selectorTree.value.setCheckedNodes(treeNodes);
    };
    onMounted(() => {
      setSelected();
    });
    return {
      prefix,
      hlSelector,
      selectorTree,
      treeStyle,
      propsLabel,
      onInput,
      onClear,
      removeTag,
      nodeClick,
      checkChange,
      resizePopper
    };
  }
});
const _hoisted_1 = { class: "tree-node-label" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_tree = resolveComponent("hl-tree");
  const _component_hl_scrollbar = resolveComponent("hl-scrollbar");
  const _component_hl_selector = resolveComponent("hl-selector");
  return openBlock(), createBlock(_component_hl_selector, {
    ref: "hlSelector",
    "popper-class": `${_ctx.prefix}-tree-selector-popper ${_ctx.popperClass}`,
    size: _ctx.size,
    disabled: _ctx.disabled,
    clearable: _ctx.clearable,
    placeholder: _ctx.placeholder,
    placement: _ctx.placement,
    "collapse-tags": _ctx.collapseTags,
    filterable: _ctx.filterable,
    multiple: _ctx.treeProps.showCheckbox,
    onResize: _ctx.resizePopper,
    onInput: _ctx.onInput,
    onClear: _ctx.onClear,
    onRemoveTag: _ctx.removeTag
  }, createSlots({
    default: withCtx(() => [
      createVNode(_component_hl_scrollbar, {
        ref: "scrollbar",
        "wrap-class": "selector-dropdown-wrap",
        "view-class": "selector-dropdown-list"
      }, {
        default: withCtx(() => [
          createVNode(_component_hl_tree, mergeProps({
            ref: "selectorTree",
            class: "selector-tree",
            "node-key": "id"
          }, _ctx.treeProps, {
            style: _ctx.treeStyle,
            onNodeClick: _ctx.nodeClick,
            onCheckChange: _ctx.checkChange
          }), {
            default: withCtx(({ node, data }) => [
              renderSlot(_ctx.$slots, "tree-node", {
                node,
                data
              }, () => [
                createElementVNode("span", _hoisted_1, toDisplayString(node.label), 1)
              ])
            ]),
            _: 3
          }, 16, ["style", "onNodeClick", "onCheckChange"])
        ]),
        _: 3
      }, 512)
    ]),
    tag: withCtx(({ tag }) => [
      renderSlot(_ctx.$slots, "tag", { tag }, () => [
        tag.key === "-1" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(tag.text), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(tag.text[_ctx.propsLabel]), 1))
      ])
    ]),
    _: 2
  }, [
    _ctx.$slots.prefix ? {
      name: "prefix",
      fn: withCtx(() => [
        renderSlot(_ctx.$slots, "prefix")
      ])
    } : void 0
  ]), 1032, ["popper-class", "size", "disabled", "clearable", "placeholder", "placement", "collapse-tags", "filterable", "multiple", "onResize", "onInput", "onClear", "onRemoveTag"]);
}
var TreeSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { TreeSelector as default };
//# sourceMappingURL=index.mjs.map