@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcCounterBubble-BKPpoBiy.mjs

@@ -0,0 +1,122 @@
+import '../assets/NcCounterBubble-sz81L2Mt.css';
+import { getCanonicalLocale } from "@nextcloud/l10n";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = {
+  name: "NcCounterBubble",
+  props: {
+    /**
+     * Visual appearence of the counter bubble
+     */
+    type: {
+      type: String,
+      default: "",
+      validator(value) {
+        return ["highlighted", "outlined", ""].includes(value);
+      }
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * The count to display in the counter bubble.
+     * Alternatively, you can pass any value to the default slot.
+     */
+    count: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    /**
+     * Disables humanization to display count or content as it is
+     */
+    raw: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    counterClassObject() {
+      return {
+        "counter-bubble__counter--highlighted": this.type === "highlighted",
+        "counter-bubble__counter--outlined": this.type === "outlined",
+        active: this.active
+      };
+    },
+    humanizedCount() {
+      return this.humanizeCount(this.count);
+    }
+  },
+  methods: {
+    humanizeCount(count) {
+      if (this.raw) {
+        return count.toString();
+      }
+      const formatter = new Intl.NumberFormat(getCanonicalLocale(), {
+        notation: "compact",
+        compactDisplay: "short"
+      });
+      return formatter.format(count);
+    },
+    /**
+     * Get the humanized count from `count` prop
+     *
+     * @return {{ humanized: string, original: string} | undefined}
+     */
+    getHumanizedCount() {
+      var _a, _b;
+      if (this.count !== void 0) {
+        return {
+          humanized: this.humanizedCount,
+          original: this.count.toString()
+        };
+      }
+      if (this.raw) {
+        return void 0;
+      }
+      if (((_a = this.$slots.default) == null ? void 0 : _a.length) === 1) {
+        const slotContent = (_b = this.$slots.default[0].text) == null ? void 0 : _b.trim();
+        if (slotContent && /^\d+$/.test(slotContent)) {
+          const count = parseInt(slotContent, 10);
+          return {
+            humanized: this.humanizeCount(count),
+            original: slotContent
+          };
+        }
+      }
+    }
+  },
+  render(h) {
+    var _a;
+    const count = this.getHumanizedCount();
+    return h("div", {
+      staticClass: "counter-bubble__counter",
+      class: this.counterClassObject,
+      attrs: {
+        // Show original count in title if humanized
+        title: count && count.original !== count.humanized ? count.original : void 0
+      }
+    }, [(_a = count == null ? void 0 : count.humanized) != null ? _a : this.$slots.default]);
+  }
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "7d9795d6"
+);
+const NcCounterBubble = __component__.exports;
+export {
+  NcCounterBubble as N
+};
+//# sourceMappingURL=NcCounterBubble-BKPpoBiy.mjs.map

package/dist/chunks/NcCounterBubble-BKPpoBiy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcCounterBubble-BKPpoBiy.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default usage\n\nNcCounterBubble displays a number from the `count` prop in a bubble.\n\nBy default, the number is **humanized** according to Nextcloud user's locale setting. Humanization can be disabled via `raw` prop.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>count</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" />\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" raw />\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: [1, 9, 75, 450, 1042, 1750, 1999, 14567, 14567890, 2000000008],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Styles\n\nUse different styles for different types of counters.\n\n```\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>type</th>\n\t\t\t<th>counter</th>\n\t\t\t<th>Usage example</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>'' (default)</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" />\n\t\t\t</td>\n\t\t\t<td></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined</td>\n\t\t\t<td><NcCounterBubble :count=\"3\" type=\"outlined\" /></td>\n\t\t\t<td>Team/group mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" />\n\t\t\t</td>\n\t\t\t<td>Direct mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"outlined\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"outlined\", but in an \"active\" container</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"highlighted\", but in an \"active\" container</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n\n\t&.active-like {\n\t\tbackground-color: var(--color-primary-element);\n\t}\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Custom content (deprecated)\n\nYou can use the default slot to pass any custom content. If you pass a plain number to the default slot, without raw prop it will be humanized like via `count` prop.\n\n**DEPRECATED:** passing count via slot content is **deprecated** and will be removed in the v9. Prefer using `count` prop for numbers or [NcChip](#/Components/NcChip) component for a custom content.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>content</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble>{{ num }}</NcCounterBubble>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble raw>{{ num }}</NcCounterBubble>\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: ['314+', '16 rows', '24564'],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n</docs>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\t/**\n\t\t * Visual appearence of the counter bubble\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].includes(value)\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\n\t\t/**\n\t\t * The count to display in the counter bubble.\n\t\t * Alternatively, you can pass any value to the default slot.\n\t\t */\n\t\tcount: {\n\t\t\ttype: Number,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Disables humanization to display count or content as it is\n\t\t */\n\t\traw: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\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\n\t\thumanizedCount() {\n\t\t\treturn this.humanizeCount(this.count)\n\t\t},\n\t},\n\n\tmethods: {\n\t\thumanizeCount(count) {\n\t\t\tif (this.raw) {\n\t\t\t\treturn count.toString()\n\t\t\t}\n\n\t\t\tconst formatter = new Intl.NumberFormat(getCanonicalLocale(), {\n\t\t\t\tnotation: 'compact',\n\t\t\t\tcompactDisplay: 'short',\n\t\t\t})\n\n\t\t\treturn formatter.format(count)\n\t\t},\n\n\t\t/**\n\t\t * Get the humanized count from `count` prop\n\t\t *\n\t\t * @return {{ humanized: string, original: string} | undefined}\n\t\t */\n\t\tgetHumanizedCount() {\n\t\t\t// If we have count prop - just render from count\n\t\t\tif (this.count !== undefined) {\n\t\t\t\treturn {\n\t\t\t\t\thumanized: this.humanizedCount,\n\t\t\t\t\toriginal: this.count.toString(),\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Raw value - render as it is\n\t\t\tif (this.raw) {\n\t\t\t\treturn undefined\n\t\t\t}\n\n\t\t\t// If slot content is just a text with a number - process like count\n\t\t\tif (this.$slots.default?.length === 1) {\n\t\t\t\tconst slotContent = this.$slots.default[0].text?.trim()\n\t\t\t\tif (slotContent && /^\\d+$/.test(slotContent)) {\n\t\t\t\t\tconst count = parseInt(slotContent, 10)\n\t\t\t\t\treturn {\n\t\t\t\t\t\thumanized: this.humanizeCount(count),\n\t\t\t\t\t\toriginal: slotContent,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\tconst count = this.getHumanizedCount()\n\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t\tattrs: {\n\t\t\t\t// Show original count in title if humanized\n\t\t\t\ttitle: count && count.original !== count.humanized ? count.original : undefined,\n\t\t\t},\n\t\t}, [count?.humanized ?? this.$slots.default])\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\t--counter-bubble-height: 22px; // ~ 1cap + 2 * 1.5 * grid\n\tfont-size: var(--font-size-small, 13px);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmin-width: var(--counter-bubble-height); // Make it not narrower than a circle\n\ttext-align: center;\n\tline-height: var(--counter-bubble-height); // Expand line-height to full height to center text vertically\n\tpadding: 0 calc(1.5 * var(--default-grid-baseline));\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\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AA0LA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,eAAA,YAAA,EAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,wCAAA,KAAA,SAAA;AAAA,QACA,qCAAA,KAAA,SAAA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,cAAA,KAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA,OAAA;AACA,UAAA,KAAA,KAAA;AACA,eAAA,MAAA,SAAA;AAAA,MACA;AAEA,YAAA,YAAA,IAAA,KAAA,aAAA,mBAAA,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,MACA,CAAA;AAEA,aAAA,UAAA,OAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,oBAAA;;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA;AAAA,UACA,WAAA,KAAA;AAAA,UACA,UAAA,KAAA,MAAA,SAAA;AAAA,QACA;AAAA,MACA;AAGA,UAAA,KAAA,KAAA;AACA,eAAA;AAAA,MACA;AAGA,YAAA,UAAA,OAAA,YAAA,mBAAA,YAAA,GAAA;AACA,cAAA,eAAA,UAAA,OAAA,QAAA,CAAA,EAAA,SAAA,mBAAA;AACA,YAAA,eAAA,QAAA,KAAA,WAAA,GAAA;AACA,gBAAA,QAAA,SAAA,aAAA,EAAA;AACA,iBAAA;AAAA,YACA,WAAA,KAAA,cAAA,KAAA;AAAA,YACA,UAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;;AACA,UAAA,QAAA,KAAA,kBAAA;AAEA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,MACA,OAAA;AAAA;AAAA,QAEA,OAAA,SAAA,MAAA,aAAA,MAAA,YAAA,MAAA,WAAA;AAAA,MACA;AAAA,IACA,GAAA,EAAA,oCAAA,cAAA,YAAA,KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/chunks/NcCounterBubble-B_H3NCef.cjs

@@ -0,0 +1,121 @@
+require('../assets/NcCounterBubble-sz81L2Mt.css');
+"use strict";
+const l10n = require("@nextcloud/l10n");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = {
+  name: "NcCounterBubble",
+  props: {
+    /**
+     * Visual appearence of the counter bubble
+     */
+    type: {
+      type: String,
+      default: "",
+      validator(value) {
+        return ["highlighted", "outlined", ""].includes(value);
+      }
+    },
+    /**
+     * 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: false
+    },
+    /**
+     * The count to display in the counter bubble.
+     * Alternatively, you can pass any value to the default slot.
+     */
+    count: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    /**
+     * Disables humanization to display count or content as it is
+     */
+    raw: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    counterClassObject() {
+      return {
+        "counter-bubble__counter--highlighted": this.type === "highlighted",
+        "counter-bubble__counter--outlined": this.type === "outlined",
+        active: this.active
+      };
+    },
+    humanizedCount() {
+      return this.humanizeCount(this.count);
+    }
+  },
+  methods: {
+    humanizeCount(count) {
+      if (this.raw) {
+        return count.toString();
+      }
+      const formatter = new Intl.NumberFormat(l10n.getCanonicalLocale(), {
+        notation: "compact",
+        compactDisplay: "short"
+      });
+      return formatter.format(count);
+    },
+    /**
+     * Get the humanized count from `count` prop
+     *
+     * @return {{ humanized: string, original: string} | undefined}
+     */
+    getHumanizedCount() {
+      var _a, _b;
+      if (this.count !== void 0) {
+        return {
+          humanized: this.humanizedCount,
+          original: this.count.toString()
+        };
+      }
+      if (this.raw) {
+        return void 0;
+      }
+      if (((_a = this.$slots.default) == null ? void 0 : _a.length) === 1) {
+        const slotContent = (_b = this.$slots.default[0].text) == null ? void 0 : _b.trim();
+        if (slotContent && /^\d+$/.test(slotContent)) {
+          const count = parseInt(slotContent, 10);
+          return {
+            humanized: this.humanizeCount(count),
+            original: slotContent
+          };
+        }
+      }
+    }
+  },
+  render(h) {
+    var _a;
+    const count = this.getHumanizedCount();
+    return h("div", {
+      staticClass: "counter-bubble__counter",
+      class: this.counterClassObject,
+      attrs: {
+        // Show original count in title if humanized
+        title: count && count.original !== count.humanized ? count.original : void 0
+      }
+    }, [(_a = count == null ? void 0 : count.humanized) != null ? _a : this.$slots.default]);
+  }
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "7d9795d6"
+);
+const NcCounterBubble = __component__.exports;
+exports.NcCounterBubble = NcCounterBubble;
+//# sourceMappingURL=NcCounterBubble-B_H3NCef.cjs.map

package/dist/chunks/NcCounterBubble-B_H3NCef.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcCounterBubble-B_H3NCef.cjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default usage\n\nNcCounterBubble displays a number from the `count` prop in a bubble.\n\nBy default, the number is **humanized** according to Nextcloud user's locale setting. Humanization can be disabled via `raw` prop.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>count</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" />\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" raw />\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: [1, 9, 75, 450, 1042, 1750, 1999, 14567, 14567890, 2000000008],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Styles\n\nUse different styles for different types of counters.\n\n```\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>type</th>\n\t\t\t<th>counter</th>\n\t\t\t<th>Usage example</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>'' (default)</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" />\n\t\t\t</td>\n\t\t\t<td></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined</td>\n\t\t\t<td><NcCounterBubble :count=\"3\" type=\"outlined\" /></td>\n\t\t\t<td>Team/group mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" />\n\t\t\t</td>\n\t\t\t<td>Direct mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"outlined\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"outlined\", but in an \"active\" container</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"highlighted\", but in an \"active\" container</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n\n\t&.active-like {\n\t\tbackground-color: var(--color-primary-element);\n\t}\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Custom content (deprecated)\n\nYou can use the default slot to pass any custom content. If you pass a plain number to the default slot, without raw prop it will be humanized like via `count` prop.\n\n**DEPRECATED:** passing count via slot content is **deprecated** and will be removed in the v9. Prefer using `count` prop for numbers or [NcChip](#/Components/NcChip) component for a custom content.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>content</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble>{{ num }}</NcCounterBubble>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble raw>{{ num }}</NcCounterBubble>\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: ['314+', '16 rows', '24564'],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n</docs>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\t/**\n\t\t * Visual appearence of the counter bubble\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].includes(value)\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\n\t\t/**\n\t\t * The count to display in the counter bubble.\n\t\t * Alternatively, you can pass any value to the default slot.\n\t\t */\n\t\tcount: {\n\t\t\ttype: Number,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Disables humanization to display count or content as it is\n\t\t */\n\t\traw: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\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\n\t\thumanizedCount() {\n\t\t\treturn this.humanizeCount(this.count)\n\t\t},\n\t},\n\n\tmethods: {\n\t\thumanizeCount(count) {\n\t\t\tif (this.raw) {\n\t\t\t\treturn count.toString()\n\t\t\t}\n\n\t\t\tconst formatter = new Intl.NumberFormat(getCanonicalLocale(), {\n\t\t\t\tnotation: 'compact',\n\t\t\t\tcompactDisplay: 'short',\n\t\t\t})\n\n\t\t\treturn formatter.format(count)\n\t\t},\n\n\t\t/**\n\t\t * Get the humanized count from `count` prop\n\t\t *\n\t\t * @return {{ humanized: string, original: string} | undefined}\n\t\t */\n\t\tgetHumanizedCount() {\n\t\t\t// If we have count prop - just render from count\n\t\t\tif (this.count !== undefined) {\n\t\t\t\treturn {\n\t\t\t\t\thumanized: this.humanizedCount,\n\t\t\t\t\toriginal: this.count.toString(),\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Raw value - render as it is\n\t\t\tif (this.raw) {\n\t\t\t\treturn undefined\n\t\t\t}\n\n\t\t\t// If slot content is just a text with a number - process like count\n\t\t\tif (this.$slots.default?.length === 1) {\n\t\t\t\tconst slotContent = this.$slots.default[0].text?.trim()\n\t\t\t\tif (slotContent && /^\\d+$/.test(slotContent)) {\n\t\t\t\t\tconst count = parseInt(slotContent, 10)\n\t\t\t\t\treturn {\n\t\t\t\t\t\thumanized: this.humanizeCount(count),\n\t\t\t\t\t\toriginal: slotContent,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\tconst count = this.getHumanizedCount()\n\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t\tattrs: {\n\t\t\t\t// Show original count in title if humanized\n\t\t\t\ttitle: count && count.original !== count.humanized ? count.original : undefined,\n\t\t\t},\n\t\t}, [count?.humanized ?? this.$slots.default])\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\t--counter-bubble-height: 22px; // ~ 1cap + 2 * 1.5 * grid\n\tfont-size: var(--font-size-small, 13px);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmin-width: var(--counter-bubble-height); // Make it not narrower than a circle\n\ttext-align: center;\n\tline-height: var(--counter-bubble-height); // Expand line-height to full height to center text vertically\n\tpadding: 0 calc(1.5 * var(--default-grid-baseline));\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\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n</style>\n"],"names":["getCanonicalLocale"],"mappings":";;;AA0LA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,eAAA,YAAA,EAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,wCAAA,KAAA,SAAA;AAAA,QACA,qCAAA,KAAA,SAAA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,cAAA,KAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA,OAAA;AACA,UAAA,KAAA,KAAA;AACA,eAAA,MAAA,SAAA;AAAA,MACA;AAEA,YAAA,YAAA,IAAA,KAAA,aAAAA,KAAAA,mBAAA,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,MACA,CAAA;AAEA,aAAA,UAAA,OAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,oBAAA;;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA;AAAA,UACA,WAAA,KAAA;AAAA,UACA,UAAA,KAAA,MAAA,SAAA;AAAA,QACA;AAAA,MACA;AAGA,UAAA,KAAA,KAAA;AACA,eAAA;AAAA,MACA;AAGA,YAAA,UAAA,OAAA,YAAA,mBAAA,YAAA,GAAA;AACA,cAAA,eAAA,UAAA,OAAA,QAAA,CAAA,EAAA,SAAA,mBAAA;AACA,YAAA,eAAA,QAAA,KAAA,WAAA,GAAA;AACA,gBAAA,QAAA,SAAA,aAAA,EAAA;AACA,iBAAA;AAAA,YACA,WAAA,KAAA,cAAA,KAAA;AAAA,YACA,UAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;;AACA,UAAA,QAAA,KAAA,kBAAA;AAEA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,MACA,OAAA;AAAA;AAAA,QAEA,OAAA,SAAA,MAAA,aAAA,MAAA,YAAA,MAAA,WAAA;AAAA,MACA;AAAA,IACA,GAAA,EAAA,oCAAA,cAAA,YAAA,KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/NcDashboardWidget--n1nzfhg.cjs

@@ -0,0 +1,146 @@
+require('../assets/NcDashboardWidget-DzJMoJ_B.css');
+"use strict";
+const Check = require("./Check-Du8mPz_B.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const NcAvatar = require("./NcAvatar-D_0Aw88L.cjs");
+const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-loanO02A.cjs");
+const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register(_l10n.t33);
+const _sfc_main = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: NcAvatar.NcAvatar,
+    NcDashboardWidgetItem: NcDashboardWidgetItem.NcDashboardWidgetItem,
+    NcEmptyContent: Components_NcEmptyContent,
+    Check: Check.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: _l10n.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;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dashboard-widget" }, [_vm.showHalfEmptyContentArea ? _c("NcEmptyContent", { staticClass: "half-screen", attrs: { "description": _vm.halfEmptyContentString }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("halfEmptyContentIcon", function() {
+      return [_c("Check")];
+    })];
+  }, proxy: true }], null, true) }) : _vm._e(), _c("ul", _vm._l(_vm.displayedItems, function(item) {
+    return _c("li", { key: item.id }, [_vm._t("default", function() {
+      return [_c("NcDashboardWidgetItem", _vm._g(_vm._b({ attrs: { "item-menu": _vm.itemMenu } }, "NcDashboardWidgetItem", item, false), _vm.handlers))];
+    }, { "item": item })], 2);
+  }), 0), _vm.loading ? _c("div", _vm._l(7, function(i) {
+    return _c("div", { key: i, staticClass: "item-list__entry" }, [_c("NcAvatar", { staticClass: "item-avatar", attrs: { "size": 44 } }), _vm._m(0, true)], 1);
+  }), 0) : _vm.items.length === 0 ? _vm._t("empty-content", function() {
+    return [_vm.emptyContentMessage ? _c("NcEmptyContent", { attrs: { "description": _vm.emptyContentMessage }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_vm._t("emptyContentIcon")];
+    }, proxy: true }], null, true) }) : _vm._e()];
+  }) : _vm.showMore ? _c("a", { staticClass: "more", attrs: { "href": _vm.showMoreUrl, "target": "_blank", "tabindex": "0" } }, [_vm._v(" " + _vm._s(_vm.showMoreLabel) + " ")]) : _vm._e()], 2);
+};
+var _sfc_staticRenderFns = [function() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "item__details" }, [_c("h3", [_vm._v(" ")]), _c("p", { staticClass: "message" }, [_vm._v("   ")])]);
+}];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "7631d51f"
+);
+const NcDashboardWidget = __component__.exports;
+exports.NcDashboardWidget = NcDashboardWidget;
+//# sourceMappingURL=NcDashboardWidget--n1nzfhg.cjs.map

package/dist/chunks/NcDashboardWidget--n1nzfhg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidget--n1nzfhg.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\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<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent\n\t\t\tv-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<!-- @slot The icon to show in the half empty content area. -->\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<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem\n\t\t\t\t\t\tv-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<!-- While the widget is loading, we show a list of placeholder items. -->\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>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\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<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent\n\t\t\t\tv-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\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<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a\n\t\t\tv-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 Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.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\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\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\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\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\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\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\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\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: var(--default-clickable-area);\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":["NcAvatar","NcDashboardWidgetItem","NcEmptyContent","Check","t"],"mappings":";;;;;;;;AAiOA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,IACA,uBAAAC,sBAAAA;AAAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcDashboardWidget-CEL-DhKX.mjs

@@ -0,0 +1,147 @@
+import '../assets/NcDashboardWidget-DzJMoJ_B.css';
+import { C as Check } from "./Check-BkThHPH7.mjs";
+import { r as register, l as t33, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { N as NcAvatar } from "./NcAvatar-Cupl4prm.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-DeQtScn8.mjs";
+import NcEmptyContent from "../Components/NcEmptyContent.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register(t33);
+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;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "dashboard-widget" }, [_vm.showHalfEmptyContentArea ? _c("NcEmptyContent", { staticClass: "half-screen", attrs: { "description": _vm.halfEmptyContentString }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_vm._t("halfEmptyContentIcon", function() {
+      return [_c("Check")];
+    })];
+  }, proxy: true }], null, true) }) : _vm._e(), _c("ul", _vm._l(_vm.displayedItems, function(item) {
+    return _c("li", { key: item.id }, [_vm._t("default", function() {
+      return [_c("NcDashboardWidgetItem", _vm._g(_vm._b({ attrs: { "item-menu": _vm.itemMenu } }, "NcDashboardWidgetItem", item, false), _vm.handlers))];
+    }, { "item": item })], 2);
+  }), 0), _vm.loading ? _c("div", _vm._l(7, function(i) {
+    return _c("div", { key: i, staticClass: "item-list__entry" }, [_c("NcAvatar", { staticClass: "item-avatar", attrs: { "size": 44 } }), _vm._m(0, true)], 1);
+  }), 0) : _vm.items.length === 0 ? _vm._t("empty-content", function() {
+    return [_vm.emptyContentMessage ? _c("NcEmptyContent", { attrs: { "description": _vm.emptyContentMessage }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_vm._t("emptyContentIcon")];
+    }, proxy: true }], null, true) }) : _vm._e()];
+  }) : _vm.showMore ? _c("a", { staticClass: "more", attrs: { "href": _vm.showMoreUrl, "target": "_blank", "tabindex": "0" } }, [_vm._v(" " + _vm._s(_vm.showMoreLabel) + " ")]) : _vm._e()], 2);
+};
+var _sfc_staticRenderFns = [function() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "item__details" }, [_c("h3", [_vm._v(" ")]), _c("p", { staticClass: "message" }, [_vm._v("   ")])]);
+}];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "7631d51f"
+);
+const NcDashboardWidget = __component__.exports;
+export {
+  NcDashboardWidget as N
+};
+//# sourceMappingURL=NcDashboardWidget-CEL-DhKX.mjs.map

package/dist/chunks/NcDashboardWidget-CEL-DhKX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidget-CEL-DhKX.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\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<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent\n\t\t\tv-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<!-- @slot The icon to show in the half empty content area. -->\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<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem\n\t\t\t\t\t\tv-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<!-- While the widget is loading, we show a list of placeholder items. -->\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>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\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<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent\n\t\t\t\tv-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\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<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a\n\t\t\tv-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 Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.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\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\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\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\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\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\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\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\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: var(--default-clickable-area);\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":[],"mappings":";;;;;;;AAiOA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,WAAA;AACA,YAAA,IAAA,CAAA;AACA,iBAAA,UAAA,KAAA,UAAA;AACA,UAAA,MAAA,IAAA,CAAA,OAAA;AACA,eAAA,MAAA,QAAA,EAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,YAAA,UAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAA,OAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,2BAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,2BAAA,IAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}