plus-pro-components
Version:
Page level components developed based on Element Plus.
490 lines (487 loc) • 21.3 kB
JavaScript
import { createElementVNode, defineComponent, ref, computed, unref, reactive, watch, onMounted, openBlock, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, createCommentVNode, createBlock, Fragment, renderList, mergeProps, withModifiers } from 'vue';
import { RefreshRight, Setting } from '@element-plus/icons-vue';
import { PlusPopover } from '../../popover/index.mjs';
import '../../../hooks/index.mjs';
import { getTableKey, getLabel, versionIsLessThan299, versionIsLessThan260 } from '../../utils/index.mjs';
import { ElTooltip, ElIcon, ElButton, ElCheckbox, ElLink, ElCheckboxGroup } from 'element-plus';
import Sortable from 'sortablejs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isPlainObject } from '../../utils/is.mjs';
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__ */ createElementVNode(
"svg",
{
viewBox: "0 0 1024 1024",
focusable: "false",
"data-icon": "column-height",
fill: "currentColor",
"aria-hidden": "true"
},
[
/* @__PURE__ */ 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__ */ 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();
const checkboxGroupInstance = ref(null);
const titleBarConfig = computed(() => props.titleBar);
const iconSize = computed(() => {
var _a, _b;
return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.size) || 18;
});
const iconColor = computed(() => {
var _a, _b;
return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.color) || "";
});
const columnSetting = computed(() => {
var _a;
return (_a = titleBarConfig.value) == null ? void 0 : _a.columnSetting;
});
const columnSettingPopoverWidth = computed(() => {
var _a;
return ((_a = columnSetting.value) == null ? void 0 : _a.popoverWidth) || 100;
});
const overflowLabelLength = computed(() => {
var _a;
return ((_a = columnSetting.value) == null ? void 0 : _a.overflowLabelLength) || 6;
});
const sortable = ref(null);
const buttonNameDensity = [
{
size: "default",
text: computed(() => t("plus.table.default"))
},
{
size: "large",
text: computed(() => t("plus.table.loose"))
},
{
size: "small",
text: computed(() => t("plus.table.compact"))
}
];
const getCheckList = (hasDisabled = false) => {
if (hasDisabled) {
return props.columns.filter((item) => item.disabledHeaderFilter === true).filter((item) => unref(item.headerIsChecked) !== false).map((item) => getTableKey(item));
}
return props.columns.filter((item) => unref(item.headerIsChecked) !== false).map((item) => getTableKey(item));
};
const state = 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;
};
watch(
() => props.columnsIsChange,
() => {
state.checkList = getCheckList();
setCheckAllState(state.checkList);
},
{
immediate: true
}
);
const handleCheckAllChange = (val) => {
state.checkList = val ? props.columns.map((item) => getTableKey(item)) : props.columns.filter((item) => item.disabledHeaderFilter === true).map((item) => getTableKey(item));
setCheckAllState(state.checkList);
handleFilterTableConfirm("allCheck");
};
const handleFilterTableConfirm = (type) => {
const filterColumns = props.columns.map((item) => {
if (state.checkList.includes(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 = 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 (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) => unref(item.headerIsChecked) !== false).map((item) => getTableKey(item));
setCheckAllState(state.checkList);
const filterColumns = props.columns.map((item) => ({ ...item }));
emit("filterTableHeader", filterColumns, "reset");
};
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 openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(
toDisplayString(titleBarConfig.value.title),
1
/* TEXT */
)
])
]),
createElementVNode("div", _hoisted_3, [
renderSlot(_ctx.$slots, "toolbar"),
((_a = titleBarConfig.value) == null ? void 0 : _a.refresh) === true ? (openBlock(), createElementBlock("span", {
key: 0,
class: "plus-table-title-bar__toolbar__refresh",
onClick: handleRefresh
}, [
createVNode(unref(ElTooltip), {
effect: "dark",
content: unref(t)("plus.table.refresh"),
placement: "top"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "refresh-icon", {}, () => [
createVNode(unref(ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: withCtx(() => [
createVNode(unref(RefreshRight))
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
])) : createCommentVNode("v-if", true),
createCommentVNode(" \u8868\u683C\u5BC6\u5EA6 "),
((_b = titleBarConfig.value) == null ? void 0 : _b.density) !== false ? (openBlock(), createBlock(unref(PlusPopover), {
key: 1,
placement: "bottom",
width: 200,
trigger: "click",
title: unref(t)("plus.table.density")
}, {
reference: withCtx(() => [
createVNode(unref(ElTooltip), {
effect: "dark",
content: unref(t)("plus.table.density"),
placement: "top"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "density-icon", {}, () => [
createVNode(unref(ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: withCtx(() => [
_hoisted_5
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_4, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(buttonNameDensity, (item) => {
return createVNode(unref(ElButton), {
key: item.size,
plain: _ctx.defaultSize !== item.size,
type: "primary",
size: "small",
onClick: ($event) => handleClickDensity(item.size)
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(item.text)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["plain", "onClick"]);
}),
64
/* STABLE_FRAGMENT */
))
])
]),
_: 3
/* FORWARDED */
}, 8, ["title"])) : createCommentVNode("v-if", true),
createCommentVNode(" \u5217\u8BBE\u7F6E "),
((_c = titleBarConfig.value) == null ? void 0 : _c.columnSetting) !== false ? (openBlock(), createBlock(unref(PlusPopover), {
key: 2,
placement: "bottom",
width: columnSettingPopoverWidth.value,
trigger: "click",
title: unref(t)("plus.table.columnSettings")
}, {
reference: withCtx(() => [
createVNode(unref(ElTooltip), {
effect: "dark",
content: unref(t)("plus.table.columnSettings"),
placement: "top"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "column-settings-icon", {}, () => [
createVNode(unref(ElIcon), {
size: iconSize.value,
color: iconColor.value,
class: "plus-table-title-bar__toolbar__icon"
}, {
default: withCtx(() => [
createVNode(unref(Setting))
]),
_: 1
/* STABLE */
}, 8, ["size", "color"])
])
]),
_: 3
/* FORWARDED */
}, 8, ["content"])
]),
default: withCtx(() => {
var _a2, _b2, _c2;
return [
createElementVNode("div", _hoisted_6, [
createVNode(unref(ElCheckbox), {
modelValue: state.checkAll,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.checkAll = $event),
indeterminate: state.isIndeterminate,
onChange: handleCheckAllChange
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(t)("plus.table.selectAll")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["modelValue", "indeterminate"]),
((_a2 = columnSetting.value) == null ? void 0 : _a2.reset) !== false ? (openBlock(), createBlock(unref(ElLink), mergeProps({
key: 0,
type: "primary",
underline: unref(versionIsLessThan299) ? false : "never",
href: "javaScript:;"
}, unref(isPlainObject)((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) ? (_c2 = columnSetting.value) == null ? void 0 : _c2.reset : {}, {
onClick: withModifiers(resetCheckBoxList, ["stop", "prevent"])
}), {
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(t)("plus.table.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 16, ["underline"])) : createCommentVNode("v-if", true)
]),
createVNode(unref(ElCheckboxGroup), {
modelValue: state.checkList,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.checkList = $event),
onChange: handleCheckGroupChange
}, {
default: withCtx(() => [
createElementVNode(
"div",
{
ref_key: "checkboxGroupInstance",
ref: checkboxGroupInstance,
class: "plus-table-checkbox-sortable-list"
},
[
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.columns, (item) => {
var _a3;
return openBlock(), createElementBlock("div", {
key: item.prop,
class: "plus-table-checkbox-item"
}, [
((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (openBlock(), createElementBlock("div", _hoisted_7, [
renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
createTextVNode("\u2637")
])
])) : createCommentVNode("v-if", true),
createCommentVNode(" element-plus \u7248\u672C\u53F7\u5C0F\u4E8E2.6.0 "),
unref(versionIsLessThan260) ? (openBlock(), createBlock(unref(ElCheckbox), {
key: 1,
label: unref(getTableKey)(item),
disabled: item.disabledHeaderFilter,
class: "plus-table-title-bar__toolbar__checkbox__item"
}, {
default: withCtx(() => [
unref(getLabel)(item.label).length > overflowLabelLength.value ? (openBlock(), createBlock(unref(ElTooltip), {
key: 0,
content: unref(getLabel)(item.label),
placement: "right-start"
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(getLabelValue(item.label)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"])) : (openBlock(), createElementBlock(
"span",
_hoisted_8,
toDisplayString(item.label ? getLabelValue(item.label) : ""),
1
/* TEXT */
))
]),
_: 2
/* DYNAMIC */
}, 1032, ["label", "disabled"])) : (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
createCommentVNode(" element-plus \u7248\u672C\u53F7\u5927\u4E8E\u7B49\u4E8E2.6.0 "),
createVNode(unref(ElCheckbox), {
value: unref(getTableKey)(item),
disabled: item.disabledHeaderFilter,
class: "plus-table-title-bar__toolbar__checkbox__item"
}, {
default: withCtx(() => [
unref(getLabel)(item.label).length > overflowLabelLength.value ? (openBlock(), createBlock(unref(ElTooltip), {
key: 0,
content: unref(getLabel)(item.label),
placement: "right-start"
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(getLabelValue(item.label)),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"])) : (openBlock(), createElementBlock(
"span",
_hoisted_9,
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"])) : createCommentVNode("v-if", true)
])
]);
};
}
});
export { _sfc_main as default };