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

package/dist/Components/NcModal.mjs

@@ -1,19 +1,19 @@
-import "../assets/NcModal-lgvjJTYz.css";
-import { S as M } from "../chunks/ScopeComponent-mG7CSpxl.mjs";
-import { g as B } from "../chunks/focusTrap-Py2bQ9-r.mjs";
-import { r as E, G as I, H as F, a as f } from "../chunks/_l10n-uuAvfQgY.mjs";
-import { G as V } from "../chunks/GenRandomId-VodkdWbp.mjs";
-import { N as D } from "../chunks/NcActions-76CtOBCq.mjs";
-import { N as R } from "../chunks/NcButton-YOXv3gFY.mjs";
+import '../assets/NcModal-JZMyM8zO.css';
+import { S as ScopeComponent } from "../chunks/ScopeComponent-B2OE7k3z.mjs";
+import { g as getTrapStack } from "../chunks/focusTrap-hWDNhn4t.mjs";
+import { r as register, E as t30, F as t16, a as t } from "../chunks/_l10n-ipRV_dfs.mjs";
+import { G as GenRandomId } from "../chunks/GenRandomId-CXkjMlAT.mjs";
+import { N as NcActions } from "../chunks/NcActions-B6QL_4DD.mjs";
+import { N as NcButton } from "../chunks/NcButton-B27fpd1m.mjs";
 import "../Directives/Tooltip.mjs";
-import { openBlock as l, createElementBlock as o, mergeProps as S, createElementVNode as r, toDisplayString as w, createCommentVNode as d, resolveComponent as h, resolveDirective as H, createBlock as p, Transition as y, withCtx as c, withDirectives as _, normalizeClass as b, normalizeStyle as O, createVNode as n, renderSlot as N, withModifiers as G, vShow as k, pushScopeId as K, popScopeId as W } from "vue";
-import { _ as v } from "../chunks/_plugin-vue_export-helper-hUChTQA_.mjs";
-import { C as Z } from "../chunks/ChevronRight-gF2cX9Cu.mjs";
-import { C as q } from "../chunks/Close-hKJ11hky.mjs";
-import { createFocusTrap as U } from "focus-trap";
-import { useSwipe as j } from "@vueuse/core";
-import { VTooltip as J } from "floating-vue";
-E(F, I);
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, resolveDirective, createBlock, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createVNode, renderSlot, withModifiers, vShow, pushScopeId, popScopeId } from "vue";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { C as ChevronRight } from "../chunks/ChevronRight-C33SNIxR.mjs";
+import { C as Close } from "../chunks/Close-pmiXntgw.mjs";
+import { createFocusTrap } from "focus-trap";
+import { useSwipe } from "@vueuse/core";
+import { VTooltip } from "floating-vue";
+register(t16, t30);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -35,21 +35,39 @@ E(F, I);
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-function Q(t, a) {
-  let e, m, s = a, i;
+function timer(callback, delay) {
+  let id;
+  let started;
+  let remaining = delay;
+  let running;
   this.start = function() {
-    i = !0, m = /* @__PURE__ */ new Date(), e = setTimeout(t, s);
-  }, this.pause = function() {
-    i = !1, clearTimeout(e), s -= /* @__PURE__ */ new Date() - m;
-  }, this.clear = function() {
-    i = !1, clearTimeout(e), s = 0;
-  }, this.getTimeLeft = function() {
-    return i && (this.pause(), this.start()), s;
-  }, this.getStateRunning = function() {
-    return i;
-  }, this.start();
+    running = true;
+    started = /* @__PURE__ */ new Date();
+    id = setTimeout(callback, remaining);
+  };
+  this.pause = function() {
+    running = false;
+    clearTimeout(id);
+    remaining -= /* @__PURE__ */ new Date() - started;
+  };
+  this.clear = function() {
+    running = false;
+    clearTimeout(id);
+    remaining = 0;
+  };
+  this.getTimeLeft = function() {
+    if (running) {
+      this.pause();
+      this.start();
+    }
+    return remaining;
+  };
+  this.getStateRunning = function() {
+    return running;
+  };
+  this.start();
 }
-const X = {
+const _sfc_main$3 = {
   name: "ChevronLeftIcon",
   emits: ["click"],
   props: {
@@ -65,29 +83,34 @@ const X = {
       default: 24
     }
   }
-}, Y = ["aria-hidden", "aria-label"], $ = ["fill", "width", "height"], ee = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" }, te = { key: 0 };
-function ie(t, a, e, m, s, i) {
-  return l(), o("span", S(t.$attrs, {
-    "aria-hidden": e.title ? null : !0,
-    "aria-label": e.title,
+};
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["fill", "width", "height"];
+const _hoisted_3$3 = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" };
+const _hoisted_4$3 = { key: 0 };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon chevron-left-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", ee, [
-        e.title ? (l(), o("title", te, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, $))
-  ], 16, Y);
+    ], 8, _hoisted_2$3))
+  ], 16, _hoisted_1$3);
 }
-const ae = /* @__PURE__ */ v(X, [["render", ie]]), se = {
+const ChevronLeft = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = {
   name: "PauseIcon",
   emits: ["click"],
   props: {
@@ -103,29 +126,34 @@ const ae = /* @__PURE__ */ v(X, [["render", ie]]), se = {
       default: 24
     }
   }
-}, le = ["aria-hidden", "aria-label"], oe = ["fill", "width", "height"], ne = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" }, re = { key: 0 };
-function ce(t, a, e, m, s, i) {
-  return l(), o("span", S(t.$attrs, {
-    "aria-hidden": e.title ? null : !0,
-    "aria-label": e.title,
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_3$2 = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" };
+const _hoisted_4$2 = { key: 0 };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon pause-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", ne, [
-        e.title ? (l(), o("title", re, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$2, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, oe))
-  ], 16, le);
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$2);
 }
-const de = /* @__PURE__ */ v(se, [["render", ce]]), ue = {
+const Pause = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
   name: "PlayIcon",
   emits: ["click"],
   props: {
@@ -141,41 +169,46 @@ const de = /* @__PURE__ */ v(se, [["render", ce]]), ue = {
       default: 24
     }
   }
-}, he = ["aria-hidden", "aria-label"], me = ["fill", "width", "height"], fe = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" }, pe = { key: 0 };
-function ye(t, a, e, m, s, i) {
-  return l(), o("span", S(t.$attrs, {
-    "aria-hidden": e.title ? null : !0,
-    "aria-label": e.title,
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
     class: "material-design-icon play-icon",
     role: "img",
-    onClick: a[0] || (a[0] = (u) => t.$emit("click", u))
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
-    (l(), o("svg", {
-      fill: e.fillColor,
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
       class: "material-design-icon__svg",
-      width: e.size,
-      height: e.size,
+      width: $props.size,
+      height: $props.size,
       viewBox: "0 0 24 24"
     }, [
-      r("path", fe, [
-        e.title ? (l(), o("title", pe, w(e.title), 1)) : d("", !0)
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, me))
-  ], 16, he);
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$1);
 }
-const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
+const Play = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
   name: "NcModal",
   components: {
-    NcActions: D,
-    ChevronLeft: ae,
-    ChevronRight: Z,
-    Close: q,
-    Pause: de,
-    Play: _e,
-    NcButton: R
+    NcActions,
+    ChevronLeft,
+    ChevronRight,
+    Close,
+    Pause,
+    Play,
+    NcButton
   },
   directives: {
-    tooltip: J
+    tooltip: VTooltip
   },
   props: {
     /**
@@ -190,28 +223,28 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     hasPrevious: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if a next slide is available
      */
     hasNext: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if hiding the modal should be animated
      */
     outTransition: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare if the slideshow functionality should be enabled
      */
     enableSlideshow: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Declare the slide interval
@@ -225,18 +258,18 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     slideshowPaused: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Enable swipe between slides
      */
     enableSwipe: {
       type: Boolean,
-      default: !0
+      default: true
     },
     spreadNavigation: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Defines the modal size.
@@ -247,14 +280,16 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
     size: {
       type: String,
       default: "normal",
-      validator: (t) => ["small", "normal", "large", "full"].includes(t)
+      validator: (size) => {
+        return ["small", "normal", "large", "full"].includes(size);
+      }
     },
     /**
      * Declare if the modal can be closed
      */
     canClose: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Close the modal if the user clicked outside of the modal
@@ -262,7 +297,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     closeOnClickOutside: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Makes the modal backdrop black if true
@@ -270,7 +305,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     dark: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Selector for the modal container, pass `null` to prevent automatic container mounting
@@ -285,7 +320,7 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      */
     closeButtonContained: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Additional elements to add to the focus trap
@@ -326,12 +361,12 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
   data() {
     return {
       mc: null,
-      playing: !1,
+      playing: false,
       slideshowTimeout: null,
       iconSize: 24,
       focusTrap: null,
-      randId: V(),
-      internalShow: !0
+      randId: GenRandomId(),
+      internalShow: true
     };
   },
   computed: {
@@ -339,10 +374,10 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
       return this.show === void 0 ? this.internalShow : this.show;
     },
     modalTransitionName() {
-      return "modal-".concat(this.outTransition ? "out" : "in");
+      return `modal-${this.outTransition ? "out" : "in"}`;
     },
     playPauseName() {
-      return this.playing ? f("Pause slideshow") : f("Start slideshow");
+      return this.playing ? t("Pause slideshow") : t("Start slideshow");
     },
     cssVariables() {
       return {
@@ -351,13 +386,13 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
       };
     },
     closeButtonAriaLabel() {
-      return f("Close");
+      return t("Close");
     },
     prevButtonAriaLabel() {
-      return f("Previous");
+      return t("Previous");
     },
     nextButtonAriaLabel() {
-      return f("Next");
+      return t("Next");
     }
   },
   watch: {
@@ -366,13 +401,19 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      *
      * @param {boolean} paused is the player paused
      */
-    slideshowPaused(t) {
-      this.slideshowTimeout && (t ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
+    slideshowPaused(paused) {
+      if (this.slideshowTimeout) {
+        if (paused) {
+          this.slideshowTimeout.pause();
+        } else {
+          this.slideshowTimeout.start();
+        }
+      }
     },
-    additionalTrapElements(t) {
+    additionalTrapElements(elements) {
       if (this.focusTrap) {
-        const a = this.$refs.mask;
-        this.focusTrap.updateContainerElements([a, ...t]);
+        const contentContainer = this.$refs.mask;
+        this.focusTrap.updateContainerElements([contentContainer, ...elements]);
       }
     }
   },
@@ -380,29 +421,54 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
     window.addEventListener("keydown", this.handleKeydown);
   },
   beforeUnmount() {
-    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.mc.stop();
   },
   mounted() {
-    this.useFocusTrap(), this.mc = j(this.$refs.mask, {
+    this.useFocusTrap();
+    this.mc = useSwipe(this.$refs.mask, {
       onSwipeEnd: this.handleSwipe
-    }), this.container && (this.container === "body" ? document.body.insertBefore(this.$el, document.body.lastChild) : document.querySelector(this.container).appendChild(this.$el));
+    });
+    if (this.container) {
+      if (this.container === "body") {
+        document.body.insertBefore(this.$el, document.body.lastChild);
+      } else {
+        const container = document.querySelector(this.container);
+        container.appendChild(this.$el);
+      }
+    }
   },
   unmounted() {
-    this.clearFocusTrap(), this.$el.remove();
+    this.clearFocusTrap();
+    this.$el.remove();
   },
   methods: {
-    t: f,
+    t,
     // Events emitters
-    previous(t) {
-      this.hasPrevious && (t && this.resetSlideshow(), this.$emit("previous", t));
+    previous(event) {
+      if (this.hasPrevious) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("previous", event);
+      }
     },
-    next(t) {
-      this.hasNext && (t && this.resetSlideshow(), this.$emit("next", t));
+    next(event) {
+      if (this.hasNext) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("next", event);
+      }
     },
-    close(t) {
-      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", t);
-      }, 300));
+    close(data) {
+      if (this.canClose) {
+        this.internalShow = false;
+        this.$emit("update:show", false);
+        setTimeout(() => {
+          this.$emit("close", data);
+        }, 300);
+      }
     },
     /**
      * Handle click on modal wrapper
@@ -410,23 +476,32 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      *
      * @param {MouseEvent} event The click event
      */
-    handleClickModalWrapper(t) {
-      this.closeOnClickOutside && this.close(t);
+    handleClickModalWrapper(event) {
+      if (this.closeOnClickOutside) {
+        this.close(event);
+      }
     },
     /**
      * @param {KeyboardEvent} event - keyboard event
      */
-    handleKeydown(t) {
-      if (t.key === "Escape") {
-        const e = B();
-        return e.length > 0 && e[e.length - 1] !== this.focusTrap ? void 0 : this.close(t);
+    handleKeydown(event) {
+      if (event.key === "Escape") {
+        const trapStack = getTrapStack();
+        if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== this.focusTrap) {
+          return;
+        }
+        return this.close(event);
       }
-      const a = {
+      const arrowHandlers = {
         ArrowLeft: this.previous,
         ArrowRight: this.next
       };
-      if (a[t.key])
-        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : a[t.key](t);
+      if (arrowHandlers[event.key]) {
+        if (document.activeElement && !this.$el.contains(document.activeElement)) {
+          return;
+        }
+        return arrowHandlers[event.key](event);
+      }
     },
     /**
      * handle the swipe event
@@ -434,20 +509,33 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      * @param {TouchEvent} e The touch event
      * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
      */
-    handleSwipe(t, a) {
-      this.enableSwipe && (a === "left" ? this.next(t) : a === "right" && this.previous(t));
+    handleSwipe(e, direction) {
+      if (this.enableSwipe) {
+        if (direction === "left") {
+          this.next(e);
+        } else if (direction === "right") {
+          this.previous(e);
+        }
+      }
     },
     /**
      * Toggle the slideshow state
      */
     togglePlayPause() {
-      this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
+      this.playing = !this.playing;
+      if (this.playing) {
+        this.handleSlideshow();
+      } else {
+        this.clearSlideshowTimeout();
+      }
     },
     /**
      * Reset the slideshow timer and keep going if it was on
      */
     resetSlideshow() {
-      this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
+      this.playing = !this.playing;
+      this.clearSlideshowTimeout();
+      this.$nextTick(function() {
         this.togglePlayPause();
       });
     },
@@ -455,46 +543,68 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
      * Handle the slideshow timer and next event
      */
     handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new Q(() => {
-        this.next(), this.handleSlideshow();
-      }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
+      this.playing = true;
+      if (this.hasNext) {
+        this.slideshowTimeout = new timer(() => {
+          this.next();
+          this.handleSlideshow();
+        }, this.slideshowDelay);
+      } else {
+        this.playing = false;
+        this.clearSlideshowTimeout();
+      }
     },
     /**
      * Clear slideshowTimeout if ongoing
      */
     clearSlideshowTimeout() {
-      this.slideshowTimeout && this.slideshowTimeout.clear();
+      if (this.slideshowTimeout) {
+        this.slideshowTimeout.clear();
+      }
     },
     /**
      * Add focus trap for accessibility.
      */
     async useFocusTrap() {
-      if (!this.showModal || this.focusTrap)
+      if (!this.showModal || this.focusTrap) {
         return;
-      const t = this.$refs.mask;
+      }
+      const contentContainer = this.$refs.mask;
       await this.$nextTick();
-      const a = {
-        allowOutsideClick: !0,
-        fallbackFocus: t,
-        trapStack: B(),
+      const options = {
+        allowOutsideClick: true,
+        fallbackFocus: contentContainer,
+        trapStack: getTrapStack(),
         // Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap.
         // Focus trap is deactivated on modal close anyway.
-        escapeDeactivates: !1,
+        escapeDeactivates: false,
         setReturnFocus: this.setReturnFocus
       };
-      this.focusTrap = U([t, ...this.additionalTrapElements], a), this.focusTrap.activate();
+      this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options);
+      this.focusTrap.activate();
     },
     clearFocusTrap() {
-      var t;
-      this.focusTrap && ((t = this.focusTrap) == null || t.deactivate(), this.focusTrap = null);
+      if (!this.focusTrap) {
+        return;
+      }
+      this.focusTrap?.deactivate();
+      this.focusTrap = null;
     }
   }
-}, ge = (t) => (K("data-v-c512267c"), t = t(), W(), t), ke = ["aria-labelledby", "aria-describedby"], ve = { class: "modal-header" }, Ce = ["id"], be = { class: "icons-menu" }, Se = { class: "hidden-visually" }, Te = {
+};
+const _withScopeId = (n) => (pushScopeId("data-v-7c811920"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_2 = { class: "modal-header" };
+const _hoisted_3 = ["id"];
+const _hoisted_4 = { class: "icons-menu" };
+const _hoisted_5 = { class: "hidden-visually" };
+const _hoisted_6 = {
   key: 2,
   class: "progress-ring",
   height: "50",
   width: "50"
-}, Be = /* @__PURE__ */ ge(() => /* @__PURE__ */ r("circle", {
+};
+const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("circle", {
   class: "progress-ring__circle",
   stroke: "white",
   "stroke-width": "2",
@@ -502,179 +612,189 @@ const _e = /* @__PURE__ */ v(ue, [["render", ye]]), we = {
   r: "15",
   cx: "25",
   cy: "25"
-}, null, -1)), Ne = [
-  Be
-], Pe = ["id"], ze = { class: "modal-container__content" };
-function Le(t, a, e, m, s, i) {
-  const u = h("Play"), P = h("Pause"), z = h("NcActions"), T = h("Close"), g = h("NcButton"), L = h("ChevronLeft"), x = h("ChevronRight"), A = H("tooltip");
-  return l(), p(y, {
+}, null, -1));
+const _hoisted_8 = [
+  _hoisted_7
+];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = { class: "modal-container__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Play = resolveComponent("Play");
+  const _component_Pause = resolveComponent("Pause");
+  const _component_NcActions = resolveComponent("NcActions");
+  const _component_Close = resolveComponent("Close");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_ChevronLeft = resolveComponent("ChevronLeft");
+  const _component_ChevronRight = resolveComponent("ChevronRight");
+  const _directive_tooltip = resolveDirective("tooltip");
+  return openBlock(), createBlock(Transition, {
     name: "fade",
     appear: "",
-    onAfterEnter: i.useFocusTrap,
-    onBeforeLeave: i.clearFocusTrap
+    onAfterEnter: $options.useFocusTrap,
+    onBeforeLeave: $options.clearFocusTrap
   }, {
-    default: c(() => [
-      _(r("div", {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
         ref: "mask",
-        class: b(["modal-mask", { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }]),
-        style: O(i.cssVariables),
+        class: normalizeClass(["modal-mask", { "modal-mask--dark": $props.dark || !$props.closeButtonContained || $props.hasPrevious || $props.hasNext }]),
+        style: normalizeStyle($options.cssVariables),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": "modal-name-" + s.randId,
-        "aria-describedby": "modal-description-" + s.randId,
+        "aria-labelledby": "modal-name-" + $data.randId,
+        "aria-describedby": "modal-description-" + $data.randId,
         tabindex: "-1"
       }, [
-        n(y, {
+        createVNode(Transition, {
           name: "fade-visibility",
           appear: ""
         }, {
-          default: c(() => [
-            r("div", ve, [
-              e.name.trim() !== "" ? (l(), o("h2", {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              $props.name.trim() !== "" ? (openBlock(), createElementBlock("h2", {
                 key: 0,
-                id: "modal-name-" + s.randId,
+                id: "modal-name-" + $data.randId,
                 class: "modal-name"
-              }, w(e.name), 9, Ce)) : d("", !0),
-              r("div", be, [
-                e.hasNext && e.enableSlideshow ? _((l(), o("button", {
+              }, toDisplayString($props.name), 9, _hoisted_3)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                $props.hasNext && $props.enableSlideshow ? withDirectives((openBlock(), createElementBlock("button", {
                   key: 0,
-                  class: b([{ "play-pause-icons--paused": e.slideshowPaused }, "play-pause-icons"]),
+                  class: normalizeClass([{ "play-pause-icons--paused": $props.slideshowPaused }, "play-pause-icons"]),
                   type: "button",
-                  onClick: a[0] || (a[0] = (...C) => i.togglePlayPause && i.togglePlayPause(...C))
+                  onClick: _cache[0] || (_cache[0] = (...args) => $options.togglePlayPause && $options.togglePlayPause(...args))
                 }, [
-                  s.playing ? (l(), p(P, {
-                    key: 1,
-                    size: s.iconSize,
-                    class: "play-pause-icons__pause"
-                  }, null, 8, ["size"])) : (l(), p(u, {
+                  !$data.playing ? (openBlock(), createBlock(_component_Play, {
                     key: 0,
-                    size: s.iconSize,
+                    size: $data.iconSize,
                     class: "play-pause-icons__play"
+                  }, null, 8, ["size"])) : (openBlock(), createBlock(_component_Pause, {
+                    key: 1,
+                    size: $data.iconSize,
+                    class: "play-pause-icons__pause"
                   }, null, 8, ["size"])),
-                  r("span", Se, w(i.playPauseName), 1),
-                  s.playing ? (l(), o("svg", Te, Ne)) : d("", !0)
+                  createElementVNode("span", _hoisted_5, toDisplayString($options.playPauseName), 1),
+                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_6, _hoisted_8)) : createCommentVNode("", true)
                 ], 2)), [
                   [
-                    A,
-                    i.playPauseName,
+                    _directive_tooltip,
+                    $options.playPauseName,
                     void 0,
-                    { auto: !0 }
+                    { auto: true }
                   ]
-                ]) : d("", !0),
-                n(z, {
+                ]) : createCommentVNode("", true),
+                createVNode(_component_NcActions, {
                   class: "header-actions",
-                  inline: e.inlineActions
+                  inline: $props.inlineActions
                 }, {
-                  default: c(() => [
-                    N(t.$slots, "actions", {}, void 0, !0)
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "actions", {}, void 0, true)
                   ]),
                   _: 3
                 }, 8, ["inline"]),
-                e.canClose && !e.closeButtonContained ? (l(), p(g, {
+                $props.canClose && !$props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
                   key: 1,
-                  "aria-label": i.closeButtonAriaLabel,
+                  "aria-label": $options.closeButtonAriaLabel,
                   class: "header-close",
                   type: "tertiary",
-                  onClick: i.close
+                  onClick: $options.close
                 }, {
-                  icon: c(() => [
-                    n(T, { size: s.iconSize }, null, 8, ["size"])
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: $data.iconSize }, null, 8, ["size"])
                   ]),
                   _: 1
-                }, 8, ["aria-label", "onClick"])) : d("", !0)
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
               ])
             ])
           ]),
           _: 3
         }),
-        n(y, {
-          name: i.modalTransitionName,
+        createVNode(Transition, {
+          name: $options.modalTransitionName,
           appear: ""
         }, {
-          default: c(() => [
-            _(r("div", {
-              class: b([[
-                "modal-wrapper--".concat(e.size),
-                { "modal-wrapper--spread-navigation": e.spreadNavigation }
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: normalizeClass([[
+                `modal-wrapper--${$props.size}`,
+                { "modal-wrapper--spread-navigation": $props.spreadNavigation }
               ], "modal-wrapper"]),
-              onMousedown: a[1] || (a[1] = G((...C) => i.handleClickModalWrapper && i.handleClickModalWrapper(...C), ["self"]))
+              onMousedown: _cache[1] || (_cache[1] = withModifiers((...args) => $options.handleClickModalWrapper && $options.handleClickModalWrapper(...args), ["self"]))
             }, [
-              n(y, {
+              createVNode(Transition, {
                 name: "fade-visibility",
                 appear: ""
               }, {
-                default: c(() => [
-                  _(n(g, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
                     type: "tertiary-no-background",
                     class: "prev",
-                    "aria-label": i.prevButtonAriaLabel,
-                    onClick: i.previous
+                    "aria-label": $options.prevButtonAriaLabel,
+                    onClick: $options.previous
                   }, {
-                    icon: c(() => [
-                      n(L, { size: 40 })
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronLeft, { size: 40 })
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
-                    [k, e.hasPrevious]
+                    [vShow, $props.hasPrevious]
                   ])
                 ]),
                 _: 1
               }),
-              r("div", {
-                id: "modal-description-" + s.randId,
+              createElementVNode("div", {
+                id: "modal-description-" + $data.randId,
                 class: "modal-container"
               }, [
-                e.canClose && e.closeButtonContained ? (l(), p(g, {
+                $props.canClose && $props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
                   key: 0,
                   type: "tertiary",
                   class: "modal-container__close",
-                  "aria-label": i.closeButtonAriaLabel,
-                  onClick: i.close
+                  "aria-label": $options.closeButtonAriaLabel,
+                  onClick: $options.close
                 }, {
-                  icon: c(() => [
-                    n(T, { size: 20 })
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: 20 })
                   ]),
                   _: 1
-                }, 8, ["aria-label", "onClick"])) : d("", !0),
-                r("div", ze, [
-                  N(t.$slots, "default", {}, void 0, !0)
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_10, [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
-              ], 8, Pe),
-              n(y, {
+              ], 8, _hoisted_9),
+              createVNode(Transition, {
                 name: "fade-visibility",
                 appear: ""
               }, {
-                default: c(() => [
-                  _(n(g, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
                     type: "tertiary-no-background",
                     class: "next",
-                    "aria-label": i.nextButtonAriaLabel,
-                    onClick: i.next
+                    "aria-label": $options.nextButtonAriaLabel,
+                    onClick: $options.next
                   }, {
-                    icon: c(() => [
-                      n(x, { size: 40 })
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronRight, { size: 40 })
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]), [
-                    [k, e.hasNext]
+                    [vShow, $props.hasNext]
                   ])
                 ]),
                 _: 1
               })
             ], 34), [
-              [k, i.showModal]
+              [vShow, $options.showModal]
             ])
           ]),
           _: 3
         }, 8, ["name"])
-      ], 14, ke), [
-        [k, i.showModal]
+      ], 14, _hoisted_1), [
+        [vShow, $options.showModal]
       ])
     ]),
     _: 3
   }, 8, ["onAfterEnter", "onBeforeLeave"]);
 }
-const xe = /* @__PURE__ */ v(we, [["render", Le], ["__scopeId", "data-v-c512267c"]]);
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7c811920"]]);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -696,7 +816,7 @@ const xe = /* @__PURE__ */ v(we, [["render", Le], ["__scopeId", "data-v-c512267c
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-M(xe);
+ScopeComponent(NcModal);
 export {
-  xe as default
+  NcModal as default
 };