@nextcloud/vue 8.11.3 → 8.13.0

package/dist/chunks/NcSavingIndicatorIcon-BzKAIkhk.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcSavingIndicatorIcon-BzKAIkhk.cjs","sources":["../../src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022\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# Usage\n\n```\n<template>\n<div>\n\t<div>\n\t\t<NcSavingIndicatorIcon :name=\"`${savingState === 'error' ? 'Error saving' : savingState} file`\"\n\t\t\t:error=\"savingState === 'error'\"\n\t\t\t:saving=\"savingState === 'saving'\" />\n\t</div>\n\t<br />\n\t<div style=\"display: flex; justify-content: space-around;\">\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saved\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaved\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saving\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaving\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"error\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tError\n\t\t</NcCheckboxRadioSwitch>\n\t</div>\n</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsavingState: 'saved',\n\t\t}\n\t},\n}\n</script>\n\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\tclass=\"material-design-icon\"\n\t\trole=\"img\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<svg :fill=\"fillColor\"\n\t\t\tclass=\"material-design-icon__svg\"\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"indicatorColor\" d=\"m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z\" />\n\t\t\t<path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcSavingIndicatorIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the saving icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * Specify what is saved.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set to true when saving is in progress.\n\t\t */\n\t\tsaving: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t\t/**\n\t\t * Set to true if an error occured while saving.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t},\n\temits: ['click'],\n\tcomputed: {\n\t\tindicatorColor() {\n\t\t\treturn this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary-element)' : 'none')\n\t\t},\n\t},\n})\n</script>\n"],"names":["defineComponent"],"mappings":";;;AAwFA,MAAA,YAAAA,IAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,QAAA,uBAAA,KAAA,SAAA,iCAAA;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcSavingIndicatorIcon-BzKAIkhk.cjs","sources":["../../src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.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# Usage\n\n```\n<template>\n<div>\n\t<div>\n\t\t<NcSavingIndicatorIcon :name=\"`${savingState === 'error' ? 'Error saving' : savingState} file`\"\n\t\t\t:error=\"savingState === 'error'\"\n\t\t\t:saving=\"savingState === 'saving'\" />\n\t</div>\n\t<br />\n\t<div style=\"display: flex; justify-content: space-around;\">\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saved\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaved\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saving\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaving\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"error\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tError\n\t\t</NcCheckboxRadioSwitch>\n\t</div>\n</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsavingState: 'saved',\n\t\t}\n\t},\n}\n</script>\n\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\tclass=\"material-design-icon\"\n\t\trole=\"img\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<svg :fill=\"fillColor\"\n\t\t\tclass=\"material-design-icon__svg\"\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"indicatorColor\" d=\"m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z\" />\n\t\t\t<path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcSavingIndicatorIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the saving icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * Specify what is saved.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set to true when saving is in progress.\n\t\t */\n\t\tsaving: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t\t/**\n\t\t * Set to true if an error occured while saving.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t},\n\temits: ['click'],\n\tcomputed: {\n\t\tindicatorColor() {\n\t\t\treturn this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary-element)' : 'none')\n\t\t},\n\t},\n})\n</script>\n"],"names":["defineComponent"],"mappings":";;;AAyEA,MAAA,YAAAA,IAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,QAAA,uBAAA,KAAA,SAAA,iCAAA;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcSelect-EnQUx7gf.mjs → NcSelect-BVltxWdw.mjs}

@@ -1,15 +1,15 @@
-import '../assets/NcSelect-Fmyu7qyl.css';
+import '../assets/NcSelect-9AZOhTlS.css';
 import "@nextcloud/vue-select/dist/vue-select.css";
 import Vue from "vue";
 import { VueSelect } from "@nextcloud/vue-select";
 import { autoUpdate, computePosition, offset, flip, shift, limitShift } from "@floating-ui/dom";
-import { r as register, b as t14, a as t } from "./_l10n-DwEsZ6zb.mjs";
+import { r as register, b as t14, a as t } from "./_l10n-B6zipH_A.mjs";
 import { C as ChevronDown } from "./ChevronDown-PedEroXo.mjs";
 import { C as Close } from "./Close-1V1F2F-M.mjs";
 import NcEllipsisedOption from "../Components/NcEllipsisedOption.mjs";
-import { N as NcListItemIcon } from "./NcListItemIcon-DONcrnT_.mjs";
+import { N as NcListItemIcon } from "./NcListItemIcon-NtOXrncP.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 register(t14);
 const _sfc_main = {

package/dist/chunks/NcSelect-BVltxWdw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelect-BVltxWdw.mjs","sources":["../../src/components/NcSelect/NcSelect.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### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### Native form validation example\n\n```vue\n<template>\n\t<div class=\"container\">\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require a selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"singleValue\"\n\t\t\t\trequired />\n\t\t\t<NcButton native-type=\"submit\">Submit</NcButton>\n\t\t</form>\n\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require at least one selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"multiValue\"\n\t\t\t\tmultiple\n\t\t\t\trequired />\n\t\t\t<NcButton native-type=\"submit\">Submit</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n\tdisplay: flex;\n\tgap: 0 12px;\n}\n\n.container__form {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\twidth: 100%;\n\tgap: 8px 0;\n}\n\n.container__select {\n\twidth: 100%;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tprops: {\n\t\tinputLabel: 'Not wrapped',\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple user select (stay open on select)',\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect class=\"select\"\n\t\t:class=\"{\n\t\t\t'select--no-wrap': noWrap,\n\t\t\t'user-select': userSelect,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\n\t\t<template v-if=\"!labelOutside && inputLabel\" #header>\n\t\t\t<label :for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<input :class=\"['vs__search', inputClass]\"\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\tv-on=\"events\">\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown v-bind=\"attributes\"\n\t\t\t\tfill-color=\"var(--vs-controls-color)\"\n\t\t\t\t:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\n\t\t\t\t:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport '@nextcloud/vue-select/dist/vue-select.css'\n\nimport Vue from 'vue'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\n\n\t\t/**\n\t\t * Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#appendtobody\n\t\t */\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t *\n\t\t * If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#calculateposition\n\t\t */\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Close the dropdown when selecting an option\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#closeonselect\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 * Replace default vue-select components\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#components\n\t\t */\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of options to display in the dropdown list\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disable the component\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t */\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t *\n\t\t * Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t *\n\t\t * Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#filterby\n\t\t */\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the `input`\n\t\t *\n\t\t * Necessary for use in NcActionInput\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input element id\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => `select-input-${GenRandomId()}`,\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t *\n\t\t * @todo Set default for @nextcloud/vue 9\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t */\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Key of the displayed label for object options\n\t\t *\n\t\t * Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t *\n\t\t * Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Show the loading icon\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#loading\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable automatic wrapping when selected options overflow the width\n\t\t */\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Array of options\n\t\t *\n\t\t * @type {Array<string | number | Record<string | number, any>>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Customized component's response to keydown events while the search input has focus\n\t\t *\n\t\t * @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t */\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/**\n\t\t\t * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t *\n\t\t\t * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance\n\t\t\t * @return {Record<number, Function>} patched keydown event handlers\n\t\t\t */\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/**\n\t\t\t\t\t * Patched Escape handler to stop propagation from open select\n\t\t\t\t\t *\n\t\t\t\t\t * @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t */\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#uid\n\t\t */\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(),\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this sets the placement of the dropdown\n\t\t *\n\t\t * @type {'bottom' | 'top'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t */\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable the user selector with avatars\n\t\t *\n\t\t * Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t */\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t *\n\t\t * The `v-model` directive may be used for two-way data binding\n\t\t *\n\t\t * @type {string | number | Record<string | number, any> | Array<any>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable if a value is required for native form validation\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tinputRequired() {\n\t\t\tif (!this.required) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\t// The <input> itself does not have any value so we set the `required` attribute conditionally\n\t\t\treturn this.value === null || (Array.isArray(this.value) && this.value.length === 0)\n\t\t},\n\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(_middlewareArgs) {\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\toffset(-1),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// Match popperjs default collision prevention behavior by appending the following middleware in order\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t|| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap(mixin => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(\n\t\t\t\tObject.entries(this.$props)\n\t\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)),\n\t\t\t)\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\">\nbody {\n\t/**\n\t * Set custom vue-select CSS variables.\n\t * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)\n\t */\n\n\t/* Search Input */\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/* Font */\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/* Disabled State */\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/* Borders */\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: var(--border-width-input, 2px) !important;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-large);\n\n\t/* Component Controls: Clear, Open Indicator */\n\t--vs-controls-color: var(--color-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/* Dropdown */\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/* Options */\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/* Active State */\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/* Keyboard Focus State */\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/* Deselect State */\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/* Transitions */\n\t--vs-transition-duration: 0ms;\n\n\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 4px;\n}\n\n.v-select.select {\n\t/* Override default vue-select styles */\n\tmin-height: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.select__label {\n\t\tdisplay: block;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.vs__selected {\n\t\theight: 32px;\n\t\tpadding: 0 8px 0 12px;\n\t\tborder-radius: 18px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search {\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 2px 0 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tposition: relative;\n\t\tmax-height: 100px;\n\t\tpadding: 0;\n\t\toverflow-y: auto;\n\t}\n\n\t.vs__actions {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\tborder-width: var(--border-width-input-focused);\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t}\n\n\t&.vs--disabled {\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\tborder-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-bottom-color: var(--color-main-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: 40px; // 36px search height + 4px search margin\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search[readonly] {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix `max-width` for `position: absolute`\n\t\t\t\tmax-width: 100%;\n\t\t\t\t// Fix color to be accessible\n\t\t\t\topacity: 1;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\t.vs__selected {\n\t\t\tbackground: unset !important;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-width: var(--border-width-input-focused) !important;\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/* Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tborder-bottom-style: none !important;\n\t\t\tbox-shadow:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!important\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-lighter) !important;\n\t}\n}\n\n// Selected users require slightly different padding\n.user-select .vs__selected {\n\tpadding: 0 2px !important;\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcSelect-uODI-lly.cjs → NcSelect-BXjYMf6X.cjs}

@@ -1,16 +1,16 @@
-require('../assets/NcSelect-Fmyu7qyl.css');
+require('../assets/NcSelect-9AZOhTlS.css');
 "use strict";
 require("@nextcloud/vue-select/dist/vue-select.css");
 const Vue = require("vue");
 const vueSelect = require("@nextcloud/vue-select");
 const dom = require("@floating-ui/dom");
-const _l10n = require("./_l10n-ftziezFF.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
 const ChevronDown = require("./ChevronDown-CF9m1o8_.cjs");
 const Close = require("./Close-C2VrgKj3.cjs");
 const Components_NcEllipsisedOption = require("../Components/NcEllipsisedOption.cjs");
-const NcListItemIcon = require("./NcListItemIcon-DKSzgujO.cjs");
+const NcListItemIcon = require("./NcListItemIcon-CSD8rRYj.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-const GenRandomId = require("./GenRandomId-kBCcgMJd.cjs");
+const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);

package/dist/chunks/NcSelect-BXjYMf6X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelect-BXjYMf6X.cjs","sources":["../../src/components/NcSelect/NcSelect.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### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### Native form validation example\n\n```vue\n<template>\n\t<div class=\"container\">\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require a selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"singleValue\"\n\t\t\t\trequired />\n\t\t\t<NcButton native-type=\"submit\">Submit</NcButton>\n\t\t</form>\n\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require at least one selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"multiValue\"\n\t\t\t\tmultiple\n\t\t\t\trequired />\n\t\t\t<NcButton native-type=\"submit\">Submit</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n\tdisplay: flex;\n\tgap: 0 12px;\n}\n\n.container__form {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\twidth: 100%;\n\tgap: 8px 0;\n}\n\n.container__select {\n\twidth: 100%;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tprops: {\n\t\tinputLabel: 'Not wrapped',\n\t\tmultiple: true,\n\t\tcloseOnSelect: false,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### User select examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport Email from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\n\t\t\tuserSelect: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\ticon: '',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple user select (stay open on select)',\n\t\t\tuserSelect: true,\n\t\t\tmultiple: true,\n\t\t\tcloseOnSelect: false,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t\ticon: '',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: null,\n\t\t\t\t\ticonSvg: AccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: Email,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect class=\"select\"\n\t\t:class=\"{\n\t\t\t'select--no-wrap': noWrap,\n\t\t\t'user-select': userSelect,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\tv-on=\"$listeners\"\n\t\t@search=\"searchString => search = searchString\">\n\t\t<template v-if=\"!labelOutside && inputLabel\" #header>\n\t\t\t<label :for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<input :class=\"['vs__search', inputClass]\"\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\tv-on=\"events\">\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown v-bind=\"attributes\"\n\t\t\t\tfill-color=\"var(--vs-controls-color)\"\n\t\t\t\t:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\n\t\t\t\t:size=\"26\" />\n\t\t\t\t<!-- Set size to 26 to make up for the increased padding of this icon -->\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"option[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-if=\"userSelect\"\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"24\"\n\t\t\t\t:name=\"selectedOption[localLabel]\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcEllipsisedOption v-else\n\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport '@nextcloud/vue-select/dist/vue-select.css'\n\nimport Vue from 'vue'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcListItemIcon,\n\t\tNcLoadingIcon,\n\t\tVueSelect,\n\t},\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\n\n\t\t/**\n\t\t * Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#appendtobody\n\t\t */\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t *\n\t\t * If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#calculateposition\n\t\t */\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Close the dropdown when selecting an option\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#closeonselect\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 * Replace default vue-select components\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#components\n\t\t */\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: createElement => createElement(Close, {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of options to display in the dropdown list\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disable the component\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t */\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t *\n\t\t * Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t *\n\t\t * Enabling `userSelect` will automatically set this to filter by the\n\t\t * `displayName` and `subname` properties of the user option object\n\t\t * unless this prop is set explicitly\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#filterby\n\t\t */\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the `input`\n\t\t *\n\t\t * Necessary for use in NcActionInput\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input element id\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => `select-input-${GenRandomId()}`,\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t *\n\t\t * @todo Set default for @nextcloud/vue 9\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t */\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Key of the displayed label for object options\n\t\t *\n\t\t * Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t *\n\t\t * Enabling `userSelect` will automatically set this to `'displayName'`\n\t\t * unless this prop is set explicitly\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Show the loading icon\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#loading\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable automatic wrapping when selected options overflow the width\n\t\t */\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Array of options\n\t\t *\n\t\t * @type {Array<string | number | Record<string | number, any>>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Customized component's response to keydown events while the search input has focus\n\t\t *\n\t\t * @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t */\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/**\n\t\t\t * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t *\n\t\t\t * @param {Record<number, Function>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('@nextcloud/vue-select').VueSelect} vm - VueSelect instance\n\t\t\t * @return {Record<number, Function>} patched keydown event handlers\n\t\t\t */\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/**\n\t\t\t\t\t * Patched Escape handler to stop propagation from open select\n\t\t\t\t\t *\n\t\t\t\t\t * @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t */\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#uid\n\t\t */\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(),\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this sets the placement of the dropdown\n\t\t *\n\t\t * @type {'bottom' | 'top'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t */\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable the user selector with avatars\n\t\t *\n\t\t * Objects must contain the data expected by the\n\t\t * [NcListItemIcon](#/Components/NcListItemIcon) and\n\t\t * [NcAvatar](#/Components/NcAvatar) components\n\t\t */\n\t\tuserSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t *\n\t\t * The `v-model` directive may be used for two-way data binding\n\t\t *\n\t\t * @type {string | number | Record<string | number, any> | Array<any>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable if a value is required for native form validation\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tinputRequired() {\n\t\t\tif (!this.required) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\t// The <input> itself does not have any value so we set the `required` attribute conditionally\n\t\t\treturn this.value === null || (Array.isArray(this.value) && this.value.length === 0)\n\t\t},\n\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(_middlewareArgs) {\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\toffset(-1),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// Match popperjs default collision prevention behavior by appending the following middleware in order\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\t\t\tif (this.filterBy !== null) {\n\t\t\t\treturn this.filterBy\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn (option, label, search) => {\n\t\t\t\t\tconst match = search.match(EMAIL_NOTATION)\n\t\t\t\t\treturn (match && option.subname?.toLocaleLowerCase?.()?.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t\t\t\t\t|| (`${label} ${option.subname}`\n\t\t\t\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\tif (this.label !== null) {\n\t\t\t\treturn this.label\n\t\t\t}\n\t\t\tif (this.userSelect) {\n\t\t\t\treturn 'displayName'\n\t\t\t}\n\t\t\treturn VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap(mixin => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(\n\t\t\t\tObject.entries(this.$props)\n\t\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)),\n\t\t\t)\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\tVue.util.warn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\">\nbody {\n\t/**\n\t * Set custom vue-select CSS variables.\n\t * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)\n\t */\n\n\t/* Search Input */\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/* Font */\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/* Disabled State */\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/* Borders */\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: var(--border-width-input, 2px) !important;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-large);\n\n\t/* Component Controls: Clear, Open Indicator */\n\t--vs-controls-color: var(--color-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/* Dropdown */\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/* Options */\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/* Active State */\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/* Keyboard Focus State */\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/* Deselect State */\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/* Transitions */\n\t--vs-transition-duration: 0ms;\n\n\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 4px;\n}\n\n.v-select.select {\n\t/* Override default vue-select styles */\n\tmin-height: $clickable-area;\n\tmin-width: 260px;\n\tmargin: 0;\n\n\t.select__label {\n\t\tdisplay: block;\n\t\tmargin-bottom: 2px;\n\t}\n\n\t.vs__selected {\n\t\theight: 32px;\n\t\tpadding: 0 8px 0 12px;\n\t\tborder-radius: 18px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search {\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t.vs__search, .vs__search:focus {\n\t\tmargin: 2px 0 0;\n\t}\n\n\t.vs__dropdown-toggle {\n\t\tposition: relative;\n\t\tmax-height: 100px;\n\t\tpadding: 0;\n\t\toverflow-y: auto;\n\t}\n\n\t.vs__actions {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t}\n\n\t.vs__clear {\n\t\tmargin-right: 2px;\n\t}\n\n\t&.vs--open .vs__dropdown-toggle {\n\t\tborder-width: var(--border-width-input-focused);\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t\tborder-bottom-color: transparent;\n\t}\n\n\t&:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:hover {\n\t\toutline: 2px solid var(--color-main-background);\n\t\tborder-color: var(--color-main-text);\n\t}\n\n\t&.vs--disabled {\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\tborder-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);\n\t\t\t\tborder-top-color: transparent;\n\t\t\t\tborder-bottom-color: var(--color-main-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: 40px; // 36px search height + 4px search margin\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search[readonly] {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix `max-width` for `position: absolute`\n\t\t\t\tmax-width: 100%;\n\t\t\t\t// Fix color to be accessible\n\t\t\t\topacity: 1;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t}\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t}\n\t\t.vs__selected {\n\t\t\tbackground: unset !important;\n\t\t}\n\t}\n}\n\n.vs__dropdown-menu {\n\tborder-width: var(--border-width-input-focused) !important;\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/* Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tborder-bottom-style: none !important;\n\t\t\tbox-shadow:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!important\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-lighter) !important;\n\t}\n}\n\n// Selected users require slightly different padding\n.user-select .vs__selected {\n\tpadding: 0 2px !important;\n}\n</style>\n"],"names":["ChevronDown","NcEllipsisedOption","NcListItemIcon","NcLoadingIcon","VueSelect","t","Close","GenRandomId","computePosition","offset","flip","shift","limitShift","autoUpdate","Vue"],"mappings":"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"}

package/dist/chunks/{NcSelectTags-tEADv0cv.mjs → NcSelectTags-BA6aGEca.mjs}

@@ -1,30 +1,9 @@
 import NcEllipsisedOption from "../Components/NcEllipsisedOption.mjs";
-import { N as NcSelect } from "./NcSelect-EnQUx7gf.mjs";
+import { N as NcSelect } from "./NcSelect-BVltxWdw.mjs";
 import axios from "@nextcloud/axios";
 import { generateRemoteUrl } from "@nextcloud/router";
-import { r as register, g as t0, a as t } from "./_l10n-DwEsZ6zb.mjs";
+import { r as register, g as t0, a as t } from "./_l10n-B6zipH_A.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
-/**
- * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
 const xmlToJson = (xml) => {
   let obj = {};
   if (xml.nodeType === 1) {

package/dist/chunks/NcSelectTags-BA6aGEca.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelectTags-BA6aGEca.mjs","sources":["../../src/components/NcSelectTags/api.js","../../src/components/NcSelectTags/NcSelectTags.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios from '@nextcloud/axios'\nimport { generateRemoteUrl } from '@nextcloud/router'\n\nconst xmlToJson = (xml) => {\n\tlet obj = {}\n\n\tif (xml.nodeType === 1) {\n\t\tif (xml.attributes.length > 0) {\n\t\t\tobj['@attributes'] = {}\n\t\t\tfor (let j = 0; j < xml.attributes.length; j++) {\n\t\t\t\tconst attribute = xml.attributes.item(j)\n\t\t\t\tobj['@attributes'][attribute.nodeName] = attribute.nodeValue\n\t\t\t}\n\t\t}\n\t} else if (xml.nodeType === 3) {\n\t\tobj = xml.nodeValue\n\t}\n\n\tif (xml.hasChildNodes()) {\n\t\tfor (let i = 0; i < xml.childNodes.length; i++) {\n\t\t\tconst item = xml.childNodes.item(i)\n\t\t\tconst nodeName = item.nodeName\n\t\t\tif (typeof (obj[nodeName]) === 'undefined') {\n\t\t\t\tobj[nodeName] = xmlToJson(item)\n\t\t\t} else {\n\t\t\t\tif (typeof obj[nodeName].push === 'undefined') {\n\t\t\t\t\tconst old = obj[nodeName]\n\t\t\t\t\tobj[nodeName] = []\n\t\t\t\t\tobj[nodeName].push(old)\n\t\t\t\t}\n\t\t\t\tobj[nodeName].push(xmlToJson(item))\n\t\t\t}\n\t\t}\n\t}\n\treturn obj\n}\n\nconst parseXml = (xml) => {\n\tlet dom = null\n\ttry {\n\t\tdom = (new DOMParser()).parseFromString(xml, 'text/xml')\n\t} catch (e) {\n\t\tconsole.error('Failed to parse xml document', e)\n\t}\n\treturn dom\n}\n\nconst xmlToTagList = (xml) => {\n\tconst json = xmlToJson(parseXml(xml))\n\tconst list = json['d:multistatus']['d:response']\n\tconst result = []\n\tfor (const index in list) {\n\t\tconst tag = list[index]['d:propstat']\n\n\t\tif (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {\n\t\t\tcontinue\n\t\t}\n\t\tresult.push({\n\t\t\tid: parseInt(tag['d:prop']['oc:id']['#text']),\n\t\t\tdisplayName: tag['d:prop']['oc:display-name']['#text'],\n\t\t\tcanAssign: tag['d:prop']['oc:can-assign']['#text'] === 'true',\n\t\t\tuserAssignable: tag['d:prop']['oc:user-assignable']['#text'] === 'true',\n\t\t\tuserVisible: tag['d:prop']['oc:user-visible']['#text'] === 'true',\n\t\t})\n\t}\n\treturn result\n}\n\nconst searchTags = async function() {\n\tif (window.NextcloudVueDocs) {\n\t\treturn Promise.resolve(xmlToTagList(window.NextcloudVueDocs.tags))\n\t}\n\n\tconst result = await axios({\n\t\tmethod: 'PROPFIND',\n\t\turl: generateRemoteUrl('dav') + '/systemtags/',\n\t\tdata: `<?xml version=\"1.0\"?>\n\t\t\t\t\t<d:propfind  xmlns:d=\"DAV:\" xmlns:oc=\"http://owncloud.org/ns\">\n\t\t\t\t\t  <d:prop>\n\t\t\t\t\t\t<oc:id />\n\t\t\t\t\t\t<oc:display-name />\n\t\t\t\t\t\t<oc:user-visible />\n\t\t\t\t\t\t<oc:user-assignable />\n\t\t\t\t\t\t<oc:can-assign />\n\t\t\t\t\t  </d:prop>\n\t\t\t\t\t</d:propfind>`,\n\t})\n\treturn xmlToTagList(result.data)\n}\n\nexport {\n\tsearchTags,\n}\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Single tag selector\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tag\" :multiple=\"false\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: 1,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Multiple tag selector\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :multiple=\"true\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom filter\nBecause of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `limit` prop to `null`:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :limit=\"null\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\nIt's also possible to apply any custom filter logic by setting the `optionsFilter` function-prop to any custom function receiving the tag element and the index:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :options-filter=\"customFilter\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t3,\n\t\t\t],\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Implement your custom filter logic to filter tags delivered\n\t\t* by the server\n\t\t*\n\t\t* @param {object} the tag object\n\t\t* @param {int} the index of the object inside the collection\n\t\t*/\n\t\tcustomFilter(element, index) {\n\t\t\t/*\n\t\t\t* Tag objects returned by the server will have the\n\t\t\t* following properties (see also api.js):\n\t\t\t* id, displayName, canAssign, userAssignable, userVisible\n\t\t\t*/\n\t\t\treturn element.id >= 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible\n\t\t}\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcSelect v-bind=\"propsToForward\"\n\t\t:options=\"availableOptions\"\n\t\t:close-on-select=\"!multiple\"\n\t\t:value=\"passthru ? value : localValue\"\n\t\t@search=\"searchString => search = searchString\"\n\t\tv-on=\"{\n\t\t\t...$listeners,\n\t\t\tinput: passthru ? $listeners.input : handleInput,\n\t\t}\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"getOptionLabel(option)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"getOptionLabel(selectedOption)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcSelect from '../NcSelect/index.js'\n\nimport { searchTags } from './api.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcSelectTags',\n\n\tcomponents: {\n\t\tNcEllipsisedOption,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t// Add NcSelect prop defaults and populate $props\n\t\t...NcSelect.props,\n\n\t\t/**\n\t\t * Enable automatic fetching of tags\n\t\t *\n\t\t * If `false`, available tags must be passed using the `options` prop\n\t\t */\n\t\tfetchTags: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to generate the label text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#getoptionlabel\n\t\t */\n\t\tgetOptionLabel: {\n\t\t\ttype: Function,\n\t\t\tdefault: (option) => {\n\t\t\t\tconst { displayName, userVisible, userAssignable } = option\n\t\t\t\tif (userVisible === false) {\n\t\t\t\t\treturn t('{tag} (invisible)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\tif (userAssignable === false) {\n\t\t\t\t\treturn t('{tag} (restricted)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\treturn displayName\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of tags to display in the dropdown list\n\t\t *\n\t\t * Because of compatibility reasons only 5 tag entries are shown by\n\t\t * default\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * This prop automatically sets the internal `closeOnSelect` prop to\n\t\t * its boolean opposite\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to filter available options\n\t\t */\n\t\toptionsFilter: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable passing of `value` prop and emitted `input` events as-is\n\t\t * i.e. for usage with `v-model`\n\t\t *\n\t\t * If `true`, custom internal `value` and `input` handling is disabled\n\t\t */\n\t\tpassthru: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Select a tag'),\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [Number, Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\tavailableTags: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavailableOptions() {\n\t\t\tif (this.optionsFilter) {\n\t\t\t\treturn this.tags.filter(this.optionsFilter)\n\t\t\t}\n\t\t\treturn this.tags\n\t\t},\n\n\t\tlocalValue() {\n\t\t\tif (this.tags.length === 0) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tif (this.multiple) {\n\t\t\t\treturn this.value\n\t\t\t\t\t.filter(tag => tag !== '')\n\t\t\t\t\t.map(id => this.tags.find(tag2 => tag2.id === id))\n\t\t\t} else {\n\t\t\t\treturn this.tags.find(tag => tag.id === this.value)\n\t\t\t}\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tfetchTags,\n\t\t\t\toptionsFilter,\n\t\t\t\tpassthru,\n\t\t\t\t// Props to forward\n\t\t\t\t...propsToForward\n\t\t\t} = this.$props\n\n\t\t\treturn propsToForward\n\t\t},\n\n\t\ttags() {\n\t\t\tif (!this.fetchTags) {\n\t\t\t\treturn this.options\n\t\t\t}\n\t\t\treturn this.availableTags\n\t\t},\n\t},\n\n\tasync created() {\n\t\tif (!this.fetchTags) {\n\t\t\treturn\n\t\t}\n\t\ttry {\n\t\t\tconst result = await searchTags()\n\t\t\tthis.availableTags = result\n\t\t} catch (error) {\n\t\t\tconsole.error('Loading systemtags failed', error)\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleInput(value) {\n\t\t\tif (this.multiple) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on input events of the multiselect field\n\t\t\t\t *\n\t\t\t\t * @type {number|number[]}\n\t\t\t\t */\n\t\t\t\tthis.$emit('input', value.map(element => element.id))\n\t\t\t} else {\n\t\t\t\tif (value === null) {\n\t\t\t\t\tthis.$emit('input', null)\n\t\t\t\t} else {\n\t\t\t\t\tthis.$emit('input', value.id)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcSelectTags-BzQxtK0g.cjs → NcSelectTags-DzNoReBn.cjs}

@@ -1,33 +1,12 @@
 "use strict";
 const Components_NcEllipsisedOption = require("../Components/NcEllipsisedOption.cjs");
-const NcSelect = require("./NcSelect-uODI-lly.cjs");
+const NcSelect = require("./NcSelect-BXjYMf6X.cjs");
 const axios = require("@nextcloud/axios");
 const router = require("@nextcloud/router");
-const _l10n = require("./_l10n-ftziezFF.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const axios__default = /* @__PURE__ */ _interopDefault(axios);
-/**
- * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
 const xmlToJson = (xml) => {
   let obj = {};
   if (xml.nodeType === 1) {

package/dist/chunks/NcSelectTags-DzNoReBn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSelectTags-DzNoReBn.cjs","sources":["../../src/components/NcSelectTags/api.js","../../src/components/NcSelectTags/NcSelectTags.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport axios from '@nextcloud/axios'\nimport { generateRemoteUrl } from '@nextcloud/router'\n\nconst xmlToJson = (xml) => {\n\tlet obj = {}\n\n\tif (xml.nodeType === 1) {\n\t\tif (xml.attributes.length > 0) {\n\t\t\tobj['@attributes'] = {}\n\t\t\tfor (let j = 0; j < xml.attributes.length; j++) {\n\t\t\t\tconst attribute = xml.attributes.item(j)\n\t\t\t\tobj['@attributes'][attribute.nodeName] = attribute.nodeValue\n\t\t\t}\n\t\t}\n\t} else if (xml.nodeType === 3) {\n\t\tobj = xml.nodeValue\n\t}\n\n\tif (xml.hasChildNodes()) {\n\t\tfor (let i = 0; i < xml.childNodes.length; i++) {\n\t\t\tconst item = xml.childNodes.item(i)\n\t\t\tconst nodeName = item.nodeName\n\t\t\tif (typeof (obj[nodeName]) === 'undefined') {\n\t\t\t\tobj[nodeName] = xmlToJson(item)\n\t\t\t} else {\n\t\t\t\tif (typeof obj[nodeName].push === 'undefined') {\n\t\t\t\t\tconst old = obj[nodeName]\n\t\t\t\t\tobj[nodeName] = []\n\t\t\t\t\tobj[nodeName].push(old)\n\t\t\t\t}\n\t\t\t\tobj[nodeName].push(xmlToJson(item))\n\t\t\t}\n\t\t}\n\t}\n\treturn obj\n}\n\nconst parseXml = (xml) => {\n\tlet dom = null\n\ttry {\n\t\tdom = (new DOMParser()).parseFromString(xml, 'text/xml')\n\t} catch (e) {\n\t\tconsole.error('Failed to parse xml document', e)\n\t}\n\treturn dom\n}\n\nconst xmlToTagList = (xml) => {\n\tconst json = xmlToJson(parseXml(xml))\n\tconst list = json['d:multistatus']['d:response']\n\tconst result = []\n\tfor (const index in list) {\n\t\tconst tag = list[index]['d:propstat']\n\n\t\tif (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {\n\t\t\tcontinue\n\t\t}\n\t\tresult.push({\n\t\t\tid: parseInt(tag['d:prop']['oc:id']['#text']),\n\t\t\tdisplayName: tag['d:prop']['oc:display-name']['#text'],\n\t\t\tcanAssign: tag['d:prop']['oc:can-assign']['#text'] === 'true',\n\t\t\tuserAssignable: tag['d:prop']['oc:user-assignable']['#text'] === 'true',\n\t\t\tuserVisible: tag['d:prop']['oc:user-visible']['#text'] === 'true',\n\t\t})\n\t}\n\treturn result\n}\n\nconst searchTags = async function() {\n\tif (window.NextcloudVueDocs) {\n\t\treturn Promise.resolve(xmlToTagList(window.NextcloudVueDocs.tags))\n\t}\n\n\tconst result = await axios({\n\t\tmethod: 'PROPFIND',\n\t\turl: generateRemoteUrl('dav') + '/systemtags/',\n\t\tdata: `<?xml version=\"1.0\"?>\n\t\t\t\t\t<d:propfind  xmlns:d=\"DAV:\" xmlns:oc=\"http://owncloud.org/ns\">\n\t\t\t\t\t  <d:prop>\n\t\t\t\t\t\t<oc:id />\n\t\t\t\t\t\t<oc:display-name />\n\t\t\t\t\t\t<oc:user-visible />\n\t\t\t\t\t\t<oc:user-assignable />\n\t\t\t\t\t\t<oc:can-assign />\n\t\t\t\t\t  </d:prop>\n\t\t\t\t\t</d:propfind>`,\n\t})\n\treturn xmlToTagList(result.data)\n}\n\nexport {\n\tsearchTags,\n}\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Single tag selector\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tag\" :multiple=\"false\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: 1,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Multiple tag selector\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :multiple=\"true\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom filter\nBecause of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the `limit` prop to `null`:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :limit=\"null\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t1,\n\t\t\t\t2,\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n```\n\nIt's also possible to apply any custom filter logic by setting the `optionsFilter` function-prop to any custom function receiving the tag element and the index:\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcSelectTags v-model=\"value\" input-label=\"Tags\" :options-filter=\"customFilter\" />\n\t\t{{ value }}\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tvalue: [\n\t\t\t\t3,\n\t\t\t],\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Implement your custom filter logic to filter tags delivered\n\t\t* by the server\n\t\t*\n\t\t* @param {object} the tag object\n\t\t* @param {int} the index of the object inside the collection\n\t\t*/\n\t\tcustomFilter(element, index) {\n\t\t\t/*\n\t\t\t* Tag objects returned by the server will have the\n\t\t\t* following properties (see also api.js):\n\t\t\t* id, displayName, canAssign, userAssignable, userVisible\n\t\t\t*/\n\t\t\treturn element.id >= 2 && element.displayName !== '' && element.canAssign && element.userAssignable && element.userVisible\n\t\t}\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcSelect v-bind=\"propsToForward\"\n\t\t:options=\"availableOptions\"\n\t\t:close-on-select=\"!multiple\"\n\t\t:value=\"passthru ? value : localValue\"\n\t\t@search=\"searchString => search = searchString\"\n\t\tv-on=\"{\n\t\t\t...$listeners,\n\t\t\tinput: passthru ? $listeners.input : handleInput,\n\t\t}\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"getOptionLabel(option)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"getOptionLabel(selectedOption)\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $scopedSlots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nimport NcEllipsisedOption from '../NcEllipsisedOption/index.js'\nimport NcSelect from '../NcSelect/index.js'\n\nimport { searchTags } from './api.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcSelectTags',\n\n\tcomponents: {\n\t\tNcEllipsisedOption,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t// Add NcSelect prop defaults and populate $props\n\t\t...NcSelect.props,\n\n\t\t/**\n\t\t * Enable automatic fetching of tags\n\t\t *\n\t\t * If `false`, available tags must be passed using the `options` prop\n\t\t */\n\t\tfetchTags: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to generate the label text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#getoptionlabel\n\t\t */\n\t\tgetOptionLabel: {\n\t\t\ttype: Function,\n\t\t\tdefault: (option) => {\n\t\t\t\tconst { displayName, userVisible, userAssignable } = option\n\t\t\t\tif (userVisible === false) {\n\t\t\t\t\treturn t('{tag} (invisible)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\tif (userAssignable === false) {\n\t\t\t\t\treturn t('{tag} (restricted)', { tag: displayName })\n\t\t\t\t}\n\t\t\t\treturn displayName\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of tags to display in the dropdown list\n\t\t *\n\t\t * Because of compatibility reasons only 5 tag entries are shown by\n\t\t * default\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * This prop automatically sets the internal `closeOnSelect` prop to\n\t\t * its boolean opposite\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Callback to filter available options\n\t\t */\n\t\toptionsFilter: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable passing of `value` prop and emitted `input` events as-is\n\t\t * i.e. for usage with `v-model`\n\t\t *\n\t\t * If `true`, custom internal `value` and `input` handling is disabled\n\t\t */\n\t\tpassthru: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Select a tag'),\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [Number, Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t\tavailableTags: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tavailableOptions() {\n\t\t\tif (this.optionsFilter) {\n\t\t\t\treturn this.tags.filter(this.optionsFilter)\n\t\t\t}\n\t\t\treturn this.tags\n\t\t},\n\n\t\tlocalValue() {\n\t\t\tif (this.tags.length === 0) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\tif (this.multiple) {\n\t\t\t\treturn this.value\n\t\t\t\t\t.filter(tag => tag !== '')\n\t\t\t\t\t.map(id => this.tags.find(tag2 => tag2.id === id))\n\t\t\t} else {\n\t\t\t\treturn this.tags.find(tag => tag.id === this.value)\n\t\t\t}\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst {\n\t\t\t\t// Props handled by this component\n\t\t\t\tfetchTags,\n\t\t\t\toptionsFilter,\n\t\t\t\tpassthru,\n\t\t\t\t// Props to forward\n\t\t\t\t...propsToForward\n\t\t\t} = this.$props\n\n\t\t\treturn propsToForward\n\t\t},\n\n\t\ttags() {\n\t\t\tif (!this.fetchTags) {\n\t\t\t\treturn this.options\n\t\t\t}\n\t\t\treturn this.availableTags\n\t\t},\n\t},\n\n\tasync created() {\n\t\tif (!this.fetchTags) {\n\t\t\treturn\n\t\t}\n\t\ttry {\n\t\t\tconst result = await searchTags()\n\t\t\tthis.availableTags = result\n\t\t} catch (error) {\n\t\t\tconsole.error('Loading systemtags failed', error)\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleInput(value) {\n\t\t\tif (this.multiple) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on input events of the multiselect field\n\t\t\t\t *\n\t\t\t\t * @type {number|number[]}\n\t\t\t\t */\n\t\t\t\tthis.$emit('input', value.map(element => element.id))\n\t\t\t} else {\n\t\t\t\tif (value === null) {\n\t\t\t\t\tthis.$emit('input', null)\n\t\t\t\t} else {\n\t\t\t\t\tthis.$emit('input', value.id)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n"],"names":["axios","generateRemoteUrl","NcEllipsisedOption","NcSelect","t"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,CAAC,QAAQ;AAC1B,MAAI,MAAM,CAAE;AAEZ,MAAI,IAAI,aAAa,GAAG;AACvB,QAAI,IAAI,WAAW,SAAS,GAAG;AAC9B,UAAI,aAAa,IAAI,CAAE;AACvB,eAAS,IAAI,GAAG,IAAI,IAAI,WAAW,QAAQ,KAAK;AAC/C,cAAM,YAAY,IAAI,WAAW,KAAK,CAAC;AACvC,YAAI,aAAa,EAAE,UAAU,QAAQ,IAAI,UAAU;AAAA,MACnD;AAAA,IACD;AAAA,EACH,WAAY,IAAI,aAAa,GAAG;AAC9B,UAAM,IAAI;AAAA,EACV;AAED,MAAI,IAAI,iBAAiB;AACxB,aAAS,IAAI,GAAG,IAAI,IAAI,WAAW,QAAQ,KAAK;AAC/C,YAAM,OAAO,IAAI,WAAW,KAAK,CAAC;AAClC,YAAM,WAAW,KAAK;AACtB,UAAI,OAAQ,IAAI,QAAQ,MAAO,aAAa;AAC3C,YAAI,QAAQ,IAAI,UAAU,IAAI;AAAA,MAClC,OAAU;AACN,YAAI,OAAO,IAAI,QAAQ,EAAE,SAAS,aAAa;AAC9C,gBAAM,MAAM,IAAI,QAAQ;AACxB,cAAI,QAAQ,IAAI,CAAE;AAClB,cAAI,QAAQ,EAAE,KAAK,GAAG;AAAA,QACtB;AACD,YAAI,QAAQ,EAAE,KAAK,UAAU,IAAI,CAAC;AAAA,MAClC;AAAA,IACD;AAAA,EACD;AACD,SAAO;AACR;AAEA,MAAM,WAAW,CAAC,QAAQ;AACzB,MAAI,MAAM;AACV,MAAI;AACH,UAAO,IAAI,UAAS,EAAI,gBAAgB,KAAK,UAAU;AAAA,EACvD,SAAQ,GAAG;AACX,YAAQ,MAAM,gCAAgC,CAAC;AAAA,EAC/C;AACD,SAAO;AACR;AAEA,MAAM,eAAe,CAAC,QAAQ;AAC7B,QAAM,OAAO,UAAU,SAAS,GAAG,CAAC;AACpC,QAAM,OAAO,KAAK,eAAe,EAAE,YAAY;AAC/C,QAAM,SAAS,CAAE;AACjB,aAAW,SAAS,MAAM;AACzB,UAAM,MAAM,KAAK,KAAK,EAAE,YAAY;AAEpC,QAAI,IAAI,UAAU,EAAE,OAAO,MAAM,mBAAmB;AACnD;AAAA,IACA;AACD,WAAO,KAAK;AAAA,MACX,IAAI,SAAS,IAAI,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;AAAA,MAC5C,aAAa,IAAI,QAAQ,EAAE,iBAAiB,EAAE,OAAO;AAAA,MACrD,WAAW,IAAI,QAAQ,EAAE,eAAe,EAAE,OAAO,MAAM;AAAA,MACvD,gBAAgB,IAAI,QAAQ,EAAE,oBAAoB,EAAE,OAAO,MAAM;AAAA,MACjE,aAAa,IAAI,QAAQ,EAAE,iBAAiB,EAAE,OAAO,MAAM;AAAA,IAC9D,CAAG;AAAA,EACD;AACD,SAAO;AACR;AAEA,MAAM,aAAa,iBAAiB;AACnC,MAAI,OAAO,kBAAkB;AAC5B,WAAO,QAAQ,QAAQ,aAAa,OAAO,iBAAiB,IAAI,CAAC;AAAA,EACjE;AAED,QAAM,SAAS,MAAMA,uBAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,KAAKC,OAAAA,kBAAkB,KAAK,IAAI;AAAA,IAChC,MAAM;AAAA,EAUR,CAAE;AACD,SAAO,aAAa,OAAO,IAAI;AAChC;;ACqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,oBAAAC;AAAAA,IACA,UAAAC,SAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,GAAAA,SAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,CAAA,WAAA;AACA,cAAA,EAAA,aAAA,aAAA,eAAA,IAAA;AACA,YAAA,gBAAA,OAAA;AACA,iBAAAC,MAAA,EAAA,qBAAA,EAAA,KAAA,YAAA,CAAA;AAAA,QACA;AACA,YAAA,mBAAA,OAAA;AACA,iBAAAA,MAAA,EAAA,sBAAA,EAAA,KAAA,YAAA,CAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAA,MAAA,EAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,KAAA,CAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA,KAAA,OAAA,KAAA,aAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,KAAA,KAAA,WAAA,GAAA;AACA,eAAA,CAAA;AAAA,MACA;AACA,UAAA,KAAA,UAAA;AACA,eAAA,KAAA,MACA,OAAA,SAAA,QAAA,EAAA,EACA,IAAA,QAAA,KAAA,KAAA,KAAA,UAAA,KAAA,OAAA,EAAA,CAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAA,KAAA,KAAA,SAAA,IAAA,OAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,YAAA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA,GAAA;AAAA,MACA,IAAA,KAAA;AAEA,aAAA;AAAA,IACA;AAAA,IAEA,OAAA;AACA,UAAA,CAAA,KAAA,WAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,QAAA,CAAA,KAAA,WAAA;AACA;AAAA,IACA;AACA,QAAA;AACA,YAAA,SAAA,MAAA,WAAA;AACA,WAAA,gBAAA;AAAA,IACA,SAAA,OAAA;AACA,cAAA,MAAA,6BAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,OAAA;AACA,UAAA,KAAA,UAAA;AAMA,aAAA,MAAA,SAAA,MAAA,IAAA,aAAA,QAAA,EAAA,CAAA;AAAA,MACA,OAAA;AACA,YAAA,UAAA,MAAA;AACA,eAAA,MAAA,SAAA,IAAA;AAAA,QACA,OAAA;AACA,eAAA,MAAA,SAAA,MAAA,EAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcSettingsInputText-Bg_VDGoS.cjs → NcSettingsInputText-B3aogzD0.cjs}

@@ -1,7 +1,7 @@
-require('../assets/NcSettingsInputText-CU65Coab.css');
+require('../assets/NcSettingsInputText-DbTNj9E6.css');
 "use strict";
-const _l10n = require("./_l10n-ftziezFF.cjs");
-const GenRandomId = require("./GenRandomId-kBCcgMJd.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
+const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 _l10n.register(_l10n.t41);
 const _sfc_main = {
@@ -93,7 +93,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5b140fb6",
+  "f5a7bd55",
   null,
   null
 );

package/dist/chunks/NcSettingsInputText-B3aogzD0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsInputText-B3aogzD0.cjs","sources":["../../src/components/NcSettingsInputText/NcSettingsInputText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n```vue\n<NcSettingsInputText label=\"Label\" hint=\"Hint\" />\n<NcSettingsInputText label=\"Label\" value=\"Value\" hint=\"Hint\" disabled />\n```\n\n</docs>\n\n<template>\n\t<form ref=\"form\"\n\t\t:disabled=\"disabled\"\n\t\t@submit.prevent.stop=\"onSubmit\">\n\t\t<div class=\"input-wrapper\">\n\t\t\t<label :for=\"id\" class=\"action-input__label\">{{ label }}</label>\n\t\t\t<input :id=\"id\"\n\t\t\t\ttype=\"text\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@input=\"onInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<input :id=\"idSubmit\"\n\t\t\t\t:value=\"submitTranslated\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tclass=\"action-input__submit\">\n\t\t\t<p v-if=\"hint\" class=\"hint\">\n\t\t\t\t{{ hint }}\n\t\t\t</p>\n\t\t</div>\n\t</form>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSettingsInputText',\n\tprops: {\n\t\t/**\n\t\t * label of the select group element\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * hint of the select group input\n\t\t */\n\t\thint: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'settings-input-text-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsubmitTranslated: t('Submit'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {string}\n\t\t */\n\t\tidSubmit() {\n\t\t\treturn this.id + '-submit'\n\t\t},\n\t},\n\tmethods: {\n\t\tonInput(event) {\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n\t.input-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\twidth: 100%;\n\t\tmax-width: 400px;\n\n\t\t& .action-input__label {\n\t\t\tmargin-right: 12px;\n\t\t}\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t.hint {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin-left: 8px;\n\t\t}\n\t}\n\n</style>\n"],"names":["GenRandomId","t"],"mappings":";;;;;AAyCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,yBAAAA,wBAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAAC,MAAA,EAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,KAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,QAAA,OAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAMA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AACA,UAAA,CAAA,KAAA,UAAA;AAMA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcSettingsInputText-BdjyNei5.mjs → NcSettingsInputText-CXURkBMD.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcSettingsInputText-CU65Coab.css';
-import { r as register, f as t41, a as t } from "./_l10n-DwEsZ6zb.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import '../assets/NcSettingsInputText-DbTNj9E6.css';
+import { r as register, f as t41, a as t } from "./_l10n-B6zipH_A.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
 register(t41);
 const _sfc_main = {
@@ -92,7 +92,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5b140fb6",
+  "f5a7bd55",
   null,
   null
 );

package/dist/chunks/NcSettingsInputText-CXURkBMD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsInputText-CXURkBMD.mjs","sources":["../../src/components/NcSettingsInputText/NcSettingsInputText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n```vue\n<NcSettingsInputText label=\"Label\" hint=\"Hint\" />\n<NcSettingsInputText label=\"Label\" value=\"Value\" hint=\"Hint\" disabled />\n```\n\n</docs>\n\n<template>\n\t<form ref=\"form\"\n\t\t:disabled=\"disabled\"\n\t\t@submit.prevent.stop=\"onSubmit\">\n\t\t<div class=\"input-wrapper\">\n\t\t\t<label :for=\"id\" class=\"action-input__label\">{{ label }}</label>\n\t\t\t<input :id=\"id\"\n\t\t\t\ttype=\"text\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@input=\"onInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<input :id=\"idSubmit\"\n\t\t\t\t:value=\"submitTranslated\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tclass=\"action-input__submit\">\n\t\t\t<p v-if=\"hint\" class=\"hint\">\n\t\t\t\t{{ hint }}\n\t\t\t</p>\n\t\t</div>\n\t</form>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcSettingsInputText',\n\tprops: {\n\t\t/**\n\t\t * label of the select group element\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * hint of the select group input\n\t\t */\n\t\thint: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * value of the select group input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the settings select group input\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the select group element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'settings-input-text-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tsubmitTranslated: t('Submit'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {string}\n\t\t */\n\t\tidSubmit() {\n\t\t\treturn this.id + '-submit'\n\t\t},\n\t},\n\tmethods: {\n\t\tonInput(event) {\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n\t.input-wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\twidth: 100%;\n\t\tmax-width: 400px;\n\n\t\t& .action-input__label {\n\t\t\tmargin-right: 12px;\n\t\t}\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t.hint {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin-left: 8px;\n\t\t}\n\t}\n\n</style>\n"],"names":[],"mappings":";;;;AAyCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,yBAAA,YAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA,EAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,KAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,QAAA,OAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAMA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AACA,UAAA,CAAA,KAAA,UAAA;AAMA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AAMA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcSettingsSection-CWQHnXy4.cjs → NcSettingsSection-B8Nn29kV.cjs}

@@ -1,6 +1,6 @@
-require('../assets/NcSettingsSection-e9XGyBq8.css');
+require('../assets/NcSettingsSection-B_Dat_E8.css');
 "use strict";
-const _l10n = require("./_l10n-ftziezFF.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 _l10n.register(_l10n.t22);
 const _sfc_main$1 = {
@@ -59,8 +59,9 @@ const _sfc_main = {
     /**
      * Limit the width of the setting's content
      *
-     * By default only the name and description have a limit, use this
-     * property to also apply this to the rest of the content.
+     * Setting this to false allows unrestricted (width) settings content.
+     * Note that the name and description have always a width limit.
+     * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)
      */
     limitWidth: {
       type: Boolean,
@@ -75,6 +76,14 @@ const _sfc_main = {
     };
   },
   computed: {
+    forceLimitWidth() {
+      var _a, _b;
+      if (this.limitWidth) {
+        return true;
+      }
+      const [major] = (_b = (_a = window._oc_config) == null ? void 0 : _a.version.split(".", 2)) != null ? _b : [];
+      return major && Number.parseInt(major) >= 30;
+    },
     hasDescription() {
       return this.description.length > 0;
     },
@@ -85,7 +94,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "settings-section", class: { "settings-section--limit-width": _vm.limitWidth } }, [_c("h2", { staticClass: "settings-section__name" }, [_vm._v(" " + _vm._s(_vm.name) + " "), _vm.hasDocUrl ? _c("a", { staticClass: "settings-section__info", attrs: { "href": _vm.docUrl, "title": _vm.docNameTranslated, "aria-label": _vm.docNameTranslated, "target": "_blank", "rel": "noreferrer nofollow" } }, [_c("HelpCircle", { attrs: { "size": 20 } })], 1) : _vm._e()]), _vm.hasDescription ? _c("p", { staticClass: "settings-section__desc" }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _vm._t("default")], 2);
+  return _c("div", { staticClass: "settings-section", class: { "settings-section--limit-width": _vm.forceLimitWidth } }, [_c("h2", { staticClass: "settings-section__name" }, [_vm._v(" " + _vm._s(_vm.name) + " "), _vm.hasDocUrl ? _c("a", { staticClass: "settings-section__info", attrs: { "href": _vm.docUrl, "title": _vm.docNameTranslated, "aria-label": _vm.docNameTranslated, "target": "_blank", "rel": "noreferrer nofollow" } }, [_c("HelpCircle", { attrs: { "size": 20 } })], 1) : _vm._e()]), _vm.hasDescription ? _c("p", { staticClass: "settings-section__desc" }, [_vm._v(" " + _vm._s(_vm.description) + " ")]) : _vm._e(), _vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -94,7 +103,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "f51cf2d3",
+  "9df5c915",
   null,
   null
 );

package/dist/chunks/NcSettingsSection-B8Nn29kV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcSettingsSection-B8Nn29kV.cjs","sources":["../../node_modules/vue-material-design-icons/HelpCircle.vue","../../src/components/NcSettingsSection/NcSettingsSection.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon help-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=\"M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"HelpCircleIcon\",\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: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component is to be used in the settings section of nextcloud.\n\n### Examples\n\n```vue\n<template>\n\t<NcSettingsSection\n\t\tname=\"Two-Factor Authentication\"\n\t\tdescription=\"Two-factor authentication can be enforced for all users and specific groups.\"\n\t\tdoc-url=\"https://docs.nextcloud.com/server/19/go.php?to=admin-2fa\">\n\t\t<p>Your settings here</p>\n\t</NcSettingsSection>\n</template>\n```\n</docs>\n\n<template>\n\t<div class=\"settings-section\" :class=\"{'settings-section--limit-width': forceLimitWidth}\">\n\t\t<h2 class=\"settings-section__name\">\n\t\t\t{{ name }}\n\t\t\t<a v-if=\"hasDocUrl\"\n\t\t\t\t:href=\"docUrl\"\n\t\t\t\tclass=\"settings-section__info\"\n\t\t\t\t:title=\"docNameTranslated\"\n\t\t\t\t:aria-label=\"docNameTranslated\"\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\trel=\"noreferrer nofollow\">\n\t\t\t\t<HelpCircle :size=\"20\" />\n\t\t\t</a>\n\t\t</h2>\n\t\t<p v-if=\"hasDescription\"\n\t\t\tclass=\"settings-section__desc\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\n\nimport HelpCircle from 'vue-material-design-icons/HelpCircle.vue'\n\nexport default {\n\tname: 'NcSettingsSection',\n\n\tcomponents: {\n\t\tHelpCircle,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Limit the width of the setting's content\n\t\t *\n\t\t * Setting this to false allows unrestricted (width) settings content.\n\t\t * Note that the name and description have always a width limit.\n\t\t * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)\n\t\t */\n\t\tlimitWidth: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tdocNameTranslated: t('External documentation for {name}', {\n\t\t\t\tname: this.name,\n\t\t\t}),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tforceLimitWidth() {\n\t\t\tif (this.limitWidth) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\t// Overwrite this on Nextcloud 30+ to always limit the width\n\t\t\tconst [major] = window._oc_config?.version.split('.', 2) ?? []\n\t\t\treturn major && Number.parseInt(major) >= 30\n\t\t},\n\n\t\thasDescription() {\n\t\t\treturn this.description.length > 0\n\t\t},\n\t\thasDocUrl() {\n\t\t\treturn this.docUrl.length > 0\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n$maxWidth: 900px;\n\n.settings-section {\n\tdisplay: block;\n\tmargin-bottom: auto;\n\tpadding: 30px;\n\n\t&:not(:last-child) {\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t&--limit-width > * {\n\t\tmax-width: $maxWidth;\n\t}\n\n\t&__name {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 20px;\n\t\tfont-weight: bold;\n\t\tmax-width: $maxWidth;\n\t}\n\n\t&__info {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\t// make sure to properly align the icon with the text\n\t\tmargin: -$icon-margin;\n\t\tmargin-left: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover, &:focus, &:active {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n\n\t&__desc {\n\t\tmargin-top: -.2em;\n\t\tmargin-bottom: 1em;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmax-width: $maxWidth;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","t"],"mappings":";;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;ACeA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mBAAAC,MAAA,EAAA,qCAAA;AAAA,QACA,MAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,kBAAA;;AACA,UAAA,KAAA,YAAA;AACA,eAAA;AAAA,MACA;AAEA,YAAA,CAAA,KAAA,KAAA,kBAAA,eAAA,mBAAA,QAAA,MAAA,KAAA,OAAA,YAAA,CAAA;AACA,aAAA,SAAA,OAAA,SAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,YAAA,SAAA;AAAA,IACA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,OAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}