hongluan-business-ui/lib/components/tree-selector/src/index.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "TreeSelector",
  components: {
    HlSelector: hongluanUi.HlSelector,
    HlTree: hongluanUi.HlTree,
    HlScrollbar: hongluanUi.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 } = util.usePrefix();
    const hlSelector = vue.ref(null);
    const selectorTree = vue.ref(null);
    const treeStyle = vue.ref({});
    const propsLabel = vue.computed(() => {
      return props.treeProps.props.label || "label";
    });
    const formItem = vue.inject(hongluanUi.formItemContextKey, {});
    vue.watch(() => props.modelValue, () => {
      setSelected();
    });
    vue.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, hongluanUi.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);
    };
    vue.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 = vue.resolveComponent("hl-tree");
  const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
  const _component_hl_selector = vue.resolveComponent("hl-selector");
  return vue.openBlock(), vue.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
  }, vue.createSlots({
    default: vue.withCtx(() => [
      vue.createVNode(_component_hl_scrollbar, {
        ref: "scrollbar",
        "wrap-class": "selector-dropdown-wrap",
        "view-class": "selector-dropdown-list"
      }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_hl_tree, vue.mergeProps({
            ref: "selectorTree",
            class: "selector-tree",
            "node-key": "id"
          }, _ctx.treeProps, {
            style: _ctx.treeStyle,
            onNodeClick: _ctx.nodeClick,
            onCheckChange: _ctx.checkChange
          }), {
            default: vue.withCtx(({ node, data }) => [
              vue.renderSlot(_ctx.$slots, "tree-node", {
                node,
                data
              }, () => [
                vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(node.label), 1)
              ])
            ]),
            _: 3
          }, 16, ["style", "onNodeClick", "onCheckChange"])
        ]),
        _: 3
      }, 512)
    ]),
    tag: vue.withCtx(({ tag }) => [
      vue.renderSlot(_ctx.$slots, "tag", { tag }, () => [
        tag.key === "-1" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(tag.text[_ctx.propsLabel]), 1))
      ])
    ]),
    _: 2
  }, [
    _ctx.$slots.prefix ? {
      name: "prefix",
      fn: vue.withCtx(() => [
        vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = TreeSelector;
//# sourceMappingURL=index.js.map