npm - @nextcloud/vue - Versions diffs - 9.0.0-alpha.1 → 9.0.0-alpha.2 - Mend

@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1017) hide show

package/dist/chunks/NcCounterBubble-CsG1KK6d.cjs ADDED Viewed

@@ -0,0 +1,40 @@
+var d = require("../assets/NcCounterBubble-CuCSao3j.css");
+const e = require("vue"), n = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), u = {
+  name: "NcCounterBubble",
+  props: {
+    type: {
+      type: String,
+      default: "",
+      validator(t) {
+        return ["highlighted", "outlined", ""].indexOf(t) !== -1;
+      }
+    },
+    /**
+     * Specifies whether the component is used within a component that is
+     * active and therefore has a primary background. Inverts the color of
+     * this component when that is the case.
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    counterClassObject() {
+      return {
+        "counter-bubble__counter--highlighted": this.type === "highlighted",
+        "counter-bubble__counter--outlined": this.type === "outlined",
+        active: this.active
+      };
+    }
+  }
+};
+function o(t, l, i, s, a, r) {
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass([r.counterClassObject, "counter-bubble__counter"])
+  }, [
+    e.renderSlot(t.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+const c = /* @__PURE__ */ n._export_sfc(u, [["render", o], ["__scopeId", "data-v-b318b0e4"]]);
+exports.NcCounterBubble = c;

package/dist/chunks/NcCounterBubble-CsG1KK6d.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcCounterBubble-CsG1KK6d.cjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","vue","$options"],"mappings":";mFAqDAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,eAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;;"}

package/dist/chunks/NcCounterBubble-qywYxMp0.mjs ADDED Viewed

@@ -0,0 +1,44 @@
+import "../assets/NcCounterBubble-CuCSao3j.css";
+import { openBlock as o, createElementBlock as r, normalizeClass as n, renderSlot as c } from "vue";
+import { _ as u } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const l = {
+  name: "NcCounterBubble",
+  props: {
+    type: {
+      type: String,
+      default: "",
+      validator(e) {
+        return ["highlighted", "outlined", ""].indexOf(e) !== -1;
+      }
+    },
+    /**
+     * Specifies whether the component is used within a component that is
+     * active and therefore has a primary background. Inverts the color of
+     * this component when that is the case.
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    counterClassObject() {
+      return {
+        "counter-bubble__counter--highlighted": this.type === "highlighted",
+        "counter-bubble__counter--outlined": this.type === "outlined",
+        active: this.active
+      };
+    }
+  }
+};
+function i(e, a, s, d, p, t) {
+  return o(), r("div", {
+    class: n([t.counterClassObject, "counter-bubble__counter"])
+  }, [
+    c(e.$slots, "default", {}, void 0, !0)
+  ], 2);
+}
+const f = /* @__PURE__ */ u(l, [["render", i], ["__scopeId", "data-v-b318b0e4"]]);
+export {
+  f as N
+};

package/dist/chunks/NcCounterBubble-qywYxMp0.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcCounterBubble-qywYxMp0.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","normalizeClass","$options"],"mappings":";;;AAqDA,MAAAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;"}

package/dist/chunks/NcDashboardWidget-C2GJEVVp.cjs ADDED Viewed

@@ -0,0 +1,161 @@
+var B = require("../assets/NcDashboardWidget-DvHdCtYW.css");
+const d = require("./NcAvatar-B3R0ACOT.cjs"), h = require("./NcDashboardWidgetItem-CB3bDffz.cjs"), u = require("./NcEmptyContent-DmwlAinq.cjs"), p = require("./Check-DfVOclb6.cjs"), a = require("./_l10n-CEec8lDL.cjs"), e = require("vue"), y = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+a.register(a.t28);
+const g = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: d.NcAvatar,
+    NcDashboardWidgetItem: h.NcDashboardWidgetItem,
+    NcEmptyContent: u.NcEmptyContent,
+    Check: p.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: () => []
+    },
+    /**
+     * 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: a.t("More items …")
+    },
+    /**
+     * A boolean to put the widget in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each item.
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * 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 t = {};
+      for (const s in this.itemMenu)
+        t[s] = (n) => {
+          this.$emit(s, n);
+        };
+      return t;
+    },
+    displayedItems() {
+      const t = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, t);
+    },
+    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;
+    }
+  }
+}, C = (t) => (e.pushScopeId("data-v-b0ac6ae2"), t = t(), e.popScopeId(), t), N = { class: "dashboard-widget" }, _ = { key: 1 }, k = /* @__PURE__ */ C(() => /* @__PURE__ */ e.createElementVNode("div", { class: "item__details" }, [
+  /* @__PURE__ */ e.createElementVNode("h3", null, " "),
+  /* @__PURE__ */ e.createElementVNode("p", { class: "message" }, "   ")
+], -1)), f = ["href"];
+function E(t, s, n, I, v, o) {
+  const l = e.resolveComponent("Check"), c = e.resolveComponent("NcEmptyContent"), m = e.resolveComponent("NcDashboardWidgetItem"), i = e.resolveComponent("NcAvatar");
+  return e.openBlock(), e.createElementBlock("div", N, [
+    o.showHalfEmptyContentArea ? (e.openBlock(), e.createBlock(c, {
+      key: 0,
+      description: o.halfEmptyContentString,
+      class: "half-screen"
+    }, {
+      icon: e.withCtx(() => [
+        e.renderSlot(t.$slots, "halfEmptyContentIcon", {}, () => [
+          e.createVNode(l)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["description"])) : e.createCommentVNode("", !0),
+    e.createElementVNode("ul", null, [
+      (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(o.displayedItems, (r) => (e.openBlock(), e.createElementBlock("li", {
+        key: r.id
+      }, [
+        e.renderSlot(t.$slots, "default", { item: r }, () => [
+          e.createVNode(m, e.mergeProps(r, { "item-menu": n.itemMenu }, e.toHandlers(o.handlers)), null, 16, ["item-menu"])
+        ], !0)
+      ]))), 128))
+    ]),
+    n.loading ? (e.openBlock(), e.createElementBlock("div", _, [
+      (e.openBlock(), e.createElementBlock(e.Fragment, null, e.renderList(7, (r) => e.createElementVNode("div", {
+        key: r,
+        class: "item-list__entry"
+      }, [
+        e.createVNode(i, {
+          class: "item-avatar",
+          size: 44
+        }),
+        k
+      ])), 64))
+    ])) : n.items.length === 0 ? e.renderSlot(t.$slots, "empty-content", { key: 2 }, () => [
+      n.emptyContentMessage ? (e.openBlock(), e.createBlock(c, {
+        key: 0,
+        description: n.emptyContentMessage
+      }, {
+        icon: e.withCtx(() => [
+          e.renderSlot(t.$slots, "emptyContentIcon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["description"])) : e.createCommentVNode("", !0)
+    ], !0) : o.showMore ? (e.openBlock(), e.createElementBlock("a", {
+      key: 3,
+      href: n.showMoreUrl,
+      target: "_blank",
+      class: "more",
+      tabindex: "0"
+    }, e.toDisplayString(n.showMoreLabel), 9, f)) : e.createCommentVNode("", !0)
+  ]);
+}
+const b = /* @__PURE__ */ y._export_sfc(g, [["render", E], ["__scopeId", "data-v-b0ac6ae2"]]);
+exports.NcDashboardWidget = b;

package/dist/chunks/NcDashboardWidget-C2GJEVVp.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDashboardWidget-C2GJEVVp.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3> </h3>\n\t\t\t\t\t<p class=\"message\">\n \n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","vue","_hoisted_4","$options","_ctx","item","_hoisted_2","i","$props"],"mappings":";;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC,EAAA;AAAA,IACA,uBAAAC,EAAA;AAAA,IACA,gBAAAC,EAAA;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,8EA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,mBAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,mBAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAD,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAD,GAAA;AAAA;;MAIG,aAAAG,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAF,EAAA,QAAA,MAAA;AAAA,QAEVA,EAAA,WAAAG,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJH,EAAA,mBAAA,IAAA,EAAA;AAAA;OA6LGA,EAAA,UAAA,EAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAAE,EAAA,gBAAA,CAAAE;;;QAECJ,EAAA,WAAAG,EAAA,QAAA,WAAA,EAAA,MAAAC,EAAA,GAAA,MAAA;AAAA;;;;iBAQFJ,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAK,GAAA;AAAA,OACCL,EAAA,UAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAA,GAAA,CAAAM;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAP,EAAA,QAAA,MAAA;AAAA;;;gCAtNfA,EAAA,mBAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAO,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAP,EAAA,gBAAAO,EAAA,aAAA,GAAA,GAAAN,CAAA,KAlOND,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}

package/dist/chunks/NcDashboardWidget-CKSAHnoN.mjs ADDED Viewed

@@ -0,0 +1,169 @@
+import "../assets/NcDashboardWidget-DvHdCtYW.css";
+import { N } from "./NcAvatar-DVbgzwca.mjs";
+import { N as I } from "./NcDashboardWidgetItem-rzVYkWCJ.mjs";
+import { N as b } from "./NcEmptyContent-CYEf8Lje.mjs";
+import { C as M } from "./Check-C_8Ygo3G.mjs";
+import { r as w, k as E, a as k } from "./_l10n-D1NkaqfQ.mjs";
+import { resolveComponent as m, openBlock as n, createElementBlock as s, createBlock as p, withCtx as u, renderSlot as i, createVNode as c, createCommentVNode as d, createElementVNode as a, Fragment as y, renderList as f, mergeProps as v, toHandlers as S, toDisplayString as A, pushScopeId as x, popScopeId as D } from "vue";
+import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+w(E);
+const W = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: N,
+    NcDashboardWidgetItem: I,
+    NcEmptyContent: b,
+    Check: M
+  },
+  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: () => []
+    },
+    /**
+     * 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: k("More items …")
+    },
+    /**
+     * A boolean to put the widget in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each item.
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 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: !1
+    },
+    /**
+     * 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 e = {};
+      for (const l in this.itemMenu)
+        e[l] = (t) => {
+          this.$emit(l, t);
+        };
+      return e;
+    },
+    displayedItems() {
+      const e = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, e);
+    },
+    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;
+    }
+  }
+}, U = (e) => (x("data-v-b0ac6ae2"), e = e(), D(), e), H = { class: "dashboard-widget" }, L = { key: 1 }, V = /* @__PURE__ */ U(() => /* @__PURE__ */ a("div", { class: "item__details" }, [
+  /* @__PURE__ */ a("h3", null, " "),
+  /* @__PURE__ */ a("p", { class: "message" }, "   ")
+], -1)), j = ["href"];
+function z(e, l, t, F, O, o) {
+  const g = m("Check"), h = m("NcEmptyContent"), _ = m("NcDashboardWidgetItem"), C = m("NcAvatar");
+  return n(), s("div", H, [
+    o.showHalfEmptyContentArea ? (n(), p(h, {
+      key: 0,
+      description: o.halfEmptyContentString,
+      class: "half-screen"
+    }, {
+      icon: u(() => [
+        i(e.$slots, "halfEmptyContentIcon", {}, () => [
+          c(g)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["description"])) : d("", !0),
+    a("ul", null, [
+      (n(!0), s(y, null, f(o.displayedItems, (r) => (n(), s("li", {
+        key: r.id
+      }, [
+        i(e.$slots, "default", { item: r }, () => [
+          c(_, v(r, { "item-menu": t.itemMenu }, S(o.handlers)), null, 16, ["item-menu"])
+        ], !0)
+      ]))), 128))
+    ]),
+    t.loading ? (n(), s("div", L, [
+      (n(), s(y, null, f(7, (r) => a("div", {
+        key: r,
+        class: "item-list__entry"
+      }, [
+        c(C, {
+          class: "item-avatar",
+          size: 44
+        }),
+        V
+      ])), 64))
+    ])) : t.items.length === 0 ? i(e.$slots, "empty-content", { key: 2 }, () => [
+      t.emptyContentMessage ? (n(), p(h, {
+        key: 0,
+        description: t.emptyContentMessage
+      }, {
+        icon: u(() => [
+          i(e.$slots, "emptyContentIcon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["description"])) : d("", !0)
+    ], !0) : o.showMore ? (n(), s("a", {
+      key: 3,
+      href: t.showMoreUrl,
+      target: "_blank",
+      class: "more",
+      tabindex: "0"
+    }, A(t.showMoreLabel), 9, j)) : d("", !0)
+  ]);
+}
+const X = /* @__PURE__ */ B(W, [["render", z], ["__scopeId", "data-v-b0ac6ae2"]]);
+export {
+  X as N
+};

package/dist/chunks/NcDashboardWidget-CKSAHnoN.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDashboardWidget-CKSAHnoN.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3> </h3>\n\t\t\t\t\t<p class=\"message\">\n \n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","createElementVNode","_hoisted_4","openBlock","createElementBlock","$options","withCtx","renderSlot","_ctx","createCommentVNode","Fragment","renderList","item","_hoisted_2","i","$props","toDisplayString"],"mappings":";;;;;;;;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,uDA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAC,EAAA,GAAAC,EAAA,OAAAJ,GAAA;AAAA;;MAIG,aAAAK,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAC,EAAA,MAAA;AAAA,QAEVC,EAAAC,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJC,EAAA,IAAA,EAAA;AAAA;OA6LGN,EAAA,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAAN,EAAA,gBAAA,CAAAO;;;QAECL,EAAAC,EAAA,QAAA,WAAA,EAAA,MAAAI,EAAA,GAAA,MAAA;AAAA;;;;iBAQFT,EAAA,GAAAC,EAAA,OAAAS,GAAA;AAAA,OACCV,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAA,GAAA,CAAAG;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAT,EAAA,MAAA;AAAA;;;gCAtNfG,EAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAM,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAC,EAAAD,EAAA,aAAA,GAAA,GAAAb,CAAA,KAlONO,EAAA,IAAA,EAAA;AAAA;;;"}