npm - @nextcloud/vue - Versions diffs - 8.12.0 → 8.13.0 - Mend

@nextcloud/vue 8.12.0 → 8.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (782) hide show

package/dist/chunks/NcRichContenteditable-DdG9-ftG.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcRichContenteditable-DdG9-ftG.cjs","sources":["../../src/components/NcRichContenteditable/NcAutoCompleteResult.vue","../../src/components/NcRichContenteditable/NcRichContenteditable.vue"],"sourcesContent":["\n\n<template>\n\t<div class=\"autocomplete-result\">\n\t\t\n\t\t<div :class=\"[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null \"\n\t\t\tclass=\"autocomplete-result__icon\">\n\t\t\t<span v-if=\"status.icon\"\n\t\t\t\tclass=\"autocomplete-result__status autocomplete-result__status--icon\">\n\t\t\t\t{{ status && status.icon || '' }}\n\t\t\t</span>\n\t\t\t<NcUserStatusIcon v-else-if=\"status.status && status.status !== 'offline'\"\n\t\t\t\tclass=\"autocomplete-result__status\"\n\t\t\t\t:status=\"status.status\" />\n\t\t</div>\n\n\t\t\n\t\t<span class=\"autocomplete-result__content\">\n\t\t\t<span class=\"autocomplete-result__title\" :title=\"labelWithFallback\">\n\t\t\t\t{{ labelWithFallback }}\n\t\t\t</span>\n\t\t\t<span v-if=\"subline\" class=\"autocomplete-result__subline\">\n\t\t\t\t{{ subline }}\n\t\t\t</span>\n\t\t</span>\n\t</div>\n</template>\n\n<script>\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\n\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\n\nexport default {\n\tname: 'NcAutoCompleteResult',\n\n\tcomponents: {\n\t\tNcUserStatusIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated Use `label` instead\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: null,\n\t\t},\n\t\tsubline: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tstatus: {\n\t\t\ttype: [Object, Array],\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tcomputed: {\n\t\tavatarUrl() {\n\t\t\tif (this.iconUrl) {\n\t\t\t\treturn this.iconUrl\n\t\t\t}\n\n\t\t\treturn this.id && this.source === 'users'\n\t\t\t\t? this.getAvatarUrl(this.id, 44)\n\t\t\t\t: null\n\t\t},\n\t\t// For backwards compatibility\n\t\tlabelWithFallback() {\n\t\t\treturn this.label || this.title\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetAvatarUrl,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.autocomplete-result {\n\tdisplay: flex;\n\theight: var(--default-clickable-area);\n\tpadding: var(--default-grid-baseline) 0;\n\n\t&__icon {\n\t\tposition: relative;\n\t\tflex: 0 0 var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tmin-width: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tborder-radius: var(--default-clickable-area);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: contain;\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -4px;\n\t\tbottom: -4px;\n\t\tmin-width: 18px;\n\t\tmin-height: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tborder: 2px solid var(--color-main-background);\n\t\tborder-radius: 50%;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: 15px;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 100%;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t\tpadding-left: calc(var(--default-grid-baseline) * 2);\n\t}\n\n\t&__title,\n\t&__subline {\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__subline {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n}\n\n</style>\n","\n\n<docs>\n\n### General description\n\nThis component displays contenteditable div with automated `@` [at] autocompletion and `:` [colon] emoji autocompletion.\n\n### Examples\n\nTry mentioning user @Test01 or inserting emoji :smile\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable\n\t\t\tlabel=\"Write a comment\"\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\t\t<br>\n\n\t\t<NcRichContenteditable\n\t\t\t:value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"400\"\n\t\t\t:multiline=\"true\"\n\t\t\t:user-data=\"userData\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<h5>Output - raw</h5>\n\t\t{{ JSON.stringify(message) }}\n\n\t\t<h5>Output - preformatted</h5>\n\t\t<p class=\"pre-line\">{{ message }}</p>\n\n\t\t<h5>Output - in NcRichText with markdown support</h5>\n\t\t<NcRichText :text=\"text\" :arguments=\"userMentions\" autolink use-markdown />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet.',\n\t\t\t// You need to provide this for the inline mention to understand what to display or not.\n\t\t\t// Key should be a string with leading '@', like @Test02 or @\"Test Offline\"\n\t\t\tuserData: {\n\t\t\t\tTest01: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test01',\n\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tprimary: true,\n\t\t\t\t},\n\t\t\t\tTest02: {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test02',\n\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test@User': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t},\n\t\t\t\t'Test Offline': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: null,\n\t\t\t\t},\n\t\t\t\t'Test DND': {\n\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\tsource: 'users',\n\t\t\t\t\tstatus: {\n\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t},\n\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t},\n\t\t\t},\n\t\t\t// To display user bubbles in NcRichText, special format of data should be provided:\n\t\t\t// Key should be in curly brackets without '@' and ' ' symbols, like {user-2}\n\t\t\tuserMentions: {\n\t\t\t\t'user-1': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-2': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-3': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-4': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t'user-5': {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\treturn this.message\n\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t* Do your own query to the autocompletion api.\n\t\t* The returned data bellow is a fake data example.\n\t\t* The callback expects the same format returned by the core/autocomplete/get ocs api endpoint!\n\t\t* @see userData example above\n\t\t*\n\t\t* @param {string} search the query\n\t\t* @param {Function} callback the callback to process the results with\n\t\t*/\n\t\tautoComplete(search, callback) {\n\t\t\tcallback(Object.values(this.userData))\n\t\t},\n\t\tonSubmit() {\n\t\t\talert(this.message)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n\th5 {\n\t\tfont-weight: bold;\n\t\tmargin: 40px 0 20px 0;\n\t}\n\n\t.pre-line {\n\t\twhite-space: pre-line;\n\t}\n</style>\n```\n\n### Using public methods\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"buttons-wrapper\">\n\t\t\t<NcButton class=\"show-slash-button\" @click=\"showSlashCommands\">Slash commands</NcButton>\n\t\t\t<NcButton class=\"focus-button\" @click=\"focus\">Focus on input</NcButton>\n\t\t</div>\n\t\t<NcRichContenteditable\n\t\t\tref=\"contenteditable\"\n\t\t\tlabel=\"Write a comment\"\n\t\t\t:value.sync=\"message\"\n\t\t\t:maxlength=\"100\"/>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmessage: '**Lorem ipsum** dolor sit amet. ',\n\t\t}\n\t},\n\tmethods: {\n\t\tshowSlashCommands() {\n\t\t\tthis.$refs.contenteditable.showTribute('/')\n\t\t},\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\t.buttons-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 10px;\n\t\tmargin-bottom: 20px;\n\t}\n</style>\n```\n\n</docs>\n\n<template>\n\t<div class=\"rich-contenteditable\">\n\t\t<div :id=\"id\"\n\t\t\tref=\"contenteditable\"\n\t\t\tv-tooltip=\"tooltipString\"\n\t\t\t:class=\"{\n\t\t\t\t'rich-contenteditable__input--empty': isEmptyValue,\n\t\t\t\t'rich-contenteditable__input--multiline': multiline,\n\t\t\t\t'rich-contenteditable__input--has-label': label,\n\t\t\t\t'rich-contenteditable__input--overflow': isOverMaxlength,\n\t\t\t\t'rich-contenteditable__input--disabled': disabled,\n\t\t\t}\"\n\t\t\t:contenteditable=\"canEdit\"\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-placeholder=\"placeholder\"\n\t\t\taria-multiline=\"true\"\n\t\t\tclass=\"rich-contenteditable__input\"\n\t\t\trole=\"textbox\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\taria-autocomplete=\"inline\"\n\t\t\t:aria-controls=\"tributeId\"\n\t\t\t:aria-expanded=\"isAutocompleteOpen ? 'true' : 'false'\"\n\t\t\t:aria-activedescendant=\"autocompleteActiveId\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\"\n\t\t\t@focus=\"moveCursorToEnd\"\n\t\t\t@input=\"onInput\"\n\t\t\t@compositionstart=\"isComposing = true\"\n\t\t\t@compositionend=\"isComposing = false\"\n\t\t\t@keydown.delete=\"onDelete\"\n\t\t\t@keydown.esc.capture=\"onKeyEsc\"\n\t\t\t@keydown.enter.exact=\"onEnter\"\n\t\t\t@keydown.ctrl.enter.exact.stop.prevent=\"onCtrlEnter\"\n\t\t\t@paste=\"onPaste\"\n\t\t\t@keyup.stop.prevent.capture=\"onKeyUp\"\n\t\t\t@keydown.up.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@keydown.down.exact.stop=\"onTributeArrowKeyDown\"\n\t\t\t@tribute-active-true=\"onTributeActive(true)\"\n\t\t\t@tribute-active-false=\"onTributeActive(false)\" />\n\t\t<div v-if=\"label\"\n\t\t\t:id=\"labelId\"\n\t\t\tclass=\"rich-contenteditable__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcAutoCompleteResult from './NcAutoCompleteResult.vue'\nimport richEditor from '../../mixins/richEditor/index.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\nimport { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'\nimport { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'\n\nimport Tribute from 'tributejs/dist/tribute.esm.js'\nimport debounce from 'debounce'\nimport stringLength from 'string-length'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\n/**\n * Populate the list of text smiles we want to offer via Tribute.\n * We add the colon `:)` and colon-dash `:-)` version for each of them.\n */\nconst smilesCharacters = ['d', 'D', 'p', 'P', 's', 'S', 'x', 'X', ')', '(', '|', '/']\nconst textSmiles = []\nsmilesCharacters.forEach((char) => {\n\ttextSmiles.push(':' + char)\n\ttextSmiles.push(':-' + char)\n})\n\nexport default {\n\tname: 'NcRichContenteditable',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tmixins: [richEditor],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The ID attribute of the content editable\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => GenRandomId(7),\n\t\t},\n\n\t\t/**\n\t\t * Visual label of the contenteditable\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Write a message …'),\n\t\t},\n\n\t\tautoComplete: {\n\t\t\ttype: Function,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\tmenuContainer: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.body,\n\t\t},\n\n\t\t/**\n\t\t * Make the contenteditable looks like a textarea or not.\n\t\t * Default looks like a single-line input.\n\t\t * This also handle the default enter/shift+enter behaviour.\n\t\t * if multiline, enter = newline; otherwise enter = submit\n\t\t * shift+enter always add a new line. ctrl+enter always submits\n\t\t */\n\t\tmultiline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Is the content editable ?\n\t\t */\n\t\tcontenteditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Disable the editing and show specific disabled design\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 * Max allowed length\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable emoji autocompletion\n\t\t */\n\t\temojiAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Enable or disable link autocompletion\n\t\t */\n\t\tlinkAutocomplete: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'paste',\n\t\t'update:value',\n\t\t'smart-picker-submit',\n\t],\n\n\tsetup() {\n\t\tconst uid = GenRandomId(5)\n\t\treturn {\n\t\t\t// Constants\n\t\t\tlabelId: `nc-rich-contenteditable-${uid}-label`,\n\t\t\ttributeId: `nc-rich-contenteditable-${uid}-tribute`,\n\t\t\t/**\n\t\t\t * Non-reactive property to store Tribute instance\n\t\t\t *\n\t\t\t * @type {import('tributejs').default | null}\n\t\t\t */\n\t\t\ttribute: null,\n\t\t\ttributeStyleMutationObserver: null,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t// Represent the raw untrimmed text of the contenteditable\n\t\t\t// serves no other purpose than to check whether the\n\t\t\t// content is empty or not\n\t\t\tlocalValue: this.value,\n\n\t\t\t// Is in text composition session in IME\n\t\t\tisComposing: false,\n\n\t\t\t// Tribute autocomplete\n\t\t\tisAutocompleteOpen: false,\n\t\t\tautocompleteActiveId: undefined,\n\t\t\tisTributeIntegrationDone: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current trimmed value empty?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisEmptyValue() {\n\t\t\treturn !this.localValue || this.localValue.trim() === ''\n\t\t},\n\n\t\t/**\n\t\t * Is this Firefox? 🙄\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisFF() {\n\t\t\treturn !!navigator.userAgent.match(/firefox/i)\n\t\t},\n\n\t\t/**\n\t\t * Is the current value over maxlength?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisOverMaxlength() {\n\t\t\tif (this.isEmptyValue || !this.maxlength) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn stringLength(this.localValue) > this.maxlength\n\t\t},\n\n\t\t/**\n\t\t * Tooltip to show if characters count is over limit\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\ttooltipString() {\n\t\t\tif (!this.isOverMaxlength) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tcontent: t('Message limit of {count} characters reached', { count: this.maxlength }),\n\t\t\t\tshown: true,\n\t\t\t\ttrigger: 'manual',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Edit is only allowed when contenteditableis true and disabled is false\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcanEdit() {\n\t\t\treturn this.contenteditable && !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * Proxied native event handlers without custom event handlers\n\t\t *\n\t\t * @return {Record<string, Function>}\n\t\t */\n\t\tlisteners() {\n\t\t\t/**\n\t\t\t * All component's event handlers are set as native event handlers with by v-on directive.\n\t\t\t * The component also raised custom events manually by $emit for corresponding events.\n\t\t\t * As a result, it triggers handlers twice.\n\t\t\t * The v-on=\"listeners\" directive should only set proxied native events handler without custom events\n\t\t\t */\n\t\t\tconst listeners = { ...this.$listeners }\n\t\t\tdelete listeners.paste\n\t\t\treturn listeners\n\t\t},\n\n\t\t/**\n\t\t * Compute debounce function for the autocomplete function\n\t\t */\n\t\t debouncedAutoComplete() {\n\t\t\treturn debounce(async (search, callback) => {\n\t\t\t\tthis.autoComplete(search, callback)\n\t\t\t}, 100)\n\t\t},\n\t},\n\n\twatch: {\n\t\t/**\n\t\t * If the parent value change, we compare the plain text rendering\n\t\t * If it's different, we render everything and update the main content\n\t\t */\n\t\tvalue() {\n\t\t\tconst html = this.$refs.contenteditable.innerHTML\n\t\t\t// Compare trimmed versions to be safe\n\t\t\tif (this.value.trim() !== this.parseContent(html).trim()) {\n\t\t\t\tthis.updateContent(this.value)\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.initializeTribute()\n\n\t\t// Update default value\n\t\tthis.updateContent(this.value)\n\n\t\t// Removes the contenteditable attribute at first load if the prop is\n\t\t// set to false.\n\t\tthis.$refs.contenteditable.contentEditable = this.canEdit\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.tribute) {\n\t\t\tthis.tribute.detach(this.$refs.contenteditable)\n\t\t}\n\n\t\tif (this.tributeStyleMutationObserver) {\n\t\t\tthis.tributeStyleMutationObserver.disconnect()\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the richContenteditable\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.contenteditable.focus()\n\t\t},\n\n\t\tinitializeTribute() {\n\t\t\tconst renderMenuItem = (content) => `<div id=\"nc-rich-contenteditable-tribute-item-${GenRandomId(5)}\" class=\"${this.$style['tribute-item']}\" role=\"option\">${content}</div>`\n\n\t\t\tconst tributesCollection = []\n\t\t\ttributesCollection.push({\n\t\t\t\tfillAttr: 'id',\n\t\t\t\t// Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)\n\t\t\t\tlookup: result => `${result.id} ${result.label ?? result.title}`,\n\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\tmenuItemTemplate: item => renderMenuItem(this.renderComponentHtml(item.original, NcAutoCompleteResult)),\n\t\t\t\t// Hide if no results\n\t\t\t\tnoMatchTemplate: () => '<span class=\"hidden\"></span>',\n\t\t\t\t// Inner display of mentions\n\t\t\t\tselectTemplate: item => this.genSelectTemplate(item?.original?.id),\n\t\t\t\t// Autocompletion results\n\t\t\t\tvalues: this.debouncedAutoComplete,\n\t\t\t\t// Class added to the menu container\n\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-autocomplete']}`,\n\t\t\t\t// Class added to each list item\n\t\t\t\titemClass: this.$style['tribute-container__item'],\n\n\t\t\t})\n\n\t\t\tif (this.emojiAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: ':',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: item => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Display the raw text string for :), :-D, … for non emoji results,\n\t\t\t\t\t\t\t// instead of trying to show an image and their name.\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn renderMenuItem(`<span class=\"${this.$style['tribute-item__emoji']}\">${item.original.native}</span> :${item.original.short_name}`)\n\t\t\t\t\t},\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No emoji found'),\n\t\t\t\t\t// Display raw emoji along with its name\n\t\t\t\t\tselectTemplate: (item) => {\n\t\t\t\t\t\tif (textSmiles.includes(item.original)) {\n\t\t\t\t\t\t\t// Replace the selection with the raw text string for :), :-D, … for non emoji results\n\t\t\t\t\t\t\treturn item.original\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\temojiAddRecent(item.original)\n\t\t\t\t\t\treturn item.original.native\n\t\t\t\t\t},\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => {\n\t\t\t\t\t\tconst emojiResults = emojiSearch(text)\n\t\t\t\t\t\tif (textSmiles.includes(':' + text)) {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Prepend text smiles to the search results so that Tribute\n\t\t\t\t\t\t\t * is not interfering with normal writing, aka. \"Cocos Island Meme\".\n\t\t\t\t\t\t\t * E.g. `:)` and `:-)` got replaced by the flag of Cocos Island,\n\t\t\t\t\t\t\t * when submitting the input with Enter after writing them\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\temojiResults.unshift(':' + text)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcb(emojiResults)\n\t\t\t\t\t},\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-emoji']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (this.linkAutocomplete) {\n\t\t\t\ttributesCollection.push({\n\t\t\t\t\ttrigger: '/',\n\t\t\t\t\t// Don't use the tribute search function at all\n\t\t\t\t\t// We pass search results as values (see below)\n\t\t\t\t\tlookup: (result, query) => query,\n\t\t\t\t\trequireLeadingSpace: true,\n\t\t\t\t\t// Popup mention autocompletion templates\n\t\t\t\t\tmenuItemTemplate: item => renderMenuItem(`<img class=\"${this.$style['tribute-item__icon']}\" src=\"${item.original.icon_url}\"> <span class=\"${this.$style['tribute-item__title']}\">${item.original.title}</span>`),\n\t\t\t\t\t// Hide if no results\n\t\t\t\t\tnoMatchTemplate: () => t('No link provider found'),\n\t\t\t\t\tselectTemplate: this.getLink,\n\t\t\t\t\t// Pass the search results as values\n\t\t\t\t\tvalues: (text, cb) => cb(searchProvider(text)),\n\t\t\t\t\t// Class added to the menu container\n\t\t\t\t\tcontainerClass: `${this.$style['tribute-container']} ${this.$style['tribute-container-link']}`,\n\t\t\t\t\t// Class added to each list item\n\t\t\t\t\titemClass: this.$style['tribute-container__item'],\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.tribute = new Tribute({\n\t\t\t\tcollection: tributesCollection,\n\t\t\t\t// FIXME: tributejs doesn't support allowSpaces as a collection option, only as a global one\n\t\t\t\t// Requires to fork a library to allow spaces only in the middle of mentions ('@' trigger)\n\t\t\t\tallowSpaces: false,\n\t\t\t\t// Where to inject the menu popup\n\t\t\t\tmenuContainer: this.menuContainer,\n\t\t\t})\n\t\t\tthis.tribute.attach(this.$refs.contenteditable)\n\t\t},\n\n\t\tgetLink(item) {\n\t\t\t// there is no way to get a tribute result asynchronously\n\t\t\t// so we immediately insert a node and replace it when the result comes\n\t\t\tgetLinkWithPicker(item.original.id)\n\t\t\t\t.then(result => {\n\t\t\t\t\t// replace dummy temp element by a text node which contains the picker result\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tconst eventData = {\n\t\t\t\t\t\tresult,\n\t\t\t\t\t\tinsertText: true,\n\t\t\t\t\t}\n\t\t\t\t\tthis.$emit('smart-picker-submit', eventData)\n\t\t\t\t\tif (eventData.insertText) {\n\t\t\t\t\t\tconst newElem = document.createTextNode(result)\n\t\t\t\t\t\ttmpElem.replaceWith(newElem)\n\t\t\t\t\t\tthis.setCursorAfter(newElem)\n\t\t\t\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttmpElem.remove()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.debug('Smart picker promise rejected:', error)\n\t\t\t\t\tconst tmpElem = document.getElementById('tmp-smart-picker-result-node')\n\t\t\t\t\tthis.setCursorAfter(tmpElem)\n\t\t\t\t\ttmpElem.remove()\n\t\t\t\t})\n\t\t\treturn '<span id=\"tmp-smart-picker-result-node\"></span>'\n\t\t},\n\t\tsetCursorAfter(element) {\n\t\t\tconst range = document.createRange()\n\t\t\trange.setEndAfter(element)\n\t\t\trange.collapse()\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\tmoveCursorToEnd() {\n\t\t\tif (!document.createRange) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst range = document.createRange()\n\t\t\trange.selectNodeContents(this.$refs.contenteditable)\n\t\t\trange.collapse(false)\n\t\t\tconst selection = window.getSelection()\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(range)\n\t\t},\n\t\t/**\n\t\t * Re-emit the input event to the parent\n\t\t *\n\t\t * @param {Event} event the input event\n\t\t */\n\t\tonInput(event) {\n\t\t\tthis.updateValue(event.target.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * When pasting, sanitize the content, extract text\n\t\t * and render it again\n\t\t *\n\t\t * @param {Event} event the paste event\n\t\t * @fires Event paste the original paste event\n\t\t */\n\t\tonPaste(event) {\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tconst clipboardData = event.clipboardData\n\n\t\t\t/** The original paste event */\n\t\t\tthis.$emit('paste', event)\n\n\t\t\t// If we have a file or if we don't have any text, ignore\n\t\t\tif (clipboardData.files.length !== 0\n\t\t\t\t|| !Object.values(clipboardData.items).find(item => item?.type.startsWith('text'))) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst text = clipboardData.getData('text')\n\t\t\tconst selection = window.getSelection()\n\n\t\t\t// If no selection, replace the whole data\n\t\t\tif (!selection.rangeCount) {\n\t\t\t\tthis.updateValue(text)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Generate text and insert\n\t\t\tconst range = selection.getRangeAt(0)\n\t\t\tselection.deleteFromDocument()\n\t\t\trange.insertNode(document.createTextNode(text))\n\n\t\t\t// Put cursor at the end of the selection\n\t\t\tconst newRange = document.createRange()\n\t\t\tnewRange.setStart(event.target, range.endOffset)\n\t\t\tnewRange.collapse(true)\n\t\t\tselection.removeAllRanges()\n\t\t\tselection.addRange(newRange)\n\n\t\t\t// Propagate data\n\t\t\tthis.updateValue(this.$refs.contenteditable.innerHTML)\n\t\t},\n\n\t\t/**\n\t\t * Update the value text from the provided html\n\t\t *\n\t\t * @param {string} htmlOrText the html content (or raw text with @mentions)\n\t\t */\n\t\tupdateValue(htmlOrText) {\n\t\t\tconst text = this.parseContent(htmlOrText)\n\t\t\tthis.localValue = text\n\t\t\tthis.$emit('update:value', text)\n\t\t},\n\n\t\t/**\n\t\t * Update content and local value\n\t\t *\n\t\t * @param {string} value the message value\n\t\t */\n\t\tupdateContent(value) {\n\t\t\tconst renderedContent = this.renderContent(value)\n\t\t\tthis.$refs.contenteditable.innerHTML = renderedContent\n\t\t\tthis.localValue = value\n\t\t},\n\n\t\t/**\n\t\t * Because FF have a decade old bug preventing contenteditable=false\n\t\t * to properly be deleted on backspace, we have to hack 👀\n\t\t * https://stackoverflow.com/a/59383394/3885878\n\t\t * https://stackoverflow.com/a/30574622\n\t\t *\n\t\t * @param {Event} event the delete keydown event\n\t\t */\n\t\tonDelete(event) {\n\t\t\tif (!this.isFF || !window.getSelection) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Either disabled or edit deactivated\n\t\t\tif (!this.canEdit) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// fix backspace bug in FF\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=685445\n\t\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=1665167\n\t\t\tconst selection = window.getSelection()\n\t\t\tconst node = event.target\n\t\t\tif (!selection.isCollapsed || !selection.rangeCount) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst curRange = selection.getRangeAt(selection.rangeCount - 1)\n\t\t\tif (curRange.commonAncestorContainer.nodeType === 3 && curRange.startOffset > 0) {\n\t\t\t\t// we are in child selection. The characters of the text node is being deleted\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst range = document.createRange()\n\t\t\tif (selection.anchorNode !== node) {\n\t\t\t\t// selection is in character mode. expand it to the whole editable field\n\t\t\t\trange.selectNodeContents(node)\n\t\t\t\trange.setEndBefore(selection.anchorNode)\n\t\t\t} else if (selection.anchorOffset > 0) {\n\t\t\t\trange.setEnd(node, selection.anchorOffset)\n\t\t\t} else {\n\t\t\t\t// reached the beginning of editable field\n\t\t\t\treturn\n\t\t\t}\n\t\t\trange.setStart(node, range.endOffset - 1)\n\n\t\t\tconst previousNode = range.cloneContents().lastChild\n\t\t\tif (previousNode && previousNode.contentEditable === 'false') {\n\t\t\t\t// this is some rich content, e.g. smile. We should help the user to delete it\n\t\t\t\trange.deleteContents()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Enter key pressed. Submits if not multiline\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonEnter(event) {\n\t\t\t// Prevent submitting if multiline\n\t\t\t// or length is over maxlength\n\t\t\t// or autocompletion menu is opened\n\t\t\t// or in a text composition session with IME\n\t\t\tif (this.multiline\n\t\t\t\t|| this.isOverMaxlength\n\t\t\t\t|| this.tribute.isActive\n\t\t\t\t|| this.isComposing) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * Ctrl + Enter key pressed is used to submit\n\t\t *\n\t\t * @param {Event} event the keydown event\n\t\t */\n\t\tonCtrlEnter(event) {\n\t\t\tif (this.isOverMaxlength) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('submit', event)\n\t\t},\n\n\t\tonKeyUp(event) {\n\t\t\t// prevent tribute from opening on keyup\n\t\t\tevent.stopImmediatePropagation()\n\t\t},\n\n\t\tonKeyEsc(event) {\n\t\t\t// prevent event from bubbling when tribute is open\n\t\t\tif (this.tribute && this.isAutocompleteOpen) {\n\t\t\t\tevent.stopImmediatePropagation()\n\t\t\t\tthis.tribute.hideMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get HTML element with Tribute.js container\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeContainer() {\n\t\t\treturn this.tribute.menu\n\t\t},\n\n\t\t/**\n\t\t * Get the currently selected item element id in Tribute.js container\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tgetTributeSelectedItem() {\n\t\t\t// Tribute does not provide a way to get the active item, only the data index\n\t\t\t// So we have to find it manually by select class\n\t\t\treturn this.getTributeContainer().querySelector('.highlight [id^=\"nc-rich-contenteditable-tribute-item-\"]')\n\t\t},\n\n\t\t/**\n\t\t * Handle Tribute activation\n\t\t * @param {boolean} isActive - is active\n\t\t */\n\t\tonTributeActive(isActive) {\n\t\t\tthis.isAutocompleteOpen = isActive\n\n\t\t\tif (isActive) {\n\t\t\t\t// Tribute.js doesn't support containerClass update when new collection is open\n\t\t\t\t// The first opened collection's containerClass stays forever\n\t\t\t\t// https://github.com/zurb/tribute/issues/595\n\t\t\t\t// https://github.com/zurb/tribute/issues/627\n\t\t\t\t// So we have to manually update the class\n\t\t\t\t// The default class is \"tribute-container\"\n\t\t\t\tthis.getTributeContainer().setAttribute('class', this.tribute.current.collection.containerClass || this.$style['tribute-container'])\n\n\t\t\t\tthis.setupTributeIntegration()\n\t\t\t\t// Remove the event handler if any\n\t\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t\t} else {\n\t\t\t\t// Cancel loading data for autocomplete\n\t\t\t\t// Otherwise it could be received when another autocomplete is already opened\n\t\t\t\tthis.debouncedAutoComplete.clear()\n\n\t\t\t\t// Reset active item\n\t\t\t\tthis.autocompleteActiveId = undefined\n\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t}\n\t\t},\n\n\t\tonTributeArrowKeyDown() {\n\t\t\tif (!this.isAutocompleteOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.setTributeFocusVisible(true)\n\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t},\n\n\t\tonTributeSelectedItemWillChange() {\n\t\t\t// Wait until tribute has updated the selected item\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.autocompleteActiveId = this.getTributeSelectedItem()?.id\n\t\t\t})\n\t\t},\n\n\t\tsetupTributeIntegration() {\n\t\t\t// Setup integration only once on the first open\n\t\t\tif (this.isTributeIntegrationDone) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.isTributeIntegrationDone = true\n\n\t\t\tconst tributeContainer = this.getTributeContainer()\n\n\t\t\t// For aria-controls\n\t\t\ttributeContainer.id = this.tributeId\n\n\t\t\t// Container with options must be a listbox\n\t\t\ttributeContainer.setAttribute('role', 'listbox')\n\t\t\t// Reset list+listitem role from ul+li\n\t\t\tconst ul = tributeContainer.children[0]\n\t\t\tul.setAttribute('role', 'presentation')\n\n\t\t\t// Tribute.js does not provide a way to react on show/hide\n\t\t\t// tribute-active-true/false events are fired on initial activation, which is too early with async autoComplete function\n\t\t\tthis.tributeStyleMutationObserver = new MutationObserver(([{ target }]) => {\n\t\t\t\tif (target.style.display !== 'none') {\n\t\t\t\t\t// Tribute is visible - there will be selected item\n\t\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t\t}\n\t\t\t}).observe(tributeContainer, {\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: ['style'],\n\t\t\t})\n\n\t\t\t// Handle selecting new item on mouse selection\n\t\t\ttributeContainer.addEventListener('mousemove', () => {\n\t\t\t\tthis.setTributeFocusVisible(false)\n\t\t\t\tthis.onTributeSelectedItemWillChange()\n\t\t\t}, { passive: true })\n\t\t},\n\n\t\t/**\n\t\t * Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.\n\t\t *\n\t\t * Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class\n\t\t * to style selected options in the autocomplete listbox.\n\t\t *\n\t\t * @param {boolean} withFocusVisible - should the focus-visible class be added\n\t\t */\n\t\tsetTributeFocusVisible(withFocusVisible) {\n\t\t\tif (withFocusVisible) {\n\t\t\t\tthis.getTributeContainer().classList.add(this.$style['tribute-container--focus-visible'])\n\t\t\t} else {\n\t\t\t\tthis.getTributeContainer().classList.remove(this.$style['tribute-container--focus-visible'])\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Show tribute menu programmatically.\n\t\t * @param {string} trigger - trigger character, can be '/', '@', or ':'\n\t\t *\n\t\t * @public\n\t\t */\n\t\tshowTribute(trigger) {\n\t\t\tthis.focus()\n\t\t\tconst index = this.tribute.collection.findIndex(collection => collection.trigger === trigger)\n\t\t\tthis.tribute.showMenuForCollection(this.$refs.contenteditable, index)\n\t\t\tdocument.addEventListener('click', this.hideTribute, true)\n\t\t},\n\n\t\t/**\n\t\t * Hide tribute menu programmatically\n\t\t *\n\t\t */\n\t\thideTribute() {\n\t\t\tthis.tribute.hideMenu()\n\t\t\tdocument.removeEventListener('click', this.hideTribute, true)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Standalone styling, independent from server\n.rich-contenteditable {\n\tposition: relative;\n\twidth: auto;\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(&__input--empty) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__input {\n\t\toverflow-y: auto;\n\t\twidth: auto;\n\t\tmargin: 0;\n\t\tpadding: 8px;\n\t\tcursor: text;\n\t\twhite-space: pre-wrap;\n\t\tword-break: break-word;\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\t\toutline: none;\n\t\tbackground-color: var(--color-main-background);\n\t\tfont-family: var(--font-face);\n\t\tfont-size: inherit;\n\t\tmin-height: $clickable-area;\n\t\tmax-height: $clickable-area * 5.5;\n\n\t\t&--has-label {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\t// Cannot use :empty because of firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1513303\n\t\t&--empty:focus:before,\n\t\t&--empty:not(&--has-label):before {\n\t\t\tcontent: attr(aria-placeholder);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&[contenteditable='false']:not(&--disabled) {\n\t\t\tcursor: default;\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: transparent;\n\t\t\topacity: 1;\n\t\t\tborder-radius: 0;\n\t\t}\n\n\t\t&--multiline {\n\t\t\tmin-height: $clickable-area * 3;\n\t\t\t// No max for mutiline\n\t\t\tmax-height: none;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: $opacity_disabled;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tborder: 2px solid var(--color-background-darker);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t}\n}\n\n</style>\n\n<style lang=\"scss\" module>\n.tribute-container {\n\tz-index: 9000;\n\toverflow: auto;\n\t// Hide container root element while initialising\n\tposition: absolute;\n\tleft: -10000px;\n\t// Space it out a bit from the text\n\tmargin: var(--default-grid-baseline) 0;\n\tpadding: var(--default-grid-baseline);\n\tcolor: var(--color-text-maxcontrast);\n\tborder-radius: var(--border-radius);\n\tbackground: var(--color-main-background);\n\tbox-shadow: 0 1px 5px var(--color-box-shadow);\n\n\t.tribute-container__item {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tborder-radius: var(--border-radius);\n\t\tpadding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t\tcursor: pointer;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\t&:global(.highlight) {\n\t\t\tcolor: var(--color-main-text);\n\t\t\tbackground: var(--color-background-hover);\n\n\t\t\t&, * {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.tribute-container--focus-visible {\n\t\t:global(.highlight).tribute-container__item {\n\t\t\toutline: 2px solid var(--color-main-text) !important;\n\t\t}\n\t}\n}\n\n.tribute-container-autocomplete {\n\tmin-width: 250px;\n\tmax-width: 300px;\n\t// Show maximum 4 entries and a half to show scroll\n\t// Autocomplete height\n\t// + 2 paddings around autocomplete\n\t// + 2 paddings arouind tribute item\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((var(--default-clickable-area) + 5 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));\n}\n\n.tribute-container-emoji,\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 200px;\n\t// Show maximum 5 entries and a half to show scroll\n\t// Item height\n\t// + 2 paddings around autocomplete\n\t// + 2 paddings arouind tribute item\n\t// + 1 padding gap\n\t// And 1.5 paddings - container's padding without the last gap\n\tmax-height: calc((24px + 3 * var(--default-grid-baseline)) * 5.5 - 1.5 * var(--default-grid-baseline));\n\n\t.tribute-item {\n\t\t// Take care of long names\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\n\t\t&__emoji {\n\t\t\tpadding-right: calc(var(--default-grid-baseline) * 2);\n\t\t}\n\t}\n}\n\n.tribute-container-link {\n\tmin-width: 200px;\n\tmax-width: 300px;\n\t.tribute-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&__title {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t&__icon {\n\t\t\tmargin: auto 0;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tobject-fit: contain;\n\t\t\tpadding-right: calc(var(--default-grid-baseline) * 2);\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcUserStatusIcon","getAvatarUrl","Tooltip","richEditor","GenRandomId","t","stringLength","debounce","emojiAddRecent","emojiSearch","searchProvider","Tribute","getLinkWithPicker"],"mappings":"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"}

package/dist/chunks/{NcRichText-BDVKgmY5.cjs → NcRichText-B0CKR0jj.cjs} RENAMED Viewed

@@ -1,15 +1,15 @@
-require('../assets/NcRichText-Cdp_2wEm.css');
+require('../assets/NcRichText-BKoK9ulg.css');
 "use strict";
-const referencePickerModal = require("./referencePickerModal-m0FcnvxK.cjs");
-const autolink = require("./autolink-Bgjz08wN.cjs");
+const referencePickerModal = require("./referencePickerModal-D7ZD0avR.cjs");
+const autolink = require("./autolink-BAgL31EZ.cjs");
 const axios = require("@nextcloud/axios");
 const router = require("@nextcloud/router");
 ;/* empty css                                                                      */
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
-const NcCheckboxRadioSwitch = require("./NcCheckboxRadioSwitch-CIHl8lnP.cjs");
+const NcCheckboxRadioSwitch = require("./NcCheckboxRadioSwitch-BC-PCCMB.cjs");
 const unistUtilVisit = require("unist-util-visit");
 const unistBuilder = require("unist-builder");
-const GenRandomId = require("./GenRandomId-kBCcgMJd.cjs");
+const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const unified = require("unified");
 const remarkParse = require("remark-parse");
 const remarkGfm = require("remark-gfm");
@@ -17,6 +17,7 @@ const breaks = require("remark-breaks");
 const remark2rehype = require("remark-rehype");
 const rehype2react = require("rehype-react");
 const rehypeExternalLinks = require("rehype-external-links");
+const vueRouter = require("vue-router");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const axios__default = /* @__PURE__ */ _interopDefault(axios);
 const remarkParse__default = /* @__PURE__ */ _interopDefault(remarkParse);
@@ -148,7 +149,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns$1,
   false,
   null,
-  "84219a41",
+  "69858434",
   null,
   null
 );
@@ -353,7 +354,7 @@ const _sfc_main = {
               if (route) {
                 delete attrs.attrs.href;
                 delete attrs.attrs.target;
-                return h(referencePickerModal.Link, {
+                return h(vueRouter.RouterLink, {
                   ...attrs,
                   props: {
                     to: route
@@ -410,7 +411,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6233f030",
+  "3b61be27",
   null,
   null
 );

package/dist/chunks/NcRichText-B0CKR0jj.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcRichText-B0CKR0jj.cjs","sources":["../../src/components/NcRichText/NcReferenceList.vue","../../src/components/NcRichText/placeholder.js","../../src/components/NcRichText/NcRichText.vue"],"sourcesContent":["\n\n<template>\n\t<div v-if=\"isVisible\" class=\"widgets--list\" :class=\"{'icon-loading': loading }\">\n\t\t<div v-for=\"reference in displayedReferences\" :key=\"reference?.openGraphObject?.id\">\n\t\t\t<NcReferenceWidget :reference=\"reference\" :interactive=\"interactive\" :interactive-opt-in=\"interactiveOptIn\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport NcReferenceWidget from './NcReferenceWidget.vue'\nimport { URL_PATTERN } from './helpers.js'\n\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcReferenceList',\n\tcomponents: {\n\t\tNcReferenceWidget,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\treferenceData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t},\n\t\tdisplayFallback: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tinteractiveOptIn: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\treferences: null,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn this.loading || this.displayedReferences.length !== 0\n\t\t},\n\t\tvalues() {\n\t\t\tif (this.referenceData) {\n\t\t\t\treturn this.referenceData\n\t\t\t}\n\n\t\t\tif (this.displayFallback && !this.loading && !this.references) {\n\t\t\t\treturn [this.fallbackReference]\n\t\t\t}\n\n\t\t\treturn this.references ? Object.values(this.references) : []\n\t\t},\n\t\tfirstReference() {\n\t\t\treturn this.values[0] ?? null\n\t\t},\n\t\tdisplayedReferences() {\n\t\t\treturn this.values.slice(0, this.limit)\n\t\t},\n\t\tfallbackReference() {\n\t\t\treturn {\n\t\t\t\taccessible: true,\n\t\t\t\topenGraphObject: {\n\t\t\t\t\tid: this.text,\n\t\t\t\t\tlink: this.text,\n\t\t\t\t\tname: this.text,\n\t\t\t\t},\n\t\t\t\trichObjectType: 'open-graph',\n\t\t\t}\n\t\t},\n\t},\n\twatch: {\n\t\ttext: 'fetch',\n\t},\n\tmounted() {\n\t\tthis.fetch()\n\t},\n\tmethods: {\n\t\tfetch() {\n\t\t\tthis.loading = true\n\t\t\tif (this.referenceData) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!(new RegExp(URL_PATTERN).exec(this.text))) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.resolve().then((response) => {\n\t\t\t\tthis.references = response.data.ocs.data.references\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t}).catch((error) => {\n\t\t\t\tconsole.error('Failed to extract references', error)\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t})\n\t\t},\n\t\tresolve() {\n\t\t\tconst match = (new RegExp(URL_PATTERN).exec(this.text.trim()))\n\t\t\tif (this.limit === 1 && match) {\n\t\t\t\treturn axios.get(generateOcsUrl('references/resolve', 2) + `?reference=${encodeURIComponent(match[0])}`)\n\t\t\t}\n\n\t\t\treturn axios.post(generateOcsUrl('references/extract', 2), {\n\t\t\t\ttext: this.text,\n\t\t\t\tresolve: true,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.widget--list {\n\twidth: var(--widget-full-width, 100%);\n}\n\n.widgets--list.icon-loading {\n\tmin-height: 44px;\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { parseUrl } from './autolink.js'\n\nimport { visit } from 'unist-util-visit'\nimport { u } from 'unist-builder'\n\nexport const remarkPlaceholder = function() {\n\treturn function(ast) {\n\t\tvisit(ast, (node) => node.type === 'text', visitor)\n\n\t\t/**\n\t\t *\n\t\t * @param {object} node The node\n\t\t * @param {number} index The index of the node\n\t\t * @param {object} parent The parent node\n\t\t */\n\t\tfunction visitor(node, index, parent) {\n\t\t\tconst placeholders = node.value.split(/(\\{[a-z\\-_.0-9]+\\})/ig)\n\t\t\t\t.map((entry, index, list) => {\n\t\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t\tif (!matches) {\n\t\t\t\t\t\treturn u('text', entry)\n\t\t\t\t\t}\n\t\t\t\t\tconst [, component] = matches\n\t\t\t\t\treturn u('element', {\n\t\t\t\t\t\ttagName: `#${component}`,\n\t\t\t\t\t})\n\t\t\t\t})\n\n\t\t\tparent.children.splice(index, 1, ...placeholders)\n\t\t}\n\t}\n}\n\nexport const prepareTextNode = ({ h, context }, text) => {\n\tif (context.autolink) {\n\t\ttext = parseUrl(text)\n\t}\n\tif (Array.isArray(text)) {\n\t\treturn text.map((entry) => {\n\t\t\tif (typeof entry === 'string') {\n\t\t\t\treturn entry\n\t\t\t}\n\t\t\tconst { component, props } = entry\n\t\t\t// do not override class of NcLink\n\t\t\tconst componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'\n\t\t\treturn h(component, {\n\t\t\t\tprops,\n\t\t\t\tclass: componentClass,\n\t\t\t})\n\t\t})\n\t}\n\treturn text\n}\n","\n\n<docs>\n### General description\n\nThis component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText\n\t\t\t:class=\"{'plain-text': !useMarkdown }\"\n\t\t\t:text=\"text\" :autolink=\"autolink\" :arguments=\"args\"\n\t\t\t:use-markdown=\"useMarkdown\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: `## Hello everyone 🎉\nThe file {file} was added by {username}. Visit https://nextcloud.com to check it!\n\nSome examples for markdown syntax:\n1. **bold text**\n2. _italic text_\n3. example of \\`inline code\\`\n\n> blockquote example\n`,\n\t\t\tautolink: true,\n\t\t\tuseMarkdown: true,\n\t\t\targs: {\n\t\t\t\tfile: 'MyDocument.odt',\n\t\t\t\tusername: {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Jane Doe'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n\n.plain-text {\n\twhite-space: pre-line;\n}\n</style>\n```\n\n### Flavored Markdown\n\nThis component can support [Github Flavored Markdown](https://github.github.com/gfm/).\nIt adds such elements, as tables, task lists, strikethrough, and supports autolinks by default\n\nIt is also possible to make a rendered content interactive and listen for events\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:use-extended-markdown=\"true\"\n\t\t\t:interactive=\"true\"\n\t\t\t@interact:todo=\"handleInteraction\"/>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext: `## Try flavored markdown right now!\n\n~~strikethrough~~\n\n- [ ] task to be done\n- [x] task completed\n\nTable header | Column A | Column B\n-- | -- | --\nTable row | value A | value B\n`,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\thandleInteraction(id) {\n\t\t\t\tconst parentId = id.split('-markdown-input-')[0]\n\t\t\t\tconst index = Array.from(document.querySelectorAll(`span[id^=\"${parentId}-markdown-input-\"]`)).findIndex((el) => el.id.includes(id))\n\t\t\t\tif (index === -1 ) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet checkBoxIndex = 0\n\t\t\t\tlines = this.text.split('\\n')\n\t\t\t\tfor (let i = 0; i < lines.length; i++) {\n\t\t\t\t\tif (lines[i].includes('[ ]') || lines[i].includes('[x]')) {\n\t\t\t\t\t\tif (checkBoxIndex === index) {\n\t\t\t\t\t\t\tconst isChecked = lines[i].includes('[x]')\n\t\t\t\t\t\t\tif (isChecked) {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[x]', '[ ]')\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[ ]', '[x]')\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcheckBoxIndex++\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.text = lines.join('\\n')\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n</style>\n```\n\n### Usage with NcRichContenteditable\n\nSee [NcRichContenteditable](#/Components/NcRichContenteditable) documentation for more information\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable :value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\tplaceholder=\"Try mentioning user @Test01 or inserting emoji :smile\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useExtendedMarkdown\" type=\"checkbox\">Use extended Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:autolink=\"autolink\"\n\t\t\t:arguments=\"userMentions\"\n\t\t\t:use-markdown=\"useMarkdown\"\n\t\t\t:use-extended-markdown=\"useExtendedMarkdown\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tmessage: '',\n\t\t\t\tautolink: true,\n\t\t\t\tuseMarkdown: true,\n\t\t\t\tuseExtendedMarkdown: true,\n\t\t\t\tuserData: {\n\t\t\t\t\tTest01: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test01',\n\t\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t\tTest02: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test02',\n\t\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test@User': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test Offline': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: null,\n\t\t\t\t\t},\n\t\t\t\t\t'Test DND': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tuserMentions: {\n\t\t\t\t\t'user-1': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-2': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-3': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-4': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-5': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\t\tuser: 'Test DND',\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\t\tcomputed: {\n\t\t\ttext() {\n\t\t\t\treturn this.message\n\t\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\tautoComplete(search, callback) {\n\t\t\t\tcallback(Object.values(this.userData))\n\t\t\t},\n\t\t\tonSubmit() {\n\t\t\t\talert(this.message)\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n</docs>\n\n<script>\nimport NcReferenceList from './NcReferenceList.vue'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'\nimport { getRoute, remarkAutolink } from './autolink.js'\nimport { remarkPlaceholder, prepareTextNode } from './placeholder.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkGfm from 'remark-gfm'\nimport breaks from 'remark-breaks'\nimport remark2rehype from 'remark-rehype'\nimport rehype2react from 'rehype-react'\nimport rehypeExternalLinks from 'rehype-external-links'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcRichText',\n\tcomponents: {\n\t\tNcReferenceList,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\targuments: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {}\n\t\t\t},\n\t\t},\n\t\treferenceLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\treferenceInteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/** Provide data upfront to avoid extra http request */\n\t\treferences: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tmarkdownCssClasses: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'rich-text--external-link',\n\t\t\t\t\tol: 'rich-text--ordered-list',\n\t\t\t\t\tul: 'rich-text--un-ordered-list',\n\t\t\t\t\tli: 'rich-text--list-item',\n\t\t\t\t\tstrong: 'rich-text--strong',\n\t\t\t\t\tem: 'rich-text--italic',\n\t\t\t\t\th1: 'rich-text--heading rich-text--heading-1',\n\t\t\t\t\th2: 'rich-text--heading rich-text--heading-2',\n\t\t\t\t\th3: 'rich-text--heading rich-text--heading-3',\n\t\t\t\t\th4: 'rich-text--heading rich-text--heading-4',\n\t\t\t\t\th5: 'rich-text--heading rich-text--heading-5',\n\t\t\t\t\th6: 'rich-text--heading rich-text--heading-6',\n\t\t\t\t\thr: 'rich-text--hr',\n\t\t\t\t\ttable: 'rich-text--table',\n\t\t\t\t\tpre: 'rich-text--pre',\n\t\t\t\t\tcode: 'rich-text--code',\n\t\t\t\t\tblockquote: 'rich-text--blockquote',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tuseMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide GitHub Flavored Markdown syntax */\n\t\tuseExtendedMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide event from rendered markdown inputs */\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tautolink: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\temits: ['interact:todo'],\n\n\tdata() {\n\t\treturn {\n\t\t\tparentId: GenRandomId(5),\n\t\t}\n\t},\n\n\tmethods: {\n\t\trenderPlaintext(h) {\n\t\t\tconst context = this\n\t\t\tconst placeholders = this.text.split(/(\\{[a-z\\-_.0-9]+\\})/ig).map(function(entry, index, list) {\n\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t// just return plain string nodes as text\n\t\t\t\tif (!matches) {\n\t\t\t\t\treturn prepareTextNode({ h, context }, entry)\n\t\t\t\t}\n\t\t\t\t// return component instance if argument is an object\n\t\t\t\tconst argumentId = matches[1]\n\t\t\t\tconst argument = context.arguments[argumentId]\n\t\t\t\tif (typeof argument === 'object') {\n\t\t\t\t\tconst { component, props } = argument\n\t\t\t\t\treturn h(component, {\n\t\t\t\t\t\tprops,\n\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tif (argument) {\n\t\t\t\t\treturn h('span', { class: 'rich-text--fallback' }, argument)\n\t\t\t\t}\n\t\t\t\treturn entry\n\t\t\t})\n\t\t\treturn h('div', { class: 'rich-text--wrapper' }, [\n\t\t\t\th('div', {}, placeholders.flat()),\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t\trenderMarkdown(h) {\n\t\t\tconst renderedMarkdown = unified()\n\t\t\t\t.use(remarkParse)\n\t\t\t\t.use(remarkAutolink, {\n\t\t\t\t\tautolink: this.autolink,\n\t\t\t\t\tuseMarkdown: this.useMarkdown,\n\t\t\t\t\tuseExtendedMarkdown: this.useExtendedMarkdown,\n\t\t\t\t})\n\t\t\t\t.use(this.useExtendedMarkdown ? remarkGfm : undefined)\n\t\t\t\t.use(breaks)\n\t\t\t\t.use(remark2rehype, {\n\t\t\t\t\thandlers: {\n\t\t\t\t\t\tcomponent(toHast, node) {\n\t\t\t\t\t\t\treturn toHast(node, node.component, { value: node.value })\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t\t// .use(rehypeAddClasses, this.markdownCssClasses)\n\t\t\t\t.use(remarkPlaceholder)\n\t\t\t\t.use(rehypeExternalLinks, {\n\t\t\t\t\ttarget: '_blank',\n\t\t\t\t\trel: ['noopener noreferrer'],\n\t\t\t\t})\n\t\t\t\t.use(rehype2react, {\n\t\t\t\t\tcreateElement: (tag, attrs, children) => {\n\t\t\t\t\t\t// unescape special symbol \"<\" for simple text nodes\n\t\t\t\t\t\tchildren = children?.map(child => typeof child === 'string'\n\t\t\t\t\t\t\t? child.replace(/</gmi, '<')\n\t\t\t\t\t\t\t: child,\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tif (!tag.startsWith('#')) {\n\t\t\t\t\t\t\tif (this.useExtendedMarkdown) {\n\t\t\t\t\t\t\t\tlet nestedNode = null\n\t\t\t\t\t\t\t\tif (tag === 'li' && Array.isArray(children)\n\t\t\t\t\t\t\t\t\t&& children[0].tag === 'input'\n\t\t\t\t\t\t\t\t\t&& children[0].data.attrs.type === 'checkbox') {\n\t\t\t\t\t\t\t\t\tconst [inputNode, ...labelParts] = children\n\n\t\t\t\t\t\t\t\t\tconst nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))\n\t\t\t\t\t\t\t\t\tif (nestedNodeIndex !== -1) {\n\t\t\t\t\t\t\t\t\t\tnestedNode = labelParts[nestedNodeIndex]\n\t\t\t\t\t\t\t\t\t\tlabelParts.splice(nestedNodeIndex)\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tconst id = this.parentId + '-markdown-input-' + GenRandomId(5)\n\t\t\t\t\t\t\t\t\tconst inputComponent = h(NcCheckboxRadioSwitch, {\n\t\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\t\t...inputNode.data.attrs,\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: !this.interactive,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\t\t\t\t\t'update:checked': () => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.$emit('interact:todo', id)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, labelParts)\n\n\t\t\t\t\t\t\t\t\treturn h(tag, attrs, [inputComponent, nestedNode])\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (tag === 'a') {\n\t\t\t\t\t\t\t\tconst route = getRoute(this.$router, attrs.attrs.href)\n\t\t\t\t\t\t\t\tif (route) {\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.href\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.target\n\n\t\t\t\t\t\t\t\t\treturn h(RouterLink, {\n\t\t\t\t\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn h(tag, attrs, children)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst placeholder = this.arguments[tag.slice(1)]\n\t\t\t\t\t\tif (!placeholder) {\n\t\t\t\t\t\t\treturn h('span', { ...{ attrs }, ...{ class: 'rich-text--fallback' } }, [`{${tag.slice(1)}}`])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!placeholder.component) {\n\t\t\t\t\t\t\treturn h('span', attrs, [placeholder])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn h(\n\t\t\t\t\t\t\tplaceholder.component,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tattrs,\n\t\t\t\t\t\t\t\tprops: placeholder.props,\n\t\t\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t)\n\t\t\t\t\t},\n\t\t\t\t\tprefix: false,\n\t\t\t\t})\n\t\t\t\t.processSync(this.text\n\t\t\t\t\t// escape special symbol \"<\" to not treat text as HTML\n\t\t\t\t\t.replace(/</gmi, '<')\n\t\t\t\t\t// unescape special symbol \">\" to parse blockquotes\n\t\t\t\t\t.replace(/>/gmi, '>'),\n\t\t\t\t)\n\t\t\t\t.result\n\n\t\t\treturn h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [\n\t\t\t\trenderedMarkdown,\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t},\n\trender(h) {\n\t\treturn this.useMarkdown || this.useExtendedMarkdown\n\t\t\t? this.renderMarkdown(h)\n\t\t\t: this.renderPlaintext(h)\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n/* stylelint-disable-next-line scss/at-import-partial-extension */\n@import './richtext.scss';\n\na:not(.rich-text--component) {\n\ttext-decoration: underline;\n}\n\n</style>\n"],"names":["_sfc_main","NcReferenceWidget","URL_PATTERN","axios","generateOcsUrl","visit","index","u","parseUrl","GenRandomId","unified","remarkParse","remarkAutolink","remarkGfm","breaks","remark2rehype","rehypeExternalLinks","rehype2react","NcCheckboxRadioSwitch","getRoute","RouterLink"],"mappings":"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"}

package/dist/chunks/{NcRichText-BT4VjvXi.mjs → NcRichText-D3knHFLh.mjs} RENAMED Viewed

@@ -1,14 +1,14 @@
-import '../assets/NcRichText-Cdp_2wEm.css';
-import { N as NcReferenceWidget, L as Link } from "./referencePickerModal-CFPdv-m1.mjs";
-import { U as URL_PATTERN, p as parseUrl, r as remarkAutolink, g as getRoute } from "./autolink-DA7VzS8Y.mjs";
+import '../assets/NcRichText-BKoK9ulg.css';
+import { N as NcReferenceWidget } from "./referencePickerModal-CGhrhjCk.mjs";
+import { U as URL_PATTERN, p as parseUrl, r as remarkAutolink, g as getRoute } from "./autolink-cbuFALXr.mjs";
 import axios from "@nextcloud/axios";
 import { generateOcsUrl } from "@nextcloud/router";
 /* empty css                                                                     */
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-CpupDtee.mjs";
+import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-08IiPYnO.mjs";
 import { visit } from "unist-util-visit";
 import { u } from "unist-builder";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
@@ -16,6 +16,7 @@ import breaks from "remark-breaks";
 import remark2rehype from "remark-rehype";
 import rehype2react from "rehype-react";
 import rehypeExternalLinks from "rehype-external-links";
+import { RouterLink } from "vue-router";
 const _sfc_main$1 = {
   name: "NcReferenceList",
   components: {
@@ -139,7 +140,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$1,
   false,
   null,
-  "84219a41",
+  "69858434",
   null,
   null
 );
@@ -344,7 +345,7 @@ const _sfc_main = {
               if (route) {
                 delete attrs.attrs.href;
                 delete attrs.attrs.target;
-                return h(Link, {
+                return h(RouterLink, {
                   ...attrs,
                   props: {
                     to: route
@@ -401,7 +402,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6233f030",
+  "3b61be27",
   null,
   null
 );

package/dist/chunks/NcRichText-D3knHFLh.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcRichText-D3knHFLh.mjs","sources":["../../src/components/NcRichText/NcReferenceList.vue","../../src/components/NcRichText/placeholder.js","../../src/components/NcRichText/NcRichText.vue"],"sourcesContent":["\n\n<template>\n\t<div v-if=\"isVisible\" class=\"widgets--list\" :class=\"{'icon-loading': loading }\">\n\t\t<div v-for=\"reference in displayedReferences\" :key=\"reference?.openGraphObject?.id\">\n\t\t\t<NcReferenceWidget :reference=\"reference\" :interactive=\"interactive\" :interactive-opt-in=\"interactiveOptIn\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport NcReferenceWidget from './NcReferenceWidget.vue'\nimport { URL_PATTERN } from './helpers.js'\n\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcReferenceList',\n\tcomponents: {\n\t\tNcReferenceWidget,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\treferenceData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t},\n\t\tdisplayFallback: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tinteractiveOptIn: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\treferences: null,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn this.loading || this.displayedReferences.length !== 0\n\t\t},\n\t\tvalues() {\n\t\t\tif (this.referenceData) {\n\t\t\t\treturn this.referenceData\n\t\t\t}\n\n\t\t\tif (this.displayFallback && !this.loading && !this.references) {\n\t\t\t\treturn [this.fallbackReference]\n\t\t\t}\n\n\t\t\treturn this.references ? Object.values(this.references) : []\n\t\t},\n\t\tfirstReference() {\n\t\t\treturn this.values[0] ?? null\n\t\t},\n\t\tdisplayedReferences() {\n\t\t\treturn this.values.slice(0, this.limit)\n\t\t},\n\t\tfallbackReference() {\n\t\t\treturn {\n\t\t\t\taccessible: true,\n\t\t\t\topenGraphObject: {\n\t\t\t\t\tid: this.text,\n\t\t\t\t\tlink: this.text,\n\t\t\t\t\tname: this.text,\n\t\t\t\t},\n\t\t\t\trichObjectType: 'open-graph',\n\t\t\t}\n\t\t},\n\t},\n\twatch: {\n\t\ttext: 'fetch',\n\t},\n\tmounted() {\n\t\tthis.fetch()\n\t},\n\tmethods: {\n\t\tfetch() {\n\t\t\tthis.loading = true\n\t\t\tif (this.referenceData) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!(new RegExp(URL_PATTERN).exec(this.text))) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.resolve().then((response) => {\n\t\t\t\tthis.references = response.data.ocs.data.references\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t}).catch((error) => {\n\t\t\t\tconsole.error('Failed to extract references', error)\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t})\n\t\t},\n\t\tresolve() {\n\t\t\tconst match = (new RegExp(URL_PATTERN).exec(this.text.trim()))\n\t\t\tif (this.limit === 1 && match) {\n\t\t\t\treturn axios.get(generateOcsUrl('references/resolve', 2) + `?reference=${encodeURIComponent(match[0])}`)\n\t\t\t}\n\n\t\t\treturn axios.post(generateOcsUrl('references/extract', 2), {\n\t\t\t\ttext: this.text,\n\t\t\t\tresolve: true,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.widget--list {\n\twidth: var(--widget-full-width, 100%);\n}\n\n.widgets--list.icon-loading {\n\tmin-height: 44px;\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { parseUrl } from './autolink.js'\n\nimport { visit } from 'unist-util-visit'\nimport { u } from 'unist-builder'\n\nexport const remarkPlaceholder = function() {\n\treturn function(ast) {\n\t\tvisit(ast, (node) => node.type === 'text', visitor)\n\n\t\t/**\n\t\t *\n\t\t * @param {object} node The node\n\t\t * @param {number} index The index of the node\n\t\t * @param {object} parent The parent node\n\t\t */\n\t\tfunction visitor(node, index, parent) {\n\t\t\tconst placeholders = node.value.split(/(\\{[a-z\\-_.0-9]+\\})/ig)\n\t\t\t\t.map((entry, index, list) => {\n\t\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t\tif (!matches) {\n\t\t\t\t\t\treturn u('text', entry)\n\t\t\t\t\t}\n\t\t\t\t\tconst [, component] = matches\n\t\t\t\t\treturn u('element', {\n\t\t\t\t\t\ttagName: `#${component}`,\n\t\t\t\t\t})\n\t\t\t\t})\n\n\t\t\tparent.children.splice(index, 1, ...placeholders)\n\t\t}\n\t}\n}\n\nexport const prepareTextNode = ({ h, context }, text) => {\n\tif (context.autolink) {\n\t\ttext = parseUrl(text)\n\t}\n\tif (Array.isArray(text)) {\n\t\treturn text.map((entry) => {\n\t\t\tif (typeof entry === 'string') {\n\t\t\t\treturn entry\n\t\t\t}\n\t\t\tconst { component, props } = entry\n\t\t\t// do not override class of NcLink\n\t\t\tconst componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'\n\t\t\treturn h(component, {\n\t\t\t\tprops,\n\t\t\t\tclass: componentClass,\n\t\t\t})\n\t\t})\n\t}\n\treturn text\n}\n","\n\n<docs>\n### General description\n\nThis component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText\n\t\t\t:class=\"{'plain-text': !useMarkdown }\"\n\t\t\t:text=\"text\" :autolink=\"autolink\" :arguments=\"args\"\n\t\t\t:use-markdown=\"useMarkdown\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: `## Hello everyone 🎉\nThe file {file} was added by {username}. Visit https://nextcloud.com to check it!\n\nSome examples for markdown syntax:\n1. **bold text**\n2. _italic text_\n3. example of \\`inline code\\`\n\n> blockquote example\n`,\n\t\t\tautolink: true,\n\t\t\tuseMarkdown: true,\n\t\t\targs: {\n\t\t\t\tfile: 'MyDocument.odt',\n\t\t\t\tusername: {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Jane Doe'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n\n.plain-text {\n\twhite-space: pre-line;\n}\n</style>\n```\n\n### Flavored Markdown\n\nThis component can support [Github Flavored Markdown](https://github.github.com/gfm/).\nIt adds such elements, as tables, task lists, strikethrough, and supports autolinks by default\n\nIt is also possible to make a rendered content interactive and listen for events\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:use-extended-markdown=\"true\"\n\t\t\t:interactive=\"true\"\n\t\t\t@interact:todo=\"handleInteraction\"/>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext: `## Try flavored markdown right now!\n\n~~strikethrough~~\n\n- [ ] task to be done\n- [x] task completed\n\nTable header | Column A | Column B\n-- | -- | --\nTable row | value A | value B\n`,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\thandleInteraction(id) {\n\t\t\t\tconst parentId = id.split('-markdown-input-')[0]\n\t\t\t\tconst index = Array.from(document.querySelectorAll(`span[id^=\"${parentId}-markdown-input-\"]`)).findIndex((el) => el.id.includes(id))\n\t\t\t\tif (index === -1 ) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet checkBoxIndex = 0\n\t\t\t\tlines = this.text.split('\\n')\n\t\t\t\tfor (let i = 0; i < lines.length; i++) {\n\t\t\t\t\tif (lines[i].includes('[ ]') || lines[i].includes('[x]')) {\n\t\t\t\t\t\tif (checkBoxIndex === index) {\n\t\t\t\t\t\t\tconst isChecked = lines[i].includes('[x]')\n\t\t\t\t\t\t\tif (isChecked) {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[x]', '[ ]')\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[ ]', '[x]')\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcheckBoxIndex++\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.text = lines.join('\\n')\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n</style>\n```\n\n### Usage with NcRichContenteditable\n\nSee [NcRichContenteditable](#/Components/NcRichContenteditable) documentation for more information\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable :value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\tplaceholder=\"Try mentioning user @Test01 or inserting emoji :smile\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useExtendedMarkdown\" type=\"checkbox\">Use extended Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:autolink=\"autolink\"\n\t\t\t:arguments=\"userMentions\"\n\t\t\t:use-markdown=\"useMarkdown\"\n\t\t\t:use-extended-markdown=\"useExtendedMarkdown\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tmessage: '',\n\t\t\t\tautolink: true,\n\t\t\t\tuseMarkdown: true,\n\t\t\t\tuseExtendedMarkdown: true,\n\t\t\t\tuserData: {\n\t\t\t\t\tTest01: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test01',\n\t\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t\tTest02: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test02',\n\t\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test@User': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test Offline': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: null,\n\t\t\t\t\t},\n\t\t\t\t\t'Test DND': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tuserMentions: {\n\t\t\t\t\t'user-1': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-2': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-3': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-4': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-5': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\t\tuser: 'Test DND',\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\t\tcomputed: {\n\t\t\ttext() {\n\t\t\t\treturn this.message\n\t\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\tautoComplete(search, callback) {\n\t\t\t\tcallback(Object.values(this.userData))\n\t\t\t},\n\t\t\tonSubmit() {\n\t\t\t\talert(this.message)\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n</docs>\n\n<script>\nimport NcReferenceList from './NcReferenceList.vue'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'\nimport { getRoute, remarkAutolink } from './autolink.js'\nimport { remarkPlaceholder, prepareTextNode } from './placeholder.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkGfm from 'remark-gfm'\nimport breaks from 'remark-breaks'\nimport remark2rehype from 'remark-rehype'\nimport rehype2react from 'rehype-react'\nimport rehypeExternalLinks from 'rehype-external-links'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcRichText',\n\tcomponents: {\n\t\tNcReferenceList,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\targuments: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {}\n\t\t\t},\n\t\t},\n\t\treferenceLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\treferenceInteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/** Provide data upfront to avoid extra http request */\n\t\treferences: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tmarkdownCssClasses: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'rich-text--external-link',\n\t\t\t\t\tol: 'rich-text--ordered-list',\n\t\t\t\t\tul: 'rich-text--un-ordered-list',\n\t\t\t\t\tli: 'rich-text--list-item',\n\t\t\t\t\tstrong: 'rich-text--strong',\n\t\t\t\t\tem: 'rich-text--italic',\n\t\t\t\t\th1: 'rich-text--heading rich-text--heading-1',\n\t\t\t\t\th2: 'rich-text--heading rich-text--heading-2',\n\t\t\t\t\th3: 'rich-text--heading rich-text--heading-3',\n\t\t\t\t\th4: 'rich-text--heading rich-text--heading-4',\n\t\t\t\t\th5: 'rich-text--heading rich-text--heading-5',\n\t\t\t\t\th6: 'rich-text--heading rich-text--heading-6',\n\t\t\t\t\thr: 'rich-text--hr',\n\t\t\t\t\ttable: 'rich-text--table',\n\t\t\t\t\tpre: 'rich-text--pre',\n\t\t\t\t\tcode: 'rich-text--code',\n\t\t\t\t\tblockquote: 'rich-text--blockquote',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tuseMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide GitHub Flavored Markdown syntax */\n\t\tuseExtendedMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide event from rendered markdown inputs */\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tautolink: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\temits: ['interact:todo'],\n\n\tdata() {\n\t\treturn {\n\t\t\tparentId: GenRandomId(5),\n\t\t}\n\t},\n\n\tmethods: {\n\t\trenderPlaintext(h) {\n\t\t\tconst context = this\n\t\t\tconst placeholders = this.text.split(/(\\{[a-z\\-_.0-9]+\\})/ig).map(function(entry, index, list) {\n\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t// just return plain string nodes as text\n\t\t\t\tif (!matches) {\n\t\t\t\t\treturn prepareTextNode({ h, context }, entry)\n\t\t\t\t}\n\t\t\t\t// return component instance if argument is an object\n\t\t\t\tconst argumentId = matches[1]\n\t\t\t\tconst argument = context.arguments[argumentId]\n\t\t\t\tif (typeof argument === 'object') {\n\t\t\t\t\tconst { component, props } = argument\n\t\t\t\t\treturn h(component, {\n\t\t\t\t\t\tprops,\n\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tif (argument) {\n\t\t\t\t\treturn h('span', { class: 'rich-text--fallback' }, argument)\n\t\t\t\t}\n\t\t\t\treturn entry\n\t\t\t})\n\t\t\treturn h('div', { class: 'rich-text--wrapper' }, [\n\t\t\t\th('div', {}, placeholders.flat()),\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t\trenderMarkdown(h) {\n\t\t\tconst renderedMarkdown = unified()\n\t\t\t\t.use(remarkParse)\n\t\t\t\t.use(remarkAutolink, {\n\t\t\t\t\tautolink: this.autolink,\n\t\t\t\t\tuseMarkdown: this.useMarkdown,\n\t\t\t\t\tuseExtendedMarkdown: this.useExtendedMarkdown,\n\t\t\t\t})\n\t\t\t\t.use(this.useExtendedMarkdown ? remarkGfm : undefined)\n\t\t\t\t.use(breaks)\n\t\t\t\t.use(remark2rehype, {\n\t\t\t\t\thandlers: {\n\t\t\t\t\t\tcomponent(toHast, node) {\n\t\t\t\t\t\t\treturn toHast(node, node.component, { value: node.value })\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t\t// .use(rehypeAddClasses, this.markdownCssClasses)\n\t\t\t\t.use(remarkPlaceholder)\n\t\t\t\t.use(rehypeExternalLinks, {\n\t\t\t\t\ttarget: '_blank',\n\t\t\t\t\trel: ['noopener noreferrer'],\n\t\t\t\t})\n\t\t\t\t.use(rehype2react, {\n\t\t\t\t\tcreateElement: (tag, attrs, children) => {\n\t\t\t\t\t\t// unescape special symbol \"<\" for simple text nodes\n\t\t\t\t\t\tchildren = children?.map(child => typeof child === 'string'\n\t\t\t\t\t\t\t? child.replace(/</gmi, '<')\n\t\t\t\t\t\t\t: child,\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tif (!tag.startsWith('#')) {\n\t\t\t\t\t\t\tif (this.useExtendedMarkdown) {\n\t\t\t\t\t\t\t\tlet nestedNode = null\n\t\t\t\t\t\t\t\tif (tag === 'li' && Array.isArray(children)\n\t\t\t\t\t\t\t\t\t&& children[0].tag === 'input'\n\t\t\t\t\t\t\t\t\t&& children[0].data.attrs.type === 'checkbox') {\n\t\t\t\t\t\t\t\t\tconst [inputNode, ...labelParts] = children\n\n\t\t\t\t\t\t\t\t\tconst nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))\n\t\t\t\t\t\t\t\t\tif (nestedNodeIndex !== -1) {\n\t\t\t\t\t\t\t\t\t\tnestedNode = labelParts[nestedNodeIndex]\n\t\t\t\t\t\t\t\t\t\tlabelParts.splice(nestedNodeIndex)\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tconst id = this.parentId + '-markdown-input-' + GenRandomId(5)\n\t\t\t\t\t\t\t\t\tconst inputComponent = h(NcCheckboxRadioSwitch, {\n\t\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\t\t...inputNode.data.attrs,\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: !this.interactive,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\t\t\t\t\t'update:checked': () => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.$emit('interact:todo', id)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, labelParts)\n\n\t\t\t\t\t\t\t\t\treturn h(tag, attrs, [inputComponent, nestedNode])\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (tag === 'a') {\n\t\t\t\t\t\t\t\tconst route = getRoute(this.$router, attrs.attrs.href)\n\t\t\t\t\t\t\t\tif (route) {\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.href\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.target\n\n\t\t\t\t\t\t\t\t\treturn h(RouterLink, {\n\t\t\t\t\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn h(tag, attrs, children)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst placeholder = this.arguments[tag.slice(1)]\n\t\t\t\t\t\tif (!placeholder) {\n\t\t\t\t\t\t\treturn h('span', { ...{ attrs }, ...{ class: 'rich-text--fallback' } }, [`{${tag.slice(1)}}`])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!placeholder.component) {\n\t\t\t\t\t\t\treturn h('span', attrs, [placeholder])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn h(\n\t\t\t\t\t\t\tplaceholder.component,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tattrs,\n\t\t\t\t\t\t\t\tprops: placeholder.props,\n\t\t\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t)\n\t\t\t\t\t},\n\t\t\t\t\tprefix: false,\n\t\t\t\t})\n\t\t\t\t.processSync(this.text\n\t\t\t\t\t// escape special symbol \"<\" to not treat text as HTML\n\t\t\t\t\t.replace(/</gmi, '<')\n\t\t\t\t\t// unescape special symbol \">\" to parse blockquotes\n\t\t\t\t\t.replace(/>/gmi, '>'),\n\t\t\t\t)\n\t\t\t\t.result\n\n\t\t\treturn h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [\n\t\t\t\trenderedMarkdown,\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t},\n\trender(h) {\n\t\treturn this.useMarkdown || this.useExtendedMarkdown\n\t\t\t? this.renderMarkdown(h)\n\t\t\t: this.renderPlaintext(h)\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n/* stylelint-disable-next-line scss/at-import-partial-extension */\n@import './richtext.scss';\n\na:not(.rich-text--component) {\n\ttext-decoration: underline;\n}\n\n</style>\n"],"names":["_sfc_main","index"],"mappings":"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"}

package/dist/chunks/NcSavingIndicatorIcon-Bhy7wcoT.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcSavingIndicatorIcon-Bhy7wcoT.mjs","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":[],"mappings":";;~~AAwFA~~,MAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcSavingIndicatorIcon-Bhy7wcoT.mjs","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":[],"mappings":";;AAyEA,MAAA,YAAA,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/NcSavingIndicatorIcon-BzKAIkhk.cjs.map CHANGED Viewed

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"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-CNm4fmR6.mjs → NcSelect-BVltxWdw.mjs} RENAMED Viewed

@@ -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-hRR5zBTZ.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-CTTJYWzN.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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcSelect-BVltxWdw.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["\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\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\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-DckQCxxX.cjs → NcSelect-BXjYMf6X.cjs} RENAMED Viewed

@@ -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-BYPqjHzt.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-44A7fm62.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);