@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
212 lines (211 loc) • 7.16 kB
JavaScript
import { defineComponent as X, ref as y, watch as S, nextTick as H, useSlots as M, computed as j, openBlock as t, createBlock as v, Teleport as q, createElementBlock as r, normalizeStyle as K, unref as o, normalizeClass as l, createCommentVNode as a, createElementVNode as B, resolveDynamicComponent as L, withCtx as T, renderSlot as i, toDisplayString as h } from "vue";
import { onClickOutside as G, useEventListener as J } 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 Q } from "../../composables/useTheme.js";
import { useFocusTrap as U } from "../../composables/useFocusTrap.js";
import { closeIcon as Y } from "../../common/icons.js";
import Z from "../button/Button.vue.js";
import _ from "../scroll/Scroll.vue.js";
import x from "../form/Form.vue.js";
const ee = { key: 0 }, oe = ["xs", "sm", "md", "lg", "xl", "full"], te = ["top", "center", "bottom"], le = {
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
}, se = {
name: "XModal",
validators: {
size: oe,
position: te
}
}, pe = /* @__PURE__ */ X({
...se,
props: le,
emits: ["update:modelValue", "submit"],
setup($, { expose: V, emit: C }) {
const d = $, k = C, c = y(d.modelValue), u = y(!1), b = y(null), E = y(null), { initFocusTrap: z, clearFocusTrap: A } = U();
let m;
S(c, (e) => {
m && (m(), m = void 0), e && setTimeout(() => {
m = G(b, F, {
ignore: [".v-popper__popper"]
});
});
});
let g;
S(() => 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 H(), u.value = e, g = setTimeout(() => {
z(b);
}, 100), document.body.style.paddingRight = `${n}px`, document.body.style.overflow = "hidden";
} else
u.value = e, c.value = e, clearTimeout(g), A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
}
typeof window < "u" && J(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 w = M(), P = j(() => !!(w["tertiary-action"] || w["cancel-action"])), { styles: I, classes: s, className: N } = Q("Modal", {}, d, {
visible: u
});
return V({ open: O, close: p }), (e, n) => (t(), v(q, { to: "body" }, [
c.value ? (t(), r("div", {
key: 0,
ref_key: "modalWrapperRef",
ref: E,
style: K(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(L(e.isForm ? x : "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: T(() => [
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(_, {
key: 0,
scrollbar: !1,
class: l({
"h-full": e.size === "full"
}),
vertical: ""
}, {
default: T(() => [
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(Z, {
key: 1,
ghost: "",
size: "sm",
tabindex: "-1",
icon: o(Y),
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", ee)) : 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 {
pe as default
};