@nextcloud/vue 8.0.0-beta.8 → 8.0.0-beta.9

package/dist/Components/NcDashboardWidgetItem.mjs

@@ -1,9 +1,9 @@
-import "../assets/index-165fce0e.css";
-import { N as i } from "../chunks/index-6c221fa0.mjs";
+import "../assets/index-e7eadba7.css";
+import { N as i } from "../chunks/index-fb2ee22c.mjs";
 import o from "./NcActions.mjs";
 import l from "./NcActionButton.mjs";
-import { n as c } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const u = {
+import { n as u } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const c = {
   name: "NcDashboardWidgetItem",
   components: {
     NcAvatar: i,
@@ -118,7 +118,7 @@ var m = function() {
     t.hovered = !0;
   }, mouseleave: function(a) {
     t.hovered = !1;
-  } } }, [e(t.targetUrl ? "a" : "div", { tag: "component", class: { "item-list__entry": !0, "item-list__entry--has-actions-menu": t.gotMenu }, attrs: { href: t.targetUrl, target: t.targetUrl ? "_blank" : void 0 }, on: { click: t.onLinkClick } }, [t._t("avatar", function() {
+  } } }, [e(t.targetUrl ? "a" : "div", { tag: "component", class: { "item-list__entry": !0, "item-list__entry--has-actions-menu": t.gotMenu }, attrs: { href: t.targetUrl || void 0, target: t.targetUrl ? "_blank" : void 0 }, on: { click: t.onLinkClick } }, [t._t("avatar", function() {
     return [e("NcAvatar", { staticClass: "item-avatar", attrs: { size: 44, url: t.avatarUrl, user: t.avatarUsername, "is-no-user": t.avatarIsNoUser, "show-user-status": !t.gotOverlayIcon } })];
   }, { avatarUrl: t.avatarUrl, avatarUsername: t.avatarUsername }), t.overlayIconUrl ? e("img", { staticClass: "item-icon", attrs: { alt: "", src: t.overlayIconUrl } }) : t._e(), e("div", { staticClass: "item__details" }, [e("h3", { attrs: { title: t.mainText } }, [t._v(" " + t._s(t.mainText) + " ")]), e("span", { staticClass: "message", attrs: { title: t.subText } }, [t._v(" " + t._s(t.subText) + " ")])]), t.gotMenu ? e("NcActions", { attrs: { "force-menu": t.forceMenu } }, [t._t("actions", function() {
     return t._l(t.itemMenu, function(a, n) {
@@ -127,17 +127,17 @@ var m = function() {
       } } }, [t._v(" " + t._s(a.text) + " ")]);
     });
   })], 2) : t._e()], 2)], 1);
-}, d = [], f = /* @__PURE__ */ c(
-  u,
+}, d = [], v = /* @__PURE__ */ u(
+  c,
   m,
   d,
   !1,
   null,
-  "2ff3cd9a",
+  "00e861ef",
   null,
   null
 );
-const y = f.exports;
+const y = v.exports;
 export {
   y as default
 };

package/dist/Components/NcDashboardWidgetItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","event"],"mappings":";;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAAC,GAAA;AACA,MAAAA,EAAA,OAAA,QAAA,cAAA,KACAA,EAAA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcDashboardWidgetItem.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>\n -\n - @author Julien Veyssier <eneiluj@posteo.net>\n -\n - @license GNU AGPL version 3 or any later version\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\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-left: 8px;\n\t\tmax-height: 44px;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin: 27px -3px 0px -7px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_sfc_main","NcAvatar","NcActions","NcActionButton","event"],"mappings":";;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA;AAAA,QACA,IAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,UAAA;AACA,aAAA,OAAA,KAAA,KAAA,QAAA,EAAA,WAAA,KAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,kBAAA,KAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAAC,GAAA;AACA,MAAAA,EAAA,OAAA,QAAA,cAAA,KACAA,EAAA,eAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDateTime.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-903083c4.cjs"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), d = {
+const l = require("@nextcloud/l10n"), s = require("../chunks/l10n-b1d264c7.cjs"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), d = {
   long: s.t("a few seconds ago"),
   short: s.t("seconds ago"),
   // FOR TRANSLATORS: Shorter version of 'a few seconds ago'

package/dist/Components/NcDateTime.mjs

@@ -1,5 +1,5 @@
 import { getCanonicalLocale as m } from "@nextcloud/l10n";
-import { t as o } from "../chunks/l10n-27a75c40.mjs";
+import { t as o } from "../chunks/l10n-05a09c66.mjs";
 import { n as l } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const d = {
   long: o("a few seconds ago"),

package/dist/Components/NcDateTimePicker.cjs

@@ -1,5 +1,5 @@
-var T = require("../assets/index-294382c8.css");
-const o = require("../chunks/l10n-903083c4.cjs"), p = require("./NcTimezonePicker.cjs"), d = require("./NcPopover.cjs"), m = require("../chunks/l10n-4326316a.cjs"), f = require("vue-material-design-icons/CalendarBlank.vue"), h = require("vue-material-design-icons/Web.vue"), r = require("@nextcloud/l10n"), _ = require("vue2-datepicker"), y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), k = require("../chunks/ScopeComponent-1c75ec38.cjs"), l = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ l(f), g = /* @__PURE__ */ l(h), w = /* @__PURE__ */ l(_);
+var T = require("../assets/index-574438d6.css");
+const o = require("../chunks/l10n-b1d264c7.cjs"), p = require("./NcTimezonePicker.cjs"), d = require("./NcPopover.cjs"), m = require("../chunks/l10n-c7bd0ea6.cjs"), f = require("vue-material-design-icons/CalendarBlank.vue"), h = require("vue-material-design-icons/Web.vue"), r = require("@nextcloud/l10n"), _ = require("vue2-datepicker"), y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), k = require("../chunks/ScopeComponent-e060526a.cjs"), l = (t) => t && t.__esModule ? t : { default: t }, v = /* @__PURE__ */ l(f), g = /* @__PURE__ */ l(h), w = /* @__PURE__ */ l(_);
 const s = {
   date: "YYYY-MM-DD",
   datetime: "YYYY-MM-DD H:mm:ss",

package/dist/Components/NcDateTimePicker.mjs

@@ -1,14 +1,14 @@
-import "../assets/index-294382c8.css";
-import { t as r } from "../chunks/l10n-27a75c40.mjs";
+import "../assets/index-574438d6.css";
+import { t as r } from "../chunks/l10n-05a09c66.mjs";
 import s from "./NcTimezonePicker.mjs";
 import p from "./NcPopover.mjs";
-import { l as c } from "../chunks/l10n-c5f5f001.mjs";
+import { l as c } from "../chunks/l10n-9aa6482d.mjs";
 import m from "vue-material-design-icons/CalendarBlank.vue";
 import u from "vue-material-design-icons/Web.vue";
 import { getMonthNames as d, getMonthNamesShort as f, getDayNames as h, getDayNamesShort as y, getDayNamesMin as _, getFirstDay as k } from "@nextcloud/l10n";
 import v from "vue2-datepicker";
 import { n as g } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { S as w } from "../chunks/ScopeComponent-97a014a1.mjs";
+import { S as w } from "../chunks/ScopeComponent-9519afcc.mjs";
 const l = {
   date: "YYYY-MM-DD",
   datetime: "YYYY-MM-DD H:mm:ss",

package/dist/Components/NcDateTimePickerNative.cjs

@@ -1,5 +1,5 @@
 var D = require("../assets/index-2d4de2fc.css");
-const p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = require("../chunks/ScopeComponent-1c75ec38.cjs");
+const p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), h = require("../chunks/ScopeComponent-e060526a.cjs");
 const f = ["date", "datetime-local", "month", "time", "week"], y = {
   name: "NcDateTimePickerNative",
   inheritAttrs: !1,

package/dist/Components/NcDateTimePickerNative.mjs

@@ -1,6 +1,6 @@
 import "../assets/index-2d4de2fc.css";
 import { n as p } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { S as c } from "../chunks/ScopeComponent-97a014a1.mjs";
+import { S as c } from "../chunks/ScopeComponent-9519afcc.mjs";
 const f = ["date", "datetime-local", "month", "time", "week"], h = {
   name: "NcDateTimePickerNative",
   inheritAttrs: !1,

package/dist/Components/NcDialog.cjs

@@ -0,0 +1,171 @@
+var b = require("../assets/index-dc612aa3.css");
+const p = require("@vueuse/core"), n = require("vue"), f = require("./NcModal.cjs"), g = require("./NcDialogButton.cjs"), y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const v = n.defineComponent({
+  name: "NcDialog",
+  components: {
+    NcDialogButton: g,
+    NcModal: f
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: !0
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "string"),
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: !1,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the underlying NcModal
+     * @default 'small'
+     * @values 'small', 'normal', 'large', 'full'
+     */
+    size: {
+      type: String,
+      required: !1,
+      default: "small",
+      validator: (a) => typeof a == "string" && ["small", "normal", "large", "full"].includes(a)
+    },
+    /**
+     * Buttons to display
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: !1,
+      default: () => [],
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "object")
+    },
+    /**
+     * Set to false to no show a close button on the dialog
+     * @default true
+     */
+    canClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open"],
+  setup(a, { emit: e, slots: t }) {
+    const o = n.ref(), { width: s } = p.useElementSize(o), c = n.computed(() => s.value < 876), d = n.computed(() => (t == null ? void 0 : t.navigation) !== void 0), l = n.ref(!0), u = () => {
+      i(), window.setTimeout(() => r(), 300);
+    }, i = () => {
+      l.value = !1, e("closing");
+    }, r = () => {
+      l.value = !0, e("update:open", !1);
+    }, _ = n.computed(() => ({
+      canClose: a.canClose,
+      container: a.container === void 0 ? "body" : a.container,
+      // we do not pass the name as we already have the name as the headline
+      // name: props.name,
+      size: a.size,
+      show: a.open && l.value,
+      outTransition: a.outTransition,
+      class: "dialog__modal",
+      closeOnClickOutside: !1,
+      enableSlideshow: !1,
+      enableSwipe: !1
+    }));
+    return {
+      handleButtonClose: u,
+      handleClosing: i,
+      handleClosed: r,
+      hasNavigation: d,
+      isNavigationCollapsed: c,
+      modalProps: _,
+      wrapper: o
+    };
+  }
+});
+var m = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, e.open ? t("NcModal", e._b({ on: { close: e.handleClosed, "update:show": e.handleClosing } }, "NcModal", e.modalProps, !1), [t("h2", { staticClass: "dialog__name", domProps: { textContent: e._s(e.name) } }), t("div", { staticClass: "dialog", class: e.dialogClasses }, [t("div", { ref: "wrapper", class: ["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }] }, [e.hasNavigation ? t("nav", { staticClass: "dialog__navigation", class: e.navigationClasses }, [e._t("navigation", null, { isCollapsed: e.isNavigationCollapsed })], 2) : e._e(), t("div", { staticClass: "dialog__content", class: e.contentClasses }, [e._t("default", function() {
+    return [t("p", [e._v(e._s(e.message))])];
+  })], 2)]), t("div", { staticClass: "dialog__actions" }, [e._t("actions", function() {
+    return e._l(e.buttons, function(o, s) {
+      return t("NcDialogButton", e._b({ key: s, on: { click: e.handleButtonClose } }, "NcDialogButton", o, !1));
+    });
+  })], 2)])]) : e._e();
+}, C = [], N = /* @__PURE__ */ y.normalizeComponent(
+  v,
+  m,
+  C,
+  !1,
+  null,
+  "cf1c45bf",
+  null,
+  null
+);
+const h = N.exports;
+module.exports = h;

package/dist/Components/NcDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog.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 :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: '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\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]\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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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 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\" class=\"dialog__navigation\" :class=\"navigationClasses\">\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>{{ message }}</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\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * @values '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 * 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 * 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)\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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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: math.div($breakpoint-mobile, 2)) {\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-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\n\t}\n}\n</style>\n"],"names":["_sfc_main","Vue","Components_NcDialogButton","Components_NcModal","arr","element","value","props","emit","slots","wrapper","dialogWidth","core","isNavigationCollapsed","hasNavigation","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":";;AAoIA,MAAAA,IAAAC,EAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA,IAGA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA,IAGA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,CAAAC,MAAA,MAAA,QAAAA,CAAA,KAAAA,EAAA,MAAA,CAAAC,MAAA,OAAAA,KAAA,QAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,SAAA,UAAA,SAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAA,MAAA,MAAA,QAAAA,CAAA,KAAAA,EAAA,MAAA,CAAAD,MAAA,OAAAA,KAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBA,mBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,WAAA,aAAA;AAAA,EAEA,MAAAE,GAAA,EAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAKA,UAAAC,IAAAT,EAAA,IAAA,GAKA,EAAA,OAAAU,EAAA,IAAAC,EAAA,eAAAF,CAAA,GAMAG,IAAAZ,EAAA,SAAA,MAAAU,EAAA,QAAA,GAAA,GAKAG,IAAAb,EAAA,SAAA,OAAAQ,KAAA,gBAAAA,EAAA,gBAAA,MAAA,GAKAM,IAAAd,EAAA,IAAA,EAAA,GAMAe,IAAA,MAAA;AACA,MAAAC,EAAA,GACA,OAAA,WAAA,MAAAC,EAAA,GAAA,GAAA;AAAA,IACA,GAKAD,IAAA,MAAA;AACA,MAAAF,EAAA,QAAA,IAIAP,EAAA,SAAA;AAAA,IACA,GAKAU,IAAA,MAAA;AACA,MAAAH,EAAA,QAAA,IAIAP,EAAA,eAAA,EAAA;AAAA,IACA,GAKAW,IAAAlB,EAAA,SAAA,OAAA;AAAA,MACA,UAAAM,EAAA;AAAA,MACA,WAAAA,EAAA,cAAA,SAAA,SAAAA,EAAA;AAAA;AAAA;AAAA,MAGA,MAAAA,EAAA;AAAA,MACA,MAAAA,EAAA,QAAAQ,EAAA;AAAA,MACA,eAAAR,EAAA;AAAA,MACA,OAAA;AAAA,MACA,qBAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,IACA,EAAA;AAEA,WAAA;AAAA,MACA,mBAAAS;AAAA,MACA,eAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAJ;AAAA,MACA,uBAAAD;AAAA,MACA,YAAAM;AAAA,MACA,SAAAT;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDialog.mjs

@@ -0,0 +1,177 @@
+import "../assets/index-dc612aa3.css";
+import { useElementSize as p } from "@vueuse/core";
+import { defineComponent as g, ref as d, computed as s } from "vue";
+import m from "./NcModal.mjs";
+import y from "./NcDialogButton.mjs";
+import { n as v } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const C = g({
+  name: "NcDialog",
+  components: {
+    NcDialogButton: y,
+    NcModal: m
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: !0
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "string"),
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: !1,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the underlying NcModal
+     * @default 'small'
+     * @values 'small', 'normal', 'large', 'full'
+     */
+    size: {
+      type: String,
+      required: !1,
+      default: "small",
+      validator: (a) => typeof a == "string" && ["small", "normal", "large", "full"].includes(a)
+    },
+    /**
+     * Buttons to display
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: !1,
+      default: () => [],
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "object")
+    },
+    /**
+     * Set to false to no show a close button on the dialog
+     * @default true
+     */
+    canClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open"],
+  setup(a, { emit: e, slots: t }) {
+    const n = d(), { width: o } = p(n), c = s(() => o.value < 876), u = s(() => (t == null ? void 0 : t.navigation) !== void 0), l = d(!0), _ = () => {
+      i(), window.setTimeout(() => r(), 300);
+    }, i = () => {
+      l.value = !1, e("closing");
+    }, r = () => {
+      l.value = !0, e("update:open", !1);
+    }, f = s(() => ({
+      canClose: a.canClose,
+      container: a.container === void 0 ? "body" : a.container,
+      // we do not pass the name as we already have the name as the headline
+      // name: props.name,
+      size: a.size,
+      show: a.open && l.value,
+      outTransition: a.outTransition,
+      class: "dialog__modal",
+      closeOnClickOutside: !1,
+      enableSlideshow: !1,
+      enableSwipe: !1
+    }));
+    return {
+      handleButtonClose: _,
+      handleClosing: i,
+      handleClosed: r,
+      hasNavigation: u,
+      isNavigationCollapsed: c,
+      modalProps: f,
+      wrapper: n
+    };
+  }
+});
+var h = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, e.open ? t("NcModal", e._b({ on: { close: e.handleClosed, "update:show": e.handleClosing } }, "NcModal", e.modalProps, !1), [t("h2", { staticClass: "dialog__name", domProps: { textContent: e._s(e.name) } }), t("div", { staticClass: "dialog", class: e.dialogClasses }, [t("div", { ref: "wrapper", class: ["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }] }, [e.hasNavigation ? t("nav", { staticClass: "dialog__navigation", class: e.navigationClasses }, [e._t("navigation", null, { isCollapsed: e.isNavigationCollapsed })], 2) : e._e(), t("div", { staticClass: "dialog__content", class: e.contentClasses }, [e._t("default", function() {
+    return [t("p", [e._v(e._s(e.message))])];
+  })], 2)]), t("div", { staticClass: "dialog__actions" }, [e._t("actions", function() {
+    return e._l(e.buttons, function(n, o) {
+      return t("NcDialogButton", e._b({ key: o, on: { click: e.handleButtonClose } }, "NcDialogButton", n, !1));
+    });
+  })], 2)])]) : e._e();
+}, N = [], b = /* @__PURE__ */ v(
+  C,
+  h,
+  N,
+  !1,
+  null,
+  "cf1c45bf",
+  null,
+  null
+);
+const x = b.exports;
+export {
+  x as default
+};

package/dist/Components/NcDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog.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 :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: '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\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]\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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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 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\" class=\"dialog__navigation\" :class=\"navigationClasses\">\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>{{ message }}</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\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * @values '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 * 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 * 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)\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 * 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\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\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\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: math.div($breakpoint-mobile, 2)) {\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-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\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}\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 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/Components/NcDialogButton.cjs

@@ -0,0 +1,69 @@
+"use strict";
+const o = require("vue"), l = require("./NcButton.cjs"), i = require("./NcIconSvgWrapper.cjs"), u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = o.defineComponent({
+  name: "NcDialogButton",
+  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
+     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     */
+    type: {
+      type: String,
+      required: !1,
+      default: "secondary",
+      validator: (n) => typeof n == "string" && ["primary", "secondary", "error", "warning", "success"].includes(n)
+    }
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    return {
+      NcButton: l,
+      NcIconSvgWrapper: i,
+      handleClick: (c) => {
+        var t;
+        (t = n.callback) == null || t.call(n), e("click", c);
+      }
+    };
+  }
+});
+var s = function() {
+  var e = this, r = e._self._c;
+  return e._self._setupProxy, r("NcButton", { attrs: { "aria-label": e.label, type: e.type }, on: { click: e.handleClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("icon", function() {
+      return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
+    })];
+  }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, _ = [], d = /* @__PURE__ */ u.normalizeComponent(
+  a,
+  s,
+  _,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = d.exports;
+module.exports = p;