@dynamicforms/vuetify-modal-form-kit
Version:
Form layout and modal helpers
754 lines (753 loc) • 27.7 kB
JavaScript
var Ee = Object.defineProperty, xe = Object.defineProperties;
var Ie = Object.getOwnPropertyDescriptors;
var ie = Object.getOwnPropertySymbols;
var Le = Object.prototype.hasOwnProperty, Me = Object.prototype.propertyIsEnumerable;
var X = (s, e, n) => e in s ? Ee(s, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : s[e] = n, E = (s, e) => {
for (var n in e || (e = {}))
Le.call(e, n) && X(s, n, e[n]);
if (ie)
for (var n of ie(e))
Me.call(e, n) && X(s, n, e[n]);
return s;
}, Z = (s, e) => xe(s, Ie(e));
var V = (s, e, n) => X(s, typeof e != "symbol" ? e + "" : e, n);
var q = (s, e, n) => new Promise((t, r) => {
var i = (c) => {
try {
a(n.next(c));
} catch (p) {
r(p);
}
}, l = (c) => {
try {
a(n.throw(c));
} catch (p) {
r(p);
}
}, a = (c) => c.done ? t(c.value) : Promise.resolve(c.value).then(i, l);
a((n = n.apply(s, e)).next());
});
import { ref as oe, computed as _, getCurrentInstance as he, inject as Fe, toRef as Je, defineComponent as K, watch as ve, onUnmounted as ge, resolveComponent as b, createBlock as A, openBlock as g, withCtx as S, createVNode as j, normalizeClass as Te, createCommentVNode as Y, renderSlot as z, createElementBlock as I, Fragment as M, createTextVNode as D, toDisplayString as G, unref as w, createElementVNode as Pe, onMounted as $e, resolveDynamicComponent as ee, normalizeProps as te, mergeProps as W, renderList as H } from "vue";
import * as x from "@dynamicforms/vue-forms";
import { MdString as ke, isCustomModalContentComponentDef as ue } from "@dynamicforms/vue-forms";
import { Action as Q, DfActions as Ue, ResponsiveRenderOptions as le, responsiveBreakpoints as J, getBreakpointName as De } from "@dynamicforms/vuetify-inputs";
import _e from "vue-markdown-render";
import { isEmpty as ce, isObjectLike as R, isString as O, isArray as T, isNumber as L, isBoolean as ne } from "lodash-es";
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 P = /* @__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))(P || {});
const me = 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 i(a) {
return a === void 0 ? me : e.includes(a) ? 3 : n.includes(a) ? 2 : t.includes(a) ? 1 : r.includes(a) ? 4 : me;
}
s.fromString = i;
function l(a) {
const c = typeof a == "number" ? a : s.fromString(a);
return Object.values(s).includes(c);
}
s.isDefined = l;
})(P || (P = {}));
Object.freeze(P);
const B = P;
class Ye {
constructor() {
V(this, "stack", []);
V(this, "currentRef", oe(null));
}
push(e) {
this.stack.push(e), this.currentRef.value = e;
}
isTop(e) {
return _(() => 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 N = new Ye(), re = {}, U = oe(!1);
class et {
isTop(e) {
return N.isTop(e.dialogId).value;
}
isInstalled() {
return U.value;
}
yesNo(e, n, t) {
var a, c;
const r = Object.keys((c = (a = t == null ? void 0 : t.form) == null ? void 0 : a.fields) != null ? c : []).some((p) => {
var y;
return ((y = t == null ? void 0 : t.form) == null ? void 0 : y.field(p)) instanceof x.Action;
}) || !ce(t == null ? void 0 : t.actions), i = Q.yesAction();
Object.defineProperty(i, "defaultConfirm", { value: !0 });
const l = Q.noAction();
return Object.defineProperty(l, "defaultReject", { value: !0 }), this.messageInternal(e, n, r ? {} : { yes: i, no: l }, t);
}
message(e, n, t) {
var l, a;
const r = Object.keys((a = (l = t == null ? void 0 : t.form) == null ? void 0 : l.fields) != null ? a : []).some((c) => {
var p;
return ((p = t == null ? void 0 : t.form) == null ? void 0 : p.field(c)) instanceof x.Action;
}) || !ce(t == null ? void 0 : t.actions), i = Q.closeAction();
return Object.defineProperties(i, {
defaultConfirm: { value: !0 },
defaultReject: { value: !0 }
}), this.messageInternal(e, n, r ? {} : { close: i }, t);
}
custom(e, n, t, r) {
return this.message(e, { componentName: n, componentProps: t }, r);
}
messageInternal(e, n, t, r) {
var p, y, C;
let i;
const l = E(E({}, t), (p = r == null ? void 0 : r.actions) != null ? p : {});
Object.keys((C = (y = r == null ? void 0 : r.form) == null ? void 0 : y.fields) != null ? C : []).forEach((m) => {
var v;
const d = (v = r == null ? void 0 : r.form) == null ? void 0 : v.field(m);
d instanceof x.Action && (l[m] ? d.registerAction(new x.ExecuteAction((u, o, ...f) => q(this, null, function* () {
yield o(u, ...f), i(u.fieldName);
}))) : l[m] = d);
}), Object.entries(l).forEach(([m, d]) => {
d.registerAction(new x.ExecuteAction((v, u, ...o) => q(this, null, function* () {
yield u(v, ...o), i(v.fieldName || m);
})));
});
const a = Symbol("modalstack"), c = new Promise((m) => {
var d;
i = (v) => {
m(v), N.remove(a), delete re[a];
}, N.push(a), re[a] = {
dialogId: a,
title: e,
message: n,
form: r == null ? void 0 : r.form,
size: (d = r == null ? void 0 : r.size) != null ? d : B.DEFAULT,
actions: l,
resolve: m,
color: r == null ? void 0 : r.color,
icon: r == null ? void 0 : r.icon
};
});
return c.close = (m) => i(m), c.dialogId = a, c;
}
}
const Ot = new et(), h = _(() => {
const s = N.currentRef.value;
return s ? re[s] : null;
});
function F() {
let s = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
if (F.cache.has(s)) return F.cache.get(s);
const e = s.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
return F.cache.set(s, e), e;
}
F.cache = /* @__PURE__ */ new Map();
function tt(s, e) {
const n = he();
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 F((e == null ? void 0 : e.aliasName) || (e == null ? void 0 : e.name));
}
const rt = Symbol.for("vuetify:display");
function ye() {
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 = Fe(rt);
if (!n) throw new Error("Could not find Vuetify display injection");
const t = _(() => 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 = Je(() => e ? {
[`${e}--mobile`]: t.value
} : {});
return Z(E({}, n), {
displayClasses: r,
mobile: t
});
}
const st = { style: { flex: "1" } }, we = /* @__PURE__ */ K({
__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 = ye(), r = _(() => n.size), i = _(() => 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), l = _(() => {
if (i.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";
}
}), a = _(() => {
var m;
return (m = n.dialogId) != null ? m : Symbol("df-dialog");
}), c = N.isTop(a.value), p = e;
function y(m, d = !1) {
(!n.dialogId || !m) && (m ? N.push(a.value) : N.remove(a.value)), d || p("update:model-value", m);
}
const C = _(() => n.modelValue && c.value);
return ve(() => n.modelValue, (m, d) => {
m !== d && y(m, !0);
}, { immediate: !0 }), ge(() => {
N.remove(a.value);
}), (m, d) => {
const v = b("v-icon"), u = b("v-btn"), o = b("v-sheet"), f = b("v-card-title"), k = b("v-card-text"), Ne = b("v-card-actions"), je = b("v-card"), Re = b("v-dialog");
return g(), A(Re, {
modelValue: C.value,
"onUpdate:modelValue": d[1] || (d[1] = (ae) => C.value = ae),
width: l.value,
"max-width": l.value,
fullscreen: i.value,
"retain-focus": !1,
persistent: ""
}, {
default: S(() => [
j(je, null, {
default: S(() => [
j(f, null, {
default: S(() => [
j(o, {
color: n.color || void 0,
class: Te({ "mx-n4 mt-n3 mb-3 d-flex align-center px-4 py-6": !!n.color, "position-relative": m.closable }),
elevation: n.color ? 4 : 0
}, {
default: S(() => [
m.icon ? (g(), A(v, {
key: 0,
class: "me-2",
icon: m.icon
}, null, 8, ["icon"])) : Y("", !0),
z(m.$slots, "title", {}, () => [
m.title instanceof x.MdString ? (g(), A(w(_e), {
key: 1,
source: "title"
})) : (g(), I(M, { key: 0 }, [
D(G(m.title), 1)
], 64))
]),
m.closable ? (g(), A(u, {
key: 1,
icon: "",
variant: "text",
class: "position-absolute",
style: { right: "0.25em" },
onClick: d[0] || (d[0] = (ae) => y(!1))
}, {
default: S(() => [
j(v, { icon: "mdi-close" })
]),
_: 1
})) : Y("", !0)
]),
_: 3
}, 8, ["color", "class", "elevation"])
]),
_: 3
}),
j(k, null, {
default: S(() => [
z(m.$slots, "body", { formControl: m.formControl })
]),
_: 3
}),
j(Ne, null, {
default: S(() => [
Pe("div", st, [
z(m.$slots, "actions")
])
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}, 8, ["modelValue", "width", "max-width", "fullscreen"]);
};
}
}), ot = /* @__PURE__ */ K({
__name: "df-api.component",
setup(s) {
const e = oe(!1);
ve(() => h.value, (r) => {
e.value = r !== null;
});
const n = _(() => {
var i;
const r = (i = h == null ? void 0 : h.value) == null ? void 0 : i.message;
return r ? r instanceof ke ? "md" : ue(r) ? "component" : "string" : "string";
}), t = _(
() => {
var r, i;
return ue((r = h == null ? void 0 : h.value) == null ? void 0 : r.message) ? (i = h == null ? void 0 : h.value) == null ? void 0 : i.message : null;
}
);
return $e(() => {
U.value && console.warn("Seems like there is more than one df-modal-api in the v-dom"), U.value = !0;
}), ge(() => {
U.value = !1;
}), (r, i) => w(h) ? (g(), A(we, {
key: 0,
modelValue: e.value,
"onUpdate:modelValue": i[0] || (i[0] = (l) => e.value = l),
"form-control": w(h).form,
size: w(h).size,
"dialog-id": w(h).dialogId,
title: w(h).title,
color: w(h).color,
icon: w(h).icon
}, {
body: S(() => {
var l, a;
return [
n.value === "string" ? (g(), I(M, { key: 0 }, [
D(G(w(h).message), 1)
], 64)) : n.value === "md" ? (g(), A(w(_e), {
key: 1,
source: String(w(h).message)
}, null, 8, ["source"])) : (g(), A(ee((l = t.value) == null ? void 0 : l.componentName), te(W({ key: 2 }, (a = t.value) == null ? void 0 : a.componentProps)), null, 16))
];
}),
actions: S(() => {
var l;
return [
j(w(Ue), {
actions: Object.values((l = w(h).actions) != null ? l : []),
class: "d-flex justify-end",
style: { gap: ".5em" }
}, null, 8, ["actions"])
];
}),
_: 1
}, 8, ["modelValue", "form-control", "size", "dialog-id", "title", "color", "icon"])) : Y("", !0);
}
}), $ = Symbol("FormBuilder"), Oe = Symbol("FormBuilderBodyProp");
class Se {
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 Ae {
constructor(e) {
this.addCallback = e;
}
generic(e, n) {
const t = new Se(e, n);
return this.addCallback(t), this;
}
nestedForm(e) {
return this.generic($, e);
}
}
class Ce extends Ae {
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 fe {
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 = Ce, r = e);
const i = new t((l) => {
this.components.push(l);
});
return r(i), 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((i) => i[t](...r)), e)
});
return e;
}
toJSON() {
return {
props: this.props,
components: this.components.map((e) => e.toJSON())
};
}
}
class Ve extends le {
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 fe()), 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 J.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 v, u;
if ((!e || !R(e)) && !n) return null;
const t = {}, r = ["start", "end", "center", "auto", "baseline", "stretch"], i = (o) => L(o) || o === "auto" || ne(o), l = (o) => L(o), a = (o) => L(o), c = (o) => O(o) || T(o) && o.every((f) => O(f)) || R(o) && !Array.isArray(o), p = (o) => O(o) ? !0 : T(o) ? o.every(p) : R(o) ? Object.entries(o).every(([f, k]) => O(f) && (O(k) || L(k))) : !1, y = ["cols", "offset", "order"], C = /* @__PURE__ */ new Set([
...y,
...J.flatMap((o) => y.map((f) => `${f}-${o}`)),
"alignSelf",
"class",
"style"
]), m = (v = (e != null ? e : {}).props) != null ? v : {};
Object.keys(m).forEach((o) => {
const f = m[o];
C.has(o) && (o === "alignSelf" ? O(f) && r.includes(f) && (t[o] = f) : o === "class" ? c(f) && (t[o] = f) : o === "style" ? p(f) && (t[o] = f) : o.startsWith("cols") ? i(f) && (t[o] = f) : o.startsWith("offset") ? l(f) && (t[o] = f) : o.startsWith("order") && a(f) && (t[o] = f));
});
const d = new fe(t);
return d.components = [...(u = e == null ? void 0 : e.components) != null ? u : []], d;
}
}
class de {
constructor(e) {
V(this, "props");
V(this, "columns", []);
this.props = e != null ? e : {};
}
col(e, n) {
const t = new Ve(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) => (...i) => (this.col({ cols: 12 / e }, (l) => l.component((a) => a[r](...i))), n)
});
return n;
}
toJSON(e) {
return { props: this.props, columns: this.columns.map((n) => n.toJSON(e)) };
}
}
class Be extends le {
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 J.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 d, v;
if ((!e || !R(e)) && !n) return null;
const t = {}, r = ["start", "center", "end", "baseline", "stretch"], i = ["start", "center", "end", "stretch", "space-between", "space-around", "space-evenly"], l = ["start", "center", "end", "space-between", "space-around", "space-evenly"], a = (u) => O(u) || T(u) && u.every((o) => O(o)) || R(u) && !Array.isArray(u), c = (u) => O(u) ? !0 : T(u) ? u.every(c) : R(u) ? Object.entries(u).every(([o, f]) => O(o) && (O(f) || L(f))) : !1, p = ["align", "align-content", "justify"], y = /* @__PURE__ */ new Set([
...p,
...J.flatMap((u) => p.map((o) => `${o}-${u}`)),
"dense",
"no-gutters",
"class",
"style"
]), C = (d = (e != null ? e : {}).props) != null ? d : {};
Object.keys(C).forEach((u) => {
const o = C[u];
!y.has(u) || o === void 0 || (u === "dense" ? ne(o) && (t[u] = o) : u === "noGutters" ? ne(o) && (t[u] = o) : u === "class" ? a(o) && (t[u] = o) : u === "style" ? c(o) && (t[u] = o) : u.startsWith("align") ? O(o) && r.includes(o) && (t[u] = o) : u.startsWith("align-content") ? O(o) && i.includes(o) && (t[u] = o) : u.startsWith("justify") && O(o) && l.includes(o) && (t[u] = o));
});
const m = new de(t);
return m.columns = [...(v = e == null ? void 0 : e.columns) != null ? v : []], m;
}
}
class pe {
constructor() {
V(this, "rows", []);
}
row(e, n) {
const t = new Be(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: (i, l) => l === "simple" ? (a = 1) => this.simple(a) : (...a) => ((!n || t >= e) && (this.row({}, (c) => (n = c, c)), t = 0), n.col({ cols: 12 / e }, (c) => c.component((p) => p[l](...a))), t++, r)
});
return r;
}
toJSON(e) {
return { rows: this.rows.map((n) => n.toJSON(e)) };
}
}
class se extends le {
row(e, n) {
return this._value.row(e, n), this;
}
breakpoint(e, n) {
return this._value[e] || (this._value[e] = new pe()), 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 J.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 || !R(e)) && !n) return null;
const t = new pe();
return n && (t.rows = []), e && T(e.rows) && (t.rows = e.rows), t.rows.length || n ? t : null;
}
}
const St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Column: Ve,
Component: Se,
ComponentBuilderBase: Ae,
FormBuilder: se,
FormBuilderBodyProp: Oe,
FormBuilderName: $,
Row: Be,
VuetifyInputsComponentBuilder: Ce
}, Symbol.toStringTag, { value: "Module" })), be = /* @__PURE__ */ K({
__name: "component-render",
props: {
name: {},
props: { default: () => ({}) },
components: { default: () => ({}) }
},
setup(s) {
const e = s, n = _(() => {
const c = e.name;
return typeof c == "symbol" ? c.description || "SymbolComponent" : c;
}), t = _(() => e.props), r = _(() => {
var c;
return (c = t.value) == null ? void 0 : c[Oe];
}), i = _(() => e.components[e.name] || null), l = w(e.components)[$], a = _(() => e.name === $);
return (c, p) => i.value ? (g(), A(ee(i.value), te(W({ key: 0 }, t.value)), {
default: S(() => [
D(G(r.value), 1)
]),
_: 1
}, 16)) : a.value ? (g(), A(w(l), {
key: 1,
layout: t.value,
components: c.components
}, null, 8, ["layout", "components"])) : (g(), A(ee(n.value), te(W({ key: 2 }, t.value)), {
default: S(() => [
D(G(r.value), 1)
]),
_: 1
}, 16));
}
}), lt = { class: "form-layout" }, at = /* @__PURE__ */ K({
__name: "form-render",
props: {
layout: {},
components: { default: () => ({}) }
},
setup(s) {
const e = s, n = _(
() => e.layout instanceof se ? e.layout : new se(e.layout)
), t = ye(), r = _(() => {
const l = De(t);
return n.value.getOptionsForBreakpoint(l).toJSON();
}), i = _(() => {
var l;
return Z(E({}, e.components), { [$]: (l = he()) == null ? void 0 : l.type });
});
return (l, a) => {
const c = b("v-col"), p = b("v-row");
return g(), I("div", lt, [
(g(!0), I(M, null, H(r.value.rows, (y, C) => (g(), A(p, { key: C }, {
default: S(() => [
(g(!0), I(M, null, H(y.columns, (m, d) => (g(), A(c, W({
key: d,
ref_for: !0
}, m.props), {
default: S(() => [
(g(!0), I(M, null, H(m.components, (v, u) => (g(), A(be, {
key: u,
name: v.name,
props: v.props,
components: i.value
}, null, 8, ["name", "props", "components"]))), 128))
]),
_: 2
}, 1040))), 128))
]),
_: 2
}, 1024))), 128))
]);
};
}
}), it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
ComponentRender: be,
DfModal: we,
FormRender: at,
ModalView: ot
}, Symbol.toStringTag, { value: "Module" })), ut = /* @__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" })), At = {
install: (s, e) => {
var n, t;
(n = e == null ? void 0 : e.registerComponents) != null && n && Object.entries(it).map(([r, i]) => s.component(r, i)), (t = e == null ? void 0 : e.registerVuetifyComponents) != null && t && Object.entries(ut).map(([r, i]) => {
try {
return s.component(r, i);
} catch (l) {
if (!l.message.includes("already registered"))
throw l;
}
return null;
});
}
};
export {
be as ComponentRender,
we as DfModal,
B as DialogSize,
At as DynamicFormsModalFormKit,
se as FormBuilder,
Oe as FormBuilderBodyProp,
St as FormLayout,
at as FormRender,
ot as ModalView,
me as defaultDialogSize,
Ot as modal
};
//# sourceMappingURL=dynamicforms-vuetify-modal-form-kit.js.map