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

package/dist/chunks/NcDateTimePickerNative-CyCL5Ovh.mjs

@@ -0,0 +1,200 @@
+import '../assets/NcDateTimePickerNative-DHZcOvOf.css';
+import { S as ScopeComponent } from "./ScopeComponent-B2OE7k3z.mjs";
+import { openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, mergeProps } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
+const _sfc_main = ScopeComponent({
+  name: "NcDateTimePickerNative",
+  inheritAttrs: false,
+  props: {
+    /**
+     * The date is – like the `Date` object in JavaScript – tied to UTC.
+     * The selected time zone does not have an influence of the selected time and date value.
+     * You have to translate the time yourself when you want to factor in time zones.
+     * Pass null to clear the input field.
+     */
+    modelValue: {
+      type: Date,
+      default: null
+    },
+    /**
+     * id attribute of the input field
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * type attribute of the input field
+     * default type: String
+     * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`
+     */
+    type: {
+      type: String,
+      default: "date",
+      validate: (name) => inputDateTypes.includes(name)
+    },
+    /**
+     * text inside the label element
+     * default type: String
+     */
+    label: {
+      type: String,
+      default: "Please choose a date"
+    },
+    /**
+     * min attribute of the input field
+     * default type: null
+     */
+    min: {
+      type: [Date, Boolean],
+      default: null
+    },
+    /**
+     * max attribute of the input field
+     * default type: null
+     */
+    max: {
+      type: [Date, Boolean],
+      default: null
+    },
+    /**
+     * Flag to hide the label
+     * default type: String
+     * The hidden input label for accessibility purposes.
+     */
+    hideLabel: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcDateTimePickerNative in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    formattedValue() {
+      return this.formatValue(this.modelValue);
+    },
+    formattedMin() {
+      if (this.min) {
+        return this.formatValue(this.min);
+      }
+      return false;
+    },
+    formattedMax() {
+      if (this.max) {
+        return this.formatValue(this.max);
+      }
+      return false;
+    }
+  },
+  methods: {
+    /**
+     * Handle the input event
+     *
+     * @param {InputEvent} $event input event payload
+     * @return {Date|null} new chosen Date() or null
+     */
+    onInput($event) {
+      if (isNaN($event.target.valueAsNumber)) {
+        return this.$emit("update:modelValue", null);
+      }
+      if (this.type === "time") {
+        const time = $event.target.value;
+        if (this.modelValue === "") {
+          const { yyyy: yyyy2, MM: MM2, dd: dd2 } = this.getReadableDate(/* @__PURE__ */ new Date());
+          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy2}-${MM2}-${dd2}T${time}`));
+        }
+        const { yyyy, MM, dd } = this.getReadableDate(this.modelValue);
+        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`));
+      } else if (this.type === "month") {
+        const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, "0");
+        if (this.modelValue === "") {
+          const { yyyy: yyyy2, dd: dd2, hh: hh2, mm: mm2 } = this.getReadableDate(/* @__PURE__ */ new Date());
+          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy2}-${MM}-${dd2}T${hh2}:${mm2}`));
+        }
+        const { yyyy, dd, hh, mm } = this.getReadableDate(this.value);
+        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`));
+      }
+      const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
+      const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds;
+      return this.$emit("update:modelValue", new Date(inputDateWithTimezone));
+    },
+    /**
+     * Returns Object with string values of a Date
+     *
+     * @param {Date} value The selected value
+     * @return {object|undefined}
+     */
+    getReadableDate(value) {
+      if (value instanceof Date) {
+        const yyyy = value.getFullYear().toString().padStart(4, "0");
+        const MM = (value.getMonth() + 1).toString().padStart(2, "0");
+        const dd = value.getDate().toString().padStart(2, "0");
+        const hh = value.getHours().toString().padStart(2, "0");
+        const mm = value.getMinutes().toString().padStart(2, "0");
+        return { yyyy, MM, dd, hh, mm };
+      }
+    },
+    /**
+     * Returns preformatted value for the input field
+     *
+     * @param {Date} value The selected value
+     * @return {string|undefined}
+     */
+    formatValue(value) {
+      if (value instanceof Date) {
+        const { yyyy, MM, dd, hh, mm } = this.getReadableDate(value);
+        if (this.type === "datetime-local") {
+          return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
+        } else if (this.type === "date") {
+          return `${yyyy}-${MM}-${dd}`;
+        } else if (this.type === "month") {
+          return `${yyyy}-${MM}`;
+        } else if (this.type === "time") {
+          return `${hh}:${mm}`;
+        } else if (this.type === "week") {
+          const startDate = new Date(yyyy, 0, 1);
+          const daysSinceBeginningOfYear = Math.floor((value - startDate) / (24 * 60 * 60 * 1e3));
+          const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
+          return `${yyyy}-W${weekNumber}`;
+        }
+      } else {
+        return "";
+      }
+    }
+  }
+});
+const _hoisted_1 = { class: "native-datetime-picker" };
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["id", "type", "value", "min", "max"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("label", {
+      class: normalizeClass({ "hidden-visually": _ctx.hideLabel }),
+      for: _ctx.id
+    }, toDisplayString(_ctx.label), 11, _hoisted_2),
+    createElementVNode("input", mergeProps({
+      id: _ctx.id,
+      class: ["native-datetime-picker--input", _ctx.inputClass],
+      type: _ctx.type,
+      value: _ctx.formattedValue,
+      min: _ctx.formattedMin,
+      max: _ctx.formattedMax
+    }, _ctx.$attrs, {
+      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args))
+    }), null, 16, _hoisted_3)
+  ]);
+}
+const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c51c751c"]]);
+export {
+  NcDateTimePickerNative as N
+};

package/dist/chunks/NcDateTimePickerNative-CyCL5Ovh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePickerNative-CyCL5Ovh.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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 components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["yyyy","MM","dd","hh","mm","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/chunks/NcDialog-Dq3Qnbke.mjs

@@ -0,0 +1,273 @@
+import '../assets/NcDialog-CvmjNcgn.css';
+import { useElementSize } from "@vueuse/core";
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, toDisplayString, normalizeClass, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList } from "vue";
+import NcModal from "../Components/NcModal.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-C6SudZTq.mjs";
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = defineComponent({
+  name: "NcDialog",
+  components: {
+    NcDialogButton,
+    NcModal
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: true
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (arr) => {
+        return Array.isArray(arr) && arr.every(
+          (element) => typeof element === "string" || element instanceof HTMLElement
+        );
+      },
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: false,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Size of the underlying NcModal
+     * @default 'small'
+     * @type {'small'|'normal'|'large'|'full'}
+     */
+    size: {
+      type: String,
+      required: false,
+      default: "small",
+      validator: (value) => typeof value === "string" && ["small", "normal", "large", "full"].includes(value)
+    },
+    /**
+     * Buttons to display
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: (value) => Array.isArray(value) && value.every((element) => typeof element === "object")
+    },
+    /**
+     * Set to false to no show a close button on the dialog
+     * @default true
+     */
+    canClose: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Close the dialog if the user clicked outside of the dialog
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: false,
+      default: ""
+    },
+    /**
+     * aria-label for the dialog navigation.
+     * Use it when you want to provide a more meaningful label than the dialog name.
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabel: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-labelledby for the dialog navigation.
+     * Use it when you have an implicit navigation label (e.g. a heading).
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabelledby: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: false,
+      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: false,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open"],
+  setup(props, { emit, slots }) {
+    const wrapper = ref();
+    const { width: dialogWidth } = useElementSize(wrapper, { width: 900 });
+    const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
+    const hasNavigation = computed(() => slots?.navigation !== void 0);
+    const navigationId = ref(GenRandomId());
+    const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
+    const navigationAriaLabelledbyAttr = computed(() => {
+      if (props.navigationAriaLabel) {
+        return void 0;
+      }
+      return props.navigationAriaLabelledby || navigationId.value;
+    });
+    const showModal = ref(true);
+    const handleButtonClose = () => {
+      handleClosing();
+      window.setTimeout(() => handleClosed(), 300);
+    };
+    const handleClosing = () => {
+      showModal.value = false;
+      emit("closing");
+    };
+    const handleClosed = () => {
+      showModal.value = true;
+      emit("update:open", false);
+    };
+    const modalProps = computed(() => ({
+      canClose: props.canClose,
+      container: props.container === void 0 ? "body" : props.container,
+      // we do not pass the name as we already have the name as the headline
+      // name: props.name,
+      size: props.size,
+      show: props.open && showModal.value,
+      outTransition: props.outTransition,
+      closeOnClickOutside: props.closeOnClickOutside,
+      additionalTrapElements: props.additionalTrapElements
+    }));
+    return {
+      handleButtonClose,
+      handleClosing,
+      handleClosed,
+      hasNavigation,
+      navigationId,
+      navigationAriaLabelAttr,
+      navigationAriaLabelledbyAttr,
+      isNavigationCollapsed,
+      modalProps,
+      wrapper
+    };
+  }
+});
+const _hoisted_1 = ["id", "textContent"];
+const _hoisted_2 = ["aria-label", "aria-labelledby"];
+const _hoisted_3 = { class: "dialog__text" };
+const _hoisted_4 = { class: "dialog__actions" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcDialogButton = resolveComponent("NcDialogButton");
+  const _component_NcModal = resolveComponent("NcModal");
+  return _ctx.open ? (openBlock(), createBlock(_component_NcModal, mergeProps({
+    key: 0,
+    class: "dialog__modal",
+    "enable-slideshow": false,
+    "enable-swipe": false
+  }, _ctx.modalProps, {
+    onClose: _ctx.handleClosed,
+    "onUpdate:show": _ctx.handleClosing
+  }), {
+    default: withCtx(() => [
+      createElementVNode("h2", {
+        id: _ctx.navigationId,
+        class: "dialog__name",
+        textContent: toDisplayString(_ctx.name)
+      }, null, 8, _hoisted_1),
+      createElementVNode("div", {
+        class: normalizeClass(["dialog", _ctx.dialogClasses])
+      }, [
+        createElementVNode("div", {
+          ref: "wrapper",
+          class: normalizeClass(["dialog__wrapper", { "dialog__wrapper--collapsed": _ctx.isNavigationCollapsed }])
+        }, [
+          _ctx.hasNavigation ? (openBlock(), createElementBlock("nav", {
+            key: 0,
+            class: normalizeClass(["dialog__navigation", _ctx.navigationClasses]),
+            "aria-label": _ctx.navigationAriaLabelAttr,
+            "aria-labelledby": _ctx.navigationAriaLabelledbyAttr
+          }, [
+            renderSlot(_ctx.$slots, "navigation", { isCollapsed: _ctx.isNavigationCollapsed }, void 0, true)
+          ], 10, _hoisted_2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["dialog__content", _ctx.contentClasses])
+          }, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createElementVNode("p", _hoisted_3, toDisplayString(_ctx.message), 1)
+            ], true)
+          ], 2)
+        ], 2),
+        createElementVNode("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "actions", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttons, (button, idx) => {
+              return openBlock(), createBlock(_component_NcDialogButton, mergeProps({
+                key: idx,
+                ref_for: true
+              }, button, { onClick: _ctx.handleButtonClose }), null, 16, ["onClick"]);
+            }), 128))
+          ], true)
+        ])
+      ], 2)
+    ]),
+    _: 3
+  }, 16, ["onClose", "onUpdate:show"])) : createCommentVNode("", true);
+}
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-96e99cbf"]]);
+export {
+  NcDialog as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-Dq3Qnbke.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\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_withCtx","_createElementVNode","_toDisplayString","_normalizeClass","_createElementBlock","_renderSlot","_createCommentVNode","_Fragment","_renderList"],"mappings":";;;;;;AAoJA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA,IAEN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA,IAGD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA,IAGD,wBAAwB;AAAA,MACvB,MAAM;AAAA,MACN,WAAW,CAAC,QAAQ;AACnB,eACC,MAAM,QAAQ,GAAG,KAAK,IAAI;AAAA,UACzB,CAAC,YACA,OAAO,YAAY,YAAY,mBAAmB;AAAA,QACpD;AAAA,MAED;AAAA,MACD,SAAS,MAAO,CAAA;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAAC,UAAU,OAAO,UAAU,YAAY,CAAC,SAAS,UAAU,SAAS,MAAM,EAAE,SAAS,KAAK;AAAA,IACtG;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,MAAO,CAAA;AAAA,MAChB,WAAW,CAAC,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,MAAM,CAAC,YAAY,OAAO,YAAY,QAAQ;AAAA,IAClG;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBD,mBAAmB;AAAA,MAClB,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,0BAA0B;AAAA,MACzB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACf,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACd,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO,CAAC,WAAW,aAAa;AAAA,EAEhC,MAAM,OAAO,EAAE,MAAM,MAAM,GAAG;AAK7B,UAAM,UAAU,IAAI;AAKpB,UAAM,EAAE,OAAO,gBAAgB,eAAe,SAAS,EAAE,OAAO,KAAK;AAMrE,UAAM,wBAAwB,SAAS,MAAM,YAAY,QAAQ,GAAG;AAKpE,UAAM,gBAAgB,SAAS,MAAM,OAAO,eAAe,MAAS;AAKpE,UAAM,eAAe,IAAI,aAAa;AAKtC,UAAM,0BAA0B,SAAS,MAAM,MAAM,uBAAuB,MAAS;AAKrF,UAAM,+BAA+B,SAAS,MAAM;AACnD,UAAI,MAAM,qBAAqB;AAE9B,eAAO;AAAA,MACR;AAEA,aAAO,MAAM,4BAA4B,aAAa;AAAA,KACtD;AAKD,UAAM,YAAY,IAAI,IAAI;AAM1B,UAAM,oBAAoB,MAAM;AAC/B,oBAAc;AACd,aAAO,WAAW,MAAM,aAAY,GAAI,GAAG;AAAA,IAC5C;AAKA,UAAM,gBAAgB,MAAM;AAC3B,gBAAU,QAAQ;AAIlB,WAAK,SAAS;AAAA,IACf;AAKA,UAAM,eAAe,MAAM;AAC1B,gBAAU,QAAQ;AAIlB,WAAK,eAAe,KAAK;AAAA,IAC1B;AAKA,UAAM,aAAa,SAAS,OAAO;AAAA,MAClC,UAAU,MAAM;AAAA,MAChB,WAAW,MAAM,cAAc,SAAY,SAAS,MAAM;AAAA;AAAA;AAAA,MAG1D,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM,QAAQ,UAAU;AAAA,MAC9B,eAAe,MAAM;AAAA,MACrB,qBAAqB,MAAM;AAAA,MAC3B,wBAAwB,MAAM;AAAA,IAC/B,EAAE;AAEF,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACA;AACF,CAAC;AA7aD,MAAA,aAAA,CAAA,MAAA,aAAA;AAAA,MAAA,aAAA,CAAA,cAAA,iBAAA;AAwHS,MAAA,aAAA,EAAA,OAAM,eAAc;AAOrB,MAAA,aAAA,EAAA,OAAM,kBAAiB;;;;SA7Bf,KAAI,QAAnBA,aAAAC,YAsCU,oBAtCVC,WAsCU;AAAA,IAxIX,KAAA;AAAA,IAmGE,OAAM;AAAA,IACL,oBAAkB;AAAA,IAClB,gBAAc;AAAA,KACP,KAAU,YAAA;AAAA,IACjB,SAAO,KAAY;AAAA,IACnB,iBAAa,KAAa;AAAA;IAxG7B,SAAAC,QA0GE,MAA4D;AAAA,MAA5DC,mBAA4D,MAAA;AAAA,QAAvD,IAAI,KAAY;AAAA,QAAE,OAAM;AAAA,QA1G/B,aA0G8CC,gBAAa,KAAD,IAAA;AAAA,MA1G1D,GAAA,MAAA,GAAA,UAAA;AAAA,MA2GED,mBA4BM,OAAA;AAAA,QA5BD,OA3GPE,eAAA,CA2Ga,UAAiB,KAAa,aAAA,CAAA;AAAA;QACxCF,mBAiBM,OAAA;AAAA,UAjBD,KAAI;AAAA,UAAW,OA5GvBE,mEA4GkF,KAAqB,sBAAA,CAAA,CAAA;AAAA;UAExF,KAAa,8BAAxBC,mBAMM,OAAA;AAAA,YApHV,KAAA;AAAA,YA+GK,OA/GLD,eAAA,CA+GW,sBACE,KAAiB,iBAAA,CAAA;AAAA,YACxB,cAAY,KAAuB;AAAA,YACnC,mBAAiB,KAA4B;AAAA;YAC9CE,WAAgE,KAAA,QAAA,cAAA,EAAvC,aAAc,KAAqB,sBAAA,GAAA,QAAA,IAAA;AAAA,UAnHjE,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,UAsHIL,mBAMM,OAAA;AAAA,YAND,OAtHTE,eAAA,CAsHe,mBAA0B,KAAc,cAAA,CAAA;AAAA;YAClDE,WAIO,4BAJP,MAIO;AAAA,cAHNJ,mBAEI,KAFJ,YAEIC,gBADA,KAAO,OAAA,GAAA,CAAA;AAAA;;;QAMdD,mBAOM,OAPN,YAOM;AAAA,UANLI,WAKO,4BALP,MAKO;AAAA,aAJNR,UAAA,IAAA,GAAAO,mBAG8BG,gBApInCC,WAiI6C,KAAA,SAjI7C,CAiI6B,QAAQ,QAAG;AAAnC,qBAAAX,UAAA,GAAAC,YAG8B,2BAH9BC,WAG8B;AAAA,gBAF5B,KAAK;AAAA,gBAlIZ,SAAA;AAAA,iBAmIc,QAAM,EACb,SAAO,KAAiB,kBAAA,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,CAAA;AAAA;;;;;IApI/B,GAAA;AAAA,0CAAAO,mBAAA,IAAA,IAAA;;;"}

package/dist/chunks/NcDialogButton-C6SudZTq.mjs

@@ -0,0 +1,80 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-C0csZ9zg.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = defineComponent({
+  name: "NcDialogButton",
+  components: {
+    NcButton,
+    NcIconSvgWrapper
+  },
+  props: {
+    /**
+     * The function that will be called when the button is pressed
+     * @type {() => void}
+     */
+    callback: {
+      type: Function,
+      required: true
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+     */
+    type: {
+      type: String,
+      required: false,
+      default: "secondary",
+      validator: (type) => typeof type === "string" && ["primary", "secondary", "error", "warning", "success"].includes(type)
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const handleClick = (e) => {
+      props.callback?.();
+      emit("click", e);
+    };
+    return { handleClick };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
+  const _component_NcButton = resolveComponent("NcButton");
+  return openBlock(), createBlock(_component_NcButton, {
+    "aria-label": _ctx.label,
+    type: _ctx.type,
+    onClick: _ctx.handleClick
+  }, {
+    icon: withCtx(() => [
+      renderSlot(_ctx.$slots, "icon", {}, () => [
+        _ctx.icon !== void 0 ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
+          key: 0,
+          svg: _ctx.icon
+        }, null, 8, ["svg"])) : createCommentVNode("", true)
+      ])
+    ]),
+    default: withCtx(() => [
+      createTextVNode(toDisplayString(_ctx.label) + " ", 1)
+    ]),
+    _: 3
+  }, 8, ["aria-label", "type", "onClick"]);
+}
+const NcDialogButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcDialogButton as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton-C6SudZTq.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":["_createBlock","_renderSlot","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";;;;AA2CA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;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,CAAC,SAAS,OAAO,SAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAAS,IAAI;AAAA,IACtH;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAM,OAAO,EAAE,QAAQ;AAKtB,UAAM,cAAc,CAAC,MAAM;AAC1B,YAAM,WAAW;AACjB,WAAK,SAAS,CAAC;AAAA,IAChB;AAEA,WAAO,EAAE,YAAY;AAAA,EACrB;AACF,CAAC;;;;sBA7EAA,YAQW,qBAAA;AAAA,IARA,cAAY,KAAK;AAAA,IAAG,MAAM,KAAI;AAAA,IAAG,SAAO,KAAW;AAAA;IAElD,cAEV,MAEO;AAAA,MAFPC,WAEO,yBAFP,MAEO;AAAA,QADkB,KAAA,SAAS,uBAAjCD,YAA0D,6BAAA;AAAA,UAhC9D,KAAA;AAAA,UAgCiD,KAAK,KAAI;AAAA,gCAhC1DE,mBAAA,IAAA,IAAA;AAAA;;IAAA,SAAAC,QA4BE,MAAW;AAAA,MA5BbC,gBA4BKC,gBAAA,KAAA,KAAK,IAAG,KACX,CAAA;AAAA;IA7BF,GAAA;AAAA;;;"}