@dynamicforms/vuetify-modal-form-kit
Version:
Form layout and modal helpers
744 lines (743 loc) • 27.1 kB
JavaScript
var Re = Object.defineProperty, je = Object.defineProperties;
var Ee = Object.getOwnPropertyDescriptors;
var le = Object.getOwnPropertySymbols;
var Me = Object.prototype.hasOwnProperty, xe = Object.prototype.propertyIsEnumerable;
var G = (s, e, n) => e in s ? Re(s, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : s[e] = n, E = (s, e) => {
for (var n in e || (e = {}))
Me.call(e, n) && G(s, n, e[n]);
if (le)
for (var n of le(e))
xe.call(e, n) && G(s, n, e[n]);
return s;
}, W = (s, e) => je(s, Ee(e));
var V = (s, e, n) => G(s, typeof e != "symbol" ? e + "" : e, n);
var K = (s, e, n) => new Promise((t, r) => {
var a = (c) => {
try {
l(n.next(c));
} catch (p) {
r(p);
}
}, m = (c) => {
try {
l(n.throw(c));
} catch (p) {
r(p);
}
}, l = (c) => c.done ? t(c.value) : Promise.resolve(c.value).then(a, m);
l((n = n.apply(s, e)).next());
});
import { ref as re, computed as v, getCurrentInstance as pe, inject as Ie, toRef as Le, defineComponent as D, watch as he, onUnmounted as ve, resolveComponent as b, createBlock as C, openBlock as g, withCtx as O, createVNode as N, normalizeClass as Fe, createCommentVNode as z, renderSlot as X, createElementBlock as x, Fragment as U, createTextVNode as H, toDisplayString as Q, unref as w, createElementVNode as Je, onMounted as Te, resolveDynamicComponent as ae, normalizeProps as ie, mergeProps as Y, renderList as Z } from "vue";
import * as M from "@dynamicforms/vue-forms";
import { RenderableValue as Pe } from "@dynamicforms/vue-forms";
import { Action as q, DfActions as $e, MessagesWidget as Ue, ResponsiveRenderOptions as se, responsiveBreakpoints as F, getBreakpointName as ke } from "@dynamicforms/vuetify-inputs";
import { isEmpty as ce, isObjectLike as j, isString as y, isArray as J, isNumber as I, isBoolean as ee } from "lodash-es";
import De from "vue-markdown-render";
import { VCard as Ge, VCardActions as We, VCardText as Ke, VCardTitle as Xe } from "vuetify/components/VCard";
import { VDialog as Ze } from "vuetify/components/VDialog";
import { VIcon as qe } from "vuetify/components/VIcon";
import { VCol as ze, VRow as He } from "vuetify/components/VGrid";
import { VSheet as Qe } from "vuetify/components/VSheet";
var T = /* @__PURE__ */ ((s) => (s[s.SMALL = 1] = "SMALL", s[s.MEDIUM = 2] = "MEDIUM", s[s.LARGE = 3] = "LARGE", s[s.X_LARGE = 4] = "X_LARGE", s[s.DEFAULT = 0] = "DEFAULT", s))(T || {});
const ue = 0;
((s) => {
const e = ["large", "lg", "modal-lg"], n = ["medium", "md", "modal-md"], t = ["small", "sm", "modal-sm"], r = ["x-large", "xl", "modal-xl"];
function a(l) {
return l === void 0 ? ue : e.includes(l) ? 3 : n.includes(l) ? 2 : t.includes(l) ? 1 : r.includes(l) ? 4 : ue;
}
s.fromString = a;
function m(l) {
const c = typeof l == "number" ? l : s.fromString(l);
return Object.values(s).includes(c);
}
s.isDefined = m;
})(T || (T = {}));
Object.freeze(T);
const B = T;
class Ye {
constructor() {
V(this, "stack", []);
V(this, "currentRef", re(null));
}
push(e) {
this.stack.push(e), this.currentRef.value = e;
}
isTop(e) {
return v(() => this.currentRef.value === e);
}
remove(e) {
const n = this.stack.indexOf(e);
n !== -1 && (this.stack.splice(n, 1), this.currentRef.value = this.stack[this.stack.length - 1] || null);
}
}
const R = new Ye(), te = {}, k = re(!1);
class et {
isTop(e) {
return R.isTop(e.dialogId).value;
}
isInstalled() {
return k.value;
}
yesNo(e, n, t) {
var l, c;
const r = Object.keys((c = (l = t == null ? void 0 : t.form) == null ? void 0 : l.fields) != null ? c : []).some((p) => {
var _;
return ((_ = t == null ? void 0 : t.form) == null ? void 0 : _.field(p)) instanceof M.Action;
}) || !ce(t == null ? void 0 : t.actions), a = q.yesAction();
Object.defineProperty(a, "defaultConfirm", { value: !0 });
const m = q.noAction();
return Object.defineProperty(m, "defaultReject", { value: !0 }), this.messageInternal(e, n, r ? {} : { yes: a, no: m }, t);
}
message(e, n, t) {
var m, l;
const r = Object.keys((l = (m = t == null ? void 0 : t.form) == null ? void 0 : m.fields) != null ? l : []).some((c) => {
var p;
return ((p = t == null ? void 0 : t.form) == null ? void 0 : p.field(c)) instanceof M.Action;
}) || !ce(t == null ? void 0 : t.actions), a = q.closeAction();
return Object.defineProperties(a, {
defaultConfirm: { value: !0 },
defaultReject: { value: !0 }
}), this.messageInternal(e, n, r ? {} : { close: a }, t);
}
custom(e, n, t, r) {
return this.message(e, { componentName: n, componentProps: t }, r);
}
messageInternal(e, n, t, r) {
var p, _, A;
let a;
const m = E(E({}, t), (p = r == null ? void 0 : r.actions) != null ? p : {});
Object.keys((A = (_ = r == null ? void 0 : r.form) == null ? void 0 : _.fields) != null ? A : []).forEach((u) => {
var h;
const f = (h = r == null ? void 0 : r.form) == null ? void 0 : h.field(u);
f instanceof M.Action && (m[u] ? f.registerAction(new M.ExecuteAction((i, o, ...d) => K(this, null, function* () {
yield o(i, ...d), a(i.fieldName);
}))) : m[u] = f);
}), Object.entries(m).forEach(([u, f]) => {
f.registerAction(new M.ExecuteAction((h, i, ...o) => K(this, null, function* () {
yield i(h, ...o), a(h.fieldName || u);
})));
});
const l = Symbol("modalstack"), c = new Promise((u) => {
var f;
a = (h) => {
u(h), R.remove(l), delete te[l];
}, R.push(l), te[l] = {
dialogId: l,
title: e,
message: n,
form: r == null ? void 0 : r.form,
size: (f = r == null ? void 0 : r.size) != null ? f : B.DEFAULT,
actions: m,
resolve: u,
color: r == null ? void 0 : r.color,
icon: r == null ? void 0 : r.icon
};
});
return c.close = (u) => a(u), c.dialogId = l, c;
}
}
const Ot = new et(), S = v(() => {
const s = R.currentRef.value;
return s ? te[s] : null;
});
function L() {
let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
if (L.cache.has(s)) return L.cache.get(s);
const e = s.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
return L.cache.set(s, e), e;
}
L.cache = /* @__PURE__ */ new Map();
function tt(s, e) {
const n = pe();
if (!n)
throw new Error(`[Vuetify] ${s} must be called from inside a setup function`);
return n;
}
function nt() {
let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "composables";
const e = tt(s).type;
return L((e == null ? void 0 : e.aliasName) || (e == null ? void 0 : e.name));
}
const rt = Symbol.for("vuetify:display");
function ge() {
let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
mobile: null
}, e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : nt();
const n = Ie(rt);
if (!n) throw new Error("Could not find Vuetify display injection");
const t = v(() => s.mobile ? !0 : typeof s.mobileBreakpoint == "number" ? n.width.value < s.mobileBreakpoint : s.mobileBreakpoint ? n.width.value < n.thresholds.value[s.mobileBreakpoint] : s.mobile === null ? n.mobile.value : !1), r = Le(() => e ? {
[`${e}--mobile`]: t.value
} : {});
return W(E({}, n), {
displayClasses: r,
mobile: t
});
}
const st = { style: { flex: "1" } }, _e = /* @__PURE__ */ D({
__name: "df-modal.component",
props: {
modelValue: { type: Boolean, default: !1 },
closable: { type: Boolean, default: !1 },
size: { default: B.DEFAULT },
formControl: { default: void 0 },
dialogId: { default: void 0 },
title: { default: void 0 },
color: { default: void 0 },
icon: { default: void 0 }
},
emits: ["update:model-value"],
setup(s, { emit: e }) {
const n = s, t = ge(), r = v(() => n.size), a = v(() => r.value === B.SMALL && !t.smAndUp.value || r.value === B.MEDIUM && !t.mdAndUp.value || r.value === B.LARGE && !t.lgAndUp.value ? !0 : r.value === B.X_LARGE && !t.xl.value), m = v(() => {
if (a.value) return "unset";
switch (r.value) {
case B.SMALL:
return 400;
case B.MEDIUM:
return 600;
case B.LARGE:
return 800;
case B.X_LARGE:
return 1140;
default:
return "unset";
}
}), l = v(() => {
var u;
return (u = n.dialogId) != null ? u : Symbol("df-dialog");
}), c = R.isTop(l.value), p = e;
function _(u, f = !1) {
(!n.dialogId || !u) && (u ? R.push(l.value) : R.remove(l.value)), f || p("update:model-value", u);
}
const A = v(() => n.modelValue && c.value);
return he(() => n.modelValue, (u, f) => {
u !== f && _(u, !0);
}, { immediate: !0 }), ve(() => {
R.remove(l.value);
}), (u, f) => {
const h = b("v-icon"), i = b("v-btn"), o = b("v-sheet"), d = b("v-card-title"), $ = b("v-card-text"), Be = b("v-card-actions"), be = b("v-card"), Ne = b("v-dialog");
return g(), C(Ne, {
modelValue: A.value,
"onUpdate:modelValue": f[1] || (f[1] = (oe) => A.value = oe),
width: m.value,
"max-width": m.value,
fullscreen: a.value,
"retain-focus": !1,
persistent: ""
}, {
default: O(() => [
N(be, null, {
default: O(() => [
N(d, null, {
default: O(() => [
N(o, {
color: n.color || void 0,
class: Fe({ "mx-n4 mt-n3 mb-3 d-flex align-center px-4 py-6": !!n.color, "position-relative": u.closable }),
elevation: n.color ? 4 : 0
}, {
default: O(() => [
u.icon ? (g(), C(h, {
key: 0,
class: "me-2",
icon: u.icon
}, null, 8, ["icon"])) : z("", !0),
X(u.$slots, "title", {}, () => [
u.title instanceof M.MdString ? (g(), C(w(De), {
key: 1,
source: "title"
})) : (g(), x(U, { key: 0 }, [
H(Q(u.title), 1)
], 64))
]),
u.closable ? (g(), C(i, {
key: 1,
icon: "",
variant: "text",
class: "position-absolute",
style: { right: "0.25em" },
onClick: f[0] || (f[0] = (oe) => _(!1))
}, {
default: O(() => [
N(h, { icon: "mdi-close" })
]),
_: 1
})) : z("", !0)
]),
_: 3
}, 8, ["color", "class", "elevation"])
]),
_: 3
}),
N($, null, {
default: O(() => [
X(u.$slots, "body", { formControl: u.formControl })
]),
_: 3
}),
N(Be, null, {
default: O(() => [
Je("div", st, [
X(u.$slots, "actions")
])
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}, 8, ["modelValue", "width", "max-width", "fullscreen"]);
};
}
}), ot = /* @__PURE__ */ D({
__name: "df-api.component",
setup(s) {
const e = re(!1);
he(() => S.value, (t) => {
e.value = t !== null;
});
const n = v(() => {
var t;
return [new Pe((t = S == null ? void 0 : S.value) == null ? void 0 : t.message)];
});
return Te(() => {
k.value && console.warn("Seems like there is more than one df-modal-api in the v-dom"), k.value = !0;
}), ve(() => {
k.value = !1;
}), (t, r) => w(S) ? (g(), C(_e, {
key: 0,
modelValue: e.value,
"onUpdate:modelValue": r[0] || (r[0] = (a) => e.value = a),
"form-control": w(S).form,
size: w(S).size,
"dialog-id": w(S).dialogId,
title: w(S).title,
color: w(S).color,
icon: w(S).icon
}, {
body: O(() => [
N(w(Ue), {
message: " ",
errors: n.value,
classes: ""
}, null, 8, ["errors"])
]),
actions: O(() => {
var a;
return [
N(w($e), {
actions: Object.values((a = w(S).actions) != null ? a : []),
class: "d-flex justify-end",
style: { gap: ".5em" }
}, null, 8, ["actions"])
];
}),
_: 1
}, 8, ["modelValue", "form-control", "size", "dialog-id", "title", "color", "icon"])) : z("", !0);
}
}), P = Symbol("FormBuilder"), ye = Symbol("FormBuilderBodyProp");
class we {
constructor(e, n) {
V(this, "name");
V(this, "props");
this.name = e, this.props = n;
}
toJSON() {
var e, n, t;
return {
name: this.name,
props: this.props ? E({}, (t = (n = (e = this.props).toJSON) == null ? void 0 : n.call(e)) != null ? t : this.props) : null
};
}
}
class Oe {
constructor(e) {
this.addCallback = e;
}
generic(e, n) {
const t = new we(e, n);
return this.addCallback(t), this;
}
nestedForm(e) {
return this.generic(P, e);
}
}
class Ae extends Oe {
dfActions(e) {
return this.generic("df-actions", e);
}
dfCheckbox(e) {
return this.generic("df-checkbox", e);
}
dfColor(e) {
return this.generic("df-color", e);
}
dfDateTime(e) {
return this.generic("df-date-time", e);
}
dfFile(e) {
return this.generic("df-file", e);
}
dfInput(e) {
return this.generic("df-input", e);
}
dfRtfEditor(e) {
return this.generic("df-rtf-editor", e);
}
dfSelect(e) {
return this.generic("df-select", e);
}
dfTextArea(e) {
return this.generic("df-text-area", e);
}
}
class me {
constructor(e) {
V(this, "props");
V(this, "components", []);
this.props = e != null ? e : {}, this.props.cols === void 0 && (this.props.cols = !1);
}
component(e, n) {
let t, r;
n ? (t = e, r = n) : (t = Ae, r = e);
const a = new t((m) => {
this.components.push(m);
});
return r(a), this;
}
/**
* @return returns a proxy that allows to immediately from the column object add components, e.g.
* new FormBuilder().row((row) => row.col((col) => col.simple.generic(...) will add one component into this column.
* You may call the ComponentBuilder's methods as many times as you want to generate components
*/
simple() {
const e = new Proxy({}, {
get: (n, t) => (...r) => (this.component((a) => a[t](...r)), e)
});
return e;
}
toJSON() {
return {
props: this.props,
components: this.components.map((e) => e.toJSON())
};
}
}
class Se extends se {
constructor(e) {
super({ props: e });
}
component(e, n) {
return this._value.component(e, n), this;
}
breakpoint(e, n) {
return this._value[e] || (this._value[e] = new me()), n(this._value[e]), this;
}
/**
* @return returns a proxy that allows to immediately from the column object add components, e.g.
* new FormBuilder().row((row) => row.col((col) => col.simple.generic(...) will add one component into this column.
* You may call the ComponentBuilder's methods as many times as you want to generate components
*/
simple() {
return this._value.simple();
}
toJSON(e) {
if (e != null) {
const t = this.getOptionsForBreakpoint(e);
return {
props: t.props,
components: t.components.map((r) => r.toJSON())
};
}
const n = {
props: this._value.props,
components: this._value.components.map((t) => t.toJSON())
};
return F.forEach((t) => {
this._value[t] && (n[t] = this._value[t].toJSON());
}), n;
}
// eslint-disable-next-line class-methods-use-this
cleanBreakpoint(e, n = !1) {
var h, i;
if ((!e || !j(e)) && !n) return null;
const t = {}, r = ["start", "end", "center", "auto", "baseline", "stretch"], a = (o) => I(o) || o === "auto" || ee(o), m = (o) => I(o), l = (o) => I(o), c = (o) => y(o) || J(o) && o.every((d) => y(d)) || j(o) && !Array.isArray(o), p = (o) => y(o) ? !0 : J(o) ? o.every(p) : j(o) ? Object.entries(o).every(([d, $]) => y(d) && (y($) || I($))) : !1, _ = ["cols", "offset", "order"], A = /* @__PURE__ */ new Set([
..._,
...F.flatMap((o) => _.map((d) => `${d}-${o}`)),
"alignSelf",
"class",
"style"
]), u = (h = (e != null ? e : {}).props) != null ? h : {};
Object.keys(u).forEach((o) => {
const d = u[o];
A.has(o) && (o === "alignSelf" ? y(d) && r.includes(d) && (t[o] = d) : o === "class" ? c(d) && (t[o] = d) : o === "style" ? p(d) && (t[o] = d) : o.startsWith("cols") ? a(d) && (t[o] = d) : o.startsWith("offset") ? m(d) && (t[o] = d) : o.startsWith("order") && l(d) && (t[o] = d));
});
const f = new me(t);
return f.components = [...(i = e == null ? void 0 : e.components) != null ? i : []], f;
}
}
class de {
constructor(e) {
V(this, "props");
V(this, "columns", []);
this.props = e != null ? e : {};
}
col(e, n) {
const t = new Se(e);
return n == null || n(t), this.columns.push(t), this;
}
/**
* @param cols specifies how many columns we have designed this row to have. each column will be 12 / cols wide
* @return returns a proxy that allows to immediately from the row object add components into their own
* columns e.g. new FormBuilder().row((row) => row.simple.generic(...) will create a layout with one column and within
* it your generic component. You may call the ComponentBuilder's methods as many times as you want
* to generate more columns with components
*/
simple(e = 1) {
const n = new Proxy({}, {
get: (t, r) => (...a) => (this.col({ cols: 12 / e }, (m) => m.component((l) => l[r](...a))), n)
});
return n;
}
toJSON(e) {
return { props: this.props, columns: this.columns.map((n) => n.toJSON(e)) };
}
}
class Ce extends se {
constructor(e) {
super({ props: e });
}
col(e, n) {
return this._value.col(e, n), this;
}
breakpoint(e, n) {
return this._value[e] || (this._value[e] = new de()), n(this._value[e]), this;
}
/**
* @param cols specifies how many columns we have designed this row to have. each column will be 12 / cols wide
* @return returns a proxy that allows to immediately from the row object add components into their own
* columns e.g. new FormBuilder().row((row) => row.simple.generic(...) will create a layout with one column and within
* it your generic component. You may call the ComponentBuilder's methods as many times as you want
* to generate more columns with components
*/
simple(e = 1) {
return this._value.simple(e);
}
toJSON(e) {
if (e != null) {
const t = this.getOptionsForBreakpoint(e);
return { props: t.props, columns: t.columns.map((r) => r.toJSON(e)) };
}
const n = {
props: this._value.props,
columns: this._value.columns.map((t) => t.toJSON())
};
return F.forEach((t) => {
this._value[t] && (n[t] = this._value[t].toJSON());
}), n;
}
// eslint-disable-next-line class-methods-use-this
cleanBreakpoint(e, n = !1) {
var f, h;
if ((!e || !j(e)) && !n) return null;
const t = {}, r = ["start", "center", "end", "baseline", "stretch"], a = ["start", "center", "end", "stretch", "space-between", "space-around", "space-evenly"], m = ["start", "center", "end", "space-between", "space-around", "space-evenly"], l = (i) => y(i) || J(i) && i.every((o) => y(o)) || j(i) && !Array.isArray(i), c = (i) => y(i) ? !0 : J(i) ? i.every(c) : j(i) ? Object.entries(i).every(([o, d]) => y(o) && (y(d) || I(d))) : !1, p = ["align", "align-content", "justify"], _ = /* @__PURE__ */ new Set([
...p,
...F.flatMap((i) => p.map((o) => `${o}-${i}`)),
"dense",
"no-gutters",
"class",
"style"
]), A = (f = (e != null ? e : {}).props) != null ? f : {};
Object.keys(A).forEach((i) => {
const o = A[i];
!_.has(i) || o === void 0 || (i === "dense" ? ee(o) && (t[i] = o) : i === "noGutters" ? ee(o) && (t[i] = o) : i === "class" ? l(o) && (t[i] = o) : i === "style" ? c(o) && (t[i] = o) : i.startsWith("align") ? y(o) && r.includes(o) && (t[i] = o) : i.startsWith("align-content") ? y(o) && a.includes(o) && (t[i] = o) : i.startsWith("justify") && y(o) && m.includes(o) && (t[i] = o));
});
const u = new de(t);
return u.columns = [...(h = e == null ? void 0 : e.columns) != null ? h : []], u;
}
}
class fe {
constructor() {
V(this, "rows", []);
}
row(e, n) {
const t = new Ce(e);
return n(t), this.rows.push(t), this;
}
/**
* @param cols specifies how many columns we want per row. each column will be 12/cols wide with cols columns per row
* @return returns a proxy that allows to immediately from the FormBuilder object add components into their own
* rows and columns e.g. new FormBuilder().simple.generic(...) will create a layout with one row, column and within
* it your generic component. You may call the ComponentBuilder's methods as many times as you want
* to generate more rows and columns with components
*/
simple(e = 1) {
let n = null, t = 0;
const r = new Proxy({}, {
get: (a, m) => m === "simple" ? (l = 1) => this.simple(l) : (...l) => ((!n || t >= e) && (this.row({}, (c) => (n = c, c)), t = 0), n.col({ cols: 12 / e }, (c) => c.component((p) => p[m](...l))), t++, r)
});
return r;
}
toJSON(e) {
return { rows: this.rows.map((n) => n.toJSON(e)) };
}
}
class ne extends se {
row(e, n) {
return this._value.row(e, n), this;
}
breakpoint(e, n) {
return this._value[e] || (this._value[e] = new fe()), n(this._value[e]), this;
}
/**
* @param cols specifies how many columns we want per row. each column will be 12/cols wide with cols columns per row
* @return returns a proxy that allows to immediately from the FormBuilder object add components into their own
* rows and columns e.g. new FormBuilder().simple.generic(...) will create a layout with one row, column and within
* it your generic component. You may call the ComponentBuilder's methods as many times as you want
* to generate more rows and columns with components
*/
simple(e = 1) {
return this._value.simple(e);
}
toJSON(e) {
if (e != null)
return { rows: this.getOptionsForBreakpoint(e).rows.map((r) => r.toJSON(e)) };
const n = { rows: this._value.rows.map((t) => t.toJSON()) };
return F.forEach((t) => {
this._value[t] && (n[t] = this._value[t].toJSON());
}), n;
}
// eslint-disable-next-line class-methods-use-this
cleanBreakpoint(e, n = !1) {
if ((!e || !j(e)) && !n) return null;
const t = new fe();
return n && (t.rows = []), e && J(e.rows) && (t.rows = e.rows), t.rows.length || n ? t : null;
}
}
const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Column: Se,
Component: we,
ComponentBuilderBase: Oe,
FormBuilder: ne,
FormBuilderBodyProp: ye,
FormBuilderName: P,
Row: Ce,
VuetifyInputsComponentBuilder: Ae
}, Symbol.toStringTag, { value: "Module" })), Ve = /* @__PURE__ */ D({
__name: "component-render",
props: {
name: {},
props: { default: () => ({}) },
components: { default: () => ({}) }
},
setup(s) {
const e = s, n = v(() => {
const c = e.name;
return typeof c == "symbol" ? c.description || "SymbolComponent" : c;
}), t = v(() => e.props), r = v(() => {
var c;
return (c = t.value) == null ? void 0 : c[ye];
}), a = v(() => e.components[e.name] || null), m = w(e.components)[P], l = v(() => e.name === P);
return (c, p) => a.value ? (g(), C(ae(a.value), ie(Y({ key: 0 }, t.value)), {
default: O(() => [
H(Q(r.value), 1)
]),
_: 1
}, 16)) : l.value ? (g(), C(w(m), {
key: 1,
layout: t.value,
components: c.components
}, null, 8, ["layout", "components"])) : (g(), C(ae(n.value), ie(Y({ key: 2 }, t.value)), {
default: O(() => [
H(Q(r.value), 1)
]),
_: 1
}, 16));
}
}), lt = { class: "form-layout" }, at = /* @__PURE__ */ D({
__name: "form-render",
props: {
layout: {},
components: { default: () => ({}) }
},
setup(s) {
const e = s, n = v(
() => e.layout instanceof ne ? e.layout : new ne(e.layout)
), t = ge(), r = v(() => {
const m = ke(t);
return n.value.getOptionsForBreakpoint(m).toJSON();
}), a = v(() => {
var m;
return W(E({}, e.components), { [P]: (m = pe()) == null ? void 0 : m.type });
});
return (m, l) => {
const c = b("v-col"), p = b("v-row");
return g(), x("div", lt, [
(g(!0), x(U, null, Z(r.value.rows, (_, A) => (g(), C(p, { key: A }, {
default: O(() => [
(g(!0), x(U, null, Z(_.columns, (u, f) => (g(), C(c, Y({
key: f,
ref_for: !0
}, u.props), {
default: O(() => [
(g(!0), x(U, null, Z(u.components, (h, i) => (g(), C(Ve, {
key: i,
name: h.name,
props: h.props,
components: a.value
}, null, 8, ["name", "props", "components"]))), 128))
]),
_: 2
}, 1040))), 128))
]),
_: 2
}, 1024))), 128))
]);
};
}
}), it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
ComponentRender: Ve,
DfModal: _e,
FormRender: at,
ModalView: ot
}, Symbol.toStringTag, { value: "Module" })), ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
VCard: Ge,
VCardActions: We,
VCardText: Ke,
VCardTitle: Xe,
VCol: ze,
VDialog: Ze,
VIcon: qe,
VRow: He,
VSheet: Qe
}, Symbol.toStringTag, { value: "Module" })), St = {
install: (s, e) => {
var n, t;
(n = e == null ? void 0 : e.registerComponents) != null && n && Object.entries(it).map(([r, a]) => s.component(r, a)), (t = e == null ? void 0 : e.registerVuetifyComponents) != null && t && Object.entries(ct).map(([r, a]) => {
try {
return s.component(r, a);
} catch (m) {
if (!m.message.includes("already registered"))
throw m;
}
return null;
});
}
};
export {
Ve as ComponentRender,
_e as DfModal,
B as DialogSize,
St as DynamicFormsModalFormKit,
ne as FormBuilder,
ye as FormBuilderBodyProp,
At as FormLayout,
at as FormRender,
ot as ModalView,
ue as defaultDialogSize,
Ot as modal
};
//# sourceMappingURL=dynamicforms-vuetify-modal-form-kit.js.map