@nextcloud/vue 8.25.1 → 8.26.0

package/dist/chunks/NcSelectUsers-BQO_sQJ8.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcSelectUsers-BQO_sQJ8.mjs","sources":["../../src/components/NcSelectUsers/NcSelectUsers.vue"],"sourcesContent":["<!--\n\t- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n\t- SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Nextcloud user picker\n\n#### 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<NcSelectUsers v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport svgAccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport svgEmail from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\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\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\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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\tkeepOpen: true,\n\t\t\tmultiple: 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},\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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<script setup>\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\nimport createElementId from '../../utils/GenRandomId.js'\n\nimport NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'\nimport NcSelect from '../NcSelect/index.js'\n\nconst props = defineProps({\n\t/**\n\t * `aria-label` for the clear input button\n\t */\n\tariaLabelClearSelected: {\n\t\ttype: String,\n\t\tdefault: t('Clear selected'),\n\t},\n\n\t/**\n\t * `aria-label` for the listbox element\n\t */\n\tariaLabelListbox: {\n\t\ttype: String,\n\t\tdefault: t('Options'),\n\t},\n\n\t/**\n\t * Allows to customize the `aria-label` for the deselect-option button\n\t * The default is \"Deselect \" + optionLabel\n\t * @type {(optionLabel: string) => string}\n\t */\n\tariaLabelDeselectOption: {\n\t\ttype: Function,\n\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t},\n\n\t/**\n\t * Keep the dropdown open after selecting an entry.\n\t */\n\tkeepOpen: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Disable the component\n\t */\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Callback to determine if the provided option should match the current search text.\n\t * Used to determine if the option should be displayed.\n\t *\n\t * By default it filters by the `displayName` and `subname` properties of the user\n\t * option object unless this prop is set explicitly\n\t */\n\tfilterBy: {\n\t\ttype: Function,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Input element id\n\t */\n\tinputId: {\n\t\ttype: String,\n\t\tdefault: () => createElementId(),\n\t},\n\n\t/**\n\t * Visible label for the input element\n\t *\n\t * @default 'Select account'\n\t */\n\tinputLabel: {\n\t\ttype: String,\n\t\tdefault: t('Select account'),\n\t},\n\n\t/**\n\t * Pass true if you are using an external label.\n\t * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.\n\t */\n\tlabelOutside: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Show a loading icon.\n\t *\n\t * @default false\n\t */\n\tloading: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Allow selection of multiple options\n\t *\n\t * @default false\n\t */\n\tmultiple: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Disable automatic wrapping when selected options overflow the width.\n\t *\n\t * @default false\n\t */\n\tnoWrap: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Array of users.\n\t *\n\t * @type {{displayName: string, user: string, subname?: string, iconSvg?: string, iconName?: string, isGuest?: boolean, isNoUser?: boolean}[]}\n\t */\n\toptions: {\n\t\ttype: Array,\n\t\tdefault: () => [],\n\t},\n\n\t/**\n\t * Placeholder text.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Enable if a value is required for native form validation\n\t */\n\trequired: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Currently selected value\n\t *\n\t * The `v-model` directive may be used for two-way data binding\n\t */\n\tmodelValue: {\n\t\ttype: Object,\n\t\tdefault: null,\n\t},\n})\n\ndefineEmits(['update:modelValue'])\n\nconst search = ref('')\n\n// Avatar size so the component has the same size as Nc*Field\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst avatarSize = clickableArea - 2 * gridBaseLine\n\n/**\n * Filter function to search users.\n *\n * @param {{subname: string}} option - The option to check\n * @param {string} label - The label of the option\n * @param {string} search - The current search string\n */\nfunction localFilterBy(option, label, search) {\n\tif (props.filterBy) {\n\t\treturn props.filterBy\n\t}\n\n\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\tconst match = search.match(EMAIL_NOTATION)\n\tconst subname = option.subname?.toLocaleLowerCase() ?? ''\n\treturn (match && subname.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t|| (`${label} ${option.subname}`\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n}\n</script>\n\n<template>\n\t<NcSelect class=\"nc-select-users\"\n\t\tv-bind=\"$props\"\n\t\t:filter-by=\"localFilterBy\"\n\t\tlabel=\"displayName\"\n\t\t@search=\"search = $event\"\n\t\t@update:model-value=\"$emit('update:modelValue', $event)\">\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-bind=\"option\"\n\t\t\t\t:avatar-size=\"32\"\n\t\t\t\t:name=\"option.displayName\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"avatarSize\"\n\t\t\t\t:name=\"selectedOption.displayName\"\n\t\t\t\tno-margin\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<style scoped lang=\"css\">\n.nc-select-users :deep(.vs__selected) {\n\tpadding-inline: 0 5px !important;\n}\n</style>\n"],"names":["search"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqUA,UAAM,SAAS,IAAI,EAAE;AAGrB,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AASvC,aAAS,cAAc,QAAQ,OAAOA,SAAQ;AAC7C,UAAI,MAAM,UAAU;AACnB,eAAO,MAAM;AAAA,MACf;AAGC,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAiB,KAAM;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAE,kBAAmB,CAAA,IAAI,MAC5D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,kBAAiB,EACjB,QAAQA,QAAO,kBAAmB,CAAA,IAAI;AAAA,IAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcSelectUsers-yQZZACfZ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcSelectUsers-yQZZACfZ.cjs","sources":["../../src/components/NcSelectUsers/NcSelectUsers.vue"],"sourcesContent":["<!--\n\t- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n\t- SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Nextcloud user picker\n\n#### 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<NcSelectUsers v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport svgAccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport svgEmail from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\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\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\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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\tkeepOpen: true,\n\t\t\tmultiple: 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},\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},\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},\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},\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},\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\ticonSvg: svgAccountGroup,\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: svgEmail,\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<script setup>\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\nimport createElementId from '../../utils/GenRandomId.js'\n\nimport NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'\nimport NcSelect from '../NcSelect/index.js'\n\nconst props = defineProps({\n\t/**\n\t * `aria-label` for the clear input button\n\t */\n\tariaLabelClearSelected: {\n\t\ttype: String,\n\t\tdefault: t('Clear selected'),\n\t},\n\n\t/**\n\t * `aria-label` for the listbox element\n\t */\n\tariaLabelListbox: {\n\t\ttype: String,\n\t\tdefault: t('Options'),\n\t},\n\n\t/**\n\t * Allows to customize the `aria-label` for the deselect-option button\n\t * The default is \"Deselect \" + optionLabel\n\t * @type {(optionLabel: string) => string}\n\t */\n\tariaLabelDeselectOption: {\n\t\ttype: Function,\n\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t},\n\n\t/**\n\t * Keep the dropdown open after selecting an entry.\n\t */\n\tkeepOpen: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Disable the component\n\t */\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Callback to determine if the provided option should match the current search text.\n\t * Used to determine if the option should be displayed.\n\t *\n\t * By default it filters by the `displayName` and `subname` properties of the user\n\t * option object unless this prop is set explicitly\n\t */\n\tfilterBy: {\n\t\ttype: Function,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Input element id\n\t */\n\tinputId: {\n\t\ttype: String,\n\t\tdefault: () => createElementId(),\n\t},\n\n\t/**\n\t * Visible label for the input element\n\t *\n\t * @default 'Select account'\n\t */\n\tinputLabel: {\n\t\ttype: String,\n\t\tdefault: t('Select account'),\n\t},\n\n\t/**\n\t * Pass true if you are using an external label.\n\t * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.\n\t */\n\tlabelOutside: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Show a loading icon.\n\t *\n\t * @default false\n\t */\n\tloading: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Allow selection of multiple options\n\t *\n\t * @default false\n\t */\n\tmultiple: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Disable automatic wrapping when selected options overflow the width.\n\t *\n\t * @default false\n\t */\n\tnoWrap: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Array of users.\n\t *\n\t * @type {{displayName: string, user: string, subname?: string, iconSvg?: string, iconName?: string, isGuest?: boolean, isNoUser?: boolean}[]}\n\t */\n\toptions: {\n\t\ttype: Array,\n\t\tdefault: () => [],\n\t},\n\n\t/**\n\t * Placeholder text.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Enable if a value is required for native form validation\n\t */\n\trequired: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Currently selected value\n\t *\n\t * The `v-model` directive may be used for two-way data binding\n\t */\n\tmodelValue: {\n\t\ttype: Object,\n\t\tdefault: null,\n\t},\n})\n\ndefineEmits(['update:modelValue'])\n\nconst search = ref('')\n\n// Avatar size so the component has the same size as Nc*Field\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst avatarSize = clickableArea - 2 * gridBaseLine\n\n/**\n * Filter function to search users.\n *\n * @param {{subname: string}} option - The option to check\n * @param {string} label - The label of the option\n * @param {string} search - The current search string\n */\nfunction localFilterBy(option, label, search) {\n\tif (props.filterBy) {\n\t\treturn props.filterBy\n\t}\n\n\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\tconst match = search.match(EMAIL_NOTATION)\n\tconst subname = option.subname?.toLocaleLowerCase() ?? ''\n\treturn (match && subname.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t|| (`${label} ${option.subname}`\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n}\n</script>\n\n<template>\n\t<NcSelect class=\"nc-select-users\"\n\t\tv-bind=\"$props\"\n\t\t:filter-by=\"localFilterBy\"\n\t\tlabel=\"displayName\"\n\t\t@search=\"search = $event\"\n\t\t@update:model-value=\"$emit('update:modelValue', $event)\">\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-bind=\"option\"\n\t\t\t\t:avatar-size=\"32\"\n\t\t\t\t:name=\"option.displayName\"\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-bind=\"selectedOption\"\n\t\t\t\t:avatar-size=\"avatarSize\"\n\t\t\t\t:name=\"selectedOption.displayName\"\n\t\t\t\tno-margin\n\t\t\t\t:search=\"search\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<style scoped lang=\"css\">\n.nc-select-users :deep(.vs__selected) {\n\tpadding-inline: 0 5px !important;\n}\n</style>\n"],"names":["ref","search"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqUA,UAAM,SAASA,IAAG,IAAC,EAAE;AAGrB,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AASvC,aAAS,cAAc,QAAQ,OAAOC,SAAQ;AAC7C,UAAI,MAAM,UAAU;AACnB,eAAO,MAAM;AAAA,MACf;AAGC,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAiB,KAAM;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAE,kBAAmB,CAAA,IAAI,MAC5D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,kBAAiB,EACjB,QAAQA,QAAO,kBAAmB,CAAA,IAAI;AAAA,IAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/index-BiECbTbJ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BiECbTbJ.cjs","sources":["../../src/components/NcRichContenteditable/NcMentionBubble.vue","../../src/mixins/richEditor/index.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span :class=\"{'mention-bubble--primary': primary}\"\n\t\tclass=\"mention-bubble\"\n\t\tcontenteditable=\"false\">\n\t\t<span class=\"mention-bubble__wrapper\">\n\t\t\t<span class=\"mention-bubble__content\">\n\t\t\t\t<!-- Avatar or icon -->\n\t\t\t\t<span :class=\"[icon, `mention-bubble__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null\"\n\t\t\t\t\tclass=\"mention-bubble__icon\" />\n\n\t\t\t\t<!-- Title -->\n\t\t\t\t<span role=\"heading\" class=\"mention-bubble__title\" :title=\"labelWithFallback\" />\n\t\t\t</span>\n\n\t\t\t<!-- Selectable text for copy/paste -->\n\t\t\t<span role=\"none\" class=\"mention-bubble__select\">{{ mentionText }}</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\n\nexport default {\n\tname: 'NcMentionBubble',\n\n\tprops: {\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\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\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: [String, null],\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\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\tmentionText() {\n\t\t\treturn !this.id.includes(' ') && !this.id.includes('/')\n\t\t\t\t? `@${this.id}`\n\t\t\t\t: `@\"${this.id}\"`\n\t\t},\n\t\t// Fallback to title for 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$bubble-height: 20px;\n$bubble-max-width: 150px;\n$bubble-padding: 2px;\n$bubble-avatar-size: $bubble-height - 2 * $bubble-padding;\n\n.mention-bubble {\n\t&--primary &__content {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&__wrapper {\n\t\tmax-width: $bubble-max-width;\n\t\t// Align with text\n\t\theight: $bubble-height - $bubble-padding;\n\t\tvertical-align: text-bottom;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\talign-items: center;\n\t\tmax-width: 100%;\n\t\theight: $bubble-height ;\n\t\t-webkit-user-select: none;\n\t\tuser-select: none;\n\t\tpadding-inline: $bubble-padding  $bubble-padding * 3;\n\t\tborder-radius: math.div($bubble-height, 2);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\twidth: $bubble-avatar-size;\n\t\theight: $bubble-avatar-size;\n\t\tborder-radius: math.div($bubble-avatar-size, 2);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $bubble-avatar-size - 2 * $bubble-padding;\n\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__title {\n\t\toverflow: hidden;\n\t\tmargin-inline-start: $bubble-padding;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\t// Put title in ::before so it is not selectable\n\t\t&::before {\n\t\t\tcontent: attr(title);\n\t\t}\n\t}\n\n\t// Hide the mention id so it is selectable\n\t&__select {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tinset-inline-start: -100vw;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n}\n\n</style>\n","/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport NcMentionBubble from '../../components/NcRichContenteditable/NcMentionBubble.vue'\n\nimport escapeHtml from 'escape-html'\nimport stripTags from 'striptags'\nimport Vue from 'vue'\n\n// Referenced from public function getMentions(): https://github.com/nextcloud/server/blob/master/lib/private/Comments/Comment.php\n// Beginning or whitespace. Uses positive lookahead (to work on MobileSafari <16.4)\nconst MENTION_START = /(?=[a-z0-9_\\-@.'])\\B/.source\n// Capturing groups like: @user-id, @\"guest/abc16def\", @\"federated_user/user-id\", @\"user-id with space\"\nconst MENTION_SIMPLE = /(@[a-z0-9_\\-@.']+)/.source\nconst MENTION_GUEST = /@&quot;(?:guest|email){1}\\/[a-f0-9]+&quot;/.source\nconst MENTION_PREFIXED = /@&quot;(?:federated_)?(?:group|team|user){1}\\/[a-z0-9_\\-@.' /:]+&quot;/.source\nconst MENTION_WITH_SPACE = /@&quot;[a-z0-9_\\-@.' ]+&quot;/.source\nconst MENTION_COMPLEX = `(${MENTION_GUEST}|${MENTION_PREFIXED}|${MENTION_WITH_SPACE})`\n// Concatenated regular expressions\nexport const USERID_REGEX = new RegExp(`${MENTION_START}${MENTION_SIMPLE}`, 'gi')\nexport const USERID_REGEX_WITH_SPACE = new RegExp(`${MENTION_START}${MENTION_COMPLEX}`, 'gi')\n\nexport default {\n\tprops: {\n\t\tuserData: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Convert the value string to html for the inner content\n\t\t *\n\t\t * @param {string} value the content without html\n\t\t * @return {string} rendered html\n\t\t */\n\t\trenderContent(value) {\n\t\t\t// Sanitize the value prop\n\t\t\tconst sanitizedValue = escapeHtml(value)\n\n\t\t\t// Extract all the userIds\n\t\t\tconst splitValue = sanitizedValue.split(USERID_REGEX)\n\t\t\t\t.map(part => part.split(USERID_REGEX_WITH_SPACE)).flat()\n\n\t\t\t// Replace userIds by html\n\t\t\treturn splitValue\n\t\t\t\t.map(part => {\n\t\t\t\t\t// When splitting, the string is always putting the userIds\n\t\t\t\t\t// on the uneven indexes. We only want to generate the mentions html\n\t\t\t\t\tif (!part.startsWith('@')) {\n\t\t\t\t\t\treturn part\n\t\t\t\t\t}\n\n\t\t\t\t\t// Extracting the id, nuking the leading @ and all \"\n\t\t\t\t\tconst id = part.slice(1).replace(/&quot;/gi, '')\n\t\t\t\t\t// Compiling template and prepend with the space we removed during the split\n\t\t\t\t\treturn this.genSelectTemplate(id)\n\t\t\t\t})\n\t\t\t\t.join('')\n\t\t\t\t.replace(/\\n/gmi, '<br>')\n\t\t\t\t.replace(/&amp;/gmi, '&')\n\t\t},\n\n\t\t/**\n\t\t * Convert the innerHtml content to a string with mentions as text\n\t\t *\n\t\t * @param {string} content the content without html\n\t\t * @return {string}\n\t\t */\n\t\tparseContent(content) {\n\t\t\tlet text = content\n\t\t\t// Replace break lines with new lines\n\t\t\ttext = text.replace(/<br>/gmi, '\\n')\n\t\t\t// Replace some html special characters\n\t\t\ttext = text.replace(/&nbsp;/gmi, ' ')\n\t\t\ttext = text.replace(/&amp;/gmi, '&')\n\n\t\t\t// Convert the mentions to text only\n\t\t\t// first we replace divs with new lines\n\t\t\ttext = text.replace(/<\\/div>/gmi, '\\n')\n\t\t\t// then we remove all leftover html\n\t\t\ttext = stripTags(text, '<div>')\n\t\t\ttext = stripTags(text)\n\n\t\t\treturn text\n\t\t},\n\n\t\t/**\n\t\t * Generate an autocompletion popup entry template\n\t\t *\n\t\t * @param {string} value the value to match against the userData\n\t\t * @return {string}\n\t\t */\n\t\tgenSelectTemplate(value) {\n\t\t\t// The value returned by this function will replace the trigger '@'\n\t\t\t// and the search text, so when there is no match we simply return\n\t\t\t// '@' and the text.\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\treturn `${this.autocompleteTribute.current.collection.trigger}${this.autocompleteTribute.current.mentionText}`\n\t\t\t}\n\n\t\t\tconst data = this.userData[value]\n\n\t\t\t// Fallback to @mention in case no data matches\n\t\t\tif (!data) {\n\t\t\t\t// return @value if matches MENTION_SIMPLE, @\"value\" otherwise\n\t\t\t\treturn [' ', '/', ':'].every(char => !value.includes(char))\n\t\t\t\t\t? `@${value}`\n\t\t\t\t\t: `@\"${value}\"`\n\t\t\t}\n\n\t\t\t// Return template and make sure we strip off new lines, tabs and consecutive whitespaces\n\t\t\treturn this.renderComponentHtml(data, NcMentionBubble)\n\t\t\t\t.replace(/[\\n\\t]/gmi, '')\n\t\t\t\t.replace(/>\\s+</g, '><')\n\t\t},\n\n\t\t/**\n\t\t * Render a component and return its html content\n\t\t *\n\t\t * @param {object} propsData the props to pass to the component\n\t\t * @param {object} component the component to render\n\t\t * @return {string} the rendered html\n\t\t */\n\t\trenderComponentHtml(propsData, component) {\n\t\t\tconst View = Vue.extend(component)\n\t\t\tconst Item = new View({\n\t\t\t\tpropsData,\n\t\t\t})\n\n\t\t\t// Prepare mountpoint\n\t\t\tconst wrapper = document.createElement('div')\n\t\t\tconst mount = document.createElement('div')\n\t\t\twrapper.style.display = 'none'\n\t\t\twrapper.appendChild(mount)\n\t\t\tdocument.body.appendChild(wrapper)\n\n\t\t\t// Mount and get raw html\n\t\t\tItem.$mount(mount)\n\t\t\tconst renderedHtml = wrapper.innerHTML\n\n\t\t\t// Destroy\n\t\t\tItem.$destroy()\n\t\t\twrapper.remove()\n\n\t\t\treturn renderedHtml\n\t\t},\n\t},\n}\n"],"names":["getAvatarUrl","escapeHtml","stripTags","Vue"],"mappings":"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"}

package/dist/chunks/index-G8WQDZ8G.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-G8WQDZ8G.mjs","sources":["../../src/components/NcRichContenteditable/NcMentionBubble.vue","../../src/mixins/richEditor/index.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span :class=\"{'mention-bubble--primary': primary}\"\n\t\tclass=\"mention-bubble\"\n\t\tcontenteditable=\"false\">\n\t\t<span class=\"mention-bubble__wrapper\">\n\t\t\t<span class=\"mention-bubble__content\">\n\t\t\t\t<!-- Avatar or icon -->\n\t\t\t\t<span :class=\"[icon, `mention-bubble__icon--${avatarUrl ? 'with-avatar' : ''}`]\"\n\t\t\t\t\t:style=\"avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null\"\n\t\t\t\t\tclass=\"mention-bubble__icon\" />\n\n\t\t\t\t<!-- Title -->\n\t\t\t\t<span role=\"heading\" class=\"mention-bubble__title\" :title=\"labelWithFallback\" />\n\t\t\t</span>\n\n\t\t\t<!-- Selectable text for copy/paste -->\n\t\t\t<span role=\"none\" class=\"mention-bubble__select\">{{ mentionText }}</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\n\nexport default {\n\tname: 'NcMentionBubble',\n\n\tprops: {\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\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\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\ticonUrl: {\n\t\t\ttype: [String, null],\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\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\tmentionText() {\n\t\t\treturn !this.id.includes(' ') && !this.id.includes('/')\n\t\t\t\t? `@${this.id}`\n\t\t\t\t: `@\"${this.id}\"`\n\t\t},\n\t\t// Fallback to title for 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$bubble-height: 20px;\n$bubble-max-width: 150px;\n$bubble-padding: 2px;\n$bubble-avatar-size: $bubble-height - 2 * $bubble-padding;\n\n.mention-bubble {\n\t&--primary &__content {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&__wrapper {\n\t\tmax-width: $bubble-max-width;\n\t\t// Align with text\n\t\theight: $bubble-height - $bubble-padding;\n\t\tvertical-align: text-bottom;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\talign-items: center;\n\t\tmax-width: 100%;\n\t\theight: $bubble-height ;\n\t\t-webkit-user-select: none;\n\t\tuser-select: none;\n\t\tpadding-inline: $bubble-padding  $bubble-padding * 3;\n\t\tborder-radius: math.div($bubble-height, 2);\n\t\tbackground-color: var(--color-background-dark);\n\t}\n\n\t&__icon {\n\t\tposition: relative;\n\t\twidth: $bubble-avatar-size;\n\t\theight: $bubble-avatar-size;\n\t\tborder-radius: math.div($bubble-avatar-size, 2);\n\t\tbackground-color: var(--color-background-darker);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: $bubble-avatar-size - 2 * $bubble-padding;\n\n\t\t&--with-avatar {\n\t\t\tcolor: inherit;\n\t\t\tbackground-size: cover;\n\t\t}\n\t}\n\n\t&__title {\n\t\toverflow: hidden;\n\t\tmargin-inline-start: $bubble-padding;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\t// Put title in ::before so it is not selectable\n\t\t&::before {\n\t\t\tcontent: attr(title);\n\t\t}\n\t}\n\n\t// Hide the mention id so it is selectable\n\t&__select {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tinset-inline-start: -100vw;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n}\n\n</style>\n","/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport NcMentionBubble from '../../components/NcRichContenteditable/NcMentionBubble.vue'\n\nimport escapeHtml from 'escape-html'\nimport stripTags from 'striptags'\nimport Vue from 'vue'\n\n// Referenced from public function getMentions(): https://github.com/nextcloud/server/blob/master/lib/private/Comments/Comment.php\n// Beginning or whitespace. Uses positive lookahead (to work on MobileSafari <16.4)\nconst MENTION_START = /(?=[a-z0-9_\\-@.'])\\B/.source\n// Capturing groups like: @user-id, @\"guest/abc16def\", @\"federated_user/user-id\", @\"user-id with space\"\nconst MENTION_SIMPLE = /(@[a-z0-9_\\-@.']+)/.source\nconst MENTION_GUEST = /@&quot;(?:guest|email){1}\\/[a-f0-9]+&quot;/.source\nconst MENTION_PREFIXED = /@&quot;(?:federated_)?(?:group|team|user){1}\\/[a-z0-9_\\-@.' /:]+&quot;/.source\nconst MENTION_WITH_SPACE = /@&quot;[a-z0-9_\\-@.' ]+&quot;/.source\nconst MENTION_COMPLEX = `(${MENTION_GUEST}|${MENTION_PREFIXED}|${MENTION_WITH_SPACE})`\n// Concatenated regular expressions\nexport const USERID_REGEX = new RegExp(`${MENTION_START}${MENTION_SIMPLE}`, 'gi')\nexport const USERID_REGEX_WITH_SPACE = new RegExp(`${MENTION_START}${MENTION_COMPLEX}`, 'gi')\n\nexport default {\n\tprops: {\n\t\tuserData: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Convert the value string to html for the inner content\n\t\t *\n\t\t * @param {string} value the content without html\n\t\t * @return {string} rendered html\n\t\t */\n\t\trenderContent(value) {\n\t\t\t// Sanitize the value prop\n\t\t\tconst sanitizedValue = escapeHtml(value)\n\n\t\t\t// Extract all the userIds\n\t\t\tconst splitValue = sanitizedValue.split(USERID_REGEX)\n\t\t\t\t.map(part => part.split(USERID_REGEX_WITH_SPACE)).flat()\n\n\t\t\t// Replace userIds by html\n\t\t\treturn splitValue\n\t\t\t\t.map(part => {\n\t\t\t\t\t// When splitting, the string is always putting the userIds\n\t\t\t\t\t// on the uneven indexes. We only want to generate the mentions html\n\t\t\t\t\tif (!part.startsWith('@')) {\n\t\t\t\t\t\treturn part\n\t\t\t\t\t}\n\n\t\t\t\t\t// Extracting the id, nuking the leading @ and all \"\n\t\t\t\t\tconst id = part.slice(1).replace(/&quot;/gi, '')\n\t\t\t\t\t// Compiling template and prepend with the space we removed during the split\n\t\t\t\t\treturn this.genSelectTemplate(id)\n\t\t\t\t})\n\t\t\t\t.join('')\n\t\t\t\t.replace(/\\n/gmi, '<br>')\n\t\t\t\t.replace(/&amp;/gmi, '&')\n\t\t},\n\n\t\t/**\n\t\t * Convert the innerHtml content to a string with mentions as text\n\t\t *\n\t\t * @param {string} content the content without html\n\t\t * @return {string}\n\t\t */\n\t\tparseContent(content) {\n\t\t\tlet text = content\n\t\t\t// Replace break lines with new lines\n\t\t\ttext = text.replace(/<br>/gmi, '\\n')\n\t\t\t// Replace some html special characters\n\t\t\ttext = text.replace(/&nbsp;/gmi, ' ')\n\t\t\ttext = text.replace(/&amp;/gmi, '&')\n\n\t\t\t// Convert the mentions to text only\n\t\t\t// first we replace divs with new lines\n\t\t\ttext = text.replace(/<\\/div>/gmi, '\\n')\n\t\t\t// then we remove all leftover html\n\t\t\ttext = stripTags(text, '<div>')\n\t\t\ttext = stripTags(text)\n\n\t\t\treturn text\n\t\t},\n\n\t\t/**\n\t\t * Generate an autocompletion popup entry template\n\t\t *\n\t\t * @param {string} value the value to match against the userData\n\t\t * @return {string}\n\t\t */\n\t\tgenSelectTemplate(value) {\n\t\t\t// The value returned by this function will replace the trigger '@'\n\t\t\t// and the search text, so when there is no match we simply return\n\t\t\t// '@' and the text.\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\treturn `${this.autocompleteTribute.current.collection.trigger}${this.autocompleteTribute.current.mentionText}`\n\t\t\t}\n\n\t\t\tconst data = this.userData[value]\n\n\t\t\t// Fallback to @mention in case no data matches\n\t\t\tif (!data) {\n\t\t\t\t// return @value if matches MENTION_SIMPLE, @\"value\" otherwise\n\t\t\t\treturn [' ', '/', ':'].every(char => !value.includes(char))\n\t\t\t\t\t? `@${value}`\n\t\t\t\t\t: `@\"${value}\"`\n\t\t\t}\n\n\t\t\t// Return template and make sure we strip off new lines, tabs and consecutive whitespaces\n\t\t\treturn this.renderComponentHtml(data, NcMentionBubble)\n\t\t\t\t.replace(/[\\n\\t]/gmi, '')\n\t\t\t\t.replace(/>\\s+</g, '><')\n\t\t},\n\n\t\t/**\n\t\t * Render a component and return its html content\n\t\t *\n\t\t * @param {object} propsData the props to pass to the component\n\t\t * @param {object} component the component to render\n\t\t * @return {string} the rendered html\n\t\t */\n\t\trenderComponentHtml(propsData, component) {\n\t\t\tconst View = Vue.extend(component)\n\t\t\tconst Item = new View({\n\t\t\t\tpropsData,\n\t\t\t})\n\n\t\t\t// Prepare mountpoint\n\t\t\tconst wrapper = document.createElement('div')\n\t\t\tconst mount = document.createElement('div')\n\t\t\twrapper.style.display = 'none'\n\t\t\twrapper.appendChild(mount)\n\t\t\tdocument.body.appendChild(wrapper)\n\n\t\t\t// Mount and get raw html\n\t\t\tItem.$mount(mount)\n\t\t\tconst renderedHtml = wrapper.innerHTML\n\n\t\t\t// Destroy\n\t\t\tItem.$destroy()\n\t\t\twrapper.remove()\n\n\t\t\treturn renderedHtml\n\t\t},\n\t},\n}\n"],"names":[],"mappings":"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"}