@nextcloud/vue 9.3.0 → 9.3.2

package/dist/chunks/NcModal-DZtBQM1y.mjs

@@ -1,778 +0,0 @@
-import '../assets/NcModal-Dyub1-f2.css';
-import { c as mdiChevronRight, x as mdiChevronLeft } from "./mdi-HQ-WBPmL.mjs";
-import { useSwipe } from "@vueuse/core";
-import { createFocusTrap } from "focus-trap";
-import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, warn, resolveComponent, createBlock, Transition, withCtx, withDirectives, normalizeStyle, normalizeClass, createVNode, renderSlot, withModifiers, vShow } from "vue";
-import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { r as register, o as t36, p as t19, a as t } from "./_l10n-CWKr1fUH.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { N as NcActions } from "./NcActions-B0kM6AYb.mjs";
-import { N as NcButton } from "./NcButton-ZNHdqKQl.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
-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]]);
-register(t19, t36);
-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 = {
-  name: "NcModal",
-  components: {
-    Close: IconClose,
-    Pause,
-    Play,
-    NcActions,
-    NcButton,
-    NcIconSvgWrapper
-  },
-  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
-    },
-    /**
-     * Disable swipe between slides
-     */
-    disableSwipe: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Enable spread navigation
-     */
-    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);
-      }
-    },
-    /**
-     * Do not show the close button for the dialog.
-     *
-     * @default false
-     */
-    noClose: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Close the modal if the user clicked outside the modal
-     * Only relevant if `noClose` is not set.
-     */
-    closeOnClickOutside: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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 `true` if you want the modal 'close' button to be displayed
-     * outside the modal boundaries, in the top right corner of the window.
-     *
-     * @default false
-     * @since 8.25.0
-     */
-    closeButtonOutside: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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
-    },
-    /**
-     * The current open property of the modal
-     */
-    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: [Boolean, HTMLElement, SVGElement, String]
-    }
-  },
-  emits: [
-    "previous",
-    "next",
-    "close",
-    "update:show"
-  ],
-  setup() {
-    return {
-      mdiChevronLeft,
-      mdiChevronRight
-    };
-  },
-  data() {
-    return {
-      mc: null,
-      playing: false,
-      slideshowTimeout: null,
-      iconSize: 24,
-      focusTrap: null,
-      randId: createElementId(),
-      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.noClose) {
-        return;
-      }
-      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.disableSwipe) {
-        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.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options);
-      this.focusTrap.activate();
-    },
-    clearFocusTrap() {
-      if (!this.focusTrap) {
-        return;
-      }
-      this.focusTrap?.deactivate();
-      this.focusTrap = null;
-    }
-  }
-};
-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 = ["title"];
-const _hoisted_6 = { class: "hidden-visually" };
-const _hoisted_7 = {
-  key: 2,
-  class: "progress-ring",
-  height: "50",
-  width: "50"
-};
-const _hoisted_8 = ["id"];
-const _hoisted_9 = { 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_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
-  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.closeButtonOutside || $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 ? (openBlock(), createElementBlock("button", {
-                  key: 0,
-                  class: normalizeClass(["play-pause-icons", { "play-pause-icons--paused": $props.slideshowPaused }]),
-                  title: $options.playPauseName,
-                  type: "button",
-                  onClick: _cache[0] || (_cache[0] = (...args) => $options.togglePlayPause && $options.togglePlayPause(...args))
-                }, [
-                  !$data.playing ? (openBlock(), createBlock(_component_Play, {
-                    key: 0,
-                    class: "play-pause-icons__play",
-                    size: $data.iconSize
-                  }, null, 8, ["size"])) : (openBlock(), createBlock(_component_Pause, {
-                    key: 1,
-                    class: "play-pause-icons__pause",
-                    size: $data.iconSize
-                  }, null, 8, ["size"])),
-                  createElementVNode("span", _hoisted_6, toDisplayString($options.playPauseName), 1),
-                  $data.playing ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._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)
-                ], 10, _hoisted_5)) : createCommentVNode("", true),
-                createVNode(_component_NcActions, {
-                  class: "header-actions",
-                  inline: $props.inlineActions
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "actions", {}, void 0, true)
-                  ]),
-                  _: 3
-                }, 8, ["inline"]),
-                !$props.noClose && $props.closeButtonOutside ? (openBlock(), createBlock(_component_NcButton, {
-                  key: 1,
-                  "aria-label": $options.closeButtonAriaLabel,
-                  class: "header-close",
-                  variant: "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", [
-                `modal-wrapper--${$props.size}`,
-                { "modal-wrapper--spread-navigation": $props.spreadNavigation }
-              ]]),
-              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, {
-                    "aria-label": $options.prevButtonAriaLabel,
-                    class: "prev",
-                    variant: "tertiary-no-background",
-                    onClick: $options.previous
-                  }, {
-                    icon: withCtx(() => [
-                      createVNode(_component_NcIconSvgWrapper, {
-                        directional: "",
-                        path: $setup.mdiChevronLeft,
-                        size: 40
-                      }, null, 8, ["path"])
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"]), [
-                    [vShow, $props.hasPrevious]
-                  ])
-                ]),
-                _: 1
-              }),
-              createElementVNode("div", {
-                id: "modal-description-" + $data.randId,
-                class: "modal-container"
-              }, [
-                createElementVNode("div", _hoisted_9, [
-                  renderSlot(_ctx.$slots, "default", {}, void 0, true)
-                ]),
-                !$props.noClose && !$props.closeButtonOutside ? (openBlock(), createBlock(_component_NcButton, {
-                  key: 0,
-                  "aria-label": $options.closeButtonAriaLabel,
-                  class: "modal-container__close",
-                  variant: "tertiary",
-                  onClick: $options.close
-                }, {
-                  icon: withCtx(() => [
-                    createVNode(_component_Close, { size: 20 })
-                  ]),
-                  _: 1
-                }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
-              ], 8, _hoisted_8),
-              createVNode(Transition, {
-                name: "fade-visibility",
-                appear: ""
-              }, {
-                default: withCtx(() => [
-                  withDirectives(createVNode(_component_NcButton, {
-                    "aria-label": $options.nextButtonAriaLabel,
-                    class: "next",
-                    variant: "tertiary-no-background",
-                    onClick: $options.next
-                  }, {
-                    icon: withCtx(() => [
-                      createVNode(_component_NcIconSvgWrapper, {
-                        directional: "",
-                        path: $setup.mdiChevronRight,
-                        size: 40
-                      }, null, 8, ["path"])
-                    ]),
-                    _: 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-70dc2566"]]);
-export {
-  NcModal as N
-};
-//# sourceMappingURL=NcModal-DZtBQM1y.mjs.map