@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcCounterBubble-0pCAxQl7.cjs

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

package/dist/chunks/NcCounterBubble-0pCAxQl7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcCounterBubble-0pCAxQl7.cjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","vue","$options"],"mappings":";mFAqDAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,eAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;;"}

package/dist/chunks/NcCounterBubble-w6SmwTWu.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcCounterBubble-w6SmwTWu.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n <docs>\n\n### Normal Counter\n\n```\n<NcCounterBubble>314+</NcCounterBubble>\n```\n\n### Outlined Counter (e.g team mentions)\n\n```\n<NcCounterBubble type=\"outlined\">314+</NcCounterBubble>\n```\n\n### Highlighted Counter (e.g direct mentions)\n\n```\n<NcCounterBubble type=\"highlighted\">314+</NcCounterBubble>\n```\n\n</docs>\n\n<template>\n\t<div :class=\"counterClassObject\"\n\t\tclass=\"counter-bubble__counter\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\tfont-size: calc(var(--default-font-size) * .8);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmax-width: $clickable-area;\n\ttext-align: center;\n\ttext-overflow: ellipsis;\n\tline-height: 1em;\n\tpadding: 4px 6px;\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","normalizeClass","$options"],"mappings":";;;AAqDA,MAAAA,IAAA;AAAA;EAGC,OAAA;AAAA;;;MAIE,UAAAC,GAAA;;;;;;;;;IAUD,QAAA;AAAA;;;;EAMD,UAAA;AAAA,IACC,qBAAA;AACC,aAAA;AAAA,QACC,wCAAA,KAAA,SAAA;AAAA;QAEA,QAAA,KAAA;AAAA,MACD;AAAA;;AAGH;;;IAxCO,OAAAC,EAAA,CAAAC,EAAA,oBAAA,yBAAA,CAAA;AAAA;;;;;"}

package/dist/chunks/NcDashboardWidget-JGkvqDWC.mjs

@@ -0,0 +1,169 @@
+import "../assets/NcDashboardWidget-7x3QrWFu.css";
+import { N } from "./NcAvatar-JsMCceHU.mjs";
+import { N as I } from "./NcDashboardWidgetItem-oQGp29KO.mjs";
+import { N as b } from "./NcEmptyContent-Dvt4jhjb.mjs";
+import { C as M } from "./Check-tQl0Vp18.mjs";
+import { r as w, k as E, a as k } from "./_l10n-uuAvfQgY.mjs";
+import { resolveComponent as m, openBlock as n, createElementBlock as s, createBlock as p, withCtx as u, renderSlot as i, createVNode as c, createCommentVNode as d, createElementVNode as a, Fragment as y, renderList as f, mergeProps as v, toHandlers as S, toDisplayString as A, pushScopeId as x, popScopeId as D } from "vue";
+import { _ as B } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+w(E);
+const W = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: N,
+    NcDashboardWidgetItem: I,
+    NcEmptyContent: b,
+    Check: M
+  },
+  props: {
+    /**
+     * An array containing the items to show (specific structure must be respected,
+     * except if you override item rendering in the default slot).
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If this is set, a "show more" text is displayed on the widget's bottom.
+     * It's a link pointing to this URL.
+     */
+    showMoreUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text of show more button.
+     *
+     * Expected to be in the form "More {itemName} …"
+     */
+    showMoreLabel: {
+      type: String,
+      default: k("More items …")
+    },
+    /**
+     * A boolean to put the widget in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each item.
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Whether both the items and the empty content message are shown.
+     * Usefull for e.g. showing "No mentions" and a list of elements.
+     */
+    showItemsAndEmptyContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The text to show in the empty content area.
+     */
+    emptyContentMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text to show in the half empty content area.
+     */
+    halfEmptyContentMessage: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    // forward menu events to my parent
+    handlers() {
+      const e = {};
+      for (const l in this.itemMenu)
+        e[l] = (t) => {
+          this.$emit(l, t);
+        };
+      return e;
+    },
+    displayedItems() {
+      const e = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, e);
+    },
+    showHalfEmptyContentArea() {
+      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
+    },
+    halfEmptyContentString() {
+      return this.halfEmptyContentMessage || this.emptyContentMessage;
+    },
+    maxItemNumber() {
+      return this.showItemsAndEmptyContent ? 5 : 7;
+    },
+    showMore() {
+      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
+    }
+  }
+}, U = (e) => (x("data-v-b0ac6ae2"), e = e(), D(), e), H = { class: "dashboard-widget" }, L = { key: 1 }, V = /* @__PURE__ */ U(() => /* @__PURE__ */ a("div", { class: "item__details" }, [
+  /* @__PURE__ */ a("h3", null, " "),
+  /* @__PURE__ */ a("p", { class: "message" }, "   ")
+], -1)), j = ["href"];
+function z(e, l, t, F, O, o) {
+  const g = m("Check"), h = m("NcEmptyContent"), _ = m("NcDashboardWidgetItem"), C = m("NcAvatar");
+  return n(), s("div", H, [
+    o.showHalfEmptyContentArea ? (n(), p(h, {
+      key: 0,
+      description: o.halfEmptyContentString,
+      class: "half-screen"
+    }, {
+      icon: u(() => [
+        i(e.$slots, "halfEmptyContentIcon", {}, () => [
+          c(g)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["description"])) : d("", !0),
+    a("ul", null, [
+      (n(!0), s(y, null, f(o.displayedItems, (r) => (n(), s("li", {
+        key: r.id
+      }, [
+        i(e.$slots, "default", { item: r }, () => [
+          c(_, v(r, { "item-menu": t.itemMenu }, S(o.handlers)), null, 16, ["item-menu"])
+        ], !0)
+      ]))), 128))
+    ]),
+    t.loading ? (n(), s("div", L, [
+      (n(), s(y, null, f(7, (r) => a("div", {
+        key: r,
+        class: "item-list__entry"
+      }, [
+        c(C, {
+          class: "item-avatar",
+          size: 44
+        }),
+        V
+      ])), 64))
+    ])) : t.items.length === 0 ? i(e.$slots, "empty-content", { key: 2 }, () => [
+      t.emptyContentMessage ? (n(), p(h, {
+        key: 0,
+        description: t.emptyContentMessage
+      }, {
+        icon: u(() => [
+          i(e.$slots, "emptyContentIcon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["description"])) : d("", !0)
+    ], !0) : o.showMore ? (n(), s("a", {
+      key: 3,
+      href: t.showMoreUrl,
+      target: "_blank",
+      class: "more",
+      tabindex: "0"
+    }, A(t.showMoreLabel), 9, j)) : d("", !0)
+  ]);
+}
+const X = /* @__PURE__ */ B(W, [["render", z], ["__scopeId", "data-v-b0ac6ae2"]]);
+export {
+  X as N
+};

package/dist/chunks/NcDashboardWidget-JGkvqDWC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidget-JGkvqDWC.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- 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>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent 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: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","createElementVNode","_hoisted_4","openBlock","createElementBlock","$options","withCtx","renderSlot","_ctx","createCommentVNode","Fragment","renderList","item","_hoisted_2","i","$props","toDisplayString"],"mappings":";;;;;;;;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,uDA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAC,EAAA,GAAAC,EAAA,OAAAJ,GAAA;AAAA;;MAIG,aAAAK,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAC,EAAA,MAAA;AAAA,QAEVC,EAAAC,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJC,EAAA,IAAA,EAAA;AAAA;OA6LGN,EAAA,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAAN,EAAA,gBAAA,CAAAO;;;QAECL,EAAAC,EAAA,QAAA,WAAA,EAAA,MAAAI,EAAA,GAAA,MAAA;AAAA;;;;iBAQFT,EAAA,GAAAC,EAAA,OAAAS,GAAA;AAAA,OACCV,EAAA,GAAAC,EAAAM,GAAA,MAAAC,EAAA,GAAA,CAAAG;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAT,EAAA,MAAA;AAAA;;;gCAtNfG,EAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAM,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAC,EAAAD,EAAA,aAAA,GAAA,GAAAb,CAAA,KAlONO,EAAA,IAAA,EAAA;AAAA;;;"}

package/dist/chunks/NcDashboardWidget-qHSuK2yd.cjs

@@ -0,0 +1,161 @@
+var B = require("../assets/NcDashboardWidget-7x3QrWFu.css");
+const d = require("./NcAvatar-uPVG9WWg.cjs"), h = require("./NcDashboardWidgetItem-fl92G4Pt.cjs"), u = require("./NcEmptyContent-M3ClqFZe.cjs"), p = require("./Check-fwcsc82n.cjs"), a = require("./_l10n-Fl7RzbcZ.cjs"), e = require("vue"), y = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
+a.register(a.t28);
+const g = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: d.NcAvatar,
+    NcDashboardWidgetItem: h.NcDashboardWidgetItem,
+    NcEmptyContent: u.NcEmptyContent,
+    Check: p.Check
+  },
+  props: {
+    /**
+     * An array containing the items to show (specific structure must be respected,
+     * except if you override item rendering in the default slot).
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If this is set, a "show more" text is displayed on the widget's bottom.
+     * It's a link pointing to this URL.
+     */
+    showMoreUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text of show more button.
+     *
+     * Expected to be in the form "More {itemName} …"
+     */
+    showMoreLabel: {
+      type: String,
+      default: a.t("More items …")
+    },
+    /**
+     * A boolean to put the widget in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each item.
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Whether both the items and the empty content message are shown.
+     * Usefull for e.g. showing "No mentions" and a list of elements.
+     */
+    showItemsAndEmptyContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The text to show in the empty content area.
+     */
+    emptyContentMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text to show in the half empty content area.
+     */
+    halfEmptyContentMessage: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    // forward menu events to my parent
+    handlers() {
+      const t = {};
+      for (const s in this.itemMenu)
+        t[s] = (n) => {
+          this.$emit(s, n);
+        };
+      return t;
+    },
+    displayedItems() {
+      const t = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, t);
+    },
+    showHalfEmptyContentArea() {
+      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
+    },
+    halfEmptyContentString() {
+      return this.halfEmptyContentMessage || this.emptyContentMessage;
+    },
+    maxItemNumber() {
+      return this.showItemsAndEmptyContent ? 5 : 7;
+    },
+    showMore() {
+      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
+    }
+  }
+}, C = (t) => (e.pushScopeId("data-v-b0ac6ae2"), t = t(), e.popScopeId(), t), N = { class: "dashboard-widget" }, _ = { key: 1 }, k = /* @__PURE__ */ C(() => /* @__PURE__ */ e.createElementVNode("div", { class: "item__details" }, [
+  /* @__PURE__ */ e.createElementVNode("h3", null, " "),
+  /* @__PURE__ */ e.createElementVNode("p", { class: "message" }, "   ")
+], -1)), f = ["href"];
+function E(t, s, n, I, v, o) {
+  const l = e.resolveComponent("Check"), c = e.resolveComponent("NcEmptyContent"), m = e.resolveComponent("NcDashboardWidgetItem"), i = e.resolveComponent("NcAvatar");
+  return e.openBlock(), e.createElementBlock("div", N, [
+    o.showHalfEmptyContentArea ? (e.openBlock(), e.createBlock(c, {
+      key: 0,
+      description: o.halfEmptyContentString,
+      class: "half-screen"
+    }, {
+      icon: e.withCtx(() => [
+        e.renderSlot(t.$slots, "halfEmptyContentIcon", {}, () => [
+          e.createVNode(l)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["description"])) : e.createCommentVNode("", !0),
+    e.createElementVNode("ul", null, [
+      (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(o.displayedItems, (r) => (e.openBlock(), e.createElementBlock("li", {
+        key: r.id
+      }, [
+        e.renderSlot(t.$slots, "default", { item: r }, () => [
+          e.createVNode(m, e.mergeProps(r, { "item-menu": n.itemMenu }, e.toHandlers(o.handlers)), null, 16, ["item-menu"])
+        ], !0)
+      ]))), 128))
+    ]),
+    n.loading ? (e.openBlock(), e.createElementBlock("div", _, [
+      (e.openBlock(), e.createElementBlock(e.Fragment, null, e.renderList(7, (r) => e.createElementVNode("div", {
+        key: r,
+        class: "item-list__entry"
+      }, [
+        e.createVNode(i, {
+          class: "item-avatar",
+          size: 44
+        }),
+        k
+      ])), 64))
+    ])) : n.items.length === 0 ? e.renderSlot(t.$slots, "empty-content", { key: 2 }, () => [
+      n.emptyContentMessage ? (e.openBlock(), e.createBlock(c, {
+        key: 0,
+        description: n.emptyContentMessage
+      }, {
+        icon: e.withCtx(() => [
+          e.renderSlot(t.$slots, "emptyContentIcon", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["description"])) : e.createCommentVNode("", !0)
+    ], !0) : o.showMore ? (e.openBlock(), e.createElementBlock("a", {
+      key: 3,
+      href: n.showMoreUrl,
+      target: "_blank",
+      class: "more",
+      tabindex: "0"
+    }, e.toDisplayString(n.showMoreLabel), 9, f)) : e.createCommentVNode("", !0)
+  ]);
+}
+const b = /* @__PURE__ */ y._export_sfc(g, [["render", E], ["__scopeId", "data-v-b0ac6ae2"]]);
+exports.NcDashboardWidget = b;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDashboardWidget-qHSuK2yd.cjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<docs>\n\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- 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>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent 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: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcAvatar","NcDashboardWidgetItem","NcEmptyContent","h","evName","it","nbItems","_hoisted_1","vue","_hoisted_4","$options","_ctx","item","_hoisted_2","i","$props"],"mappings":";;;AAgPA,MAAAA,IAAA;AAAA;;IAGE,UAAAC,EAAA;AAAA,IACA,uBAAAC,EAAA;AAAA,IACA,gBAAAC,EAAA;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;;;;;;;;IAiBA,eAAA;AAAA;;;;;;IAOA,SAAA;AAAA;;;;;;IAOA,UAAA;AAAA;;;;;;;;;;;;;;IAeA,qBAAA;AAAA;;;;;;;;;;;EAaD,UAAA;AAAA;AAAA;AAGE,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACC,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACC,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACD;AAED,aAAAF;AAAA;IAED,iBAAA;AACC,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACC,KAAA,gBAAA,IACA,KAAA;AACD,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;AAAA;;AAIA,aAAA,KAAA,4BAAA,KAAA,0BAAA,KAAA,MAAA,WAAA;AAAA;;;;IAOD,gBAAA;AACC,aAAA,KAAA,2BAAA,IAAA;AAAA;;;;;AAOH,8EA7KMC,IAAA,EAAA,OAAA,mBAAA;EA6BD,gBAAAC,EAAA,mBAAA,MAAA,MAAA,GAAA;AAAA,EACA,gBAAAA,EAAA,mBAAA,KAAA,EAAA,OAAA,UAAA,GAAA,KAAA;SA5MLC,IAAA,CAAA,MAAA;;;AA8KC,SAAAD,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAD,GAAA;AAAA;;MAIG,aAAAG,EAAA;AAAA,MACD,OAAA;AAAA;MACW,MAAAF,EAAA,QAAA,MAAA;AAAA,QAEVA,EAAA,WAAAG,EAAA,QAAA,wBAAA,CAAA,GAAA,MAAA;AAAA;;;;8BAtLJH,EAAA,mBAAA,IAAA,EAAA;AAAA;OA6LGA,EAAA,UAAA,EAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAAE,EAAA,gBAAA,CAAAE;;;QAECJ,EAAA,WAAAG,EAAA,QAAA,WAAA,EAAA,MAAAC,EAAA,GAAA,MAAA;AAAA;;;;iBAQFJ,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAK,GAAA;AAAA,OACCL,EAAA,UAAA,GAAAA,EAAA,mBAAAA,EAAA,UAAA,MAAAA,EAAA,WAAA,GAAA,CAAAM;QAAqB,KAAAA;AAAA,QAAQ,OAAA;AAAA;;UAClB,OAAA;AAAA,UAAqB,MAAA;AAAA;;;UAUhBC,EAAA,MAAA,WAAA;;;QAEd,aAAAA,EAAA;AAAA;QACU,MAAAP,EAAA,QAAA,MAAA;AAAA;;;gCAtNfA,EAAA,mBAAA,IAAA,EAAA;AAAA;;MA8NI,MAAAO,EAAA;AAAA,MACD,QAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,IACG,GAAAP,EAAA,gBAAAO,EAAA,aAAA,GAAA,GAAAN,CAAA,KAlOND,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}