@nextcloud/vue
Version:
Nextcloud vue components
124 lines (123 loc) • 10.1 kB
JavaScript
import "../assets/index44.css";
import { S as l } from "../chunks/ScopeComponent-dbcd0e07.mjs";
import { g as r } from "../chunks/focusTrap-173aba65.mjs";
import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
import { G as c } from "../chunks/GenRandomId-1e1b509a.mjs";
import { l as d } from "../chunks/l10n-05baf7da.mjs";
import u from "./NcActions.mjs";
import h from "./NcButton.mjs";
import "../Directives/Tooltip.mjs";
import p from "vue-material-design-icons/ChevronLeft.vue";
import m from "vue-material-design-icons/ChevronRight.vue";
import f from "vue-material-design-icons/Close.vue";
import y from "vue-material-design-icons/Pause.vue";
import w from "vue-material-design-icons/Play.vue";
import { createFocusTrap as v } from "focus-trap";
import { useSwipe as g } from "@vueuse/core";
import { n as T } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
import { VTooltip as b } from "floating-vue";
function C(e, t) {
let s, n, o = t, a;
this.start = function() {
a = !0, n = /* @__PURE__ */ new Date(), s = setTimeout(e, o);
}, this.pause = function() {
a = !1, clearTimeout(s), o -= /* @__PURE__ */ new Date() - n;
}, this.clear = function() {
a = !1, clearTimeout(s), o = 0;
}, this.getTimeLeft = function() {
return a && (this.pause(), this.start()), o;
}, this.getStateRunning = function() {
return a;
}, this.start();
}
const S = { name: "NcModal", components: { NcActions: u, ChevronLeft: p, ChevronRight: m, Close: f, Pause: y, Play: w, NcButton: h }, directives: { tooltip: b }, mixins: [d], props: { name: { type: String, default: "" }, hasPrevious: { type: Boolean, default: !1 }, hasNext: { type: Boolean, default: !1 }, outTransition: { type: Boolean, default: !1 }, enableSlideshow: { type: Boolean, default: !1 }, slideshowDelay: { type: Number, default: 5e3 }, slideshowPaused: { type: Boolean, default: !1 }, enableSwipe: { type: Boolean, default: !0 }, spreadNavigation: { type: Boolean, default: !1 }, size: { type: String, default: "normal", validator: (e) => ["small", "normal", "large", "full"].includes(e) }, canClose: { type: Boolean, default: !0 }, closeOnClickOutside: { type: Boolean, default: !0 }, dark: { type: Boolean, default: !1 }, container: { type: [String, null], default: "body" }, closeButtonContained: { type: Boolean, default: !0 }, additionalTrapElements: { type: Array, default: () => [] }, inlineActions: { type: Number, default: 0 }, show: { type: Boolean, default: void 0 } }, emits: ["previous", "next", "close", "update:show"], data() {
return { mc: null, playing: !1, slideshowTimeout: null, iconSize: 24, focusTrap: null, randId: c(), internalShow: !0 };
}, computed: { showModal() {
return this.show === void 0 ? this.internalShow : this.show;
}, modalTransitionName() {
return `modal-${this.outTransition ? "out" : "in"}`;
}, playPauseName() {
return this.playing ? i("Pause slideshow") : i("Start slideshow");
}, cssVariables() {
return { "--slideshow-duration": this.slideshowDelay + "ms", "--icon-size": this.iconSize + "px" };
}, closeButtonAriaLabel() {
return i("Close modal");
}, prevButtonAriaLabel() {
return i("Previous");
}, nextButtonAriaLabel() {
return i("Next");
} }, watch: { slideshowPaused(e) {
this.slideshowTimeout && (e ? this.slideshowTimeout.pause() : this.slideshowTimeout.start());
}, additionalTrapElements(e) {
if (this.focusTrap) {
const t = this.$refs.mask;
this.focusTrap.updateContainerElements([t, ...e]);
}
} }, beforeMount() {
window.addEventListener("keydown", this.handleKeydown);
}, beforeDestroy() {
window.removeEventListener("keydown", this.handleKeydown), this.mc.stop();
}, mounted() {
this.useFocusTrap(), this.mc = g(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));
}, destroyed() {
this.clearFocusTrap(), this.$el.remove();
}, methods: { previous(e) {
this.hasPrevious && (e && this.resetSlideshow(), this.$emit("previous", e));
}, next(e) {
this.hasNext && (e && this.resetSlideshow(), this.$emit("next", e));
}, close(e) {
this.canClose && (this.internalShow = !1, this.$emit("update:show", !1), setTimeout(() => {
this.$emit("close", e);
}, 300));
}, handleClickModalWrapper(e) {
this.closeOnClickOutside && this.close(e);
}, handleKeydown(e) {
if (e.key === "Escape")
return this.close(e);
const t = { ArrowLeft: this.previous, ArrowRight: this.next };
if (t[e.key])
return document.activeElement && !this.$el.contains(document.activeElement) ? void 0 : t[e.key](e);
}, handleSwipe(e, t) {
this.enableSwipe && (t === "left" ? this.next(e) : t === "right" && this.previous(e));
}, togglePlayPause() {
this.playing = !this.playing, this.playing ? this.handleSlideshow() : this.clearSlideshowTimeout();
}, resetSlideshow() {
this.playing = !this.playing, this.clearSlideshowTimeout(), this.$nextTick(function() {
this.togglePlayPause();
});
}, handleSlideshow() {
this.playing = !0, this.hasNext ? this.slideshowTimeout = new C(() => {
this.next(), this.handleSlideshow();
}, this.slideshowDelay) : (this.playing = !1, this.clearSlideshowTimeout());
}, clearSlideshowTimeout() {
this.slideshowTimeout && this.slideshowTimeout.clear();
}, async useFocusTrap() {
if (!this.showModal || this.focusTrap)
return;
const e = this.$refs.mask;
await this.$nextTick();
const t = { allowOutsideClick: !0, fallbackFocus: e, trapStack: r(), escapeDeactivates: !1 };
this.focusTrap = v([e, ...this.additionalTrapElements], t), this.focusTrap.activate();
}, clearFocusTrap() {
var e;
this.focusTrap && ((e = this.focusTrap) == null || e.deactivate(), this.focusTrap = null);
} } };
var k = function() {
var e = this, t = e._self._c;
return t("transition", { attrs: { name: "fade", appear: "" }, on: { "after-enter": e.useFocusTrap, "before-leave": e.clearFocusTrap } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], ref: "mask", staticClass: "modal-mask", class: { "modal-mask--dark": e.dark }, style: e.cssVariables, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + e.randId, "aria-describedby": "modal-description-" + e.randId, tabindex: "-1" } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? t("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), t("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? t("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: e.playPauseName, expression: "playPauseName", modifiers: { auto: !0 } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": e.slideshowPaused }, attrs: { type: "button" }, on: { click: e.togglePlayPause } }, [e.playing ? t("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : t("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), t("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? t("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [t("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), t("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? t("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
return [t("Close", { attrs: { size: e.iconSize } })];
}, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [`modal-wrapper--${e.size}`, e.spreadNavigation ? "modal-wrapper--spread-navigation" : ""], on: { mousedown: function(s) {
return s.target !== s.currentTarget ? null : e.handleClickModalWrapper.apply(null, arguments);
} } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasPrevious, expression: "hasPrevious" }], staticClass: "prev", class: { invisible: !e.hasPrevious }, attrs: { type: "tertiary-no-background", "aria-label": e.prevButtonAriaLabel }, on: { click: e.previous }, scopedSlots: e._u([{ key: "icon", fn: function() {
return [t("ChevronLeft", { attrs: { size: 40 } })];
}, proxy: !0 }]) })], 1), t("div", { staticClass: "modal-container", attrs: { id: "modal-description-" + e.randId } }, [e.canClose && e.closeButtonContained ? t("NcButton", { staticClass: "modal-container__close", attrs: { type: "tertiary", "aria-label": e.closeButtonAriaLabel }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
return [t("Close", { attrs: { size: 20 } })];
}, proxy: !0 }], null, !1, 2121748766) }) : e._e(), t("div", { staticClass: "modal-container__content" }, [e._t("default")], 2)], 1), t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasNext, expression: "hasNext" }], staticClass: "next", class: { invisible: !e.hasNext }, attrs: { type: "tertiary-no-background", "aria-label": e.nextButtonAriaLabel }, on: { click: e.next }, scopedSlots: e._u([{ key: "icon", fn: function() {
return [t("ChevronRight", { attrs: { size: 40 } })];
}, proxy: !0 }]) })], 1)], 1)])], 1)]);
}, x = [], N = T(S, k, x, !1, null, "27c27b41", null, null);
const B = N.exports;
l(B);
export {
B as default
};