@nextcloud/vue
Version:
Nextcloud vue components
168 lines (167 loc) • 7.17 kB
JavaScript
import '../assets/NcDialog-D3fAX1Fs.css';
import { defineComponent, mergeModels, useModel, useSlots, useTemplateRef, computed, ref, createBlock, createCommentVNode, openBlock, unref, mergeProps, withCtx, createElementVNode, toDisplayString, resolveDynamicComponent, toHandlers, normalizeClass, createElementBlock, renderSlot, Fragment, renderList } from "vue";
import { useElementSize } from "@vueuse/core";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-BBumVVme.mjs";
import { N as NcModal } from "./NcModal-MC_HktJd.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = ["id", "textContent"];
const _hoisted_2 = ["aria-label", "aria-labelledby"];
const _hoisted_3 = { class: "dialog__text" };
const _hoisted_4 = { class: "dialog__actions" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcDialog",
props: /* @__PURE__ */ mergeModels({
name: {},
message: { default: "" },
additionalTrapElements: { default: () => [] },
container: { default: "body" },
size: { default: "small" },
buttons: { default: () => [] },
isForm: { type: Boolean },
noClose: { type: Boolean },
closeOnClickOutside: { type: Boolean },
outTransition: { type: Boolean },
navigationAriaLabel: { default: "" },
navigationAriaLabelledby: { default: "" },
contentClasses: { default: "" },
dialogClasses: { default: "" },
navigationClasses: { default: "" }
}, {
"open": { type: Boolean, ...{ default: true } },
"openModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["closing", "reset", "submit"], ["update:open"]),
setup(__props, { emit: __emit }) {
const open = useModel(__props, "open");
const props = __props;
const emit = __emit;
const slots = useSlots();
const wrapperElement = useTemplateRef("wrapper");
const { width: dialogWidth } = useElementSize(wrapperElement, { width: 900, height: 0 });
const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
const hasNavigation = computed(() => slots?.navigation !== void 0);
const navigationId = createElementId();
const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
const navigationAriaLabelledbyAttr = computed(() => {
if (props.navigationAriaLabel) {
return void 0;
}
return props.navigationAriaLabelledby || navigationId;
});
const dialogRootElement = useTemplateRef("dialogElement");
const dialogTagName = computed(() => props.isForm && !hasNavigation.value ? "form" : "div");
const dialogListeners = computed(() => {
if (dialogTagName.value !== "form") {
return {};
}
return {
/**
* @param event - Form submit event
*/
submit(event) {
event.preventDefault();
emit("submit", event);
},
/**
* @param event - Form submit event
*/
reset(event) {
event.preventDefault();
emit("reset", event);
}
};
});
const showModal = ref(true);
function handleButtonClose(button, result) {
if (button.type === "submit" && dialogTagName.value === "form" && "reportValidity" in dialogRootElement.value && !dialogRootElement.value.reportValidity()) {
return;
}
handleClosing(result);
window.setTimeout(() => handleClosed(), 300);
}
function handleClosing(result) {
showModal.value = false;
emit("closing", result);
}
function handleClosed() {
showModal.value = true;
open.value = false;
}
const modalProps = computed(() => ({
noClose: props.noClose,
container: props.container === void 0 ? "body" : props.container,
// we do not pass the name as we already have the name as the headline
// name: props.name,
// But we need to set the correct label id so the dialog is labelled
labelId: navigationId,
size: props.size,
show: open.value && showModal.value,
outTransition: props.outTransition,
closeOnClickOutside: props.closeOnClickOutside,
additionalTrapElements: props.additionalTrapElements
}));
return (_ctx, _cache) => {
return open.value ? (openBlock(), createBlock(unref(NcModal), mergeProps({
key: 0,
class: "dialog__modal",
"enable-slideshow": false,
"disable-swipe": ""
}, modalProps.value, {
onClose: handleClosed,
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => handleClosing())
}), {
default: withCtx(() => [
createElementVNode("h2", {
id: unref(navigationId),
class: "dialog__name",
textContent: toDisplayString(_ctx.name)
}, null, 8, _hoisted_1),
(openBlock(), createBlock(resolveDynamicComponent(dialogTagName.value), mergeProps({
ref: "dialogElement",
class: ["dialog", _ctx.dialogClasses]
}, toHandlers(dialogListeners.value)), {
default: withCtx(() => [
createElementVNode("div", {
ref: "wrapper",
class: normalizeClass(["dialog__wrapper", [{ "dialog__wrapper--collapsed": isNavigationCollapsed.value }]])
}, [
hasNavigation.value ? (openBlock(), createElementBlock("nav", {
key: 0,
class: normalizeClass(["dialog__navigation", _ctx.navigationClasses]),
"aria-label": navigationAriaLabelAttr.value,
"aria-labelledby": navigationAriaLabelledbyAttr.value
}, [
renderSlot(_ctx.$slots, "navigation", { isCollapsed: isNavigationCollapsed.value }, void 0, true)
], 10, _hoisted_2)) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass(["dialog__content", _ctx.contentClasses])
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("p", _hoisted_3, toDisplayString(_ctx.message), 1)
], true)
], 2)
], 2),
createElementVNode("div", _hoisted_4, [
renderSlot(_ctx.$slots, "actions", {}, () => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttons, (button, idx) => {
return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({ key: idx }, { ref_for: true }, button, {
onClick: (_, result) => handleButtonClose(button, result)
}), null, 16, ["onClick"]);
}), 128))
], true)
])
]),
_: 3
}, 16, ["class"]))
]),
_: 3
}, 16)) : createCommentVNode("", true);
};
}
});
const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ca0b8eba"]]);
export {
NcDialog as N
};
//# sourceMappingURL=NcDialog-CM7SCS7Z.mjs.map