@nextcloud/vue
Version:
Nextcloud vue components
53 lines (52 loc) • 4 kB
JavaScript
import "../assets/index23.css";
import r from "./NcModal.mjs";
import d from "../Mixins/isMobile.mjs";
import { t as c } from "../chunks/l10n-9a5a6afc.mjs";
import p from "debounce";
import { n as h } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const m = { name: "NcAppSettingsDialog", components: { NcModal: r }, mixins: [d], props: { open: { type: Boolean, required: !0 }, showNavigation: { type: Boolean, default: !1 }, container: { type: String, default: "body" }, name: { type: String, default: "" }, additionalTrapElements: { type: Array, default: () => [] } }, emits: ["update:open"], data() {
return { selectedSection: "", linkClicked: !1, addedScrollListener: !1, scroller: null };
}, computed: { hasNavigation() {
return !(this.isMobile || !this.showNavigation);
}, settingsNavigationAriaLabel() {
return c("Settings navigation");
} }, mounted() {
this.selectedSection = this.$slots.default[0].componentOptions.propsData.id;
}, updated() {
this.$refs.settingsScroller && (this.scroller = this.$refs.settingsScroller, this.addedScrollListener || (this.scroller.addEventListener("scroll", this.handleScroll), this.addedScrollListener = !0));
}, methods: { getSettingsNavigation(t) {
const n = t.filter((e) => e.componentOptions).map((e) => {
var s, a;
return { id: (s = e.componentOptions.propsData) == null ? void 0 : s.id, name: (a = e.componentOptions.propsData) == null ? void 0 : a.name };
}), o = t.map((e) => e.name), i = t.map((e) => e.id);
return n.forEach((e, s) => {
const a = [...o], l = [...i];
if (a.splice(s, 1), l.splice(s, 1), a.includes(e.name))
throw new Error(`Duplicate section name found: ${e}. Settings navigation sections must have unique section names.`);
if (l.includes(e.id))
throw new Error(`Duplicate section id found: ${e}. Settings navigation sections must have unique section ids.`);
}), n;
}, handleSettingsNavigationClick(t) {
this.linkClicked = !0, document.getElementById("settings-section_" + t).scrollIntoView({ behavior: "smooth", inline: "nearest" }), this.selectedSection = t, setTimeout(() => {
this.linkClicked = !1;
}, 1e3);
}, handleCloseModal() {
this.$emit("update:open", !1), this.scroller.removeEventListener("scroll", this.handleScroll), this.addedScrollListener = !1, this.scroller.scrollTop = 0;
}, handleScroll() {
this.linkClicked || this.unfocusNavigationItem();
}, unfocusNavigationItem: p(function() {
this.selectedSection = "", document.activeElement.className.includes("navigation-list__link") && document.activeElement.blur();
}, 300), handleLinkKeydown(t, n) {
t.code === "Enter" && this.handleSettingsNavigationClick(n);
} }, render(t) {
const n = () => this.hasNavigation ? [t("div", { attrs: { class: "app-settings__navigation", role: "tablist", "aria-label": this.settingsNavigationAriaLabel } }, [t("ul", { attrs: { class: "navigation-list", role: "tablist" } }, this.getSettingsNavigation(this.$slots.default).map((i) => o(i)))])] : [], o = (i) => t("li", {}, [t("a", { class: { "navigation-list__link": !0, "navigation-list__link--active": i.id === this.selectedSection }, attrs: { role: "tab", "aria-selected": i.id === this.selectedSection, tabindex: "0" }, on: { click: () => this.handleSettingsNavigationClick(i.id), keydown: () => this.handleLinkKeydown(event, i.id) } }, i.name)]);
if (this.open)
return t("NcModal", { class: ["app-settings-modal"], attrs: { container: this.container, size: "large", additionalTrapElements: this.additionalTrapElements }, on: { close: () => {
this.handleCloseModal();
} } }, [t("div", { attrs: { class: "app-settings" } }, [t("h2", { attrs: { class: "app-settings__name" } }, this.name), t("div", { attrs: { class: "app-settings__wrapper" } }, [...n(), t("div", { attrs: { class: "app-settings__content" }, ref: "settingsScroller" }, this.$slots.default)])])]);
} }, g = null, u = null;
var v = h(m, g, u, !1, null, "0ff961d8", null, null);
const E = v.exports;
export {
E as default
};