@nextcloud/vue 9.0.0-alpha.6 → 9.0.0-alpha.7

package/dist/chunks/{NcEllipsisedOption-BaL7DZ1K.mjs → NcEllipsisedOption-D4OggsNq.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcEllipsisedOption-CTvngv1F.css';
+import '../assets/NcEllipsisedOption-DGr9_bIL.css';
 import { _ as _sfc_main$1, F as FindRanges } from "./NcHighlight-BHtRIzqk.mjs";
-import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, createCommentVNode } from "vue";
+import { resolveComponent, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcEllipsisedOption",

package/dist/chunks/{NcEllipsisedOption-BaL7DZ1K.mjs.map → NcEllipsisedOption-D4OggsNq.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcEllipsisedOption-BaL7DZ1K.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span dir=\"auto\" class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","_createElementBlock","_createVNode","_createBlock","_createCommentVNode"],"mappings":";;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,gBAAgB;AACf,aAAO,KAAK,QAAQ,KAAK,KAAK,UAAU;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAEP,aAAO,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE;AAAA,IACvE;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK;AAAA,MACrC;AACA,aAAO,KAAK;AAAA,IACZ;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AACZ,UAAI,CAAC,KAAK,QAAQ;AACjB,eAAO,CAAC;AAAA,MACT;AACA,aAAO,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,aAAa;AACZ,aAAO,KAAK,WAAW,IAAI,WAAS;AACnC,eAAO;AAAA,UACN,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,KAAK,MAAM,MAAM,KAAK;AAAA,QACvB;AAAA,OACA;AAAA,IACD;AAAA,EACD;AACF;AAlKA,MAAA,aAAA,CAAA,OAAA;;;sBAqECC,mBAUO,QAAA;AAAA,IAVD,KAAI;AAAA,IAAO,OAAM;AAAA,IAAc,OAAO,OAAI;AAAA;IAC/CC,YAG2B,wBAAA;AAAA,MAHd,OAAM;AAAA,MACjB,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA;IACJ,SAAK,sBAAxBC,YAI2B,wBAAA;AAAA,MA9E7B,KAAA;AAAA,MA2EG,OAAM;AAAA,MACL,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA,oDA9EzBC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}
+{"version":3,"file":"NcEllipsisedOption-D4OggsNq.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span dir=\"auto\" class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","_createElementBlock","_createVNode","_createBlock","_createCommentVNode"],"mappings":";;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,gBAAgB;AACf,aAAO,KAAK,QAAQ,KAAK,KAAK,UAAU;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAEP,aAAO,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE;AAAA,IACvE;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK;AAAA,MACrC;AACA,aAAO,KAAK;AAAA,IACZ;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AACZ,UAAI,CAAC,KAAK,QAAQ;AACjB,eAAO,CAAA;AAAA,MACR;AACA,aAAO,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,aAAa;AACZ,aAAO,KAAK,WAAW,IAAI,WAAS;AACnC,eAAO;AAAA,UACN,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,KAAK,MAAM,MAAM,KAAK;AAAA,QACvB;AAAA,MACA,CAAA;AAAA,IACD;AAAA,EACD;AACF;AAlKA,MAAA,aAAA,CAAA,OAAA;;;sBAqECC,mBAUO,QAAA;AAAA,IAVD,KAAI;AAAA,IAAO,OAAM;AAAA,IAAc,OAAO,OAAI;AAAA;IAC/CC,YAG2B,wBAAA;AAAA,MAHd,OAAM;AAAA,MACjB,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA;IACJ,SAAK,sBAAxBC,YAI2B,wBAAA;AAAA,MA9E7B,KAAA;AAAA,MA2EG,OAAM;AAAA,MACL,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA,oDA9EzBC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/{NcEmojiPicker-DIv_bq9B.mjs → NcEmojiPicker-DKGBXunS.mjs}

@@ -1,14 +1,15 @@
-import '../assets/NcEmojiPicker-BDp_Jc8K.css';
-import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
-import { C as Color } from "./GenColors-Cw7N7vRg.mjs";
-import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, createSlots, normalizeStyle } from "vue";
+import '../assets/NcEmojiPicker-Bfk2pnZE.css';
+import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
+import { u as useTrapStackControl } from "./useTrapStackControl-b3A_383w.mjs";
+import { C as Color } from "./GenColors-G1ZRJcz5.mjs";
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createBlock, withCtx, createVNode, withKeys, withModifiers, createSlots, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcButton } from "./NcButton-C3eisBbK.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-Bh4f-X_s.mjs";
-import { N as NcPopover } from "./NcPopover-Cmspgso4.mjs";
-import { N as NcTextField } from "./NcTextField-XbpY0pop.mjs";
-import { r as register, u as t39, v as t34, w as t14, x as t5, a as t } from "./_l10n-D7WwrqS-.mjs";
-import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-DQqAv2wB.mjs";
+import { N as NcPopover } from "./NcPopover-D4D97Y3j.mjs";
+import { N as NcTextField } from "./NcTextField-CNV42Zey.mjs";
+import { r as register, u as t39, v as t34, w as t14, x as t5, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { Picker, Emoji, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
 import data from "emoji-mart-vue-fast/data/all.json";
 const _sfc_main$1 = {
   name: "CircleIcon",
@@ -187,14 +188,14 @@ const _sfc_main = {
       return this.activeSet === "native";
     }
   },
+  created() {
+    useTrapStackControl(() => this.open);
+  },
   methods: {
     t,
     clearSearch() {
       this.search = "";
-      const input = this.$refs.search?.$refs.inputField?.$refs.input;
-      if (input) {
-        input.focus();
-      }
+      this.$refs.search.focus();
     },
     /**
      * Update the current skin tone by the result of the color picker
@@ -219,37 +220,40 @@ const _sfc_main = {
       this.$emit("unselect");
     },
     afterShow() {
-      const picker = this.$refs.picker;
-      picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const input = this.$refs.search?.$refs.inputField?.$refs.input;
-      if (input) {
-        input.focus();
-      }
+      this.$refs.search.focus();
     },
     afterHide() {
-      const picker = this.$refs.picker;
-      picker.$el.removeEventListener("keydown", this.checkKeyEvent);
+      this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus();
     },
-    checkKeyEvent(event) {
-      if (event.key !== "Tab") {
-        return;
-      }
-      const picker = this.$refs.picker;
-      const focusableList = picker.$el.querySelectorAll(
-        "button, input"
-      );
-      const last = focusableList.length - 1;
-      if (focusableList.length <= 1) {
-        event.preventDefault();
-        return;
-      }
-      if (event.shiftKey === false && event.target === focusableList[last]) {
-        event.preventDefault();
-        focusableList[0].focus();
-      } else if (event.shiftKey === true && event.target === focusableList[0]) {
-        event.preventDefault();
-        focusableList[last].focus();
+    /**
+     * Manually handle Tab navigation skipping emoji buttons.
+     * Navigation over emojis is handled by Arrow keys.
+     * @param {KeyboardEvent} event - Keyboard event
+     */
+    handleTabNavigationSkippingEmojis(event) {
+      const current = event.target;
+      const focusable = Array.from(this.$refs.picker.$el.querySelectorAll("button:not(.emoji-mart-emoji), input"));
+      if (!event.shiftKey) {
+        const nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0];
+        nextNode.focus();
+      } else {
+        const prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1);
+        prevNode.focus();
       }
+    },
+    /**
+     * Handle arrow navigation via <Picker>'s handlers with scroll bug fix
+     * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name
+     * @param {KeyboardEvent} event - Keyboard event
+     */
+    async callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {
+      this.$refs.picker[originalHandlerName](event);
+      await this.$nextTick();
+      const selectedEmoji = this.$refs.picker.$el.querySelector(".emoji-mart-emoji-selected");
+      selectedEmoji?.scrollIntoView({
+        block: "center",
+        inline: "center"
+      });
     }
   }
 };
@@ -265,10 +269,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Picker = resolveComponent("Picker");
   const _component_NcPopover = resolveComponent("NcPopover");
   return openBlock(), createBlock(_component_NcPopover, {
+    ref: "popover",
     shown: $data.open,
-    "onUpdate:shown": _cache[1] || (_cache[1] = ($event) => $data.open = $event),
+    "onUpdate:shown": _cache[6] || (_cache[6] = ($event) => $data.open = $event),
     container: $props.container,
     "popup-role": "dialog",
+    "focus-trap": false,
     onAfterShow: $options.afterShow,
     onAfterHide: $options.afterHide
   }, {
@@ -278,7 +284,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       createVNode(_component_Picker, mergeProps({
         ref: "picker",
-        "auto-focus": false,
+        class: "nc-emoji-picker",
         color: "var(--color-primary-element)",
         data: $setup.emojiIndex,
         emoji: $props.previewFallbackEmoji,
@@ -294,15 +300,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         role: "dialog",
         "aria-modal": "true",
         "aria-label": $options.t("Emoji picker")
-      }, _ctx.$attrs, { onSelect: $options.select }), createSlots({
-        searchTemplate: withCtx((slotProps) => [
+      }, _ctx.$attrs, {
+        onKeydown: withKeys(withModifiers($options.handleTabNavigationSkippingEmojis, ["prevent"]), ["tab"]),
+        onSelect: $options.select
+      }), createSlots({
+        searchTemplate: withCtx(({ onSearch }) => [
           createElementVNode("div", _hoisted_1, [
             createVNode(_component_NcTextField, {
               ref: "search",
               modelValue: $data.search,
               "onUpdate:modelValue": [
                 _cache[0] || (_cache[0] = ($event) => $data.search = $event),
-                ($event) => slotProps.onSearch($data.search)
+                ($event) => onSearch($data.search)
               ],
               class: "search",
               label: $options.t("Search"),
@@ -311,9 +320,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "trailing-button-icon": "close",
               "trailing-button-label": $options.t("Clear search"),
               "show-trailing-button": $data.search !== "",
+              onKeydown: [
+                _cache[1] || (_cache[1] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowLeft", $event), ["left"])),
+                _cache[2] || (_cache[2] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowRight", $event), ["right"])),
+                _cache[3] || (_cache[3] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowDown", $event), ["down"])),
+                _cache[4] || (_cache[4] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowUp", $event), ["up"])),
+                _cache[5] || (_cache[5] = withKeys(($event) => _ctx.$refs.picker.onEnter($event), ["enter"]))
+              ],
               onTrailingButtonClick: ($event) => {
                 $options.clearSearch();
-                slotProps.onSearch($data.search);
+                onSearch("");
               }
             }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
             createVNode(_component_NcColorPicker, {
@@ -354,7 +370,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "emoji-selected",
               data: $setup.emojiIndex,
               emoji: $props.selectedEmoji,
-              native: true,
+              native: "",
               size: 32,
               onClick: $options.unselect
             }, null, 8, ["data", "emoji", "onClick"]),
@@ -362,19 +378,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "emoji-delete",
               data: $setup.emojiIndex,
               emoji: ":x:",
-              native: true,
+              native: "",
               size: 10,
               onClick: $options.unselect
             }, null, 8, ["data", "onClick"])
           ]),
           key: "0"
         } : void 0
-      ]), 1040, ["data", "emoji", "i18n", "native", "show-preview", "skin", "title", "aria-label", "onSelect"])
+      ]), 1040, ["data", "emoji", "i18n", "native", "show-preview", "skin", "title", "aria-label", "onKeydown", "onSelect"])
     ]),
     _: 3
   }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
 }
-const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4aa55a23"]]);
+const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-58b82814"]]);
 export {
   NcEmojiPicker as N
 };

package/dist/chunks/NcEmojiPicker-DKGBXunS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEmojiPicker-DKGBXunS.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 ref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:focus-trap=\"false /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\tclass=\"nc-emoji-picker\"\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\n\t\t\t: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\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\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\tnative\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\tnative\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 { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\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/src/index.js'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index and skinTone 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\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\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\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\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\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\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.nc-emoji-picker.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\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-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label  {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_createCommentVNode","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","_withKeys","_withModifiers","_createSlots","_normalizeStyle","_toDisplayString"],"mappings":";;;;;;;;;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,+EAA8E;qBAZ5F,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/C,4BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCG,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAL,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;;ACkNA,IAAI;AAEJ,MAAM,OAAO;AAAA,EACZ,QAAQ,EAAE,cAAc;AAAA,EACxB,UAAU,EAAE,gBAAgB;AAAA,EAC5B,YAAY;AAAA,IACX,QAAQ,EAAE,gBAAgB;AAAA,IAC1B,QAAQ,EAAE,iBAAiB;AAAA,IAC3B,SAAS,EAAE,mBAAmB;AAAA,IAC9B,QAAQ,EAAE,eAAe;AAAA,IACzB,QAAQ,EAAE,kBAAkB;AAAA,IAC5B,OAAO,EAAE,cAAc;AAAA,IACvB,UAAU,EAAE,YAAY;AAAA,IACxB,QAAQ,EAAE,iBAAiB;AAAA,IAC3B,SAAS,EAAE,SAAS;AAAA,IACpB,SAAS,EAAE,SAAS;AAAA,IACpB,OAAO,EAAE,OAAO;AAAA,IAChB,QAAQ,EAAE,QAAQ;AAAA,EAClB;AACF;AAEA,MAAM,kBAAkB;AAAA,EACvB,IAAI,MAAM,KAAK,KAAK,IAAI,EAAE,oBAAoB,CAAC;AAAA,EAC/C,IAAI,MAAM,KAAK,KAAK,KAAK,EAAE,iBAAiB,CAAC;AAAA,EAC7C,IAAI,MAAM,KAAK,KAAK,KAAK,EAAE,wBAAwB,CAAC;AAAA,EACpD,IAAI,MAAM,KAAK,KAAK,IAAI,EAAE,kBAAkB,CAAC;AAAA,EAC7C,IAAI,MAAM,KAAK,KAAK,IAAI,EAAE,uBAAuB,CAAC;AAAA,EAClD,IAAI,MAAM,IAAI,IAAI,IAAI,EAAE,gBAAgB,CAAC;AAC1C;AAEA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,sBAAsB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS,EAAE,eAAe;AAAA,IAC1B;AAAA;AAAA;AAAA;AAAA,IAID,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,SAAS,OAAO;AAAA,MACvC,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EACD,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ;AAEP,QAAI,CAAC,YAAY;AAChB,mBAAa,IAAI,WAAW,IAAI;AAAA,IACjC;AAEA,WAAO;AAAA;AAAA,MAEN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACA;AAAA,EAED,OAAO;AACN,UAAM,kBAAkB,mBAAkB;AAE1C,WAAO;AAAA;AAAA;AAAA;AAAA,MAIN,cAAc,gBAAgB,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjD;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,IACP;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,SAAS;AACR,aAAO,KAAK,cAAc;AAAA,IAC1B;AAAA,EACD;AAAA,EAED,UAAU;AAGT,wBAAoB,MAAM,KAAK,IAAI;AAAA,EACnC;AAAA,EAED,SAAS;AAAA,IACR;AAAA,IAEA,cAAc;AACb,WAAK,SAAS;AACd,WAAK,MAAM,OAAO,MAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,iBAAiB,OAAO;AACvB,YAAM,QAAQ,KAAK,gBAAgB,UAAU,CAAC,SAAS,KAAK,MAAM,kBAAkB,MAAM,YAAa,CAAA;AACvG,UAAI,QAAQ,IAAI;AACf,aAAK,kBAAkB,QAAQ;AAC/B,aAAK,eAAe,KAAK,gBAAgB,KAAK;AAC9C,2BAAmB,KAAK,eAAe;AAAA,MACxC;AAAA,IACA;AAAA,IAED,OAAO,aAAa;AAInB,WAAK,MAAM,UAAU,YAAY,MAAM;AAKvC,WAAK,MAAM,eAAe,WAAW;AAErC,UAAI,KAAK,eAAe;AACvB,aAAK,OAAO;AAAA,MACb;AAAA,IACA;AAAA,IAED,WAAW;AACV,WAAK,MAAM,UAAU;AAAA,IACrB;AAAA,IAED,YAAY;AACX,WAAK,MAAM,OAAO,MAAK;AAAA,IACvB;AAAA,IAED,YAAY;AAEX,WAAK,MAAM,QAAQ,IAAI,cAAc,yBAAyB,GAAG,MAAK;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,kCAAkC,OAAO;AACxC,YAAM,UAAU,MAAM;AACtB,YAAM,YAAY,MAAM,KAAK,KAAK,MAAM,OAAO,IAAI,iBAAiB,sCAAsC,CAAC;AAC3G,UAAI,CAAC,MAAM,UAAU;AACpB,cAAM,WAAW,UAAU,KAAK,CAAC,SAAS,QAAQ,wBAAwB,IAAI,IAAI,KAAK,2BAA2B,KAAK,UAAU,CAAC;AAClI,iBAAS,MAAK;AAAA,aACR;AACN,cAAM,WAAW,UAAU,SAAS,CAAC,SAAS,QAAQ,wBAAwB,IAAI,IAAI,KAAK,2BAA2B,KAAK,UAAU,GAAG,EAAE;AAC1I,iBAAS,MAAK;AAAA,MACf;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM,oCAAoC,qBAAqB,OAAO;AAIrE,WAAK,MAAM,OAAO,mBAAmB,EAAE,KAAK;AAG5C,YAAM,KAAK,UAAS;AAQpB,YAAM,gBAAgB,KAAK,MAAM,OAAO,IAAI,cAAc,4BAA4B;AACtF,qBAAe,eAAe;AAAA,QAC7B,OAAO;AAAA,QACP,QAAQ;AAAA,MACR,CAAA;AAAA,IACD;AAAA,EACD;AACF;AA5TS,MAAA,aAAA,EAAA,OAAM,kBAAiB;AA+BvB,MAAA,aAAA,EAAA,OAAM,4BAA2B;AACjC,MAAA,aAAA,EAAA,OAAM,4BAA2B;;;;;;;;;sBA/DzCO,YAiFY,sBAAA;AAAA,IAjFD,KAAI;AAAA,IACN,OAAO,MAAI;AAAA,IA9GrB,kBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YA8GiB,MAAI,OAAA;AAAA,IAClB,WAAW,OAAS;AAAA,IACrB,cAAW;AAAA,IACV,cAAY;AAAA,IACZ,aAAY,SAAS;AAAA,IACrB,aAAY,SAAS;AAAA;IACX,SAAOC,QACjB,CADmB,cAAS;AAAA,MAC5BC,WAA2B,KAAA,QAAA,WArH9BC,eAAAC,mBAqHiB,SAAS,CAAA,GAAA,QAAA,IAAA;AAAA;IArH1B,SAAAH,QAuHE,MAsES;AAAA,MAtETI,YAsES,mBAtETR,WAsES;AAAA,QAtED,KAAI;AAAA,QACX,OAAM;AAAA,QACN,OAAM;AAAA,QACL,MAAM,OAAU;AAAA,QAChB,OAAO,OAAoB;AAAA,QAC3B,MAAA,OAAI;AAAA,QACJ,QAAA,SAAM;AAAA,QACN,cAAY;AAAA,QACZ,YAAU;AAAA,QACV,iBAAe,EAAkB,OAAA,QAAA;AAAA,QACjC,gBAAA,OAAY;AAAA,QACZ,MAAM,MAAe;AAAA,QACrB,mBAAiB;AAAA,QACjB,OAAO,OAAmB;AAAA,QAC3B,MAAK;AAAA,QACL,cAAW;AAAA,QACV,cAAY,SAAC,EAAA,cAAA;AAAA,SACN,KAAM,QAAA;AAAA,QACb,WAzIJS,SAAAC,cAyIyB,SAAiC,mCAAA,CAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,QACtD,UAAQ,SAAM;AAAA,MA1IlB,CAAA,GAAAC,YAAA;AAAA,QA2Ic,gBAAcP,QACxB,CA4BM,EA7BsB,eAAQ;AAAA,UACpCH,mBA4BM,OA5BN,YA4BM;AAAA,YA3BLO,YAe0C,wBAAA;AAAA,cAf7B,KAAI;AAAA,cA7ItB,YA8Ie,MAAM;AAAA,cA9IrB,uBAAA;AAAA,sDA8Ie,MAAM,SAAA;AAAA,gBAcM,YAAA,SAAS,MAAM,MAAA;AAAA;cAbpC,OAAM;AAAA,cACL,OAAO,SAAC,EAAA,QAAA;AAAA,cACR,iBAAe;AAAA,cACf,aAAa,OAAI,KAAC;AAAA,cACnB,wBAAqB;AAAA,cACpB,yBAAuB,SAAC,EAAA,cAAA;AAAA,cACxB,wBAAsB,MAAM,WAAA;AAAA,cAC5B,WAAO;AAAA,0CAtJdC,SAsJqB,YAAA,SAAA,mDAAmD,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA,0CAtJ9EA,SAuJsB,YAAA,SAAA,oDAAoD,MAAM,GAAA,CAAA,OAAA,CAAA;AAAA,0CAvJhFA,SAwJqB,YAAA,SAAA,mDAAmD,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA,0CAxJ9EA,SAyJmB,YAAA,SAAA,iDAAiD,MAAM,GAAA,CAAA,IAAA,CAAA;AAAA,gBAzJ1E,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAA,SAAA,YA0JsB,WAAM,OAAO,QAAQ,MAAM,GAAA,CAAA,OAAA,CAAA;AAAA;cAC1C,uBAAqB,YAAA;AAAE,yBAAW,YAAA;AAAI,yBAAQ,EAAA;AAAA,cAAA;AAAA;YAEhDD,YAUgB,0BAAA;AAAA,cAVD,gBAAA;AAAA,cACb,WAAA,OAAS;AAAA,cACT,SAAS,OAAe;AAAA,cACxB,eAAa,MAAY,aAAC;AAAA,cAC1B,uBAAoB,SAAgB;AAAA;cAjK3C,SAAAJ,QAkKM,MAIW;AAAA,gBAJXI,YAIW,qBAAA;AAAA,kBAJA,cAAY,SAAC,EAAA,WAAA;AAAA,kBAAe,MAAK;AAAA;kBAChC,cACV,MAA2F;AAAA,oBAA3FA,YAA2F,uBAAA;AAAA,sBAA9E,OApKrBI,eAAA,EAAA,OAoKqC,MAAY,aAAC,OAAK;AAAA,sBAAK,OAAO,MAAY,aAAC;AAAA,sBAAO,MAAM;AAAA;;kBApK7F,GAAA;AAAA;;cAAA,GAAA;AAAA;;;QAAA,GAAA;AAAA;QA0KmB,OAAA,iBAAiB,OAAa;UA1KjD,MA0KoD;AAAA,UA1KpD,IAAAR,QA2KI,MAIM;AAAA,YAJNH,mBAIM,OAJN,YAIM;AAAA,cAHLA,mBAEK,MAFL,YAEKY,gBADD,SAAC,EAAA,UAAA,CAAA,GAAA,CAAA;AAAA;YAGNL,YAKqB,kBAAA;AAAA,cALd,OAAM;AAAA,cACX,MAAM,OAAU;AAAA,cAChB,OAAO,OAAa;AAAA,cACrB,QAAA;AAAA,cACC,MAAM;AAAA,cACN,SAAO,SAAQ;AAAA;YACjBA,YAKqB,kBAAA;AAAA,cALd,OAAM;AAAA,cACX,MAAM,OAAU;AAAA,cACjB,OAAM;AAAA,cACN,QAAA;AAAA,cACC,MAAM;AAAA,cACN,SAAO,SAAQ;AAAA;;UA3LrB,KAAA;AAAA,YAAA;AAAA;;IAAA,GAAA;AAAA;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcEmptyContent-BoGB3vFC.mjs → NcEmptyContent-D-wBvEi4.mjs}

@@ -1,5 +1,5 @@
-import '../assets/NcEmptyContent-C-nruaFh.css';
-import { openBlock, createElementBlock, renderSlot, createCommentVNode, toDisplayString, createTextVNode } from "vue";
+import '../assets/NcEmptyContent-DZSuQ2yE.css';
+import { createElementBlock, openBlock, createCommentVNode, renderSlot, toDisplayString, createTextVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcEmptyContent",

package/dist/chunks/{NcEmptyContent-BoGB3vFC.mjs.map → NcEmptyContent-D-wBvEi4.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcEmptyContent-BoGB3vFC.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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.vue'\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.vue'\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.vue'\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=\"name !== ''\" 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=\"description !== '' || $slots.description\" 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</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":["_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_toDisplayString","_createTextVNode"],"mappings":";;AAqJA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;EA/CM,OAAM;AAAA,EAAgB,MAAK;;;EA5HjC,KAAA;AAAA,EA6H0B,OAAM;AAAA,EAAsB,eAAY;;;EA7HlE,KAAA;AAAA,EAmI4B,OAAM;;;EAnIlC,KAAA;AAAA,EAuIqD,OAAM;;;EAvI3D,KAAA;AAAA,EA6I4B,OAAM;;;AAjBjC,SAAAA,UAAA,GAAAC,mBAqBM,OArBN,YAqBM;AAAA,IApBM,KAAA,OAAO,QAAlBD,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UA/HvBC,mBAAA,IAAA,IAAA;AAAA,IAkIED,WAIO,yBAJP,MAIO;AAAA,MAHM,OAAI,SAAA,mBAAhBD,mBAEO,QAFP,YAEOG,gBADH,OAAI,IAAA,GAAA,CAAA,KApIXD,mBAAA,IAAA,IAAA;AAAA;IAuIW,OAAW,gBAAA,MAAW,KAAM,OAAC,eAAtCH,aAAAC,mBAKI,KALJ,YAKI;AAAA,MAHHC,WAEO,gCAFP,MAEO;AAAA,QA3IVG,gBAAAD,gBA0IO,OAAW,WAAA,GAAA,CAAA;AAAA;UA1IlBD,mBAAA,IAAA,IAAA;AAAA,IA6Ia,KAAA,OAAO,UAAlBH,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UA/IzBC,mBAAA,IAAA,IAAA;AAAA;;;"}
+{"version":3,"file":"NcEmptyContent-D-wBvEi4.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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.vue'\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.vue'\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.vue'\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=\"name !== ''\" 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=\"description !== '' || $slots.description\" 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</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":["_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_toDisplayString","_createTextVNode"],"mappings":";;AAqJA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;EA/CM,OAAM;AAAA,EAAgB,MAAK;;;EA5HjC,KAAA;AAAA,EA6H0B,OAAM;AAAA,EAAsB,eAAY;;;EA7HlE,KAAA;AAAA,EAmI4B,OAAM;;;EAnIlC,KAAA;AAAA,EAuIqD,OAAM;;;EAvI3D,KAAA;AAAA,EA6I4B,OAAM;;;AAjBjC,SAAAA,UAAA,GAAAC,mBAqBM,OArBN,YAqBM;AAAA,IApBM,KAAA,OAAO,QAAlBD,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UA/HvBC,mBAAA,IAAA,IAAA;AAAA,IAkIED,WAIO,yBAJP,MAIO;AAAA,MAHM,OAAI,SAAA,mBAAhBD,mBAEO,QAFP,YAEOG,gBADH,OAAI,IAAA,GAAA,CAAA,KApIXD,mBAAA,IAAA,IAAA;AAAA;IAuIW,OAAW,gBAAA,MAAW,KAAM,OAAC,eAAtCH,aAAAC,mBAKI,KALJ,YAKI;AAAA,MAHHC,WAEO,gCAFP,MAEO;AAAA,QA3IVG,gBAAAD,gBA0IO,OAAW,WAAA,GAAA,CAAA;AAAA;UA1IlBD,mBAAA,IAAA,IAAA;AAAA,IA6Ia,KAAA,OAAO,UAAlBH,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UA/IzBC,mBAAA,IAAA,IAAA;AAAA;;;"}

package/dist/chunks/{NcGuestContent-DVqg5Bq4.mjs → NcGuestContent-iQpV7mLC.mjs}

@@ -1,5 +1,5 @@
-import '../assets/NcGuestContent-Dh5z5Dgm.css';
-import { openBlock, createElementBlock, renderSlot } from "vue";
+import '../assets/NcGuestContent-C9lbC3vg.css';
+import { createElementBlock, openBlock, renderSlot } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcGuestContent",

package/dist/chunks/{NcGuestContent-DVqg5Bq4.mjs.map → NcGuestContent-iQpV7mLC.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcGuestContent-DVqg5Bq4.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tunmounted() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAmCA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AACT,aAAS,eAAe,SAAS,EAAE,UAAU,IAAI,kBAAkB;AAAA,EACnE;AAAA,EACD,YAAY;AACX,aAAS,eAAe,SAAS,EAAE,UAAU,OAAO,kBAAkB;AAAA,EACtE;AACF;AAjBM,MAAA,aAAA,EAAA,IAAG,oBAAmB;;AAA3B,SAAAA,UAAA,GAAAC,mBAEM,OAFN,YAEM;AAAA,IADLC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;"}
+{"version":3,"file":"NcGuestContent-iQpV7mLC.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tunmounted() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAmCA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AACT,aAAS,eAAe,SAAS,EAAE,UAAU,IAAI,kBAAkB;AAAA,EACnE;AAAA,EACD,YAAY;AACX,aAAS,eAAe,SAAS,EAAE,UAAU,OAAO,kBAAkB;AAAA,EACtE;AACF;AAjBM,MAAA,aAAA,EAAA,IAAG,oBAAmB;;AAA3B,SAAAA,UAAA,GAAAC,mBAEM,OAFN,YAEM;AAAA,IADLC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;"}

package/dist/chunks/{NcHeaderButton-DagheXHN.mjs → NcHeaderButton-Cq62USyt.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcHeaderButton-8c2zDKtV.css';
-import { defineComponent, openBlock, createElementBlock, createVNode, unref, withModifiers, withCtx, renderSlot, toDisplayString, createCommentVNode } from "vue";
+import '../assets/NcHeaderButton-cVjCMSVn.css';
+import { defineComponent, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withModifiers, withCtx, renderSlot, toDisplayString } from "vue";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { N as NcButton, b as ButtonType } from "./NcButton-C3eisBbK.mjs";
+import { N as NcButton, b as ButtonType } from "./NcButton-QmfEsvXC.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id"];
@@ -42,7 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcHeaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1f7869e"]]);
+const NcHeaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3c529ab"]]);
 export {
   NcHeaderButton as N
 };

package/dist/chunks/NcHeaderButton-Cq62USyt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderButton-Cq62USyt.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\tv-model:open=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tv-model=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton :type=\"ButtonType.TertiaryNoBackground\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tsize=\"large\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton, { ButtonType } from '../NcButton/index.js'\n\ndefineProps<{\n\t/** Unique id for this menu */\n\tid: string,\n\t/** `aria-label` attribute of the button */\n\tariaLabel: string,\n\t/** Optional visually hidden description text for the button */\n\tdescription?: string\n}>()\n\ndefineEmits<{\n\tclick: [event: MouseEvent]\n}>()\n\nconst descriptionId = GenRandomId()\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../NcHeaderMenu/header-menu__trigger';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwGA,UAAM,gBAAgB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcHeaderMenu-BRiroRYT.mjs

@@ -0,0 +1,142 @@
+import '../assets/NcHeaderMenu-QJK2rMK3.css';
+import { defineComponent, ref, computed, useTemplateRef, watch, nextTick, createBlock, openBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createVNode, createElementBlock, createCommentVNode, withDirectives, withModifiers, renderSlot, toDisplayString, createElementVNode, vShow } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { createFocusTrap } from "focus-trap";
+import { g as getTrapStack } from "./focusTrap-DmkaYJTC.mjs";
+import "../composables/useIsFullscreen/index.mjs";
+import "../composables/useIsMobile/index.mjs";
+import "./useFormatDateTime-Cvc8YJRE.mjs";
+import { useHotKey } from "../composables/useHotKey/index.mjs";
+import "../composables/useIsDarkTheme/index.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "header-menu__caret" };
+const _hoisted_3 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcHeaderMenu",
+  props: {
+    id: {},
+    ariaLabel: {},
+    open: { type: Boolean, default: false },
+    isNav: { type: Boolean, default: false },
+    description: {},
+    excludeClickOutsideSelectors: { default: () => [] }
+  },
+  emits: ["closed", "opened", "update:open"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const descriptionId = GenRandomId();
+    const triggerId = GenRandomId();
+    const focusTrap = ref();
+    const isOpened = ref(__props.open);
+    const wrapperTag = computed(() => __props.isNav ? "nav" : "div");
+    const contentContainer = useTemplateRef("contentContainer");
+    const headerMenu = useTemplateRef("headerMenu");
+    const triggerButton = useTemplateRef("triggerButton");
+    const ignore = computed(
+      () => Array.isArray(__props.excludeClickOutsideSelectors) ? __props.excludeClickOutsideSelectors : __props.excludeClickOutsideSelectors.split(" ")
+    );
+    onClickOutside(headerMenu, () => setMenuState(false), { ignore });
+    useHotKey("Escape", () => setMenuState(false), { prevent: true });
+    watch(() => __props.open, (state) => setMenuState(state));
+    function toggleMenu() {
+      setMenuState(!isOpened.value);
+    }
+    async function setMenuState(state) {
+      if (state === isOpened.value) {
+        return;
+      }
+      isOpened.value = state;
+      emit("update:open", state);
+      await nextTick();
+      await (state ? addFocusTrap() : clearFocusTrap());
+      emit(state ? "opened" : "closed");
+    }
+    function onFocusOut(event) {
+      if (!__props.isNav) {
+        return;
+      }
+      if (!(event.relatedTarget instanceof Node)) {
+        return;
+      }
+      if (headerMenu.value?.contains(event.relatedTarget)) {
+        setMenuState(false);
+      }
+    }
+    async function addFocusTrap() {
+      if (__props.isNav || focusTrap.value) {
+        return;
+      }
+      focusTrap.value = createFocusTrap(contentContainer.value, {
+        allowOutsideClick: true,
+        trapStack: getTrapStack(),
+        fallbackFocus: triggerButton.value?.$el
+      });
+      focusTrap.value.activate();
+    }
+    function clearFocusTrap() {
+      focusTrap.value?.deactivate();
+      focusTrap.value = void 0;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(wrapperTag.value), {
+        id: _ctx.id,
+        ref_key: "headerMenu",
+        ref: headerMenu,
+        "aria-labelledby": _ctx.isNav ? unref(triggerId) : null,
+        class: normalizeClass([{ "header-menu--opened": isOpened.value }, "header-menu"]),
+        onFocusout: onFocusOut
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(NcButton), {
+            id: _ctx.isNav ? unref(triggerId) : null,
+            ref_key: "triggerButton",
+            ref: triggerButton,
+            type: "tertiary-no-background",
+            class: "header-menu__trigger",
+            "aria-label": _ctx.ariaLabel,
+            "aria-describedby": _ctx.description ? unref(descriptionId) : null,
+            "aria-controls": `header-menu-${_ctx.id}`,
+            "aria-expanded": isOpened.value.toString(),
+            size: "large",
+            onClick: withModifiers(toggleMenu, ["prevent"])
+          }, {
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "trigger", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["id", "aria-label", "aria-describedby", "aria-controls", "aria-expanded"]),
+          _ctx.description ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: unref(descriptionId),
+            class: "header-menu__description hidden-visually"
+          }, toDisplayString(_ctx.description), 9, _hoisted_1)) : createCommentVNode("", true),
+          withDirectives(createElementVNode("div", _hoisted_2, null, 512), [
+            [vShow, isOpened.value]
+          ]),
+          withDirectives(createElementVNode("div", {
+            id: `header-menu-${_ctx.id}`,
+            class: "header-menu__wrapper"
+          }, [
+            createElementVNode("div", {
+              ref_key: "contentContainer",
+              ref: contentContainer,
+              class: "header-menu__content"
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 512)
+          ], 8, _hoisted_3), [
+            [vShow, isOpened.value]
+          ])
+        ]),
+        _: 3
+      }, 40, ["id", "aria-labelledby", "class"]);
+    };
+  }
+});
+const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e7026f07"]]);
+export {
+  NcHeaderMenu as N
+};

package/dist/chunks/NcHeaderMenu-BRiroRYT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-BRiroRYT.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"triggerButton\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\tsize=\"large\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"contentContainer\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch, type Slot } from 'vue'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { useHotKey } from '../../composables/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = GenRandomId()\n/** Id of the trigger button */\nconst triggerId = GenRandomId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainer = useTemplateRef('contentContainer')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenu = useTemplateRef<HTMLElement>('headerMenu')\n/** The menu trigger button */\nconst triggerButton = useTemplateRef('triggerButton')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '),\n)\nonClickOutside(headerMenu, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenu.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainer.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButton.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@import './header-menu__trigger';\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2JA,UAAM,OAAO;AAmBb,UAAM,gBAAgB,YAAY;AAElC,UAAM,YAAY,YAAY;AAE9B,UAAM,YAAY,IAAe;AAE3B,UAAA,WAAW,IAAI,QAAI,IAAA;AAEzB,UAAM,aAAa,SAAS,MAAM,QAAK,QAAG,QAAQ,KAAK;AAGjD,UAAA,mBAAmB,eAAe,kBAAkB;AAEpD,UAAA,aAAa,eAA4B,YAAY;AAErD,UAAA,gBAAgB,eAAe,eAAe;AAGpD,UAAM,SAAS;AAAA,MAAS,MAAM,MAAM,QAAQ,QAA4B,4BAAA,IACrE,QAAA,+BACA,QAA4B,6BAAC,MAAM,GAAG;AAAA,IACzC;AACA,mBAAe,YAAY,MAAM,aAAa,KAAK,GAAG,EAAE,QAAQ;AAGtD,cAAA,UAAU,MAAM,aAAa,KAAK,GAAG,EAAE,SAAS,MAAM;AAGhE,UAAM,MAAM,QAAA,MAAM,CAAC,UAAmB,aAAa,KAAK,CAAC;AAKzD,aAAS,aAAa;AACR,mBAAA,CAAC,SAAS,KAAK;AAAA,IAAA;AAO7B,mBAAe,aAAa,OAAgB;AACvC,UAAA,UAAU,SAAS,OAAO;AAC7B;AAAA,MAAA;AAGD,eAAS,QAAQ;AACjB,WAAK,eAAe,KAAK;AAGzB,YAAM,SAAS;AAER,aAAA,QAAQ,iBAAiB;AAI3B,WAAA,QAAQ,WAAW,QAAQ;AAAA,IAAA;AAOjC,aAAS,WAAW,OAAmB;AAElC,UAAA,CAAC,QAAA,OAAO;AACX;AAAA,MAAA;AAIG,UAAA,EAAE,MAAM,yBAAyB,OAAO;AAC3C;AAAA,MAAA;AAGD,UAAI,WAAW,OAAO,SAAS,MAAM,aAAa,GAAG;AACpD,qBAAa,KAAK;AAAA,MAAA;AAAA,IACnB;AAQD,mBAAe,eAAe;AAGzB,UAAA,QAAA,SAAS,UAAU,OAAO;AAC7B;AAAA,MAAA;AAIS,gBAAA,QAAQ,gBAAgB,iBAAiB,OAAQ;AAAA,QAC1D,mBAAmB;AAAA,QACnB,WAAW,aAAa;AAAA,QACxB,eAAe,cAAc,OAAO;AAAA,MAAA,CACpC;AACD,gBAAU,MAAM,SAAS;AAAA,IAAA;AAM1B,aAAS,iBAAiB;AACzB,gBAAU,OAAO,WAAW;AAC5B,gBAAU,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}