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

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

exports["default"] = TargetPanel;
//# sourceMappingURL=target-panel.js.map