@nextcloud/vue 8.4.0 → 8.5.0

package/dist/Components/NcEmojiPicker.cjs

@@ -1,176 +1,3 @@
-var j = require("../assets/index-2a8e4ca1.css");
-const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/_l10n-72c5e29e.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
-r.register(r.t6, r.t29, r.t33);
-let o;
-const m = {
-  search: r.t("Search emoji"),
-  notfound: r.t("No emoji found"),
-  categories: {
-    search: r.t("Search results"),
-    recent: r.t("Frequently used"),
-    smileys: r.t("Smileys & Emotion"),
-    people: r.t("People & Body"),
-    nature: r.t("Animals & Nature"),
-    foods: r.t("Food & Drink"),
-    activity: r.t("Activities"),
-    places: r.t("Travel & Places"),
-    objects: r.t("Objects"),
-    symbols: r.t("Symbols"),
-    flags: r.t("Flags"),
-    custom: r.t("Custom")
-  }
-}, h = {
-  name: "NcEmojiPicker",
-  components: {
-    NcPopover: c,
-    NcTextField: l,
-    Emoji: a.Emoji,
-    Picker: a.Picker
-  },
-  props: {
-    /**
-     * The emoji-set
-     */
-    activeSet: {
-      type: String,
-      default: "native"
-    },
-    /**
-     * Show preview section when hovering emoji
-     */
-    showPreview: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Allow unselecting the selected emoji
-     */
-    allowUnselect: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selected emoji to allow unselecting
-     */
-    selectedEmoji: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The fallback emoji in the preview section
-     */
-    previewFallbackEmoji: {
-      type: String,
-      default: "grinning"
-    },
-    /**
-     * The fallback text in the preview section
-     */
-    previewFallbackName: {
-      type: String,
-      default: r.t("Pick an emoji")
-    },
-    /**
-     * Whether to close the emoji picker after picking one
-     */
-    closeOnSelect: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    }
-  },
-  emits: [
-    "select",
-    "select-data",
-    "unselect"
-  ],
-  setup() {
-    return o || (o = new a.EmojiIndex(d.default)), {
-      // Non-reactive constants
-      emojiIndex: o,
-      i18n: m
-    };
-  },
-  data() {
-    return {
-      search: "",
-      open: !1
-    };
-  },
-  computed: {
-    native() {
-      return this.activeSet === "native";
-    }
-  },
-  methods: {
-    t: r.t,
-    clearSearch() {
-      var e, i;
-      this.search = "";
-      const t = (i = (e = this.$refs.search) == null ? void 0 : e.$refs.inputField) == null ? void 0 : i.$refs.input;
-      t && t.focus();
-    },
-    select(t) {
-      this.$emit("select", t.native), this.$emit("select-data", t), this.closeOnSelect && (this.open = !1);
-    },
-    unselect() {
-      this.$emit("unselect");
-    },
-    afterShow() {
-      var i, s;
-      this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const e = (s = (i = this.$refs.search) == null ? void 0 : i.$refs.inputField) == null ? void 0 : s.$refs.input;
-      e && e.focus();
-    },
-    afterHide() {
-      this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
-    },
-    checkKeyEvent(t) {
-      if (t.key !== "Tab")
-        return;
-      const i = this.$refs.picker.$el.querySelectorAll(
-        "button, input"
-      ), s = i.length - 1;
-      if (i.length <= 1) {
-        t.preventDefault();
-        return;
-      }
-      t.shiftKey === !1 && t.target === i[s] ? (t.preventDefault(), i[0].focus()) : t.shiftKey === !0 && t.target === i[0] && (t.preventDefault(), i[s].focus());
-    }
-  }
-};
-var _ = function() {
-  var e = this, i = e._self._c;
-  return i("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container }, on: { "update:shown": function(s) {
-    e.open = s;
-  }, "after-show": e.afterShow, "after-hide": e.afterHide }, scopedSlots: e._u([{ key: "trigger", fn: function() {
-    return [e._t("default")];
-  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [i("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, title: e.previewFallbackName }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(s) {
-    return [i("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(n) {
-      e.search = n;
-    }, function(n) {
-      return s.onSearch(e.search);
-    }], "trailing-button-click": function(n) {
-      e.clearSearch(), s.onSearch(e.search);
-    } } })];
-  } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
-    return [i("div", { staticClass: "emoji-mart-category-label" }, [i("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), i("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, native: !0, size: 32 }, on: { click: e.unselect } }), i("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", native: !0, size: 10 }, on: { click: e.unselect } })];
-  }, proxy: !0 } : null], null, !0) }, "Picker", e.$attrs, !1))], 1);
-}, v = [], y = /* @__PURE__ */ f.normalizeComponent(
-  h,
-  _,
-  v,
-  !1,
-  null,
-  "4d56e499",
-  null,
-  null
-);
-const k = y.exports;
-module.exports = k;
+"use strict";
+const c = require("../chunks/NcEmojiPicker-o1VRXxQO.cjs");
+module.exports = c.NcEmojiPicker;

package/dist/Components/NcEmojiPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.cjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.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### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","_l10n","_sfc_main","Components_NcPopover","Components_NcTextField","emojiMartVueFast","data__default","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":"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"}
+{"version":3,"file":"NcEmojiPicker.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcEmojiPicker.mjs

@@ -1,183 +1,4 @@
-import "../assets/index-2a8e4ca1.css";
-import n from "./NcPopover.mjs";
-import c from "./NcTextField.mjs";
-import { r as l, l as u, y as f, E as p, a as r } from "../chunks/_l10n-f5af5269.mjs";
-import { Emoji as m, Picker as d, EmojiIndex as h } from "emoji-mart-vue-fast";
-import v from "emoji-mart-vue-fast/data/all.json";
-import { n as y } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-l(p, f, u);
-let o;
-const _ = {
-  search: r("Search emoji"),
-  notfound: r("No emoji found"),
-  categories: {
-    search: r("Search results"),
-    recent: r("Frequently used"),
-    smileys: r("Smileys & Emotion"),
-    people: r("People & Body"),
-    nature: r("Animals & Nature"),
-    foods: r("Food & Drink"),
-    activity: r("Activities"),
-    places: r("Travel & Places"),
-    objects: r("Objects"),
-    symbols: r("Symbols"),
-    flags: r("Flags"),
-    custom: r("Custom")
-  }
-}, k = {
-  name: "NcEmojiPicker",
-  components: {
-    NcPopover: n,
-    NcTextField: c,
-    Emoji: m,
-    Picker: d
-  },
-  props: {
-    /**
-     * The emoji-set
-     */
-    activeSet: {
-      type: String,
-      default: "native"
-    },
-    /**
-     * Show preview section when hovering emoji
-     */
-    showPreview: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Allow unselecting the selected emoji
-     */
-    allowUnselect: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selected emoji to allow unselecting
-     */
-    selectedEmoji: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The fallback emoji in the preview section
-     */
-    previewFallbackEmoji: {
-      type: String,
-      default: "grinning"
-    },
-    /**
-     * The fallback text in the preview section
-     */
-    previewFallbackName: {
-      type: String,
-      default: r("Pick an emoji")
-    },
-    /**
-     * Whether to close the emoji picker after picking one
-     */
-    closeOnSelect: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    }
-  },
-  emits: [
-    "select",
-    "select-data",
-    "unselect"
-  ],
-  setup() {
-    return o || (o = new h(v)), {
-      // Non-reactive constants
-      emojiIndex: o,
-      i18n: _
-    };
-  },
-  data() {
-    return {
-      search: "",
-      open: !1
-    };
-  },
-  computed: {
-    native() {
-      return this.activeSet === "native";
-    }
-  },
-  methods: {
-    t: r,
-    clearSearch() {
-      var e, t;
-      this.search = "";
-      const i = (t = (e = this.$refs.search) == null ? void 0 : e.$refs.inputField) == null ? void 0 : t.$refs.input;
-      i && i.focus();
-    },
-    select(i) {
-      this.$emit("select", i.native), this.$emit("select-data", i), this.closeOnSelect && (this.open = !1);
-    },
-    unselect() {
-      this.$emit("unselect");
-    },
-    afterShow() {
-      var t, s;
-      this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const e = (s = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : s.$refs.input;
-      e && e.focus();
-    },
-    afterHide() {
-      this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
-    },
-    checkKeyEvent(i) {
-      if (i.key !== "Tab")
-        return;
-      const t = this.$refs.picker.$el.querySelectorAll(
-        "button, input"
-      ), s = t.length - 1;
-      if (t.length <= 1) {
-        i.preventDefault();
-        return;
-      }
-      i.shiftKey === !1 && i.target === t[s] ? (i.preventDefault(), t[0].focus()) : i.shiftKey === !0 && i.target === t[0] && (i.preventDefault(), t[s].focus());
-    }
-  }
-};
-var j = function() {
-  var e = this, t = e._self._c;
-  return t("NcPopover", e._g(e._b({ attrs: { shown: e.open, container: e.container }, on: { "update:shown": function(s) {
-    e.open = s;
-  }, "after-show": e.afterShow, "after-hide": e.afterHide }, scopedSlots: e._u([{ key: "trigger", fn: function() {
-    return [e._t("default")];
-  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [t("Picker", e._b({ ref: "picker", attrs: { "auto-focus": !1, color: "var(--color-primary-element)", data: e.emojiIndex, emoji: e.previewFallbackEmoji, i18n: e.i18n, native: e.native, "emoji-size": 20, "per-line": 8, "picker-styles": { width: "320px" }, "show-preview": e.showPreview, title: e.previewFallbackName }, on: { select: e.select }, scopedSlots: e._u([{ key: "searchTemplate", fn: function(s) {
-    return [t("NcTextField", { ref: "search", staticClass: "search", attrs: { value: e.search, label: e.t("Search"), "label-visible": !0, placeholder: e.i18n.search, "trailing-button-icon": "close", "trailing-button-label": e.t("Clear search"), "show-trailing-button": e.search !== "" }, on: { "update:value": [function(a) {
-      e.search = a;
-    }, function(a) {
-      return s.onSearch(e.search);
-    }], "trailing-button-click": function(a) {
-      e.clearSearch(), s.onSearch(e.search);
-    } } })];
-  } }, e.allowUnselect && e.selectedEmoji ? { key: "customCategory", fn: function() {
-    return [t("div", { staticClass: "emoji-mart-category-label" }, [t("h3", { staticClass: "emoji-mart-category-label" }, [e._v(" " + e._s(e.t("Selected")) + " ")])]), t("Emoji", { staticClass: "emoji-selected", attrs: { data: e.emojiIndex, emoji: e.selectedEmoji, native: !0, size: 32 }, on: { click: e.unselect } }), t("Emoji", { staticClass: "emoji-delete", attrs: { data: e.emojiIndex, emoji: ":x:", native: !0, size: 10 }, on: { click: e.unselect } })];
-  }, proxy: !0 } : null], null, !0) }, "Picker", e.$attrs, !1))], 1);
-}, g = [], b = /* @__PURE__ */ y(
-  k,
-  j,
-  g,
-  !1,
-  null,
-  "4d56e499",
-  null,
-  null
-);
-const F = b.exports;
+import { N as f } from "../chunks/NcEmojiPicker-H_YmCt4L.mjs";
 export {
-  F as default
+  f as default
 };

package/dist/Components/NcEmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.mjs","sources":["../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.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### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nexport default {\n\tname: 'NcEmojiPicker',\n\tcomponents: {\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n.search {\n\tpadding: 4px 8px;\n}\n\n</style>\n\n<style scoped>\n.row-selected span {\n\tvertical-align: middle;\n}\n\n.row-selected button {\n\tvertical-align: middle;\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["emojiIndex","i18n","t","_sfc_main","NcPopover","NcTextField","Emoji","Picker","EmojiIndex","data","input","_b","_a","emojiObject","event","focusableList","last"],"mappings":"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"}
+{"version":3,"file":"NcEmojiPicker.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcEmptyContent.cjs

@@ -1,6 +1,5 @@
-var a = require("../assets/index-c239a2fc.css");
-const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const i = {
+var _ = require("../assets/NcEmptyContent-pSz7F6Oe.css");
+const e = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), s = {
   name: "NcEmptyContent",
   props: {
     /**
@@ -28,27 +27,26 @@ const i = {
      * Check if a description is given as either property or slot
      */
     hasDescription() {
-      var n;
-      return this.description !== "" || ((n = this.$slots.description) == null ? void 0 : n[0]);
+      return this.description !== "" || this.$slots.description?.[0];
     }
   }
 };
-var o = function() {
-  var t = this, e = t._self._c;
-  return e("div", { staticClass: "empty-content", attrs: { role: "note" } }, [t.$slots.icon ? e("div", { staticClass: "empty-content__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), t._t("name", function() {
-    return [t.hasName ? e("span", { staticClass: "empty-content__name" }, [t._v(" " + t._s(t.name) + " ")]) : t._e()];
-  }), t.hasDescription ? e("p", { staticClass: "empty-content__description" }, [t._t("description", function() {
+var i = function() {
+  var t = this, n = t._self._c;
+  return n("div", { staticClass: "empty-content", attrs: { role: "note" } }, [t.$slots.icon ? n("div", { staticClass: "empty-content__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), t._t("name", function() {
+    return [t.hasName ? n("span", { staticClass: "empty-content__name" }, [t._v(" " + t._s(t.name) + " ")]) : t._e()];
+  }), t.hasDescription ? n("p", { staticClass: "empty-content__description" }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
-  })], 2) : t._e(), t.$slots.action ? e("div", { staticClass: "empty-content__action" }, [t._t("action")], 2) : t._e()], 2);
-}, _ = [], c = /* @__PURE__ */ s.normalizeComponent(
+  })], 2) : t._e(), t.$slots.action ? n("div", { staticClass: "empty-content__action" }, [t._t("action")], 2) : t._e()], 2);
+}, r = [], o = /* @__PURE__ */ e.normalizeComponent(
+  s,
   i,
-  o,
-  _,
+  r,
   !1,
   null,
   "458108e7",
   null,
   null
 );
-const r = c.exports;
-module.exports = r;
+const a = o.exports;
+module.exports = a;

package/dist/Components/NcEmptyContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.cjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_a"],"mappings":";;AAsKA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAAC,IAAA,KAAA,OAAA,gBAAA,gBAAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEmptyContent.cjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";qEAsKAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,OAAA,cAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmptyContent.mjs

@@ -1,6 +1,6 @@
-import "../assets/index-c239a2fc.css";
-import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const i = {
+import "../assets/NcEmptyContent-pSz7F6Oe.css";
+import { n as e } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
+const s = {
   name: "NcEmptyContent",
   props: {
     /**
@@ -28,21 +28,20 @@ const i = {
      * Check if a description is given as either property or slot
      */
     hasDescription() {
-      var e;
-      return this.description !== "" || ((e = this.$slots.description) == null ? void 0 : e[0]);
+      return this.description !== "" || this.$slots.description?.[0];
     }
   }
 };
-var o = function() {
+var i = function() {
   var t = this, n = t._self._c;
   return n("div", { staticClass: "empty-content", attrs: { role: "note" } }, [t.$slots.icon ? n("div", { staticClass: "empty-content__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), t._t("name", function() {
     return [t.hasName ? n("span", { staticClass: "empty-content__name" }, [t._v(" " + t._s(t.name) + " ")]) : t._e()];
   }), t.hasDescription ? n("p", { staticClass: "empty-content__description" }, [t._t("description", function() {
     return [t._v(" " + t._s(t.description) + " ")];
   })], 2) : t._e(), t.$slots.action ? n("div", { staticClass: "empty-content__action" }, [t._t("action")], 2) : t._e()], 2);
-}, a = [], _ = /* @__PURE__ */ s(
+}, a = [], o = /* @__PURE__ */ e(
+  s,
   i,
-  o,
   a,
   !1,
   null,
@@ -50,7 +49,7 @@ var o = function() {
   null,
   null
 );
-const p = _.exports;
+const p = o.exports;
 export {
   p as default
 };

package/dist/Components/NcEmptyContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_a"],"mappings":";;AAsKA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;;AACA,aAAA,KAAA,gBAAA,QAAAC,IAAA,KAAA,OAAA,gBAAA,gBAAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEmptyContent.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\thasName() {\n\t\t\treturn this.name !== ''\n\t\t},\n\t\t/**\n\t\t * Check if a description is given as either property or slot\n\t\t */\n\t\thasDescription() {\n\t\t\treturn this.description !== '' || this.$slots.description?.[0]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;AAsKA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,OAAA,cAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcGuestContent.cjs

@@ -1,6 +1,5 @@
-var a = require("../assets/index-8aa4712e.css");
-const n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const s = {
+var _ = require("../assets/NcGuestContent-mGGTzI2_.css");
+const n = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), s = {
   name: "NcGuestContent",
   mounted() {
     document.getElementById("content").classList.add("nc-guest-content");
@@ -9,18 +8,18 @@ const s = {
     document.getElementById("content").classList.remove("nc-guest-content");
   }
 };
-var _ = function() {
-  var e = this, t = e._self._c;
-  return t("div", { attrs: { id: "guest-content-vue" } }, [e._t("default")], 2);
-}, c = [], o = /* @__PURE__ */ n.normalizeComponent(
+var c = function() {
+  var t = this, e = t._self._c;
+  return e("div", { attrs: { id: "guest-content-vue" } }, [t._t("default")], 2);
+}, o = [], r = /* @__PURE__ */ n.normalizeComponent(
   s,
-  _,
   c,
+  o,
   !1,
   null,
   "36ad47ca",
   null,
   null
 );
-const u = o.exports;
+const u = r.exports;
 module.exports = u;