yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
377 lines (376 loc) • 13.9 kB
JavaScript
"use strict";
const vue = require("vue");
const core = require("../utils/core");
const receiver = require("../ele-config-provider/receiver");
const EleDropdown = require("../ele-dropdown/index");
const FileGrid = require("./components/file-grid");
const FileTable = require("./components/file-table");
const props = require("./props");
const GRID_ITEM_SEL = ".ele-file-list-body>.ele-file-list-item";
const _sfc_main = vue.defineComponent({
name: "EleFileList",
components: { EleDropdown, FileGrid, FileTable },
props: props.fileListProps,
emits: props.fileListEmits,
setup(props2, { emit }) {
const { lang } = receiver.useLocale("fileList", props2);
const selectorStyle = vue.reactive({
top: "0px",
left: "0px",
width: "0px",
height: "0px",
display: "none"
});
const ctxMenuDropdownRef = vue.ref(null);
const ctxMenuDropdownItems = vue.shallowRef([]);
const ctxMenuDropdownVirtualRef = vue.ref();
const ctxMenuDropdownVisible = vue.ref(false);
const contextMenuFileItem = vue.ref(null);
const isCheckAll = vue.computed(() => {
return !!(props2.data && props2.data.length && props2.selections && props2.selections.length && !props2.data.some(
(d) => {
var _a, _b;
return !((_b = (_a = props2.selections) == null ? void 0 : _a.some) == null ? void 0 : _b.call(_a, (t) => d.key === t.key));
}
));
});
const isIndeterminate = vue.computed(() => {
return !!(!isCheckAll.value && props2.selections && props2.selections.length);
});
const updateSelections = (selection) => {
emit("update:selections", selection);
};
const updateCurrent = (current) => {
emit("update:current", current);
};
const handleCheckAllChange = () => {
if (props2.selectionType !== "checkbox") {
return;
}
if (isCheckAll.value || props2.data == null || !props2.data.length) {
if (!props2.selections) {
updateSelections([]);
return;
}
const temp2 = props2.selections.filter((d) => {
return props2.data ? !props2.data.some((t) => t.key === d.key) : true;
});
updateSelections(temp2);
return;
}
if (!props2.selections) {
updateSelections([...props2.data]);
return;
}
const temp = props2.selections.concat(
props2.data.filter((d) => {
return props2.selections ? !props2.selections.some((t) => t.key === d.key) : true;
})
);
updateSelections(temp);
};
const handleItemCheckChange = (item) => {
if (props2.selectionType === "radio") {
updateCurrent(
props2.current && props2.current.key === item.key ? null : item
);
return;
}
if (props2.selectionType !== "checkbox") {
return;
}
if (!props2.selections || !props2.selections.length) {
updateSelections([item]);
return;
}
if (!props2.selections.some((t) => t.key === item.key)) {
updateSelections(props2.selections.concat([item]));
return;
}
updateSelections(props2.selections.filter((t) => t.key !== item.key));
};
const handleItemClick = (item) => {
emit("itemClick", item);
};
const handleSortChange = (name) => {
const sorter = { sort: name };
if (props2.order && name === props2.sort) {
sorter.order = props2.order === "asc" ? "desc" : null;
} else {
sorter.order = "asc";
}
emit("sortChange", sorter);
};
const handleItemContextMenu = (option) => {
emit("itemContextMenu", option);
};
const handleItemCtxMenuClick = (key) => {
if (contextMenuFileItem.value != null) {
emit("itemContextMenu", { key, item: contextMenuFileItem.value });
}
};
const handleItemCtxMenuVisible = (visible) => {
ctxMenuDropdownVisible.value = visible;
if (visible && ctxMenuDropdownRef.value != null && contextMenuFileItem.value != null) {
emit(
"itemContextOpen",
ctxMenuDropdownRef.value,
contextMenuFileItem.value
);
}
};
const getContextMenus = (item) => {
if (typeof props2.contextMenus === "function") {
return props2.contextMenus(item);
}
return props2.contextMenus;
};
const hideAllDropdown = () => {
if (ctxMenuDropdownRef.value) {
ctxMenuDropdownRef.value.handleClose();
}
};
const showItemContextMenu = (item, triggerEl) => {
if (contextMenuFileItem.value != null && contextMenuFileItem.value === item) {
return;
}
hideAllDropdown();
vue.nextTick(() => {
contextMenuFileItem.value = item;
ctxMenuDropdownItems.value = getContextMenus(item) || [];
ctxMenuDropdownVirtualRef.value = triggerEl;
if (ctxMenuDropdownItems.value.length) {
vue.nextTick(() => {
ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
});
}
});
};
const handleItemContextOpen = (option) => {
if (props2.contextMenus == null) {
return;
}
option.e.preventDefault();
option.e.stopPropagation();
if (ctxMenuDropdownVirtualRef.value !== option.triggerEl) {
showItemContextMenu(option.item, option.triggerEl);
return;
}
if (ctxMenuDropdownItems.value.length && ctxMenuDropdownRef.value) {
ctxMenuDropdownRef.value.handleOpen();
}
};
const handleMousedown = (event) => {
if (!props2.boxChoose || props2.selectionType !== "checkbox") {
return;
}
const downX = event.clientX;
const downY = event.clientY;
const target = event.currentTarget;
const position = target.getBoundingClientRect();
const items = Array.from(target.querySelectorAll(GRID_ITEM_SEL));
const mousemoveFn = core.throttle((e) => {
const moveX = Math.max(e.clientX, position.left);
const moveY = Math.max(e.clientY, position.top);
const left = Math.min(moveX, downX) - position.left;
const top = Math.min(moveY, downY) - position.top;
const width = Math.min(
Math.abs(moveX - downX),
target.clientWidth - left
);
const height = Math.min(
Math.abs(moveY - downY),
target.clientHeight - top
);
selectorStyle.left = left + "px";
selectorStyle.top = top + "px";
selectorStyle.width = width + "px";
selectorStyle.height = height + "px";
selectorStyle.display = "block";
if (width < 6 || height < 6) {
items.forEach((item) => {
item.classList.remove("is-active");
});
return;
}
event.stopPropagation();
event.preventDefault();
e.stopPropagation();
e.preventDefault();
items.forEach((item) => {
const itemX = item.offsetLeft + item.clientWidth;
const itemY = item.offsetTop + item.clientHeight;
if (itemX > left && itemY > top && item.offsetLeft < left + width && item.offsetTop < top + height) {
item.classList.add("is-active");
} else {
item.classList.remove("is-active");
}
});
}, 60);
const mouseupFn = (e) => {
selectorStyle.display = "none";
const moveX = Math.max(e.clientX, position.left);
const moveY = Math.max(e.clientY, position.top);
const left = Math.min(moveX, downX) - position.left;
const top = Math.min(moveY, downY) - position.top;
const width = Math.min(
Math.abs(moveX - downX),
target.clientWidth - left
);
const height = Math.min(
Math.abs(moveY - downY),
target.clientHeight - top
);
if (width > 6 && height > 6) {
const checked = [];
items.forEach((item, i) => {
if (item.classList.contains("is-active")) {
item.classList.remove("is-active");
if (props2.data && props2.data[i]) {
checked.push(props2.data[i]);
}
}
});
if (checked.length) {
updateSelections(checked);
}
}
document.removeEventListener("mousemove", mousemoveFn);
document.removeEventListener("mouseup", mouseupFn);
};
document.addEventListener("mousemove", mousemoveFn);
document.addEventListener("mouseup", mouseupFn);
};
vue.watch(
[() => props2.grid, () => props2.data],
() => {
hideAllDropdown();
ctxMenuDropdownVirtualRef.value = null;
contextMenuFileItem.value = null;
},
{ deep: true }
);
vue.onBeforeUnmount(() => {
contextMenuFileItem.value = null;
});
return {
lang,
selectorStyle,
ctxMenuDropdownRef,
ctxMenuDropdownItems,
ctxMenuDropdownVirtualRef,
ctxMenuDropdownVisible,
contextMenuFileItem,
isCheckAll,
isIndeterminate,
handleCheckAllChange,
handleItemCheckChange,
handleItemClick,
handleSortChange,
handleItemContextMenu,
handleItemCtxMenuClick,
handleItemCtxMenuVisible,
handleItemContextOpen,
handleMousedown
};
}
});
const _export_sfc = (sfc, props2) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props2) {
target[key] = val;
}
return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_FileGrid = vue.resolveComponent("FileGrid");
const _component_FileTable = vue.resolveComponent("FileTable");
const _component_EleDropdown = vue.resolveComponent("EleDropdown");
return vue.openBlock(), vue.createElementBlock("div", {
class: "ele-file-list-group",
onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
}, [
_ctx.grid ? (vue.openBlock(), vue.createBlock(_component_FileGrid, {
key: 0,
data: _ctx.data,
icons: _ctx.icons,
selectionType: _ctx.selectionType,
selections: _ctx.selections,
current: _ctx.current,
isCheckAll: _ctx.isCheckAll,
isIndeterminate: _ctx.isIndeterminate,
checkAllText: _ctx.lang.selectAll,
selectedText: _ctx.lang.selectTips,
ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
contextMenuFileItem: _ctx.contextMenuFileItem,
onCheckAllChange: _ctx.handleCheckAllChange,
onItemClick: _ctx.handleItemClick,
onItemCheckChange: _ctx.handleItemCheckChange,
onItemContextOpen: _ctx.handleItemContextOpen
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen"])) : (vue.openBlock(), vue.createBlock(_component_FileTable, {
key: 1,
data: _ctx.data,
icons: _ctx.icons,
selectionType: _ctx.selectionType,
selections: _ctx.selections,
current: _ctx.current,
isCheckAll: _ctx.isCheckAll,
isIndeterminate: _ctx.isIndeterminate,
nameText: _ctx.lang.fileName,
sizeText: _ctx.lang.fileSize,
timeText: _ctx.lang.fileTimestamp,
sortable: _ctx.sortable,
sort: _ctx.sort,
order: _ctx.order,
columns: _ctx.columns,
ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
contextMenuFileItem: _ctx.contextMenuFileItem,
onCheckAllChange: _ctx.handleCheckAllChange,
onItemClick: _ctx.handleItemClick,
onItemCheckChange: _ctx.handleItemCheckChange,
onItemContextOpen: _ctx.handleItemContextOpen,
onSortChange: _ctx.handleSortChange
}, vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen", "onSortChange"])),
vue.createElementVNode("div", {
class: "ele-file-list-selector",
style: vue.normalizeStyle(_ctx.selectorStyle)
}, null, 4),
_ctx.contextMenus ? (vue.openBlock(), vue.createBlock(_component_EleDropdown, vue.mergeProps({
key: 2,
persistent: false,
placement: "bottom-start",
popperClass: "ele-file-list-item-context"
}, _ctx.contextMenuProps || {}, {
ref: "ctxMenuDropdownRef",
componentType: "pro",
preventContextmenu: true,
trigger: "click",
virtualTriggering: true,
virtualRef: _ctx.ctxMenuDropdownVirtualRef,
disabled: !_ctx.ctxMenuDropdownItems.length,
items: _ctx.ctxMenuDropdownItems,
onCommand: _ctx.handleItemCtxMenuClick,
onVisibleChange: _ctx.handleItemCtxMenuVisible
}), null, 16, ["virtualRef", "disabled", "items", "onCommand", "onVisibleChange"])) : vue.createCommentVNode("", true)
], 32);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;