hongluan-business-ui/lib/components/tree-transfer/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 targetPanel = require('./target-panel.js');
var treePanel = require('./tree-panel.js');
var useTreeProp = require('./useTreeProp.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "TreeTransfer",
  components: {
    TargetPanel: targetPanel["default"],
    TreePanel: treePanel["default"]
  },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    treeProps: {
      type: Object,
      default: () => ({})
    },
    titles: {
      type: Array,
      default: () => []
    },
    filterPlaceholder: {
      type: String,
      default: ""
    },
    renderContent: Function,
    filterable: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit, slots }) {
    const { t } = hongluanUi.useLocale();
    const { prefix } = util.usePrefix();
    const formItem = vue.inject(hongluanUi.formItemContextKey, {});
    const treePanel = vue.ref(null);
    const rightPanel = vue.ref(null);
    const checkedData = vue.ref([]);
    const clearQuery = (which) => {
      if (which === "left") {
        treePanel.value.query = "";
      } else if (which === "right") {
        rightPanel.value.query = "";
      }
    };
    const leftPanelTitle = vue.computed(() => props.titles[0] || t("hl.transfer.titles.0"));
    const rightPanelTitle = vue.computed(() => props.titles[1] || t("hl.transfer.titles.1"));
    const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("hl.transfer.filterPlaceholder"));
    const filterMethod = vue.computed(() => {
      return props.treeProps.filterNodeMethod || (() => true);
    });
    vue.watch(() => props.modelValue, () => {
      var _a;
      (_a = formItem.validate) == null ? void 0 : _a.call(formItem, hongluanUi.FormItemEvents.change);
    });
    const { label: treeLabel } = useTreeProp.useTreeProp(props.treeProps);
    const optionTreeRender = vue.computed(() => (data) => {
      if (props.renderContent)
        return props.renderContent(vue.h, data, "left");
      const treeNodeSlot = slots.treeNode || slots["tree-node"];
      if (treeNodeSlot)
        return treeNodeSlot({ data });
      return vue.h("span", { class: "tree-node-label" }, data[treeLabel.value]);
    });
    const optionTargetRender = vue.computed(() => (data) => {
      if (props.renderContent)
        return props.renderContent(vue.h, data, "right");
      const targetNodeSlot = slots.targetNode || slots["target-node"];
      if (targetNodeSlot)
        return targetNodeSlot({ data });
      return vue.h("span", data[treeLabel.value]);
    });
    const onTreeCheckedChange = () => {
      const leafOnly = !props.treeProps.checkStrictly;
      const keys = treePanel.value.callTreeMethod("getCheckedKeys", leafOnly);
      const nodes = treePanel.value.callTreeMethod("getCheckedNodes", leafOnly);
      emit("update:modelValue", keys);
      checkedData.value = [...nodes];
    };
    const onTargetCheckedChange = (key) => {
      const leafOnly = !props.treeProps.checkStrictly;
      const keys = treePanel.value.callTreeMethod("getCheckedKeys", leafOnly);
      keys.indexOf(key) !== -1 && keys.splice(keys.indexOf(key), 1);
      treePanel.value.callTreeMethod("setCheckedKeys", keys, leafOnly);
    };
    vue.onMounted(() => {
      const leafOnly = !props.treeProps.checkStrictly;
      treePanel.value.callTreeMethod("setCheckedKeys", props.modelValue, leafOnly);
      const defaultCheckedData = [];
      props.modelValue.forEach((id) => {
        defaultCheckedData.push(treePanel.value.callTreeMethod("getNode", id));
      });
      checkedData.value = [...defaultCheckedData.map((c) => c.data)];
    });
    return {
      t,
      prefix,
      treePanel,
      rightPanel,
      checkedData,
      filterMethod,
      leftPanelTitle,
      rightPanelTitle,
      panelFilterPlaceholder,
      clearQuery,
      optionTreeRender,
      optionTargetRender,
      onTreeCheckedChange,
      onTargetCheckedChange
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_tree_panel = vue.resolveComponent("tree-panel");
  const _component_target_panel = vue.resolveComponent("target-panel");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass([[
      _ctx.prefix + "-tree-transfer"
    ], "hl-transfer"])
  }, [
    vue.createVNode(_component_tree_panel, {
      ref: "treePanel",
      title: _ctx.leftPanelTitle,
      placeholder: _ctx.panelFilterPlaceholder,
      filterable: _ctx.filterable,
      "option-render": _ctx.optionTreeRender,
      "tree-props": _ctx.treeProps,
      onCheckedChange: _ctx.onTreeCheckedChange
    }, {
      default: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "left-footer")
      ]),
      _: 3
    }, 8, ["title", "placeholder", "filterable", "option-render", "tree-props", "onCheckedChange"]),
    vue.createVNode(_component_target_panel, {
      ref: "targetPanel",
      data: _ctx.checkedData,
      "option-render": _ctx.optionTargetRender,
      placeholder: _ctx.panelFilterPlaceholder,
      filterable: _ctx.filterable,
      "filter-method": _ctx.filterMethod,
      title: _ctx.rightPanelTitle,
      props: _ctx.treeProps.props,
      onCheckedChange: _ctx.onTargetCheckedChange
    }, {
      default: vue.withCtx(() => [
        vue.renderSlot(_ctx.$slots, "right-footer")
      ]),
      _: 3
    }, 8, ["data", "option-render", "placeholder", "filterable", "filter-method", "title", "props", "onCheckedChange"])
  ], 2);
}
var TreeTransfer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

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