@nextcloud/vue 9.0.0-rc.1 → 9.0.0-rc.2

package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-BK7HxZja.mjs → NcTimezonePicker.vue_vue_type_script_setup_true_lang-T3gPr-FV.mjs}

@@ -1,8 +1,8 @@
 import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref } from "vue";
 import { getTimezoneManager as getTimezoneManager$1, getReadableTimezoneName, getSortedTimezoneList } from "@nextcloud/timezones";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { r as register, a as t } from "./_l10n-dinIMiE_.mjs";
-import { N as NcSelect } from "./NcSelect-DFMnY4fI.mjs";
+import { r as register, a as t } from "./_l10n-Bg-fZ9R0.mjs";
+import { N as NcSelect } from "./NcSelect-BSa2kSPW.mjs";
 register();
 const timezoneManager = getTimezoneManager$1();
 let initialized = false;
@@ -95,4 +95,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-BK7HxZja.mjs.map
+//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-T3gPr-FV.mjs.map

package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-BK7HxZja.mjs.map → NcTimezonePicker.vue_vue_type_script_setup_true_lang-T3gPr-FV.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcTimezonePicker.vue_vue_type_script_setup_true_lang-BK7HxZja.mjs","sources":["../../src/components/NcTimezonePicker/timezoneDataProviderService.ts","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getTimezoneManager } from '@nextcloud/timezones'\n\nconst timezoneManager = getTimezoneManager()\nlet initialized = false\n\n/**\n * Gets the timezone-manager\n * initializes it if necessary\n *\n * @return {object}\n */\nexport default function() {\n\tif (!initialized) {\n\t\ttimezoneManager.registerDefaultTimezones()\n\t\tinitialized = true\n\t}\n\n\treturn timezoneManager\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcTimezonePicker v-model=\"tz\" />\n\t\t{{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttz: 'Hawaiian Standard Time',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type {\n\tIContinent,\n\tITimezone,\n\tIRegion,\n} from '@nextcloud/timezones'\n\nimport {\n\tgetReadableTimezoneName,\n\tgetSortedTimezoneList,\n} from '@nextcloud/timezones'\nimport { computed } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\nimport getTimezoneManager from './timezoneDataProviderService.js'\nimport NcSelect from '../NcSelect/index.js'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data\n\t */\n\tadditionalTimezones?: ITimezone[]\n\n\t/**\n\t * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`\n\t */\n\tuid?: string\n}>(), {\n\tadditionalTimezones: () => [],\n\tuid: createElementId(),\n})\n\n/**\n * The selected timezone.\n * Use v-model for two-way binding.\n * The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.\n */\nconst modelValue = defineModel<string>({ default: 'floating' })\n\nconst selectedTimezone = computed({\n\tset(timezone: IRegion) {\n\t\tmodelValue.value = timezone.timezoneId\n\t},\n\tget(): IRegion {\n\t\tfor (const additionalTimezone of props.additionalTimezones) {\n\t\t\tif (additionalTimezone.timezoneId === modelValue.value) {\n\t\t\t\treturn {\n\t\t\t\t\tcities: [],\n\t\t\t\t\t...additionalTimezone,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tlabel: getReadableTimezoneName(modelValue.value),\n\t\t\ttimezoneId: modelValue.value,\n\t\t\tcities: [],\n\t\t}\n\t},\n})\n\nconst options = computed(() => {\n\tconst timezoneManager = getTimezoneManager()\n\tconst timezoneList: IContinent[] = getSortedTimezoneList(\n\t\ttimezoneManager.listAllTimezones(),\n\t\tprops.additionalTimezones,\n\t\tt('Global'), // TRANSLATORS: This refers to global timezones in the timezone picker\n\t)\n\t/**\n\t * Since NcSelect does not support groups,\n\t * we create an object with the grouped timezones and continent labels.\n\t *\n\t * NOTE for now we are removing the grouping from the fields to fix an accessibility issue\n\t * in the future, other options can be introduced to better display the different areas\n\t */\n\tconst timezonesGrouped: IRegion[] = []\n\tfor (const group of Object.values(timezoneList)) {\n\t\t// Add an entry as group label\n\t\t// const continent = `tz-group__${group.continent}`\n\t\t// timezonesGrouped.push({\n\t\t// label: group.continent,\n\t\t// continent,\n\t\t// timezoneId: continent,\n\t\t// regions: group.regions,\n\t\t// })\n\t\ttimezonesGrouped.push(...group.regions)\n\t}\n\treturn timezonesGrouped\n})\n\n/**\n * Returns whether this is a continent label,\n * or an actual timezone. Continent labels are not selectable.\n *\n * @param option The option\n */\nfunction isSelectable(option: IRegion): boolean {\n\treturn !option.timezoneId.startsWith('tz-group__')\n}\n\n/**\n * Function to filter the timezone list.\n * We search in the timezoneId, so both continent and region names can be matched.\n *\n * @param option - The timezone option\n * @param label - The label of the timezone\n * @param search - The search string\n */\nfunction filterBy(option: IContinent | IRegion, label: string, search: string): boolean {\n\t// We split the search term in case one searches \"<continent> <region>\".\n\tconst terms = search.trim().split(' ')\n\n\t// For the continent labels, we have to check if one region matches every search term.\n\tif ('continent' in option) {\n\t\treturn option.regions.some(region => {\n\t\t\treturn matchTimezoneId(region.timezoneId, terms)\n\t\t})\n\t}\n\n\t// For a region, every search term must be found.\n\treturn matchTimezoneId(option.timezoneId, terms)\n}\n\n/**\n * @param timezoneId - The timezone id to check\n * @param terms - Terms to validate\n */\nfunction matchTimezoneId(timezoneId: string, terms: string[]): boolean {\n\treturn terms.every((term) => timezoneId.toLowerCase().includes(term.toLowerCase()))\n}\n</script>\n\n<template>\n\t<NcSelect v-model=\"selectedTimezone\"\n\t\t:aria-label-combobox=\"t('Search for timezone')\"\n\t\t:clearable=\"false\"\n\t\t:filter-by\n\t\t:multiple=\"false\"\n\t\t:options\n\t\t:placeholder=\"t('Type to search time zone')\"\n\t\t:selectable=\"isSelectable\"\n\t\t:uid\n\t\tlabel=\"label\" />\n</template>\n"],"names":["getTimezoneManager","_useModel","timezoneManager"],"mappings":";;;;;;AAOA,MAAM,kBAAkBA,qBAAmB;AAC3C,IAAI,cAAc;AAQQ,SAAA,qBAAA;AACzB,MAAI,CAAC,aAAa;AACjB,oBAAgB,yBAAyB;AAC3B,kBAAA;AAAA,EAAA;AAGR,SAAA;AACR;;;;;;;;;;;;ACoBA,UAAM,QAAQ;AAoBR,UAAA,aAAaC,SAA2C,SAAA,YAAA;AAE9D,UAAM,mBAAmB,SAAS;AAAA,MACjC,IAAI,UAAmB;AACtB,mBAAW,QAAQ,SAAS;AAAA,MAC7B;AAAA,MACA,MAAe;AACH,mBAAA,sBAAsB,MAAM,qBAAqB;AACvD,cAAA,mBAAmB,eAAe,WAAW,OAAO;AAChD,mBAAA;AAAA,cACN,QAAQ,CAAC;AAAA,cACT,GAAG;AAAA,YACJ;AAAA,UAAA;AAAA,QACD;AAGM,eAAA;AAAA,UACN,OAAO,wBAAwB,WAAW,KAAK;AAAA,UAC/C,YAAY,WAAW;AAAA,UACvB,QAAQ,CAAA;AAAA,QACT;AAAA,MAAA;AAAA,IACD,CACA;AAEK,UAAA,UAAU,SAAS,MAAM;AAC9B,YAAMC,mBAAkB,mBAAmB;AAC3C,YAAM,eAA6B;AAAA,QAClCA,iBAAgB,iBAAiB;AAAA,QACjC,MAAM;AAAA,QACN,EAAE,QAAQ;AAAA;AAAA,MACX;AAQA,YAAM,mBAA8B,CAAC;AACrC,iBAAW,SAAS,OAAO,OAAO,YAAY,GAAG;AAS/B,yBAAA,KAAK,GAAG,MAAM,OAAO;AAAA,MAAA;AAEhC,aAAA;AAAA,IAAA,CACP;AAQD,aAAS,aAAa,QAA0B;AAC/C,aAAO,CAAC,OAAO,WAAW,WAAW,YAAY;AAAA,IAAA;AAWzC,aAAA,SAAS,QAA8B,OAAe,QAAyB;AAEvF,YAAM,QAAQ,OAAO,KAAK,EAAE,MAAM,GAAG;AAGrC,UAAI,eAAe,QAAQ;AACnB,eAAA,OAAO,QAAQ,KAAK,CAAU,WAAA;AAC7B,iBAAA,gBAAgB,OAAO,YAAY,KAAK;AAAA,QAAA,CAC/C;AAAA,MAAA;AAIK,aAAA,gBAAgB,OAAO,YAAY,KAAK;AAAA,IAAA;AAOvC,aAAA,gBAAgB,YAAoB,OAA0B;AAC/D,aAAA,MAAM,MAAM,CAAC,SAAS,WAAW,YAAY,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC;AAAA,IAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcTimezonePicker.vue_vue_type_script_setup_true_lang-T3gPr-FV.mjs","sources":["../../src/components/NcTimezonePicker/timezoneDataProviderService.ts","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getTimezoneManager } from '@nextcloud/timezones'\n\nconst timezoneManager = getTimezoneManager()\nlet initialized = false\n\n/**\n * Gets the timezone-manager\n * initializes it if necessary\n *\n * @return {object}\n */\nexport default function() {\n\tif (!initialized) {\n\t\ttimezoneManager.registerDefaultTimezones()\n\t\tinitialized = true\n\t}\n\n\treturn timezoneManager\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcTimezonePicker v-model=\"tz\" />\n\t\t{{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttz: 'Hawaiian Standard Time',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type {\n\tIContinent,\n\tITimezone,\n\tIRegion,\n} from '@nextcloud/timezones'\n\nimport {\n\tgetReadableTimezoneName,\n\tgetSortedTimezoneList,\n} from '@nextcloud/timezones'\nimport { computed } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\nimport getTimezoneManager from './timezoneDataProviderService.js'\nimport NcSelect from '../NcSelect/index.js'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data\n\t */\n\tadditionalTimezones?: ITimezone[]\n\n\t/**\n\t * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`\n\t */\n\tuid?: string\n}>(), {\n\tadditionalTimezones: () => [],\n\tuid: createElementId(),\n})\n\n/**\n * The selected timezone.\n * Use v-model for two-way binding.\n * The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.\n */\nconst modelValue = defineModel<string>({ default: 'floating' })\n\nconst selectedTimezone = computed({\n\tset(timezone: IRegion) {\n\t\tmodelValue.value = timezone.timezoneId\n\t},\n\tget(): IRegion {\n\t\tfor (const additionalTimezone of props.additionalTimezones) {\n\t\t\tif (additionalTimezone.timezoneId === modelValue.value) {\n\t\t\t\treturn {\n\t\t\t\t\tcities: [],\n\t\t\t\t\t...additionalTimezone,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tlabel: getReadableTimezoneName(modelValue.value),\n\t\t\ttimezoneId: modelValue.value,\n\t\t\tcities: [],\n\t\t}\n\t},\n})\n\nconst options = computed(() => {\n\tconst timezoneManager = getTimezoneManager()\n\tconst timezoneList: IContinent[] = getSortedTimezoneList(\n\t\ttimezoneManager.listAllTimezones(),\n\t\tprops.additionalTimezones,\n\t\tt('Global'), // TRANSLATORS: This refers to global timezones in the timezone picker\n\t)\n\t/**\n\t * Since NcSelect does not support groups,\n\t * we create an object with the grouped timezones and continent labels.\n\t *\n\t * NOTE for now we are removing the grouping from the fields to fix an accessibility issue\n\t * in the future, other options can be introduced to better display the different areas\n\t */\n\tconst timezonesGrouped: IRegion[] = []\n\tfor (const group of Object.values(timezoneList)) {\n\t\t// Add an entry as group label\n\t\t// const continent = `tz-group__${group.continent}`\n\t\t// timezonesGrouped.push({\n\t\t// label: group.continent,\n\t\t// continent,\n\t\t// timezoneId: continent,\n\t\t// regions: group.regions,\n\t\t// })\n\t\ttimezonesGrouped.push(...group.regions)\n\t}\n\treturn timezonesGrouped\n})\n\n/**\n * Returns whether this is a continent label,\n * or an actual timezone. Continent labels are not selectable.\n *\n * @param option The option\n */\nfunction isSelectable(option: IRegion): boolean {\n\treturn !option.timezoneId.startsWith('tz-group__')\n}\n\n/**\n * Function to filter the timezone list.\n * We search in the timezoneId, so both continent and region names can be matched.\n *\n * @param option - The timezone option\n * @param label - The label of the timezone\n * @param search - The search string\n */\nfunction filterBy(option: IContinent | IRegion, label: string, search: string): boolean {\n\t// We split the search term in case one searches \"<continent> <region>\".\n\tconst terms = search.trim().split(' ')\n\n\t// For the continent labels, we have to check if one region matches every search term.\n\tif ('continent' in option) {\n\t\treturn option.regions.some(region => {\n\t\t\treturn matchTimezoneId(region.timezoneId, terms)\n\t\t})\n\t}\n\n\t// For a region, every search term must be found.\n\treturn matchTimezoneId(option.timezoneId, terms)\n}\n\n/**\n * @param timezoneId - The timezone id to check\n * @param terms - Terms to validate\n */\nfunction matchTimezoneId(timezoneId: string, terms: string[]): boolean {\n\treturn terms.every((term) => timezoneId.toLowerCase().includes(term.toLowerCase()))\n}\n</script>\n\n<template>\n\t<NcSelect v-model=\"selectedTimezone\"\n\t\t:aria-label-combobox=\"t('Search for timezone')\"\n\t\t:clearable=\"false\"\n\t\t:filter-by\n\t\t:multiple=\"false\"\n\t\t:options\n\t\t:placeholder=\"t('Type to search time zone')\"\n\t\t:selectable=\"isSelectable\"\n\t\t:uid\n\t\tlabel=\"label\" />\n</template>\n"],"names":["getTimezoneManager","_useModel","timezoneManager"],"mappings":";;;;;;AAOA,MAAM,kBAAkBA,qBAAmB;AAC3C,IAAI,cAAc;AAQQ,SAAA,qBAAA;AACzB,MAAI,CAAC,aAAa;AACjB,oBAAgB,yBAAyB;AAC3B,kBAAA;AAAA,EAAA;AAGR,SAAA;AACR;;;;;;;;;;;;ACoBA,UAAM,QAAQ;AAoBR,UAAA,aAAaC,SAA2C,SAAA,YAAA;AAE9D,UAAM,mBAAmB,SAAS;AAAA,MACjC,IAAI,UAAmB;AACtB,mBAAW,QAAQ,SAAS;AAAA,MAC7B;AAAA,MACA,MAAe;AACH,mBAAA,sBAAsB,MAAM,qBAAqB;AACvD,cAAA,mBAAmB,eAAe,WAAW,OAAO;AAChD,mBAAA;AAAA,cACN,QAAQ,CAAC;AAAA,cACT,GAAG;AAAA,YACJ;AAAA,UAAA;AAAA,QACD;AAGM,eAAA;AAAA,UACN,OAAO,wBAAwB,WAAW,KAAK;AAAA,UAC/C,YAAY,WAAW;AAAA,UACvB,QAAQ,CAAA;AAAA,QACT;AAAA,MAAA;AAAA,IACD,CACA;AAEK,UAAA,UAAU,SAAS,MAAM;AAC9B,YAAMC,mBAAkB,mBAAmB;AAC3C,YAAM,eAA6B;AAAA,QAClCA,iBAAgB,iBAAiB;AAAA,QACjC,MAAM;AAAA,QACN,EAAE,QAAQ;AAAA;AAAA,MACX;AAQA,YAAM,mBAA8B,CAAC;AACrC,iBAAW,SAAS,OAAO,OAAO,YAAY,GAAG;AAS/B,yBAAA,KAAK,GAAG,MAAM,OAAO;AAAA,MAAA;AAEhC,aAAA;AAAA,IAAA,CACP;AAQD,aAAS,aAAa,QAA0B;AAC/C,aAAO,CAAC,OAAO,WAAW,WAAW,YAAY;AAAA,IAAA;AAWzC,aAAA,SAAS,QAA8B,OAAe,QAAyB;AAEvF,YAAM,QAAQ,OAAO,KAAK,EAAE,MAAM,GAAG;AAGrC,UAAI,eAAe,QAAQ;AACnB,eAAA,OAAO,QAAQ,KAAK,CAAU,WAAA;AAC7B,iBAAA,gBAAgB,OAAO,YAAY,KAAK;AAAA,QAAA,CAC/C;AAAA,MAAA;AAIK,aAAA,gBAAgB,OAAO,YAAY,KAAK;AAAA,IAAA;AAOvC,aAAA,gBAAgB,YAAoB,OAA0B;AAC/D,aAAA,MAAM,MAAM,CAAC,SAAS,WAAW,YAAY,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC;AAAA,IAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcUserBubble-CnsRuBNe.mjs → NcUserBubble-Csot0WLv.mjs}

@@ -1,8 +1,8 @@
 import '../assets/NcUserBubble-tSs2XTDQ.css';
 import { createElementBlock, openBlock, renderSlot, resolveComponent, createBlock, resolveDynamicComponent, withCtx, mergeProps, createVNode, createElementVNode, createCommentVNode, normalizeStyle, toDisplayString, warn } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcAvatar } from "./NcAvatar-Cg9PDzho.mjs";
-import { N as NcPopover } from "./NcPopover-CzrFCS-2.mjs";
+import { N as NcAvatar } from "./NcAvatar-CSk-1oFe.mjs";
+import { N as NcPopover } from "./NcPopover-MsWUAvsI.mjs";
 import { RouterLink } from "vue-router";
 const _sfc_main$1 = {
   name: "NcUserBubbleDiv"
@@ -225,4 +225,4 @@ const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_ren
 export {
   NcUserBubble as N
 };
-//# sourceMappingURL=NcUserBubble-CnsRuBNe.mjs.map
+//# sourceMappingURL=NcUserBubble-Csot0WLv.mjs.map

package/dist/chunks/{NcUserBubble-CnsRuBNe.mjs.map → NcUserBubble-Csot0WLv.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcUserBubble-CnsRuBNe.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nexport default {\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"!!$slots.default ? 'NcPopover' : 'NcUserBubbleDiv'\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:to=\"to\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:show-user-status=\"showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"!!$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { warn } from 'vue'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\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 * Displayed label\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 * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (url) => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url, url?.startsWith?.('/') ? window.location.href : undefined)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Use bubble as a router-link for in-app navigation\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\tif (this.hasUrl) {\n\t\t\t\treturn 'a'\n\t\t\t} else if (this.to) {\n\t\t\t\treturn RouterLink\n\t\t\t} else {\n\t\t\t\treturn 'div'\n\t\t\t}\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginInlineStart: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmounted() {\n\t\tif (!this.displayName && !this.user) {\n\t\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t\t}\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius end padding\n\t\t\tpadding-inline-end: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding-block: 0;\n\t\tpadding-inline: 4px 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_renderSlot","_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_mergeProps","_createVNode","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"NcUserBubble-Csot0WLv.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nexport default {\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"!!$slots.default ? 'NcPopover' : 'NcUserBubbleDiv'\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:to=\"to\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:show-user-status=\"showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"!!$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { warn } from 'vue'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\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 * Displayed label\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 * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (url) => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url, url?.startsWith?.('/') ? window.location.href : undefined)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Use bubble as a router-link for in-app navigation\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\tif (this.hasUrl) {\n\t\t\t\treturn 'a'\n\t\t\t} else if (this.to) {\n\t\t\t\treturn RouterLink\n\t\t\t} else {\n\t\t\t\treturn 'div'\n\t\t\t}\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginInlineStart: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmounted() {\n\t\tif (!this.displayName && !this.user) {\n\t\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t\t}\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius end padding\n\t\t\tpadding-inline-end: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding-block: 0;\n\t\tpadding-inline: 4px 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_renderSlot","_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_mergeProps","_createVNode","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":"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"}

package/dist/chunks/{NcUserStatusIcon-M_93a-z6.mjs → NcUserStatusIcon-CtOZd90o.mjs}

@@ -1,14 +1,11 @@
-import '../assets/NcUserStatusIcon-Du-BEPk_.css';
+import '../assets/NcUserStatusIcon-CtJLt6AU.css';
+import { defineComponent, mergeModels, useModel, computed, watch, createElementBlock, createCommentVNode, openBlock, normalizeClass } from "vue";
 import axios from "@nextcloud/axios";
 import { generateOcsUrl } from "@nextcloud/router";
 import { getCapabilities } from "@nextcloud/capabilities";
-import { r as register, H as t10, a as t, I as t47 } from "./_l10n-dinIMiE_.mjs";
-import { createElementBlock, createCommentVNode, openBlock, normalizeClass } from "vue";
+import { r as register, G as t10, a as t } from "./_l10n-Bg-fZ9R0.mjs";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="var(--color-success)" d="M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n</svg>\n';
-const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4z" />\n	<path fill="var(--color-warning)" d="M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z" />\n</svg>\n';
-const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path fill="var(--color-error)" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n	<path fill="#fdffff" d="M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z" />\n</svg>\n';
-const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z" />\n</svg>\n';
 register(t10);
 const getUserStatusText = (status) => {
   switch (status) {
@@ -29,109 +26,63 @@ const getUserStatusText = (status) => {
       return status;
   }
 };
-register(t47);
-const _sfc_main = {
-  name: "NcUserStatusIcon",
-  props: {
-    /**
-     * Set the user id to fetch the status
-     */
-    user: {
-      type: String,
-      default: null
-    },
-    /**
-     * Set the status
-     *
-     * @type {'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'}
-     */
-    status: {
-      type: String,
-      default: null,
-      validator: (value) => [
-        "online",
-        "away",
-        "busy",
-        "dnd",
-        "invisible",
-        "offline"
-      ].includes(value)
-    },
-    /**
-     * Set the `aria-hidden` attribute
-     *
-     * @type {'true' | 'false'}
-     */
-    ariaHidden: {
-      type: String,
-      default: null,
-      validator: (value) => [
-        "true",
-        "false"
-      ].includes(value)
-    }
-  },
-  data() {
-    return {
-      fetchedUserStatus: null
-    };
-  },
-  computed: {
-    activeStatus() {
-      return this.status ?? this.fetchedUserStatus;
-    },
-    activeSvg() {
-      const matchSvg = {
-        online: onlineSvg,
-        away: awaySvg,
-        busy: awaySvg,
-        dnd: dndSvg,
-        invisible: invisibleSvg,
-        offline: invisibleSvg
-      };
-      return matchSvg[this.activeStatus] ?? null;
-    },
-    ariaLabel() {
-      if (this.ariaHidden === "true") {
-        return null;
-      }
-      return t("User status: {status}", { status: getUserStatusText(this.activeStatus) });
-    }
-  },
-  watch: {
-    user: {
-      immediate: true,
-      async handler(user) {
-        if (!user || !getCapabilities()?.user_status?.enabled) {
-          this.fetchedUserStatus = null;
-          return;
-        }
+register();
+const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="var(--color-success)" d="M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n</svg>\n';
+const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4z" />\n	<path fill="var(--color-warning)" d="M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z" />\n</svg>\n';
+const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path fill="var(--color-error)" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n	<path fill="#fdffff" d="M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z" />\n</svg>\n';
+const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z" />\n</svg>\n';
+const _hoisted_1 = ["aria-hidden", "aria-label", "innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcUserStatusIcon",
+  props: /* @__PURE__ */ mergeModels({
+    user: { default: void 0 },
+    ariaHidden: { type: [Boolean, String], default: false }
+  }, {
+    "status": {},
+    "statusModifiers": {}
+  }),
+  emits: ["update:status"],
+  setup(__props) {
+    const props = __props;
+    const status = useModel(__props, "status");
+    const isInvisible = computed(() => status.value && ["invisible", "offline"].includes(status.value));
+    const ariaLabel = computed(() => status.value && (!props.ariaHidden || props.ariaHidden === "false") ? t("User status: {status}", { status: getUserStatusText(status.value) }) : void 0);
+    watch(() => props.user, async (user) => {
+      if (!status.value && user && getCapabilities()?.user_status?.enabled) {
         try {
           const { data } = await axios.get(generateOcsUrl("/apps/user_status/api/v1/statuses/{user}", { user }));
-          this.fetchedUserStatus = data.ocs?.data?.status;
+          status.value = data.ocs?.data?.status;
         } catch (error) {
-          this.fetchedUserStatus = null;
+          logger.debug("Error while fetching user status", { error });
         }
       }
-    }
+    }, { immediate: true });
+    const matchSvg = {
+      online: onlineSvg,
+      away: awaySvg,
+      busy: awaySvg,
+      dnd: dndSvg,
+      invisible: invisibleSvg,
+      offline: invisibleSvg
+    };
+    const activeSvg = computed(() => status.value && matchSvg[status.value]);
+    return (_ctx, _cache) => {
+      return status.value ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(["user-status-icon", {
+          "user-status-icon--invisible": isInvisible.value
+        }]),
+        "aria-hidden": !ariaLabel.value || void 0,
+        "aria-label": ariaLabel.value,
+        role: "img",
+        innerHTML: activeSvg.value
+      }, null, 10, _hoisted_1)) : createCommentVNode("", true);
+    };
   }
-};
-const _hoisted_1 = ["aria-hidden", "aria-label", "innerHTML"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $options.activeStatus ? (openBlock(), createElementBlock("span", {
-    key: 0,
-    class: normalizeClass(["user-status-icon", {
-      "user-status-icon--invisible": ["invisible", "offline"].includes($props.status)
-    }]),
-    role: "img",
-    "aria-hidden": $props.ariaHidden,
-    "aria-label": $options.ariaLabel,
-    innerHTML: $options.activeSvg
-  }, null, 10, _hoisted_1)) : createCommentVNode("", true);
-}
-const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c4f818e0"]]);
+});
+const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-350f3d1c"]]);
 export {
   NcUserStatusIcon as N,
   getUserStatusText as g
 };
-//# sourceMappingURL=NcUserStatusIcon-M_93a-z6.mjs.map
+//# sourceMappingURL=NcUserStatusIcon-CtOZd90o.mjs.map

package/dist/chunks/NcUserStatusIcon-CtOZd90o.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcUserStatusIcon-CtOZd90o.mjs","sources":["../../src/utils/UserStatus.ts","../../src/assets/status-icons/user-status-online.svg?raw","../../src/assets/status-icons/user-status-away.svg?raw","../../src/assets/status-icons/user-status-dnd.svg?raw","../../src/assets/status-icons/user-status-invisible.svg?raw","../../src/components/NcUserStatusIcon/NcUserStatusIcon.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { t } from '../l10n.js'\n\ntype Status = 'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'\n\nexport const getUserStatusText = (status: Status): string => {\n\tswitch (status) {\n\tcase 'away': return t('away') // TRANSLATORS: User status if the user is currently away from keyboard\n\tcase 'busy': return t('busy')\n\tcase 'dnd': return t('do not disturb')\n\tcase 'online': return t('online')\n\tcase 'invisible': return t('invisible')\n\tcase 'offline': return t('offline')\n\tdefault: return status\n\t}\n}\n","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"var(--color-success)\\\" d=\\\"M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4z\\\" />\\n\\t<path fill=\\\"var(--color-warning)\\\" d=\\\"M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4V-4z\\\" />\\n\\t<path fill=\\\"var(--color-error)\\\" d=\\\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z\\\" />\\n\\t<path fill=\\\"#fdffff\\\" d=\\\"M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4V-4z\\\" />\\n\\t<path d=\\\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z\\\" />\\n</svg>\\n\"","<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component displays a user status icon.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"row\">\n\t\t<NcUserStatusIcon status=\"online\" />\n\t\t<NcUserStatusIcon status=\"away\" />\n\t\t<NcUserStatusIcon status=\"dnd\" />\n\t\t<NcUserStatusIcon status=\"invisible\" />\n\t</div>\n</template>\n\n<style>\n.row {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { computed, watch } from 'vue'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { t } from '../../l10n.js'\n\nimport onlineSvg from '../../assets/status-icons/user-status-online.svg?raw'\nimport awaySvg from '../../assets/status-icons/user-status-away.svg?raw'\nimport dndSvg from '../../assets/status-icons/user-status-dnd.svg?raw'\nimport invisibleSvg from '../../assets/status-icons/user-status-invisible.svg?raw'\nimport logger from '../../utils/logger.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the user id to fetch the status\n\t */\n\tuser?: string\n\n\t/**\n\t * Set the `aria-hidden` attribute\n\t */\n\tariaHidden?: boolean | 'true' | 'false'\n}>(), {\n\tuser: undefined,\n\tariaHidden: false,\n})\n\n/**\n * The user preloaded user status.\n */\nconst status = defineModel<'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'>('status')\nconst isInvisible = computed(() => status.value && ['invisible', 'offline'].includes(status.value))\n\n/**\n * Aria label to set on the element (will be set when ariaHidden is not set)\n */\nconst ariaLabel = computed(() => (\n\tstatus.value && (!props.ariaHidden || props.ariaHidden === 'false')\n\t\t? t('User status: {status}', { status: getUserStatusText(status.value) })\n\t\t: undefined\n))\n\nwatch(() => props.user, async (user) => {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tif (!status.value && user && (getCapabilities() as any)?.user_status?.enabled) {\n\t\ttry {\n\t\t\tconst { data } = await axios.get(generateOcsUrl('/apps/user_status/api/v1/statuses/{user}', { user }))\n\t\t\tstatus.value = data.ocs?.data?.status\n\t\t} catch (error) {\n\t\t\tlogger.debug('Error while fetching user status', { error })\n\t\t}\n\t}\n}, { immediate: true })\n\nconst matchSvg = {\n\tonline: onlineSvg,\n\taway: awaySvg,\n\tbusy: awaySvg,\n\tdnd: dndSvg,\n\tinvisible: invisibleSvg,\n\toffline: invisibleSvg,\n}\nconst activeSvg = computed(() => status.value && matchSvg[status.value])\n</script>\n\n<template>\n\t<span v-if=\"status\"\n\t\tclass=\"user-status-icon\"\n\t\t:class=\"{\n\t\t\t'user-status-icon--invisible': isInvisible,\n\t\t}\"\n\t\t:aria-hidden=\"!ariaLabel || undefined\"\n\t\t:aria-label\n\t\trole=\"img\"\n\t\tv-html=\"activeSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<style lang=\"scss\" scoped>\n.user-status-icon {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 16px;\n\tmin-height: 16px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n\n\t&--invisible {\n\t\tfilter: var(--background-invert-if-dark);\n\t}\n}\n</style>\n"],"names":["_useModel"],"mappings":";;;;;;;;AASa,MAAA,oBAAoB,CAAC,WAA2B;AAC5D,UAAQ,QAAQ;AAAA,IAChB,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA;AAAA,IAC5B,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA,IAC5B,KAAK;AAAO,aAAO,EAAE,gBAAgB;AAAA,IACrC,KAAK;AAAU,aAAO,EAAE,QAAQ;AAAA,IAChC,KAAK;AAAa,aAAO,EAAE,WAAW;AAAA,IACtC,KAAK;AAAW,aAAO,EAAE,SAAS;AAAA,IAClC;AAAgB,aAAA;AAAA,EAAA;AAEjB;;ACnBA,MAAe,YAAA;ACAf,MAAe,UAAA;ACAf,MAAe,SAAA;ACAf,MAAe,eAAA;;;;;;;;;;;;;AC6Cf,UAAM,QAAQ;AAkBR,UAAA,SAASA,SAAyE,SAAC,QAAQ;AACjG,UAAM,cAAc,SAAS,MAAM,OAAO,SAAS,CAAC,aAAa,SAAS,EAAE,SAAS,OAAO,KAAK,CAAC;AAK5F,UAAA,YAAY,SAAS,MAC1B,OAAO,UAAU,CAAC,MAAM,cAAc,MAAM,eAAe,WACxD,EAAE,yBAAyB,EAAE,QAAQ,kBAAkB,OAAO,KAAK,GAAG,IACtE,MACH;AAED,UAAM,MAAM,MAAM,MAAM,OAAO,SAAS;AAEvC,UAAI,CAAC,OAAO,SAAS,QAAS,gBAAgB,GAAW,aAAa,SAAS;AAC1E,YAAA;AACG,gBAAA,EAAE,SAAS,MAAM,MAAM,IAAI,eAAe,4CAA4C,EAAE,KAAK,CAAC,CAAC;AAC9F,iBAAA,QAAQ,KAAK,KAAK,MAAM;AAAA,iBACvB,OAAO;AACf,iBAAO,MAAM,oCAAoC,EAAE,MAAA,CAAO;AAAA,QAAA;AAAA,MAC3D;AAAA,IACD,GACE,EAAE,WAAW,MAAM;AAEtB,UAAM,WAAW;AAAA,MAChB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,IACV;AACM,UAAA,YAAY,SAAS,MAAM,OAAO,SAAS,SAAS,OAAO,KAAK,CAAC;;;;;;;;;;;;;;;;"}