@nextcloud/vue 8.23.1 → 8.24.0

package/dist/chunks/{NcDialog-I_9fyJVt.mjs → NcDialog-D3Z5tp_6.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcDialog-Bzs9oxyt.css';
+import '../assets/NcDialog-BPI0CJvw.css';
 import { useElementSize } from "@vueuse/core";
 import { defineComponent, ref, computed } from "vue";
 import NcModal from "../Components/NcModal.mjs";
-import { N as NcDialogButton } from "./NcDialogButton-DuJ3lE7e.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-BhPydgMe.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = defineComponent({
@@ -70,8 +70,17 @@ const _sfc_main = defineComponent({
       default: () => [],
       validator: (value) => Array.isArray(value) && value.every((element) => typeof element === "object")
     },
+    /**
+     * Do not show the close button for the dialog.
+     * @default false
+     */
+    noClose: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Set to false to no show a close button on the dialog
+     * @deprecated - Use `noClose` instead. Will be removed in v9.
      * @default true
      */
     canClose: {
@@ -104,7 +113,7 @@ const _sfc_main = defineComponent({
       default: false
     },
     /**
-     * Optionally pass additionaly classes which will be set on the navigation for custom styling
+     * Optionally pass additional classes which will be set on the navigation for custom styling
      * @default ''
      * @example
      * ```html
@@ -145,7 +154,7 @@ const _sfc_main = defineComponent({
       default: ""
     },
     /**
-     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * Optionally pass additional classes which will be set on the content wrapper for custom styling
      * @default ''
      */
     contentClasses: {
@@ -154,7 +163,7 @@ const _sfc_main = defineComponent({
       default: ""
     },
     /**
-     * Optionally pass additionaly classes which will be set on the dialog itself
+     * Optionally pass additional classes which will be set on the dialog itself
      * (the default `class` attribute will be set on the modal wrapper)
      * @default ''
      */
@@ -188,17 +197,24 @@ const _sfc_main = defineComponent({
         submit(event) {
           event.preventDefault();
           emit("submit", event);
+        },
+        /**
+         * @param {Event} event Form submit event
+         */
+        reset(event) {
+          event.preventDefault();
+          emit("reset", event);
         }
       } : {}
     );
     const showModal = ref(true);
-    const handleButtonClose = (event, result) => {
-      if (dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
+    function handleButtonClose(button, result) {
+      if (button.nativeType === "submit" && dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
         return;
       }
       handleClosing(result);
       window.setTimeout(() => handleClosed(), 300);
-    };
+    }
     const handleClosing = (result) => {
       showModal.value = false;
       emit("closing", result);
@@ -208,7 +224,7 @@ const _sfc_main = defineComponent({
       emit("update:open", false);
     };
     const modalProps = computed(() => ({
-      canClose: props.canClose,
+      noClose: props.noClose || !props.canClose,
       container: props.container === void 0 ? "body" : props.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
@@ -246,7 +262,7 @@ var _sfc_render = function render() {
     return [_c("p", { staticClass: "dialog__text" }, [_vm._v(" " + _vm._s(_vm.message) + " ")])];
   })], 2)]), _c("div", { staticClass: "dialog__actions" }, [_vm._t("actions", function() {
     return _vm._l(_vm.buttons, function(button, idx) {
-      return _c("NcDialogButton", _vm._b({ key: idx, on: { "click": _vm.handleButtonClose } }, "NcDialogButton", button, false));
+      return _c("NcDialogButton", _vm._b({ key: idx, on: { "click": (_, result) => _vm.handleButtonClose(button, result) } }, "NcDialogButton", button, false));
     });
   })], 2)])], 1) : _vm._e();
 };
@@ -257,9 +273,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "e79a4708"
+  "1aa5fbdd"
 );
 const NcDialog = __component__.exports;
 export {
   NcDialog as N
 };
+//# sourceMappingURL=NcDialog-D3Z5tp_6.mjs.map

package/dist/chunks/NcDialog-D3Z5tp_6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-D3Z5tp_6.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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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\t:open.sync=\"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 label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\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<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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 :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', { '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 v-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\" :is-collapsed=\"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 v-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<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Do not show the close button for the dialog.\n\t\t * @default false\n\t\t */\n\t\tnoClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @deprecated - Use `noClose` instead. Will be removed in v9.\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\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 * Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t */\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = GenRandomId()\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId\n\t\t})\n\n\t\t/**\n\t\t * @type {import('vue').Ref<HTMLFormElement|undefined>}\n\t\t */\n\t\tconst dialogElement = ref()\n\t\t/**\n\t\t * The HTML element to use for the dialog wrapper - either form or plain div\n\t\t */\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/**\n\t\t * Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t */\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/**\n\t\t\t\t * @param {SubmitEvent} event Form submit event\n\t\t\t\t */\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/** Forwarded HTMLFormElement submit event (only if `is-form` is set) */\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t\t/**\n\t\t\t\t * @param {Event} event Form submit event\n\t\t\t\t */\n\t\t\t\treset(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/**\n\t\t\t\t\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t\t\t\t\t */\n\t\t\t\t\temit('reset', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/**\n\t\t * If the underlying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} button The button that was clicked\n\t\t * @param {unknown} result Result of the callback function\n\t\t */\n\t\tfunction handleButtonClose(button, result) {\n\t\t\t// Skip close on submit if invalid dialog\n\t\t\tif (button.nativeType === 'submit'\n\t\t\t\t&& dialogTagName.value === 'form'\n\t\t\t\t&& !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t */\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t */\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tnoClose: props.noClose || !props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\tbox-sizing: border-box;\n\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":[],"mappings":"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"}

package/dist/chunks/{NcDialog-mcbLFc8o.cjs → NcDialog-DbCdhtw7.cjs}

@@ -1,9 +1,9 @@
-require('../assets/NcDialog-Bzs9oxyt.css');
+require('../assets/NcDialog-BPI0CJvw.css');
 "use strict";
 const core = require("@vueuse/core");
 const Vue = require("vue");
 const Components_NcModal = require("../Components/NcModal.cjs");
-const NcDialogButton = require("./NcDialogButton-FLqQdVLb.cjs");
+const NcDialogButton = require("./NcDialogButton-CYsTKE2g.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = Vue.defineComponent({
@@ -71,8 +71,17 @@ const _sfc_main = Vue.defineComponent({
       default: () => [],
       validator: (value) => Array.isArray(value) && value.every((element) => typeof element === "object")
     },
+    /**
+     * Do not show the close button for the dialog.
+     * @default false
+     */
+    noClose: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Set to false to no show a close button on the dialog
+     * @deprecated - Use `noClose` instead. Will be removed in v9.
      * @default true
      */
     canClose: {
@@ -105,7 +114,7 @@ const _sfc_main = Vue.defineComponent({
       default: false
     },
     /**
-     * Optionally pass additionaly classes which will be set on the navigation for custom styling
+     * Optionally pass additional classes which will be set on the navigation for custom styling
      * @default ''
      * @example
      * ```html
@@ -146,7 +155,7 @@ const _sfc_main = Vue.defineComponent({
       default: ""
     },
     /**
-     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * Optionally pass additional classes which will be set on the content wrapper for custom styling
      * @default ''
      */
     contentClasses: {
@@ -155,7 +164,7 @@ const _sfc_main = Vue.defineComponent({
       default: ""
     },
     /**
-     * Optionally pass additionaly classes which will be set on the dialog itself
+     * Optionally pass additional classes which will be set on the dialog itself
      * (the default `class` attribute will be set on the modal wrapper)
      * @default ''
      */
@@ -189,17 +198,24 @@ const _sfc_main = Vue.defineComponent({
         submit(event) {
           event.preventDefault();
           emit("submit", event);
+        },
+        /**
+         * @param {Event} event Form submit event
+         */
+        reset(event) {
+          event.preventDefault();
+          emit("reset", event);
         }
       } : {}
     );
     const showModal = Vue.ref(true);
-    const handleButtonClose = (event, result) => {
-      if (dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
+    function handleButtonClose(button, result) {
+      if (button.nativeType === "submit" && dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
         return;
       }
       handleClosing(result);
       window.setTimeout(() => handleClosed(), 300);
-    };
+    }
     const handleClosing = (result) => {
       showModal.value = false;
       emit("closing", result);
@@ -209,7 +225,7 @@ const _sfc_main = Vue.defineComponent({
       emit("update:open", false);
     };
     const modalProps = Vue.computed(() => ({
-      canClose: props.canClose,
+      noClose: props.noClose || !props.canClose,
       container: props.container === void 0 ? "body" : props.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
@@ -247,7 +263,7 @@ var _sfc_render = function render() {
     return [_c("p", { staticClass: "dialog__text" }, [_vm._v(" " + _vm._s(_vm.message) + " ")])];
   })], 2)]), _c("div", { staticClass: "dialog__actions" }, [_vm._t("actions", function() {
     return _vm._l(_vm.buttons, function(button, idx) {
-      return _c("NcDialogButton", _vm._b({ key: idx, on: { "click": _vm.handleButtonClose } }, "NcDialogButton", button, false));
+      return _c("NcDialogButton", _vm._b({ key: idx, on: { "click": (_, result) => _vm.handleButtonClose(button, result) } }, "NcDialogButton", button, false));
     });
   })], 2)])], 1) : _vm._e();
 };
@@ -258,7 +274,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "e79a4708"
+  "1aa5fbdd"
 );
 const NcDialog = __component__.exports;
 exports.NcDialog = NcDialog;
+//# sourceMappingURL=NcDialog-DbCdhtw7.cjs.map

package/dist/chunks/NcDialog-DbCdhtw7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-DbCdhtw7.cjs","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 :open.sync=\"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\" :can-close=\"false\">\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 :open.sync=\"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\t:open.sync=\"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 label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\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<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\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 :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', { '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 v-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\" :is-collapsed=\"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 v-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<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Do not show the close button for the dialog.\n\t\t * @default false\n\t\t */\n\t\tnoClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @deprecated - Use `noClose` instead. Will be removed in v9.\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\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 * Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t */\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t *     flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additional classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = GenRandomId()\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId\n\t\t})\n\n\t\t/**\n\t\t * @type {import('vue').Ref<HTMLFormElement|undefined>}\n\t\t */\n\t\tconst dialogElement = ref()\n\t\t/**\n\t\t * The HTML element to use for the dialog wrapper - either form or plain div\n\t\t */\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/**\n\t\t * Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t */\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/**\n\t\t\t\t * @param {SubmitEvent} event Form submit event\n\t\t\t\t */\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/** Forwarded HTMLFormElement submit event (only if `is-form` is set) */\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t\t/**\n\t\t\t\t * @param {Event} event Form submit event\n\t\t\t\t */\n\t\t\t\treset(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/**\n\t\t\t\t\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t\t\t\t\t */\n\t\t\t\t\temit('reset', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/**\n\t\t * If the underlying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} button The button that was clicked\n\t\t * @param {unknown} result Result of the callback function\n\t\t */\n\t\tfunction handleButtonClose(button, result) {\n\t\t\t// Skip close on submit if invalid dialog\n\t\t\tif (button.nativeType === 'submit'\n\t\t\t\t&& dialogTagName.value === 'form'\n\t\t\t\t&& !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t */\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t */\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tnoClose: props.noClose || !props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\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-large);\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\tbox-sizing: border-box;\n\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":["defineComponent","NcDialogButton","NcModal","ref","useElementSize","computed","GenRandomId"],"mappings":"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"}

package/dist/chunks/{NcDialogButton-DuJ3lE7e.mjs → NcDialogButton-BhPydgMe.mjs}

@@ -1,8 +1,8 @@
 import { ref } from "vue";
+import { r as register, b as t30, a as t } from "./_l10n-DKne-gFg.mjs";
 import NcButton from "../Components/NcButton.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CHmdAuhg.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { r as register, b as t30, a as t } from "./_l10n-DDKxBWQL.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t30);
 const _sfc_main = {
@@ -10,7 +10,9 @@ const _sfc_main = {
   props: {
     /**
      * The function that will be called when the button is pressed.
-     * If the function returns `false` the click is ignored and the dialog will not be closed.
+     * If the function returns `false` the click is ignored and the dialog will not be closed,
+     * which is the default behavior of "reset"-buttons.
+     *
      * @type {() => unknown|false|Promise<unknown|false>}
      */
     callback: {
@@ -35,17 +37,20 @@ const _sfc_main = {
       default: void 0
     },
     /**
-     * The button type, see NcButton
-     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+     * The button type, see NcButton.
+     *
+     * @deprecated The usage for setting the color variant is deprecated and will be removed with v9.
+     * @type {'button'|'submit'|'reset'|'primary'|'secondary'|'error'|'warning'|'success'}
      */
     type: {
       type: String,
       required: false,
       default: "secondary",
-      validator: (type) => typeof type === "string" && ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
+      validator: (type) => typeof type === "string" && ["button", "submit", "reset", "primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
     },
     /**
-     * See `nativeType` of `NcButton`
+     * See `nativeType` of `NcButton`.
+     * @deprecated use `type` instead - will removed with v9
      */
     nativeType: {
       type: String,
@@ -61,6 +66,18 @@ const _sfc_main = {
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * The button variant, see NcButton.
+     *
+     * @type {'primary'|'secondary'|'tertiary'|'error'|'warning'|'success'}
+     * @since 8.24.0
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: "secondary",
+      validator: (type) => typeof type === "string" && ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
     }
   },
   emits: ["click"],
@@ -73,7 +90,8 @@ const _sfc_main = {
       }
       isLoading.value = true;
       try {
-        const result = await props.callback?.();
+        const fallback = props.nativeType === "reset" ? false : void 0;
+        const result = await props.callback?.() ?? fallback;
         if (result !== false) {
           emit("click", e, result);
         }
@@ -81,12 +99,12 @@ const _sfc_main = {
         isLoading.value = false;
       }
     };
-    return { __sfc: true, props, emit, isLoading, handleClick, NcButton, NcIconSvgWrapper, NcLoadingIcon, t };
+    return { __sfc: true, props, emit, isLoading, handleClick, t, NcButton, NcIconSvgWrapper, NcLoadingIcon };
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c(_setup.NcButton, { attrs: { "aria-label": _vm.label, "disabled": _vm.disabled, "native-type": _vm.nativeType, "type": _vm.type }, on: { "click": _setup.handleClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  return _c(_setup.NcButton, { attrs: { "aria-label": _vm.label, "disabled": _vm.disabled, "type": _vm.type, "native-type": _vm.nativeType, "variant": _vm.variant }, on: { "click": _setup.handleClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_vm._t("icon", function() {
       return [_setup.isLoading ? _c(_setup.NcLoadingIcon, { attrs: {
         "name": _setup.t("Loading …")
@@ -108,3 +126,4 @@ const NcDialogButton = __component__.exports;
 export {
   NcDialogButton as N
 };
+//# sourceMappingURL=NcDialogButton-BhPydgMe.mjs.map

package/dist/chunks/NcDialogButton-BhPydgMe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton-BhPydgMe.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:type=\"type\"\n\t\t:native-type=\"nativeType\"\n\t\t:variant=\"variant\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state*/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nconst props = defineProps({\n\t/**\n\t * The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed,\n\t * which is the default behavior of \"reset\"-buttons.\n\t *\n\t * @type {() => unknown|false|Promise<unknown|false>}\n\t */\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/**\n\t * The label of the button\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/**\n\t * Optional inline SVG icon for the button\n\t */\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/**\n\t * The button type, see NcButton.\n\t *\n\t * @deprecated The usage for setting the color variant is deprecated and will be removed with v9.\n\t * @type {'button'|'submit'|'reset'|'primary'|'secondary'|'error'|'warning'|'success'}\n\t */\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['button', 'submit', 'reset', 'primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/**\n\t * See `nativeType` of `NcButton`.\n\t * @deprecated use `type` instead - will removed with v9\n\t */\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/**\n\t * If the button should be shown as disabled\n\t */\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * The button variant, see NcButton.\n\t *\n\t * @type {'primary'|'secondary'|'tertiary'|'error'|'warning'|'success'}\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/**\n * Handle clicking the button\n * @param {MouseEvent} e The click event\n */\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\t// for reset buttons the default is \"false\"\n\t\tconst fallback = props.nativeType === 'reset' ? false : undefined\n\t\tconst result = await props.callback?.() ?? fallback\n\t\tif (result !== false) {\n\t\t\t/**\n\t\t\t * The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,UAAM,YAAY,IAAI,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACF;AAEC,gBAAU,QAAQ;AAClB,UAAI;AAEH,cAAM,WAAW,MAAM,eAAe,UAAU,QAAQ;AACxD,cAAM,SAAS,MAAM,MAAM,gBAAgB;AAC3C,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QAC1B;AAAA,MACA,UAAW;AACT,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDialogButton-FLqQdVLb.cjs → NcDialogButton-CYsTKE2g.cjs}

@@ -1,9 +1,9 @@
 "use strict";
 const Vue = require("vue");
+const _l10n = require("./_l10n-DINju8Lo.cjs");
 const Components_NcButton = require("../Components/NcButton.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-B_eOG2sZ.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-const _l10n = require("./_l10n-CjO_W5Dt.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t30);
 const _sfc_main = {
@@ -11,7 +11,9 @@ const _sfc_main = {
   props: {
     /**
      * The function that will be called when the button is pressed.
-     * If the function returns `false` the click is ignored and the dialog will not be closed.
+     * If the function returns `false` the click is ignored and the dialog will not be closed,
+     * which is the default behavior of "reset"-buttons.
+     *
      * @type {() => unknown|false|Promise<unknown|false>}
      */
     callback: {
@@ -36,17 +38,20 @@ const _sfc_main = {
       default: void 0
     },
     /**
-     * The button type, see NcButton
-     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+     * The button type, see NcButton.
+     *
+     * @deprecated The usage for setting the color variant is deprecated and will be removed with v9.
+     * @type {'button'|'submit'|'reset'|'primary'|'secondary'|'error'|'warning'|'success'}
      */
     type: {
       type: String,
       required: false,
       default: "secondary",
-      validator: (type) => typeof type === "string" && ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
+      validator: (type) => typeof type === "string" && ["button", "submit", "reset", "primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
     },
     /**
-     * See `nativeType` of `NcButton`
+     * See `nativeType` of `NcButton`.
+     * @deprecated use `type` instead - will removed with v9
      */
     nativeType: {
       type: String,
@@ -62,6 +67,18 @@ const _sfc_main = {
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * The button variant, see NcButton.
+     *
+     * @type {'primary'|'secondary'|'tertiary'|'error'|'warning'|'success'}
+     * @since 8.24.0
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: "secondary",
+      validator: (type) => typeof type === "string" && ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(type)
     }
   },
   emits: ["click"],
@@ -74,7 +91,8 @@ const _sfc_main = {
       }
       isLoading.value = true;
       try {
-        const result = await props.callback?.();
+        const fallback = props.nativeType === "reset" ? false : void 0;
+        const result = await props.callback?.() ?? fallback;
         if (result !== false) {
           emit("click", e, result);
         }
@@ -82,12 +100,12 @@ const _sfc_main = {
         isLoading.value = false;
       }
     };
-    return { __sfc: true, props, emit, isLoading, handleClick, NcButton: Components_NcButton, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, NcLoadingIcon: Components_NcLoadingIcon, t: _l10n.t };
+    return { __sfc: true, props, emit, isLoading, handleClick, t: _l10n.t, NcButton: Components_NcButton, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, NcLoadingIcon: Components_NcLoadingIcon };
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c(_setup.NcButton, { attrs: { "aria-label": _vm.label, "disabled": _vm.disabled, "native-type": _vm.nativeType, "type": _vm.type }, on: { "click": _setup.handleClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+  return _c(_setup.NcButton, { attrs: { "aria-label": _vm.label, "disabled": _vm.disabled, "type": _vm.type, "native-type": _vm.nativeType, "variant": _vm.variant }, on: { "click": _setup.handleClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_vm._t("icon", function() {
       return [_setup.isLoading ? _c(_setup.NcLoadingIcon, { attrs: {
         "name": _setup.t("Loading …")
@@ -107,3 +125,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcDialogButton = __component__.exports;
 exports.NcDialogButton = NcDialogButton;
+//# sourceMappingURL=NcDialogButton-CYsTKE2g.cjs.map

package/dist/chunks/NcDialogButton-CYsTKE2g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton-CYsTKE2g.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:type=\"type\"\n\t\t:native-type=\"nativeType\"\n\t\t:variant=\"variant\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state*/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nconst props = defineProps({\n\t/**\n\t * The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed,\n\t * which is the default behavior of \"reset\"-buttons.\n\t *\n\t * @type {() => unknown|false|Promise<unknown|false>}\n\t */\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/**\n\t * The label of the button\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/**\n\t * Optional inline SVG icon for the button\n\t */\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/**\n\t * The button type, see NcButton.\n\t *\n\t * @deprecated The usage for setting the color variant is deprecated and will be removed with v9.\n\t * @type {'button'|'submit'|'reset'|'primary'|'secondary'|'error'|'warning'|'success'}\n\t */\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['button', 'submit', 'reset', 'primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/**\n\t * See `nativeType` of `NcButton`.\n\t * @deprecated use `type` instead - will removed with v9\n\t */\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/**\n\t * If the button should be shown as disabled\n\t */\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * The button variant, see NcButton.\n\t *\n\t * @type {'primary'|'secondary'|'tertiary'|'error'|'warning'|'success'}\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/**\n * Handle clicking the button\n * @param {MouseEvent} e The click event\n */\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\t// for reset buttons the default is \"false\"\n\t\tconst fallback = props.nativeType === 'reset' ? false : undefined\n\t\tconst result = await props.callback?.() ?? fallback\n\t\tif (result !== false) {\n\t\t\t/**\n\t\t\t * The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,UAAM,YAAYA,IAAG,IAAC,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACF;AAEC,gBAAU,QAAQ;AAClB,UAAI;AAEH,cAAM,WAAW,MAAM,eAAe,UAAU,QAAQ;AACxD,cAAM,SAAS,MAAM,MAAM,gBAAgB;AAC3C,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QAC1B;AAAA,MACA,UAAW;AACT,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcEmojiPicker-DDCgW2zQ.mjs → NcEmojiPicker-C5HYxVqp.mjs}

@@ -1,14 +1,16 @@
-import '../assets/NcEmojiPicker-rk5qcSl7.css';
-import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast";
-import { r as register, z as t39, A as t34, n as t14, B as t5, a as t } from "./_l10n-DDKxBWQL.mjs";
-import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
-import { C as Color } from "./GenColors-DfwXw1-o.mjs";
+import '../assets/NcEmojiPicker-Ca6U46T8.css';
+import { Picker, Emoji, EmojiIndex } from "emoji-mart-vue-fast";
+import { isFocusable } from "tabbable";
+import { r as register, z as t39, A as t34, n as t14, B as t5, a as t } from "./_l10n-DKne-gFg.mjs";
+import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
+import { u as useTrapStackControl } from "./useTrapStackControl-b3A_383w.mjs";
+import { C as Color } from "./GenColors-NALDypHH.mjs";
 import data from "emoji-mart-vue-fast/data/all.json";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-ph8Nubq7.mjs";
-import { N as NcPopover } from "./NcPopover-DFCPlZpS.mjs";
-import { N as NcTextField } from "./NcTextField-9gC8or6j.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-av-NHSU7.mjs";
+import { N as NcPopover } from "./NcPopover-C9KlPo4Z.mjs";
+import { N as NcTextField } from "./NcTextField-DpLIIKYI.mjs";
 register(t5, t14, t34, t39);
 const _sfc_main$1 = {
   name: "CircleIcon",
@@ -176,6 +178,9 @@ const _sfc_main = {
       return this.activeSet === "native";
     }
   },
+  created() {
+    useTrapStackControl(() => this.open);
+  },
   methods: {
     t,
     clearSearch() {
@@ -208,7 +213,9 @@ const _sfc_main = {
       this.$refs.search.focus();
     },
     afterHide() {
-      this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus();
+      if (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {
+        this.$refs.popover.$el.querySelector('button, [role="button"]')?.focus();
+      }
     },
     /**
      * Manually handle Tab navigation skipping emoji buttons.
@@ -283,7 +290,7 @@ var _sfc_render = function render2() {
     }], "trailing-button-click": function($event) {
       _vm.clearSearch();
       onSearch("");
-    } } }), _c("NcColorPicker", { attrs: { "palette-only": "", "container": _vm.container, "palette": _vm.skinTonePalette, "value": _vm.currentColor.color }, on: { "update:value": _vm.onChangeSkinTone } }, [_c("NcButton", { attrs: { "aria-label": _vm.t("Skin tone"), "type": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    } } }), _c("NcColorPicker", { attrs: { "palette-only": "", "container": _vm.container, "palette": _vm.skinTonePalette, "value": _vm.currentColor.color }, on: { "update:value": _vm.onChangeSkinTone } }, [_c("NcButton", { attrs: { "aria-label": _vm.t("Skin tone"), "variant": "tertiary-no-background" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("IconCircle", { style: { color: _vm.currentColor.color }, attrs: { "title": _vm.currentColor.name, "size": 20 } })];
     }, proxy: true }], null, true) })], 1)], 1)];
   } }, _vm.allowUnselect && _vm.selectedEmoji ? { key: "customCategory", fn: function() {
@@ -297,9 +304,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6e39597a"
+  "d1a625fa"
 );
 const NcEmojiPicker = __component__.exports;
 export {
   NcEmojiPicker as N
 };
+//# sourceMappingURL=NcEmojiPicker-C5HYxVqp.mjs.map