hongluan-business-ui/es/components/tree-transfer/src/tree-panel.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, computed, normalizeClass, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, withCtx, createCommentVNode, mergeProps, withDirectives, vShow, renderSlot } from 'vue';
import { HlInput, HlTree, HlIcon, SystemSearch, useLocale } from 'hongluan-ui';
import { debounce } from 'lodash-unified';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "TreePanel",
  components: {
    HlInput,
    HlTree,
    HlIcon,
    SystemSearch,
    OptionContent: ({ option }) => option
  },
  props: {
    treeProps: Object,
    placeholder: String,
    title: String,
    filterable: Boolean,
    optionRender: Function
  },
  emits: ["checked-change"],
  setup(props, { emit, slots }) {
    const { t } = useLocale();
    const hlTree = ref(null);
    const query = ref("");
    const inputHover = ref(false);
    const hasFooter = computed(() => !!slots.default()[0].children.length);
    const showClose = computed(() => {
      return query.value.length > 0 && inputHover.value ? "show-close" : "";
    });
    const onInput = debounce((val) => {
      hlTree.value.filter(val);
    }, 300);
    const clearQuery = () => {
      if (showClose.value === "show-close") {
        query.value = "";
        hlTree.value.filter("");
      }
    };
    const callTreeMethod = (name, ...args) => {
      if (hlTree.value[name]) {
        return hlTree.value[name](...args);
      }
      console.error("tree method don't exist!!");
    };
    const checkChange = () => {
      emit("checked-change");
    };
    return {
      t,
      hlTree,
      query,
      inputHover,
      showClose,
      onInput,
      clearQuery,
      hasFooter,
      checkChange,
      callTreeMethod
    };
  }
});
const _hoisted_1 = {
  class: /* @__PURE__ */ normalizeClass(["transfer-panel tree-panel"])
};
const _hoisted_2 = { class: "panel-header" };
const _hoisted_3 = {
  key: 0,
  class: "panel-filter"
};
const _hoisted_4 = {
  key: 0,
  class: "panel-footer"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_system_search = resolveComponent("system-search");
  const _component_hl_icon = resolveComponent("hl-icon");
  const _component_hl_input = resolveComponent("hl-input");
  const _component_option_content = resolveComponent("option-content");
  const _component_hl_tree = resolveComponent("hl-tree");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", _hoisted_2, toDisplayString(_ctx.title), 1),
    createElementVNode("div", {
      class: normalizeClass(["panel-body", _ctx.hasFooter ? "is-with-footer" : ""])
    }, [
      _ctx.filterable ? (openBlock(), createElementBlock("div", _hoisted_3, [
        createVNode(_component_hl_input, {
          modelValue: _ctx.query,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
          block: "",
          fill: "",
          placeholder: _ctx.placeholder,
          onInput: _ctx.onInput,
          onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.inputHover = true),
          onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.inputHover = false)
        }, {
          suffix: withCtx(() => [
            createElementVNode("i", {
              class: normalizeClass(["input-close", _ctx.showClose]),
              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clearQuery && _ctx.clearQuery(...args))
            }, null, 2)
          ]),
          prefix: withCtx(() => [
            createVNode(_component_hl_icon, null, {
              default: withCtx(() => [
                createVNode(_component_system_search)
              ]),
              _: 1
            })
          ]),
          _: 1
        }, 8, ["modelValue", "placeholder", "onInput"])
      ])) : createCommentVNode("v-if", true),
      createVNode(_component_hl_tree, mergeProps({
        ref: "hlTree",
        class: "panel-list",
        "node-key": "id"
      }, _ctx.treeProps, {
        "show-checkbox": true,
        onCheckChange: _ctx.checkChange
      }), {
        default: withCtx(({ data }) => [
          createVNode(_component_option_content, {
            option: _ctx.optionRender(data)
          }, null, 8, ["option"])
        ]),
        _: 1
      }, 16, ["onCheckChange"]),
      withDirectives(createElementVNode("p", { class: "panel-empty" }, toDisplayString(_ctx.t("hl.transfer.noData")), 513), [
        [vShow, _ctx.treeProps.data && _ctx.treeProps.data.length === 0]
      ])
    ], 2),
    _ctx.hasFooter ? (openBlock(), createElementBlock("p", _hoisted_4, [
      renderSlot(_ctx.$slots, "default")
    ])) : createCommentVNode("v-if", true)
  ]);
}
var TreePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { TreePanel as default };
//# sourceMappingURL=tree-panel.mjs.map