npm - @nextcloud/vue - Versions diffs - 8.19.0 → 8.20.0 - Mend

@nextcloud/vue 8.19.0 → 8.20.0

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 (653) hide show

package/dist/chunks/{NcCounterBubble-R8Tmi05i.cjs → NcCounterBubble-DF2rwIo4.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-require('../assets/NcCounterBubble-Dizdz4Hk.css');
+require('../assets/NcCounterBubble-DdYmHnng.css');
 "use strict";
 const l10n = require("@nextcloud/l10n");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
@@ -67,15 +67,14 @@ const _sfc_main = {
      * @return {string | undefined}
      */
     getHumanizedCount() {
-      var _a, _b;
       if (this.count !== void 0) {
         return this.humanizedCount;
       }
       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 (this.$slots.default?.length === 1) {
+        const slotContent = this.$slots.default[0].text?.trim();
         if (slotContent && /^\d+$/.test(slotContent)) {
           const count = parseInt(slotContent, 10);
           return this.humanizeCount(count);
@@ -84,11 +83,10 @@ const _sfc_main = {
     }
   },
   render(h) {
-    var _a;
     return h("div", {
       staticClass: "counter-bubble__counter",
       class: this.counterClassObject
-    }, [(_a = this.getHumanizedCount()) != null ? _a : this.$slots.default]);
+    }, [this.getHumanizedCount() ?? this.$slots.default]);
   }
 };
 const _sfc_render = null;

package/dist/chunks/{NcCounterBubble-R8Tmi05i.cjs.map → NcCounterBubble-DF2rwIo4.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcCounterBubble-~~R8Tmi05i~~.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\nDEPRECATED: 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\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\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 * @return {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 this.humanizedCount\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 this.humanizeCount(count)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t}, [this.getHumanizedCount() ?? 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,IACA,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;AAAA,MACA;AAEA,YAAA,YAAA,IAAA,KAAA,aAAAA,KAAA,mBAAA,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,MACA,CAAA;AAEA,aAAA,UAAA,OAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA,KAAA;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,KAAA,cAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;;AACA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,IACA,GAAA,~~EAAA~~,~~UAAA~~,kBAAA,~~MAAA~~,~~YAAA,~~KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcCounterBubble-DF2rwIo4.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\nDEPRECATED: 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\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\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 * @return {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 this.humanizedCount\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 this.humanizeCount(count)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t}, [this.getHumanizedCount() ?? 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,IACA,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;AAAA,MACA;AAEA,YAAA,YAAA,IAAA,KAAA,aAAAA,KAAA,mBAAA,GAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAA;AAAA,MACA,CAAA;AAEA,aAAA,UAAA,OAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA,KAAA;AAAA,MACA;AAGA,UAAA,KAAA,KAAA;AACA,eAAA;AAAA,MACA;AAGA,UAAA,KAAA,OAAA,SAAA,WAAA,GAAA;AACA,cAAA,cAAA,KAAA,OAAA,QAAA,CAAA,EAAA,MAAA,KAAA;AACA,YAAA,eAAA,QAAA,KAAA,WAAA,GAAA;AACA,gBAAA,QAAA,SAAA,aAAA,EAAA;AACA,iBAAA,KAAA,cAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,IACA,GAAA,CAAA,KAAA,kBAAA,KAAA,KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/{NcCounterBubble-D1QC3eP1.mjs → NcCounterBubble-M1q9GRkH.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcCounterBubble-Dizdz4Hk.css';
+import '../assets/NcCounterBubble-DdYmHnng.css';
 import { getCanonicalLocale } from "@nextcloud/l10n";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
@@ -66,15 +66,14 @@ const _sfc_main = {
      * @return {string | undefined}
      */
     getHumanizedCount() {
-      var _a, _b;
       if (this.count !== void 0) {
         return this.humanizedCount;
       }
       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 (this.$slots.default?.length === 1) {
+        const slotContent = this.$slots.default[0].text?.trim();
         if (slotContent && /^\d+$/.test(slotContent)) {
           const count = parseInt(slotContent, 10);
           return this.humanizeCount(count);
@@ -83,11 +82,10 @@ const _sfc_main = {
     }
   },
   render(h) {
-    var _a;
     return h("div", {
       staticClass: "counter-bubble__counter",
       class: this.counterClassObject
-    }, [(_a = this.getHumanizedCount()) != null ? _a : this.$slots.default]);
+    }, [this.getHumanizedCount() ?? this.$slots.default]);
   }
 };
 const _sfc_render = null;

package/dist/chunks/{NcCounterBubble-D1QC3eP1.mjs.map → NcCounterBubble-M1q9GRkH.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcCounterBubble-~~D1QC3eP1~~.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\nDEPRECATED: 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\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\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 * @return {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 this.humanizedCount\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 this.humanizeCount(count)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t}, [this.getHumanizedCount() ?? 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,IACA,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;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,IAMA,oBAAA;;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA,KAAA;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,KAAA,cAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;;AACA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,IACA,GAAA,~~EAAA~~,~~UAAA~~,kBAAA,~~MAAA~~,~~YAAA,~~KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcCounterBubble-M1q9GRkH.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\nDEPRECATED: 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\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\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 * @return {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 this.humanizedCount\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 this.humanizeCount(count)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\trender(h) {\n\t\treturn h('div', {\n\t\t\tstaticClass: 'counter-bubble__counter',\n\t\t\tclass: this.counterClassObject,\n\t\t}, [this.getHumanizedCount() ?? 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,IACA,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;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,IAMA,oBAAA;AAEA,UAAA,KAAA,UAAA,QAAA;AACA,eAAA,KAAA;AAAA,MACA;AAGA,UAAA,KAAA,KAAA;AACA,eAAA;AAAA,MACA;AAGA,UAAA,KAAA,OAAA,SAAA,WAAA,GAAA;AACA,cAAA,cAAA,KAAA,OAAA,QAAA,CAAA,EAAA,MAAA,KAAA;AACA,YAAA,eAAA,QAAA,KAAA,WAAA,GAAA;AACA,gBAAA,QAAA,SAAA,aAAA,EAAA;AACA,iBAAA,KAAA,cAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,WAAA,EAAA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA,KAAA;AAAA,IACA,GAAA,CAAA,KAAA,kBAAA,KAAA,KAAA,OAAA,OAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidget-DhVJqy1d.cjs → NcDashboardWidget-Bu-WC7kg.cjs} RENAMED Viewed

@@ -1,10 +1,10 @@
-require('../assets/NcDashboardWidget-CpstyXok.css');
+require('../assets/NcDashboardWidget-BSTvIgiJ.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-B238cv9d.cjs");
-const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-DuntgAlo.cjs");
+const NcAvatar = require("./NcAvatar-DypzACJs.cjs");
+const NcDashboardWidgetItem = require("./NcDashboardWidgetItem-CI59K-wE.cjs");
 const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
-const Check = require("./Check-fCbe4vqy.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const Check = require("./Check-Du8mPz_B.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t33);
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidget-DhVJqy1d.cjs.map → NcDashboardWidget-Bu-WC7kg.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidget-DhVJqy1d.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 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<!-- @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 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<!-- 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> </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<!-- @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 v-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 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: 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":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,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,IACA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDashboardWidget-Bu-WC7kg.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 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<!-- @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 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<!-- 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> </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<!-- @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 v-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 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: 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":";;;;;;;;AA+NA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,uBAAAC,sBAAA;AAAA,IACA,gBAAAC;AAAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,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,IACA,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-DG9u5NLf.mjs → NcDashboardWidget-Xit6eLCu.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-import '../assets/NcDashboardWidget-CpstyXok.css';
-import { N as NcAvatar } from "./NcAvatar-lRUjWiR6.mjs";
-import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-CHCygvjp.mjs";
+import '../assets/NcDashboardWidget-BSTvIgiJ.css';
+import { N as NcAvatar } from "./NcAvatar-Bv7NGIzM.mjs";
+import { N as NcDashboardWidgetItem } from "./NcDashboardWidgetItem-CcCRU45T.mjs";
 import NcEmptyContent from "../Components/NcEmptyContent.mjs";
-import { C as Check } from "./Check-XHAzUBkX.mjs";
-import { r as register, l as t33, a as t } from "./_l10n-JYjUKekn.mjs";
+import { C as Check } from "./Check-BkThHPH7.mjs";
+import { r as register, l as t33, a as t } from "./_l10n-DXr-EzLn.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t33);
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidget-DG9u5NLf.mjs.map → NcDashboardWidget-Xit6eLCu.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidget-DG9u5NLf.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 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<!-- @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 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<!-- 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> </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<!-- @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 v-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 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: 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":";;;;;;;AA+NA,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;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,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,IACA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDashboardWidget-Xit6eLCu.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 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<!-- @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 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<!-- 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> </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<!-- @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 v-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 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: 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":";;;;;;;AA+NA,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;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,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,IACA,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/{NcDashboardWidgetItem-DuntgAlo.cjs → NcDashboardWidgetItem-CI59K-wE.cjs} RENAMED Viewed

@@ -1,7 +1,7 @@
-require('../assets/NcDashboardWidgetItem-BBZT17WU.css');
+require('../assets/NcDashboardWidgetItem-BtOuK4mf.css');
 "use strict";
-const NcAvatar = require("./NcAvatar-B238cv9d.cjs");
-const NcActions = require("./NcActions-gOMT5VzC.cjs");
+const NcAvatar = require("./NcAvatar-DypzACJs.cjs");
+const NcActions = require("./NcActions-CCYNSnCn.cjs");
 const Components_NcActionButton = require("../Components/NcActionButton.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-DuntgAlo.cjs.map → NcDashboardWidgetItem-CI59K-wE.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidgetItem-~~DuntgAlo~~.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The item id (optional)\n\t\t /\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t The item element is a link to this URL (optional)\n\t\t /\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t /\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t /\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Is the avatarUsername not a user's name? (optional, false by default)\n\t\t /\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t /\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Item main text (mandatory)\n\t\t /\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Item subline text (optional)\n\t\t /\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t An object containing context menu entries that will be displayed for each items (optional)\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 Specify whether the 3 dot menu is forced when only one action is present\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\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}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\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: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDashboardWidgetItem-CI59K-wE.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The item id (optional)\n\t\t /\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t The item element is a link to this URL (optional)\n\t\t /\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t /\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t /\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Is the avatarUsername not a user's name? (optional, false by default)\n\t\t /\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t /\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Item main text (mandatory)\n\t\t /\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Item subline text (optional)\n\t\t /\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t An object containing context menu entries that will be displayed for each items (optional)\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 Specify whether the 3 dot menu is forced when only one action is present\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\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}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\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: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["NcAvatar","NcActions","NcActionButton"],"mappings":";;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAA;AAAA,IACA,WAAAC,UAAA;AAAA,IACA,gBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDashboardWidgetItem-CHCygvjp.mjs → NcDashboardWidgetItem-CcCRU45T.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcDashboardWidgetItem-BBZT17WU.css';
-import { N as NcAvatar } from "./NcAvatar-lRUjWiR6.mjs";
-import { N as NcActions } from "./NcActions-BgYpDq2n.mjs";
+import '../assets/NcDashboardWidgetItem-BtOuK4mf.css';
+import { N as NcAvatar } from "./NcAvatar-Bv7NGIzM.mjs";
+import { N as NcActions } from "./NcActions-BUZ5Oprh.mjs";
 import NcActionButton from "../Components/NcActionButton.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {

package/dist/chunks/{NcDashboardWidgetItem-CHCygvjp.mjs.map → NcDashboardWidgetItem-CcCRU45T.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDashboardWidgetItem-~~CHCygvjp~~.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The item id (optional)\n\t\t /\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t The item element is a link to this URL (optional)\n\t\t /\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t /\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t /\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Is the avatarUsername not a user's name? (optional, false by default)\n\t\t /\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t /\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Item main text (mandatory)\n\t\t /\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Item subline text (optional)\n\t\t /\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t An object containing context menu entries that will be displayed for each items (optional)\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 Specify whether the 3 dot menu is forced when only one action is present\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\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}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\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: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDashboardWidgetItem-CcCRU45T.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl \|\| undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t The item id (optional)\n\t\t /\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t The item element is a link to this URL (optional)\n\t\t /\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t /\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t /\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Is the avatarUsername not a user's name? (optional, false by default)\n\t\t /\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t /\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/\n\t\t Item main text (mandatory)\n\t\t /\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t Item subline text (optional)\n\t\t /\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t An object containing context menu entries that will be displayed for each items (optional)\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 Specify whether the 3 dot menu is forced when only one action is present\n\t\t /\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 \|\| !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\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}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\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: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":[],"mappings":";;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,eAAA;MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,MAAA,OAAA,QAAA,cAAA,GAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDateTime-ciAHA2YL.mjs → NcDateTime-B5H_8fXN.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { ref, unref, computed, watch, onMounted, onUnmounted } from "vue";
 import { getCanonicalLocale, getLanguage } from "@nextcloud/l10n";
-import { r as register, k as t2, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, k as t2, a as t } from "./_l10n-DXr-EzLn.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t2);
 const FEW_SECONDS_AGO = {

package/dist/chunks/{NcDateTime-ciAHA2YL.mjs.map → NcDateTime-B5H_8fXN.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDateTime-ciAHA2YL.mjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/\n\t The format used for displaying, or if relative time is used the format used for the title\n\t /\n\tformat?: Intl.DateTimeFormatOptions\n\t/\n\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t /\n\tignoreSeconds?: boolean\n\t/\n\t Wether to display the timestamp as time from now\n\t /\n\trelativeTime?: false \| 'long' \| 'short' \| 'narrow'\n}\n\ntype MaybeRef<T> = T \| Ref<T>\n\n/\n Composable for formatting time stamps using current users locale and language\n \n @param {Date \| number \| import('vue').Ref<Date> \| import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false \| 'long' \| 'short' \| 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n /\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date\|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number\|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/* ECMA Date object of the timestamp /\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/* Time string formatted for main text /\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples 6 seconds ago.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/* For allowed formats see the Intl.DateTimeFormat options /\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/\n\t\t The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t /\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t \n\t\t @type {Intl.DateTimeFormatOptions}\n\t\t /\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/\n\t\t Wether to display the timestamp as time from now (optional)\n\t\t \n\t\t - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like 2 seconds ago (default)\n\t\t * - `'short'`: Short text, like 2 sec. ago\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t /\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false \|\| ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/\n\t\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcDateTime-B5H_8fXN.mjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/\n\t The format used for displaying, or if relative time is used the format used for the title\n\t /\n\tformat?: Intl.DateTimeFormatOptions\n\t/\n\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t /\n\tignoreSeconds?: boolean\n\t/\n\t Wether to display the timestamp as time from now\n\t /\n\trelativeTime?: false \| 'long' \| 'short' \| 'narrow'\n}\n\ntype MaybeRef<T> = T \| Ref<T>\n\n/\n Composable for formatting time stamps using current users locale and language\n \n @param {Date \| number \| import('vue').Ref<Date> \| import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false \| 'long' \| 'short' \| 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n /\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date\|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number\|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/* ECMA Date object of the timestamp /\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/* Time string formatted for main text /\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples 6 seconds ago.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/* For allowed formats see the Intl.DateTimeFormat options /\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/\n\t\t The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t /\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t \n\t\t @type {Intl.DateTimeFormatOptions}\n\t\t /\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/\n\t\t Wether to display the timestamp as time from now (optional)\n\t\t \n\t\t - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like 2 seconds ago (default)\n\t\t * - `'short'`: Short text, like 2 sec. ago\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t /\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false \|\| ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/\n\t\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcDateTime-BfOmGrzK.cjs → NcDateTime-CaJHhgab.cjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 "use strict";
 const Vue = require("vue");
 const l10n = require("@nextcloud/l10n");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t2);
 const FEW_SECONDS_AGO = {

package/dist/chunks/{NcDateTime-BfOmGrzK.cjs.map → NcDateTime-CaJHhgab.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDateTime-BfOmGrzK.cjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/\n\t The format used for displaying, or if relative time is used the format used for the title\n\t /\n\tformat?: Intl.DateTimeFormatOptions\n\t/\n\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t /\n\tignoreSeconds?: boolean\n\t/\n\t Wether to display the timestamp as time from now\n\t /\n\trelativeTime?: false \| 'long' \| 'short' \| 'narrow'\n}\n\ntype MaybeRef<T> = T \| Ref<T>\n\n/\n Composable for formatting time stamps using current users locale and language\n \n @param {Date \| number \| import('vue').Ref<Date> \| import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false \| 'long' \| 'short' \| 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n /\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date\|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number\|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/* ECMA Date object of the timestamp /\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/* Time string formatted for main text /\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples 6 seconds ago.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/* For allowed formats see the Intl.DateTimeFormat options /\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/\n\t\t The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t /\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t \n\t\t @type {Intl.DateTimeFormatOptions}\n\t\t /\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/\n\t\t Wether to display the timestamp as time from now (optional)\n\t\t \n\t\t - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like 2 seconds ago (default)\n\t\t * - `'short'`: Short text, like 2 sec. ago\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t /\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false \|\| ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/\n\t\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}
1	+ {"version":3,"file":"NcDateTime-CaJHhgab.cjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/\n\t The format used for displaying, or if relative time is used the format used for the title\n\t /\n\tformat?: Intl.DateTimeFormatOptions\n\t/\n\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t /\n\tignoreSeconds?: boolean\n\t/\n\t Wether to display the timestamp as time from now\n\t /\n\trelativeTime?: false \| 'long' \| 'short' \| 'narrow'\n}\n\ntype MaybeRef<T> = T \| Ref<T>\n\n/\n Composable for formatting time stamps using current users locale and language\n \n @param {Date \| number \| import('vue').Ref<Date> \| import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false \| 'long' \| 'short' \| 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n /\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date\|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number\|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/* ECMA Date object of the timestamp /\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/* Time string formatted for main text /\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples 6 seconds ago.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/* For allowed formats see the Intl.DateTimeFormat options /\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/\n\t\t The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t /\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/\n\t\t The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t \n\t\t @type {Intl.DateTimeFormatOptions}\n\t\t /\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/\n\t\t Wether to display the timestamp as time from now (optional)\n\t\t \n\t\t - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like 2 seconds ago (default)\n\t\t * - `'short'`: Short text, like 2 sec. ago\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t /\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false \|\| ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/\n\t\t Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}