xiaoyu
102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
import FileGridItem from "./file-grid-item";
|
|
const fileGrid = {
|
|
name: "FileGrid",
|
|
props: {
|
|
data: Array,
|
|
icons: Array,
|
|
selection: Array,
|
|
checkbox: Boolean,
|
|
checked: Boolean,
|
|
indeterminate: Boolean,
|
|
total: Number,
|
|
totalText: String,
|
|
checkAllText: String
|
|
},
|
|
emits: [
|
|
"check-all-change",
|
|
"item-click",
|
|
"item-check-change",
|
|
"item-context-menu"
|
|
],
|
|
computed: {
|
|
checkboxClass() {
|
|
return [
|
|
"ele-file-list-check ele-file-icon-check",
|
|
{ checked: this.checked },
|
|
{ indeterminate: this.indeterminate }
|
|
];
|
|
}
|
|
},
|
|
methods: {
|
|
onCheckAllChange() {
|
|
this.$emit("check-all-change");
|
|
},
|
|
onItemClick(item) {
|
|
this.$emit("item-click", item);
|
|
},
|
|
onItemCheckChange(item) {
|
|
this.$emit("item-check-change", item);
|
|
},
|
|
onItemContextMenu(option) {
|
|
this.$emit("item-context-menu", option);
|
|
}
|
|
},
|
|
render(h) {
|
|
var _a, _b;
|
|
const nodes = [];
|
|
if (this.checkbox) {
|
|
nodes.push(
|
|
h("div", { class: "ele-file-list-header" }, [
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-check-group",
|
|
on: {
|
|
click: (e) => {
|
|
e.stopPropagation();
|
|
this.onCheckAllChange();
|
|
}
|
|
}
|
|
},
|
|
[
|
|
h("i", { class: this.checkboxClass }),
|
|
h(
|
|
"div",
|
|
{},
|
|
this.total ? (_a = this.totalText) == null ? void 0 : _a.replace(/{total}/g, String(this.total)) : this.checkAllText
|
|
)
|
|
]
|
|
)
|
|
])
|
|
);
|
|
}
|
|
nodes.push(
|
|
h(
|
|
"div",
|
|
{ class: "ele-file-list-body" },
|
|
(_b = this.data) == null ? void 0 : _b.map((item, key) => {
|
|
return h(FileGridItem, {
|
|
key,
|
|
props: {
|
|
item,
|
|
icons: this.icons,
|
|
checkbox: this.checkbox,
|
|
selection: this.selection
|
|
},
|
|
on: {
|
|
"item-click": this.onItemClick,
|
|
"item-check-change": this.onItemCheckChange,
|
|
"context-menu": this.onItemContextMenu
|
|
},
|
|
scopedSlots: this.$scopedSlots
|
|
});
|
|
})
|
|
)
|
|
);
|
|
return h("div", { class: "ele-file-list" }, nodes);
|
|
}
|
|
};
|
|
export {
|
|
fileGrid as default
|
|
};
|