@nextcloud/vue 9.4.0 → 9.5.0

package/dist/index.mjs

@@ -1,84 +1,84 @@
 import { N } from "./chunks/NcActionButton-DNXoAooH.mjs";
-import { N as N2 } from "./chunks/NcActionButtonGroup-C4oY8x5z.mjs";
+import { N as N2 } from "./chunks/NcActionButtonGroup-C7ej9wLo.mjs";
 import { N as N3 } from "./chunks/NcActionCaption-Cgd3J8jw.mjs";
 import { N as N4 } from "./chunks/NcActionCheckbox-DeHAMd23.mjs";
-import { N as N5 } from "./chunks/NcActionInput-Cgazb3df.mjs";
+import { N as N5 } from "./chunks/NcActionInput-1xeJpD6P.mjs";
 import { N as N6 } from "./chunks/NcActionLink-Cd69py4e.mjs";
 import { N as N7 } from "./chunks/NcActionRadio-DILn0DxW.mjs";
 import { N as N8 } from "./chunks/NcActionRouter-DtxPh20B.mjs";
-import { N as N9 } from "./chunks/NcActions-CCXgfwjS.mjs";
+import { N as N9 } from "./chunks/NcActions-BWDsG06k.mjs";
 import { N as N10 } from "./chunks/NcActionSeparator-Doekl1NX.mjs";
 import { N as N11 } from "./chunks/NcActionText-Bd1fgVqA.mjs";
 import { N as N12 } from "./chunks/NcActionTextEditable-DL4idmon.mjs";
-import { N as N13 } from "./chunks/NcAppContent-DHTZAiBV.mjs";
+import { N as N13 } from "./chunks/NcAppContent-njY3MCzi.mjs";
 import { _ } from "./chunks/NcAppContentDetails.vue_vue_type_script_setup_true_lang-Dnf4r_Ng.mjs";
 import { N as N14 } from "./chunks/NcAppContentList-DYFsuDKh.mjs";
-import { N as N15 } from "./chunks/NcAppNavigation--KrbROgq.mjs";
-import { N as N16 } from "./chunks/NcAppNavigationCaption-Dj1-JWNN.mjs";
+import { N as N15 } from "./chunks/NcAppNavigation-Bpdpz-wF.mjs";
+import { N as N16 } from "./chunks/NcAppNavigationCaption-CyEhlxoS.mjs";
 import { N as N17 } from "./chunks/NcAppNavigationIconBullet-PrlhOoE9.mjs";
-import { N as N18 } from "./chunks/NcAppNavigationItem-DhsEitgm.mjs";
+import { N as N18 } from "./chunks/NcAppNavigationItem-Ny1Po7Rd.mjs";
 import { N as N19 } from "./chunks/NcAppNavigationList-BX0wE-dB.mjs";
-import { N as N20 } from "./chunks/NcAppNavigationNew-WS0F9mau.mjs";
-import { N as N21 } from "./chunks/NcAppNavigationNewItem-DhSxNT1C.mjs";
-import { N as N22 } from "./chunks/NcAppNavigationSearch-BHsw27kG.mjs";
-import { N as N23 } from "./chunks/NcAppNavigationSettings-sbSJX76f.mjs";
+import { N as N20 } from "./chunks/NcAppNavigationNew-CJpxzq_I.mjs";
+import { N as N21 } from "./chunks/NcAppNavigationNewItem-hsUDrzT-.mjs";
+import { N as N22 } from "./chunks/NcAppNavigationSearch-C5RAT6JQ.mjs";
+import { N as N23 } from "./chunks/NcAppNavigationSettings-BPLJktWz.mjs";
 import { N as N24 } from "./chunks/NcAppNavigationSpacer-BvkBfuVw.mjs";
-import { N as N25 } from "./chunks/NcAppSettingsDialog-Bg2wk6rG.mjs";
+import { N as N25 } from "./chunks/NcAppSettingsDialog-DddRGyYJ.mjs";
 import { N as N26 } from "./chunks/NcAppSettingsSection-B2pFK0UK.mjs";
-import { N as N27, N as N28 } from "./chunks/NcAppSettingsShortcutsSection-D--3hFzE.mjs";
-import { N as N29 } from "./chunks/NcAppSidebar-BnTLeCUs.mjs";
+import { N as N27, N as N28 } from "./chunks/NcAppSettingsShortcutsSection-D07KOJfT.mjs";
+import { N as N29 } from "./chunks/NcAppSidebar-BAnJD3ea.mjs";
 import { _ as _2 } from "./chunks/NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
 import { N as N30 } from "./chunks/NcAppSidebarTab-Cjetm3Fs.mjs";
-import { N as N31 } from "./chunks/NcAssistantButton-DRcoUE6a.mjs";
+import { N as N31 } from "./chunks/NcAssistantButton-CkFCuTft.mjs";
 import { N as N32 } from "./chunks/NcAssistantContent-BR3lWBWC.mjs";
 import { N as N33 } from "./chunks/NcAssistantIcon-DsJh5rb7.mjs";
-import { N as N34 } from "./chunks/NcAvatar-xQb0quUq.mjs";
+import { N as N34 } from "./chunks/NcAvatar-C9d7Wrc8.mjs";
 import { N as N35 } from "./chunks/NcBlurHash-Cp7enp4q.mjs";
-import { N as N36 } from "./chunks/NcBreadcrumb-D-e0UGiz.mjs";
-import { N as N37 } from "./chunks/NcBreadcrumbs-CGztlUEK.mjs";
-import { N as N38 } from "./chunks/NcButton-CzpKEx4V.mjs";
-import { N as N39 } from "./chunks/NcCheckboxRadioSwitch-ChNSuhe6.mjs";
-import { N as N40 } from "./chunks/NcChip-CaOkERH3.mjs";
-import { N as N41 } from "./chunks/NcCollectionList-Dme-TR38.mjs";
-import { N as N42 } from "./chunks/NcColorPicker-5Pw0z8WG.mjs";
-import { N as N43 } from "./chunks/NcContent-DOmmHvxx.mjs";
+import { N as N36 } from "./chunks/NcBreadcrumb-BRt3l6x6.mjs";
+import { N as N37 } from "./chunks/NcBreadcrumbs-CIsUSeJx.mjs";
+import { N as N38 } from "./chunks/NcButton-C9D47Igd.mjs";
+import { N as N39 } from "./chunks/NcCheckboxRadioSwitch-BMsPx74L.mjs";
+import { N as N40 } from "./chunks/NcChip-B71t2Ny2.mjs";
+import { N as N41 } from "./chunks/NcCollectionList-BLDdPjtu.mjs";
+import { N as N42 } from "./chunks/NcColorPicker-DDHxR-iN.mjs";
+import { N as N43 } from "./chunks/NcContent-O-bMKi-3.mjs";
 import { N as N44 } from "./chunks/NcCounterBubble-CxxHHh8i.mjs";
-import { N as N45 } from "./chunks/NcDashboardWidget-Ddt4Ze_7.mjs";
-import { N as N46 } from "./chunks/NcDashboardWidgetItem-Cu-899WY.mjs";
+import { N as N45 } from "./chunks/NcDashboardWidget-DCBQdRFz.mjs";
+import { N as N46 } from "./chunks/NcDashboardWidgetItem-ygUG05Ut.mjs";
 import { _ as _3 } from "./chunks/NcDateTime.vue_vue_type_script_setup_true_lang-BhB8yA4U.mjs";
-import { N as N47 } from "./chunks/NcDateTimePicker-CF8TMzyS.mjs";
-import { N as N48 } from "./chunks/NcDateTimePickerNative-DvvKjw_h.mjs";
-import { N as N49 } from "./chunks/NcDialog-Cnd9YBlk.mjs";
-import { _ as _4 } from "./chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-BnCX7Duz.mjs";
+import { N as N47 } from "./chunks/NcDateTimePicker-RLihgV8b.mjs";
+import { N as N48 } from "./chunks/NcDateTimePickerNative-C_4mwR_o.mjs";
+import { N as N49 } from "./chunks/NcDialog-BG9t4Psg.mjs";
+import { _ as _4 } from "./chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-DABuSwSR.mjs";
 import { N as N50 } from "./chunks/NcEllipsisedOption-dT-CtXYp.mjs";
-import { N as N51 } from "./chunks/NcEmojiPicker-DpA4_bLX.mjs";
+import { N as N51 } from "./chunks/NcEmojiPicker-Djc9a0gw.mjs";
 import { N as N52 } from "./chunks/NcEmptyContent-B8-90BSI.mjs";
 import { N as N53 } from "./chunks/NcFormBox-BYjllt0m.mjs";
 import { N as N54 } from "./chunks/NcFormBoxButton-RDIKiZIH.mjs";
-import { _ as _5 } from "./chunks/NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-KhOQ1B7a.mjs";
+import { _ as _5 } from "./chunks/NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-CIPhWmeP.mjs";
 import { N as N55 } from "./chunks/NcFormBoxSwitch-m9uRjJzl.mjs";
 import { N as N56 } from "./chunks/NcFormGroup-Bf8Mme1o.mjs";
 import { N as N57 } from "./chunks/NcGuestContent-CfCh49o0.mjs";
-import { N as N58 } from "./chunks/NcHeaderButton-CIb5SvFk.mjs";
-import { N as N59 } from "./chunks/NcHeaderMenu-CeJZT5-m.mjs";
+import { N as N58 } from "./chunks/NcHeaderButton-DZ7Sd9pu.mjs";
+import { N as N59 } from "./chunks/NcHeaderMenu-D9WjsIsy.mjs";
 import { _ as _6 } from "./chunks/NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
-import { N as N60 } from "./chunks/NcHotkey-CrVhA2O_.mjs";
-import { N as N61 } from "./chunks/NcHotkeyList-BhA2GxR9.mjs";
+import { N as N60 } from "./chunks/NcHotkey-Bd-gNn3a.mjs";
+import { N as N61 } from "./chunks/NcHotkeyList-D8hkh6o6.mjs";
 import { N as N62 } from "./chunks/NcIconSvgWrapper-BvLanNaW.mjs";
-import { N as N63 } from "./chunks/NcInputField-tt_Gi9ja.mjs";
-import { N as N64 } from "./chunks/NcKbd-DF1Ugt3x.mjs";
-import { N as N65 } from "./chunks/NcListItem-BnLZJxLv.mjs";
-import { N as N66 } from "./chunks/NcListItemIcon-DLmp04cL.mjs";
+import { N as N63 } from "./chunks/NcInputField-o5OFv3z6.mjs";
+import { N as N64 } from "./chunks/NcKbd-DzE_4Z3y.mjs";
+import { N as N65 } from "./chunks/NcListItem-DSdLnQJX.mjs";
+import { N as N66 } from "./chunks/NcListItemIcon-C_yQkDIv.mjs";
 import { N as N67 } from "./chunks/NcLoadingIcon-b_ajZ_nQ.mjs";
-import { N as N68 } from "./chunks/NcModal-PlfVmTTk.mjs";
+import { N as N68 } from "./chunks/NcModal-DHryP_87.mjs";
 import { N as N69 } from "./chunks/NcNoteCard-Cok_4Fld.mjs";
-import { N as N70 } from "./chunks/NcPasswordField-DYF18Cdo.mjs";
+import { N as N70 } from "./chunks/NcPasswordField-uaMO2pdt.mjs";
 import { N as N71 } from "./chunks/NcPopover-OqcYrWOx.mjs";
-import { N as N72 } from "./chunks/NcProgressBar-DDMAo4h-.mjs";
+import { N as N72 } from "./chunks/NcProgressBar-OIWW1Sei.mjs";
 import { N as N73 } from "./chunks/NcRadioGroup-Bjl3n_1z.mjs";
-import { N as N74 } from "./chunks/NcRadioGroupButton-Bul-9Tl1.mjs";
-import { N as N75 } from "./chunks/NcRelatedResourcesPanel-Dzp_b_xS.mjs";
-import { a, N as N76, b } from "./chunks/NcRichContenteditable-BgsA20P4.mjs";
+import { N as N74 } from "./chunks/NcRadioGroupButton-BWPOKDMR.mjs";
+import { N as N75 } from "./chunks/NcRelatedResourcesPanel-BndhQA8u.mjs";
+import { a, N as N76, b } from "./chunks/NcRichContenteditable-CjuPClU1.mjs";
 import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/router";
@@ -86,25 +86,25 @@ import "@nextcloud/sharing/public";
 import "vue";
 import "@vueuse/core";
 import "vue-router";
-import { a as a2, g, b as b2, c, s, d } from "./chunks/referencePickerModal-VfCXswe3.mjs";
+import { a as a2, g, b as b2, c, s, d } from "./chunks/referencePickerModal-D9HwChP3.mjs";
 import { N as N77, h, c as c2, i, e, r, f, a as a3 } from "./chunks/customPickerElements-4pQTZUnk.mjs";
 import "./chunks/autolink-U5pBzLgI.mjs";
 import "./chunks/logger-D3RVzcfQ.mjs";
-import { N as N78 } from "./chunks/NcRichText-H-0TWixL.mjs";
-import { N as N79 } from "./chunks/NcSelect-rH_0zphV.mjs";
+import { N as N78 } from "./chunks/NcRichText-DJlaHs_Q.mjs";
+import { N as N79 } from "./chunks/NcSelect-DLheQ2yp.mjs";
 import "debounce";
-import { _ as _7 } from "./chunks/NcTextField.vue_vue_type_script_setup_true_lang-Cv9c1EWI.mjs";
+import { _ as _7 } from "./chunks/NcTextField.vue_vue_type_script_setup_true_lang-BxkYy7wv.mjs";
 import "@nextcloud/event-bus";
 import { _ as _8 } from "./chunks/NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-jUf1K561.mjs";
-import { N as N80 } from "./chunks/NcSelectTags-DPJzQw5S.mjs";
-import { N as N81 } from "./chunks/NcSelectUsers-DbOv_9kW.mjs";
-import { N as N82 } from "./chunks/NcSettingsSection-EAR0ylbd.mjs";
-import { N as N83 } from "./chunks/NcSettingsSelectGroup-BS2sLZQO.mjs";
+import { N as N80 } from "./chunks/NcSelectTags-CTHyuMcq.mjs";
+import { N as N81 } from "./chunks/NcSelectUsers-BlMjKkJ3.mjs";
+import { N as N82 } from "./chunks/NcSettingsSection-BiX5No3C.mjs";
+import { N as N83 } from "./chunks/NcSettingsSelectGroup-B69Mhcar.mjs";
 import { N as N84 } from "./chunks/NcTextArea-CWA3KOiC.mjs";
 import { _ as _9 } from "./chunks/NcThemeProvider.vue_vue_type_script_setup_true_lang-DWn1DRTx.mjs";
-import { _ as _10 } from "./chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang-t72lL380.mjs";
-import { N as N85 } from "./chunks/NcUserBubble-DlY4DCgO.mjs";
-import { N as N86 } from "./chunks/NcUserStatusIcon-lVNMmh5G.mjs";
+import { _ as _10 } from "./chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang-B7nhSDot.mjs";
+import { N as N85 } from "./chunks/NcUserBubble-vOAXLHB5.mjs";
+import { N as N86 } from "./chunks/NcUserStatusIcon-XiwrgeCm.mjs";
 import { _ as _11 } from "./chunks/NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { useFormatRelativeTime, useFormatTime } from "./composables/useFormatDateTime/index.mjs";
 import { useHotKey } from "./composables/useHotKey/index.mjs";

package/dist/utils/appName.d.ts

@@ -5,6 +5,10 @@
 export declare const APP_NAME: string;
 export declare const APP_VERSION: string;
 /**
- * Get localized app name from the initial state
+ * Get the app name (the Nextcloud app id).
  */
-export declare const getLocalizedAppName: () => string;
+export declare function useAppName(): string;
+/**
+ * Get the localized app name.
+ */
+export declare const useLocalizedAppName: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextcloud/vue",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Nextcloud vue components",
   "keywords": [
     "vuejs",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.6.0",
-    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/dom": "^1.7.5",
     "@nextcloud/auth": "^2.5.3",
     "@nextcloud/axios": "^2.5.2",
     "@nextcloud/browser-storage": "^0.5.0",
@@ -88,7 +88,7 @@
     "@nextcloud/router": "^3.1.0",
     "@nextcloud/sharing": "^0.3.0",
     "@vuepic/vue-datepicker": "^11.0.3",
-    "@vueuse/components": "^14.1.0",
+    "@vueuse/components": "^14.2.0",
     "@vueuse/core": "^14.0.0",
     "blurhash": "^2.0.5",
     "clone": "^2.1.2",
@@ -97,7 +97,7 @@
     "emoji-mart-vue-fast": "^15.0.5",
     "escape-html": "^1.0.3",
     "floating-vue": "^5.2.2",
-    "focus-trap": "^7.8.0",
+    "focus-trap": "^8.0.0",
     "linkifyjs": "^4.3.2",
     "p-queue": "^9.1.0",
     "rehype-external-links": "^3.0.0",
@@ -114,9 +114,9 @@
     "ts-md5": "^2.0.1",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
+    "unist-util-visit": "^5.1.0",
     "vue": "^3.5.18",
-    "vue-router": "^4.6.4",
+    "vue-router": "^5.0.2",
     "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
@@ -128,29 +128,29 @@
     "@mdi/svg": "^7.4.47",
     "@nextcloud/babel-config": "^1.3.0",
     "@nextcloud/browserslist-config": "^3.1.2",
-    "@nextcloud/eslint-config": "^9.0.0-rc.7",
+    "@nextcloud/eslint-config": "^9.0.0-rc.8",
     "@nextcloud/stylelint-config": "^3.2.0",
     "@nextcloud/vite-config": "^2.5.0",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
-    "@playwright/experimental-ct-vue": "^1.57.0",
-    "@playwright/test": "^1.57.0",
-    "@types/gettext-parser": "^8.0.0",
-    "@types/node": "^24.10.9",
-    "@vitest/coverage-v8": "^4.0.17",
+    "@playwright/experimental-ct-vue": "^1.58.1",
+    "@playwright/test": "^1.58.1",
+    "@types/gettext-parser": "^9.0.0",
+    "@types/node": "^24.10.10",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
-    "core-js": "^3.47.0",
+    "core-js": "^3.48.0",
     "eslint": "^9.39.2",
     "file-loader": "^6.2.0",
     "gettext-extractor": "^4.0.5",
-    "gettext-parser": "^9.0.0",
-    "glob": "^13.0.0",
-    "jsdom": "^27.4.0",
+    "gettext-parser": "^9.0.1",
+    "glob": "^13.0.1",
+    "jsdom": "^28.0.0",
     "remark-gfm": "^4.0.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.97.2",
-    "stylelint": "^17.0.0",
+    "sass": "^1.97.3",
+    "stylelint": "^17.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
@@ -159,8 +159,8 @@
     "vue-eslint-parser": "^10.2.0",
     "vue-material-design-icons": "^5.3.1",
     "vue-styleguidist": "^4.72.4",
-    "vue-tsc": "^3.2.2",
-    "webpack": "^5.104.1",
+    "vue-tsc": "^3.2.4",
+    "webpack": "^5.105.0",
     "webpack-merge": "^6.0.1"
   },
   "engines": {

package/dist/assets/NcSelectUsers-zQin7DzE.css

@@ -1,4 +0,0 @@
-
-.nc-select-users[data-v-cd11fcbd] .vs__selected {
-	padding-inline: 0 5px !important;
-}

package/dist/chunks/NcAppContent-DHTZAiBV.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppContent-DHTZAiBV.mjs","sources":["../../src/components/NcAppContent/NcAppContentDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { mdiArrowRight } from '@mdi/js'\nimport { emit } from '@nextcloud/event-bus'\nimport { onBeforeUnmount, onMounted, watch } from 'vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nconst isMobile = useIsMobile()\nwatch(isMobile, toggleAppNavigationButton)\n\nonMounted(() => {\n\ttoggleAppNavigationButton(isMobile.value)\n})\n\nonBeforeUnmount(() => {\n\tif (isMobile.value) {\n\t\ttoggleAppNavigationButton(false)\n\t}\n})\n\n/**\n * Toggle the app navigation button and hide it if needed.\n *\n * @param hide - if true the navigation toggle is visually hidden\n */\nfunction toggleAppNavigationButton(hide: boolean = true) {\n\tconst appNavigationToggle = document.querySelector<HTMLElement>('.app-navigation .app-navigation-toggle')\n\tif (appNavigationToggle) {\n\t\tappNavigationToggle.style.display = hide ? 'none' : ''\n\n\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\tif (hide === true) {\n\t\t\temit('toggle-navigation', { open: false })\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcButton\n\t\t:aria-label=\"t('Go back to the list')\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\"\n\t\t:title=\"t('Go back to the list')\"\n\t\tvariant=\"tertiary\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowRight\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tinset-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tinset-inline-start: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n\n#### Usage: Custom document title\nFor accessibility reasons every document should have a `h1` heading,\nthis is visually hidden, but required for a semantically correct document.\nYou can use your app name or current view for the heading.\n\nAdditionally you can set a custom document title, e.g. to show the current status.\n\n```vue\n<template>\n\t<NcAppContent :pageHeading=\"heading ? 'Heading' : undefined\" :pageTitle=\"title ? 'Title' : undefined\" >\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"title\">\n\t\t\tToggle title\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"heading\">\n\t\t\tToggle Heading\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcButton @click=\"reset\">Reset</NcButton>\n\t</NcAppContent>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\theading: false,\n\t\t\ttitle: false,\n\t\t}\n\t},\n\tmethods: {\n\t\treset() {\n\t\t\tthis.heading = false\n\t\t\tthis.title = false\n\t\t\tdocument.title = ''\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': !!$slots.list }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"!!$slots.list\">\n\t\t\t<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div\n\t\t\t\tv-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,\n\t\t\t\t}\">\n\t\t\t\t<NcAppContentDetailsToggle v-if=\"showDetails\" @click.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<div v-show=\"!showDetails\">\n\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t</div>\n\t\t\t\t<slot v-if=\"showDetails\" />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes\n\t\t\t\t\t:horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split',\n\t\t\t\t\t}\"\n\t\t\t\t\t:rtl=\"isRtl\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:minSize=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:maxSize=\"paneDefaults.list.max\">\n\t\t\t\t\t\t<!-- @slot Provide a list to the app content -->\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane\n\t\t\t\t\t\tclass=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:minSize=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:maxSize=\"paneDefaults.details.max\">\n\t\t\t\t\t\t<!-- @slot Provide the main content to the app content -->\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-if=\"!$slots.list\" />\n\t</main>\n</template>\n\n<script>\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Pane, Splitpanes } from 'splitpanes'\nimport NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { APP_NAME, getLocalizedAppName } from '../../utils/appName.ts'\nimport { logger } from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\nconst instanceName = getCapabilities().theming?.name ?? 'Nextcloud'\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppContentDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state.\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * or respectively the default height on horizontal-split.\n\t\t *\n\t\t * Must be between `listMinWidth` and `listMaxWidth`.\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * or respectively the minimum height on horizontal-split.\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * or respectively the maximum height on horizontal-split.\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown.\n\t\t *\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Allow setting the page's `<title>`\n\t\t *\n\t\t * If a page heading is set it defaults to `{pageHeading} - {appName} - {instanceName}` e.g. `Favorites - Files - MyPersonalCloud`.\n\t\t * When the page heading and the app name is the same only one is used, e.g. `Files - Files - MyPersonalCloud` is shown as `Files - MyPersonalCloud`.\n\t\t * When setting the prop then the following format will be used: `{pageTitle} - {instanceName}`\n\t\t */\n\t\tpageTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resizeList',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${APP_NAME}`\n\t\t\t} catch {\n\t\t\t\tlogger.info('[NcAppContent]: falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\n\t\trealPageTitle() {\n\t\t\tconst entries = new Set()\n\t\t\tif (this.pageTitle) {\n\t\t\t\t// when page title is set we only use that\n\t\t\t\t// we still split to remove duplicated instanceName\n\t\t\t\tfor (const part of this.pageTitle.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\t\t\t} else if (this.pageHeading) {\n\t\t\t\t// when the page heading is provided but not the title\n\t\t\t\t// then we split to remove duplicates\n\t\t\t\t// but also add the localized app name\n\t\t\t\tfor (const part of this.pageHeading.split(' - ')) {\n\t\t\t\t\tentries.add(part)\n\t\t\t\t}\n\n\t\t\t\tif (entries.size > 0) {\n\t\t\t\t\tentries.add(getLocalizedAppName())\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tentries.add(instanceName)\n\t\t\treturn [...entries.values()].join(' - ')\n\t\t},\n\t},\n\n\twatch: {\n\t\trealPageTitle: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tif (this.realPageTitle !== null) {\n\t\t\t\t\tdocument.title = this.realPageTitle\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\tpaneConfigKey: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.restorePaneConfig()\n\t\t\t},\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.disableSwipe) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event.panes[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resizeList', { size: listPaneSize })\n\t\t\tlogger.debug('[NcAppContent] pane config', { listPaneSize })\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tlogger.debug('[NcAppContent] pane config', { listPaneSize })\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\tbackground-color: var(--color-main-background);\n\t\t&::before, &::after {\n\t\t\tbackground-color: var(--color-border);\n\t\t}\n\t}\n\n\t&.splitpanes--vertical .splitpanes__splitter {\n\t\tborder-inline-start: 1px solid var(--color-border);\n\t}\n\n\t&.splitpanes--horizontal .splitpanes__splitter {\n\t\tborder-top: 1px solid var(--color-border);\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["_createBlock","_unref","_normalizeClass","_createVNode","_createElementBlock","_toDisplayString","_Fragment","_createElementVNode","_renderSlot","_openBlock"],"mappings":"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"}

package/dist/chunks/NcListItem-BnLZJxLv.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItem-BnLZJxLv.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircleOutline :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-favorite);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-text-error, var(--color-error));\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconCogOutline,\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t\tIconPencil,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component\n\t\t:is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li\n\t\t\tclass=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active': active ?? isActive }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div\n\t\t\t\tref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a\n\t\t\t\t\t:id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{ 'list-item-content__subname--bold': bold }\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0 || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble\n\t\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0\"\n\t\t\t\t\t\t\t\t\t:count=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"active ?? isActive\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\" />\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:primary=\"active ?? isActive\"\n\t\t\t\t\t\t:forceMenu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\t/**\n\t\t * The HTML target attribute used for the link\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\tcounterNumber: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\t// On component unmounting Vue 3 resets the template ref to null,\n\t\t\t// so we can ignore this check\n\t\t\tif (this.$refs['list-item']?.contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcVNodes","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_createElementVNode","_mergeProps","_renderSlot","_createElementBlock","_normalizeClass","_withDirectives","_createVNode"],"mappings":"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"}

package/dist/chunks/NcProgressBar-DDMAo4h-.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcProgressBar-DDMAo4h-.mjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t\t<br />\n\t\tCustom color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the progress bar height)\n\t\t<NcProgressBar :value=\"55\" :size=\"8\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"25\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"42\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"80\" error />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the diameter of the progress bar)\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" :size=\"42\" />\n\t</span>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * An integer between 0 and 100\n\t */\n\tvalue?: number\n\n\t/**\n\t * Determines the height of the progressbar.\n\t */\n\tsize?: 'small' | 'medium' | number\n\n\t/**\n\t * Applies an error color to the progressbar if true.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Progress bar variant\n\t */\n\ttype?: 'linear' | 'circular'\n\n\t/**\n\t * The color of the progress bar\n\t */\n\tcolor?: string\n}>(), {\n\tvalue: 0,\n\tcolor: 'var(--color-primary-element)',\n\tsize: 'small',\n\ttype: 'linear',\n})\n\nconst normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100)\n\nconst height = computed(() => {\n\tif (typeof props.size === 'number') {\n\t\treturn Math.round(props.size)\n\t}\n\n\t// circular type\n\tif (props.type === 'circular') {\n\t\tif (props.size === 'medium') {\n\t\t\treturn clickableArea\n\t\t} else {\n\t\t\treturn clickableAreaSmall\n\t\t}\n\t}\n\n\t// linear type\n\tif (props.size === 'medium') {\n\t\treturn 1.5 * gridBaseline\n\t}\n\treturn gridBaseline\n})\n\nconst heightPx = computed(() => `${height.value}px`)\n\n// Variables for the circlur progressbar\nconst strokeWidth = computed(() => Math.max(gridBaseline, height.value / clickableArea * gridBaseline))\nconst circleCenterPosition = computed(() => height.value / 2)\nconst circleRadius = computed(() => (height.value / 2) - strokeWidth.value)\nconst circumference = computed(() => circleRadius.value * 2 * Math.PI)\n</script>\n\n<script lang=\"ts\">\n// design constants\nconst gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--clickable-area-small'))\n</script>\n\n<template>\n\t<span\n\t\tv-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg\n\t\t\t:height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${normalizedProgress * circumference} ${(1 - normalizedProgress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t\t<circle\n\t\t\t\tstroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - normalizedProgress) * circumference} ${normalizedProgress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - normalizedProgress) * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t</svg>\n\t</span>\n\t<progress\n\t\tv-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:value\n\t\tmax=\"100\" />\n</template>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\t--progress-bar-height: v-bind(heightPx);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color);\n\t}\n\t&--error {\n\t\tcolor: var(--color-text-error, var(--color-error)) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["type","_createElementBlock","value","_normalizeClass","error","_createElementVNode"],"mappings":";;;;;;;AA2HA,MAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,MAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,MAAM,qBAAqB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,wBAAwB,CAAC;;;;;;;;;;;;;;;AApE5H,UAAM,QAAQ;AAgCd,UAAM,qBAAqB,SAAS,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG;AAEvF,UAAM,SAAS,SAAS,MAAM;AAC7B,UAAI,OAAO,MAAM,SAAS,UAAU;AACnC,eAAO,KAAK,MAAM,MAAM,IAAI;AAAA,MAC7B;AAGA,UAAI,MAAM,SAAS,YAAY;AAC9B,YAAI,MAAM,SAAS,UAAU;AAC5B,iBAAO;AAAA,QACR,OAAO;AACN,iBAAO;AAAA,QACR;AAAA,MACD;AAGA,UAAI,MAAM,SAAS,UAAU;AAC5B,eAAO,MAAM;AAAA,MACd;AACA,aAAO;AAAA,IACR,CAAC;AAED,UAAM,WAAW,SAAS,MAAM,GAAG,OAAO,KAAK,IAAI;AAGnD,UAAM,cAAc,SAAS,MAAM,KAAK,IAAI,cAAc,OAAO,QAAQ,gBAAgB,YAAY,CAAC;AACtG,UAAM,uBAAuB,SAAS,MAAM,OAAO,QAAQ,CAAC;AAC5D,UAAM,eAAe,SAAS,MAAO,OAAO,QAAQ,IAAK,YAAY,KAAK;AAC1E,UAAM,gBAAgB,SAAS,MAAM,aAAa,QAAQ,IAAI,KAAK,EAAE;;aAY7DA,KAAAA,SAAI,2BADXC,mBA4BO,QAAA;AAAA;QA1BN,MAAK;AAAA,QACJ,iBAAeC,KAAAA;AAAAA,QACf,OAAKC,eAAA,CAAA,EAAA,uBAA2BC,KAAAA,MAAAA,GAC3B,qCAAqC,CAAA;AAAA,MAAA;sBAC3CH,mBAqBM,OAAA;AAAA,UApBJ,QAAQ,OAAA;AAAA,UACR,OAAO,OAAA;AAAA,QAAA;UACRI,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,uBAAqB,mBAAA,QAAqB,mBAAa,KAAA,IAAS,mBAAA,SAAsB,cAAA,KAAa;AAAA,YACnG,4BAA0B,cAAA;AAAA,YAC1B,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;UACNA,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,4BAA0B,mBAAA,SAAsB,mBAAa,IAAI,mBAAA,QAAqB,cAAA,KAAa;AAAA,YACnG,sBAAiB,OAAU,mBAAA,SAAsB,cAAA;AAAA,YACjD,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;;0CAGRJ,mBAKa,YAAA;AAAA;QAHZ,OAAKE,eAAA,CAAC,yCAAuC,EAAA,uBACZC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QACrC,OAAAF,KAAAA;AAAAA,QACD,KAAI;AAAA,MAAA;;;;;"}

package/dist/chunks/NcRadioGroupButton-Bul-9Tl1.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRadioGroupButton-Bul-9Tl1.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","$slots","_renderSlot","label","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAwBd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;0BAICA,mBAqBM,OAAA;AAAA,QApBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,QAAA,GAAgBA,KAAAA,OAAO,kBAAkBC,MAAA,gBAAA,CAAgB,CAAA;AAAA,QAGxG,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBJ,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DG,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXN,mBAEM,OAAA;AAAA;UAFa,IAAIG,MAAA,OAAA;AAAA,UAAU,OAAKF,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEI,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTC,mBAOmB,SAAA;AAAA,UANjB,mBAAiBD,KAAAA,QAAQH,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYG,KAAAA,QAAQ,SAAYE,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,OAAAC,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcSelectUsers-DbOv_9kW.mjs","sources":["../../src/components/NcSelectUsers/NcSelectUsers.vue"],"sourcesContent":["<!--\n\t- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n\t- SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Nextcloud user picker\n\n#### Examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelectUsers v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport svgAccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport svgEmail from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\ticonSvg: svgAccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: svgEmail,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple user select (stay open on select)',\n\t\t\tkeepOpen: true,\n\t\t\tmultiple: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\ticonSvg: svgAccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: svgEmail,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcSelect from '../NcSelect/index.js'\n\nexport interface IUserData {\n\tid: string\n\n\t/**\n\t * Main display name\n\t */\n\tdisplayName: string\n\n\t/**\n\t * The user id.\n\t * Will be used to fetch the user status if not disabled.\n\t */\n\tuser?: string\n\n\t/**\n\t * The secondary displayname (e.g. the email address).\n\t */\n\tsubname?: string\n\n\t/**\n\t * Optional icon to use as the avatar.\n\t * Setting this will disable the automatic avatar loading.\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Accessible name for the icon.\n\t */\n\ticonName?: string\n\n\t/**\n\t * If this is a guest user.\n\t * Needed as guest users have a different API endpoint for avatar loading.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Set if this is not a regular user.\n\t * This will disable user status and avatar loading.\n\t */\n\tisNoUser?: boolean\n}\n\n/**\n * Currently selected value.\n * The `v-model` directive may be used for two-way data binding.\n *\n * If the `multiple` property is set then an array of users is emitted,\n * otherwise a single user data object will be emitted.\n */\nconst modelValue = defineModel<IUserData | IUserData[]>('modelValue')\n\ndefineProps<{\n\t/**\n\t * `aria-label` for the clear input button.\n\t *\n\t * @default 'Clear selected'\n\t */\n\tariaLabelClearSelected?: string\n\n\t/**\n\t * `aria-label` for the listbox element.\n\t *\n\t * @default 'Options'\n\t */\n\tariaLabelListbox?: string\n\n\t/**\n\t * Allows to customize the `aria-label` for the deselect-option button.\n\t *\n\t * @default (label) => `Deselect ${label}`\n\t */\n\tariaLabelDeselectOption?: (label: string) => string\n\n\t/**\n\t * Disable the component.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Input element id.\n\t *\n\t * @default random generated id\n\t */\n\tinputId?: string\n\n\t/**\n\t * Visible label for the input element\n\t *\n\t * @default 'Select account'\n\t */\n\tinputLabel?: string\n\n\t/**\n\t * Pass true if you are using an external label.\n\t * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * Keep the dropdown open after selecting an entry.\n\t */\n\tkeepOpen?: boolean\n\n\t/**\n\t * Show a loading icon.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Allow selection of multiple options\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * Disable automatic wrapping when selected options overflow the width.\n\t */\n\tnoWrap?: boolean\n\n\t/**\n\t * Array of users or similar object (e.g. groups or guest users).\n\t */\n\toptions: IUserData[]\n\n\t/**\n\t * Placeholder text.\n\t *\n\t * @default ''\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Enable if a value is required for native form validation.\n\t */\n\trequired?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the user enters some query.\n\t * This can be used to asynchronously fetch more options.\n\t */\n\tsearch: [string]\n}>()\n\nconst search = ref('')\nwatch(search, () => emit('search', search.value))\n\n// Avatar size so the component has the same size as Nc*Field\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst avatarSize = clickableArea - 2 * gridBaseLine\n\n/**\n * Filter function to search users.\n *\n * @param option - The option to check\n * @param option.subname - The second line to check (often the email address)\n * @param label - The label of the option\n * @param search - The current search string\n */\nfunction filterBy(option: { subname?: string }, label: string, search: string) {\n\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\tconst match = search.match(EMAIL_NOTATION)\n\tconst subname = option.subname?.toLocaleLowerCase() ?? ''\n\treturn (match && subname.indexOf(match[1]!.toLocaleLowerCase()) > -1)\n\t\t|| (`${label} ${option.subname}`\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n}\n</script>\n\n<template>\n\t<NcSelect\n\t\tv-model=\"modelValue\"\n\t\tclass=\"nc-select-users\"\n\t\tv-bind=\"$props\"\n\t\t:filterBy\n\t\tlabel=\"displayName\"\n\t\t@search=\"search = $event\">\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-bind=\"option\"\n\t\t\t\t:avatarSize=\"32\"\n\t\t\t\t:name=\"option.displayName\"\n\t\t\t\t:search />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-bind=\"selectedOption\"\n\t\t\t\t:avatarSize\n\t\t\t\t:name=\"selectedOption.displayName\"\n\t\t\t\tnoMargin\n\t\t\t\t:search />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<style scoped lang=\"css\">\n.nc-select-users :deep(.vs__selected) {\n\tpadding-inline: 0 5px !important;\n}\n</style>\n"],"names":["_useModel","search","_openBlock","_createBlock","_unref","_mergeProps","$props","_withCtx","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6NA,UAAM,aAAaA,SAAoC,SAAC,YAAY;AAuFpE,UAAM,OAAO;AAQb,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,KAAK,CAAC;AAGhD,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AAUvC,aAAS,SAAS,QAA8B,OAAeC,SAAgB;AAE9E,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAA,KAAuB;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAG,kBAAA,CAAmB,IAAI,MAC7D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,oBACA,QAAQA,QAAO,kBAAA,CAAmB,IAAI;AAAA,IAC1C;;AAIC,aAAAC,aAAAC,YAsBWC,iBAtBXC,WAsBW;AAAA,oBArBD,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QACnB,OAAM;AAAA,MAAA,GACEC,KAAAA,QAAM;AAAA,QACb;AAAA,QACD,OAAM;AAAA,QACL,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,OAAA,QAAS;AAAA,MAAA;QACP,QAAMC,QAChB,CAIW,WALa;AAAA,UACxBC,YAIWJ,MAAA,cAAA,GAJXC,WAIW,QAHI;AAAA,YACb,YAAY;AAAA,YACZ,MAAM,OAAO;AAAA,YACb,QAAA,OAAA;AAAA,UAAA;;QAEQ,mBAAeE,QACzB,CAKW,mBAN8B;AAAA,UACzCC,YAKWJ,MAAA,cAAA,GALXC,WAKW,gBAJY;AAAA,YACrB;AAAA,YACA,MAAM,eAAe;AAAA,YACtB,UAAA;AAAA,YACC,QAAA,OAAA;AAAA,UAAA;;;;;;;;"}