@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/{NcDialog-qsI2VY8S.cjs → NcDialog-BYXi2emF.cjs}

@@ -1,5 +1,5 @@
-var w = require("../assets/NcDialog-9-cx1V0y.css");
-const y = require("@vueuse/core"), a = require("vue"), C = require("../Components/NcModal.cjs"), v = require("./NcDialogButton-Dou0EAc_.cjs"), b = require("./GenRandomId-ULxaMkkr.cjs"), N = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), h = a.defineComponent({
+var S = require("../assets/NcDialog-IM0YIgKq.css");
+const y = require("@vueuse/core"), a = require("vue"), C = require("../Components/NcModal.cjs"), v = require("./NcDialogButton-37TPbyFs.cjs"), b = require("./GenRandomId-ULxaMkkr.cjs"), N = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), h = a.defineComponent({
   name: "NcDialog",
   components: {
     NcDialogButton: v.NcDialogButton,
@@ -148,47 +148,49 @@ const y = require("@vueuse/core"), a = require("vue"), C = require("../Component
     }
   },
   emits: ["closing", "update:open"],
-  setup(e, { emit: t, slots: d }) {
-    const o = a.ref(), { width: c } = y.useElementSize(o, { width: 900 }), u = a.computed(() => c.value < 876), l = a.computed(() => d?.navigation !== void 0), n = a.ref(b.GenRandomId()), i = a.computed(() => e.navigationAriaLabel || void 0), s = a.computed(() => {
+  setup(e, { emit: t, slots: n }) {
+    const l = a.ref(), { width: c } = y.useElementSize(l, { width: 900 }), u = a.computed(() => c.value < 876), i = a.computed(() => (n == null ? void 0 : n.navigation) !== void 0), o = a.ref(b.GenRandomId()), r = a.computed(() => e.navigationAriaLabel || void 0), s = a.computed(() => {
       if (!e.navigationAriaLabel)
-        return e.navigationAriaLabelledby || n.value;
-    }), r = a.ref(!0), m = () => {
+        return e.navigationAriaLabelledby || o.value;
+    }), d = a.ref(!0), m = () => {
       g(), window.setTimeout(() => p(), 300);
     }, g = () => {
-      r.value = !1, t("closing");
+      d.value = !1, t("closing");
     }, p = () => {
-      r.value = !0, t("update:open", !1);
+      d.value = !0, t("update:open", !1);
     }, f = a.computed(() => ({
       canClose: e.canClose,
       container: e.container === void 0 ? "body" : e.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
       size: e.size,
-      show: e.open && r.value,
+      show: e.open && d.value,
       outTransition: e.outTransition,
-      class: "dialog__modal",
       closeOnClickOutside: e.closeOnClickOutside,
-      enableSlideshow: !1,
-      enableSwipe: !1,
       additionalTrapElements: e.additionalTrapElements
     }));
     return {
       handleButtonClose: m,
       handleClosing: g,
       handleClosed: p,
-      hasNavigation: l,
-      navigationId: n,
-      navigationAriaLabelAttr: i,
+      hasNavigation: i,
+      navigationId: o,
+      navigationAriaLabelAttr: r,
       navigationAriaLabelledbyAttr: s,
       isNavigationCollapsed: u,
       modalProps: f,
-      wrapper: o
+      wrapper: l
     };
   }
-}), A = ["id", "textContent"], _ = ["aria-label", "aria-labelledby"], B = { class: "dialog__text" }, S = { class: "dialog__actions" };
-function k(e, t, d, o, c, u) {
-  const l = a.resolveComponent("NcDialogButton"), n = a.resolveComponent("NcModal");
-  return e.open ? (a.openBlock(), a.createBlock(n, a.mergeProps({ key: 0 }, e.modalProps, {
+}), A = ["id", "textContent"], _ = ["aria-label", "aria-labelledby"], B = { class: "dialog__text" }, k = { class: "dialog__actions" };
+function q(e, t, n, l, c, u) {
+  const i = a.resolveComponent("NcDialogButton"), o = a.resolveComponent("NcModal");
+  return e.open ? (a.openBlock(), a.createBlock(o, a.mergeProps({
+    key: 0,
+    class: "dialog__modal",
+    "enable-slideshow": !1,
+    "enable-swipe": !1
+  }, e.modalProps, {
     onClose: e.handleClosed,
     "onUpdate:show": e.handleClosing
   }), {
@@ -221,9 +223,9 @@ function k(e, t, d, o, c, u) {
             ], !0)
           ], 2)
         ], 2),
-        a.createElementVNode("div", S, [
+        a.createElementVNode("div", k, [
           a.renderSlot(e.$slots, "actions", {}, () => [
-            (a.openBlock(!0), a.createElementBlock(a.Fragment, null, a.renderList(e.buttons, (i, s) => (a.openBlock(), a.createBlock(l, a.mergeProps({ key: s }, i, { onClick: e.handleButtonClose }), null, 16, ["onClick"]))), 128))
+            (a.openBlock(!0), a.createElementBlock(a.Fragment, null, a.renderList(e.buttons, (r, s) => (a.openBlock(), a.createBlock(i, a.mergeProps({ key: s }, r, { onClick: e.handleButtonClose }), null, 16, ["onClick"]))), 128))
           ], !0)
         ])
       ], 2)
@@ -231,5 +233,5 @@ function k(e, t, d, o, c, u) {
     _: 3
   }, 16, ["onClose", "onUpdate:show"])) : a.createCommentVNode("", !0);
 }
-const q = /* @__PURE__ */ N._export_sfc(h, [["render", k], ["__scopeId", "data-v-844e076c"]]);
-exports.NcDialog = q;
+const w = /* @__PURE__ */ N._export_sfc(h, [["render", q], ["__scopeId", "data-v-2b40bb95"]]);
+exports.NcDialog = w;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-BYXi2emF.cjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :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</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<div class=\"dialog\" :class=\"dialogClasses\">\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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\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 * Set to false to no show a close button on the dialog\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 * 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 additionaly 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 additionaly 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 additionaly 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'],\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 = ref(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.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying 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\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\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\tconst handleClosing = () => {\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\temit('closing')\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\tcanClose: 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\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\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\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-end: 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","vue","NcDialogButton","Components_NcModal","arr","value","element","wrapper","navigationId","GenRandomId","navigationAriaLabelAttr","props","handleClosing","handleClosed","showModal","emit","modalProps","handleButtonClose","isNavigationCollapsed","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_component_NcModal","_ctx","button","idx"],"mappings":"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"}

package/dist/chunks/{NcDialog-eZWcoYL9.mjs → NcDialog-rTTTdaH3.mjs}

@@ -1,8 +1,8 @@
-import "../assets/NcDialog-9-cx1V0y.css";
+import "../assets/NcDialog-IM0YIgKq.css";
 import { useElementSize as k } from "@vueuse/core";
-import { defineComponent as L, ref as g, computed as n, resolveComponent as b, openBlock as i, createBlock as h, mergeProps as A, withCtx as q, createElementVNode as t, toDisplayString as _, normalizeClass as l, createElementBlock as N, renderSlot as f, createCommentVNode as w, Fragment as O, renderList as T } from "vue";
+import { defineComponent as L, ref as f, computed as n, resolveComponent as b, openBlock as l, createBlock as h, mergeProps as A, withCtx as q, createElementVNode as t, toDisplayString as _, normalizeClass as s, createElementBlock as N, renderSlot as p, createCommentVNode as w, Fragment as O, renderList as T } from "vue";
 import E from "../Components/NcModal.mjs";
-import { N as $ } from "./NcDialogButton-R-zAILHz.mjs";
+import { N as $ } from "./NcDialogButton-ax4NTfDU.mjs";
 import { G as D } from "./GenRandomId-VodkdWbp.mjs";
 import { _ as z } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 const M = L({
@@ -154,47 +154,49 @@ const M = L({
     }
   },
   emits: ["closing", "update:open"],
-  setup(e, { emit: a, slots: p }) {
-    const s = g(), { width: m } = k(s, { width: 900 }), y = n(() => m.value < 876), r = n(() => p?.navigation !== void 0), o = g(D()), d = n(() => e.navigationAriaLabel || void 0), u = n(() => {
+  setup(e, { emit: a, slots: o }) {
+    const r = f(), { width: m } = k(r, { width: 900 }), y = n(() => m.value < 876), d = n(() => (o == null ? void 0 : o.navigation) !== void 0), i = f(D()), u = n(() => e.navigationAriaLabel || void 0), c = n(() => {
       if (!e.navigationAriaLabel)
-        return e.navigationAriaLabelledby || o.value;
-    }), c = g(!0), S = () => {
+        return e.navigationAriaLabelledby || i.value;
+    }), g = f(!0), B = () => {
       v(), window.setTimeout(() => C(), 300);
     }, v = () => {
-      c.value = !1, a("closing");
+      g.value = !1, a("closing");
     }, C = () => {
-      c.value = !0, a("update:open", !1);
-    }, B = n(() => ({
+      g.value = !0, a("update:open", !1);
+    }, S = n(() => ({
       canClose: e.canClose,
       container: e.container === void 0 ? "body" : e.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
       size: e.size,
-      show: e.open && c.value,
+      show: e.open && g.value,
       outTransition: e.outTransition,
-      class: "dialog__modal",
       closeOnClickOutside: e.closeOnClickOutside,
-      enableSlideshow: !1,
-      enableSwipe: !1,
       additionalTrapElements: e.additionalTrapElements
     }));
     return {
-      handleButtonClose: S,
+      handleButtonClose: B,
       handleClosing: v,
       handleClosed: C,
-      hasNavigation: r,
-      navigationId: o,
-      navigationAriaLabelAttr: d,
-      navigationAriaLabelledbyAttr: u,
+      hasNavigation: d,
+      navigationId: i,
+      navigationAriaLabelAttr: u,
+      navigationAriaLabelledbyAttr: c,
       isNavigationCollapsed: y,
-      modalProps: B,
-      wrapper: s
+      modalProps: S,
+      wrapper: r
     };
   }
 }), j = ["id", "textContent"], I = ["aria-label", "aria-labelledby"], P = { class: "dialog__text" }, G = { class: "dialog__actions" };
-function U(e, a, p, s, m, y) {
-  const r = b("NcDialogButton"), o = b("NcModal");
-  return e.open ? (i(), h(o, A({ key: 0 }, e.modalProps, {
+function U(e, a, o, r, m, y) {
+  const d = b("NcDialogButton"), i = b("NcModal");
+  return e.open ? (l(), h(i, A({
+    key: 0,
+    class: "dialog__modal",
+    "enable-slideshow": !1,
+    "enable-swipe": !1
+  }, e.modalProps, {
     onClose: e.handleClosed,
     "onUpdate:show": e.handleClosing
   }), {
@@ -205,31 +207,31 @@ function U(e, a, p, s, m, y) {
         textContent: _(e.name)
       }, null, 8, j),
       t("div", {
-        class: l(["dialog", e.dialogClasses])
+        class: s(["dialog", e.dialogClasses])
       }, [
         t("div", {
           ref: "wrapper",
-          class: l(["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }])
+          class: s(["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }])
         }, [
-          e.hasNavigation ? (i(), N("nav", {
+          e.hasNavigation ? (l(), N("nav", {
             key: 0,
-            class: l(["dialog__navigation", e.navigationClasses]),
+            class: s(["dialog__navigation", e.navigationClasses]),
             "aria-label": e.navigationAriaLabelAttr,
             "aria-labelledby": e.navigationAriaLabelledbyAttr
           }, [
-            f(e.$slots, "navigation", { isCollapsed: e.isNavigationCollapsed }, void 0, !0)
+            p(e.$slots, "navigation", { isCollapsed: e.isNavigationCollapsed }, void 0, !0)
           ], 10, I)) : w("", !0),
           t("div", {
-            class: l(["dialog__content", e.contentClasses])
+            class: s(["dialog__content", e.contentClasses])
           }, [
-            f(e.$slots, "default", {}, () => [
+            p(e.$slots, "default", {}, () => [
               t("p", P, _(e.message), 1)
             ], !0)
           ], 2)
         ], 2),
         t("div", G, [
-          f(e.$slots, "actions", {}, () => [
-            (i(!0), N(O, null, T(e.buttons, (d, u) => (i(), h(r, A({ key: u }, d, { onClick: e.handleButtonClose }), null, 16, ["onClick"]))), 128))
+          p(e.$slots, "actions", {}, () => [
+            (l(!0), N(O, null, T(e.buttons, (u, c) => (l(), h(d, A({ key: c }, u, { onClick: e.handleButtonClose }), null, 16, ["onClick"]))), 128))
           ], !0)
         ])
       ], 2)
@@ -237,7 +239,7 @@ function U(e, a, p, s, m, y) {
     _: 3
   }, 16, ["onClose", "onUpdate:show"])) : w("", !0);
 }
-const Q = /* @__PURE__ */ z(M, [["render", U], ["__scopeId", "data-v-844e076c"]]);
+const Q = /* @__PURE__ */ z(M, [["render", U], ["__scopeId", "data-v-2b40bb95"]]);
 export {
   Q as N
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-rTTTdaH3.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :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</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<div class=\"dialog\" :class=\"dialogClasses\">\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=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\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 * Set to false to no show a close button on the dialog\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 * 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 additionaly 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 additionaly 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 additionaly 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'],\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 = ref(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.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying 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\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\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\tconst handleClosing = () => {\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\temit('closing')\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\tcanClose: 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\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\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\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-end: 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\twidth: fit-content;\n\t\tmargin-inline: auto 12px; // 12px to align with the overall modal padding\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":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","value","element","wrapper","ref","navigationId","GenRandomId","navigationAriaLabelAttr","computed","props","handleClosing","handleClosed","showModal","emit","modalProps","handleButtonClose","isNavigationCollapsed","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","openBlock","createBlock","_component_NcModal","mergeProps","_ctx","withCtx","normalizeClass","createCommentVNode","renderSlot","createElementVNode","createElementBlock","Fragment","renderList","button","idx"],"mappings":"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"}

package/dist/chunks/NcDialogButton-37TPbyFs.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const n = require("vue"), a = require("./NcButton-7UKtzkX5.cjs"), u = require("./NcIconSvgWrapper-_hHu9P_M.cjs"), s = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), p = n.defineComponent({
+  name: "NcDialogButton",
+  components: {
+    NcButton: a.NcButton,
+    NcIconSvgWrapper: u.NcIconSvgWrapper
+  },
+  props: {
+    /**
+     * The function that will be called when the button is pressed
+     * @type {() => void}
+     */
+    callback: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+     */
+    type: {
+      type: String,
+      required: !1,
+      default: "secondary",
+      validator: (e) => typeof e == "string" && ["primary", "secondary", "error", "warning", "success"].includes(e)
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: o }) {
+    return { handleClick: (c) => {
+      var t;
+      (t = e.callback) == null || t.call(e), o("click", c);
+    } };
+  }
+});
+function d(e, o, r, c, t, N) {
+  const i = n.resolveComponent("NcIconSvgWrapper"), l = n.resolveComponent("NcButton");
+  return n.openBlock(), n.createBlock(l, {
+    "aria-label": e.label,
+    type: e.type,
+    onClick: e.handleClick
+  }, {
+    icon: n.withCtx(() => [
+      n.renderSlot(e.$slots, "icon", {}, () => [
+        e.icon !== void 0 ? (n.openBlock(), n.createBlock(i, {
+          key: 0,
+          svg: e.icon
+        }, null, 8, ["svg"])) : n.createCommentVNode("", !0)
+      ])
+    ]),
+    default: n.withCtx(() => [
+      n.createTextVNode(n.toDisplayString(e.label) + " ", 1)
+    ]),
+    _: 3
+  }, 8, ["aria-label", "type", "onClick"]);
+}
+const g = /* @__PURE__ */ s._export_sfc(p, [["render", d]]);
+exports.NcDialogButton = g;

package/dist/chunks/{NcDialogButton-Dou0EAc_.cjs.map → NcDialogButton-37TPbyFs.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton-Dou0EAc_.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_createBlock","_component_NcButton","_ctx","_renderSlot","_component_NcIconSvgWrapper","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";2KA2CKA,IAAaC,EAAAA,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX,UAAAC,EAAQ;AAAA,IACR,kBAAAC,EAAgB;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAACC,MAAS,OAAOA,KAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAASA,CAAI;AAAA,IACtH;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAUtB,WAAO,EAAE,aALW,CAACC,MAAM;AAC1B,MAAAF,EAAM,WAAW,GACjBC,EAAK,SAASC,CAAC;AAAA,IAChB,EAEqB;AAAA,EACrB;AACF,CAAC;;;wBA7EAC,EAQW,YAAAC,GAAA;AAAA,IARA,cAAYC,EAAK;AAAA,IAAG,MAAMA,EAAI;AAAA,IAAG,SAAOA,EAAW;AAAA;IAElD,gBAEV,MAEO;AAAA,MAFPC,EAAAA,WAEOD,sBAFP,MAEO;AAAA,QADkBA,EAAA,SAAS,yBAAjCF,EAA0D,YAAAI,GAAA;AAAA,UAhC9D,KAAA;AAAA,UAgCiD,KAAKF,EAAI;AAAA,gCAhC1DG,EAAA,mBAAA,IAAA,EAAA;AAAA;;IAAA,SAAAC,EAAA,QA4BE,MAAW;AAAA,MA5BbC,EA4BK,gBAAAC,EAAA,gBAAAN,EAAA,KAAK,IAAG,KACX,CAAA;AAAA;IA7BF,GAAA;AAAA;;;;"}
+{"version":3,"file":"NcDialogButton-37TPbyFs.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_a","_createBlock","_component_NcButton","_ctx","_renderSlot","_component_NcIconSvgWrapper","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";2KA2CKA,IAAaC,EAAAA,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX,UAAAC,EAAQ;AAAA,IACR,kBAAAC,EAAgB;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAACC,MAAS,OAAOA,KAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAASA,CAAI;AAAA,IACtH;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAUtB,WAAO,EAAE,aALW,CAACC,MAAM;;AAC1B,OAAAC,IAAAH,EAAM,aAAN,QAAAG,EAAA,KAAAH,IACAC,EAAK,SAASC,CAAC;AAAA,IAChB,EAEqB;AAAA,EACrB;AACF,CAAC;;;wBA7EAE,EAQW,YAAAC,GAAA;AAAA,IARA,cAAYC,EAAK;AAAA,IAAG,MAAMA,EAAI;AAAA,IAAG,SAAOA,EAAW;AAAA;IAElD,gBAEV,MAEO;AAAA,MAFPC,EAAAA,WAEOD,sBAFP,MAEO;AAAA,QADkBA,EAAA,SAAS,yBAAjCF,EAA0D,YAAAI,GAAA;AAAA,UAhC9D,KAAA;AAAA,UAgCiD,KAAKF,EAAI;AAAA,gCAhC1DG,EAAA,mBAAA,IAAA,EAAA;AAAA;;IAAA,SAAAC,EAAA,QA4BE,MAAW;AAAA,MA5BbC,EA4BK,gBAAAC,EAAA,gBAAAN,EAAA,KAAK,IAAG,KACX,CAAA;AAAA;IA7BF,GAAA;AAAA;;;;"}

package/dist/chunks/{NcDialogButton-R-zAILHz.mjs → NcDialogButton-ax4NTfDU.mjs}

@@ -1,12 +1,12 @@
-import { defineComponent as s, resolveComponent as r, openBlock as t, createBlock as c, withCtx as a, renderSlot as u, createCommentVNode as d, createTextVNode as m, toDisplayString as f } from "vue";
-import { N as g } from "./NcButton-nCkJxwsi.mjs";
-import { N as y } from "./NcIconSvgWrapper-gQnsseD2.mjs";
-import { _ as N } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-const k = s({
+import { defineComponent as u, resolveComponent as r, openBlock as c, createBlock as a, withCtx as i, renderSlot as d, createCommentVNode as m, createTextVNode as f, toDisplayString as g } from "vue";
+import { N as y } from "./NcButton-YOXv3gFY.mjs";
+import { N } from "./NcIconSvgWrapper-ACaaN_pS.mjs";
+import { _ as k } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const C = u({
   name: "NcDialogButton",
   components: {
-    NcButton: g,
-    NcIconSvgWrapper: y
+    NcButton: y,
+    NcIconSvgWrapper: N
   },
   props: {
     /**
@@ -44,34 +44,35 @@ const k = s({
     }
   },
   emits: ["click"],
-  setup(e, { emit: n }) {
-    return { handleClick: (o) => {
-      e.callback?.(), n("click", o);
+  setup(e, { emit: o }) {
+    return { handleClick: (t) => {
+      var n;
+      (n = e.callback) == null || n.call(e), o("click", t);
     } };
   }
 });
-function C(e, n, i, o, S, b) {
-  const l = r("NcIconSvgWrapper"), p = r("NcButton");
-  return t(), c(p, {
+function S(e, o, l, t, n, b) {
+  const s = r("NcIconSvgWrapper"), p = r("NcButton");
+  return c(), a(p, {
     "aria-label": e.label,
     type: e.type,
     onClick: e.handleClick
   }, {
-    icon: a(() => [
-      u(e.$slots, "icon", {}, () => [
-        e.icon !== void 0 ? (t(), c(l, {
+    icon: i(() => [
+      d(e.$slots, "icon", {}, () => [
+        e.icon !== void 0 ? (c(), a(s, {
           key: 0,
           svg: e.icon
-        }, null, 8, ["svg"])) : d("", !0)
+        }, null, 8, ["svg"])) : m("", !0)
       ])
     ]),
-    default: a(() => [
-      m(f(e.label) + " ", 1)
+    default: i(() => [
+      f(g(e.label) + " ", 1)
     ]),
     _: 3
   }, 8, ["aria-label", "type", "onClick"]);
 }
-const $ = /* @__PURE__ */ N(k, [["render", C]]);
+const $ = /* @__PURE__ */ k(C, [["render", S]]);
 export {
   $ as N
 };

package/dist/chunks/{NcDialogButton-R-zAILHz.mjs.map → NcDialogButton-ax4NTfDU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDialogButton-R-zAILHz.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_createBlock","_component_NcButton","_ctx","_renderSlot","_component_NcIconSvgWrapper","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";;;;AA2CA,MAAKA,IAAaC,EAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX,UAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAACC,MAAS,OAAOA,KAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAASA,CAAI;AAAA,IACtH;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAUtB,WAAO,EAAE,aALW,CAACC,MAAM;AAC1B,MAAAF,EAAM,WAAW,GACjBC,EAAK,SAASC,CAAC;AAAA,IAChB,EAEqB;AAAA,EACrB;AACF,CAAC;;;cA7EAC,EAQWC,GAAA;AAAA,IARA,cAAYC,EAAK;AAAA,IAAG,MAAMA,EAAI;AAAA,IAAG,SAAOA,EAAW;AAAA;IAElD,QAEV,MAEO;AAAA,MAFPC,EAEOD,sBAFP,MAEO;AAAA,QADkBA,EAAA,SAAS,eAAjCF,EAA0DI,GAAA;AAAA,UAhC9D,KAAA;AAAA,UAgCiD,KAAKF,EAAI;AAAA,gCAhC1DG,EAAA,IAAA,EAAA;AAAA;;IAAA,SAAAC,EA4BE,MAAW;AAAA,MA5BbC,EA4BKC,EAAAN,EAAA,KAAK,IAAG,KACX,CAAA;AAAA;IA7BF,GAAA;AAAA;;;"}
+{"version":3,"file":"NcDialogButton-ax4NTfDU.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","NcButton","NcIconSvgWrapper","type","props","emit","e","_a","_createBlock","_component_NcButton","_ctx","_renderSlot","_component_NcIconSvgWrapper","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";;;;AA2CA,MAAKA,IAAaC,EAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX,UAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAACC,MAAS,OAAOA,KAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAASA,CAAI;AAAA,IACtH;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AAUtB,WAAO,EAAE,aALW,CAACC,MAAM;;AAC1B,OAAAC,IAAAH,EAAM,aAAN,QAAAG,EAAA,KAAAH,IACAC,EAAK,SAASC,CAAC;AAAA,IAChB,EAEqB;AAAA,EACrB;AACF,CAAC;;;cA7EAE,EAQWC,GAAA;AAAA,IARA,cAAYC,EAAK;AAAA,IAAG,MAAMA,EAAI;AAAA,IAAG,SAAOA,EAAW;AAAA;IAElD,QAEV,MAEO;AAAA,MAFPC,EAEOD,sBAFP,MAEO;AAAA,QADkBA,EAAA,SAAS,eAAjCF,EAA0DI,GAAA;AAAA,UAhC9D,KAAA;AAAA,UAgCiD,KAAKF,EAAI;AAAA,gCAhC1DG,EAAA,IAAA,EAAA;AAAA;;IAAA,SAAAC,EA4BE,MAAW;AAAA,MA5BbC,EA4BKC,EAAAN,EAAA,KAAK,IAAG,KACX,CAAA;AAAA;IA7BF,GAAA;AAAA;;;"}