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

package/dist/Components/NcColorPicker.mjs

@@ -1,50 +1,128 @@
-import "../assets/index4.css";
-import n from "./NcButton.mjs";
+import "../assets/index-4ef32afd.css";
+import s from "./NcButton.mjs";
 import c from "./NcPopover.mjs";
-import { t as o } from "../chunks/l10n-9a5a6afc.mjs";
-import { G as l } from "../chunks/GenColors-85cb6194.mjs";
-import s from "vue-material-design-icons/ArrowLeft.vue";
-import d from "vue-material-design-icons/Check.vue";
-import u from "vue-material-design-icons/DotsHorizontal.vue";
-import { Chrome as p } from "vue-color";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const a = function(e) {
-  const t = e.toString(16);
-  return t.length === 1 ? "0" + t : t;
-}, h = { name: "NcColorPicker", components: { ArrowLeft: s, Check: d, Chrome: p, DotsHorizontal: u, NcButton: n, NcPopover: c }, props: { value: { type: String, required: !0 }, advancedFields: { type: Boolean, default: !1 }, palette: { type: Array, default: () => l(4).map((e) => "#" + a(e.r) + a(e.g) + a(e.b)), validator(e) {
-  return e.every((t) => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(t));
-} } }, emits: ["submit", "close", "update:open", "update:value", "input"], data() {
-  return { currentColor: this.value, advanced: !1, ariaBack: o("Back"), ariaMore: o("More options") };
-}, watch: { value(e) {
-  this.currentColor = e;
-} }, methods: { t: o, handleConfirm() {
-  this.$emit("submit", this.currentColor), this.handleClose(), this.advanced = !1;
-}, handleClose() {
-  this.$emit("close"), this.$emit("update:open", !1);
-}, handleBack() {
-  this.advanced = !1;
-}, handleMoreSettings() {
-  this.advanced = !0;
-}, pickColor(e) {
-  typeof e != "string" && (e = this.currentColor.hex), this.currentColor = e, this.$emit("update:value", e), this.$emit("input", e);
-} } };
-var f = function() {
-  var e = this, t = e._self._c;
-  return t("NcPopover", e._g(e._b({ on: { "apply-hide": e.handleClose }, scopedSlots: e._u([{ key: "trigger", fn: function() {
+import { t as a } from "../chunks/l10n-27a75c40.mjs";
+import { G as l } from "../chunks/GenColors-38246c38.mjs";
+import d from "vue-material-design-icons/ArrowLeft.vue";
+import u from "vue-material-design-icons/Check.vue";
+import p from "vue-material-design-icons/DotsHorizontal.vue";
+import { Chrome as f } from "vue-color";
+import { n as _ } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const n = function(t) {
+  const e = t.toString(16);
+  return e.length === 1 ? "0" + e : e;
+}, m = {
+  name: "NcColorPicker",
+  components: {
+    ArrowLeft: d,
+    Check: u,
+    Chrome: f,
+    DotsHorizontal: p,
+    NcButton: s,
+    NcPopover: c
+  },
+  props: {
+    /**
+     * A HEX color that represents the initial value of the picker
+     */
+    value: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
+     */
+    advancedFields: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Provide a custom array of hexadecimal colors to show
+     */
+    palette: {
+      type: Array,
+      default: () => l(4).map((t) => "#" + n(t.r) + n(t.g) + n(t.b)),
+      validator(t) {
+        return t.every((e) => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(e));
+      }
+    }
+  },
+  emits: [
+    "submit",
+    "close",
+    "update:open",
+    "update:value",
+    "input"
+  ],
+  data() {
+    return {
+      currentColor: this.value,
+      advanced: !1,
+      ariaBack: a("Back"),
+      ariaMore: a("More options")
+    };
+  },
+  watch: {
+    value(t) {
+      this.currentColor = t;
+    }
+  },
+  methods: {
+    t: a,
+    /**
+     * Submit a picked colour and close picker
+     */
+    handleConfirm() {
+      this.$emit("submit", this.currentColor), this.handleClose(), this.advanced = !1;
+    },
+    handleClose() {
+      this.$emit("close"), this.$emit("update:open", !1);
+    },
+    /**
+     * Inner navigations
+     */
+    handleBack() {
+      this.advanced = !1;
+    },
+    handleMoreSettings() {
+      this.advanced = !0;
+    },
+    /**
+     * Pick a colour
+     *
+     * @param {string} color the picked color
+     */
+    pickColor(t) {
+      typeof t != "string" && (t = this.currentColor.hex), this.currentColor = t, this.$emit("update:value", t), this.$emit("input", t);
+    }
+  }
+};
+var v = function() {
+  var e = this, r = e._self._c;
+  return r("NcPopover", e._g(e._b({ on: { "apply-hide": e.handleClose }, scopedSlots: e._u([{ key: "trigger", fn: function() {
     return [e._t("default")];
-  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [t("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": e.advanced && e.advancedFields } }, [t("transition", { attrs: { name: "slide", mode: "out-in" } }, [e.advanced ? e._e() : t("div", { staticClass: "color-picker__simple" }, e._l(e.palette, function(r, i) {
-    return t("button", { key: i, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": r === e.currentColor }, style: { "background-color": r }, attrs: { type: "button" }, on: { click: function(k) {
-      return e.pickColor(r);
-    } } }, [r === e.currentColor ? t("Check", { attrs: { size: 20 } }) : e._e()], 1);
-  }), 0), e.advanced ? t("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": !0, "disable-fields": !e.advancedFields }, on: { input: e.pickColor }, model: { value: e.currentColor, callback: function(r) {
-    e.currentColor = r;
-  }, expression: "currentColor" } }) : e._e()], 1), t("div", { staticClass: "color-picker__navigation" }, [e.advanced ? t("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaBack }, on: { click: e.handleBack }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("ArrowLeft", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 1821202730) }) : e._e(), e.advanced ? e._e() : t("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaMore }, on: { click: e.handleMoreSettings }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("DotsHorizontal", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 1056868794) }), e.advanced ? t("NcButton", { attrs: { type: "primary" }, on: { click: e.handleConfirm } }, [e._v(" " + e._s(e.t("Choose")) + " ")]) : e._e()], 1)], 1)]);
-}, v = [], C = m(h, f, v, !1, null, "c959ec5a", null, null);
-const z = C.exports;
+  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [r("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": e.advanced && e.advancedFields } }, [r("transition", { attrs: { name: "slide", mode: "out-in" } }, [e.advanced ? e._e() : r("div", { staticClass: "color-picker__simple" }, e._l(e.palette, function(o, i) {
+    return r("button", { key: i, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": o === e.currentColor }, style: { "background-color": o }, attrs: { type: "button" }, on: { click: function(k) {
+      return e.pickColor(o);
+    } } }, [o === e.currentColor ? r("Check", { attrs: { size: 20 } }) : e._e()], 1);
+  }), 0), e.advanced ? r("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": !0, "disable-fields": !e.advancedFields }, on: { input: e.pickColor }, model: { value: e.currentColor, callback: function(o) {
+    e.currentColor = o;
+  }, expression: "currentColor" } }) : e._e()], 1), r("div", { staticClass: "color-picker__navigation" }, [e.advanced ? r("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaBack }, on: { click: e.handleBack }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("ArrowLeft", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1821202730) }) : e._e(), e.advanced ? e._e() : r("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaMore }, on: { click: e.handleMoreSettings }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("DotsHorizontal", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1056868794) }), e.advanced ? r("NcButton", { attrs: { type: "primary" }, on: { click: e.handleConfirm } }, [e._v(" " + e._s(e.t("Choose")) + " ")]) : e._e()], 1)], 1)]);
+}, h = [], C = /* @__PURE__ */ _(
+  m,
+  v,
+  h,
+  !1,
+  null,
+  "c959ec5a",
+  null,
+  null
+);
+const M = C.exports;
 export {
-  z as default
+  M as default
 };

package/dist/Components/NcColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcColorPicker.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcColorPicker.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.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### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\">\n\t\t\t<div :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover v-bind=\"$attrs\" v-on=\"$listeners\" @apply-hide=\"handleClose\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<div class=\"color-picker\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<button v-for=\"(color, index) in palette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{'background-color': color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\"\n\t\t\t\t\t\t\t:size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-if=\"advanced\"\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</transition>\n\t\t\t<div class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"!advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport GenColors from '../../utils/GenColors.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\n\nconst rgbToHex = function(color) {\n\tconst hex = color.toString(16)\n\treturn hex.length === 1 ? '0' + hex : hex\n}\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of hexadecimal colors to show\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => GenColors(4).map(color => {\n\t\t\t\treturn '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b)\n\t\t\t}),\n\t\t\tvalidator(palette) {\n\t\t\t\treturn palette.every(color => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(color))\n\t\t\t},\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\twatch: {\n\t\tvalue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t */\n\t\thandleConfirm() {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\tthis.handleClose()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:value', color)\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, $clickable-area);\n\t\tgrid-auto-rows: $clickable-area;\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["rgbToHex","color","hex","_sfc_main","ArrowLeftIcon","Check","Chrome","DotsHorizontal","NcButton","NcPopover","GenColors","palette","t"],"mappings":";;;;;;;;;;AAkOA,MAAAA,IAAA,SAAAC,GAAA;AACA,QAAAC,IAAAD,EAAA,SAAA,EAAA;AACA,SAAAC,EAAA,WAAA,IAAA,MAAAA,IAAAA;AACA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAAC,EAAA,CAAA,EAAA,IAAA,CAAAT,MACA,MAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,CACA;AAAA,MACA,UAAAU,GAAA;AACA,eAAAA,EAAA,MAAA,CAAAV,MAAA,gCAAA,KAAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAW,EAAA,MAAA;AAAA,MACA,UAAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAX,GAAA;AACA,WAAA,eAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAW;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA,GACA,KAAA,YAAA,GAEA,KAAA,WAAA;AAAA,IACA;AAAA,IACA,cAAA;AAIA,WAAA,MAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IACA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAX,GAAA;AACA,MAAA,OAAAA,KAAA,aACAA,IAAA,KAAA,aAAA,MAEA,KAAA,eAAAA,GAKA,KAAA,MAAA,gBAAAA,CAAA,GAKA,KAAA,MAAA,SAAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcContent.cjs

@@ -1 +1,25 @@
-var l=require("../assets/index39.css");const r=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const n={props:{appName:{type:String,required:!0}}};var s=function(){var t=this,e=t._self._c;return e("div",{staticClass:"content",class:`app-${t.appName.toLowerCase()}`,attrs:{id:"content-vue"}},[t._t("default")],2)},a=[],o=r.normalizeComponent(n,s,a,!1,null,"eb1078f7",null,null);const p=o.exports;module.exports=p;
+var p = require("../assets/index-a9e4fe04.css");
+const n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const r = {
+  props: {
+    appName: {
+      type: String,
+      required: !0
+    }
+  }
+};
+var s = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "content", class: `app-${e.appName.toLowerCase()}`, attrs: { id: "content-vue" } }, [e._t("default")], 2);
+}, _ = [], o = /* @__PURE__ */ n.normalizeComponent(
+  r,
+  s,
+  _,
+  !1,
+  null,
+  "eb1078f7",
+  null,
+  null
+);
+const a = o.exports;
+module.exports = a;

package/dist/Components/NcContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcContent.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcContent.cjs","sources":["../../src/components/NcContent/NcContent.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\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 provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\"\n\t\t:class=\"`app-${appName.toLowerCase()}`\"\n\t\tclass=\"content\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: 50px;\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t:deep(*) {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;AA+EA,MAAAA,IAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcContent.mjs

@@ -1,11 +1,27 @@
-import "../assets/index20.css";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const r = { props: { appName: { type: String, required: !0 } } };
+import "../assets/index-a9e4fe04.css";
+import { n } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const r = {
+  props: {
+    appName: {
+      type: String,
+      required: !0
+    }
+  }
+};
 var s = function() {
-  var t = this, e = t._self._c;
-  return e("div", { staticClass: "content", class: `app-${t.appName.toLowerCase()}`, attrs: { id: "content-vue" } }, [t._t("default")], 2);
-}, n = [], o = a(r, s, n, !1, null, "eb1078f7", null, null);
-const i = o.exports;
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "content", class: `app-${e.appName.toLowerCase()}`, attrs: { id: "content-vue" } }, [e._t("default")], 2);
+}, _ = [], a = /* @__PURE__ */ n(
+  r,
+  s,
+  _,
+  !1,
+  null,
+  "eb1078f7",
+  null,
+  null
+);
+const l = a.exports;
 export {
-  i as default
+  l as default
 };

package/dist/Components/NcContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcContent.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"NcContent.mjs","sources":["../../src/components/NcContent/NcContent.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\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 provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\"\n\t\t:class=\"`app-${appName.toLowerCase()}`\"\n\t\tclass=\"content\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: 50px;\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t:deep(*) {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;AA+EA,MAAAA,IAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcCounterBubble.cjs

@@ -1 +1,47 @@
-var c=require("../assets/index38.css");const n=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const u={name:"NcCounterBubble",props:{type:{type:String,default:"",validator(t){return["highlighted","outlined",""].indexOf(t)!==-1}},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}}}};var l=function(){var t=this,e=t._self._c;return e("div",{staticClass:"counter-bubble__counter",class:t.counterClassObject},[t._t("default")],2)},r=[],o=n.normalizeComponent(u,l,r,!1,null,"d96bcd79",null,null);const i=o.exports;module.exports=i;
+var _ = require("../assets/index-7813bab3.css");
+const r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const 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
+      };
+    }
+  }
+};
+var c = function() {
+  var e = this, n = e._self._c;
+  return n("div", { staticClass: "counter-bubble__counter", class: e.counterClassObject }, [e._t("default")], 2);
+}, l = [], o = /* @__PURE__ */ r.normalizeComponent(
+  u,
+  c,
+  l,
+  !1,
+  null,
+  "d96bcd79",
+  null,
+  null
+);
+const s = o.exports;
+module.exports = s;

package/dist/Components/NcCounterBubble.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcCounterBubble.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcCounterBubble.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"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,CAAA,eAAA,YAAA,EAAA,EAAA,QAAAA,CAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,wCAAA,KAAA,SAAA;AAAA,QACA,qCAAA,KAAA,SAAA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcCounterBubble.mjs

@@ -1,15 +1,49 @@
-import "../assets/index19.css";
-import { n as u } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const l = { name: "NcCounterBubble", props: { type: { type: String, default: "", validator(t) {
-  return ["highlighted", "outlined", ""].indexOf(t) !== -1;
-} }, 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 };
-} } };
-var n = function() {
-  var t = this, e = t._self._c;
-  return e("div", { staticClass: "counter-bubble__counter", class: t.counterClassObject }, [t._t("default")], 2);
-}, o = [], r = u(l, n, o, !1, null, "d96bcd79", null, null);
-const a = r.exports;
+import "../assets/index-7813bab3.css";
+import { n as r } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const l = {
+  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
+      };
+    }
+  }
+};
+var o = function() {
+  var e = this, n = e._self._c;
+  return n("div", { staticClass: "counter-bubble__counter", class: e.counterClassObject }, [e._t("default")], 2);
+}, u = [], c = /* @__PURE__ */ r(
+  l,
+  o,
+  u,
+  !1,
+  null,
+  "d96bcd79",
+  null,
+  null
+);
+const a = c.exports;
 export {
   a as default
 };

package/dist/Components/NcCounterBubble.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcCounterBubble.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"NcCounterBubble.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"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,CAAA,eAAA,YAAA,EAAA,EAAA,QAAAA,CAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,wCAAA,KAAA,SAAA;AAAA,QACA,qCAAA,KAAA,SAAA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcDashboardWidget.cjs

@@ -1 +1,133 @@
-var d=require("../assets/index57.css");const s=require("../chunks/index-12fa9b26.cjs"),r=require("./NcDashboardWidgetItem.cjs"),i=require("./NcEmptyContent.cjs"),a=require("vue-material-design-icons/Check.vue"),o=require("../chunks/l10n-46d0c1c0.cjs"),m=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const l={name:"NcDashboardWidget",components:{NcAvatar:s.NcAvatar,NcDashboardWidgetItem:r,NcEmptyContent:i,Check:a},props:{items:{type:Array,default:()=>[]},showMoreUrl:{type:String,default:""},showMoreLabel:{type:String,default:o.t("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 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)}),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)},h=[function(){var t=this,e=t._self._c;return e("div",{staticClass:"item__details"},[e("h3",[t._v(" ")]),e("p",{staticClass:"message"},[t._v("   ")])])}],c=m.normalizeComponent(l,u,h,!1,null,"1efcbeee",null,null);const p=c.exports;module.exports=p;
+var y = require("../assets/index-6416f636.css");
+const r = require("../chunks/index-2a5b8ace.cjs"), o = require("./NcDashboardWidgetItem.cjs"), a = require("./NcEmptyContent.cjs"), i = require("vue-material-design-icons/Check.vue"), l = require("../chunks/l10n-903083c4.cjs"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), c = (e) => e && e.__esModule ? e : { default: e }, u = /* @__PURE__ */ c(i);
+const h = {
+  name: "NcDashboardWidget",
+  components: {
+    NcAvatar: r.NcAvatar,
+    NcDashboardWidgetItem: o,
+    NcEmptyContent: a,
+    Check: u.default
+  },
+  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: l.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 e = {};
+      for (const t in this.itemMenu)
+        e[t] = (n) => {
+          this.$emit(t, n);
+        };
+      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;
+    }
+  }
+};
+var _ = function() {
+  var t = this, n = t._self._c;
+  return n("div", { staticClass: "dashboard-widget" }, [t.showHalfEmptyContentArea ? n("NcEmptyContent", { staticClass: "half-screen", attrs: { description: t.halfEmptyContentString }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [t._t("halfEmptyContentIcon", function() {
+      return [n("Check")];
+    })];
+  }, proxy: !0 }], null, !0) }) : t._e(), n("ul", t._l(t.displayedItems, function(s) {
+    return n("li", { key: s.id }, [t._t("default", function() {
+      return [n("NcDashboardWidgetItem", t._g(t._b({ attrs: { "item-menu": t.itemMenu } }, "NcDashboardWidgetItem", s, !1), t.handlers))];
+    }, { item: s })], 2);
+  }), 0), t.loading ? n("div", t._l(7, function(s) {
+    return n("div", { key: s, staticClass: "item-list__entry" }, [n("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 ? n("NcEmptyContent", { attrs: { description: t.emptyContentMessage }, scopedSlots: t._u([{ key: "icon", fn: function() {
+      return [t._t("emptyContentIcon")];
+    }, proxy: !0 }], null, !0) }) : t._e()];
+  }) : t.showMore ? n("a", { staticClass: "more", attrs: { href: t.showMoreUrl, target: "_blank", tabindex: "0" } }, [t._v(" " + t._s(t.showMoreLabel) + " ")]) : t._e()], 2);
+}, d = [function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "item__details" }, [t("h3", [e._v(" ")]), t("p", { staticClass: "message" }, [e._v("   ")])]);
+}], p = /* @__PURE__ */ m.normalizeComponent(
+  h,
+  _,
+  d,
+  !1,
+  null,
+  "1efcbeee",
+  null,
+  null
+);
+const f = p.exports;
+module.exports = f;

package/dist/Components/NcDashboardWidget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcDashboardWidget.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","Components_NcAvatar","Components_NcDashboardWidgetItem","Components_NcEmptyContent","Check__default","l10n","h","evName","it","nbItems"],"mappings":";;AAgPA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,IACA,uBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,EAAA;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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}