plus-pro-components
Version:
Page level components developed based on Element Plus.
494 lines (489 loc) • 21.9 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var iconsVue = require('@element-plus/icons-vue');
var index$1 = require('../../popover/index.js');
require('../../../hooks/index.js');
var index = require('../../utils/index.js');
var elementPlus = require('element-plus');
var Sortable = require('sortablejs');
var useLocale = require('../../../hooks/useLocale.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-table-title-bar" };
const _hoisted_2 = { class: "plus-table-title-bar__title" };
const _hoisted_3 = { class: "plus-table-title-bar__toolbar" };
const _hoisted_4 = { class: "plus-table-title-bar__toolbar__density" };
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode(
"svg",
{
viewBox: "0 0 1024 1024",
focusable: "false",
"data-icon": "column-height",
fill: "currentColor",
"aria-hidden": "true"
},
[
/* @__PURE__ */ vue.createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" })
],
-1
/* HOISTED */
);
const _hoisted_6 = { class: "plus-table-checkbox-checkAll" };
const _hoisted_7 = {
key: 0,
class: "plus-table-checkbox-handle"
};
const _hoisted_8 = { key: 1 };
const _hoisted_9 = { key: 1 };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusTableToolbar"
},
__name: "table-title-bar",
props: {
columns: { default: () => [] },
titleBar: { type: [Boolean, Object], default: true },
defaultSize: { default: "default" },
columnsIsChange: { type: Boolean, default: false }
},
emits: ["filterTableHeader", "clickDensity", "refresh"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale.useLocale();
const checkboxGroupInstance = vue.ref(null);
const titleBarConfig = vue.computed(() => props.titleBar);
const iconSize = vue.computed(() => {
var _a, _b;
return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.size) || 18;
});
const iconColor = vue.computed(() => {
var _a, _b;
return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.color) || "";
});
const columnSetting = vue.computed(() => {
var _a;
return (_a = titleBarConfig.value) == null ? void 0 : _a.columnSetting;
});
const columnSettingPopoverWidth = vue.computed(() => {
var _a;
return ((_a = columnSetting.value) == null ? void 0 : _a.popoverWidth) || 100;
});
const overflowLabelLength = vue.computed(() => {
var _a;
return ((_a = columnSetting.value) == null ? void 0 : _a.overflowLabelLength) || 6;
});
const sortable = vue.ref(null);
const buttonNameDensity = [
{
size: "default",
text: vue.computed(() => t("plus.table.default"))
},
{
size: "large",
text: vue.computed(() => t("plus.table.loose"))
},
{
size: "small",
text: vue.computed(() => t("plus.table.compact"))
}
];
const getCheckList = (hasDisabled = false) => {
if (hasDisabled) {
return props.columns.filter((item) => item.disabledHeaderFilter === true).filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
}
return props.columns.filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
};
const state = vue.reactive({
checkAll: true,
isIndeterminate: false,
bigImageVisible: false,
srcList: [],
checkList: []
});
const setCheckAllState = (value) => {
const checkedCount = value.length;
state.checkAll = checkedCount === props.columns.length;
state.isIndeterminate = checkedCount > 0 && checkedCount < props.columns.length;
};
vue.watch(
() => props.columnsIsChange,
() => {
state.checkList = getCheckList();
setCheckAllState(state.checkList);
},
{
immediate: true
}
);
const handleCheckAllChange = (val) => {
state.checkList = val ? props.columns.map((item) => index.getTableKey(item)) : props.columns.filter((item) => item.disabledHeaderFilter === true).map((item) => index.getTableKey(item));
setCheckAllState(state.checkList);
handleFilterTableConfirm("allCheck");
};
const handleFilterTableConfirm = (type) => {
const filterColumns = props.columns.map((item) => {
if (state.checkList.includes(index.getTableKey(item))) {
return { ...item, headerIsChecked: true };
}
return { ...item, headerIsChecked: false };
});
emit("filterTableHeader", filterColumns, type);
};
const handleCheckGroupChange = (value) => {
setCheckAllState(value);
handleFilterTableConfirm("check");
};
const handleClickDensity = (size) => {
emit("clickDensity", size);
};
const handleRefresh = () => {
emit("refresh");
};
const getLabelValue = (label) => {
const tempLabel = index.getLabel(label);
if (tempLabel && (tempLabel == null ? void 0 : tempLabel.length) <= overflowLabelLength.value) {
return tempLabel;
}
return (tempLabel == null ? void 0 : tempLabel.slice(0, overflowLabelLength.value)) + "...";
};
const handleDrop = () => {
var _a;
if (!checkboxGroupInstance.value) return;
let config = {
onEnd: handleDragEnd,
ghostClass: "plus-table-ghost-class"
};
const dragSort = (_a = columnSetting.value) == null ? void 0 : _a.dragSort;
if (is.isPlainObject(dragSort)) {
config = { ...config, ...dragSort, handle: ".plus-table-checkbox-handle" };
}
sortable.value = new Sortable(checkboxGroupInstance.value, config);
};
const handleDragEnd = (event) => {
const subDragCheckboxList = [...props.columns];
const draggedCheckbox = props.columns[event.oldIndex];
subDragCheckboxList.splice(event.oldIndex, 1);
subDragCheckboxList.splice(event.newIndex, 0, draggedCheckbox);
const list = subDragCheckboxList.filter((item) => item);
emit("filterTableHeader", list, "drag");
};
const resetCheckBoxList = () => {
state.checkList = props.columns.filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
setCheckAllState(state.checkList);
const filterColumns = props.columns.map((item) => ({ ...item }));
emit("filterTableHeader", filterColumns, "reset");
};
vue.onMounted(() => {
var _a;
const dragSort = (_a = columnSetting.value) == null ? void 0 : _a.dragSort;
if (dragSort !== false) {
if (checkboxGroupInstance.value) {
handleDrop();
}
}
});
return (_ctx, _cache) => {
var _a, _b, _c;
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(
vue.toDisplayString(titleBarConfig.value.title),
1
/* TEXT */
)
])
]),
vue.createElementVNode("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "toolbar"),
((_a = titleBarConfig.value) == null ? void 0 : _a.refresh) === true ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: "plus-table-title-bar__toolbar__refresh",
onClick: handleRefresh
}, [
vue.createVNode(vue.unref(elementPlus.ElTooltip), {
effect: "dark",
content: vue.unref(t)("plus.table.refresh"),
placement: "top"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "refresh-icon", {}, () => [
vue.createVNode(vue.unref(elementPlus.ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.RefreshRight))
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u8868\u683C\u5BC6\u5EA6 "),
((_b = titleBarConfig.value) == null ? void 0 : _b.density) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusPopover), {
key: 1,
placement: "bottom",
width: 200,
trigger: "click",
title: vue.unref(t)("plus.table.density")
}, {
reference: vue.withCtx(() => [
vue.createVNode(vue.unref(elementPlus.ElTooltip), {
effect: "dark",
content: vue.unref(t)("plus.table.density"),
placement: "top"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "density-icon", {}, () => [
vue.createVNode(vue.unref(elementPlus.ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: vue.withCtx(() => [
_hoisted_5
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_4, [
(vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(buttonNameDensity, (item) => {
return vue.createVNode(vue.unref(elementPlus.ElButton), {
key: item.size,
plain: _ctx.defaultSize !== item.size,
type: "primary",
size: "small",
onClick: ($event) => handleClickDensity(item.size)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(item.text)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["plain", "onClick"]);
}),
64
/* STABLE_FRAGMENT */
))
])
]),
_: 3
/* FORWARDED */
}, 8, ["title"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u5217\u8BBE\u7F6E "),
((_c = titleBarConfig.value) == null ? void 0 : _c.columnSetting) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusPopover), {
key: 2,
placement: "bottom",
width: columnSettingPopoverWidth.value,
trigger: "click",
title: vue.unref(t)("plus.table.columnSettings")
}, {
reference: vue.withCtx(() => [
vue.createVNode(vue.unref(elementPlus.ElTooltip), {
effect: "dark",
content: vue.unref(t)("plus.table.columnSettings"),
placement: "top"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "column-settings-icon", {}, () => [
vue.createVNode(vue.unref(elementPlus.ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.Setting))
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
]),
default: vue.withCtx(() => {
var _a2, _b2, _c2;
return [
vue.createElementVNode("div", _hoisted_6, [
vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
modelValue: state.checkAll,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.checkAll = $event),
indeterminate: state.isIndeterminate,
onChange: handleCheckAllChange
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("plus.table.selectAll")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["modelValue", "indeterminate"]),
((_a2 = columnSetting.value) == null ? void 0 : _a2.reset) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), vue.mergeProps({
key: 0,
type: "primary",
underline: vue.unref(index.versionIsLessThan299) ? false : "never",
href: "javaScript:;"
}, vue.unref(is.isPlainObject)((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) ? (_c2 = columnSetting.value) == null ? void 0 : _c2.reset : {}, {
onClick: vue.withModifiers(resetCheckBoxList, ["stop", "prevent"])
}), {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("plus.table.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 16, ["underline"])) : vue.createCommentVNode("v-if", true)
]),
vue.createVNode(vue.unref(elementPlus.ElCheckboxGroup), {
modelValue: state.checkList,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.checkList = $event),
onChange: handleCheckGroupChange
}, {
default: vue.withCtx(() => [
vue.createElementVNode(
"div",
{
ref_key: "checkboxGroupInstance",
ref: checkboxGroupInstance,
class: "plus-table-checkbox-sortable-list"
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(_ctx.columns, (item) => {
var _a3;
return vue.openBlock(), vue.createElementBlock("div", {
key: item.prop,
class: "plus-table-checkbox-item"
}, [
((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
vue.createTextVNode("\u2637")
])
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" element-plus \u7248\u672C\u53F7\u5C0F\u4E8E2.6.0 "),
vue.unref(index.versionIsLessThan260) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElCheckbox), {
key: 1,
label: vue.unref(index.getTableKey)(item),
disabled: item.disabledHeaderFilter,
class: "plus-table-title-bar__toolbar__checkbox__item"
}, {
default: vue.withCtx(() => [
vue.unref(index.getLabel)(item.label).length > overflowLabelLength.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
key: 0,
content: vue.unref(index.getLabel)(item.label),
placement: "right-start"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(getLabelValue(item.label)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_8,
vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
1
/* TEXT */
))
]),
_: 2
/* DYNAMIC */
}, 1032, ["label", "disabled"])) : (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
vue.createCommentVNode(" element-plus \u7248\u672C\u53F7\u5927\u4E8E\u7B49\u4E8E2.6.0 "),
vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
value: vue.unref(index.getTableKey)(item),
disabled: item.disabledHeaderFilter,
class: "plus-table-title-bar__toolbar__checkbox__item"
}, {
default: vue.withCtx(() => [
vue.unref(index.getLabel)(item.label).length > overflowLabelLength.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
key: 0,
content: vue.unref(index.getLabel)(item.label),
placement: "right-start"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(getLabelValue(item.label)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_9,
vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
1
/* TEXT */
))
]),
_: 2
/* DYNAMIC */
}, 1032, ["value", "disabled"])
],
64
/* STABLE_FRAGMENT */
))
]);
}),
128
/* KEYED_FRAGMENT */
))
],
512
/* NEED_PATCH */
)
]),
_: 3
/* FORWARDED */
}, 8, ["modelValue"])
];
}),
_: 3
/* FORWARDED */
}, 8, ["width", "title"])) : vue.createCommentVNode("v-if", true)
])
]);
};
}
});
exports.default = _sfc_main;