yuang-framework-ui-pc/es/ele-virtual-table/components/cell-filter.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, resolveComponent, createElementBlock, openBlock, withModifiers, createVNode, withCtx, Fragment, createElementVNode, renderList, createBlock, createTextVNode, toDisplayString, normalizeClass } from "vue";
import { ElCheckbox, ElCheckboxGroup, ElScrollbar, ElButton, ElIcon, useLocale } from "element-plus";
import EleTooltip from "../../ele-tooltip/index";
import { FilterFilled } from "../../icons";
const _sfc_main = defineComponent({
  name: "CellFilter",
  components: {
    ElIcon,
    ElButton,
    ElScrollbar,
    ElCheckboxGroup,
    ElCheckbox,
    EleTooltip,
    FilterFilled
  },
  props: {
    /** 选中项 */
    filtered: Array,
    /** 是否多选 */
    filterMultiple: Boolean,
    /** 数据项 */
    filters: Array,
    /** 弹出框定位 */
    filterPlacement: {
      type: String,
      default: "bottom-start"
    }
  },
  emits: {
    /** 选中改变事件 */
    change: (_filtered) => true
  },
  setup(props, { emit }) {
    const { t } = useLocale();
    const popperRef = ref(null);
    const checkedValue = ref([]);
    const clearFilterText = computed(() => {
      return t("el.table.clearFilter");
    });
    const filteredValue = computed(() => {
      if (!props.filtered || !props.filtered.length) {
        return;
      }
      return props.filtered[0];
    });
    const confirmText = computed(() => {
      return t("el.table.confirmFilter");
    });
    const resetText = computed(() => {
      return t("el.table.resetFilter");
    });
    const hidePopper = () => {
      popperRef.value && popperRef.value.hide();
    };
    const handleBeforeEnter = () => {
      checkedValue.value = props.filtered ?? [];
    };
    const handleItemClick = (value) => {
      handleFilterChange(value == null ? [] : [value]);
      hidePopper();
    };
    const handleFilterChange = (filtered) => {
      emit("change", filtered);
    };
    const handleConfirm = () => {
      handleFilterChange(checkedValue.value);
      hidePopper();
    };
    const handleReset = () => {
      checkedValue.value = [];
      handleFilterChange([]);
      hidePopper();
    };
    return {
      popperRef,
      checkedValue,
      clearFilterText,
      filteredValue,
      confirmText,
      resetText,
      handleItemClick,
      handleFilterChange,
      handleConfirm,
      handleReset,
      handleBeforeEnter
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { class: "ele-table-filter-footer" };
const _hoisted_2 = {
  key: 1,
  class: "ele-table-filter-list"
};
const _hoisted_3 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_FilterFilled = resolveComponent("FilterFilled");
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_ElCheckbox = resolveComponent("ElCheckbox");
  const _component_ElCheckboxGroup = resolveComponent("ElCheckboxGroup");
  const _component_ElScrollbar = resolveComponent("ElScrollbar");
  const _component_ElButton = resolveComponent("ElButton");
  const _component_EleTooltip = resolveComponent("EleTooltip");
  return openBlock(), createElementBlock("div", {
    class: "ele-table-filter",
    onClick: _cache[2] || (_cache[2] = withModifiers(() => {
    }, ["stop"]))
  }, [
    createVNode(_component_EleTooltip, {
      ref: "popperRef",
      trigger: "click",
      showArrow: false,
      placement: _ctx.filterPlacement,
      popperClass: "ele-table-filter-popper",
      gpuAcceleration: true,
      effect: "light",
      isPopover: true,
      popperOptions: {
        strategy: "fixed",
        modifiers: [{ name: "offset", options: { offset: [0, 4] } }]
      },
      onBeforeShow: _ctx.handleBeforeEnter
    }, {
      body: withCtx(() => [
        _ctx.filterMultiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          createVNode(_component_ElScrollbar, { class: "ele-table-filter-body" }, {
            default: withCtx(() => [
              createVNode(_component_ElCheckboxGroup, {
                modelValue: _ctx.checkedValue,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.checkedValue = $event)
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (item) => {
                    return openBlock(), createBlock(_component_ElCheckbox, {
                      key: item.value,
                      value: item.value,
                      label: item.text
                    }, null, 8, ["value", "label"]);
                  }), 128))
                ]),
                _: 1
              }, 8, ["modelValue"])
            ]),
            _: 1
          }),
          createElementVNode("div", _hoisted_1, [
            createVNode(_component_ElButton, {
              size: "small",
              text: true,
              onClick: _ctx.handleReset
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(_ctx.resetText), 1)
              ]),
              _: 1
            }, 8, ["onClick"]),
            createVNode(_component_ElButton, {
              size: "small",
              type: "primary",
              disabled: !_ctx.checkedValue.length,
              onClick: _ctx.handleConfirm
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(_ctx.confirmText), 1)
              ]),
              _: 1
            }, 8, ["disabled", "onClick"])
          ])
        ], 64)) : (openBlock(), createElementBlock("div", _hoisted_2, [
          createElementVNode("div", {
            class: normalizeClass([
              "ele-table-filter-item",
              { "is-active": _ctx.filteredValue == null }
            ]),
            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleItemClick())
          }, toDisplayString(_ctx.clearFilterText), 3),
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (d) => {
            return openBlock(), createElementBlock("div", {
              key: d.value,
              class: normalizeClass([
                "ele-table-filter-item",
                { "is-active": _ctx.filteredValue === d.value }
              ]),
              onClick: ($event) => _ctx.handleItemClick(d.value)
            }, toDisplayString(d.text), 11, _hoisted_3);
          }), 128))
        ]))
      ]),
      default: withCtx(() => [
        createVNode(_component_ElIcon, null, {
          default: withCtx(() => [
            createVNode(_component_FilterFilled)
          ]),
          _: 1
        })
      ]),
      _: 1
    }, 8, ["placement", "onBeforeShow"])
  ]);
}
const cellFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  cellFilter as default
};