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

package/dist/Components/NcModal.cjs

@@ -1,689 +0,0 @@
-var de = require("../assets/NcModal-DIWPznuf.css");
-const g = require("../chunks/ScopeComponent-D_Bohqyr.cjs"), m = require("../chunks/focusTrap-xauhLvvr.cjs"), s = require("../chunks/_l10n-CEec8lDL.cjs"), C = require("../chunks/GenRandomId-B2O1GMbH.cjs"), v = require("../chunks/NcActions-Bj5vZPRQ.cjs"), B = require("../chunks/NcButton-CR5WPHh9.cjs");
-require("../Directives/Tooltip.cjs");
-const e = require("vue"), d = require("../chunks/_plugin-vue_export-helper-CTzpuyvq.cjs"), N = require("../chunks/ChevronRight-54kOBYZt.cjs"), S = require("../chunks/Close-PZEquBdx.cjs"), b = require("focus-trap"), T = require("@vueuse/core"), V = require("floating-vue");
-s.register(s.t16, s.t29);
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-function x(i, a) {
-  let t, r, n = a, o;
-  this.start = function() {
-    o = !0, r = /* @__PURE__ */ new Date(), t = setTimeout(i, n);
-  }, this.pause = function() {
-    o = !1, clearTimeout(t), n -= /* @__PURE__ */ new Date() - r;
-  }, this.clear = function() {
-    o = !1, clearTimeout(t), n = 0;
-  }, this.getTimeLeft = function() {
-    return o && (this.pause(), this.start()), n;
-  }, this.getStateRunning = function() {
-    return o;
-  }, this.start();
-}
-const E = {
-  name: "ChevronLeftIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}, P = ["aria-hidden", "aria-label"], z = ["fill", "width", "height"], L = { d: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" }, A = { key: 0 };
-function D(i, a, t, r, n, o) {
-  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": t.title ? null : !0,
-    "aria-label": t.title,
-    class: "material-design-icon chevron-left-icon",
-    role: "img",
-    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
-  }), [
-    (e.openBlock(), e.createElementBlock("svg", {
-      fill: t.fillColor,
-      class: "material-design-icon__svg",
-      width: t.size,
-      height: t.size,
-      viewBox: "0 0 24 24"
-    }, [
-      e.createElementVNode("path", L, [
-        t.title ? (e.openBlock(), e.createElementBlock("title", A, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
-      ])
-    ], 8, z))
-  ], 16, P);
-}
-const M = /* @__PURE__ */ d._export_sfc(E, [["render", D]]), q = {
-  name: "PauseIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}, I = ["aria-hidden", "aria-label"], R = ["fill", "width", "height"], F = { d: "M14,19H18V5H14M6,19H10V5H6V19Z" }, H = { key: 0 };
-function O(i, a, t, r, n, o) {
-  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": t.title ? null : !0,
-    "aria-label": t.title,
-    class: "material-design-icon pause-icon",
-    role: "img",
-    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
-  }), [
-    (e.openBlock(), e.createElementBlock("svg", {
-      fill: t.fillColor,
-      class: "material-design-icon__svg",
-      width: t.size,
-      height: t.size,
-      viewBox: "0 0 24 24"
-    }, [
-      e.createElementVNode("path", F, [
-        t.title ? (e.openBlock(), e.createElementBlock("title", H, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
-      ])
-    ], 8, R))
-  ], 16, I);
-}
-const G = /* @__PURE__ */ d._export_sfc(q, [["render", O]]), K = {
-  name: "PlayIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-}, W = ["aria-hidden", "aria-label"], Z = ["fill", "width", "height"], U = { d: "M8,5.14V19.14L19,12.14L8,5.14Z" }, j = { key: 0 };
-function J(i, a, t, r, n, o) {
-  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": t.title ? null : !0,
-    "aria-label": t.title,
-    class: "material-design-icon play-icon",
-    role: "img",
-    onClick: a[0] || (a[0] = (l) => i.$emit("click", l))
-  }), [
-    (e.openBlock(), e.createElementBlock("svg", {
-      fill: t.fillColor,
-      class: "material-design-icon__svg",
-      width: t.size,
-      height: t.size,
-      viewBox: "0 0 24 24"
-    }, [
-      e.createElementVNode("path", U, [
-        t.title ? (e.openBlock(), e.createElementBlock("title", j, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
-      ])
-    ], 8, Z))
-  ], 16, W);
-}
-const Q = /* @__PURE__ */ d._export_sfc(K, [["render", J]]), X = {
-  name: "NcModal",
-  components: {
-    NcActions: v.NcActions,
-    ChevronLeft: M,
-    ChevronRight: N.ChevronRight,
-    Close: S.Close,
-    Pause: G,
-    Play: Q,
-    NcButton: B.NcButton
-  },
-  directives: {
-    tooltip: V.VTooltip
-  },
-  props: {
-    /**
-     * Name to be shown with the modal
-     */
-    name: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Declare if a previous slide is available
-     */
-    hasPrevious: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Declare if a next slide is available
-     */
-    hasNext: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Declare if hiding the modal should be animated
-     */
-    outTransition: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Declare if the slideshow functionality should be enabled
-     */
-    enableSlideshow: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Declare the slide interval
-     */
-    slideshowDelay: {
-      type: Number,
-      default: 5e3
-    },
-    /**
-     * Allow to pause an ongoing slideshow
-     */
-    slideshowPaused: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Enable swipe between slides
-     */
-    enableSwipe: {
-      type: Boolean,
-      default: !0
-    },
-    spreadNavigation: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Defines the modal size.
-     * Default is 'normal'.
-     * Available are 'small', 'normal', 'large' and 'full'.
-     * All sizes except 'small' change automatically to full-screen on mobile.
-     */
-    size: {
-      type: String,
-      default: "normal",
-      validator: (i) => ["small", "normal", "large", "full"].includes(i)
-    },
-    /**
-     * Declare if the modal can be closed
-     */
-    canClose: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Close the modal if the user clicked outside of the modal
-     * Only relevant if `canClose` is set to true.
-     */
-    closeOnClickOutside: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Makes the modal backdrop black if true
-     * Will be overwritten if some buttons are shown outside
-     */
-    dark: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Selector for the modal container, pass `null` to prevent automatic container mounting
-     */
-    container: {
-      type: [String, null],
-      default: "body"
-    },
-    /**
-     * Pass in false if you want the modal 'close' button to be displayed
-     * outside the modal boundaries, in the top right corner of the window
-     */
-    closeButtonContained: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Additional elements to add to the focus trap
-     */
-    additionalTrapElements: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Display x items inline
-     *
-     * @see Actions component usage
-     */
-    inlineActions: {
-      type: Number,
-      default: 0
-    },
-    show: {
-      type: Boolean,
-      default: void 0
-    },
-    /**
-     * Set element to return focus to after focus trap deactivation
-     *
-     * @type {import('focus-trap').FocusTargetValueOrFalse}
-     */
-    setReturnFocus: {
-      default: void 0,
-      type: [HTMLElement, SVGElement, String, Boolean]
-    }
-  },
-  emits: [
-    "previous",
-    "next",
-    "close",
-    "update:show"
-  ],
-  data() {
-    return {
-      mc: null,
-      playing: !1,
-      slideshowTimeout: null,
-      iconSize: 24,
-      focusTrap: null,
-      randId: C.GenRandomId(),
-      internalShow: !0
-    };
-  },
-  computed: {
-    showModal() {
-      return this.show === void 0 ? this.internalShow : this.show;
-    },
-    modalTransitionName() {
-      return "modal-".concat(this.outTransition ? "out" : "in");
-    },
-    playPauseName() {
-      return this.playing ? s.t("Pause slideshow") : s.t("Start slideshow");
-    },
-    cssVariables() {
-      return {
-        "--slideshow-duration": this.slideshowDelay + "ms",
-        "--icon-size": this.iconSize + "px"
-      };
-    },
-    closeButtonAriaLabel() {
-      return s.t("Close");
-    },
-    prevButtonAriaLabel() {
-      return s.t("Previous");
-    },
-    nextButtonAriaLabel() {
-      return s.t("Next");
-    }
-  },
-  watch: {
-    /**
-     * Handle play/pause of an ongoing slideshow
-     *
-     * @param {boolean} paused is the player paused
-     */
-    slideshowPaused(i) {
-      this.slideshowTimeout && (i ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
-    },
-    additionalTrapElements(i) {
-      if (this.focusTrap) {
-        const a = this.$refs.mask;
-        this.focusTrap.updateContainerElements([a, ...i]);
-      }
-    }
-  },
-  beforeMount() {
-    window.addEventListener("keydown", this.handleKeydown);
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
-  },
-  mounted() {
-    this.useFocusTrap(), this.mc = T.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));
-  },
-  unmounted() {
-    this.clearFocusTrap(), this.$el.remove();
-  },
-  methods: {
-    t: s.t,
-    // Events emitters
-    previous(i) {
-      this.hasPrevious && (i && this.resetSlideshow(), this.$emit("previous", i));
-    },
-    next(i) {
-      this.hasNext && (i && this.resetSlideshow(), this.$emit("next", i));
-    },
-    close(i) {
-      this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
-        this.$emit("close", i);
-      }, 300));
-    },
-    /**
-     * Handle click on modal wrapper
-     * If `closeOnClickOutside` is set the modal will be closed
-     *
-     * @param {MouseEvent} event The click event
-     */
-    handleClickModalWrapper(i) {
-      this.closeOnClickOutside && this.close(i);
-    },
-    /**
-     * @param {KeyboardEvent} event - keyboard event
-     */
-    handleKeydown(i) {
-      if (i.key === "Escape") {
-        const t = m.getTrapStack();
-        return t.length > 0 && t[t.length - 1] !== this.focusTrap ? void 0 : this.close(i);
-      }
-      const a = {
-        ArrowLeft: this.previous,
-        ArrowRight: this.next
-      };
-      if (a[i.key])
-        return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : a[i.key](i);
-    },
-    /**
-     * handle the swipe event
-     *
-     * @param {TouchEvent} e The touch event
-     * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
-     */
-    handleSwipe(i, a) {
-      this.enableSwipe && (a === "left" ? this.next(i) : a === "right" && this.previous(i));
-    },
-    /**
-     * Toggle the slideshow state
-     */
-    togglePlayPause() {
-      this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
-    },
-    /**
-     * Reset the slideshow timer and keep going if it was on
-     */
-    resetSlideshow() {
-      this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
-        this.togglePlayPause();
-      });
-    },
-    /**
-     * Handle the slideshow timer and next event
-     */
-    handleSlideshow() {
-      this.playing = !0, this.hasNext ? this.slideshowTimeout = new x(() => {
-        this.next(), this.handleSlideshow();
-      }, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
-    },
-    /**
-     * Clear slideshowTimeout if ongoing
-     */
-    clearSlideshowTimeout() {
-      this.slideshowTimeout && this.slideshowTimeout.clear();
-    },
-    /**
-     * Add focus trap for accessibility.
-     */
-    async useFocusTrap() {
-      if (!this.showModal || this.focusTrap)
-        return;
-      const i = this.$refs.mask;
-      await this.$nextTick();
-      const a = {
-        allowOutsideClick: !0,
-        fallbackFocus: i,
-        trapStack: m.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,
-        setReturnFocus: this.setReturnFocus
-      };
-      this.focusTrap = b.createFocusTrap([i, ...this.additionalTrapElements], a), this.focusTrap.activate();
-    },
-    clearFocusTrap() {
-      var i;
-      this.focusTrap && ((i = this.focusTrap) == null || i.deactivate(), this.focusTrap = null);
-    }
-  }
-}, Y = (i) => (e.pushScopeId("data-v-7c811920"), i = i(), e.popScopeId(), i), $ = ["aria-labelledby", "aria-describedby"], ee = { class: "modal-header" }, te = ["id"], ie = { class: "icons-menu" }, oe = { class: "hidden-visually" }, ae = {
-  key: 2,
-  class: "progress-ring",
-  height: "50",
-  width: "50"
-}, ne = /* @__PURE__ */ Y(() => /* @__PURE__ */ e.createElementVNode("circle", {
-  class: "progress-ring__circle",
-  stroke: "white",
-  "stroke-width": "2",
-  fill: "transparent",
-  r: "15",
-  cx: "25",
-  cy: "25"
-}, null, -1)), se = [
-  ne
-], le = ["id"], re = { class: "modal-container__content" };
-function ce(i, a, t, r, n, o) {
-  const l = e.resolveComponent("Play"), p = e.resolveComponent("Pause"), y = e.resolveComponent("NcActions"), h = e.resolveComponent("Close"), c = e.resolveComponent("NcButton"), _ = e.resolveComponent("ChevronLeft"), w = e.resolveComponent("ChevronRight"), k = e.resolveDirective("tooltip");
-  return e.openBlock(), e.createBlock(e.Transition, {
-    name: "fade",
-    appear: "",
-    onAfterEnter: o.useFocusTrap,
-    onBeforeLeave: o.clearFocusTrap
-  }, {
-    default: e.withCtx(() => [
-      e.withDirectives(e.createElementVNode("div", {
-        ref: "mask",
-        class: e.normalizeClass(["modal-mask", { "modal-mask--dark": t.dark || !t.closeButtonContained || t.hasPrevious || t.hasNext }]),
-        style: e.normalizeStyle(o.cssVariables),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": "modal-name-" + n.randId,
-        "aria-describedby": "modal-description-" + n.randId,
-        tabindex: "-1"
-      }, [
-        e.createVNode(e.Transition, {
-          name: "fade-visibility",
-          appear: ""
-        }, {
-          default: e.withCtx(() => [
-            e.createElementVNode("div", ee, [
-              t.name.trim() !== "" ? (e.openBlock(), e.createElementBlock("h2", {
-                key: 0,
-                id: "modal-name-" + n.randId,
-                class: "modal-name"
-              }, e.toDisplayString(t.name), 9, te)) : e.createCommentVNode("", !0),
-              e.createElementVNode("div", ie, [
-                t.hasNext && t.enableSlideshow ? e.withDirectives((e.openBlock(), e.createElementBlock("button", {
-                  key: 0,
-                  class: e.normalizeClass([{ "play-pause-icons--paused": t.slideshowPaused }, "play-pause-icons"]),
-                  type: "button",
-                  onClick: a[0] || (a[0] = (...u) => o.togglePlayPause && o.togglePlayPause(...u))
-                }, [
-                  n.playing ? (e.openBlock(), e.createBlock(p, {
-                    key: 1,
-                    size: n.iconSize,
-                    class: "play-pause-icons__pause"
-                  }, null, 8, ["size"])) : (e.openBlock(), e.createBlock(l, {
-                    key: 0,
-                    size: n.iconSize,
-                    class: "play-pause-icons__play"
-                  }, null, 8, ["size"])),
-                  e.createElementVNode("span", oe, e.toDisplayString(o.playPauseName), 1),
-                  n.playing ? (e.openBlock(), e.createElementBlock("svg", ae, se)) : e.createCommentVNode("", !0)
-                ], 2)), [
-                  [
-                    k,
-                    o.playPauseName,
-                    void 0,
-                    { auto: !0 }
-                  ]
-                ]) : e.createCommentVNode("", !0),
-                e.createVNode(y, {
-                  class: "header-actions",
-                  inline: t.inlineActions
-                }, {
-                  default: e.withCtx(() => [
-                    e.renderSlot(i.$slots, "actions", {}, void 0, !0)
-                  ]),
-                  _: 3
-                }, 8, ["inline"]),
-                t.canClose && !t.closeButtonContained ? (e.openBlock(), e.createBlock(c, {
-                  key: 1,
-                  "aria-label": o.closeButtonAriaLabel,
-                  class: "header-close",
-                  type: "tertiary",
-                  onClick: o.close
-                }, {
-                  icon: e.withCtx(() => [
-                    e.createVNode(h, { size: n.iconSize }, null, 8, ["size"])
-                  ]),
-                  _: 1
-                }, 8, ["aria-label", "onClick"])) : e.createCommentVNode("", !0)
-              ])
-            ])
-          ]),
-          _: 3
-        }),
-        e.createVNode(e.Transition, {
-          name: o.modalTransitionName,
-          appear: ""
-        }, {
-          default: e.withCtx(() => [
-            e.withDirectives(e.createElementVNode("div", {
-              class: e.normalizeClass([[
-                "modal-wrapper--".concat(t.size),
-                { "modal-wrapper--spread-navigation": t.spreadNavigation }
-              ], "modal-wrapper"]),
-              onMousedown: a[1] || (a[1] = e.withModifiers((...u) => o.handleClickModalWrapper && o.handleClickModalWrapper(...u), ["self"]))
-            }, [
-              e.createVNode(e.Transition, {
-                name: "fade-visibility",
-                appear: ""
-              }, {
-                default: e.withCtx(() => [
-                  e.withDirectives(e.createVNode(c, {
-                    type: "tertiary-no-background",
-                    class: "prev",
-                    "aria-label": o.prevButtonAriaLabel,
-                    onClick: o.previous
-                  }, {
-                    icon: e.withCtx(() => [
-                      e.createVNode(_, { size: 40 })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"]), [
-                    [e.vShow, t.hasPrevious]
-                  ])
-                ]),
-                _: 1
-              }),
-              e.createElementVNode("div", {
-                id: "modal-description-" + n.randId,
-                class: "modal-container"
-              }, [
-                t.canClose && t.closeButtonContained ? (e.openBlock(), e.createBlock(c, {
-                  key: 0,
-                  type: "tertiary",
-                  class: "modal-container__close",
-                  "aria-label": o.closeButtonAriaLabel,
-                  onClick: o.close
-                }, {
-                  icon: e.withCtx(() => [
-                    e.createVNode(h, { size: 20 })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label", "onClick"])) : e.createCommentVNode("", !0),
-                e.createElementVNode("div", re, [
-                  e.renderSlot(i.$slots, "default", {}, void 0, !0)
-                ])
-              ], 8, le),
-              e.createVNode(e.Transition, {
-                name: "fade-visibility",
-                appear: ""
-              }, {
-                default: e.withCtx(() => [
-                  e.withDirectives(e.createVNode(c, {
-                    type: "tertiary-no-background",
-                    class: "next",
-                    "aria-label": o.nextButtonAriaLabel,
-                    onClick: o.next
-                  }, {
-                    icon: e.withCtx(() => [
-                      e.createVNode(w, { size: 40 })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"]), [
-                    [e.vShow, t.hasNext]
-                  ])
-                ]),
-                _: 1
-              })
-            ], 34), [
-              [e.vShow, o.showModal]
-            ])
-          ]),
-          _: 3
-        }, 8, ["name"])
-      ], 14, $), [
-        [e.vShow, o.showModal]
-      ])
-    ]),
-    _: 3
-  }, 8, ["onAfterEnter", "onBeforeLeave"]);
-}
-const f = /* @__PURE__ */ d._export_sfc(X, [["render", ce], ["__scopeId", "data-v-7c811920"]]);
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-g.ScopeComponent(f);
-module.exports = f;