@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcDashboardWidget.mjs

@@ -1,51 +1,140 @@
-import "../assets/index18.css";
-import { N as s } from "../chunks/index-7aa3fc24.mjs";
-import r from "./NcDashboardWidgetItem.mjs";
-import o from "./NcEmptyContent.mjs";
-import a from "vue-material-design-icons/Check.vue";
-import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const l = { name: "NcDashboardWidget", components: { NcAvatar: s, NcDashboardWidgetItem: r, NcEmptyContent: o, Check: a }, props: { items: { type: Array, default: () => [] }, showMoreUrl: { type: String, default: "" }, showMoreLabel: { type: String, default: i("More items …") }, loading: { type: Boolean, default: !1 }, itemMenu: { type: Object, default: () => ({}) }, showItemsAndEmptyContent: { type: Boolean, default: !1 }, emptyContentMessage: { type: String, default: "" }, halfEmptyContentMessage: { type: String, default: "" } }, computed: { handlers() {
-  const t = {};
-  for (const e in this.itemMenu)
-    t[e] = (n) => {
-      this.$emit(e, 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;
-} } };
-var h = function() {
+import "../assets/index-6416f636.css";
+import { N as r } from "../chunks/index-6c221fa0.mjs";
+import o from "./NcDashboardWidgetItem.mjs";
+import a from "./NcEmptyContent.mjs";
+import i from "vue-material-design-icons/Check.vue";
+import { t as m } from "../chunks/l10n-27a75c40.mjs";
+import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const c = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: r,
+    NcDashboardWidgetItem: o,
+    NcEmptyContent: a,
+    Check: i
+  },
+  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: m("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 n = {};
+      for (const t in this.itemMenu)
+        n[t] = (e) => {
+          this.$emit(t, e);
+        };
+      return n;
+    },
+    displayedItems() {
+      const n = this.showMoreUrl && this.items.length >= this.maxItemNumber ? this.maxItemNumber - 1 : this.maxItemNumber;
+      return this.items.slice(0, n);
+    },
+    showHalfEmptyContentArea() {
+      return this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0;
+    },
+    halfEmptyContentString() {
+      return this.halfEmptyContentMessage || this.emptyContentMessage;
+    },
+    maxItemNumber() {
+      return this.showItemsAndEmptyContent ? 5 : 7;
+    },
+    showMore() {
+      return this.showMoreUrl && this.items.length >= this.maxItemNumber;
+    }
+  }
+};
+var u = function() {
   var t = this, e = t._self._c;
   return e("div", { staticClass: "dashboard-widget" }, [t.showHalfEmptyContentArea ? e("NcEmptyContent", { staticClass: "half-screen", attrs: { description: t.halfEmptyContentString }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [t._t("halfEmptyContentIcon", function() {
       return [e("Check")];
     })];
-  }, proxy: !0 }], null, !0) }) : t._e(), e("ul", t._l(t.displayedItems, function(n) {
-    return e("li", { key: n.id }, [t._t("default", function() {
-      return [e("NcDashboardWidgetItem", t._g(t._b({ attrs: { "item-menu": t.itemMenu } }, "NcDashboardWidgetItem", n, !1), t.handlers))];
-    }, { item: n })], 2);
-  }), 0), t.loading ? e("div", t._l(7, function(n) {
-    return e("div", { key: n, staticClass: "item-list__entry" }, [e("NcAvatar", { staticClass: "item-avatar", attrs: { size: 44 } }), t._m(0, !0)], 1);
+  }, proxy: !0 }], null, !0) }) : t._e(), e("ul", t._l(t.displayedItems, function(s) {
+    return e("li", { key: s.id }, [t._t("default", function() {
+      return [e("NcDashboardWidgetItem", t._g(t._b({ attrs: { "item-menu": t.itemMenu } }, "NcDashboardWidgetItem", s, !1), t.handlers))];
+    }, { item: s })], 2);
+  }), 0), t.loading ? e("div", t._l(7, function(s) {
+    return e("div", { key: s, staticClass: "item-list__entry" }, [e("NcAvatar", { staticClass: "item-avatar", attrs: { size: 44 } }), t._m(0, !0)], 1);
   }), 0) : t.items.length === 0 ? t._t("empty-content", function() {
     return [t.emptyContentMessage ? e("NcEmptyContent", { attrs: { description: t.emptyContentMessage }, scopedSlots: t._u([{ key: "icon", fn: function() {
       return [t._t("emptyContentIcon")];
     }, proxy: !0 }], null, !0) }) : t._e()];
   }) : t.showMore ? e("a", { staticClass: "more", attrs: { href: t.showMoreUrl, target: "_blank", tabindex: "0" } }, [t._v(" " + t._s(t.showMoreLabel) + " ")]) : t._e()], 2);
-}, u = [function() {
-  var t = this, e = t._self._c;
-  return e("div", { staticClass: "item__details" }, [e("h3", [t._v(" ")]), e("p", { staticClass: "message" }, [t._v("   ")])]);
-}], p = m(l, h, u, !1, null, "1efcbeee", null, null);
-const M = p.exports;
+}, h = [function() {
+  var n = this, t = n._self._c;
+  return t("div", { staticClass: "item__details" }, [t("h3", [n._v(" ")]), t("p", { staticClass: "message" }, [n._v("   ")])]);
+}], p = /* @__PURE__ */ l(
+  c,
+  u,
+  h,
+  !1,
+  null,
+  "1efcbeee",
+  null,
+  null
+);
+const v = p.exports;
 export {
-  M as default
+  v as default
 };

package/dist/Components/NcDashboardWidget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidget.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","Check","t","h","evName","it","nbItems"],"mappings":";;;;;;;AAgPA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;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,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,OAAA,CAAA;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,YAAAC,IAAA,CAAA;AACA,iBAAAC,KAAA,KAAA;AACA,QAAAD,EAAAC,CAAA,IAAA,CAAAC,MAAA;AACA,eAAA,MAAAD,GAAAC,CAAA;AAAA,QACA;AAEA,aAAAF;AAAA,IACA;AAAA,IACA,iBAAA;AACA,YAAAG,IAAA,KAAA,eAAA,KAAA,MAAA,UAAA,KAAA,gBACA,KAAA,gBAAA,IACA,KAAA;AACA,aAAA,KAAA,MAAA,MAAA,GAAAA,CAAA;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/Components/NcDashboardWidgetItem.cjs

@@ -1 +1,138 @@
-var f=require("../assets/index55.css");const i=require("../chunks/index-12fa9b26.cjs"),o=require("./NcActions.cjs"),s=require("./NcActionButton.cjs"),l=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const c={name:"NcDashboardWidgetItem",components:{NcAvatar:i.NcAvatar,NcActions:o,NcActionButton:s},props:{id:{type:[String,Number],default:void 0},targetUrl:{type:String,default:void 0},avatarUrl:{type:String,default:void 0},avatarUsername:{type:String,default:void 0},avatarIsNoUser:{type:Boolean,default:!1},overlayIconUrl:{type:String,default:void 0},mainText:{type:String,required:!0},subText:{type:String,default:""},itemMenu:{type:Object,default:()=>({})},forceMenu:{type:Boolean,default:!0}},data(){return{hovered:!1}},computed:{item(){return{id:this.id,targetUrl:this.targetUrl,avatarUrl:this.avatarUrl,avatarUsername:this.avatarUsername,overlayIconUrl:this.overlayIconUrl,mainText:this.mainText,subText:this.subText}},gotMenu(){return Object.keys(this.itemMenu).length!==0||!!this.$slots.actions},gotOverlayIcon(){return this.overlayIconUrl&&this.overlayIconUrl!==""}},methods:{onLinkClick(t){t.target.closest(".action-item")&&t.preventDefault()}}};var u=function(){var t=this,e=t._self._c;return e("div",{on:{mouseover:function(a){t.hovered=!0},mouseleave:function(a){t.hovered=!1}}},[e(t.targetUrl?"a":"div",{tag:"component",class:{"item-list__entry":!0,"item-list__entry--has-actions-menu":t.gotMenu},attrs:{href:t.targetUrl,target:t.targetUrl?"_blank":void 0},on:{click:t.onLinkClick}},[t._t("avatar",function(){return[e("NcAvatar",{staticClass:"item-avatar",attrs:{size:44,url:t.avatarUrl,user:t.avatarUsername,"is-no-user":t.avatarIsNoUser,"show-user-status":!t.gotOverlayIcon}})]},{avatarUrl:t.avatarUrl,avatarUsername:t.avatarUsername}),t.overlayIconUrl?e("img",{staticClass:"item-icon",attrs:{alt:"",src:t.overlayIconUrl}}):t._e(),e("div",{staticClass:"item__details"},[e("h3",{attrs:{title:t.mainText}},[t._v(" "+t._s(t.mainText)+" ")]),e("span",{staticClass:"message",attrs:{title:t.subText}},[t._v(" "+t._s(t.subText)+" ")])]),t.gotMenu?e("NcActions",{attrs:{"force-menu":t.forceMenu}},[t._t("actions",function(){return t._l(t.itemMenu,function(a,r){return e("NcActionButton",{key:r,attrs:{icon:a.icon,"close-after-click":!0},on:{click:function(n){return n.preventDefault(),n.stopPropagation(),t.$emit(r,t.item)}}},[t._v(" "+t._s(a.text)+" ")])})})],2):t._e()],2)],1)},v=[],m=l.normalizeComponent(c,u,v,!1,null,"2ff3cd9a",null,null);const d=m.exports;module.exports=d;
+var f = require("../assets/index-165fce0e.css");
+const i = require("../chunks/index-2a5b8ace.cjs"), o = require("./NcActions.cjs"), c = require("./NcActionButton.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const u = {
+  name: "NcDashboardWidgetItem",
+  components: {
+    NcAvatar: i.NcAvatar,
+    NcActions: o,
+    NcActionButton: c
+  },
+  props: {
+    /**
+     * The item id (optional)
+     */
+    id: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The item element is a link to this URL (optional)
+     */
+    targetUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Where to get the avatar image. (optional) Used if avatarUsername is not defined.
+     */
+    avatarUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.
+     */
+    avatarUsername: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Is the avatarUsername not a user's name? (optional, false by default)
+     */
+    avatarIsNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Small icon to display on the bottom-right corner of the avatar (optional)
+     */
+    overlayIconUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Item main text (mandatory)
+     */
+    mainText: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Item subline text (optional)
+     */
+    subText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each items (optional)
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Specify whether the 3 dot menu is forced when only one action is present
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      hovered: !1
+    };
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        targetUrl: this.targetUrl,
+        avatarUrl: this.avatarUrl,
+        avatarUsername: this.avatarUsername,
+        overlayIconUrl: this.overlayIconUrl,
+        mainText: this.mainText,
+        subText: this.subText
+      };
+    },
+    gotMenu() {
+      return Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions;
+    },
+    gotOverlayIcon() {
+      return this.overlayIconUrl && this.overlayIconUrl !== "";
+    }
+  },
+  methods: {
+    onLinkClick(r) {
+      r.target.closest(".action-item") && r.preventDefault();
+    }
+  }
+};
+var v = function() {
+  var t = this, e = t._self._c;
+  return e("div", { on: { mouseover: function(a) {
+    t.hovered = !0;
+  }, mouseleave: function(a) {
+    t.hovered = !1;
+  } } }, [e(t.targetUrl ? "a" : "div", { tag: "component", class: { "item-list__entry": !0, "item-list__entry--has-actions-menu": t.gotMenu }, attrs: { href: t.targetUrl, target: t.targetUrl ? "_blank" : void 0 }, on: { click: t.onLinkClick } }, [t._t("avatar", function() {
+    return [e("NcAvatar", { staticClass: "item-avatar", attrs: { size: 44, url: t.avatarUrl, user: t.avatarUsername, "is-no-user": t.avatarIsNoUser, "show-user-status": !t.gotOverlayIcon } })];
+  }, { avatarUrl: t.avatarUrl, avatarUsername: t.avatarUsername }), t.overlayIconUrl ? e("img", { staticClass: "item-icon", attrs: { alt: "", src: t.overlayIconUrl } }) : t._e(), e("div", { staticClass: "item__details" }, [e("h3", { attrs: { title: t.mainText } }, [t._v(" " + t._s(t.mainText) + " ")]), e("span", { staticClass: "message", attrs: { title: t.subText } }, [t._v(" " + t._s(t.subText) + " ")])]), t.gotMenu ? e("NcActions", { attrs: { "force-menu": t.forceMenu } }, [t._t("actions", function() {
+    return t._l(t.itemMenu, function(a, n) {
+      return e("NcActionButton", { key: n, attrs: { icon: a.icon, "close-after-click": !0 }, on: { click: function(s) {
+        return s.preventDefault(), s.stopPropagation(), t.$emit(n, t.item);
+      } } }, [t._v(" " + t._s(a.text) + " ")]);
+    });
+  })], 2) : t._e()], 2)], 1);
+}, d = [], _ = /* @__PURE__ */ l.normalizeComponent(
+  u,
+  v,
+  d,
+  !1,
+  null,
+  "2ff3cd9a",
+  null,
+  null
+);
+const m = _.exports;
+module.exports = m;

package/dist/Components/NcDashboardWidgetItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcDashboardWidgetItem.cjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\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\"\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 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: flex-start;\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: 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\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":["_sfc_main","Components_NcAvatar","Components_NcActions","Components_NcActionButton","event"],"mappings":";;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;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,OAAA,CAAA;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,YAAAC,GAAA;AACA,MAAAA,EAAA,OAAA,QAAA,cAAA,KACAA,EAAA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDashboardWidgetItem.mjs

@@ -1,20 +1,118 @@
-import "../assets/index17.css";
-import { N as o } from "../chunks/index-7aa3fc24.mjs";
-import i from "./NcActions.mjs";
-import s from "./NcActionButton.mjs";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const c = { name: "NcDashboardWidgetItem", components: { NcAvatar: o, NcActions: i, NcActionButton: s }, props: { id: { type: [String, Number], default: void 0 }, targetUrl: { type: String, default: void 0 }, avatarUrl: { type: String, default: void 0 }, avatarUsername: { type: String, default: void 0 }, avatarIsNoUser: { type: Boolean, default: !1 }, overlayIconUrl: { type: String, default: void 0 }, mainText: { type: String, required: !0 }, subText: { type: String, default: "" }, itemMenu: { type: Object, default: () => ({}) }, forceMenu: { type: Boolean, default: !0 } }, data() {
-  return { hovered: !1 };
-}, computed: { item() {
-  return { id: this.id, targetUrl: this.targetUrl, avatarUrl: this.avatarUrl, avatarUsername: this.avatarUsername, overlayIconUrl: this.overlayIconUrl, mainText: this.mainText, subText: this.subText };
-}, gotMenu() {
-  return Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions;
-}, gotOverlayIcon() {
-  return this.overlayIconUrl && this.overlayIconUrl !== "";
-} }, methods: { onLinkClick(t) {
-  t.target.closest(".action-item") && t.preventDefault();
-} } };
-var u = function() {
+import "../assets/index-165fce0e.css";
+import { N as i } from "../chunks/index-6c221fa0.mjs";
+import o from "./NcActions.mjs";
+import l from "./NcActionButton.mjs";
+import { n as c } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = {
+  name: "NcDashboardWidgetItem",
+  components: {
+    NcAvatar: i,
+    NcActions: o,
+    NcActionButton: l
+  },
+  props: {
+    /**
+     * The item id (optional)
+     */
+    id: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * The item element is a link to this URL (optional)
+     */
+    targetUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Where to get the avatar image. (optional) Used if avatarUsername is not defined.
+     */
+    avatarUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.
+     */
+    avatarUsername: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Is the avatarUsername not a user's name? (optional, false by default)
+     */
+    avatarIsNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Small icon to display on the bottom-right corner of the avatar (optional)
+     */
+    overlayIconUrl: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Item main text (mandatory)
+     */
+    mainText: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Item subline text (optional)
+     */
+    subText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * An object containing context menu entries that will be displayed for each items (optional)
+     */
+    itemMenu: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Specify whether the 3 dot menu is forced when only one action is present
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      hovered: !1
+    };
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        targetUrl: this.targetUrl,
+        avatarUrl: this.avatarUrl,
+        avatarUsername: this.avatarUsername,
+        overlayIconUrl: this.overlayIconUrl,
+        mainText: this.mainText,
+        subText: this.subText
+      };
+    },
+    gotMenu() {
+      return Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions;
+    },
+    gotOverlayIcon() {
+      return this.overlayIconUrl && this.overlayIconUrl !== "";
+    }
+  },
+  methods: {
+    onLinkClick(r) {
+      r.target.closest(".action-item") && r.preventDefault();
+    }
+  }
+};
+var m = function() {
   var t = this, e = t._self._c;
   return e("div", { on: { mouseover: function(a) {
     t.hovered = !0;
@@ -23,14 +121,23 @@ var u = function() {
   } } }, [e(t.targetUrl ? "a" : "div", { tag: "component", class: { "item-list__entry": !0, "item-list__entry--has-actions-menu": t.gotMenu }, attrs: { href: t.targetUrl, target: t.targetUrl ? "_blank" : void 0 }, on: { click: t.onLinkClick } }, [t._t("avatar", function() {
     return [e("NcAvatar", { staticClass: "item-avatar", attrs: { size: 44, url: t.avatarUrl, user: t.avatarUsername, "is-no-user": t.avatarIsNoUser, "show-user-status": !t.gotOverlayIcon } })];
   }, { avatarUrl: t.avatarUrl, avatarUsername: t.avatarUsername }), t.overlayIconUrl ? e("img", { staticClass: "item-icon", attrs: { alt: "", src: t.overlayIconUrl } }) : t._e(), e("div", { staticClass: "item__details" }, [e("h3", { attrs: { title: t.mainText } }, [t._v(" " + t._s(t.mainText) + " ")]), e("span", { staticClass: "message", attrs: { title: t.subText } }, [t._v(" " + t._s(t.subText) + " ")])]), t.gotMenu ? e("NcActions", { attrs: { "force-menu": t.forceMenu } }, [t._t("actions", function() {
-    return t._l(t.itemMenu, function(a, r) {
-      return e("NcActionButton", { key: r, attrs: { icon: a.icon, "close-after-click": !0 }, on: { click: function(n) {
-        return n.preventDefault(), n.stopPropagation(), t.$emit(r, t.item);
+    return t._l(t.itemMenu, function(a, n) {
+      return e("NcActionButton", { key: n, attrs: { icon: a.icon, "close-after-click": !0 }, on: { click: function(s) {
+        return s.preventDefault(), s.stopPropagation(), t.$emit(n, t.item);
       } } }, [t._v(" " + t._s(a.text) + " ")]);
     });
   })], 2) : t._e()], 2)], 1);
-}, v = [], m = l(c, u, v, !1, null, "2ff3cd9a", null, null);
-const y = m.exports;
+}, d = [], f = /* @__PURE__ */ c(
+  u,
+  m,
+  d,
+  !1,
+  null,
+  "2ff3cd9a",
+  null,
+  null
+);
+const y = f.exports;
 export {
   y as default
 };

package/dist/Components/NcDashboardWidgetItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.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\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\"\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 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: flex-start;\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: 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\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":["_sfc_main","NcAvatar","NcActions","NcActionButton","event"],"mappings":";;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;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,OAAA,CAAA;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,YAAAC,GAAA;AACA,MAAAA,EAAA,OAAA,QAAA,cAAA,KACAA,EAAA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}