@nextcloud/vue
Version:
Nextcloud vue components
61 lines (60 loc) • 4.08 kB
JavaScript
import "../assets/index58.css";
import { vOnClickOutside as r } from "@vueuse/components";
import { createFocusTrap as o } from "focus-trap";
import { G as s } from "../chunks/GenRandomId-1e1b509a.mjs";
import n from "../Mixins/clickOutsideOptions.mjs";
import "../chunks/IsMobileState-e1fe5f58.mjs";
import "@nextcloud/router";
/* empty css */import { n as a } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
import "linkify-string";
import "escape-html";
import "striptags";
import "vue";
import "@nextcloud/auth";
import "@nextcloud/axios";
import "@nextcloud/capabilities";
import { g as d } from "../chunks/focusTrap-173aba65.mjs";
const c = { name: "NcHeaderMenu", directives: { ClickOutside: r }, mixins: [n], props: { id: { type: String, required: !0 }, ariaLabel: { type: String, default: "" }, open: { type: Boolean, default: !1 }, isNav: { type: Boolean, default: !1 }, description: { type: String, default: null } }, emits: ["close", "closed", "open", "opened", "update:open", "cancel"], data() {
var e, t, i;
return { focusTrap: null, opened: this.open, shortcutsDisabled: (i = (t = (e = window.OCP) == null ? void 0 : e.Accessibility) == null ? void 0 : t.disableKeyboardShortcuts) == null ? void 0 : i.call(t), triggerId: s(), descriptionId: s() };
}, computed: { wrapperTag() {
return this.isNav ? "nav" : "div";
}, clickOutsideConfig() {
return [this.closeMenu, this.clickOutsideOptions];
} }, watch: { open(e) {
e ? this.openMenu() : this.closeMenu();
} }, mounted() {
document.addEventListener("keydown", this.onKeyDown);
}, beforeDestroy() {
document.removeEventListener("keydown", this.onKeyDown);
}, methods: { toggleMenu() {
this.opened ? this.closeMenu() : this.openMenu();
}, closeMenu(e = !1) {
this.opened = !1, this.$emit(e ? "cancel" : "close"), this.$emit("update:open", !1), this.clearFocusTrap(), this.$nextTick(() => {
this.$emit("closed");
});
}, openMenu() {
this.opened = !0, this.$emit("open"), this.$emit("update:open", !0), this.$nextTick(() => {
this.useFocusTrap(), this.$emit("opened");
});
}, onKeyDown(e) {
this.shortcutsDisabled || !this.opened || e.key === "Escape" && (e.preventDefault(), this.closeMenu(!0));
}, async useFocusTrap() {
if (this.focusTrap)
return;
const e = this.$refs.content;
this.focusTrap = o(e, { allowOutsideClick: !0, trapStack: d(), fallbackFocus: this.$refs.trigger }), this.focusTrap.activate();
}, clearFocusTrap() {
var e;
(e = this.focusTrap) == null || e.deactivate(), this.focusTrap = null;
} } };
var p = function() {
var e = this, t = e._self._c;
return t(e.wrapperTag, { directives: [{ name: "click-outside", rawName: "v-click-outside", value: e.clickOutsideConfig, expression: "clickOutsideConfig" }], tag: "component", staticClass: "header-menu", class: { "header-menu--opened": e.opened }, attrs: { id: e.id, "aria-labelledby": e.isNav ? e.triggerId : null } }, [t("button", { ref: "trigger", staticClass: "header-menu__trigger button-vue", attrs: { id: e.triggerId, "aria-label": e.ariaLabel, "aria-describedby": e.description ? e.descriptionId : null, "aria-controls": `header-menu-${e.id}`, "aria-expanded": e.opened.toString() }, on: { click: function(i) {
return i.preventDefault(), e.toggleMenu.apply(null, arguments);
} } }, [e._t("trigger")], 2), e.description ? t("span", { staticClass: "header-menu__description hidden-visually", attrs: { id: e.descriptionId } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__carret" }), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { id: `header-menu-${e.id}` } }, [t("div", { ref: "content", staticClass: "header-menu__content" }, [e._t("default")], 2)])]);
}, u = [], l = a(c, p, u, !1, null, "ca4dc36b", null, null);
const F = l.exports;
export {
F as default
};