@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
208 lines (207 loc) • 7.09 kB
JavaScript
import { defineComponent as X, ref as y, watch as w, nextTick as S, useSlots as H, computed as M, openBlock as t, createBlock as v, Teleport as j, createElementBlock as r, normalizeStyle as q, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as K, withCtx as $, renderSlot as i, toDisplayString as h } from "vue";
import { onClickOutside as L, useEventListener as G } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useTheme as J } from "../../composables/useTheme.js";
import { useFocusTrap as Q } from "../../composables/useFocusTrap.js";
import { closeIcon as U } from "../../common/icons.js";
import Y from "../button/Button.vue.js";
import Z from "../scroll/Scroll.vue.js";
import _ from "../form/Form.vue.js";
const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top", "center", "bottom"], te = {
size: {
type: String,
default: "lg"
},
position: {
type: String,
default: "center"
},
modelValue: Boolean,
showClose: Boolean,
backdrop: {
type: Boolean,
default: !0
},
hasActions: {
type: Boolean,
default: !0
},
hasHeader: {
type: Boolean,
default: !0
},
title: String,
description: String,
label: String,
loading: Boolean,
loadingText: String,
fluid: Boolean,
// form props
isForm: Boolean,
formDisabled: Boolean,
formDescription: String,
formTitle: String,
formAutoValidate: {
type: Boolean,
default: !0
},
formErrors: {
type: [Array, Object],
default: () => []
},
persistent: Boolean
}, le = {
name: "XModal",
validators: {
size: ee,
position: oe
}
}, me = /* @__PURE__ */ X({
...le,
props: te,
emits: ["update:modelValue", "submit"],
setup(V, { expose: C, emit: T }) {
const d = V, k = T, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = Q();
let m;
w(c, (e) => {
m && (m(), m = void 0), e && setTimeout(() => {
m = L(b, F, {
ignore: [".v-popper__popper"]
});
});
}), w(() => d.modelValue, D, { immediate: !0 });
async function D() {
const e = d.modelValue;
if (e) {
const n = window.innerWidth - document.documentElement.clientWidth;
c.value = e, await S(), u.value = e, await S(), z(b), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
} else
u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
}
typeof window < "u" && G(document, "keydown", W);
const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => typeof n == "string" ? Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f)) : !1);
function W(e) {
e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
}
function F() {
d.persistent || p();
}
function p() {
u.value = !1, setTimeout(() => {
k("update:modelValue", !1);
}, 150);
}
function O() {
k("update:modelValue", !0), u.value = !0;
}
const g = H(), P = M(() => !!(g["tertiary-action"] || g["cancel-action"])), { styles: I, classes: s, className: N } = J("Modal", {}, d, {
visible: u
});
return C({ open: O, close: p }), (e, n) => (t(), v(j, { to: "body" }, [
c.value ? (t(), r("div", {
key: 0,
ref_key: "modalWrapperRef",
ref: E,
style: q(o(I)),
class: l([
o(N),
o(s).wrapper,
u.value ? "visible" : "invisible ease-in duration-100"
])
}, [
e.backdrop ? (t(), r("div", {
key: 0,
class: l(o(s).backdrop)
}, null, 2)) : a("", !0),
B("div", {
class: l(o(s).modalWrapper)
}, [
(t(), v(K(e.isForm ? _ : "div"), {
ref_key: "modalRef",
ref: b,
class: l(["max-h-full", o(s).modal]),
disabled: e.formDisabled,
"auto-validate": e.formAutoValidate,
title: e.formTitle,
description: e.formDescription,
errors: e.formErrors,
"auto-focus": "",
"has-footer": !1,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "modal-headline",
onSubmit: n[0] || (n[0] = (f) => e.$emit("submit", f))
}, {
default: $(() => [
i(e.$slots, "image"),
i(e.$slots, "header", {}, () => [
e.hasHeader ? (t(), r("div", {
key: 0,
class: l(o(s).header)
}, [
i(e.$slots, "header-content", {}, () => [
e.label ? (t(), r("div", {
key: 0,
class: l(o(s).label)
}, h(e.label), 3)) : a("", !0),
e.title ? (t(), r("div", {
key: 1,
class: l(o(s).title)
}, h(e.title), 3)) : a("", !0)
])
], 2)) : a("", !0)
]),
e.$slots.default ? (t(), v(Z, {
key: 0,
scrollbar: !1,
class: l({
"h-full": e.size === "full"
}),
vertical: ""
}, {
default: $(() => [
B("div", {
class: l(o(s).content)
}, [
e.description ? (t(), r("div", {
key: 0,
class: l(o(s).description)
}, h(e.description), 3)) : a("", !0),
i(e.$slots, "default")
], 2)
]),
_: 3
}, 8, ["class"])) : a("", !0),
e.showClose ? (t(), v(Y, {
key: 1,
ghost: "",
size: "sm",
tabindex: "-1",
icon: o(U),
class: l(o(s).closeIcon),
onClick: p
}, null, 8, ["icon", "class"])) : a("", !0),
i(e.$slots, "footer", {}, () => [
e.hasActions ? (t(), r("div", {
key: 0,
class: l(o(s).actions)
}, [
i(e.$slots, "actions", {}, () => [
i(e.$slots, "cancel-action"),
P.value ? (t(), r("div", x)) : a("", !0),
i(e.$slots, "tertiary-action"),
i(e.$slots, "secondary-action"),
i(e.$slots, "primary-action")
])
], 2)) : a("", !0)
])
]),
_: 3
}, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
], 2)
], 6)) : a("", !0)
]));
}
});
export {
me as default
};