@nextcloud/vue 9.0.0-rc.9 → 9.0.1

package/dist/utils/colors.d.ts

@@ -19,6 +19,8 @@ export declare class Color {
      */
     get color(): string;
 }
+export declare const COLOR_BLACK: Color;
+export declare const COLOR_WHITE: Color;
 /**
  * Like GenColor(4) but with labels
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextcloud/vue",
-  "version": "9.0.0-rc.9",
+  "version": "9.0.1",
   "description": "Nextcloud vue components",
   "keywords": [
     "vuejs",
@@ -78,7 +78,7 @@
     "@ckpack/vue-color": "^1.6.0",
     "@floating-ui/dom": "^1.7.4",
     "@nextcloud/auth": "^2.5.2",
-    "@nextcloud/axios": "^2.5.1",
+    "@nextcloud/axios": "^2.5.2",
     "@nextcloud/browser-storage": "^0.4.0",
     "@nextcloud/capabilities": "^1.2.0",
     "@nextcloud/event-bus": "^3.3.2",
@@ -87,7 +87,6 @@
     "@nextcloud/logger": "^3.0.2",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/sharing": "^0.3.0",
-    "@nextcloud/timezones": "^1.0.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/components": "^13.9.0",
     "@vueuse/core": "^13.9.0",
@@ -95,13 +94,13 @@
     "clone": "^2.1.2",
     "crypto-browserify": "^3.12.1",
     "debounce": "^2.2.0",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.2.7",
     "emoji-mart-vue-fast": "^15.0.5",
     "escape-html": "^1.0.3",
     "floating-vue": "^5.2.2",
     "focus-trap": "^7.6.5",
     "linkifyjs": "^4.3.2",
-    "p-queue": "^8.1.1",
+    "p-queue": "^9.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-react": "^8.0.0",
@@ -124,7 +123,7 @@
     "@babel/plugin-syntax-import-assertions": "^7.27.1",
     "@babel/plugin-transform-typescript": "^7.28.0",
     "@babel/preset-typescript": "^7.27.1",
-    "@fontsource/roboto": "^5.2.6",
+    "@fontsource/roboto": "^5.2.8",
     "@mdi/js": "^7.4.47",
     "@mdi/svg": "^7.4.47",
     "@nextcloud/babel-config": "^1.2.0",
@@ -133,16 +132,16 @@
     "@nextcloud/stylelint-config": "^3.1.0",
     "@nextcloud/vite-config": "^2.5.0",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
-    "@playwright/experimental-ct-vue": "^1.55.0",
-    "@playwright/test": "^1.55.0",
+    "@playwright/experimental-ct-vue": "^1.55.1",
+    "@playwright/test": "^1.55.1",
     "@types/gettext-parser": "^8.0.0",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.6.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "core-js": "^3.45.1",
-    "eslint": "^9.35.0",
+    "eslint": "^9.37.0",
     "file-loader": "^6.2.0",
     "gettext-extractor": "^4.0.1",
     "gettext-parser": "^8.0.0",
@@ -150,18 +149,18 @@
     "jsdom": "^26.1.0",
     "remark-gfm": "^4.0.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.92.1",
-    "stylelint": "^16.24.0",
+    "sass": "^1.93.2",
+    "stylelint": "^16.25.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
-    "vite": "^7.1.5",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4",
     "vue-eslint-parser": "^10.2.0",
     "vue-material-design-icons": "^5.3.1",
     "vue-styleguidist": "^4.72.4",
-    "vue-tsc": "^3.0.6",
-    "webpack": "^5.101.3",
+    "vue-tsc": "^3.1.0",
+    "webpack": "^5.102.0",
     "webpack-merge": "^6.0.1"
   },
   "engines": {

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppContent-C0PyJQuL.mjs","sources":["../../src/components/NcAppContent/NcAppContentDetailsToggle.vue","../../src/utils/appName.ts","../../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, 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, { immediate: true })\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: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport logger from './logger.ts'\n\nlet realAppName = 'missing-app-name'\n\ntry {\n\trealAppName = appName\n} catch {\n\tlogger.error('The `@nextcloud/vue` library was used without setting / replacing the `appName`.')\n}\n\nexport const APP_NAME = realAppName\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': hasList }\">\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=\"hasList\">\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:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"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:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"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=\"!hasList\" />\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 { loadState } from '@nextcloud/initial-state'\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 } 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'\nconst activeApp = loadState('core', 'active-app', APP_NAME)\nconst localizedAppName = loadState('core', 'apps', []).find(({ id }) => id === activeApp)?.name ?? APP_NAME\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\thasList: false,\n\t\t\thasContent: false,\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(localizedAppName)\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\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\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.checkSlots()\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// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$slots.list\n\t\t\tthis.hasContent = !!this.$slots.default\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/NcAppSettingsDialog-GHmlZjop.mjs

@@ -1,261 +0,0 @@
-import '../assets/NcAppSettingsDialog-CW1IxPWr.css';
-import debounce from "debounce";
-import { resolveComponent, createBlock, createCommentVNode, openBlock, mergeProps, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, withKeys, withModifiers, normalizeClass, toDisplayString, warn } from "vue";
-import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { r as register, f as t45, a as t } from "./_l10n-CeXHJQB0.mjs";
-import { N as NcDialog } from "./NcDialog-7-cxNVxV.mjs";
-import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t45);
-const _sfc_main = {
-  name: "NcAppSettingsDialog",
-  components: {
-    NcDialog,
-    NcVNodes: _sfc_main$1
-  },
-  provide() {
-    return {
-      registerSection: this.registerSection,
-      unregisterSection: this.unregisterSection
-    };
-  },
-  props: {
-    /**
-     * Determines the open / closed state of the modal
-     */
-    open: {
-      type: Boolean,
-      required: true
-    },
-    /**
-     * Shows the navigation on desktop if true
-     */
-    showNavigation: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: String,
-      default: "body"
-    },
-    /**
-     * Name of the settings
-     */
-    name: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional elements to add to the focus trap
-     */
-    additionalTrapElements: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ["update:open"],
-  setup() {
-    return {
-      isMobile: useIsMobile()
-    };
-  },
-  data() {
-    return {
-      selectedSection: "",
-      linkClicked: false,
-      addedScrollListener: false,
-      scroller: null,
-      /**
-       * Currently registered settings sections
-       *
-       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
-       */
-      sections: []
-    };
-  },
-  computed: {
-    dialogProperties() {
-      return {
-        additionalTrapElements: this.additionalTrapElements,
-        closeOnClickOutside: true,
-        class: "app-settings",
-        container: this.container,
-        contentClasses: "app-settings__content",
-        size: "large",
-        name: this.name,
-        navigationClasses: "app-settings__navigation"
-      };
-    },
-    /**
-     * Check if one or more navigation entries provide icons
-     */
-    hasNavigationIcons() {
-      return this.sections.some(({ icon }) => !!icon);
-    },
-    hasNavigation() {
-      if (this.isMobile || !this.showNavigation) {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    settingsNavigationAriaLabel() {
-      return t("Settings navigation");
-    }
-  },
-  updated() {
-    if (!this.$refs.settingsScroller) {
-      return;
-    }
-    this.scroller = this.$refs.settingsScroller;
-    if (!this.addedScrollListener) {
-      this.scroller.addEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = true;
-    }
-  },
-  methods: {
-    /**
-     * Called when a new section is registered
-     *
-     * @param {string} id The section ID
-     * @param {string} name The section name
-     * @param {import('vue').VNode[]|undefined} icon Optional icon component
-     */
-    registerSection(id, name, icon) {
-      if (this.sections.some(({ id: otherId }) => id === otherId)) {
-        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
-      }
-      if (this.sections.some(({ name: otherName }) => name === otherName)) {
-        warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
-      }
-      const newSections = [...this.sections, { id, name, icon }];
-      this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => this.$slots.default?.().indexOf((vnode) => vnode?.props?.id === id2) ?? -1;
-        return indexOf(idA) - indexOf(idB);
-      });
-      if (this.sections.length === 1) {
-        this.selectedSection = id;
-      }
-    },
-    /**
-     * Called when a section is unregistered to remove it from dialog
-     *
-     * @param {string} id The section ID
-     */
-    unregisterSection(id) {
-      this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
-      if (this.selectedSection === id) {
-        this.selectedSection = this.sections[0]?.id ?? "";
-      }
-    },
-    /**
-     * Scrolls the content to the selected settings section.absolute
-     *
-     * @param {string} item the ID of the section
-     */
-    handleSettingsNavigationClick(item) {
-      this.linkClicked = true;
-      document.getElementById("settings-section_" + item).scrollIntoView({
-        behavior: "smooth",
-        inline: "nearest"
-      });
-      this.selectedSection = item;
-      setTimeout(() => {
-        this.linkClicked = false;
-      }, 1e3);
-    },
-    handleCloseModal(isOpen) {
-      if (isOpen) {
-        return;
-      }
-      this.$emit("update:open", false);
-      this.scroller.removeEventListener("scroll", this.handleScroll);
-      this.addedScrollListener = false;
-      this.scroller.scrollTop = 0;
-    },
-    handleScroll() {
-      if (!this.linkClicked) {
-        this.unfocusNavigationItem();
-      }
-    },
-    /**
-     * Remove selected section once the user starts scrolling
-     *
-     * @type {import('debounce').DebouncedFunction<() => void>}
-     */
-    unfocusNavigationItem: debounce(function() {
-      this.selectedSection = "";
-      if (document.activeElement.className.includes("navigation-list__link")) {
-        document.activeElement.blur();
-      }
-    }, 300)
-  }
-};
-const _hoisted_1 = {
-  key: 0,
-  class: "navigation-list"
-};
-const _hoisted_2 = ["aria-current", "href", "onClick", "onKeydown"];
-const _hoisted_3 = {
-  key: 0,
-  class: "navigation-list__link-icon"
-};
-const _hoisted_4 = { class: "navigation-list__link-text" };
-const _hoisted_5 = { ref: "settingsScroller" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcVNodes = resolveComponent("NcVNodes");
-  const _component_NcDialog = resolveComponent("NcDialog");
-  return $props.open ? (openBlock(), createBlock(_component_NcDialog, mergeProps({
-    key: 0,
-    "navigation-aria-label": $options.settingsNavigationAriaLabel
-  }, $options.dialogProperties, { "onUpdate:open": $options.handleCloseModal }), createSlots({
-    default: withCtx(() => [
-      createElementVNode("div", _hoisted_5, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 512)
-    ]),
-    _: 2
-  }, [
-    $options.hasNavigation ? {
-      name: "navigation",
-      fn: withCtx(({ isCollapsed }) => [
-        !isCollapsed ? (openBlock(), createElementBlock("ul", _hoisted_1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($data.sections, (section) => {
-            return openBlock(), createElementBlock("li", {
-              key: section.id
-            }, [
-              createElementVNode("a", {
-                "aria-current": `${section.id === $data.selectedSection}`,
-                class: normalizeClass(["navigation-list__link", {
-                  "navigation-list__link--active": section.id === $data.selectedSection,
-                  "navigation-list__link--icon": $options.hasNavigationIcons
-                }]),
-                href: `#settings-section_${section.id}`,
-                tabindex: "0",
-                onClick: withModifiers(($event) => $options.handleSettingsNavigationClick(section.id), ["prevent"]),
-                onKeydown: withKeys(($event) => $options.handleSettingsNavigationClick(section.id), ["enter"])
-              }, [
-                $options.hasNavigationIcons ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                  section.icon ? (openBlock(), createBlock(_component_NcVNodes, {
-                    key: 0,
-                    vnodes: section.icon
-                  }, null, 8, ["vnodes"])) : createCommentVNode("", true)
-                ])) : createCommentVNode("", true),
-                createElementVNode("span", _hoisted_4, toDisplayString(section.name), 1)
-              ], 42, _hoisted_2)
-            ]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ]),
-      key: "0"
-    } : void 0
-  ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : createCommentVNode("", true);
-}
-const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-39ac847e"]]);
-export {
-  NcAppSettingsDialog as N
-};
-//# sourceMappingURL=NcAppSettingsDialog-GHmlZjop.mjs.map

package/dist/chunks/NcAppSettingsDialog-GHmlZjop.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsDialog-GHmlZjop.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { warn } from 'vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport NcDialog from '../NcDialog/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t *\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t *\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.().indexOf((vnode) => vnode?.props?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t *\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove selected section once the user starts scrolling\n\t\t *\n\t\t * @type {import('debounce').DebouncedFunction<() => void>}\n\t\t */\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element);\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcVNodes","id","_openBlock","_createBlock","_mergeProps","_createSlots","_createElementVNode","_renderSlot","_withCtx","_createElementBlock","_Fragment","_renderList","_withModifiers","_withKeys","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-tccU68DQ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSettingsSection-tccU68DQ.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\t/**\n\t\t * Name of the section\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The id of the section\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon?.())\n\t\t},\n\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon?.())\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;AAiBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,mBAAmB,mBAAmB;AAAA,EAE/C,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMX,IAAI;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,IAAI;AAEb,eAAO,iBAAiB,KAAK,EAAE;AAAA,MAChC;AAAA;;EAIF,UAAU;AAAA;AAAA,IAET,SAAS;AACR,aAAO,sBAAsB,KAAK;AAAA,IACnC;AAAA;;EAID,OAAO;AAAA,IACN,GAAG,OAAO,OAAO;AAChB,WAAK,kBAAkB,KAAK;AAC5B,WAAK,gBAAgB,OAAO,KAAK,MAAM,KAAK,QAAQ,OAAI,CAAI;AAAA,IAC7D;AAAA,IAEA,KAAK,SAAS;AACb,WAAK,kBAAkB,KAAK,EAAE;AAC9B,WAAK,gBAAgB,KAAK,IAAI,SAAS,KAAK,QAAQ,OAAI,CAAI;AAAA,IAC7D;AAAA;EAGD,UAAU;AAET,SAAK,gBAAgB,KAAK,IAAI,KAAK,MAAM,KAAK,QAAQ,OAAI,CAAI;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACf,SAAK,kBAAkB,KAAK,EAAE;AAAA,EAC/B;AACD;;;;sBAjECA,mBAOU,WAAA;AAAA,IAPA,IAAI,SAAA;AAAA,IAAS,sBAAoB,SAAA,MAAM;AAAA,IAAW,OAAM;AAAA;IACjEC,mBAEK,MAAA;AAAA,MAFA,OAAO,SAAA,MAAM;AAAA,MAAW,OAAM;AAAA,uBAC/B,OAAA,IAAI,GAAA,GAAA,UAAA;AAAA,IAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;"}

package/dist/chunks/NcColorPicker-BA2HkCh_.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcColorPicker-BA2HkCh_.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\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 allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-model for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker v-model=\"color\" v-model:open=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Color } from '../../utils/colors.ts'\n\nimport { Chrome as VueChrome } from '@ckpack/vue-color'\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { computed, ref } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport logger from '../../utils/logger.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcPopover from '../NcPopover/index.js'\n\n/**\n * A HEX color that represents the initial value of the picker\n */\nconst currentColor = defineModel<string>({ required: true })\n\n/**\n * The open state of the color picker.\n */\nconst open = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t */\n\tadvancedFields?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string | Element\n\n\t/**\n\t * Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t *\n\t * @type {string[] | {color: string, name: string}[]}\n\t */\n\tpalette?: string[] | Color[]\n\n\t/**\n\t * Limit selectable colors to only the provided palette\n\t */\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [...defaultPalette],\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t */\n\tsubmit: [string]\n\n\t/**\n\t * The color picker was fully closed and all transitions are finished.\n\t */\n\tclosed: []\n}>()\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\n/**\n * Unique id used to identify different color pickers\n */\nconst id = createElementId()\n\n/**\n * Is the advanced picker is open\n */\nconst advanced = ref(false)\n\n/**\n * Normalized palette by converting array of hex colors to color objects\n */\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t|| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = [...defaultPalette]\n\t\t\tbreak\n\t\t}\n\t}\n\n\treturn palette.map((item) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t}))\n})\n\nconst contrastColor = computed(() => {\n\tconst black = '#000000'\n\tconst white = '#FFFFFF'\n\treturn calculateLuma(currentColor.value) > 0.5 ? black : white\n})\n\n/**\n * Submit a picked colour and close picker\n *\n * @param hideCallback - callback to close popover\n */\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/**\n * Pick a colour\n *\n * @param color - The picked color\n */\nfunction pickColor(color: string | Color | { hex: string }) {\n\tif (typeof color !== 'string') {\n\t\tcolor = 'hex' in color ? color.hex : color.color\n\t}\n\tcurrentColor.value = color\n}\n\n/**\n * Calculate luminance of provided hex color\n *\n * @param color - The hex color\n */\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/**\n * Convert hex color to RGB\n *\n * @param hex - The hex color\n */\nfunction hexToRGB(hex: string): [number, number, number] {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\tif (!result) {\n\t\treturn [0, 0, 0]\n\t}\n\n\treturn [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]\n}\n</script>\n\n<template>\n\t<NcPopover\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t@apply-hide=\"emit('closed')\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: contrastColor,\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<VueChrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@update:model-value=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element);\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-element) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-inline-start: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter-from {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-from {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["_useModel","_createBlock","_unref","container","_withCtx","_renderSlot","_createElementVNode","_normalizeClass","advancedFields","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_normalizeStyle","VueChrome","paletteOnly"],"mappings":"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"}

package/dist/chunks/NcPopover-D8iSVK-p.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcPopover-D8iSVK-p.mjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': () => this.shown,\n\t\t\t'NcPopover:trigger:attrs': () => this.triggerAttrs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Is the popover currently shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * ARIA Role of the popup\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\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 components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `no-focus-trap` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover no-focus-trap>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With logical placement\n\nIf the text flow is language specific (e.g. UI is shown for right-to-left language),\nalso the popover often needs to be adjusted when not rendered on top or bottom (default).\n\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"ltr\">\n\t\t\t\tLTR\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"dir\" type=\"radio\" value=\"rtl\">\n\t\t\t\tRTL\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<div class=\"content\" :dir>\n\t\t\t<NcPopover :key=\"dir\"\n\t\t\t\tplacement=\"end\"\n\t\t\t\t:triggers=\"['hover']\">\n\t\t\t\t<template #trigger>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\tHover me\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t\t<template #default>\n\t\t\t\t\tThis will be shown on the logical end of the button.\n\t\t\t\t</template>\n\t\t\t</NcPopover>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdir: 'ltr',\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.content {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-around;\n}\n\nfieldset {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n}\n</style>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\" aria-modal=\"true\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown\n\t\tref=\"popover\"\n\t\tv-model:shown=\"internalShown\"\n\t\t:arrow-padding=\"10\"\n\t\t:auto-hide=\"closeOnClickOutside\"\n\t\t:boundary=\"boundary || undefined\"\n\t\t:container\n\t\t:delay\n\t\t:distance=\"10\"\n\t\thandle-resize\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:placement=\"internalPlacement\"\n\t\t:popper-class=\"[$style.ncPopover, popoverBaseClass]\"\n\t\t:popper-triggers\n\t\t:popper-hide-triggers\n\t\t:popper-show-triggers\n\t\t:theme\n\t\t:triggers=\"internalTriggers\"\n\t\t:hide-triggers\n\t\t:show-triggers\n\t\t@update:shown=\"internalShown = $event\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper=\"slotProps\">\n\t\t\t<slot name=\"default\" v-bind=\"slotProps\" />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown, options } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { warn } from 'vue'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport logger from '../../utils/logger.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nconst theme = 'nc-popover-9'\n\n// NcPopover has a custom theme to have a custom name but same as the default \"dropdown\" theme\noptions.themes[theme] = structuredClone(options.themes.dropdown)\n\n/**\n * @typedef {import('focus-trap').FocusTargetValueOrFalse} FocusTargetValueOrFalse\n * @typedef {FocusTargetValueOrFalse|() => FocusTargetValueOrFalse} SetReturnFocus\n */\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Element to use for calculating the popper boundary (size and position).\n\t\t * Either a query string or the actual HTMLElement.\n\t\t */\n\t\tboundary: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Automatically hide the popover on click outside.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Container where to mount the popover.\n\t\t * Either a select query or `false` to mount to the parent node.\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Delay for showing or hiding the popover.\n\t\t *\n\t\t * Can either be a number or an object to configure different delays (`{ show: number, hide: number }`).\n\t\t */\n\t\tdelay: {\n\t\t\ttype: [Number, Object],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Disable the popover focus trap.\n\t\t */\n\t\tnoFocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Where to place the popover.\n\t\t *\n\t\t * This consists of the vertical placement and the horizontal placement.\n\t\t * E.g. `bottom` will place the popover on the bottom of the trigger (horizontally centered),\n\t\t * while `buttom-start` will horizontally align the popover on the logical start (e.g. for LTR layout on the left.).\n\t\t * The `start` or `end` placement will align the popover on the left or right side or the trigger element.\n\t\t *\n\t\t * @type {'auto'|'auto-start'|'auto-end'|'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'start'|'end'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Class to be applied to the popover base\n\t\t */\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover on the popover container itself.\n\t\t * This is useful if you set `triggers` to `hover` and also want the popover to stay open while hovering the popover itself.\n\t\t *\n\t\t * It is possible to also pass an object to define different triggers for hide and show `{ show: ['hover'], hide: ['click'] }`.\n\t\t */\n\t\tpopoverTriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {SetReturnFocus}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [Boolean, HTMLElement, SVGElement, String, Function],\n\t\t},\n\n\t\t/**\n\t\t * Show or hide the popper\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Events that trigger the popover.\n\t\t *\n\t\t * If you pass an empty array then only the `shown` prop can control the popover state.\n\t\t * Following events are available:\n\t\t * - `'hover'`\n\t\t * - `'click'`\n\t\t * - `'focus'`\n\t\t * - `'touch'`\n\t\t *\n\t\t * It is also possible to pass an object to have different events for show and hide:\n\t\t * `{ hide: ['click'], show: ['click', 'hover'] }`\n\t\t */\n\t\ttriggers: {\n\t\t\ttype: [Array, Object],\n\t\t\tdefault: () => ['click'],\n\t\t},\n\t},\n\n\temits: [\n\t\t'afterShow',\n\t\t'afterHide',\n\t\t'update:shown',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttheme,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpopperTriggers() {\n\t\t\tif (this.popoverTriggers && Array.isArray(this.popoverTriggers)) {\n\t\t\t\treturn this.popoverTriggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperHideTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tpopperShowTriggers() {\n\t\t\tif (this.popoverTriggers && typeof this.popoverTriggers === 'object') {\n\t\t\t\treturn this.popoverTriggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalTriggers() {\n\t\t\tif (this.triggers && Array.isArray(this.triggers)) {\n\t\t\t\treturn this.triggers\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\thideTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.hide\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tshowTriggers() {\n\t\t\tif (this.triggers && typeof this.triggers === 'object') {\n\t\t\t\treturn this.triggers.show\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tinternalPlacement() {\n\t\t\tif (this.placement === 'start') {\n\t\t\t\treturn isRtl ? 'right' : 'left'\n\t\t\t} else if (this.placement === 'end') {\n\t\t\t\treturn isRtl ? 'left' : 'right'\n\t\t\t}\n\t\t\treturn this.placement\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\n\t\tinternalShown(value) {\n\t\t\tthis.$emit('update:shown', value)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove incorrect aria-describedby attribute from the trigger.\n\t\t *\n\t\t * @see https://github.com/Akryum/floating-vue/blob/8d4f7125aae0e3ea00ba4093d6d2001ab15058f1/packages/floating-vue/src/components/Popper.ts#L734\n\t\t */\n\t\tremoveFloatingVueAriaDescribedBy() {\n\t\t\t// When the popover is shown, floating-vue mutates the root elements of the trigger adding data-popper-shown and incorrect aria-describedby attributes.\n\t\t\tconst triggerContainer = this.getPopoverTriggerContainerElement()\n\t\t\tconst triggerElements = triggerContainer.querySelectorAll('[data-popper-shown]')\n\t\t\tfor (const el of triggerElements) {\n\t\t\t\tel.removeAttribute('aria-describedby')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverTriggerContainerElement() {\n\t\t\treturn this.$refs.popover?.$refs.popper?.$refs.reference\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (this.noFocusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel.tabIndex = -1\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallBackFocus: el,\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (error) {\n\t\t\t\tlogger.warn('[NcPopover] Failed to clear focus trap', { error })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tasync afterShow() {\n\t\t\tthis.getPopoverContentElement().addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterShow')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.removeFloatingVueAriaDescribedBy()\n\n\t\t\tawait this.$nextTick()\n\t\t\tawait this.useFocusTrap()\n\t\t\tthis.addEscapeStopPropagation()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * On component unmounting Vue:\n\t\t\t * 1. Resets the template ref to null\n\t\t\t * 2. Triggers <Dropdown> `beforeUnmount` - it emits `apply-hide` event\n\t\t\t *   2.1. At that moment this.$refs.popover is null already, and we cannot use `this.getPopoverContentElement()`\n\t\t\t *   2.2. We can ignore emitting `after-hide` event (was also not the case on stable8)\n\t\t\t * 3. Actually removes <Dropdown> node\n\t\t\t * 4. Triggers <Dropdown> `unmounted`\n\t\t\t */\n\t\t\tthis.getPopoverContentElement()?.addEventListener('transitionend', () => {\n\t\t\t\t/**\n\t\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t\t *\n\t\t\t\t * This is different from the 'hide' and 'apply-hide' which\n\t\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t\t */\n\t\t\t\tthis.$emit('afterHide')\n\t\t\t}, { once: true, passive: true })\n\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" module>\n$arrow-width: 10px;\n// Move the arrow just slightly inside the popover\n// To prevent a visual gap on page scaling\n$arrow-position: $arrow-width - 1px;\n\n// Class is built by floating-vue as \"v-popper--theme-{THEME}\"\n.ncPopover:global(.v-popper--theme-nc-popover-9) {\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t// Size class comes from the floating-vue library we use\n\t:global(.resize-observer) {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tz-index: -1;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\topacity: 0;\n\n\t\tobject {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: 0;\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\tpointer-events: none;\n\t\t\tz-index: -1;\n\t\t}\n\t}\n\n\t&:global(.v-popper__popper) {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\t:global(.v-popper__wrapper) {\n\t\t\t/*\n\t\t\t * In theory, \"filter: drop-shadow\" would look better here with arrow shadow.\n\t\t\t * In fact, in results in a blurry popover in Chromium on scaling.\n\t\t\t * The hypothesis is that \"filter\" creates a new composition layer,\n\t\t\t * and with GPU acceleration requires the previous layers content to be rasterized.\n\t\t\t * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover\n\t\t\t * and then apply scaling, which results in a blurry popover.\n\t\t\t */\n\t\t\tbox-shadow: 0 1px 10px var(--color-box-shadow);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t}\n\n\t\t:global(.v-popper__inner) {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t:global(.v-popper__arrow-container) {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] :global(.v-popper__arrow-container) {\n\t\t\tbottom: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] :global(.v-popper__arrow-container) {\n\t\t\ttop: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-top-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tleft: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] :global(.v-popper__arrow-container) {\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tright: -$arrow-position;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-right-width: 0;\n\t\t\t/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcPopoverTriggerProvider","options","_createBlock","_withCtx","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/chunks/NcRadioGroupButton-WXtnV-iL.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRadioGroupButton-WXtnV-iL.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 {\n\ttype Slot,\n\n\tcomputed,\n\tonMounted,\n} from 'vue'\nimport { createElementId } from '../../utils/createElementId.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()\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]\"\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\tjustify-content: center;\n\theight: 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\t&:first-of-type {\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t&:last-of-type {\n\t\tborder-start-end-radius: var(--border-radius-element);\n\t\tborder-end-end-radius: var(--border-radius-element);\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\tline-height: calc(var(--default-clickable-area) - 4px);\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","$slots","_renderSlot","label","_unref","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;AAeA,UAAM,QAAQ;AAwBd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,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,gBAAgB,CAAA;AAAA,QAGtF,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBH,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DE,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXL,mBAEM,OAAA;AAAA;UAFa,IAAIM,MAAA,OAAA;AAAA,UAAU,OAAKL,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEG,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTE,mBAOmB,SAAA;AAAA,UANjB,mBAAiBF,KAAAA,QAAQC,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYD,KAAAA,QAAQ,SAAYG,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,OAAAC,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}