@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcDialog-BM_wTqUn.mjs

@@ -0,0 +1,290 @@
+import '../assets/NcDialog-COuFb47k.css';
+import { useElementSize } from "@vueuse/core";
+import { defineComponent, ref, computed } from "vue";
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-Cr0wVMne.mjs";
+import NcModal from "../Components/NcModal.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = defineComponent({
+  name: "NcDialog",
+  components: {
+    NcDialogButton,
+    NcModal
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: true
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (arr) => {
+        return Array.isArray(arr) && arr.every((element) => typeof element === "string" || element instanceof HTMLElement);
+      },
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     *
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: false,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     *
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    /**
+     * Size of the underlying NcModal
+     *
+     * @default 'small'
+     * @type {'small'|'normal'|'large'|'full'}
+     */
+    size: {
+      type: String,
+      required: false,
+      default: "small",
+      validator: (value) => typeof value === "string" && ["small", "normal", "large", "full"].includes(value)
+    },
+    /**
+     * Buttons to display
+     *
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: false,
+      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: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    /**
+     * Close the dialog if the user clicked outside of the dialog
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Make the dialog wrapper a HTML form element.
+     * The buttons will be wrapped within the form so they can be used as submit / reset buttons.
+     * Please note that when using the property the `navigation` should not be used.
+     */
+    isForm: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     *
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Optionally pass additional classes which will be set on the navigation for custom styling
+     *
+     * @default ''
+     * @example
+     * ```html
+     * <DialogBase :navigation-classes="['mydialog-navigation']"><!-- --></DialogBase>
+     * <!-- ... -->
+     * <style lang="scss">
+     * :deep(.mydialog-navigation) {
+     *     flex-direction: row-reverse;
+     * }
+     * </style>
+     * ```
+     */
+    navigationClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-label for the dialog navigation.
+     * Use it when you want to provide a more meaningful label than the dialog name.
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabel: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-labelledby for the dialog navigation.
+     * Use it when you have an implicit navigation label (e.g. a heading).
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabelledby: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the content wrapper for custom styling
+     *
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the dialog itself
+     * (the default `class` attribute will be set on the modal wrapper)
+     *
+     * @default ''
+     */
+    dialogClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open", "submit"],
+  setup(props, { emit, slots }) {
+    const wrapper = ref();
+    const { width: dialogWidth } = useElementSize(wrapper, { width: 900 });
+    const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
+    const hasNavigation = computed(() => (slots == null ? void 0 : slots.navigation) !== void 0);
+    const navigationId = GenRandomId();
+    const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
+    const navigationAriaLabelledbyAttr = computed(() => {
+      if (props.navigationAriaLabel) {
+        return void 0;
+      }
+      return props.navigationAriaLabelledby || navigationId;
+    });
+    const dialogElement = ref();
+    const dialogTagName = computed(() => props.isForm && !hasNavigation.value ? "form" : "div");
+    const dialogListeners = computed(() => dialogTagName.value === "form" ? {
+      /**
+       * @param {SubmitEvent} event Form submit event
+       */
+      submit(event) {
+        event.preventDefault();
+        emit("submit", event);
+      },
+      /**
+       * @param {Event} event Form submit event
+       */
+      reset(event) {
+        event.preventDefault();
+        emit("reset", event);
+      }
+    } : {});
+    const showModal = ref(true);
+    function handleButtonClose(button, result) {
+      if ((button.type === "submit" || button.nativeType === "submit") && dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
+        return;
+      }
+      handleClosing(result);
+      window.setTimeout(() => handleClosed(), 300);
+    }
+    function handleClosing(result) {
+      showModal.value = false;
+      emit("closing", result);
+    }
+    function handleClosed() {
+      showModal.value = true;
+      emit("update:open", false);
+    }
+    const modalProps = computed(() => ({
+      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,
+      // But we need to set the correct label id so the dialog is labelled
+      labelId: navigationId,
+      size: props.size,
+      show: props.open && showModal.value,
+      outTransition: props.outTransition,
+      closeOnClickOutside: props.closeOnClickOutside,
+      additionalTrapElements: props.additionalTrapElements
+    }));
+    return {
+      dialogElement,
+      dialogListeners,
+      dialogTagName,
+      handleButtonClose,
+      handleClosing,
+      handleClosed,
+      hasNavigation,
+      navigationId,
+      navigationAriaLabelAttr,
+      navigationAriaLabelledbyAttr,
+      isNavigationCollapsed,
+      modalProps,
+      wrapper
+    };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _vm.open ? _c("NcModal", _vm._b({ staticClass: "dialog__modal", attrs: { "enable-slideshow": false, "enable-swipe": false }, on: { "close": _vm.handleClosed, "update:show": function($event) {
+    return _vm.handleClosing();
+  } } }, "NcModal", _vm.modalProps, false), [_c("h2", { staticClass: "dialog__name", attrs: { "id": _vm.navigationId }, domProps: { "textContent": _vm._s(_vm.name) } }), _c(_vm.dialogTagName, _vm._g({ ref: "dialogElement", tag: "component", staticClass: "dialog", class: _vm.dialogClasses }, _vm.dialogListeners), [_c("div", { ref: "wrapper", staticClass: "dialog__wrapper", class: { "dialog__wrapper--collapsed": _vm.isNavigationCollapsed } }, [_vm.hasNavigation ? _c("nav", { staticClass: "dialog__navigation", class: _vm.navigationClasses, attrs: { "aria-label": _vm.navigationAriaLabelAttr, "aria-labelledby": _vm.navigationAriaLabelledbyAttr } }, [_vm._t("navigation", null, { "isCollapsed": _vm.isNavigationCollapsed })], 2) : _vm._e(), _c("div", { staticClass: "dialog__content", class: _vm.contentClasses }, [_vm._t("default", function() {
+    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": (_, result) => _vm.handleButtonClose(button, result) } }, "NcDialogButton", button, false));
+    });
+  })], 2)])], 1) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "66c29e13"
+);
+const NcDialog = __component__.exports;
+export {
+  NcDialog as N
+};
+//# sourceMappingURL=NcDialog-BM_wTqUn.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-BM_wTqUn.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\n\t\tv-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\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\" :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\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<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\nimport NcModal from '../NcModal/index.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((element) => typeof element === 'string' || element instanceof HTMLElement)\n\t\t\t\t)\n\t\t\t},\n\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 *\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 *\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t *\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 *\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 *\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 *\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\t// eslint-disable-next-line vue/no-boolean-default\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 *\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 *\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 *\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 *\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 *\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\t\tsubmit(event) {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t/** Forwarded HTMLFormElement submit event (only if `is-form` is set) */\n\t\t\t\t\t\temit('submit', event)\n\t\t\t\t\t},\n\t\t\t\t\t/**\n\t\t\t\t\t * @param {Event} event Form submit event\n\t\t\t\t\t */\n\t\t\t\t\treset(event) {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t\t\t\t\t\t */\n\t\t\t\t\t\temit('reset', event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\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 *\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.type === 'submit' || 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 *\n\t\t * @param {unknown} result the result of the callback\n\t\t */\n\t\tfunction 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 *\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\tfunction 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-CG2sufkb.cjs

@@ -0,0 +1,289 @@
+require('../assets/NcDialog-COuFb47k.css');
+"use strict";
+const core = require("@vueuse/core");
+const Vue = require("vue");
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
+const NcDialogButton = require("./NcDialogButton-DkfxsIhv.cjs");
+const Components_NcModal = require("../Components/NcModal.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _sfc_main = Vue.defineComponent({
+  name: "NcDialog",
+  components: {
+    NcDialogButton: NcDialogButton.NcDialogButton,
+    NcModal: Components_NcModal
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: true
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (arr) => {
+        return Array.isArray(arr) && arr.every((element) => typeof element === "string" || element instanceof HTMLElement);
+      },
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     *
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: false,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     *
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    /**
+     * Size of the underlying NcModal
+     *
+     * @default 'small'
+     * @type {'small'|'normal'|'large'|'full'}
+     */
+    size: {
+      type: String,
+      required: false,
+      default: "small",
+      validator: (value) => typeof value === "string" && ["small", "normal", "large", "full"].includes(value)
+    },
+    /**
+     * Buttons to display
+     *
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: false,
+      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: {
+      type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
+      default: true
+    },
+    /**
+     * Close the dialog if the user clicked outside of the dialog
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Make the dialog wrapper a HTML form element.
+     * The buttons will be wrapped within the form so they can be used as submit / reset buttons.
+     * Please note that when using the property the `navigation` should not be used.
+     */
+    isForm: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     *
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Optionally pass additional classes which will be set on the navigation for custom styling
+     *
+     * @default ''
+     * @example
+     * ```html
+     * <DialogBase :navigation-classes="['mydialog-navigation']"><!-- --></DialogBase>
+     * <!-- ... -->
+     * <style lang="scss">
+     * :deep(.mydialog-navigation) {
+     *     flex-direction: row-reverse;
+     * }
+     * </style>
+     * ```
+     */
+    navigationClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-label for the dialog navigation.
+     * Use it when you want to provide a more meaningful label than the dialog name.
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabel: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-labelledby for the dialog navigation.
+     * Use it when you have an implicit navigation label (e.g. a heading).
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabelledby: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the content wrapper for custom styling
+     *
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the dialog itself
+     * (the default `class` attribute will be set on the modal wrapper)
+     *
+     * @default ''
+     */
+    dialogClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open", "submit"],
+  setup(props, { emit, slots }) {
+    const wrapper = Vue.ref();
+    const { width: dialogWidth } = core.useElementSize(wrapper, { width: 900 });
+    const isNavigationCollapsed = Vue.computed(() => dialogWidth.value < 876);
+    const hasNavigation = Vue.computed(() => (slots == null ? void 0 : slots.navigation) !== void 0);
+    const navigationId = GenRandomId.GenRandomId();
+    const navigationAriaLabelAttr = Vue.computed(() => props.navigationAriaLabel || void 0);
+    const navigationAriaLabelledbyAttr = Vue.computed(() => {
+      if (props.navigationAriaLabel) {
+        return void 0;
+      }
+      return props.navigationAriaLabelledby || navigationId;
+    });
+    const dialogElement = Vue.ref();
+    const dialogTagName = Vue.computed(() => props.isForm && !hasNavigation.value ? "form" : "div");
+    const dialogListeners = Vue.computed(() => dialogTagName.value === "form" ? {
+      /**
+       * @param {SubmitEvent} event Form submit event
+       */
+      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);
+    function handleButtonClose(button, result) {
+      if ((button.type === "submit" || button.nativeType === "submit") && dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
+        return;
+      }
+      handleClosing(result);
+      window.setTimeout(() => handleClosed(), 300);
+    }
+    function handleClosing(result) {
+      showModal.value = false;
+      emit("closing", result);
+    }
+    function handleClosed() {
+      showModal.value = true;
+      emit("update:open", false);
+    }
+    const modalProps = Vue.computed(() => ({
+      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,
+      // But we need to set the correct label id so the dialog is labelled
+      labelId: navigationId,
+      size: props.size,
+      show: props.open && showModal.value,
+      outTransition: props.outTransition,
+      closeOnClickOutside: props.closeOnClickOutside,
+      additionalTrapElements: props.additionalTrapElements
+    }));
+    return {
+      dialogElement,
+      dialogListeners,
+      dialogTagName,
+      handleButtonClose,
+      handleClosing,
+      handleClosed,
+      hasNavigation,
+      navigationId,
+      navigationAriaLabelAttr,
+      navigationAriaLabelledbyAttr,
+      isNavigationCollapsed,
+      modalProps,
+      wrapper
+    };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _vm.open ? _c("NcModal", _vm._b({ staticClass: "dialog__modal", attrs: { "enable-slideshow": false, "enable-swipe": false }, on: { "close": _vm.handleClosed, "update:show": function($event) {
+    return _vm.handleClosing();
+  } } }, "NcModal", _vm.modalProps, false), [_c("h2", { staticClass: "dialog__name", attrs: { "id": _vm.navigationId }, domProps: { "textContent": _vm._s(_vm.name) } }), _c(_vm.dialogTagName, _vm._g({ ref: "dialogElement", tag: "component", staticClass: "dialog", class: _vm.dialogClasses }, _vm.dialogListeners), [_c("div", { ref: "wrapper", staticClass: "dialog__wrapper", class: { "dialog__wrapper--collapsed": _vm.isNavigationCollapsed } }, [_vm.hasNavigation ? _c("nav", { staticClass: "dialog__navigation", class: _vm.navigationClasses, attrs: { "aria-label": _vm.navigationAriaLabelAttr, "aria-labelledby": _vm.navigationAriaLabelledbyAttr } }, [_vm._t("navigation", null, { "isCollapsed": _vm.isNavigationCollapsed })], 2) : _vm._e(), _c("div", { staticClass: "dialog__content", class: _vm.contentClasses }, [_vm._t("default", function() {
+    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": (_, result) => _vm.handleButtonClose(button, result) } }, "NcDialogButton", button, false));
+    });
+  })], 2)])], 1) : _vm._e();
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "66c29e13"
+);
+const NcDialog = __component__.exports;
+exports.NcDialog = NcDialog;
+//# sourceMappingURL=NcDialog-CG2sufkb.cjs.map