@nextcloud/vue 9.0.0-alpha.4 → 9.0.0-alpha.6

package/dist/components/NcModal/index.mjs

@@ -0,0 +1,775 @@
+import '../../assets/index-BHBrLd2w.css';
+import { S as ScopeComponent } from "../../chunks/ScopeComponent-77f9B57X.mjs";
+import { useSwipe } from "@vueuse/core";
+import { createFocusTrap } from "focus-trap";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, warn, resolveComponent, resolveDirective, createBlock, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createVNode, renderSlot, withModifiers, vShow } from "vue";
+import { g as getTrapStack } from "../../chunks/focusTrap-Cecv_gjR.mjs";
+import { r as register, D as t33, E as t17, a as t } from "../../chunks/_l10n-D7WwrqS-.mjs";
+import { G as GenRandomId } from "../../chunks/GenRandomId-CMooMQt0.mjs";
+import { N as NcActions } from "../../chunks/NcActions-BJ703bdY.mjs";
+import { N as NcButton } from "../../chunks/NcButton-C3eisBbK.mjs";
+import "../../directives/Tooltip/index.mjs";
+import { C as ChevronLeftIcon } from "../../chunks/ChevronLeft-uQipmOWv.mjs";
+import { C as ChevronRight } from "../../chunks/ChevronRight-D4KvRLyO.mjs";
+import { C as Close } from "../../chunks/Close-9bmgDVZE.mjs";
+import { _ as _export_sfc } from "../../chunks/_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { VTooltip } from "floating-vue";
+register(t17, t33);
+function timer(callback, delay) {
+  let id;
+  let started;
+  let remaining = delay;
+  let running;
+  this.start = function() {
+    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 _sfc_main$2 = {
+  name: "PauseIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+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: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$2, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$2);
+}
+const Pause = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
+  name: "PlayIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+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: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$1);
+}
+const Play = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "NcModal",
+  components: {
+    NcActions,
+    ChevronLeft: ChevronLeftIcon,
+    ChevronRight,
+    Close,
+    Pause,
+    Play,
+    NcButton
+  },
+  directives: {
+    tooltip: VTooltip
+  },
+  props: {
+    /**
+     * Name to be shown with the modal
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Declare if a previous slide is available
+     */
+    hasPrevious: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if a next slide is available
+     */
+    hasNext: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     */
+    outTransition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if the slideshow functionality should be enabled
+     */
+    enableSlideshow: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare the slide interval
+     */
+    slideshowDelay: {
+      type: Number,
+      default: 5e3
+    },
+    /**
+     * Allow to pause an ongoing slideshow
+     */
+    slideshowPaused: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Enable swipe between slides
+     */
+    enableSwipe: {
+      type: Boolean,
+      default: true
+    },
+    spreadNavigation: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: (size) => {
+        return ["small", "normal", "large", "full"].includes(size);
+      }
+    },
+    /**
+     * Declare if the modal can be closed
+     */
+    canClose: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Close the modal if the user clicked outside the modal
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Makes the modal backdrop opaque if true
+     * Will be overwritten if some buttons are shown outside
+     */
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Set light backdrop. Makes the modal header appear light.
+     */
+    lightBackdrop: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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: true
+    },
+    /**
+     * 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
+    },
+    /**
+     * Id of the element that labels the dialog (the name)
+     * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.
+     */
+    labelId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * 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: false,
+      slideshowTimeout: null,
+      iconSize: 24,
+      focusTrap: null,
+      externalFocusTrapStack: [],
+      randId: GenRandomId(),
+      internalShow: true
+    };
+  },
+  computed: {
+    /**
+     * ID of the element to label the modal
+     */
+    modalLabelId() {
+      return this.labelId || `modal-name-${this.randId}`;
+    },
+    showModal() {
+      return this.show === void 0 ? this.internalShow : this.show;
+    },
+    modalTransitionName() {
+      return `modal-${this.outTransition ? "out" : "in"}`;
+    },
+    playPauseName() {
+      return this.playing ? t("Pause slideshow") : t("Start slideshow");
+    },
+    cssVariables() {
+      return {
+        "--slideshow-duration": this.slideshowDelay + "ms",
+        "--icon-size": this.iconSize + "px"
+      };
+    },
+    closeButtonAriaLabel() {
+      return t("Close");
+    },
+    prevButtonAriaLabel() {
+      return t("Previous");
+    },
+    nextButtonAriaLabel() {
+      return t("Next");
+    }
+  },
+  watch: {
+    /**
+     * Handle play/pause of an ongoing slideshow
+     *
+     * @param {boolean} paused is the player paused
+     */
+    slideshowPaused(paused) {
+      if (this.slideshowTimeout) {
+        if (paused) {
+          this.slideshowTimeout.pause();
+        } else {
+          this.slideshowTimeout.start();
+        }
+      }
+    },
+    additionalTrapElements(elements) {
+      if (this.focusTrap) {
+        const contentContainer = this.$refs.mask;
+        this.focusTrap.updateContainerElements([contentContainer, ...elements]);
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener("keydown", this.handleKeydown);
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.handleKeydown);
+    this.mc.stop();
+  },
+  mounted() {
+    if (!this.name && !this.labelId) {
+      warn("[NcModal] You need either set the name or set a `labelId` for accessibility.");
+    }
+    this.useFocusTrap();
+    this.mc = useSwipe(this.$refs.mask, {
+      onSwipeEnd: this.handleSwipe
+    });
+    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();
+  },
+  methods: {
+    t,
+    // Events emitters
+    previous(event) {
+      if (this.hasPrevious) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("previous", event);
+      }
+    },
+    next(event) {
+      if (this.hasNext) {
+        if (event) {
+          this.resetSlideshow();
+        }
+        this.$emit("next", event);
+      }
+    },
+    close(data) {
+      if (this.canClose) {
+        this.internalShow = false;
+        this.$emit("update:show", false);
+        setTimeout(() => {
+          this.$emit("close", data);
+        }, 300);
+      }
+    },
+    /**
+     * Handle click on modal wrapper
+     * If `closeOnClickOutside` is set the modal will be closed
+     *
+     * @param {MouseEvent} event The click event
+     */
+    handleClickModalWrapper(event) {
+      if (this.closeOnClickOutside) {
+        this.close(event);
+      }
+    },
+    /**
+     * @param {KeyboardEvent} event - keyboard event
+     */
+    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 arrowHandlers = {
+        ArrowLeft: this.previous,
+        ArrowRight: this.next
+      };
+      if (arrowHandlers[event.key]) {
+        if (document.activeElement && !this.$el.contains(document.activeElement)) {
+          return;
+        }
+        return arrowHandlers[event.key](event);
+      }
+    },
+    /**
+     * handle the swipe event
+     *
+     * @param {TouchEvent} e The touch event
+     * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction
+     */
+    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;
+      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.togglePlayPause();
+      });
+    },
+    /**
+     * Handle the slideshow timer and next event
+     */
+    handleSlideshow() {
+      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() {
+      if (this.slideshowTimeout) {
+        this.slideshowTimeout.clear();
+      }
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (!this.showModal || this.focusTrap) {
+        return;
+      }
+      const contentContainer = this.$refs.mask;
+      await this.$nextTick();
+      const options = {
+        allowOutsideClick: true,
+        fallbackFocus: contentContainer,
+        trapStack: getTrapStack(),
+        // Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap.
+        // Focus trap is deactivated on modal close anyway.
+        escapeDeactivates: false,
+        setReturnFocus: this.setReturnFocus
+      };
+      this.externalFocusTrapStack = [...options.trapStack];
+      for (const trap of this.externalFocusTrapStack) {
+        trap.deactivate();
+      }
+      this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options);
+      this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      if (!this.focusTrap) {
+        return;
+      }
+      this.focusTrap?.deactivate();
+      this.focusTrap = null;
+      for (const trap of this.externalFocusTrapStack) {
+        trap.activate();
+      }
+      this.externalFocusTrapStack = [];
+    }
+  }
+};
+const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_2 = ["data-theme-light", "data-theme-dark"];
+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"
+};
+const _hoisted_7 = ["id"];
+const _hoisted_8 = { 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: $options.useFocusTrap,
+    onBeforeLeave: $options.clearFocusTrap
+  }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
+        ref: "mask",
+        class: normalizeClass(["modal-mask", {
+          "modal-mask--opaque": $props.dark || !$props.closeButtonContained || $props.hasPrevious || $props.hasNext,
+          "modal-mask--light": $props.lightBackdrop
+        }]),
+        style: normalizeStyle($options.cssVariables),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": $options.modalLabelId,
+        "aria-describedby": "modal-description-" + $data.randId,
+        tabindex: "-1"
+      }, [
+        createVNode(Transition, {
+          name: "fade-visibility",
+          appear: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: "modal-header",
+              "data-theme-light": $props.lightBackdrop,
+              "data-theme-dark": !$props.lightBackdrop
+            }, [
+              $props.name.trim() !== "" ? (openBlock(), createElementBlock("h2", {
+                key: 0,
+                id: "modal-name-" + $data.randId,
+                class: "modal-header__name"
+              }, toDisplayString($props.name), 9, _hoisted_3)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                $props.hasNext && $props.enableSlideshow ? withDirectives((openBlock(), createElementBlock("button", {
+                  key: 0,
+                  class: normalizeClass([{ "play-pause-icons--paused": $props.slideshowPaused }, "play-pause-icons"]),
+                  type: "button",
+                  onClick: _cache[0] || (_cache[0] = (...args) => $options.togglePlayPause && $options.togglePlayPause(...args))
+                }, [
+                  !$data.playing ? (openBlock(), createBlock(_component_Play, {
+                    key: 0,
+                    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"])),
+                  createElementVNode("span", _hoisted_5, toDisplayString($options.playPauseName), 1),
+                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_6, _cache[2] || (_cache[2] = [
+                    createElementVNode("circle", {
+                      class: "progress-ring__circle",
+                      stroke: "white",
+                      "stroke-width": "2",
+                      fill: "transparent",
+                      r: "15",
+                      cx: "25",
+                      cy: "25"
+                    }, null, -1)
+                  ]))) : createCommentVNode("", true)
+                ], 2)), [
+                  [
+                    _directive_tooltip,
+                    $options.playPauseName,
+                    void 0,
+                    { auto: true }
+                  ]
+                ]) : createCommentVNode("", true),
+                createVNode(_component_NcActions, {
+                  class: "header-actions",
+                  inline: $props.inlineActions
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+                  ]),
+                  _: 3
+                }, 8, ["inline"]),
+                $props.canClose && !$props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
+                  key: 1,
+                  "aria-label": $options.closeButtonAriaLabel,
+                  class: "header-close",
+                  type: "tertiary",
+                  onClick: $options.close
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: $data.iconSize }, null, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
+              ])
+            ], 8, _hoisted_2)
+          ]),
+          _: 3
+        }),
+        createVNode(Transition, {
+          name: $options.modalTransitionName,
+          appear: ""
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: normalizeClass([[
+                `modal-wrapper--${$props.size}`,
+                { "modal-wrapper--spread-navigation": $props.spreadNavigation }
+              ], "modal-wrapper"]),
+              onMousedown: _cache[1] || (_cache[1] = withModifiers((...args) => $options.handleClickModalWrapper && $options.handleClickModalWrapper(...args), ["self"]))
+            }, [
+              createVNode(Transition, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
+                    type: "tertiary-no-background",
+                    class: "prev",
+                    "aria-label": $options.prevButtonAriaLabel,
+                    onClick: $options.previous
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronLeft, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [vShow, $props.hasPrevious]
+                  ])
+                ]),
+                _: 1
+              }),
+              createElementVNode("div", {
+                id: "modal-description-" + $data.randId,
+                class: "modal-container"
+              }, [
+                createElementVNode("div", _hoisted_8, [
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ]),
+                $props.canClose && $props.closeButtonContained ? (openBlock(), createBlock(_component_NcButton, {
+                  key: 0,
+                  type: "tertiary",
+                  class: "modal-container__close",
+                  "aria-label": $options.closeButtonAriaLabel,
+                  onClick: $options.close
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_Close, { size: 20 })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
+              ], 8, _hoisted_7),
+              createVNode(Transition, {
+                name: "fade-visibility",
+                appear: ""
+              }, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_component_NcButton, {
+                    type: "tertiary-no-background",
+                    class: "next",
+                    "aria-label": $options.nextButtonAriaLabel,
+                    onClick: $options.next
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_ChevronRight, { size: 40 })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]), [
+                    [vShow, $props.hasNext]
+                  ])
+                ]),
+                _: 1
+              })
+            ], 34), [
+              [vShow, $options.showModal]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 14, _hoisted_1), [
+        [vShow, $options.showModal]
+      ])
+    ]),
+    _: 3
+  }, 8, ["onAfterEnter", "onBeforeLeave"]);
+}
+const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4e3e69e2"]]);
+ScopeComponent(NcModal);
+export {
+  NcModal as default
+};