hongluan-business-ui/lib/components/tree-transfer/src/tree-panel.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 lodashUnified = require('lodash-unified');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

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

exports["default"] = TreePanel;
//# sourceMappingURL=tree-panel.js.map