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

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, normalizeClass, createVNode, withCtx, createCommentVNode, withDirectives, Fragment, renderList, createBlock, vShow, renderSlot } from 'vue';
import { HlCheckboxGroup, HlCheckbox, HlInput, HlIcon, SystemClose, SystemSearch, useLocale } from 'hongluan-ui';
import { useTreeProp } from './useTreeProp.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "TransferPanel",
  components: {
    HlCheckboxGroup,
    HlCheckbox,
    HlInput,
    HlIcon,
    SystemClose,
    SystemSearch,
    OptionContent: ({ option }) => option
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    optionRender: Function,
    placeholder: String,
    title: String,
    filterable: Boolean,
    filterMethod: Function,
    props: Object
  },
  emits: ["checked-change"],
  setup(props, { slots }) {
    const { t } = useLocale();
    const query = ref("");
    const inputHover = ref(false);
    const checked = ref([]);
    const { key: keyProp, label: labelProp, disabled: disabledProp } = useTreeProp({ props });
    const filteredData = computed(() => {
      return props.data.filter((item) => {
        if (typeof props.filterMethod === "function") {
          return props.filterMethod(query.value, item);
        } else {
          const label = item[labelProp.value] || item[keyProp.value].toString();
          return label.toLowerCase().includes(query.value.toLowerCase());
        }
      });
    });
    const hasNoMatch = computed(() => {
      return query.value.length > 0 && filteredData.value.length === 0;
    });
    const showClose = computed(() => {
      return query.value.length > 0 && inputHover.value ? "show-close" : "";
    });
    const hasFooter = computed(() => !!slots.default()[0].children.length);
    const clearQuery = () => {
      if (showClose.value === "show-close") {
        query.value = "";
      }
    };
    return {
      t,
      checked,
      keyProp,
      labelProp,
      disabledProp,
      query,
      inputHover,
      filteredData,
      hasNoMatch,
      showClose,
      hasFooter,
      clearQuery
    };
  }
});
const _hoisted_1 = { class: "transfer-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_system_close = resolveComponent("system-close");
  const _component_hl_checkbox = resolveComponent("hl-checkbox");
  const _component_hl_checkbox_group = resolveComponent("hl-checkbox-group");
  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,
          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"])
      ])) : createCommentVNode("v-if", true),
      withDirectives(createVNode(_component_hl_checkbox_group, {
        modelValue: _ctx.checked,
        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.checked = $event),
        dir: "vertical",
        gap: "0",
        class: normalizeClass({ "panel-list": true, "has-filterable": _ctx.filterable }),
        custom: true
      }, {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredData, (item) => {
            return openBlock(), createBlock(_component_hl_checkbox, {
              key: item[_ctx.keyProp],
              class: "item",
              label: item[_ctx.keyProp],
              disabled: item[_ctx.disabledProp]
            }, {
              default: withCtx(() => [
                createVNode(_component_option_content, {
                  option: _ctx.optionRender(item)
                }, null, 8, ["option"]),
                !item[_ctx.disabledProp] ? (openBlock(), createBlock(_component_hl_icon, {
                  key: 0,
                  class: "item-close",
                  onClick: ($event) => _ctx.$emit("checked-change", item[_ctx.keyProp])
                }, {
                  default: withCtx(() => [
                    createVNode(_component_system_close)
                  ]),
                  _: 2
                }, 1032, ["onClick"])) : createCommentVNode("v-if", true)
              ]),
              _: 2
            }, 1032, ["label", "disabled"]);
          }), 128))
        ]),
        _: 1
      }, 8, ["modelValue", "class"]), [
        [vShow, !_ctx.hasNoMatch && _ctx.data.length > 0]
      ]),
      withDirectives(createElementVNode("p", { class: "panel-empty" }, toDisplayString(_ctx.hasNoMatch ? _ctx.t("hl.transfer.noMatch") : _ctx.t("hl.transfer.noData")), 513), [
        [vShow, _ctx.hasNoMatch || _ctx.data.length === 0]
      ])
    ], 2),
    _ctx.hasFooter ? (openBlock(), createElementBlock("p", _hoisted_4, [
      renderSlot(_ctx.$slots, "default")
    ])) : createCommentVNode("v-if", true)
  ]);
}
var TargetPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { TargetPanel as default };
//# sourceMappingURL=target-panel.mjs.map