@nextcloud/vue
Version:
Nextcloud vue components
228 lines (227 loc) • 7.66 kB
JavaScript
import '../assets/NcDashboardWidget-DFY9GRrd.css';
import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createBlock, renderSlot, withCtx, createVNode, Fragment, renderList, toHandlers } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { r as register, n as t35, a as t } from "./_l10n-DrTiip5c.mjs";
import { N as NcAvatar } from "./NcAvatar-DmUGApWA.mjs";
import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-C_xl9X2u.mjs";
import { N as NcEmptyContent } from "./NcEmptyContent-B8-90BSI.mjs";
const _sfc_main$1 = {
name: "CheckIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
const _hoisted_1$1 = ["aria-hidden", "aria-label"];
const _hoisted_2$1 = ["fill", "width", "height"];
const _hoisted_3$1 = { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" };
const _hoisted_4 = { key: 0 };
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
"aria-hidden": $props.title ? null : "true",
"aria-label": $props.title,
class: "material-design-icon check-icon",
role: "img",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
(openBlock(), createElementBlock("svg", {
fill: $props.fillColor,
class: "material-design-icon__svg",
width: $props.size,
height: $props.size,
viewBox: "0 0 24 24"
}, [
createElementVNode("path", _hoisted_3$1, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$1))
], 16, _hoisted_1$1);
}
const Check = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
register(t35);
const _sfc_main = {
name: "NcDashboardWidget",
components: {
NcAvatar,
NcDashboardWidgetItem,
NcEmptyContent,
Check
},
props: {
/**
* An array containing the items to show (specific structure must be respected,
* except if you override item rendering in the default slot).
*/
items: {
type: Array,
default: () => {
return [];
}
},
/**
* If this is set, a "show more" text is displayed on the widget's bottom.
* It's a link pointing to this URL.
*/
showMoreUrl: {
type: String,
default: ""
},
/**
* The text of show more button.
*
* Expected to be in the form "More {itemName} …"
*/
showMoreLabel: {
type: String,
default: t("More items …")
},
/**
* A boolean to put the widget in a loading state.
*/
loading: {
type: Boolean,
default: false
},
/**
* An object containing context menu entries that will be displayed for each item.
*/
itemMenu: {
type: Object,
default: () => {
return {};
}
},
/**
* Whether both the items and the empty content message are shown.
* Usefull for e.g. showing "No mentions" and a list of elements.
*/
showItemsAndEmptyContent: {
type: Boolean,
default: false
},
/**
* The text to show in the empty content area.
*/
emptyContentMessage: {
type: String,
default: ""
},
/**
* The text to show in the half empty content area.
*/
halfEmptyContentMessage: {
type: String,
default: ""
}
},
computed: {
// forward menu events to my parent
handlers() {
const h = {};
for (const evName in this.itemMenu) {
h[evName] = (it) => {
this.$emit(evName, it);
};
}
return h;
},
displayedItems() {
const nbItems = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
return this.items.slice(0, nbItems);
},
showHalfEmptyContentArea() {
return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
},
halfEmptyContentString() {
return this.halfEmptyContentMessage || this.emptyContentMessage;
},
maxItemNumber() {
return this.showItemsAndEmptyContent ? 5 : 7;
},
showMore() {
return this.showMoreUrl && this.items.length >= this.maxItemNumber;
}
}
};
const _hoisted_1 = { class: "dashboard-widget" };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = ["href"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Check = resolveComponent("Check");
const _component_NcEmptyContent = resolveComponent("NcEmptyContent");
const _component_NcDashboardWidgetItem = resolveComponent("NcDashboardWidgetItem");
const _component_NcAvatar = resolveComponent("NcAvatar");
return openBlock(), createElementBlock("div", _hoisted_1, [
$options.showHalfEmptyContentArea ? (openBlock(), createBlock(_component_NcEmptyContent, {
key: 0,
description: $options.halfEmptyContentString,
class: "half-screen"
}, {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "halfEmptyContentIcon", {}, () => [
createVNode(_component_Check)
], true)
]),
_: 3
}, 8, ["description"])) : createCommentVNode("", true),
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.displayedItems, (item) => {
return openBlock(), createElementBlock("li", {
key: item.id
}, [
renderSlot(_ctx.$slots, "default", { item }, () => [
createVNode(_component_NcDashboardWidgetItem, mergeProps({ ref_for: true }, item, { "item-menu": $props.itemMenu }, toHandlers($options.handlers)), null, 16, ["item-menu"])
], true)
]);
}), 128))
]),
$props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [
(openBlock(), createElementBlock(Fragment, null, renderList(7, (i) => {
return createElementVNode("div", {
key: i,
class: "item-list__entry"
}, [
createVNode(_component_NcAvatar, {
class: "item-avatar",
size: 44
}),
_cache[0] || (_cache[0] = createElementVNode("div", { class: "item__details" }, [
createElementVNode("h3", null, " "),
createElementVNode("p", { class: "message" }, " ")
], -1))
]);
}), 64))
])) : $props.items.length === 0 ? renderSlot(_ctx.$slots, "empty-content", { key: 2 }, () => [
$props.emptyContentMessage ? (openBlock(), createBlock(_component_NcEmptyContent, {
key: 0,
description: $props.emptyContentMessage
}, {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "emptyContentIcon", {}, void 0, true)
]),
_: 3
}, 8, ["description"])) : createCommentVNode("", true)
], true) : $options.showMore ? (openBlock(), createElementBlock("a", {
key: 3,
href: $props.showMoreUrl,
target: "_blank",
class: "more",
tabindex: "0"
}, toDisplayString($props.showMoreLabel), 9, _hoisted_3)) : createCommentVNode("", true)
]);
}
const NcDashboardWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6b5fc397"]]);
export {
NcDashboardWidget as N
};
//# sourceMappingURL=NcDashboardWidget-Bz1t6sj0.mjs.map