hongluan-ui/es/components/simple-table/src/filter.mjs

Hongluan Component Library for Vue 3

import { defineComponent, ref, computed, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, renderSlot, withDirectives, createElementBlock, createVNode } from 'vue';
import { HlTooltip } from '../../tooltip/index.mjs';
import '../../popper/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import '../../system-icon/index.mjs';
import '../../../directives/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import SystemFilter from '../../system-icon/src/filter.mjs';
import ClickOutside from '../../../directives/click-outside/index.mjs';
import { Effect } from '../../popper/src/popper.mjs';

const _sfc_main = defineComponent({
  name: "SimpleTableFilterIcon",
  components: {
    HlTooltip,
    HlIcon,
    SystemFilter
  },
  directives: { ClickOutside },
  props: {
    placement: {
      type: String,
      default: "bottom"
    },
    effect: {
      type: String,
      default: Effect.LIGHT
    },
    popperClass: {
      type: String,
      default: ""
    },
    trigger: {
      type: String,
      default: "click"
    }
  },
  setup(props) {
    const tooltipVisible = ref(false);
    const tooltip = ref(null);
    const hidden = () => {
      tooltipVisible.value = false;
    };
    const show = () => {
      tooltipVisible.value = true;
    };
    const showByClick = (e) => {
      if (props.trigger === "click" || props.trigger === "all") {
        e.stopPropagation();
        tooltipVisible.value = !tooltipVisible.value;
      }
    };
    const showByHover = (e) => {
      if (props.trigger === "hover" || props.trigger === "all") {
        e.stopPropagation();
        show();
      }
    };
    const popperPaneRef = computed(() => {
      var _a, _b;
      return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
    });
    return {
      tooltipVisible,
      hidden,
      showByClick,
      showByHover,
      popperPaneRef,
      tooltip
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_system_filter = resolveComponent("system-filter");
  const _component_hl_icon = resolveComponent("hl-icon");
  const _component_hl_tooltip = resolveComponent("hl-tooltip");
  const _directive_click_outside = resolveDirective("click-outside");
  return openBlock(), createBlock(_component_hl_tooltip, {
    ref: "tooltip",
    visible: _ctx.tooltipVisible,
    offset: 0,
    placement: _ctx.placement,
    "show-arrow": false,
    "stop-popper-mouse-event": false,
    "popper-class": `popover popover-table-filter ${_ctx.popperClass}`,
    effect: _ctx.effect,
    trigger: "click",
    "manual-mode": "",
    "append-to-body": ""
  }, {
    content: withCtx(() => [
      renderSlot(_ctx.$slots, "default", { close: _ctx.hidden })
    ]),
    default: withCtx(() => [
      withDirectives((openBlock(), createElementBlock("span", {
        class: "table-filter-trigger",
        onClick: _ctx.showByClick,
        onMouseover: _ctx.showByHover
      }, [
        createVNode(_component_hl_icon, null, {
          default: withCtx(() => [
            createVNode(_component_system_filter)
          ]),
          _: 1
        })
      ], 40, ["onClick", "onMouseover"])), [
        [_directive_click_outside, _ctx.hidden, _ctx.popperPaneRef]
      ])
    ]),
    _: 3
  }, 8, ["visible", "placement", "popper-class", "effect"]);
}
var FilterIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { FilterIcon as default };
//# sourceMappingURL=filter.mjs.map