@nextcloud/vue
Version:
Nextcloud vue components
208 lines (207 loc) • 9.2 kB
JavaScript
import '../assets/NcAppSettingsDialog-BPOsEn6K.css';
import { defineComponent, inject, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, useModel, provide, toRef, useTemplateRef, ref, computed, onBeforeUnmount, warn, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList, withKeys, withModifiers, mergeModels } from "vue";
import debounce from "debounce";
import { N as NcDialog } from "./NcDialog-D1u-qo74.mjs";
import { _ as _sfc_main$2 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
import { u as useLocalizedAppName, A as APP_VERSION } from "./appName-DyNMVZpX.mjs";
import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-C73Wx6iQ.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { useIsMobile } from "../composables/useIsMobile/index.mjs";
import { r as register, I as t48, a as t } from "./_l10n-CG4CuN3H.mjs";
import { i as isLegacy34 } from "./legacy-BoqDmOCa.mjs";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "NcAppSettingsDialogVersion",
setup(__props) {
const legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY);
const localizedAppName = useLocalizedAppName();
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([_ctx.$style.appSettingsDialogVersion, { [_ctx.$style.appSettingsDialogVersion__legacy]: unref(legacy) }])
}, toDisplayString(unref(localizedAppName)) + " " + toDisplayString(unref(APP_VERSION)), 3);
};
}
});
const appSettingsDialogVersion = "_appSettingsDialogVersion_cjsRO";
const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_FaQVZ";
const style0 = {
"material-design-icon": "_material-design-icon_p1TBV",
appSettingsDialogVersion,
appSettingsDialogVersion__legacy
};
const cssModules = {
"$style": style0
};
const NcAppSettingsDialogVersion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules]]);
register(t48);
const _hoisted_1 = {
key: 0,
class: "app-settings__title"
};
const _hoisted_2 = {
key: 1,
class: "navigation-list"
};
const _hoisted_3 = ["aria-current", "href", "onClick", "onKeydown"];
const _hoisted_4 = {
key: 0,
class: "navigation-list__link-icon"
};
const _hoisted_5 = { class: "navigation-list__link-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcAppSettingsDialog",
props: /* @__PURE__ */ mergeModels({
showNavigation: { type: Boolean },
container: { default: "body" },
name: { default: "" },
additionalTrapElements: { default: () => [] },
legacy: { type: Boolean, default: false },
noVersion: { type: Boolean, default: false }
}, {
"open": { type: Boolean, ...{ required: true } },
"openModifiers": {}
}),
emits: ["update:open"],
setup(__props) {
const open = useModel(__props, "open");
const props = __props;
provide(APP_SETTINGS_REGISTRATION_KEY, {
registerSection,
unregisterSection
});
provide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy));
const settingsScrollerElement = useTemplateRef("settingsScroller");
const isMobile = useIsMobile();
const selectedSection = ref("");
const linkClicked = ref(false);
const registeredSections = ref([]);
const hasNavigation = computed(() => !isMobile.value && props.showNavigation);
const hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon));
const unfocusNavigationItem = debounce(() => {
selectedSection.value = "";
if (document.activeElement?.className.includes("navigation-list__link")) {
document.activeElement.blur();
}
}, 300);
const sectionsOrderMap = /* @__PURE__ */ new Map();
onBeforeUnmount(() => {
sectionsOrderMap.clear();
});
function handleSettingsNavigationClick(item) {
linkClicked.value = true;
document.getElementById("settings-section_" + item).scrollIntoView({
behavior: "smooth",
inline: "nearest"
});
selectedSection.value = item;
setTimeout(() => {
linkClicked.value = false;
}, 1e3);
}
function handleCloseModal(isOpen) {
if (isOpen) {
return;
}
open.value = false;
settingsScrollerElement.value.scrollTop = 0;
}
function handleScroll() {
if (open.value && !linkClicked.value) {
unfocusNavigationItem();
}
}
function registerSection(id, name, order, icon) {
if (registeredSections.value.some(({ id: otherId }) => id === otherId)) {
throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
}
if (registeredSections.value.some(({ name: otherName }) => name === otherName)) {
warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
}
if (order !== void 0) {
sectionsOrderMap.set(id, order);
} else if (sectionsOrderMap.has(id)) {
order = sectionsOrderMap.get(id);
} else {
order = Math.max(0, ...sectionsOrderMap.values()) + 1;
sectionsOrderMap.set(id, order);
}
registeredSections.value = [...registeredSections.value, { id, name, order, icon }].sort(({ order: orderA }, { order: orderB }) => {
return orderA - orderB;
});
if (registeredSections.value.length === 1) {
selectedSection.value = id;
}
}
function unregisterSection(id) {
registeredSections.value = registeredSections.value.filter(({ id: otherId }) => id !== otherId);
if (selectedSection.value === id) {
selectedSection.value = registeredSections.value[0]?.id ?? "";
}
}
return (_ctx, _cache) => {
return open.value ? (openBlock(), createBlock(NcDialog, {
key: 0,
class: normalizeClass(["app-settings", { "app-settings--legacy": unref(isLegacy34) }]),
contentClasses: "app-settings__content",
navigationClasses: "app-settings__navigation",
additionalTrapElements: __props.additionalTrapElements,
container: __props.container,
closeOnClickOutside: "",
"navigation-aria-label": unref(t)("Settings navigation"),
size: "large",
name: __props.name,
"onUpdate:open": handleCloseModal
}, createSlots({
default: withCtx(() => [
createElementVNode("div", {
ref: "settingsScroller",
onScroll: handleScroll
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true),
!__props.noVersion ? (openBlock(), createBlock(NcAppSettingsDialogVersion, { key: 0 })) : createCommentVNode("", true)
], 544)
]),
_: 2
}, [
hasNavigation.value ? {
name: "navigation",
fn: withCtx(({ isCollapsed }) => [
!unref(isLegacy34) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.name), 1)) : createCommentVNode("", true),
!isCollapsed ? (openBlock(), createElementBlock("ul", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(registeredSections.value, (section) => {
return openBlock(), createElementBlock("li", {
key: section.id
}, [
createElementVNode("a", {
"aria-current": `${section.id === selectedSection.value}`,
class: normalizeClass(["navigation-list__link", {
"navigation-list__link--active": section.id === selectedSection.value,
"navigation-list__link--icon": hasNavigationIcons.value
}]),
href: `#settings-section_${section.id}`,
tabindex: "0",
onClick: withModifiers(($event) => handleSettingsNavigationClick(section.id), ["prevent"]),
onKeydown: withKeys(($event) => handleSettingsNavigationClick(section.id), ["enter"])
}, [
hasNavigationIcons.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
section.icon ? (openBlock(), createBlock(_sfc_main$2, {
key: 0,
vnodes: section.icon
}, null, 8, ["vnodes"])) : createCommentVNode("", true)
])) : createCommentVNode("", true),
createElementVNode("span", _hoisted_5, toDisplayString(section.name), 1)
], 42, _hoisted_3)
]);
}), 128))
])) : createCommentVNode("", true)
]),
key: "0"
} : void 0
]), 1032, ["class", "additionalTrapElements", "container", "navigation-aria-label", "name"])) : createCommentVNode("", true);
};
}
});
const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e669a5ef"]]);
export {
NcAppSettingsDialog as N
};
//# sourceMappingURL=NcAppSettingsDialog-BgZCuMK0.mjs.map