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

Hongluan Business Component Library for Vue 3

import { defineComponent, inject, ref, computed, watch, h, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot } from 'vue';
import { useLocale, formItemContextKey, FormItemEvents } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';
import TargetPanel from './target-panel.mjs';
import TreePanel from './tree-panel.mjs';
import { useTreeProp } from './useTreeProp.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "TreeTransfer",
  components: {
    TargetPanel,
    TreePanel
  },
  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 } = useLocale();
    const { prefix } = usePrefix();
    const formItem = inject(formItemContextKey, {});
    const treePanel = ref(null);
    const rightPanel = ref(null);
    const checkedData = ref([]);
    const clearQuery = (which) => {
      if (which === "left") {
        treePanel.value.query = "";
      } else if (which === "right") {
        rightPanel.value.query = "";
      }
    };
    const leftPanelTitle = computed(() => props.titles[0] || t("hl.transfer.titles.0"));
    const rightPanelTitle = computed(() => props.titles[1] || t("hl.transfer.titles.1"));
    const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t("hl.transfer.filterPlaceholder"));
    const filterMethod = computed(() => {
      return props.treeProps.filterNodeMethod || (() => true);
    });
    watch(() => props.modelValue, () => {
      var _a;
      (_a = formItem.validate) == null ? void 0 : _a.call(formItem, FormItemEvents.change);
    });
    const { label: treeLabel } = useTreeProp(props.treeProps);
    const optionTreeRender = computed(() => (data) => {
      if (props.renderContent)
        return props.renderContent(h, data, "left");
      const treeNodeSlot = slots.treeNode || slots["tree-node"];
      if (treeNodeSlot)
        return treeNodeSlot({ data });
      return h("span", { class: "tree-node-label" }, data[treeLabel.value]);
    });
    const optionTargetRender = computed(() => (data) => {
      if (props.renderContent)
        return props.renderContent(h, data, "right");
      const targetNodeSlot = slots.targetNode || slots["target-node"];
      if (targetNodeSlot)
        return targetNodeSlot({ data });
      return 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);
    };
    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 = resolveComponent("tree-panel");
  const _component_target_panel = resolveComponent("target-panel");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([[
      _ctx.prefix + "-tree-transfer"
    ], "hl-transfer"])
  }, [
    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: withCtx(() => [
        renderSlot(_ctx.$slots, "left-footer")
      ]),
      _: 3
    }, 8, ["title", "placeholder", "filterable", "option-render", "tree-props", "onCheckedChange"]),
    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: withCtx(() => [
        renderSlot(_ctx.$slots, "right-footer")
      ]),
      _: 3
    }, 8, ["data", "option-render", "placeholder", "filterable", "filter-method", "title", "props", "onCheckedChange"])
  ], 2);
}
var TreeTransfer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

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