yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
210 lines (209 loc) • 7.1 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const EleTooltip = require("../../ele-tooltip/index");
const icons = require("../../icons");
const _sfc_main = vue.defineComponent({
name: "CellFilter",
components: {
ElIcon: elementPlus.ElIcon,
ElButton: elementPlus.ElButton,
ElScrollbar: elementPlus.ElScrollbar,
ElCheckboxGroup: elementPlus.ElCheckboxGroup,
ElCheckbox: elementPlus.ElCheckbox,
EleTooltip,
FilterFilled: icons.FilterFilled
},
props: {
/** 选中项 */
filtered: Array,
/** 是否多选 */
filterMultiple: Boolean,
/** 数据项 */
filters: Array,
/** 弹出框定位 */
filterPlacement: {
type: String,
default: "bottom-start"
}
},
emits: {
/** 选中改变事件 */
change: (_filtered) => true
},
setup(props, { emit }) {
const { t } = elementPlus.useLocale();
const popperRef = vue.ref(null);
const checkedValue = vue.ref([]);
const clearFilterText = vue.computed(() => {
return t("el.table.clearFilter");
});
const filteredValue = vue.computed(() => {
if (!props.filtered || !props.filtered.length) {
return;
}
return props.filtered[0];
});
const confirmText = vue.computed(() => {
return t("el.table.confirmFilter");
});
const resetText = vue.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 = vue.resolveComponent("FilterFilled");
const _component_ElIcon = vue.resolveComponent("ElIcon");
const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
const _component_ElCheckboxGroup = vue.resolveComponent("ElCheckboxGroup");
const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
const _component_ElButton = vue.resolveComponent("ElButton");
const _component_EleTooltip = vue.resolveComponent("EleTooltip");
return vue.openBlock(), vue.createElementBlock("div", {
class: "ele-table-filter",
onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
}, ["stop"]))
}, [
vue.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: vue.withCtx(() => [
_ctx.filterMultiple ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createVNode(_component_ElScrollbar, { class: "ele-table-filter-body" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_ElCheckboxGroup, {
modelValue: _ctx.checkedValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.checkedValue = $event)
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (item) => {
return vue.openBlock(), vue.createBlock(_component_ElCheckbox, {
key: item.value,
value: item.value,
label: item.text
}, null, 8, ["value", "label"]);
}), 128))
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_ElButton, {
size: "small",
text: true,
onClick: _ctx.handleReset
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.resetText), 1)
]),
_: 1
}, 8, ["onClick"]),
vue.createVNode(_component_ElButton, {
size: "small",
type: "primary",
disabled: !_ctx.checkedValue.length,
onClick: _ctx.handleConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
]),
_: 1
}, 8, ["disabled", "onClick"])
])
], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.createElementVNode("div", {
class: vue.normalizeClass([
"ele-table-filter-item",
{ "is-active": _ctx.filteredValue == null }
]),
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleItemClick())
}, vue.toDisplayString(_ctx.clearFilterText), 3),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (d) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: d.value,
class: vue.normalizeClass([
"ele-table-filter-item",
{ "is-active": _ctx.filteredValue === d.value }
]),
onClick: ($event) => _ctx.handleItemClick(d.value)
}, vue.toDisplayString(d.text), 11, _hoisted_3);
}), 128))
]))
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ElIcon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_FilterFilled)
]),
_: 1
})
]),
_: 1
}, 8, ["placement", "onBeforeShow"])
]);
}
const cellFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = cellFilter;