@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcEmojiPicker.cjs

@@ -1 +1,175 @@
-var y=require("../assets/index-66b19339.css");const o=require("./NcPopover.cjs"),c=require("./NcTextField.cjs"),i=require("../chunks/l10n-46d0c1c0.cjs"),s=require("emoji-mart-vue-fast"),l=require("emoji-mart-vue-fast/data/all.json"),u=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");let a;const h={search:i.t("Search emoji"),notfound:i.t("No emoji found"),categories:{search:i.t("Search results"),recent:i.t("Frequently used"),smileys:i.t("Smileys & Emotion"),people:i.t("People & Body"),nature:i.t("Animals & Nature"),foods:i.t("Food & Drink"),activity:i.t("Activities"),places:i.t("Travel & Places"),objects:i.t("Objects"),symbols:i.t("Symbols"),flags:i.t("Flags"),custom:i.t("Custom")}},p={name:"NcEmojiPicker",components:{NcPopover:o,NcTextField:c,Emoji:s.Emoji,Picker:s.Picker},props:{activeSet:{type:String,default:"native"},showPreview:{type:Boolean,default:!1},allowUnselect:{type:Boolean,default:!1},selectedEmoji:{type:String,default:""},previewFallbackEmoji:{type:String,default:"grinning"},previewFallbackName:{type:String,default:i.t("Pick an emoji")},closeOnSelect:{type:Boolean,default:!0},container:{type:[String,Object,Element,Boolean],default:"body"}},emits:["select","select-data","unselect"],setup(){return a||(a=new s.EmojiIndex(l)),{emojiIndex:a,i18n:h}},data(){return{search:"",open:!1}},computed:{native(){return this.activeSet==="native"}},methods:{t:i.t,clearSearch(){var t,r;this.search="";const e=(r=(t=this.$refs.search)==null?void 0:t.$refs.inputField)==null?void 0:r.$refs.input;e&&e.focus()},select(e){this.$emit("select",e.native),this.$emit("select-data",e),this.closeOnSelect&&(this.open=!1)},unselect(){this.$emit("unselect")},afterShow(){var t,r;this.$refs.picker.$el.addEventListener("keydown",this.checkKeyEvent);const e=(r=(t=this.$refs.search)==null?void 0:t.$refs.inputField)==null?void 0:r.$refs.input;e&&e.focus()},afterHide(){this.$refs.picker.$el.removeEventListener("keydown",this.checkKeyEvent)},checkKeyEvent(e){if(e.key!=="Tab")return;const t=this.$refs.picker.$el.querySelectorAll("button, input"),r=t.length-1;if(t.length<=1){e.preventDefault();return}e.shiftKey===!1&&e.target===t[r]?(e.preventDefault(),t[0].focus()):e.shiftKey===!0&&e.target===t[0]&&(e.preventDefault(),t[r].focus())}}};var m=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(r){e.open=r},"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(r){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(n){e.search=n},function(n){return r.onSearch(e.search)}],"trailing-button-click":function(n){e.clearSearch(),r.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)},d=[],f=u.normalizeComponent(p,m,d,!1,null,"4d56e499",null,null);const v=f.exports;module.exports=v;
+var j = require("../assets/index-2a8e4ca1.css");
+const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-b1d264c7.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);
+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;

package/dist/Components/NcEmojiPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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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"}

package/dist/Components/NcEmojiPicker.mjs

@@ -1,62 +1,182 @@
-import "../assets/index-66b19339.css";
-import a from "./NcPopover.mjs";
-import n from "./NcTextField.mjs";
-import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
-import { Emoji as l, Picker as c, EmojiIndex as u } from "emoji-mart-vue-fast";
-import m from "emoji-mart-vue-fast/data/all.json";
-import { n as p } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-let s;
-const f = { search: i("Search emoji"), notfound: i("No emoji found"), categories: { search: i("Search results"), recent: i("Frequently used"), smileys: i("Smileys & Emotion"), people: i("People & Body"), nature: i("Animals & Nature"), foods: i("Food & Drink"), activity: i("Activities"), places: i("Travel & Places"), objects: i("Objects"), symbols: i("Symbols"), flags: i("Flags"), custom: i("Custom") } }, h = { name: "NcEmojiPicker", components: { NcPopover: a, NcTextField: n, Emoji: l, Picker: c }, props: { activeSet: { type: String, default: "native" }, showPreview: { type: Boolean, default: !1 }, allowUnselect: { type: Boolean, default: !1 }, selectedEmoji: { type: String, default: "" }, previewFallbackEmoji: { type: String, default: "grinning" }, previewFallbackName: { type: String, default: i("Pick an emoji") }, closeOnSelect: { type: Boolean, default: !0 }, container: { type: [String, Object, Element, Boolean], default: "body" } }, emits: ["select", "select-data", "unselect"], setup() {
-  return s || (s = new u(m)), { emojiIndex: s, i18n: f };
-}, data() {
-  return { search: "", open: !1 };
-}, computed: { native() {
-  return this.activeSet === "native";
-} }, methods: { t: i, clearSearch() {
-  var t, r;
-  this.search = "";
-  const e = (r = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : r.$refs.input;
-  e && e.focus();
-}, select(e) {
-  this.$emit("select", e.native), this.$emit("select-data", e), this.closeOnSelect && (this.open = !1);
-}, unselect() {
-  this.$emit("unselect");
-}, afterShow() {
-  var t, r;
-  this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-  const e = (r = (t = this.$refs.search) == null ? void 0 : t.$refs.inputField) == null ? void 0 : r.$refs.input;
-  e && e.focus();
-}, afterHide() {
-  this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
-}, checkKeyEvent(e) {
-  if (e.key !== "Tab")
-    return;
-  const t = this.$refs.picker.$el.querySelectorAll("button, input"), r = t.length - 1;
-  if (t.length <= 1) {
-    e.preventDefault();
-    return;
+import "../assets/index-2a8e4ca1.css";
+import n from "./NcPopover.mjs";
+import c from "./NcTextField.mjs";
+import { t as r } from "../chunks/l10n-05a09c66.mjs";
+import { Emoji as l, Picker as u, EmojiIndex as f } from "emoji-mart-vue-fast";
+import p from "emoji-mart-vue-fast/data/all.json";
+import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+let o;
+const d = {
+  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")
   }
-  e.shiftKey === !1 && e.target === t[r] ? (e.preventDefault(), t[0].focus()) : e.shiftKey === !0 && e.target === t[0] && (e.preventDefault(), t[r].focus());
-} } };
-var d = function() {
+}, h = {
+  name: "NcEmojiPicker",
+  components: {
+    NcPopover: n,
+    NcTextField: c,
+    Emoji: l,
+    Picker: u
+  },
+  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 f(p)), {
+      // Non-reactive constants
+      emojiIndex: o,
+      i18n: d
+    };
+  },
+  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 v = 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(r) {
-    e.open = r;
+  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(r) {
-    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(o) {
-      e.search = o;
-    }, function(o) {
-      return r.onSearch(e.search);
-    }], "trailing-button-click": function(o) {
-      e.clearSearch(), r.onSearch(e.search);
+  }, 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);
-}, v = [], y = p(h, d, v, !1, null, "4d56e499", null, null);
-const E = y.exports;
+}, y = [], _ = /* @__PURE__ */ m(
+  h,
+  v,
+  y,
+  !1,
+  null,
+  "4d56e499",
+  null,
+  null
+);
+const $ = _.exports;
 export {
-  E as default
+  $ as default
 };

package/dist/Components/NcEmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmojiPicker.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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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"}

package/dist/Components/NcEmptyContent.cjs

@@ -1 +1,54 @@
-var c=require("../assets/index-34f6bb3f.css");const e=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const s={name:"NcEmptyContent",props:{name:{type:String,default:""},description:{type:String,default:""}},computed:{hasName(){return this.name!==""},hasDescription(){var t;return this.description!==""||((t=this.$slots.description)==null?void 0:t[0])}}};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("h2",{staticClass:"empty-content__name"},[t._v(" "+t._s(t.name)+" ")]):t._e()]}),t.hasDescription?n("p",[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)},o=[],r=e.normalizeComponent(s,i,o,!1,null,"d475d4c6",null,null);const a=r.exports;module.exports=a;
+var a = require("../assets/index-c6f0da2e.css");
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const i = {
+  name: "NcEmptyContent",
+  props: {
+    /**
+     * A header message about an empty content shown
+     * @example 'No comments'
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Desription of the empty content
+     * @example 'No comments yet, start the conversation!'
+     */
+    description: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    hasName() {
+      return this.name !== "";
+    },
+    /**
+     * 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]);
+    }
+  }
+};
+var c = 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("h2", { staticClass: "empty-content__name" }, [t._v(" " + t._s(t.name) + " ")]) : t._e()];
+  }), t.hasDescription ? n("p", [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);
+}, o = [], r = /* @__PURE__ */ s.normalizeComponent(
+  i,
+  c,
+  o,
+  !1,
+  null,
+  "3c45cf57",
+  null,
+  null
+);
+const _ = r.exports;
+module.exports = _;

package/dist/Components/NcEmptyContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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\n\t\tname=\"No comments\">\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<h2 v-if=\"hasName\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</h2>\n\t\t</slot>\n\t\t<p v-if=\"hasDescription\">\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}\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;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmptyContent.mjs

@@ -1,19 +1,55 @@
-import "../assets/index-34f6bb3f.css";
-import { n as e } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const s = { name: "NcEmptyContent", props: { name: { type: String, default: "" }, description: { type: String, default: "" } }, computed: { hasName() {
-  return this.name !== "";
-}, hasDescription() {
-  var t;
-  return this.description !== "" || ((t = this.$slots.description) == null ? void 0 : t[0]);
-} } };
-var i = function() {
+import "../assets/index-c6f0da2e.css";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const i = {
+  name: "NcEmptyContent",
+  props: {
+    /**
+     * A header message about an empty content shown
+     * @example 'No comments'
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Desription of the empty content
+     * @example 'No comments yet, start the conversation!'
+     */
+    description: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    hasName() {
+      return this.name !== "";
+    },
+    /**
+     * 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]);
+    }
+  }
+};
+var o = 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("h2", { staticClass: "empty-content__name" }, [t._v(" " + t._s(t.name) + " ")]) : t._e()];
   }), t.hasDescription ? n("p", [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);
-}, o = [], a = e(s, i, o, !1, null, "d475d4c6", null, null);
+}, c = [], a = /* @__PURE__ */ s(
+  i,
+  o,
+  c,
+  !1,
+  null,
+  "3c45cf57",
+  null,
+  null
+);
 const p = a.exports;
 export {
   p as default