@nextcloud/vue 9.11.0 → 9.13.0

package/dist/chunks/NcDateTimePickerNative.mjs

@@ -1,10 +1,10 @@
 import '../assets/NcDateTimePickerNative.css';
 import { defineComponent, useModel, computed, openBlock, createBlock, mergeProps, mergeModels } from "vue";
 import { N as NcInputField } from "./NcInputField.mjs";
-import { r as register, y as t41, a as t } from "./_l10n.mjs";
+import { r as register, y as t42, a as t } from "./_l10n.mjs";
 import { c as createElementId } from "./createElementId.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
-register(t41);
+register(t42);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "NcDateTimePickerNative",

package/dist/chunks/NcDialog.mjs

@@ -159,7 +159,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24e91b99"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-adda232f"]]);
 export {
   NcDialog as N
 };

package/dist/chunks/NcDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDialog.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/**\n * Whether the dialog should be shown\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/** Name of the dialog (the heading) */\n\tname: string\n\n\t/** Text of the dialog */\n\tmessage?: string\n\n\t/** Additional elements to add to the focus trap */\n\tadditionalTrapElements?: Array<string | HTMLElement>\n\n\t/**\n\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Size of the underlying NcModal\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Buttons to display\n\t */\n\tbuttons?: NcDialogButtonProps[]\n\n\t/**\n\t * Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t */\n\tisForm?: boolean\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabel?: string\n\n\t/**\n\t * aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabelledby?: string\n\n\t/**\n\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t */\n\tcontentClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t */\n\tdialogClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t *\n\t * @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t *     flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t */\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t *\n\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t */\n\tclosing: [result?: unknown]\n\t/**\n\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t *\n\t * @param event - The forwarded form event\n\t */\n\treset: [event: Event]\n\t/**\n\t * Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t *\n\t * @param event - The submit event\n\t */\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/**\n * The dialog wrapper element\n */\nconst wrapperElement = useTemplateRef('wrapper')\n\n/**\n * We use the dialog width to decide if we collapse the navigation (flex direction row)\n */\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/**\n * Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n */\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/**\n * Whether a navigation was passed and the element should be displayed\n */\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/**\n * The unique id of the nav element\n */\nconst navigationId = createElementId()\n\n/**\n * aria-label attribute for the nav element\n */\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n/**\n * aria-labelledby attribute for the nav element\n */\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby || navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement | HTMLFormElement>('dialogElement')\n/**\n * The HTML element to use for the dialog wrapper - either form or plain div\n */\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/**\n * Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n */\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/**\n * If the underlying modal is shown\n */\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/**\n * Handle clicking a dialog button -> should close\n *\n * @param button - The button that was clicked\n * @param result - Result of the callback function\n */\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/**\n * Handle closing the dialog, optional out transition did not run yet\n *\n * @param result - The result of the callback\n */\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/**\n * Handle dialog closed (out transition finished)\n */\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/**\n * Properties to pass to the underlying NcModal\n */\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}
+{"version":3,"file":"NcDialog.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDialogButton from '../NcDialogButton/index.ts'\nimport NcModal from '../NcModal/index.js'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\n/**\n * Whether the dialog should be shown\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/** Name of the dialog (the heading) */\n\tname: string\n\n\t/** Text of the dialog */\n\tmessage?: string\n\n\t/** Additional elements to add to the focus trap */\n\tadditionalTrapElements?: Array<string | HTMLElement>\n\n\t/**\n\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Size of the underlying NcModal\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Buttons to display\n\t */\n\tbuttons?: NcDialogButtonProps[]\n\n\t/**\n\t * Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t */\n\tisForm?: boolean\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabel?: string\n\n\t/**\n\t * aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabelledby?: string\n\n\t/**\n\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t */\n\tcontentClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t */\n\tdialogClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t *\n\t * @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t *     flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t */\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t *\n\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t */\n\tclosing: [result?: unknown]\n\t/**\n\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t *\n\t * @param event - The forwarded form event\n\t */\n\treset: [event: Event]\n\t/**\n\t * Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t *\n\t * @param event - The submit event\n\t */\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/**\n * The dialog wrapper element\n */\nconst wrapperElement = useTemplateRef('wrapper')\n\n/**\n * We use the dialog width to decide if we collapse the navigation (flex direction row)\n */\nconst { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 })\n\n/**\n * Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n */\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/**\n * Whether a navigation was passed and the element should be displayed\n */\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/**\n * The unique id of the nav element\n */\nconst navigationId = createElementId()\n\n/**\n * aria-label attribute for the nav element\n */\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n/**\n * aria-labelledby attribute for the nav element\n */\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby || navigationId\n})\n\nconst dialogRootElement = useTemplateRef<HTMLDivElement | HTMLFormElement>('dialogElement')\n/**\n * The HTML element to use for the dialog wrapper - either form or plain div\n */\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/**\n * Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n */\nconst dialogListeners = computed(() => {\n\tif (dialogTagName.value !== 'form') {\n\t\treturn {}\n\t}\n\n\treturn {\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n})\n\n/**\n * If the underlying modal is shown\n */\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/**\n * Handle clicking a dialog button -> should close\n *\n * @param button - The button that was clicked\n * @param result - Result of the callback function\n */\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogRootElement.value!\n\t\t&& !dialogRootElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/**\n * Handle closing the dialog, optional out transition did not run yet\n *\n * @param result - The result of the callback\n */\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/**\n * Handle dialog closed (out transition finished)\n */\nfunction handleClosed() {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/**\n * Properties to pass to the underlying NcModal\n */\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal\n\t\tv-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\tdisableSwipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component\n\t\t\t:is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" class=\"dialog__wrapper\" :class=\"[{ 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav\n\t\t\t\t\tv-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :isCollapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton\n\t\t\t\t\t\tv-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper.modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","_resolveDynamicComponent","_toHandlers","_normalizeClass","_createElementBlock","_renderSlot","_Fragment","_renderList"],"mappings":"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"}

package/dist/chunks/NcDialogButton.vue_vue_type_script_setup_true_lang.mjs

@@ -1,9 +1,9 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, renderSlot, createCommentVNode } from "vue";
-import { r as register, f as t34, a as t } from "./_l10n.mjs";
+import { r as register, f as t35, a as t } from "./_l10n.mjs";
 import { N as NcButton } from "./NcButton.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon.mjs";
-register(t34);
+register(t35);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcDialogButton",
   props: {

package/dist/chunks/NcEmojiPicker.mjs

@@ -7,7 +7,7 @@ import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 import { N as NcColorPicker } from "./NcColorPicker.mjs";
 import { u as useTrapStackControl } from "./useTrapStackControl.mjs";
 import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji.mjs";
-import { r as register, s as t44, u as t38, v as t17, w as t6, a as t } from "./_l10n.mjs";
+import { r as register, s as t45, u as t39, v as t17, w as t5, a as t } from "./_l10n.mjs";
 import { C as Color } from "./colors.mjs";
 import { N as NcButton } from "./NcButton.mjs";
 import { N as NcPopover } from "./NcPopover.mjs";
@@ -55,7 +55,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16, _hoisted_1$1);
 }
 const IconCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-register(t6, t17, t38, t44);
+register(t5, t17, t39, t45);
 let emojiIndex;
 const i18n = {
   search: t("Search emoji"),

package/dist/chunks/NcFilePicker.mjs

@@ -1,5 +1,5 @@
 import '../assets/NcFilePicker.css';
-import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useTemplateRef, computed, normalizeClass, createVNode, withCtx, createBlock, createTextVNode, unref, Fragment, renderList, renderSlot, nextTick } from "vue";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useTemplateRef, computed, nextTick, normalizeClass, createVNode, withCtx, createBlock, createTextVNode, unref, Fragment, renderList, renderSlot } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 import { N as NcActionButton } from "./NcActionButton.mjs";
 import { N as NcActionCaption } from "./NcActionCaption.mjs";
@@ -165,7 +165,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     __expose({
-      reset
+      reset,
+      triggerPickFiles
     });
     const formElement = useTemplateRef("form");
     const inputElement = useTemplateRef("input");
@@ -209,9 +210,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           variant: __props.variant
         }, {
           icon: withCtx(() => [
-            !__props.loading ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
+            !__props.loading ? renderSlot(_ctx.$slots, "icon", {}, () => [
               createVNode(IconPlus, { size: 20 })
-            ]) : (openBlock(), createBlock(NcLoadingIcon, { key: 1 }))
+            ], void 0, 0) : (openBlock(), createBlock(NcLoadingIcon, { key: 1 }))
           ]),
           default: withCtx(() => [
             __props.actionCaption ? (openBlock(), createBlock(NcActionCaption, {
@@ -289,7 +290,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const filePicker = "_filePicker_ZgUxw";
+const filePicker = "_filePicker_DdklE";
 const style0 = {
   filePicker
 };

package/dist/chunks/NcFilePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcFilePicker.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/l10n.ts","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n// This is only a dummy file, the real translations are injected by the vite plugin from build/l10n-plugin!\nimport { getGettextBuilder } from '@nextcloud/l10n/gettext'\n\nconst gtBuilder = getGettextBuilder().detectLanguage()\nconst gt = gtBuilder.build()\n\nconst n = gt.ngettext.bind(gt)\nconst t = gt.gettext.bind(gt)\n\nexport { n, t }\n","<!--\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, nextTick, useTemplateRef } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\tpick: [files: File[]]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional custom icon for the picker menu\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Optional content to be shown in the picker.\n\t * This can be used e.g. for a progress bar or similar.\n\t */\n\tdefault?: Slot\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = useTemplateRef('form')\nconst inputElement = useTemplateRef('input')\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"form\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menuName=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:forceName=\"!iconOnly\"\n\t\t\t:variant>\n\t\t\t<template #icon>\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ canUploadFolders || $slots.actions ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ !directoryOnly || $slots.actions ? t('Upload folder') : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:key=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:name=\"(group as FilePickerItemGroup).caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of (group as FilePickerItemGroup).actions ?? [group as FilePickerItem]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"input\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_normalizeClass","$style","_createVNode","_renderSlot","_createBlock","_createTextVNode","_toDisplayString","$slots","_unref","_Fragment","_renderList"],"mappings":"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","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"NcFilePicker.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/l10n.ts","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n// This is only a dummy file, the real translations are injected by the vite plugin from build/l10n-plugin!\nimport { getGettextBuilder } from '@nextcloud/l10n/gettext'\n\nconst gtBuilder = getGettextBuilder().detectLanguage()\nconst gt = gtBuilder.build()\n\nconst n = gt.ngettext.bind(gt)\nconst t = gt.gettext.bind(gt)\n\nexport { n, t }\n","<!--\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, nextTick, useTemplateRef } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\tpick: [files: File[]]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional custom icon for the picker menu\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Optional content to be shown in the picker.\n\t * This can be used e.g. for a progress bar or similar.\n\t */\n\tdefault?: Slot\n}>()\n\ndefineExpose({\n\treset,\n\ttriggerPickFiles,\n})\n\nconst formElement = useTemplateRef('form')\nconst inputElement = useTemplateRef('input')\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"form\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menuName=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:forceName=\"!iconOnly\"\n\t\t\t:variant>\n\t\t\t<template #icon>\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ canUploadFolders || $slots.actions ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ !directoryOnly || $slots.actions ? t('Upload folder') : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:key=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:name=\"(group as FilePickerItemGroup).caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of (group as FilePickerItemGroup).actions ?? [group as FilePickerItem]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"input\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_normalizeClass","$style","_createVNode","_renderSlot","_createBlock","_createTextVNode","_toDisplayString","$slots","_unref","_Fragment","_renderList"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/chunks/NcFormBox.mjs

@@ -24,12 +24,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ncFormBox = "_ncFormBox_DLj7n";
-const ncFormBox_row = "_ncFormBox_row_Fr1lK";
-const ncFormBox__item = "_ncFormBox__item_-SJyo";
-const ncFormBox_col = "_ncFormBox_col_1wgxQ";
+const ncFormBox = "_ncFormBox_hfm4f";
+const ncFormBox_row = "_ncFormBox_row_aPH49";
+const ncFormBox__item = "_ncFormBox__item_6Ti-E";
+const ncFormBox_col = "_ncFormBox_col_RxD6y";
 const style0 = {
-  "material-design-icon": "_material-design-icon_g04W5",
+  "material-design-icon": "_material-design-icon_jy9UL",
   ncFormBox,
   ncFormBox_row,
   ncFormBox__item,

package/dist/chunks/NcFormBoxButton.mjs

@@ -130,9 +130,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxButton = "_formBoxButton_pfcXH";
+const formBoxButton = "_formBoxButton_jLjuK";
 const style0 = {
-  "material-design-icon": "_material-design-icon_oW-0j",
+  "material-design-icon": "_material-design-icon_oADPC",
   formBoxButton
 };
 const cssModules = {

package/dist/chunks/NcFormBoxItem.mjs

@@ -70,15 +70,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxItem = "_formBoxItem_A3svz";
-const formBoxItem__description = "_formBoxItem__description_s3aoO";
-const formBoxItem_legacy = "_formBoxItem_legacy_M8oCv";
-const formBoxItem_inverted = "_formBoxItem_inverted_yQ6cM";
-const formBoxItem__element = "_formBoxItem__element_63no0";
-const formBoxItem__content = "_formBoxItem__content_plRks";
-const formBoxItem__icon = "_formBoxItem__icon_xzuO7";
+const formBoxItem = "_formBoxItem_PJOAO";
+const formBoxItem__description = "_formBoxItem__description_mgQF6";
+const formBoxItem_legacy = "_formBoxItem_legacy_DqLYy";
+const formBoxItem_inverted = "_formBoxItem_inverted_77j8f";
+const formBoxItem__element = "_formBoxItem__element_l-vrn";
+const formBoxItem__content = "_formBoxItem__content_x-g-c";
+const formBoxItem__icon = "_formBoxItem__icon_ag5Tf";
 const style0 = {
-  "material-design-icon": "_material-design-icon_oeKe9",
+  "material-design-icon": "_material-design-icon_38d5k",
   formBoxItem,
   formBoxItem__description,
   formBoxItem_legacy,

package/dist/chunks/NcFormBoxSwitch.mjs

@@ -77,9 +77,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formBoxSwitch__input = "_formBoxSwitch__input_MIhKf";
+const formBoxSwitch__input = "_formBoxSwitch__input_zScTH";
 const style0 = {
-  "material-design-icon": "_material-design-icon_5UzOd",
+  "material-design-icon": "_material-design-icon_oM2UW",
   formBoxSwitch__input
 };
 const cssModules = {

package/dist/chunks/NcFormGroup.mjs

@@ -49,14 +49,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const formGroup = "_formGroup_s9Y0Y";
-const formGroup_noGap = "_formGroup_noGap_ni6Ax";
-const formGroup__label = "_formGroup__label_flCX6";
-const formGroup__description = "_formGroup__description_ettaL";
-const formGroup__content = "_formGroup__content_AhX7q";
-const formGroup__content_only = "_formGroup__content_only_h-mqW";
+const formGroup = "_formGroup_alpCx";
+const formGroup_noGap = "_formGroup_noGap_nxMYN";
+const formGroup__label = "_formGroup__label_ouOV4";
+const formGroup__description = "_formGroup__description_ndRRF";
+const formGroup__content = "_formGroup__content_O-600";
+const formGroup__content_only = "_formGroup__content_only_Tivq9";
 const style0 = {
-  "material-design-icon": "_material-design-icon_ux73t",
+  "material-design-icon": "_material-design-icon_-aTJn",
   formGroup,
   formGroup_noGap,
   formGroup__label,

package/dist/chunks/NcHotkey.mjs

@@ -42,11 +42,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkey = "_hotkey_kSlAl";
-const hotkey__label = "_hotkey__label_LLPgA";
-const hotkey__keys = "_hotkey__keys_EMshL";
+const hotkey = "_hotkey_DzGB-";
+const hotkey__label = "_hotkey__label_9ecAM";
+const hotkey__keys = "_hotkey__keys_UG-zt";
 const style0 = {
-  "material-design-icon": "_material-design-icon_XAHPq",
+  "material-design-icon": "_material-design-icon_Nn4zt",
   hotkey,
   hotkey__label,
   hotkey__keys

package/dist/chunks/NcHotkeyList.mjs

@@ -1,9 +1,9 @@
 import '../assets/NcHotkeyList.css';
 import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, unref, renderSlot } from "vue";
-import { r as register, q as t32, a as t } from "./_l10n.mjs";
+import { r as register, q as t33, a as t } from "./_l10n.mjs";
 import { c as createElementId } from "./createElementId.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
-register(t32);
+register(t33);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHotkeyList",
   props: {
@@ -26,8 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkeyList = "_hotkeyList_QEQTC";
-const hotkeyList__heading = "_hotkeyList__heading_BXcc-";
+const hotkeyList = "_hotkeyList_l5aVR";
+const hotkeyList__heading = "_hotkeyList__heading_hiuXH";
 const style0 = {
   hotkeyList,
   hotkeyList__heading

package/dist/chunks/NcIconToggleSwitch.mjs

@@ -35,9 +35,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const iconToggleSwitch = "_iconToggleSwitch_ouXRn";
+const iconToggleSwitch = "_iconToggleSwitch_1qpqv";
 const style0 = {
-  "material-design-icon": "_material-design-icon_9yzS5",
+  "material-design-icon": "_material-design-icon_r7JU1",
   iconToggleSwitch
 };
 const cssModules = {

package/dist/chunks/NcKbd.mjs

@@ -1,9 +1,9 @@
 import '../assets/NcKbd.css';
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { r as register, p as t8, a as t } from "./_l10n.mjs";
+import { r as register, p as t7, a as t } from "./_l10n.mjs";
 import { i as isMac } from "./platform.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
-register(t8);
+register(t7);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcKbd",
   props: {
@@ -38,9 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const kbd = "_kbd_BJxuE";
+const kbd = "_kbd_rjhff";
 const style0 = {
-  "material-design-icon": "_material-design-icon_9pyby",
+  "material-design-icon": "_material-design-icon_X6X6f",
   kbd
 };
 const cssModules = {

package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs

@@ -1,13 +1,13 @@
 import '../assets/NcMentionBubble.css';
-import { generateUrl } from "@nextcloud/router";
+import { generateAvatarUrl } from "@nextcloud/router";
 import { checkIfDarkTheme } from "../functions/isDarkTheme/index.mjs";
 function getAvatarUrl(user, options) {
-  const size = (options?.size || 64) <= 64 ? 64 : 512;
-  const guestUrl = options?.isGuest ? "/guest" : "";
-  const themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body) ? "/dark" : "";
-  return generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {
-    user,
-    size
+  return generateAvatarUrl(user, {
+    size: options?.size,
+    isGuestUser: options?.isGuest,
+    isDarkTheme: options?.isDarkTheme ?? checkIfDarkTheme(document.body),
+    guestFallback: true,
+    version: options?.version
   });
 }
 export {

package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs","sources":["../../src/utils/getAvatarUrl.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { generateUrl } from '@nextcloud/router'\nimport { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'\n\ninterface AvatarUrlOptions {\n\t/**\n\t * Should the dark theme variant be used.\n\t */\n\tisDarkTheme?: boolean\n\n\t/**\n\t * Is the user a guest user.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Size of the avatar.\n\t *\n\t * @default 64\n\t */\n\tsize?: 64 | 512\n}\n\n/**\n * Get the avatar URL for a given user.\n *\n * @param user - The user id\n * @param options - Adjustments for the avatar format\n */\nexport function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {\n\t// backend only supports 64 and 512px\n\t// so we only request the needed size for better caching of the request.\n\tconst size = (options?.size || 64) <= 64\n\t\t? 64\n\t\t: 512\n\n\tconst guestUrl = options?.isGuest\n\t\t? '/guest'\n\t\t: ''\n\tconst themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body)\n\t\t? '/dark'\n\t\t: ''\n\n\treturn generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {\n\t\tuser,\n\t\tsize,\n\t})\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,aAAa,MAAc,SAAoC;AAG9E,QAAM,QAAQ,SAAS,QAAQ,OAAO,KACnC,KACA;AAEH,QAAM,WAAW,SAAS,UACvB,WACA;AACH,QAAM,WAAW,SAAS,eAAe,iBAAiB,SAAS,IAAI,IACpE,UACA;AAEH,SAAO,YAAY,UAAU,QAAQ,iBAAiB,QAAQ,uBAAuB;AAAA,IACpF;AAAA,IACA;AAAA,EAAA,CACA;AACF;"}
+{"version":3,"file":"NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs","sources":["../../src/utils/getAvatarUrl.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { generateAvatarUrl } from '@nextcloud/router'\nimport { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'\n\ninterface AvatarUrlOptions {\n\t/**\n\t * Should the dark theme variant be used.\n\t */\n\tisDarkTheme?: boolean\n\n\t/**\n\t * Is the user a guest user.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Size of the avatar.\n\t *\n\t * @default 64\n\t */\n\tsize?: 64 | 512\n\n\t/**\n\t * The user's avatar version. Including it earns a much longer cache lifetime.\n\t */\n\tversion?: string | number\n}\n\n/**\n * Get the avatar URL for a given user.\n *\n * @param user - The user id\n * @param options - Adjustments for the avatar format\n */\nexport function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {\n\treturn generateAvatarUrl(user, {\n\t\tsize: options?.size,\n\t\tisGuestUser: options?.isGuest,\n\t\tisDarkTheme: options?.isDarkTheme ?? checkIfDarkTheme(document.body),\n\t\tguestFallback: true,\n\t\tversion: options?.version,\n\t})\n}\n"],"names":[],"mappings":";;AAsCO,SAAS,aAAa,MAAc,SAAoC;AAC9E,SAAO,kBAAkB,MAAM;AAAA,IAC9B,MAAM,SAAS;AAAA,IACf,aAAa,SAAS;AAAA,IACtB,aAAa,SAAS,eAAe,iBAAiB,SAAS,IAAI;AAAA,IACnE,eAAe;AAAA,IACf,SAAS,SAAS;AAAA,EAAA,CAClB;AACF;"}

package/dist/chunks/NcModal.mjs

@@ -11,7 +11,7 @@ import { useHotKey } from "../composables/useHotKey/index.mjs";
 import "../composables/useIsDarkTheme/index.mjs";
 import "../composables/useIsFullscreen/index.mjs";
 import "../composables/useIsMobile/index.mjs";
-import { r as register, D as t37, A as t20, a as t } from "./_l10n.mjs";
+import { r as register, D as t38, A as t20, a as t } from "./_l10n.mjs";
 import { c as createElementId } from "./createElementId.mjs";
 import { g as getTrapStack } from "./focusTrap.mjs";
 import { i as isRtl } from "./rtl.mjs";
@@ -52,7 +52,7 @@ function useScopeIdAttrs() {
   const scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, ""]));
   return scopeIdAttrs;
 }
-register(t20, t37);
+register(t20, t38);
 const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
 const _hoisted_2 = ["data-theme-light", "data-theme-dark"];
 const _hoisted_3 = ["id"];
@@ -86,15 +86,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     setReturnFocus: { default: void 0 }
   }, {
     "show": { type: Boolean, ...{ default: true } },
-    "showModifiers": {}
+    "showModifiers": {},
+    "slideshowRunning": { type: Boolean, ...{ default: false } },
+    "slideshowRunningModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["next", "previous", "close", "update:show"], ["update:show"]),
+  emits: /* @__PURE__ */ mergeModels(["next", "previous", "close", "update:show"], ["update:show", "update:slideshowRunning"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v046d2bb2": numHeaderActions.value,
-      "v71f7c020": cssSlideshowDelay.value
+      "v11237964": numHeaderActions.value,
+      "v5117887e": cssSlideshowDelay.value
     }));
     const showModal = useModel(__props, "show");
+    const runSlideshow = useModel(__props, "slideshowRunning");
     const props = __props;
     const emit = __emit;
     const scopeIdAttrs = useScopeIdAttrs();
@@ -113,7 +116,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       resume: startSlideshow
     } = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false });
     const animationKey = ref(0);
-    const runSlideshow = ref(false);
     watchEffect(() => {
       if (runSlideshow.value && !props.slideshowPaused) {
         startSlideshow();
@@ -156,6 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return actions;
     });
+    const hasHeader = computed(() => props.name.trim() !== "" || numHeaderActions.value > 0);
     onMounted(() => {
       if (!props.name && !props.labelId) {
         warn("[NcModal] You need either set the name or set a `labelId` for accessibility.");
@@ -264,7 +267,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 appear: ""
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", {
+                  hasHeader.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
                     class: "modal-header",
                     "data-theme-light": __props.lightBackdrop,
                     "data-theme-dark": !__props.lightBackdrop
@@ -327,7 +331,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _: 1
                       }, 8, ["aria-label"])) : createCommentVNode("", true)
                     ])
-                  ], 8, _hoisted_2)
+                  ], 8, _hoisted_2)) : createCommentVNode("", true)
                 ]),
                 _: 3
               }),
@@ -339,7 +343,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   withDirectives(createElementVNode("div", {
                     class: normalizeClass(["modal-wrapper", [
                       `modal-wrapper--${__props.size}`,
-                      { "modal-wrapper--spread-navigation": __props.spreadNavigation }
+                      {
+                        "modal-wrapper--spread-navigation": __props.spreadNavigation,
+                        "modal-wrapper--no-header": !hasHeader.value
+                      }
                     ]]),
                     onMousedown: withModifiers(handleClickModalWrapper, ["self"])
                   }, [
@@ -429,7 +436,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3c357e2d"]]);
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8a639337"]]);
 export {
   NcModal as N
 };