@nextcloud/vue 8.23.1 → 8.24.0

package/dist/chunks/NcAvatar--JVA_B6Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAvatar--JVA_B6Y.cjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.prototype.hasOwnProperty.call(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\tconst {\n\t\t\t\t\tstatus,\n\t\t\t\t\tmessage,\n\t\t\t\t\ticon,\n\t\t\t\t} = data.ocs.data\n\t\t\t\tthis.userStatus.status = status\n\t\t\t\tthis.userStatus.message = message || ''\n\t\t\t\tthis.userStatus.icon = icon || ''\n\t\t\t\tthis.hasStatus = true\n\t\t\t} catch (e) {\n\t\t\t\tif (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconsole.error(e)\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"favicon-touch.png\" />\n```\n\n### Avatar with material design icon\n\n```\n<template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n}\n</script>\n```\n\n### Avatar with preloaded status\n```\n<template>\n<div class=\"grid\">\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.online\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.away\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.dnd\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.custom\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.online\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.away\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.dnd\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.custom\">\n\t</NcAvatar>\n</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style>\n\t.grid {\n\t\twidth: fit-content;\n\t\tdisplay: grid;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tgrid-template-columns: repeat(4, 1fr);\n\t}\n</style>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<span ref=\"main\"\n\t\tv-click-outside=\"closeMenu\"\n\t\t:title=\"tooltip\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img v-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton v-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<DotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-else-if=\"hasMenu\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\t:open.sync=\"contactsMenuOpenState\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component :is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\"\n\t\t\t\tv-on=\"item.ncActionComponentHandlers\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</component>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon v-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span v-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { getRoute } from '../../components/NcRichText/autolink.js'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { t } from '../../l10n.js'\nimport { userStatus } from '../../mixins/index.js'\n\nimport axios from '@nextcloud/axios'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Do not show the user status on the avatar.\n\t\t */\n\t\t hideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status.\n\t\t * @deprecated - Use `hideStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t */\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Whether or not to the status-icon should be used instead of online/away\n\t\t * @deprecated - Use `verboseStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatusCompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\t\t/**\n\t\t * Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t */\n\t\t noPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Placeholder avatars will be automatically generated when this is set to true.\n\t\t * @deprecated - Use `noPlaceholder` instead. Will be removed in v9.\n\t\t */\n\t\tallowPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& !this.verboseStatus\n\t\t\t\t&& this.showUserStatusCompact\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn !this.noPlaceholder && this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t},\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filteredChars = user.match(/[\\p{L}\\p{N}\\s]/gu)\n\t\t\t\tif (filteredChars == null) {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\tconst filtered = filteredChars.join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\t\tncActionComponentHandlers: {\n\t\t\t\t\t\t\tclick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeDestroy() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch (e) {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Directly use the url if defined\n\t\t\tif (this.isUrlDefined) {\n\t\t\t\tthis.updateImageIfValid(this.url)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.size <= 64) {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 64)\n\t\t\t\tconst srcset = [\n\t\t\t\t\tavatarUrl + ' 1x',\n\t\t\t\t\tthis.avatarUrlGenerator(this.user, 512) + ' 8x',\n\t\t\t\t].join(', ')\n\n\t\t\t\tthis.updateImageIfValid(avatarUrl, srcset)\n\t\t\t} else {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 512)\n\t\t\t\tthis.updateImageIfValid(avatarUrl)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Generate an avatar url from the server's avatar endpoint\n\t\t *\n\t\t * @param {string} user the user id\n\t\t * @param {number} size the desired size\n\t\t * @return {string}\n\t\t */\n\t\tavatarUrlGenerator(user, size) {\n\t\t\tlet avatarUrl = getAvatarUrl(user, size, this.isGuest)\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = () => {\n\t\t\t\tconsole.debug('Invalid avatar url', url)\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--size);\n\theight: var(--size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--size);\n\t\t\t\tmin-height: var(--size);\n\t\t\t\twidth: var(--size) !important;\n\t\t\t\tmin-width: var(--size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--size);\n\t\twidth: var(--size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--size);\n\t\theight: var(--size);\n\t}\n\n\t.avatardiv__user-status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: -4px;\n\t\tbottom: -4px;\n\t\tmin-height: 14px;\n\t\tmin-width: 14px;\n\t\tmax-height: 18px;\n\t\tmax-width: 18px;\n\t\theight: 40%;\n\t\twidth: 40%;\n\t\tline-height: 1;\n\t\tfont-size: clamp(var(--font-size-small, 13px), 85%, var(--default-font-size));\n\t\tborder: 2px solid var(--color-main-background);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: calc(var(--size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["capabilities","getCapabilities","getCurrentUser","axios","generateOcsUrl","getBuilder","ClickOutside","DotsHorizontal","NcActions","NcButton","NcIconSvgWrapper","NcLoadingIcon","NcUserStatusIcon","t","getUserStatusText","usernameToColor","getRoute","NcActionRouter","NcActionLink","getEnabledContactsMenuActions","NcActionButton","logger","NcActionText","subscribe","unsubscribe","generateUrl","getAvatarUrl"],"mappings":"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"}

package/dist/chunks/{NcAvatar-BjwyJw34.mjs → NcAvatar-DwORvUjC.mjs}

@@ -1,20 +1,20 @@
 import '../assets/NcMentionBubble-BL05HUeF.css';
-import '../assets/NcAvatar-CcJlFpcI.css';
-import { N as NcActions } from "./NcActions-D3hGxwlc.mjs";
+import '../assets/NcAvatar-Cc-2PM1F.css';
+import { N as NcActions } from "./NcActions-C_H0APKA.mjs";
 import NcActionLink from "../Components/NcActionLink.mjs";
 import NcActionRouter from "../Components/NcActionRouter.mjs";
 import NcActionText from "../Components/NcActionText.mjs";
-import { N as NcActionButton } from "./NcActionButton-CEysTg4c.mjs";
+import { N as NcActionButton } from "./NcActionButton-BFxArTsE.mjs";
 import NcButton from "../Components/NcButton.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CHmdAuhg.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-S5bBgRl6.mjs";
-import { u as usernameToColor } from "./usernameToColor-BCZuxlEH.mjs";
+import { N as NcUserStatusIcon, g as getUserStatusText } from "./NcUserStatusIcon-D1Mw6nKB.mjs";
+import { u as usernameToColor } from "./usernameToColor-DLOoqQAF.mjs";
 import { g as getAvatarUrl } from "./getAvatarUrl-DxvUjKMi.mjs";
 import { getEnabledContactsMenuActions } from "../Functions/contactsMenu.mjs";
 import { g as getRoute } from "./autolink-cbuFALXr.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { r as register, p as t9, a as t } from "./_l10n-DDKxBWQL.mjs";
+import { r as register, p as t9, a as t } from "./_l10n-DKne-gFg.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
 /* empty css                                                                          */
@@ -27,7 +27,7 @@ import axios from "@nextcloud/axios";
 import { getCapabilities } from "@nextcloud/capabilities";
 import { generateOcsUrl, generateUrl } from "@nextcloud/router";
 import { D as DotsHorizontal } from "./DotsHorizontal-C6LNsw4N.mjs";
-import { subscribe, unsubscribe } from "@nextcloud/event-bus";
+import { unsubscribe, subscribe } from "@nextcloud/event-bus";
 import { getBuilder } from "@nextcloud/browser-storage";
 import { vOnClickOutside } from "@vueuse/components";
 register(t9);
@@ -133,14 +133,30 @@ const _sfc_main = {
       default: void 0
     },
     /**
-     * Whether or not to display the user-status
+     * Do not show the user status on the avatar.
+     */
+    hideStatus: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether or not to display the user-status.
+     * @deprecated - Use `hideStatus` instead. Will be removed with v9.
      */
     showUserStatus: {
       type: Boolean,
       default: true
     },
+    /**
+     * Show the verbose user status (e.g. "online" / "away") instead of just the status icon.
+     */
+    verboseStatus: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Whether or not to the status-icon should be used instead of online/away
+     * @deprecated - Use `verboseStatus` instead. Will be removed with v9.
      */
     showUserStatusCompact: {
       type: Boolean,
@@ -180,7 +196,15 @@ const _sfc_main = {
       default: 32
     },
     /**
-     * Placeholder avatars will be automatically generated when this is set to true
+     * Do not automatically generate a placeholder avatars if there is no real avatar is available.
+     */
+    noPlaceholder: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Placeholder avatars will be automatically generated when this is set to true.
+     * @deprecated - Use `noPlaceholder` instead. Will be removed in v9.
      */
     allowPlaceholder: {
       type: Boolean,
@@ -251,10 +275,10 @@ const _sfc_main = {
       return t("Avatar of {displayName}", { displayName: this.displayName ?? this.user });
     },
     canDisplayUserStatus() {
-      return this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
+      return !this.hideStatus && this.showUserStatus && this.hasStatus && ["online", "away", "busy", "dnd"].includes(this.userStatus.status);
     },
     showUserStatusIconOnAvatar() {
-      return this.showUserStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
+      return !this.hideStatus && this.showUserStatus && !this.verboseStatus && this.showUserStatusCompact && this.hasStatus && this.userStatus.status !== "dnd" && this.userStatus.icon;
     },
     /**
      * The user identifier, either the display name if set or the user property
@@ -291,15 +315,14 @@ const _sfc_main = {
      * True if initials should be shown as the user icon fallback
      */
     showInitials() {
-      return this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon);
+      return !this.noPlaceholder && this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon);
     },
     avatarStyle() {
-      const style = {
+      return {
         "--size": this.size + "px",
-        lineHeight: this.size + "px",
+        lineHeight: this.showInitials ? this.size + "px" : 0,
         fontSize: Math.round(this.size * 0.45) + "px"
       };
-      return style;
     },
     initialsWrapperStyle() {
       const { r, g, b } = usernameToColor(this.userIdentifier);
@@ -563,9 +586,9 @@ var _sfc_render = function render() {
     "avatardiv--with-menu-loading": _vm.contactsMenuLoading
   }, style: _vm.avatarStyle, attrs: { "title": _vm.tooltip } }, [_vm._t("icon", function() {
     return [_vm.iconClass ? _c("span", { staticClass: "avatar-class-icon", class: _vm.iconClass }) : _vm.isAvatarLoaded && !_vm.userDoesNotExist ? _c("img", { attrs: { "src": _vm.avatarUrlLoaded, "srcset": _vm.avatarSrcSetLoaded, "alt": "" } }) : _vm._e()];
-  }), _vm.hasMenu && _vm.menu.length === 0 ? _c("NcButton", { staticClass: "action-item action-item__menutoggle", attrs: { "type": "tertiary-no-background", "aria-label": _vm.avatarAriaLabel }, on: { "click": _vm.toggleMenu }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  }), _vm.hasMenu && _vm.menu.length === 0 ? _c("NcButton", { staticClass: "action-item action-item__menutoggle", attrs: { "aria-label": _vm.avatarAriaLabel, "variant": "tertiary-no-background" }, on: { "click": _vm.toggleMenu }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_vm.contactsMenuLoading ? _c("NcLoadingIcon") : _c("DotsHorizontal", { attrs: { "size": 20 } })];
-  }, proxy: true }], null, false, 2617833509) }) : _vm.hasMenu ? _c("NcActions", { attrs: { "force-menu": "", "manual-open": "", "type": "tertiary-no-background", "container": _vm.menuContainer, "open": _vm.contactsMenuOpenState, "aria-label": _vm.avatarAriaLabel }, on: { "update:open": function($event) {
+  }, proxy: true }], null, false, 2617833509) }) : _vm.hasMenu ? _c("NcActions", { attrs: { "aria-label": _vm.avatarAriaLabel, "container": _vm.menuContainer, "force-menu": "", "manual-open": "", "open": _vm.contactsMenuOpenState, "variant": "tertiary-no-background" }, on: { "update:open": function($event) {
     _vm.contactsMenuOpenState = $event;
   }, "click": _vm.toggleMenu }, scopedSlots: _vm._u([_vm.contactsMenuLoading ? { key: "icon", fn: function() {
     return [_c("NcLoadingIcon")];
@@ -582,10 +605,11 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "cb1fb4e7"
+  "998087bd"
 );
 const NcAvatar = __component__.exports;
 export {
   NcAvatar as N,
   userStatus as u
 };
+//# sourceMappingURL=NcAvatar-DwORvUjC.mjs.map

package/dist/chunks/NcAvatar-DwORvUjC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAvatar-DwORvUjC.mjs","sources":["../../src/mixins/userStatus.js","../../src/components/NcAvatar/NcAvatar.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\thasStatus: false,\n\t\t\tuserStatus: {\n\t\t\t\tstatus: null,\n\t\t\t\tmessage: null,\n\t\t\t\ticon: null,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Fetches the user-status from the server\n\t\t *\n\t\t * @param {string} userId UserId of the user to fetch the status for\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchUserStatus(userId) {\n\t\t\tif (!userId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst capabilities = getCapabilities()\n\t\t\tif (!Object.prototype.hasOwnProperty.call(capabilities, 'user_status') || !capabilities.user_status.enabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// User status endpoint is not available for guests.\n\t\t\tif (!getCurrentUser()) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateOcsUrl('apps/user_status/api/v1/statuses/{userId}', { userId }))\n\t\t\t\tconst {\n\t\t\t\t\tstatus,\n\t\t\t\t\tmessage,\n\t\t\t\t\ticon,\n\t\t\t\t} = data.ocs.data\n\t\t\t\tthis.userStatus.status = status\n\t\t\t\tthis.userStatus.message = message || ''\n\t\t\t\tthis.userStatus.icon = icon || ''\n\t\t\t\tthis.hasStatus = true\n\t\t\t} catch (e) {\n\t\t\t\tif (e.response.status === 404 && e.response.data.ocs?.data?.length === 0) {\n\t\t\t\t\t// User just has no status set, so don't log it\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconsole.error(e)\n\t\t\t}\n\t\t},\n\t},\n}\n","<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Basic user avatar\n\n```vue\n\t<NcAvatar user=\"willywonka\" display-name=\"Willy Wonka\" />\n```\n\n### Avatar with image\n\n```vue\n\t<NcAvatar url=\"favicon-touch.png\" />\n```\n\n### Avatar with material design icon\n\n```\n<template>\n\t<NcAvatar>\n\t\t<template #icon>\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</template>\n\t</NcAvatar>\n</template>\n<script>\nimport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccountMultiple,\n\t},\n}\n</script>\n```\n\n### Avatar with preloaded status\n```\n<template>\n<div class=\"grid\">\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.online\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.away\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.dnd\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:size=\"44\"\n\t\t:preloaded-user-status=\"status.custom\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.online\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.away\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.dnd\">\n\t</NcAvatar>\n\t<NcAvatar user=\"janedoe\"\n\t\tdisplay-name=\"Jane Doe\"\n\t\t:preloaded-user-status=\"status.custom\">\n\t</NcAvatar>\n</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tstatus: {\n\t\t\t\tonline: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'Available',\n\t\t\t\t},\n\t\t\t\taway: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'away',\n\t\t\t\t\tmessage: 'Away',\n\t\t\t\t},\n\t\t\t\tdnd: {\n\t\t\t\t\ticon: '',\n\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\tmessage: 'Busy',\n\t\t\t\t},\n\t\t\t\tcustom: {\n\t\t\t\t\ticon: '📆',\n\t\t\t\t\tstatus: 'online',\n\t\t\t\t\tmessage: 'In a meeting',\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style>\n\t.grid {\n\t\twidth: fit-content;\n\t\tdisplay: grid;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tgrid-template-columns: repeat(4, 1fr);\n\t}\n</style>\n```\n\n### Avatar for non-users\n\n```vue\n\t<NcAvatar display-name=\"Robbie Hyeon-Jeong\" :is-no-user=\"true\" />\n```\n\n### Avatar on complex background\n\n```\n<template>\n\t<div class=\"avatar-background\">\n\t\t<NcAvatar class=\"avatar\" :is-no-user=\"true\" display-name=\"Cecilia Rohese\" />\n\t</div>\n</template>\n<style scoped>\n.avatar-background {\n\twidth: 80px;\n\theight: 60px;\n\tbackground: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);\n}\n\n.avatar {\n\tmargin: 15px 25px;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<span ref=\"main\"\n\t\tv-click-outside=\"closeMenu\"\n\t\t:title=\"tooltip\"\n\t\t:class=\"{\n\t\t\t'avatardiv--unknown': userDoesNotExist,\n\t\t\t'avatardiv--with-menu': hasMenu,\n\t\t\t'avatardiv--with-menu-loading': contactsMenuLoading\n\t\t}\"\n\t\t:style=\"avatarStyle\"\n\t\tclass=\"avatardiv popovermenu-wrapper\">\n\t\t<!-- @slot Icon slot -->\n\t\t<slot name=\"icon\">\n\t\t\t<!-- Avatar icon or image -->\n\t\t\t<span v-if=\"iconClass\" :class=\"iconClass\" class=\"avatar-class-icon\" />\n\t\t\t<img v-else-if=\"isAvatarLoaded && !userDoesNotExist\"\n\t\t\t\t:src=\"avatarUrlLoaded\"\n\t\t\t\t:srcset=\"avatarSrcSetLoaded\"\n\t\t\t\talt=\"\">\n\t\t</slot>\n\n\t\t<!-- Contact menu -->\n\t\t<!-- We show a button if the menu is not loaded yet. -->\n\t\t<NcButton v-if=\"hasMenu && menu.length === 0\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\tclass=\"action-item action-item__menutoggle\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<NcLoadingIcon v-if=\"contactsMenuLoading\" />\n\t\t\t\t<DotsHorizontal v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-else-if=\"hasMenu\"\n\t\t\t:aria-label=\"avatarAriaLabel\"\n\t\t\t:container=\"menuContainer\"\n\t\t\tforce-menu\n\t\t\tmanual-open\n\t\t\t:open.sync=\"contactsMenuOpenState\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"toggleMenu\">\n\t\t\t<component :is=\"item.ncActionComponent\"\n\t\t\t\tv-for=\"(item, key) in menu\"\n\t\t\t\t:key=\"key\"\n\t\t\t\tv-bind=\"item.ncActionComponentProps\"\n\t\t\t\tv-on=\"item.ncActionComponentHandlers\">\n\t\t\t\t<template v-if=\"item.iconSvg\" #icon>\n\t\t\t\t\t<NcIconSvgWrapper :svg=\"item.iconSvg\" />\n\t\t\t\t</template>\n\t\t\t\t{{ item.text }}\n\t\t\t</component>\n\t\t\t<template v-if=\"contactsMenuLoading\" #icon>\n\t\t\t\t<NcLoadingIcon />\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Avatar status -->\n\t\t<span v-if=\"showUserStatusIconOnAvatar\" class=\"avatardiv__user-status avatardiv__user-status--icon\">\n\t\t\t{{ userStatus.icon }}\n\t\t</span>\n\t\t<NcUserStatusIcon v-else-if=\"canDisplayUserStatus\"\n\t\t\tclass=\"avatardiv__user-status\"\n\t\t\t:status=\"userStatus.status\"\n\t\t\t:aria-hidden=\"String(hasMenu)\" />\n\n\t\t<!-- Show the letter if no avatar nor icon class -->\n\t\t<span v-if=\"showInitials\"\n\t\t\t:style=\"initialsWrapperStyle\"\n\t\t\tclass=\"avatardiv__initials-wrapper\">\n\t\t\t<span :style=\"initialsStyle\" class=\"avatardiv__initials\">\n\t\t\t\t{{ initials }}\n\t\t\t</span>\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActionText from '../NcActionText/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcUserStatusIcon from '../NcUserStatusIcon/index.js'\nimport usernameToColor from '../../functions/usernameToColor/index.js'\nimport { getAvatarUrl } from '../../utils/getAvatarUrl.ts'\nimport { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'\nimport { getRoute } from '../../components/NcRichText/autolink.js'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { t } from '../../l10n.js'\nimport { userStatus } from '../../mixins/index.js'\n\nimport axios from '@nextcloud/axios'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { generateUrl } from '@nextcloud/router'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\n\n/**\n * @param {string} userId The id of the user\n */\nfunction getUserHasAvatar(userId) {\n\tconst flag = browserStorage.getItem('user-has-avatar.' + userId)\n\tif (typeof flag === 'string') {\n\t\treturn Boolean(flag)\n\t}\n\treturn null\n}\n\n/**\n * @param {string} userId The id of the user\n * @param {boolean} flag Has the user an avatar\n */\nfunction setUserHasAvatar(userId, flag) {\n\tif (userId) {\n\t\tbrowserStorage.setItem('user-has-avatar.' + userId, flag)\n\t}\n}\n\nexport default {\n\tname: 'NcAvatar',\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\tcomponents: {\n\t\tDotsHorizontal,\n\t\tNcActions,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcUserStatusIcon,\n\t},\n\tmixins: [userStatus],\n\tprops: {\n\t\t/**\n\t\t * Set a custom url to the avatar image\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a css icon-class for an icon to be used instead of the avatar.\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set the user id to fetch the avatar\n\t\t * either the url, user or displayName property must be defined\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Do not show the user status on the avatar.\n\t\t */\n\t\t hideStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status.\n\t\t * @deprecated - Use `hideStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Show the verbose user status (e.g. \"online\" / \"away\") instead of just the status icon.\n\t\t */\n\t\tverboseStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Whether or not to the status-icon should be used instead of online/away\n\t\t * @deprecated - Use `verboseStatus` instead. Will be removed with v9.\n\t\t */\n\t\tshowUserStatusCompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * When the user status was preloaded via another source it can be handed in with this property to save the request.\n\t\t * If this property is not set the status will be fetched automatically.\n\t\t * If a preloaded no-status is available provide this object with properties \"status\", \"icon\" and \"message\" set to null.\n\t\t */\n\t\tpreloadedUserStatus: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the user a guest user (then we have to user a different endpoint)\n\t\t */\n\t\tisGuest: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Set a display name that will be rendered as a tooltip\n\t\t * either the url, user or displayName property must be defined\n\t\t * specify just the displayname to generate a placeholder avatar without\n\t\t * trying to fetch the avatar based on the user id\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Set a size in px for the rendered avatar\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 32,\n\t\t},\n\t\t/**\n\t\t * Do not automatically generate a placeholder avatars if there is no real avatar is available.\n\t\t */\n\t\t noPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Placeholder avatars will be automatically generated when this is set to true.\n\t\t * @deprecated - Use `noPlaceholder` instead. Will be removed in v9.\n\t\t */\n\t\tallowPlaceholder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Disable the tooltip\n\t\t */\n\t\tdisableTooltip: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Disable the menu\n\t\t */\n\t\tdisableMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Declares a custom tooltip when not null\n\t\t * Fallback will be the displayName\n\t\t *\n\t\t * requires disableTooltip not to be set to true\n\t\t */\n\t\ttooltipMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Declares username is not a user's name, when true.\n\t\t * Prevents loading user's avatar from server and forces generating colored initials,\n\t\t * i.e. if the user is a group\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover menu container\n\t\t */\n\t\tmenuContainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tavatarUrlLoaded: null,\n\t\t\tavatarSrcSetLoaded: null,\n\t\t\tuserDoesNotExist: false,\n\t\t\tisAvatarLoaded: false,\n\t\t\tisMenuLoaded: false,\n\t\t\tcontactsMenuLoading: false,\n\t\t\tcontactsMenuData: {},\n\t\t\tcontactsMenuActions: [],\n\t\t\tcontactsMenuOpenState: false,\n\t\t}\n\t},\n\tcomputed: {\n\t\tavatarAriaLabel() {\n\t\t\t// aria-label is only allowed on interactive elements\n\t\t\tif (!this.hasMenu) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) {\n\t\t\t\treturn t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) })\n\t\t\t}\n\t\t\treturn t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })\n\t\t},\n\t\tcanDisplayUserStatus() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)\n\t\t},\n\t\tshowUserStatusIconOnAvatar() {\n\t\t\treturn !this.hideStatus\n\t\t\t\t&& this.showUserStatus\n\t\t\t\t&& !this.verboseStatus\n\t\t\t\t&& this.showUserStatusCompact\n\t\t\t\t&& this.hasStatus\n\t\t\t\t&& this.userStatus.status !== 'dnd'\n\t\t\t\t&& this.userStatus.icon\n\t\t},\n\t\t/**\n\t\t * The user identifier, either the display name if set or the user property\n\t\t * If both properties are not set an empty string is returned\n\t\t */\n\t\tuserIdentifier() {\n\t\t\tif (this.isDisplayNameDefined) {\n\t\t\t\treturn this.displayName\n\t\t\t}\n\t\t\tif (this.isUserDefined) {\n\t\t\t\treturn this.user\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\tisUserDefined() {\n\t\t\treturn typeof this.user !== 'undefined'\n\t\t},\n\t\tisDisplayNameDefined() {\n\t\t\treturn typeof this.displayName !== 'undefined'\n\t\t},\n\t\tisUrlDefined() {\n\t\t\treturn typeof this.url !== 'undefined'\n\t\t},\n\t\thasMenu() {\n\t\t\tif (this.disableMenu) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.isMenuLoaded) {\n\t\t\t\treturn this.menu.length > 0\n\t\t\t}\n\t\t\treturn !(this.user === getCurrentUser()?.uid || this.userDoesNotExist || this.url)\n\t\t},\n\n\t\t/**\n\t\t * True if initials should be shown as the user icon fallback\n\t\t */\n\t\tshowInitials() {\n\t\t\treturn !this.noPlaceholder && this.allowPlaceholder && this.userDoesNotExist && !(this.iconClass || this.$slots.icon)\n\t\t},\n\n\t\tavatarStyle() {\n\t\t\treturn {\n\t\t\t\t'--size': this.size + 'px',\n\t\t\t\tlineHeight: this.showInitials ? (this.size + 'px') : 0,\n\t\t\t\tfontSize: Math.round(this.size * 0.45) + 'px',\n\t\t\t}\n\t\t},\n\t\tinitialsWrapperStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tbackgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,\n\t\t\t}\n\t\t},\n\t\tinitialsStyle() {\n\t\t\tconst { r, g, b } = usernameToColor(this.userIdentifier)\n\t\t\treturn {\n\t\t\t\tcolor: `rgb(${r}, ${g}, ${b})`,\n\t\t\t}\n\t\t},\n\t\ttooltip() {\n\t\t\tif (this.disableTooltip) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (this.tooltipMessage) {\n\t\t\t\treturn this.tooltipMessage\n\t\t\t}\n\n\t\t\treturn this.displayName\n\t\t},\n\n\t\t/**\n\t\t * Get the (max. two) initials of the user as uppcase string\n\t\t */\n\t\tinitials() {\n\t\t\tlet initials = '?'\n\t\t\tif (this.showInitials) {\n\t\t\t\tconst user = this.userIdentifier.trim()\n\t\t\t\tif (user === '') {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Filtered user name, without special characters so only letters and numbers are allowed (prevent e.g. '(' as an initial)\n\t\t\t\t * \\p{L}: Letters of all languages\n\t\t\t\t * \\p{N}: Numbers of all languages\n\t\t\t\t * \\s: White space for breaking the string\n\t\t\t\t * @type {string}\n\t\t\t\t */\n\t\t\t\tconst filteredChars = user.match(/[\\p{L}\\p{N}\\s]/gu)\n\t\t\t\tif (filteredChars == null) {\n\t\t\t\t\treturn initials\n\t\t\t\t}\n\n\t\t\t\tconst filtered = filteredChars.join('')\n\t\t\t\tconst idx = filtered.lastIndexOf(' ')\n\t\t\t\tinitials = String.fromCodePoint(filtered.codePointAt(0))\n\t\t\t\tif (idx !== -1) {\n\t\t\t\t\tinitials = initials.concat(String.fromCodePoint(filtered.codePointAt(idx + 1)))\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn initials.toLocaleUpperCase()\n\t\t},\n\t\tmenu() {\n\t\t\tconst actions = this.contactsMenuActions.map((item) => {\n\t\t\t\tconst route = getRoute(this.$router, item.hyperlink)\n\t\t\t\treturn {\n\t\t\t\t\tncActionComponent: route ? NcActionRouter : NcActionLink,\n\t\t\t\t\tncActionComponentProps: route\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\thref: item.hyperlink,\n\t\t\t\t\t\t\ticon: item.icon,\n\t\t\t\t\t\t},\n\t\t\t\t\ttext: item.title,\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tfor (const action of getEnabledContactsMenuActions(this.contactsMenuData)) {\n\t\t\t\ttry {\n\t\t\t\t\tactions.push({\n\t\t\t\t\t\tncActionComponent: NcActionButton,\n\t\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\t\tncActionComponentHandlers: {\n\t\t\t\t\t\t\tclick: () => action.callback(this.contactsMenuData),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttext: action.displayName(this.contactsMenuData),\n\t\t\t\t\t\ticonSvg: action.iconSvg(this.contactsMenuData),\n\t\t\t\t\t})\n\t\t\t\t} catch (error) {\n\t\t\t\t\tlogger.error(`Failed to render ContactsMenu action ${action.id}`, {\n\t\t\t\t\t\terror,\n\t\t\t\t\t\taction,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * @param {string} html The HTML to escape\n\t\t\t */\n\t\t\tfunction escape(html) {\n\t\t\t\tconst text = document.createTextNode(html)\n\t\t\t\tconst p = document.createElement('p')\n\t\t\t\tp.appendChild(text)\n\t\t\t\treturn p.innerHTML\n\t\t\t}\n\n\t\t\tif (this.showUserStatus && (this.userStatus.icon || this.userStatus.message)) {\n\t\t\t\t// NcAction's URL icons are inverted in dark mode, so we need to pass SVG image in the icon slot\n\t\t\t\tconst emojiIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" text-anchor=\"middle\" style=\"dominant-baseline: central; font-size: 85%\">${escape(this.userStatus.icon)}</text>\n\t\t\t\t</svg>`\n\t\t\t\treturn [{\n\t\t\t\t\tncActionComponent: NcActionText,\n\t\t\t\t\tncActionComponentProps: {},\n\t\t\t\t\ticonSvg: this.userStatus.icon ? emojiIcon : undefined,\n\t\t\t\t\ttext: `${this.userStatus.message}`,\n\t\t\t\t}].concat(actions)\n\t\t\t}\n\n\t\t\treturn actions\n\t\t},\n\t},\n\n\twatch: {\n\t\turl() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t\tuser() {\n\t\t\tthis.userDoesNotExist = false\n\t\t\tthis.isMenuLoaded = false\n\t\t\tthis.loadAvatarUrl()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.loadAvatarUrl()\n\t\tsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tif (!this.preloadedUserStatus) {\n\t\t\t\tthis.fetchUserStatus(this.user)\n\t\t\t} else {\n\t\t\t\tthis.userStatus.status = this.preloadedUserStatus.status || ''\n\t\t\t\tthis.userStatus.message = this.preloadedUserStatus.message || ''\n\t\t\t\tthis.userStatus.icon = this.preloadedUserStatus.icon || ''\n\t\t\t\tthis.hasStatus = this.preloadedUserStatus.status !== null\n\t\t\t}\n\t\t\tsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tbeforeDestroy() {\n\t\tunsubscribe('settings:avatar:updated', this.loadAvatarUrl)\n\t\tunsubscribe('settings:display-name:updated', this.loadAvatarUrl)\n\t\tif (this.showUserStatus && this.user && !this.isNoUser) {\n\t\t\tunsubscribe('user_status:status.updated', this.handleUserStatusUpdated)\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\thandleUserStatusUpdated(state) {\n\t\t\tif (this.user === state.userId) {\n\t\t\t\tthis.userStatus = {\n\t\t\t\t\tstatus: state.status,\n\t\t\t\t\ticon: state.icon,\n\t\t\t\t\tmessage: state.message,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggle the popover menu on click or enter\n\t\t * @param {KeyboardEvent|MouseEvent} event the UI event\n\t\t */\n\t\tasync toggleMenu(event) {\n\t\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.contactsMenuOpenState) {\n\t\t\t\tawait this.fetchContactsMenu()\n\t\t\t}\n\t\t\tthis.contactsMenuOpenState = !this.contactsMenuOpenState\n\t\t},\n\t\tcloseMenu() {\n\t\t\tthis.contactsMenuOpenState = false\n\t\t},\n\t\tasync fetchContactsMenu() {\n\t\t\tthis.contactsMenuLoading = true\n\t\t\ttry {\n\t\t\t\tconst user = encodeURIComponent(this.user)\n\t\t\t\tconst { data } = await axios.post(generateUrl('contactsmenu/findOne'), `shareType=0&shareWith=${user}`)\n\t\t\t\tthis.contactsMenuData = data\n\t\t\t\tthis.contactsMenuActions = data.topAction ? [data.topAction].concat(data.actions) : data.actions\n\t\t\t} catch (e) {\n\t\t\t\tthis.contactsMenuOpenState = false\n\t\t\t}\n\t\t\tthis.contactsMenuLoading = false\n\t\t\tthis.isMenuLoaded = true\n\t\t},\n\n\t\t/**\n\t\t * Handle avatar loading if user or url defined\n\t\t */\n\t\tloadAvatarUrl() {\n\t\t\tthis.isAvatarLoaded = false\n\n\t\t\t/** Only run avatar image loading if either user or url property is defined */\n\t\t\tif (!this.isUrlDefined && (!this.isUserDefined || this.isNoUser)) {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Directly use the url if defined\n\t\t\tif (this.isUrlDefined) {\n\t\t\t\tthis.updateImageIfValid(this.url)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.size <= 64) {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 64)\n\t\t\t\tconst srcset = [\n\t\t\t\t\tavatarUrl + ' 1x',\n\t\t\t\t\tthis.avatarUrlGenerator(this.user, 512) + ' 8x',\n\t\t\t\t].join(', ')\n\n\t\t\t\tthis.updateImageIfValid(avatarUrl, srcset)\n\t\t\t} else {\n\t\t\t\tconst avatarUrl = this.avatarUrlGenerator(this.user, 512)\n\t\t\t\tthis.updateImageIfValid(avatarUrl)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Generate an avatar url from the server's avatar endpoint\n\t\t *\n\t\t * @param {string} user the user id\n\t\t * @param {number} size the desired size\n\t\t * @return {string}\n\t\t */\n\t\tavatarUrlGenerator(user, size) {\n\t\t\tlet avatarUrl = getAvatarUrl(user, size, this.isGuest)\n\n\t\t\t// eslint-disable-next-line camelcase\n\t\t\tif (user === getCurrentUser()?.uid && typeof oc_userconfig !== 'undefined') {\n\t\t\t\tavatarUrl += '?v=' + oc_userconfig.avatar.version\n\t\t\t}\n\n\t\t\treturn avatarUrl\n\t\t},\n\n\t\t/**\n\t\t * Check if the provided url is valid and update Avatar if so\n\t\t *\n\t\t * @param {string} url the avatar url\n\t\t * @param {Array} srcset the avatar srcset\n\t\t */\n\t\tupdateImageIfValid(url, srcset = null) {\n\t\t\t// skip loading\n\t\t\tconst userHasAvatar = getUserHasAvatar(this.user)\n\t\t\tif (this.isUserDefined && typeof userHasAvatar === 'boolean') {\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tif (userHasAvatar === false) {\n\t\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst img = new Image()\n\t\t\timg.onload = () => {\n\t\t\t\tthis.avatarUrlLoaded = url\n\t\t\t\tif (srcset) {\n\t\t\t\t\tthis.avatarSrcSetLoaded = srcset\n\t\t\t\t}\n\t\t\t\tthis.isAvatarLoaded = true\n\t\t\t\t// re-get to avoid concurrent access\n\t\t\t\tsetUserHasAvatar(this.user, true)\n\t\t\t}\n\t\t\timg.onerror = () => {\n\t\t\t\tconsole.debug('Invalid avatar url', url)\n\t\t\t\t// Avatar is invalid, reset\n\t\t\t\tthis.avatarUrlLoaded = null\n\t\t\t\tthis.avatarSrcSetLoaded = null\n\n\t\t\t\tthis.userDoesNotExist = true\n\t\t\t\tthis.isAvatarLoaded = false\n\t\t\t\tsetUserHasAvatar(this.user, false)\n\t\t\t}\n\n\t\t\tif (srcset) {\n\t\t\t\timg.srcset = srcset\n\t\t\t}\n\t\t\timg.src = url\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.avatardiv {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: var(--size);\n\theight: var(--size);\n\n\t&--unknown {\n\t\tposition: relative;\n\t\tbackground-color: var(--color-main-background);\n\t\twhite-space: normal;\n\t}\n\n\t&:not(&--unknown) {\n\t\t// White/black background for avatars with transparency\n\t\tbackground-color: var(--color-main-background) !important;\n\t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 0.05) inset;\n\t}\n\n\t&--with-menu {\n\t\tcursor: pointer;\n\t\t.action-item {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\t\t:deep(.action-item__menutoggle) {\n\t\t\tcursor: pointer;\n\t\t\topacity: 0;\n\t\t}\n\t\t&:focus-within,\n\t\t&:hover,\n\t\t&#{&}-loading {\n\t\t\t:deep(.action-item__menutoggle) {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\timg {\n\t\t\t\topacity: 0.3;\n\t\t\t}\n\t\t}\n\t\t:deep(.action-item__menutoggle),\n\t\timg {\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t}\n\t\t:deep() {\n\t\t\t.button-vue,\n\t\t\t.button-vue__icon {\n\t\t\t\theight: var(--size);\n\t\t\t\tmin-height: var(--size);\n\t\t\t\twidth: var(--size) !important;\n\t\t\t\tmin-width: var(--size);\n\t\t\t}\n\t\t}\n\t\t& > :deep(.button-vue),\n\t\t& > :deep(.action-item .button-vue) {\n\t\t\t--button-radius: calc(var(--size) / 2);\n\t\t}\n\t}\n\n\t.avatardiv__initials-wrapper {\n\t\tdisplay: block;\n\t\theight: var(--size);\n\t\twidth: var(--size);\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: calc(var(--size) / 2);\n\n\t\t.avatardiv__initials {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\ttext-align: center;\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\n\timg {\n\t\t// Cover entire area\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\t// Keep ratio\n\t\tobject-fit: cover;\n\t}\n\n\t.material-design-icon {\n\t\twidth: var(--size);\n\t\theight: var(--size);\n\t}\n\n\t.avatardiv__user-status {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset-inline-end: -4px;\n\t\tbottom: -4px;\n\t\tmin-height: 14px;\n\t\tmin-width: 14px;\n\t\tmax-height: 18px;\n\t\tmax-width: 18px;\n\t\theight: 40%;\n\t\twidth: 40%;\n\t\tline-height: 1;\n\t\tfont-size: clamp(var(--font-size-small, 13px), 85%, var(--default-font-size));\n\t\tborder: 2px solid var(--color-main-background);\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 16px;\n\t\tbackground-position: center;\n\t\tborder-radius: 50%;\n\n\t\t.acli:hover & {\n\t\t\tborder-color: var(--color-background-hover);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t\t.acli.active & {\n\t\t\tborder-color: var(--color-primary-element-light);\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t}\n\n\t\t&--icon {\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t.popovermenu-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t}\n}\n\n.avatar-class-icon {\n\tdisplay: block;\n\tborder-radius: calc(var(--size) / 2);\n\tbackground-color: var(--color-background-darker);\n\theight: 100%;\n}\n\n</style>\n"],"names":["ClickOutside"],"mappings":"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"}

package/dist/chunks/NcBlurHash-CJ8retHx.cjs

@@ -0,0 +1,115 @@
+require('../assets/NcBlurHash-7aGtE-_T.css');
+"use strict";
+const blurhash = require("blurhash");
+const Vue = require("vue");
+const logger = require("./logger-3HuiEIF6.cjs");
+const Functions_preloadImage = require("../Functions/preloadImage.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const fadeTransition = "_fadeTransition_13rtj_2";
+const fadeTransitionActive = "_fadeTransitionActive_13rtj_6";
+const style0 = {
+  fadeTransition,
+  fadeTransitionActive
+};
+const _sfc_main = {
+  __name: "NcBlurHash",
+  props: {
+    /**
+     * The blur hash value to use.
+     */
+    hash: {
+      required: true,
+      type: String
+    },
+    /**
+     * This is normally not needed, but if this blur hash is not only intended
+     * for decorative purpose, descriptive text should be passed for accessibility.
+     */
+    alt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Optional an image source to load, during the load the blur hash is shown.
+     * As soon as it is loaded the image will be shown instead.
+     */
+    src: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Emitted when the image (`src`) has been loaded.
+     */
+    "load"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const canvas = Vue.ref();
+    const imageLoaded = Vue.ref(false);
+    Vue.watch(() => props.hash, drawBlurHash);
+    Vue.watch(imageLoaded, () => {
+      if (imageLoaded.value === false) {
+        Vue.nextTick(() => drawBlurHash());
+      }
+    }, { immediate: true });
+    Vue.watch(() => props.src, () => {
+      imageLoaded.value = false;
+      if (props.src) {
+        Functions_preloadImage.preloadImage(props.src).then((success) => {
+          imageLoaded.value = success;
+          emit("load", success);
+        });
+      }
+    }, { immediate: true });
+    function drawBlurHash() {
+      if (imageLoaded.value) {
+        return;
+      }
+      if (!props.hash) {
+        logger.logger.error("Invalid BlurHash value");
+        return;
+      }
+      if (canvas.value === void 0) {
+        logger.logger.error("BlurHash canvas not available");
+        return;
+      }
+      const { height, width } = canvas.value;
+      const pixels = blurhash.decode(props.hash, width, height);
+      const ctx = canvas.value.getContext("2d");
+      if (ctx === null) {
+        logger.logger.error("Cannot create context for BlurHash canvas");
+        return;
+      }
+      const imageData = ctx.createImageData(width, height);
+      imageData.data.set(pixels);
+      ctx.putImageData(imageData, 0, 0);
+    }
+    return { __sfc: true, props, emit, canvas, imageLoaded, drawBlurHash };
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("Transition", { attrs: { "css": _vm.src ? void 0 : false, "enter-active-class": _vm.$style.fadeTransition, "leave-active-class": _vm.$style.fadeTransition, "enter-class": _vm.$style.fadeTransitionActive, "leave-to-class": _vm.$style.fadeTransitionActive } }, [!_setup.imageLoaded ? _c("canvas", { ref: "canvas", attrs: { "aria-hidden": _vm.alt ? null : "true", "aria-label": _vm.alt } }) : _c("img", { attrs: { "alt": _vm.alt, "src": _vm.src } })]);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcBlurHash = __component__.exports;
+exports.NcBlurHash = NcBlurHash;
+//# sourceMappingURL=NcBlurHash-CJ8retHx.cjs.map

package/dist/chunks/NcBlurHash-CJ8retHx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBlurHash-CJ8retHx.cjs","sources":["../../src/components/NcBlurHash/NcBlurHash.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## BlurHash\n\nA [blur hash](https://blurha.sh/) is a very compact representation of an image,\nthat can be used as a placeholder until the image was fully loaded.\n\n### Image placeholder\n\nThe default use case is as a placeholder that is transferred in initial state,\nwhile the real image will be fetched from the network.\nIn this case the image source can be passed to the component.\nThe component will immediately start to preload it,\nas soon as it is loaded the blur hash will be swapped with the real image and this component will behave like an `<a>`-element.\n\n```vue\n\t<template>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcBlurHash class=\"shown-image\"\n\t\t\t\t:hash=\"blurHash\"\n\t\t\t\t:src=\"imageSource\"\n\t\t\t\t@load=\"onLoaded\" />\n\n\t\t\t<NcButton @click=\"toggleImage\">\n\t\t\t\t{{\n\t\t\t\t\tloading\n\t\t\t\t\t\t? 'Loading...'\n\t\t\t\t\t\t: (loaded ? 'Unload image' : 'Load image')\n\t\t\t\t}}\n\t\t\t</NcButton>\n\t\t</div>\n\t</template>\n\t<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tloaded: false,\n\t\t\t\tloading: false,\n\t\t\t\tblurHash: 'M8CR]OkDD%kD9ZtRayofaykC00ay$_ay~T',\n\t\t\t}\n\t\t},\n\t\tcomputed: {\n\t\t\t// This is cheating but we can not emulate slow network connection\n\t\t\t// so imagine that this means the source becomes loaded\n\t\t\timageSource() {\n\t\t\t\treturn this.loaded\n\t\t\t\t\t? 'favicon-touch.png'\n\t\t\t\t\t: 'invalid-file-that-will-never-load.png'\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\ttoggleImage() {\n\t\t\t\tif (this.loaded) {\n\t\t\t\t\tthis.loaded = false\n\t\t\t\t\tthis.loading = false\n\t\t\t\t} else {\n\t\t\t\t\t// emulate slow network\n\t\t\t\t\tthis.loading = true\n\t\t\t\t\twindow.setTimeout(() => {\n\t\t\t\t\t\tthis.loaded = !this.loaded\n\t\t\t\t\t\tthis.loading = false\n\t\t\t\t\t}, 3000)\n\t\t\t\t}\n\t\t\t},\n\n\t\t\t// you could use `success` here (boolean) to decide if the image is loaded or failed\n\t\t\tonLoaded(success) {\n\t\t\t\t// ...\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 12px;\n\t\t}\n\n\t\t.shown-image {\n\t\t\twidth: 150px;\n\t\t\theight: 150px;\n\t\t\tborder-radius: 24px;\n\t\t}\n\t</style>\n```\n\n### Manual usage as a placeholder\n\nUsing `v-if` is also possible, this can e.g. used if the image is not loaded from an URL.\n\n```vue\n\t<template>\n\t\t<div class=\"wrapper\">\n\t\t\t<img :class=\"loaded ? 'shown-image' : 'hidden-visually'\"\n\t\t\t\talt=\"\"\n\t\t\t\tsrc=\"favicon-touch.png\">\n\t\t\t<NcBlurHash v-if=\"!loaded\"\n\t\t\t\tclass=\"shown-image\"\n\t\t\t\t:hash=\"blurHash\" />\n\t\t\t<NcButton @click=\"loaded = !loaded\">Toggle blur hash</NcButton>\n\t\t</div>\n\t</template>\n\t<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tloaded: false,\n\t\t\t\tblurHash: 'M8CR]OkDD%kD9ZtRayofaykC00ay$_ay~T',\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 12px;\n\t\t}\n\n\t\t.shown-image {\n\t\t\twidth: 150px;\n\t\t\theight: 150px;\n\t\t\tborder-radius: 24px;\n\t\t}\n\t</style>\n```\n</docs>\n\n<script setup>\nimport { decode } from 'blurhash'\nimport { ref, watch, nextTick } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { preloadImage } from '../../functions/preloadImage/index.ts'\n\nconst props = defineProps({\n\t/**\n\t * The blur hash value to use.\n\t */\n\thash: {\n\t\trequired: true,\n\t\ttype: String,\n\t},\n\n\t/**\n\t * This is normally not needed, but if this blur hash is not only intended\n\t * for decorative purpose, descriptive text should be passed for accessibility.\n\t */\n\talt: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Optional an image source to load, during the load the blur hash is shown.\n\t * As soon as it is loaded the image will be shown instead.\n\t */\n\tsrc: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n})\n\nconst emit = defineEmits([\n\t/**\n\t * Emitted when the image (`src`) has been loaded.\n\t */\n\t'load',\n])\n\nconst canvas = ref()\nconst imageLoaded = ref(false)\n\n// Redraw when hash has changed\nwatch(() => props.hash, drawBlurHash)\n// Redraw if image loaded again - also draw immediate on mount\nwatch(imageLoaded, () => {\n\tif (imageLoaded.value === false) {\n\t\t// We need to wait one tick to make sure the canvas is in the DOM\n\t\tnextTick(() => drawBlurHash())\n\t}\n}, { immediate: true })\n\n// Preload image on source change\nwatch(() => props.src, () => {\n\timageLoaded.value = false\n\tif (props.src) {\n\t\tpreloadImage(props.src)\n\t\t\t.then((success) => {\n\t\t\t\timageLoaded.value = success\n\t\t\t\temit('load', success)\n\t\t\t})\n\t}\n}, { immediate: true })\n\n/**\n * Render the BlurHash within the canvas\n */\nfunction drawBlurHash() {\n\tif (imageLoaded.value) {\n\t\t// skip\n\t\treturn\n\t}\n\n\tif (!props.hash) {\n\t\tlogger.error('Invalid BlurHash value')\n\t\treturn\n\t}\n\n\tif (canvas.value === undefined) {\n\t\t// Should never happen but better safe than sorry\n\t\tlogger.error('BlurHash canvas not available')\n\t\treturn\n\t}\n\n\tconst { height, width } = canvas.value\n\tconst pixels = decode(props.hash, width, height)\n\n\tconst ctx = canvas.value.getContext('2d')\n\tif (ctx === null) {\n\t\tlogger.error('Cannot create context for BlurHash canvas')\n\t\treturn\n\t}\n\n\tconst imageData = ctx.createImageData(width, height)\n\timageData.data.set(pixels)\n\tctx.putImageData(imageData, 0, 0)\n}\n</script>\n\n<template>\n\t<Transition :css=\"src ? undefined : false\"\n\t\t:enter-active-class=\"$style.fadeTransition\"\n\t\t:leave-active-class=\"$style.fadeTransition\"\n\t\t:enter-class=\"$style.fadeTransitionActive\"\n\t\t:leave-to-class=\"$style.fadeTransitionActive\">\n\t\t<canvas v-if=\"!imageLoaded\"\n\t\t\tref=\"canvas\"\n\t\t\t:aria-hidden=\"alt ? null : 'true'\"\n\t\t\t:aria-label=\"alt\" />\n\t\t<img v-else :alt=\"alt\" :src=\"src\">\n\t</Transition>\n</template>\n\n<style module>\n.fadeTransition {\n\ttransition: all var(--animation-quick) ease;\n}\n\n.fadeTransitionActive {\n\topacity: 0;\n\tposition: absolute;\n}\n</style>\n"],"names":["ref","watch","nextTick","preloadImage","logger","decode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgLA,UAAM,SAASA,IAAG,IAAA;AAClB,UAAM,cAAcA,IAAG,IAAC,KAAK;AAG7BC,QAAAA,MAAM,MAAM,MAAM,MAAM,YAAY;AAEpCA,QAAK,MAAC,aAAa,MAAM;AACxB,UAAI,YAAY,UAAU,OAAO;AAEhCC,YAAQ,SAAC,MAAM,aAAc,CAAA;AAAA,MAC/B;AAAA,IACA,GAAG,EAAE,WAAW,KAAM,CAAA;AAGtBD,QAAAA,MAAM,MAAM,MAAM,KAAK,MAAM;AAC5B,kBAAY,QAAQ;AACpB,UAAI,MAAM,KAAK;AACdE,+BAAY,aAAC,MAAM,GAAG,EACpB,KAAK,CAAC,YAAY;AAClB,sBAAY,QAAQ;AACpB,eAAK,QAAQ,OAAO;AAAA,QACpB,CAAA;AAAA,MACJ;AAAA,IACA,GAAG,EAAE,WAAW,KAAM,CAAA;AAKtB,aAAS,eAAe;AACvB,UAAI,YAAY,OAAO;AAEtB;AAAA,MACF;AAEC,UAAI,CAAC,MAAM,MAAM;AAChBC,eAAM,OAAC,MAAM,wBAAwB;AACrC;AAAA,MACF;AAEC,UAAI,OAAO,UAAU,QAAW;AAE/BA,eAAM,OAAC,MAAM,+BAA+B;AAC5C;AAAA,MACF;AAEC,YAAM,EAAE,QAAQ,MAAO,IAAG,OAAO;AACjC,YAAM,SAASC,SAAM,OAAC,MAAM,MAAM,OAAO,MAAM;AAE/C,YAAM,MAAM,OAAO,MAAM,WAAW,IAAI;AACxC,UAAI,QAAQ,MAAM;AACjBD,eAAM,OAAC,MAAM,2CAA2C;AACxD;AAAA,MACF;AAEC,YAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,gBAAU,KAAK,IAAI,MAAM;AACzB,UAAI,aAAa,WAAW,GAAG,CAAC;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcBlurHash-do2wxY-0.mjs

@@ -0,0 +1,116 @@
+import '../assets/NcBlurHash-7aGtE-_T.css';
+import { decode } from "blurhash";
+import { ref, watch, nextTick } from "vue";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
+import { preloadImage } from "../Functions/preloadImage.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const fadeTransition = "_fadeTransition_13rtj_2";
+const fadeTransitionActive = "_fadeTransitionActive_13rtj_6";
+const style0 = {
+  fadeTransition,
+  fadeTransitionActive
+};
+const _sfc_main = {
+  __name: "NcBlurHash",
+  props: {
+    /**
+     * The blur hash value to use.
+     */
+    hash: {
+      required: true,
+      type: String
+    },
+    /**
+     * This is normally not needed, but if this blur hash is not only intended
+     * for decorative purpose, descriptive text should be passed for accessibility.
+     */
+    alt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Optional an image source to load, during the load the blur hash is shown.
+     * As soon as it is loaded the image will be shown instead.
+     */
+    src: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Emitted when the image (`src`) has been loaded.
+     */
+    "load"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const canvas = ref();
+    const imageLoaded = ref(false);
+    watch(() => props.hash, drawBlurHash);
+    watch(imageLoaded, () => {
+      if (imageLoaded.value === false) {
+        nextTick(() => drawBlurHash());
+      }
+    }, { immediate: true });
+    watch(() => props.src, () => {
+      imageLoaded.value = false;
+      if (props.src) {
+        preloadImage(props.src).then((success) => {
+          imageLoaded.value = success;
+          emit("load", success);
+        });
+      }
+    }, { immediate: true });
+    function drawBlurHash() {
+      if (imageLoaded.value) {
+        return;
+      }
+      if (!props.hash) {
+        logger.error("Invalid BlurHash value");
+        return;
+      }
+      if (canvas.value === void 0) {
+        logger.error("BlurHash canvas not available");
+        return;
+      }
+      const { height, width } = canvas.value;
+      const pixels = decode(props.hash, width, height);
+      const ctx = canvas.value.getContext("2d");
+      if (ctx === null) {
+        logger.error("Cannot create context for BlurHash canvas");
+        return;
+      }
+      const imageData = ctx.createImageData(width, height);
+      imageData.data.set(pixels);
+      ctx.putImageData(imageData, 0, 0);
+    }
+    return { __sfc: true, props, emit, canvas, imageLoaded, drawBlurHash };
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("Transition", { attrs: { "css": _vm.src ? void 0 : false, "enter-active-class": _vm.$style.fadeTransition, "leave-active-class": _vm.$style.fadeTransition, "enter-class": _vm.$style.fadeTransitionActive, "leave-to-class": _vm.$style.fadeTransitionActive } }, [!_setup.imageLoaded ? _c("canvas", { ref: "canvas", attrs: { "aria-hidden": _vm.alt ? null : "true", "aria-label": _vm.alt } }) : _c("img", { attrs: { "alt": _vm.alt, "src": _vm.src } })]);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcBlurHash = __component__.exports;
+export {
+  NcBlurHash as N
+};
+//# sourceMappingURL=NcBlurHash-do2wxY-0.mjs.map

package/dist/chunks/NcBlurHash-do2wxY-0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBlurHash-do2wxY-0.mjs","sources":["../../src/components/NcBlurHash/NcBlurHash.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## BlurHash\n\nA [blur hash](https://blurha.sh/) is a very compact representation of an image,\nthat can be used as a placeholder until the image was fully loaded.\n\n### Image placeholder\n\nThe default use case is as a placeholder that is transferred in initial state,\nwhile the real image will be fetched from the network.\nIn this case the image source can be passed to the component.\nThe component will immediately start to preload it,\nas soon as it is loaded the blur hash will be swapped with the real image and this component will behave like an `<a>`-element.\n\n```vue\n\t<template>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcBlurHash class=\"shown-image\"\n\t\t\t\t:hash=\"blurHash\"\n\t\t\t\t:src=\"imageSource\"\n\t\t\t\t@load=\"onLoaded\" />\n\n\t\t\t<NcButton @click=\"toggleImage\">\n\t\t\t\t{{\n\t\t\t\t\tloading\n\t\t\t\t\t\t? 'Loading...'\n\t\t\t\t\t\t: (loaded ? 'Unload image' : 'Load image')\n\t\t\t\t}}\n\t\t\t</NcButton>\n\t\t</div>\n\t</template>\n\t<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tloaded: false,\n\t\t\t\tloading: false,\n\t\t\t\tblurHash: 'M8CR]OkDD%kD9ZtRayofaykC00ay$_ay~T',\n\t\t\t}\n\t\t},\n\t\tcomputed: {\n\t\t\t// This is cheating but we can not emulate slow network connection\n\t\t\t// so imagine that this means the source becomes loaded\n\t\t\timageSource() {\n\t\t\t\treturn this.loaded\n\t\t\t\t\t? 'favicon-touch.png'\n\t\t\t\t\t: 'invalid-file-that-will-never-load.png'\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\ttoggleImage() {\n\t\t\t\tif (this.loaded) {\n\t\t\t\t\tthis.loaded = false\n\t\t\t\t\tthis.loading = false\n\t\t\t\t} else {\n\t\t\t\t\t// emulate slow network\n\t\t\t\t\tthis.loading = true\n\t\t\t\t\twindow.setTimeout(() => {\n\t\t\t\t\t\tthis.loaded = !this.loaded\n\t\t\t\t\t\tthis.loading = false\n\t\t\t\t\t}, 3000)\n\t\t\t\t}\n\t\t\t},\n\n\t\t\t// you could use `success` here (boolean) to decide if the image is loaded or failed\n\t\t\tonLoaded(success) {\n\t\t\t\t// ...\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 12px;\n\t\t}\n\n\t\t.shown-image {\n\t\t\twidth: 150px;\n\t\t\theight: 150px;\n\t\t\tborder-radius: 24px;\n\t\t}\n\t</style>\n```\n\n### Manual usage as a placeholder\n\nUsing `v-if` is also possible, this can e.g. used if the image is not loaded from an URL.\n\n```vue\n\t<template>\n\t\t<div class=\"wrapper\">\n\t\t\t<img :class=\"loaded ? 'shown-image' : 'hidden-visually'\"\n\t\t\t\talt=\"\"\n\t\t\t\tsrc=\"favicon-touch.png\">\n\t\t\t<NcBlurHash v-if=\"!loaded\"\n\t\t\t\tclass=\"shown-image\"\n\t\t\t\t:hash=\"blurHash\" />\n\t\t\t<NcButton @click=\"loaded = !loaded\">Toggle blur hash</NcButton>\n\t\t</div>\n\t</template>\n\t<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tloaded: false,\n\t\t\t\tblurHash: 'M8CR]OkDD%kD9ZtRayofaykC00ay$_ay~T',\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 12px;\n\t\t}\n\n\t\t.shown-image {\n\t\t\twidth: 150px;\n\t\t\theight: 150px;\n\t\t\tborder-radius: 24px;\n\t\t}\n\t</style>\n```\n</docs>\n\n<script setup>\nimport { decode } from 'blurhash'\nimport { ref, watch, nextTick } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { preloadImage } from '../../functions/preloadImage/index.ts'\n\nconst props = defineProps({\n\t/**\n\t * The blur hash value to use.\n\t */\n\thash: {\n\t\trequired: true,\n\t\ttype: String,\n\t},\n\n\t/**\n\t * This is normally not needed, but if this blur hash is not only intended\n\t * for decorative purpose, descriptive text should be passed for accessibility.\n\t */\n\talt: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Optional an image source to load, during the load the blur hash is shown.\n\t * As soon as it is loaded the image will be shown instead.\n\t */\n\tsrc: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n})\n\nconst emit = defineEmits([\n\t/**\n\t * Emitted when the image (`src`) has been loaded.\n\t */\n\t'load',\n])\n\nconst canvas = ref()\nconst imageLoaded = ref(false)\n\n// Redraw when hash has changed\nwatch(() => props.hash, drawBlurHash)\n// Redraw if image loaded again - also draw immediate on mount\nwatch(imageLoaded, () => {\n\tif (imageLoaded.value === false) {\n\t\t// We need to wait one tick to make sure the canvas is in the DOM\n\t\tnextTick(() => drawBlurHash())\n\t}\n}, { immediate: true })\n\n// Preload image on source change\nwatch(() => props.src, () => {\n\timageLoaded.value = false\n\tif (props.src) {\n\t\tpreloadImage(props.src)\n\t\t\t.then((success) => {\n\t\t\t\timageLoaded.value = success\n\t\t\t\temit('load', success)\n\t\t\t})\n\t}\n}, { immediate: true })\n\n/**\n * Render the BlurHash within the canvas\n */\nfunction drawBlurHash() {\n\tif (imageLoaded.value) {\n\t\t// skip\n\t\treturn\n\t}\n\n\tif (!props.hash) {\n\t\tlogger.error('Invalid BlurHash value')\n\t\treturn\n\t}\n\n\tif (canvas.value === undefined) {\n\t\t// Should never happen but better safe than sorry\n\t\tlogger.error('BlurHash canvas not available')\n\t\treturn\n\t}\n\n\tconst { height, width } = canvas.value\n\tconst pixels = decode(props.hash, width, height)\n\n\tconst ctx = canvas.value.getContext('2d')\n\tif (ctx === null) {\n\t\tlogger.error('Cannot create context for BlurHash canvas')\n\t\treturn\n\t}\n\n\tconst imageData = ctx.createImageData(width, height)\n\timageData.data.set(pixels)\n\tctx.putImageData(imageData, 0, 0)\n}\n</script>\n\n<template>\n\t<Transition :css=\"src ? undefined : false\"\n\t\t:enter-active-class=\"$style.fadeTransition\"\n\t\t:leave-active-class=\"$style.fadeTransition\"\n\t\t:enter-class=\"$style.fadeTransitionActive\"\n\t\t:leave-to-class=\"$style.fadeTransitionActive\">\n\t\t<canvas v-if=\"!imageLoaded\"\n\t\t\tref=\"canvas\"\n\t\t\t:aria-hidden=\"alt ? null : 'true'\"\n\t\t\t:aria-label=\"alt\" />\n\t\t<img v-else :alt=\"alt\" :src=\"src\">\n\t</Transition>\n</template>\n\n<style module>\n.fadeTransition {\n\ttransition: all var(--animation-quick) ease;\n}\n\n.fadeTransitionActive {\n\topacity: 0;\n\tposition: absolute;\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgLA,UAAM,SAAS,IAAG;AAClB,UAAM,cAAc,IAAI,KAAK;AAG7B,UAAM,MAAM,MAAM,MAAM,YAAY;AAEpC,UAAM,aAAa,MAAM;AACxB,UAAI,YAAY,UAAU,OAAO;AAEhC,iBAAS,MAAM,aAAc,CAAA;AAAA,MAC/B;AAAA,IACA,GAAG,EAAE,WAAW,KAAM,CAAA;AAGtB,UAAM,MAAM,MAAM,KAAK,MAAM;AAC5B,kBAAY,QAAQ;AACpB,UAAI,MAAM,KAAK;AACd,qBAAa,MAAM,GAAG,EACpB,KAAK,CAAC,YAAY;AAClB,sBAAY,QAAQ;AACpB,eAAK,QAAQ,OAAO;AAAA,QACpB,CAAA;AAAA,MACJ;AAAA,IACA,GAAG,EAAE,WAAW,KAAM,CAAA;AAKtB,aAAS,eAAe;AACvB,UAAI,YAAY,OAAO;AAEtB;AAAA,MACF;AAEC,UAAI,CAAC,MAAM,MAAM;AAChB,eAAO,MAAM,wBAAwB;AACrC;AAAA,MACF;AAEC,UAAI,OAAO,UAAU,QAAW;AAE/B,eAAO,MAAM,+BAA+B;AAC5C;AAAA,MACF;AAEC,YAAM,EAAE,QAAQ,MAAO,IAAG,OAAO;AACjC,YAAM,SAAS,OAAO,MAAM,MAAM,OAAO,MAAM;AAE/C,YAAM,MAAM,OAAO,MAAM,WAAW,IAAI;AACxC,UAAI,QAAQ,MAAM;AACjB,eAAO,MAAM,2CAA2C;AACxD;AAAA,MACF;AAEC,YAAM,YAAY,IAAI,gBAAgB,OAAO,MAAM;AACnD,gBAAU,KAAK,IAAI,MAAM;AACzB,UAAI,aAAa,WAAW,GAAG,CAAC;AAAA,IACjC;;;;;;;;;;;;;;;;;;;;;;;;;;"}