hongluan-ui/lib/components/simple-table/src/filter.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../tooltip/index.js');
require('../../popper/index.js');
var index$1 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../../directives/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var filter = require('../../system-icon/src/filter.js');
var index$2 = require('../../../directives/click-outside/index.js');
var popper = require('../../popper/src/popper.js');

const _sfc_main = vue.defineComponent({
  name: "SimpleTableFilterIcon",
  components: {
    HlTooltip: index.HlTooltip,
    HlIcon: index$1.HlIcon,
    SystemFilter: filter["default"]
  },
  directives: { ClickOutside: index$2["default"] },
  props: {
    placement: {
      type: String,
      default: "bottom"
    },
    effect: {
      type: String,
      default: popper.Effect.LIGHT
    },
    popperClass: {
      type: String,
      default: ""
    },
    trigger: {
      type: String,
      default: "click"
    }
  },
  setup(props) {
    const tooltipVisible = vue.ref(false);
    const tooltip = vue.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 = vue.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 = vue.resolveComponent("system-filter");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_hl_tooltip = vue.resolveComponent("hl-tooltip");
  const _directive_click_outside = vue.resolveDirective("click-outside");
  return vue.openBlock(), vue.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: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default", { close: _ctx.hidden })
    ]),
    default: vue.withCtx(() => [
      vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
        class: "table-filter-trigger",
        onClick: _ctx.showByClick,
        onMouseover: _ctx.showByHover
      }, [
        vue.createVNode(_component_hl_icon, null, {
          default: vue.withCtx(() => [
            vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = FilterIcon;
//# sourceMappingURL=filter.js.map