form-builder-vue3
Version:
A Vue 3 form builder component library with drag and drop functionality
1,620 lines (1,602 loc) • 118 kB
JavaScript
import { inject as at, effectScope as dt, reactive as Ce, watch as H, computed as J, ref as I, createElementBlock as f, createCommentVNode as F, openBlock as g, createElementVNode as s, toDisplayString as c, normalizeClass as _, resolveComponent as ct, createVNode as ut, Fragment as A, renderList as P, withDirectives as E, vModelText as D, renderSlot as se, vModelSelect as ae, withModifiers as ke, createTextVNode as mt, vModelCheckbox as te, vModelRadio as de, onMounted as Ee, vShow as ft } from "vue";
function gt() {
return Se().__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
function Se() {
return typeof navigator < "u" && typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : {};
}
const ht = typeof Proxy == "function", bt = "devtools-plugin:setup", yt = "plugin:settings:set";
let Y, ce;
function vt() {
var t;
return Y !== void 0 || (typeof window < "u" && window.performance ? (Y = !0, ce = window.performance) : typeof globalThis < "u" && (!((t = globalThis.perf_hooks) === null || t === void 0) && t.performance) ? (Y = !0, ce = globalThis.perf_hooks.performance) : Y = !1), Y;
}
function xt() {
return vt() ? ce.now() : Date.now();
}
class pt {
constructor(o, r) {
this.target = null, this.targetQueue = [], this.onQueue = [], this.plugin = o, this.hook = r;
const e = {};
if (o.settings)
for (const n in o.settings) {
const i = o.settings[n];
e[n] = i.defaultValue;
}
const u = `__vue-devtools-plugin-settings__${o.id}`;
let a = Object.assign({}, e);
try {
const n = localStorage.getItem(u), i = JSON.parse(n);
Object.assign(a, i);
} catch {
}
this.fallbacks = {
getSettings() {
return a;
},
setSettings(n) {
try {
localStorage.setItem(u, JSON.stringify(n));
} catch {
}
a = n;
},
now() {
return xt();
}
}, r && r.on(yt, (n, i) => {
n === this.plugin.id && this.fallbacks.setSettings(i);
}), this.proxiedOn = new Proxy({}, {
get: (n, i) => this.target ? this.target.on[i] : (...m) => {
this.onQueue.push({
method: i,
args: m
});
}
}), this.proxiedTarget = new Proxy({}, {
get: (n, i) => this.target ? this.target[i] : i === "on" ? this.proxiedOn : Object.keys(this.fallbacks).includes(i) ? (...m) => (this.targetQueue.push({
method: i,
args: m,
resolve: () => {
}
}), this.fallbacks[i](...m)) : (...m) => new Promise((v) => {
this.targetQueue.push({
method: i,
args: m,
resolve: v
});
})
});
}
async setRealTarget(o) {
this.target = o;
for (const r of this.onQueue)
this.target.on[r.method](...r.args);
for (const r of this.targetQueue)
r.resolve(await this.target[r.method](...r.args));
}
}
function _t(t, o) {
const r = t, e = Se(), u = gt(), a = ht && r.enableEarlyProxy;
if (u && (e.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !a))
u.emit(bt, t, o);
else {
const n = a ? new pt(r, u) : null;
(e.__VUE_DEVTOOLS_PLUGINS__ = e.__VUE_DEVTOOLS_PLUGINS__ || []).push({
pluginDescriptor: r,
setupFn: o,
proxy: n
}), n && o(n.proxiedTarget);
}
}
/*!
* vuex v4.1.0
* (c) 2022 Evan You
* @license MIT
*/
var Te = "store";
function Oe(t) {
return t === void 0 && (t = null), at(t !== null ? t : Te);
}
function W(t, o) {
Object.keys(t).forEach(function(r) {
return o(t[r], r);
});
}
function wt(t) {
return t !== null && typeof t == "object";
}
function Ft(t) {
return t && typeof t.then == "function";
}
function j(t, o) {
if (!t)
throw new Error("[vuex] " + o);
}
function Ct(t, o) {
return function() {
return t(o);
};
}
function Ie(t, o, r) {
return o.indexOf(t) < 0 && (r && r.prepend ? o.unshift(t) : o.push(t)), function() {
var e = o.indexOf(t);
e > -1 && o.splice(e, 1);
};
}
function De(t, o) {
t._actions = /* @__PURE__ */ Object.create(null), t._mutations = /* @__PURE__ */ Object.create(null), t._wrappedGetters = /* @__PURE__ */ Object.create(null), t._modulesNamespaceMap = /* @__PURE__ */ Object.create(null);
var r = t.state;
re(t, r, [], t._modules.root, !0), me(t, r, o);
}
function me(t, o, r) {
var e = t._state, u = t._scope;
t.getters = {}, t._makeLocalGettersCache = /* @__PURE__ */ Object.create(null);
var a = t._wrappedGetters, n = {}, i = {}, m = dt(!0);
m.run(function() {
W(a, function(v, y) {
n[y] = Ct(v, t), i[y] = J(function() {
return n[y]();
}), Object.defineProperty(t.getters, y, {
get: function() {
return i[y].value;
},
enumerable: !0
// for local getters
});
});
}), t._state = Ce({
data: o
}), t._scope = m, t.strict && Ot(t), e && r && t._withCommit(function() {
e.data = null;
}), u && u.stop();
}
function re(t, o, r, e, u) {
var a = !r.length, n = t._modules.getNamespace(r);
if (e.namespaced && (t._modulesNamespaceMap[n] && process.env.NODE_ENV !== "production" && console.error("[vuex] duplicate namespace " + n + " for the namespaced module " + r.join("/")), t._modulesNamespaceMap[n] = e), !a && !u) {
var i = fe(o, r.slice(0, -1)), m = r[r.length - 1];
t._withCommit(function() {
process.env.NODE_ENV !== "production" && m in i && console.warn(
'[vuex] state field "' + m + '" was overridden by a module with the same name at "' + r.join(".") + '"'
), i[m] = e.state;
});
}
var v = e.context = kt(t, n, r);
e.forEachMutation(function(y, x) {
var k = n + x;
Et(t, k, y, v);
}), e.forEachAction(function(y, x) {
var k = y.root ? x : n + x, p = y.handler || y;
St(t, k, p, v);
}), e.forEachGetter(function(y, x) {
var k = n + x;
Tt(t, k, y, v);
}), e.forEachChild(function(y, x) {
re(t, o, r.concat(x), y, u);
});
}
function kt(t, o, r) {
var e = o === "", u = {
dispatch: e ? t.dispatch : function(a, n, i) {
var m = oe(a, n, i), v = m.payload, y = m.options, x = m.type;
if ((!y || !y.root) && (x = o + x, process.env.NODE_ENV !== "production" && !t._actions[x])) {
console.error("[vuex] unknown local action type: " + m.type + ", global type: " + x);
return;
}
return t.dispatch(x, v);
},
commit: e ? t.commit : function(a, n, i) {
var m = oe(a, n, i), v = m.payload, y = m.options, x = m.type;
if ((!y || !y.root) && (x = o + x, process.env.NODE_ENV !== "production" && !t._mutations[x])) {
console.error("[vuex] unknown local mutation type: " + m.type + ", global type: " + x);
return;
}
t.commit(x, v, y);
}
};
return Object.defineProperties(u, {
getters: {
get: e ? function() {
return t.getters;
} : function() {
return Ne(t, o);
}
},
state: {
get: function() {
return fe(t.state, r);
}
}
}), u;
}
function Ne(t, o) {
if (!t._makeLocalGettersCache[o]) {
var r = {}, e = o.length;
Object.keys(t.getters).forEach(function(u) {
if (u.slice(0, e) === o) {
var a = u.slice(e);
Object.defineProperty(r, a, {
get: function() {
return t.getters[u];
},
enumerable: !0
});
}
}), t._makeLocalGettersCache[o] = r;
}
return t._makeLocalGettersCache[o];
}
function Et(t, o, r, e) {
var u = t._mutations[o] || (t._mutations[o] = []);
u.push(function(n) {
r.call(t, e.state, n);
});
}
function St(t, o, r, e) {
var u = t._actions[o] || (t._actions[o] = []);
u.push(function(n) {
var i = r.call(t, {
dispatch: e.dispatch,
commit: e.commit,
getters: e.getters,
state: e.state,
rootGetters: t.getters,
rootState: t.state
}, n);
return Ft(i) || (i = Promise.resolve(i)), t._devtoolHook ? i.catch(function(m) {
throw t._devtoolHook.emit("vuex:error", m), m;
}) : i;
});
}
function Tt(t, o, r, e) {
if (t._wrappedGetters[o]) {
process.env.NODE_ENV !== "production" && console.error("[vuex] duplicate getter key: " + o);
return;
}
t._wrappedGetters[o] = function(a) {
return r(
e.state,
// local state
e.getters,
// local getters
a.state,
// root state
a.getters
// root getters
);
};
}
function Ot(t) {
H(function() {
return t._state.data;
}, function() {
process.env.NODE_ENV !== "production" && j(t._committing, "do not mutate vuex store state outside mutation handlers.");
}, { deep: !0, flush: "sync" });
}
function fe(t, o) {
return o.reduce(function(r, e) {
return r[e];
}, t);
}
function oe(t, o, r) {
return wt(t) && t.type && (r = o, o = t, t = t.type), process.env.NODE_ENV !== "production" && j(typeof t == "string", "expects string as the type, but found " + typeof t + "."), { type: t, payload: o, options: r };
}
var It = "vuex bindings", ve = "vuex:mutations", ie = "vuex:actions", X = "vuex", Dt = 0;
function Nt(t, o) {
_t(
{
id: "org.vuejs.vuex",
app: t,
label: "Vuex",
homepage: "https://next.vuex.vuejs.org/",
logo: "https://vuejs.org/images/icons/favicon-96x96.png",
packageName: "vuex",
componentStateTypes: [It]
},
function(r) {
r.addTimelineLayer({
id: ve,
label: "Vuex Mutations",
color: xe
}), r.addTimelineLayer({
id: ie,
label: "Vuex Actions",
color: xe
}), r.addInspector({
id: X,
label: "Vuex",
icon: "storage",
treeFilterPlaceholder: "Filter stores..."
}), r.on.getInspectorTree(function(e) {
if (e.app === t && e.inspectorId === X)
if (e.filter) {
var u = [];
Me(u, o._modules.root, e.filter, ""), e.rootNodes = u;
} else
e.rootNodes = [
Re(o._modules.root, "")
];
}), r.on.getInspectorState(function(e) {
if (e.app === t && e.inspectorId === X) {
var u = e.nodeId;
Ne(o, u), e.state = Rt(
qt(o._modules, u),
u === "root" ? o.getters : o._makeLocalGettersCache,
u
);
}
}), r.on.editInspectorState(function(e) {
if (e.app === t && e.inspectorId === X) {
var u = e.nodeId, a = e.path;
u !== "root" && (a = u.split("/").filter(Boolean).concat(a)), o._withCommit(function() {
e.set(o._state.data, a, e.state.value);
});
}
}), o.subscribe(function(e, u) {
var a = {};
e.payload && (a.payload = e.payload), a.state = u, r.notifyComponentUpdate(), r.sendInspectorTree(X), r.sendInspectorState(X), r.addTimelineEvent({
layerId: ve,
event: {
time: Date.now(),
title: e.type,
data: a
}
});
}), o.subscribeAction({
before: function(e, u) {
var a = {};
e.payload && (a.payload = e.payload), e._id = Dt++, e._time = Date.now(), a.state = u, r.addTimelineEvent({
layerId: ie,
event: {
time: e._time,
title: e.type,
groupId: e._id,
subtitle: "start",
data: a
}
});
},
after: function(e, u) {
var a = {}, n = Date.now() - e._time;
a.duration = {
_custom: {
type: "duration",
display: n + "ms",
tooltip: "Action duration",
value: n
}
}, e.payload && (a.payload = e.payload), a.state = u, r.addTimelineEvent({
layerId: ie,
event: {
time: Date.now(),
title: e.type,
groupId: e._id,
subtitle: "end",
data: a
}
});
}
});
}
);
}
var xe = 8702998, Vt = 6710886, $t = 16777215, Ve = {
label: "namespaced",
textColor: $t,
backgroundColor: Vt
};
function $e(t) {
return t && t !== "root" ? t.split("/").slice(-2, -1)[0] : "Root";
}
function Re(t, o) {
return {
id: o || "root",
// all modules end with a `/`, we want the last segment only
// cart/ -> cart
// nested/cart/ -> cart
label: $e(o),
tags: t.namespaced ? [Ve] : [],
children: Object.keys(t._children).map(
function(r) {
return Re(
t._children[r],
o + r + "/"
);
}
)
};
}
function Me(t, o, r, e) {
e.includes(r) && t.push({
id: e || "root",
label: e.endsWith("/") ? e.slice(0, e.length - 1) : e || "Root",
tags: o.namespaced ? [Ve] : []
}), Object.keys(o._children).forEach(function(u) {
Me(t, o._children[u], r, e + u + "/");
});
}
function Rt(t, o, r) {
o = r === "root" ? o : o[r];
var e = Object.keys(o), u = {
state: Object.keys(t.state).map(function(n) {
return {
key: n,
editable: !0,
value: t.state[n]
};
})
};
if (e.length) {
var a = Mt(o);
u.getters = Object.keys(a).map(function(n) {
return {
key: n.endsWith("/") ? $e(n) : n,
editable: !1,
value: ue(function() {
return a[n];
})
};
});
}
return u;
}
function Mt(t) {
var o = {};
return Object.keys(t).forEach(function(r) {
var e = r.split("/");
if (e.length > 1) {
var u = o, a = e.pop();
e.forEach(function(n) {
u[n] || (u[n] = {
_custom: {
value: {},
display: n,
tooltip: "Module",
abstract: !0
}
}), u = u[n]._custom.value;
}), u[a] = ue(function() {
return t[r];
});
} else
o[r] = ue(function() {
return t[r];
});
}), o;
}
function qt(t, o) {
var r = o.split("/").filter(function(e) {
return e;
});
return r.reduce(
function(e, u, a) {
var n = e[u];
if (!n)
throw new Error('Missing module "' + u + '" for path "' + o + '".');
return a === r.length - 1 ? n : n._children;
},
o === "root" ? t : t.root._children
);
}
function ue(t) {
try {
return t();
} catch (o) {
return o;
}
}
var B = function(o, r) {
this.runtime = r, this._children = /* @__PURE__ */ Object.create(null), this._rawModule = o;
var e = o.state;
this.state = (typeof e == "function" ? e() : e) || {};
}, qe = { namespaced: { configurable: !0 } };
qe.namespaced.get = function() {
return !!this._rawModule.namespaced;
};
B.prototype.addChild = function(o, r) {
this._children[o] = r;
};
B.prototype.removeChild = function(o) {
delete this._children[o];
};
B.prototype.getChild = function(o) {
return this._children[o];
};
B.prototype.hasChild = function(o) {
return o in this._children;
};
B.prototype.update = function(o) {
this._rawModule.namespaced = o.namespaced, o.actions && (this._rawModule.actions = o.actions), o.mutations && (this._rawModule.mutations = o.mutations), o.getters && (this._rawModule.getters = o.getters);
};
B.prototype.forEachChild = function(o) {
W(this._children, o);
};
B.prototype.forEachGetter = function(o) {
this._rawModule.getters && W(this._rawModule.getters, o);
};
B.prototype.forEachAction = function(o) {
this._rawModule.actions && W(this._rawModule.actions, o);
};
B.prototype.forEachMutation = function(o) {
this._rawModule.mutations && W(this._rawModule.mutations, o);
};
Object.defineProperties(B.prototype, qe);
var z = function(o) {
this.register([], o, !1);
};
z.prototype.get = function(o) {
return o.reduce(function(r, e) {
return r.getChild(e);
}, this.root);
};
z.prototype.getNamespace = function(o) {
var r = this.root;
return o.reduce(function(e, u) {
return r = r.getChild(u), e + (r.namespaced ? u + "/" : "");
}, "");
};
z.prototype.update = function(o) {
je([], this.root, o);
};
z.prototype.register = function(o, r, e) {
var u = this;
e === void 0 && (e = !0), process.env.NODE_ENV !== "production" && Be(o, r);
var a = new B(r, e);
if (o.length === 0)
this.root = a;
else {
var n = this.get(o.slice(0, -1));
n.addChild(o[o.length - 1], a);
}
r.modules && W(r.modules, function(i, m) {
u.register(o.concat(m), i, e);
});
};
z.prototype.unregister = function(o) {
var r = this.get(o.slice(0, -1)), e = o[o.length - 1], u = r.getChild(e);
if (!u) {
process.env.NODE_ENV !== "production" && console.warn(
"[vuex] trying to unregister module '" + e + "', which is not registered"
);
return;
}
u.runtime && r.removeChild(e);
};
z.prototype.isRegistered = function(o) {
var r = this.get(o.slice(0, -1)), e = o[o.length - 1];
return r ? r.hasChild(e) : !1;
};
function je(t, o, r) {
if (process.env.NODE_ENV !== "production" && Be(t, r), o.update(r), r.modules)
for (var e in r.modules) {
if (!o.getChild(e)) {
process.env.NODE_ENV !== "production" && console.warn(
"[vuex] trying to add a new module '" + e + "' on hot reloading, manual reload is needed"
);
return;
}
je(
t.concat(e),
o.getChild(e),
r.modules[e]
);
}
}
var pe = {
assert: function(t) {
return typeof t == "function";
},
expected: "function"
}, jt = {
assert: function(t) {
return typeof t == "function" || typeof t == "object" && typeof t.handler == "function";
},
expected: 'function or object with "handler" function'
}, _e = {
getters: pe,
mutations: pe,
actions: jt
};
function Be(t, o) {
Object.keys(_e).forEach(function(r) {
if (o[r]) {
var e = _e[r];
W(o[r], function(u, a) {
j(
e.assert(u),
Bt(t, r, a, u, e.expected)
);
});
}
});
}
function Bt(t, o, r, e, u) {
var a = o + " should be " + u + ' but "' + o + "." + r + '"';
return t.length > 0 && (a += ' in module "' + t.join(".") + '"'), a += " is " + JSON.stringify(e) + ".", a;
}
function Ut(t) {
return new R(t);
}
var R = function t(o) {
var r = this;
o === void 0 && (o = {}), process.env.NODE_ENV !== "production" && (j(typeof Promise < "u", "vuex requires a Promise polyfill in this browser."), j(this instanceof t, "store must be called with the new operator."));
var e = o.plugins;
e === void 0 && (e = []);
var u = o.strict;
u === void 0 && (u = !1);
var a = o.devtools;
this._committing = !1, this._actions = /* @__PURE__ */ Object.create(null), this._actionSubscribers = [], this._mutations = /* @__PURE__ */ Object.create(null), this._wrappedGetters = /* @__PURE__ */ Object.create(null), this._modules = new z(o), this._modulesNamespaceMap = /* @__PURE__ */ Object.create(null), this._subscribers = [], this._makeLocalGettersCache = /* @__PURE__ */ Object.create(null), this._scope = null, this._devtools = a;
var n = this, i = this, m = i.dispatch, v = i.commit;
this.dispatch = function(k, p) {
return m.call(n, k, p);
}, this.commit = function(k, p, U) {
return v.call(n, k, p, U);
}, this.strict = u;
var y = this._modules.root.state;
re(this, y, [], this._modules.root), me(this, y), e.forEach(function(x) {
return x(r);
});
}, ge = { state: { configurable: !0 } };
R.prototype.install = function(o, r) {
o.provide(r || Te, this), o.config.globalProperties.$store = this;
var e = this._devtools !== void 0 ? this._devtools : process.env.NODE_ENV !== "production" || !1;
e && Nt(o, this);
};
ge.state.get = function() {
return this._state.data;
};
ge.state.set = function(t) {
process.env.NODE_ENV !== "production" && j(!1, "use store.replaceState() to explicit replace store state.");
};
R.prototype.commit = function(o, r, e) {
var u = this, a = oe(o, r, e), n = a.type, i = a.payload, m = a.options, v = { type: n, payload: i }, y = this._mutations[n];
if (!y) {
process.env.NODE_ENV !== "production" && console.error("[vuex] unknown mutation type: " + n);
return;
}
this._withCommit(function() {
y.forEach(function(k) {
k(i);
});
}), this._subscribers.slice().forEach(function(x) {
return x(v, u.state);
}), process.env.NODE_ENV !== "production" && m && m.silent && console.warn(
"[vuex] mutation type: " + n + ". Silent option has been removed. Use the filter functionality in the vue-devtools"
);
};
R.prototype.dispatch = function(o, r) {
var e = this, u = oe(o, r), a = u.type, n = u.payload, i = { type: a, payload: n }, m = this._actions[a];
if (!m) {
process.env.NODE_ENV !== "production" && console.error("[vuex] unknown action type: " + a);
return;
}
try {
this._actionSubscribers.slice().filter(function(y) {
return y.before;
}).forEach(function(y) {
return y.before(i, e.state);
});
} catch (y) {
process.env.NODE_ENV !== "production" && (console.warn("[vuex] error in before action subscribers: "), console.error(y));
}
var v = m.length > 1 ? Promise.all(m.map(function(y) {
return y(n);
})) : m[0](n);
return new Promise(function(y, x) {
v.then(function(k) {
try {
e._actionSubscribers.filter(function(p) {
return p.after;
}).forEach(function(p) {
return p.after(i, e.state);
});
} catch (p) {
process.env.NODE_ENV !== "production" && (console.warn("[vuex] error in after action subscribers: "), console.error(p));
}
y(k);
}, function(k) {
try {
e._actionSubscribers.filter(function(p) {
return p.error;
}).forEach(function(p) {
return p.error(i, e.state, k);
});
} catch (p) {
process.env.NODE_ENV !== "production" && (console.warn("[vuex] error in error action subscribers: "), console.error(p));
}
x(k);
});
});
};
R.prototype.subscribe = function(o, r) {
return Ie(o, this._subscribers, r);
};
R.prototype.subscribeAction = function(o, r) {
var e = typeof o == "function" ? { before: o } : o;
return Ie(e, this._actionSubscribers, r);
};
R.prototype.watch = function(o, r, e) {
var u = this;
return process.env.NODE_ENV !== "production" && j(typeof o == "function", "store.watch only accepts a function."), H(function() {
return o(u.state, u.getters);
}, r, Object.assign({}, e));
};
R.prototype.replaceState = function(o) {
var r = this;
this._withCommit(function() {
r._state.data = o;
});
};
R.prototype.registerModule = function(o, r, e) {
e === void 0 && (e = {}), typeof o == "string" && (o = [o]), process.env.NODE_ENV !== "production" && (j(Array.isArray(o), "module path must be a string or an Array."), j(o.length > 0, "cannot register the root module by using registerModule.")), this._modules.register(o, r), re(this, this.state, o, this._modules.get(o), e.preserveState), me(this, this.state);
};
R.prototype.unregisterModule = function(o) {
var r = this;
typeof o == "string" && (o = [o]), process.env.NODE_ENV !== "production" && j(Array.isArray(o), "module path must be a string or an Array."), this._modules.unregister(o), this._withCommit(function() {
var e = fe(r.state, o.slice(0, -1));
delete e[o[o.length - 1]];
}), De(this);
};
R.prototype.hasModule = function(o) {
return typeof o == "string" && (o = [o]), process.env.NODE_ENV !== "production" && j(Array.isArray(o), "module path must be a string or an Array."), this._modules.isRegistered(o);
};
R.prototype.hotUpdate = function(o) {
this._modules.update(o), De(this, !0);
};
R.prototype._withCommit = function(o) {
var r = this._committing;
this._committing = !0, o(), this._committing = r;
};
Object.defineProperties(R.prototype, ge);
const V = [];
for (let t = 0; t < 256; ++t)
V.push((t + 256).toString(16).slice(1));
function At(t, o = 0) {
return (V[t[o + 0]] + V[t[o + 1]] + V[t[o + 2]] + V[t[o + 3]] + "-" + V[t[o + 4]] + V[t[o + 5]] + "-" + V[t[o + 6]] + V[t[o + 7]] + "-" + V[t[o + 8]] + V[t[o + 9]] + "-" + V[t[o + 10]] + V[t[o + 11]] + V[t[o + 12]] + V[t[o + 13]] + V[t[o + 14]] + V[t[o + 15]]).toLowerCase();
}
let le;
const Pt = new Uint8Array(16);
function Lt() {
if (!le) {
if (typeof crypto > "u" || !crypto.getRandomValues)
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
le = crypto.getRandomValues.bind(crypto);
}
return le(Pt);
}
const Gt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), we = { randomUUID: Gt };
function Ue(t, o, r) {
if (we.randomUUID && !t)
return we.randomUUID();
t = t || {};
const e = t.random ?? t.rng?.() ?? Lt();
if (e.length < 16)
throw new Error("Random bytes length must be >= 16");
return e[6] = e[6] & 15 | 64, e[8] = e[8] & 63 | 128, At(e);
}
const he = (t, o) => {
const r = t.__vccOpts || t;
for (const [e, u] of o)
r[e] = u;
return r;
}, Ht = {
name: "NotificationModal",
props: {
modelValue: {
type: Boolean,
default: !1
},
title: {
type: String,
default: "Notification"
},
message: {
type: String,
required: !0
},
buttonText: {
type: String,
default: "OK"
},
timeout: {
type: Number,
default: 0
// 0 means no auto-close
},
// Color customization
color: {
type: [String, Object],
default: "indigo",
validator: (t) => {
if (typeof t == "string")
return [
"slate",
"gray",
"zinc",
"neutral",
"stone",
"red",
"orange",
"amber",
"yellow",
"lime",
"green",
"emerald",
"teal",
"cyan",
"sky",
"blue",
"indigo",
"violet",
"purple",
"fuchsia",
"pink",
"rose"
].includes(t);
if (typeof t == "object" && t !== null) {
if (!t.name || typeof t.name != "string" || !t.colors || typeof t.colors != "object")
return !1;
const o = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"], r = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
for (const e of o)
if (!t.colors[e] || !r.test(t.colors[e]))
return !1;
return !0;
}
return !1;
}
}
},
emits: ["update:modelValue"],
setup(t, { emit: o }) {
const r = I(t.modelValue);
H(() => t.modelValue, (n) => {
r.value = n, n && t.timeout > 0 && setTimeout(() => {
e();
}, t.timeout);
});
const e = () => {
r.value = !1, o("update:modelValue", !1);
}, u = (n) => {
const i = `custom-color-${n.name}`, m = document.getElementById(i);
m && m.remove();
const v = [];
Object.entries(n.colors).forEach(([x, k]) => {
v.push(`.text-${n.name}-${x} { color: ${k} !important; }`), v.push(`.bg-${n.name}-${x} { background-color: ${k} !important; }`), v.push(`.border-${n.name}-${x} { border-color: ${k} !important; }`), v.push(`.focus\\:ring-${n.name}-${x}:focus { --tw-ring-color: ${k} !important; }`), v.push(`.focus\\:border-${n.name}-${x}:focus { border-color: ${k} !important; }`), v.push(`.hover\\:bg-${n.name}-${x}:hover { background-color: ${k} !important; }`), v.push(`.hover\\:text-${n.name}-${x}:hover { color: ${k} !important; }`);
});
const y = document.createElement("style");
y.id = i, y.textContent = v.join(`
`), document.head.appendChild(y);
}, a = J(() => {
const n = t.color;
let i;
return typeof n == "string" ? i = n : typeof n == "object" && n.name && (i = n.name, u(n)), {
// Background colors
bg600: `bg-${i}-600`,
bg700: `bg-${i}-700`,
// Hover background colors
hoverBg700: `hover:bg-${i}-700`,
// Ring colors for focus states
ringOffset: "focus:ring-offset-2",
ring: "focus:ring-2",
ringColor: `focus:ring-${i}-500`
};
});
return {
show: r,
close: e,
colorClasses: a
};
}
}, Kt = {
key: 0,
class: "fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50"
}, Jt = { class: "bg-white rounded-lg shadow-xl max-w-md w-full p-6" }, Wt = { class: "text-lg font-medium text-gray-900 mb-4" }, zt = { class: "mb-6" }, Qt = { class: "text-gray-700" }, Yt = { class: "flex justify-end" };
function Xt(t, o, r, e, u, a) {
return e.show ? (g(), f("div", Kt, [
s("div", Jt, [
s("h3", Wt, c(r.title), 1),
s("div", zt, [
s("p", Qt, c(r.message), 1)
]),
s("div", Yt, [
s("button", {
onClick: o[0] || (o[0] = (...n) => e.close && e.close(...n)),
class: _(`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${e.colorClasses.bg600} ${e.colorClasses.hoverBg700} focus:outline-none ${e.colorClasses.ring} ${e.colorClasses.ringOffset} ${e.colorClasses.ringColor}`)
}, c(r.buttonText), 3)
])
])
])) : F("", !0);
}
const Ae = /* @__PURE__ */ he(Ht, [["render", Xt]]), Zt = {
name: "FormBuilder",
components: { NotificationModal: Ae },
props: {
// Form data
initialForm: {
type: Object,
default: () => ({
id: null,
name: "",
fields: [],
endpoint: "",
method: "POST",
headers: {}
})
},
// Component configuration
components: {
type: Array,
default: () => []
},
customFields: {
type: Array,
default: () => []
},
activeFieldKeys: {
type: Array,
default: () => []
},
// Required components that are always visible and cannot be modified
requiredComponents: {
type: Array,
default: () => []
},
// UI configuration
showComponentSelector: {
type: Boolean,
default: !0
},
showFormSettings: {
type: Boolean,
default: !0
},
showFormName: {
type: Boolean,
default: !0
},
showSaveButton: {
type: Boolean,
default: !0
},
showExportButton: {
type: Boolean,
default: !0
},
showHeaders: {
type: Boolean,
default: !0
},
// Text customization
componentSelectorTitle: {
type: String,
default: "Components"
},
formSettingsTitle: {
type: String,
default: "Form Settings"
},
exportFormatsTitle: {
type: String,
default: "Export Format"
},
formNameLabel: {
type: String,
default: "Form Name"
},
formNamePlaceholder: {
type: String,
default: "Enter form name"
},
saveButtonText: {
type: String,
default: "Save Form"
},
exportButtonText: {
type: String,
default: "Export Code"
},
editButtonText: {
type: String,
default: "Edit"
},
deleteButtonText: {
type: String,
default: "Delete"
},
emptyFormText: {
type: String,
default: "Drag and drop components here to build your form"
},
endpointLabel: {
type: String,
default: "Endpoint"
},
endpointPlaceholder: {
type: String,
default: "https://api.example.com/submit"
},
methodLabel: {
type: String,
default: "HTTP Method"
},
headersLabel: {
type: String,
default: "Headers"
},
headerKeyPlaceholder: {
type: String,
default: "Key"
},
headerValuePlaceholder: {
type: String,
default: "Value"
},
addHeaderButtonText: {
type: String,
default: "Add Header"
},
editModalTitle: {
type: String,
default: "Edit"
},
fieldLabelText: {
type: String,
default: "Label"
},
fieldKeyText: {
type: String,
default: "Key"
},
fieldPlaceholderText: {
type: String,
default: "Placeholder"
},
fieldRequiredText: {
type: String,
default: "Required"
},
fieldWidthText: {
type: String,
default: "Field Width"
},
fieldWidthFullText: {
type: String,
default: "Full Width"
},
fieldWidthHalfText: {
type: String,
default: "Half Width"
},
validationTitle: {
type: String,
default: "Validation"
},
minLengthText: {
type: String,
default: "Min Length"
},
maxLengthText: {
type: String,
default: "Max Length"
},
minValueText: {
type: String,
default: "Min Value"
},
maxValueText: {
type: String,
default: "Max Value"
},
patternText: {
type: String,
default: "Pattern (Regex)"
},
optionsTitle: {
type: String,
default: "Options"
},
optionValuePlaceholder: {
type: String,
default: "Value"
},
optionLabelPlaceholder: {
type: String,
default: "Label"
},
removeOptionText: {
type: String,
default: "Remove"
},
addOptionText: {
type: String,
default: "Add Option"
},
cancelButtonText: {
type: String,
default: "Cancel"
},
exportModalTitle: {
type: String,
default: "Export Form Code"
},
copyButtonText: {
type: String,
default: "Copy to Clipboard"
},
closeButtonText: {
type: String,
default: "Close"
},
deleteConfirmTitle: {
type: String,
default: "Confirm Delete"
},
deleteConfirmMessage: {
type: String,
default: "Are you sure you want to delete this field? This action cannot be undone."
},
// Other configuration
httpMethods: {
type: Array,
default: () => ["GET", "POST", "PUT", "PATCH", "DELETE"]
},
exportFormats: {
type: Array,
default: () => [
{ value: "vue", label: "Vue/Nuxt Component" },
{ value: "json", label: "JSON (Importable)" },
{ value: "html", label: "Embeddable HTML" }
]
},
storeModuleName: {
type: String,
default: "formBuilder"
},
formNameId: {
type: String,
default: "form-name"
},
// Color customization
color: {
type: [String, Object],
default: "indigo",
validator: (t) => {
if (typeof t == "string")
return [
"slate",
"gray",
"zinc",
"neutral",
"stone",
"red",
"orange",
"amber",
"yellow",
"lime",
"green",
"emerald",
"teal",
"cyan",
"sky",
"blue",
"indigo",
"violet",
"purple",
"fuchsia",
"pink",
"rose"
].includes(t);
if (typeof t == "object" && t !== null) {
if (!t.name || typeof t.name != "string" || !t.colors || typeof t.colors != "object")
return !1;
const o = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"], r = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
for (const e of o)
if (!t.colors[e] || !r.test(t.colors[e]))
return !1;
return !0;
}
return !1;
}
}
},
emits: [
"save",
"export",
"field-added",
"field-updated",
"field-deleted",
"form-updated",
"get-form-code"
],
setup(t, { emit: o }) {
let r;
try {
r = Oe();
} catch (l) {
console.warn("Vuex store not available:", l);
}
const e = (l) => {
try {
return r && r.getters && r.getters[`${t.storeModuleName}/${l}`] !== void 0 ? r.getters[`${t.storeModuleName}/${l}`] : null;
} catch (d) {
return console.warn(`Error accessing store getter ${l}:`, d), null;
}
}, u = (l, d) => {
try {
return r && r.dispatch ? r.dispatch(`${t.storeModuleName}/${l}`, d) : Promise.resolve();
} catch (w) {
return console.warn(`Error dispatching store action ${l}:`, w), Promise.resolve();
}
}, a = I({ ...t.initialForm });
H(() => t.initialForm, (l) => {
a.value = { ...l };
});
const n = J(() => {
let l = [];
if (t.components && t.components.length > 0)
l = [...t.components];
else {
const d = e("getAvailableComponents");
d ? l = [...d] : l = [
{ type: "text", label: "Text Input", icon: "text-fields" },
{ type: "textarea", label: "Text Area", icon: "subject" },
{ type: "number", label: "Number", icon: "filter-9-plus" },
{ type: "select", label: "Select", icon: "arrow-drop-down-circle" },
{ type: "radio", label: "Radio", icon: "radio-button-checked" },
{ type: "checkbox", label: "Checkbox", icon: "check-box" },
{ type: "date", label: "Date", icon: "date-range" },
{ type: "email", label: "Email", icon: "email" },
{ type: "password", label: "Password", icon: "vpn-key" }
];
}
return t.customFields && t.customFields.length > 0 && (l = [...l, ...t.customFields]), t.activeFieldKeys && t.activeFieldKeys.length > 0 && (l = l.filter(
(d) => t.activeFieldKeys.includes(d.type)
)), l;
}), i = J(() => {
const l = [];
return t.requiredComponents && t.requiredComponents.length > 0 && t.requiredComponents.forEach((d, w) => {
l.push({
...d,
required: !0,
isRequiredComponent: !0,
requiredIndex: w
});
}), a.value.fields && a.value.fields.length > 0 && a.value.fields.forEach((d, w) => {
l.push({
...d,
isRequiredComponent: !1,
regularIndex: w
});
}), l;
}), m = J(() => {
const l = t.color;
let d;
return typeof l == "string" ? d = l : typeof l == "object" && l.name && (d = l.name, v(l)), {
// Focus ring and border colors
focusRing: `focus:ring-${d}-500`,
focusBorder: `focus:border-${d}-500`,
// Text colors
text600: `text-${d}-600`,
text500: `text-${d}-500`,
// Background colors
bg600: `bg-${d}-600`,
bg700: `bg-${d}-700`,
// Hover background colors
hoverBg700: `hover:bg-${d}-700`,
// Ring colors for focus states
ringOffset: "focus:ring-offset-2",
ring: "focus:ring-2",
ringColor: `focus:ring-${d}-500`
};
}), v = (l) => {
const d = `custom-color-${l.name}`, w = document.getElementById(d);
w && w.remove();
const C = [];
Object.entries(l.colors).forEach(([S, $]) => {
C.push(`.text-${l.name}-${S} { color: ${$} !important; }`), C.push(`.bg-${l.name}-${S} { background-color: ${$} !important; }`), C.push(`.border-${l.name}-${S} { border-color: ${$} !important; }`), C.push(`.focus\\:ring-${l.name}-${S}:focus { --tw-ring-color: ${$} !important; }`), C.push(`.focus\\:border-${l.name}-${S}:focus { border-color: ${$} !important; }`), C.push(`.hover\\:bg-${l.name}-${S}:hover { background-color: ${$} !important; }`), C.push(`.hover\\:text-${l.name}-${S}:hover { color: ${$} !important; }`);
});
const N = document.createElement("style");
N.id = d, N.textContent = C.join(`
`), document.head.appendChild(N);
}, y = I({ ...a.value.headers }), x = I({}), k = I(!1), p = I({}), U = I(-1), G = I({}), Q = I(!1), Z = I(!1), h = I(""), b = I("vue"), O = I(!1), T = I("Notification"), M = I(""), q = I("OK"), L = I(3e3), ee = I(!1), K = I(-1);
Ee(() => {
if (Object.keys(a.value.headers || {}).forEach((l) => {
x.value[l] = l;
}), t.initialForm.id) {
const l = e("getFormById");
if (l && typeof l == "function") {
const d = l(t.initialForm.id);
d && (a.value = { ...d });
}
}
});
const Pe = (l, d) => {
l.dataTransfer.setData("componentType", d.type);
}, Le = (l) => {
const d = l.dataTransfer.getData("componentType");
if (!d) return;
const w = Ge(d);
a.value.fields.push(w), o("field-added", w), o("form-updated", a.value);
}, Ge = (l) => {
const d = be(l), w = d.toLowerCase().replace(/\s+/g, ""), C = {
id: Ue(),
key: w,
// Key based on the field's label
type: l,
label: d,
placeholder: "",
required: !1,
validation: {},
width: "full",
// Default width: full or half
hidden: !1,
// Default hidden: false
defaultValue: ""
// Default value for hidden fields
};
return ["select", "radio", "checkbox"].includes(l) && (C.options = [
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" }
]), C;
}, be = (l) => {
const d = n.value.find((w) => w.type === l);
return d ? d.label : l;
}, He = (l) => {
U.value = l, p.value = JSON.parse(JSON.stringify(a.value.fields[l])), p.value.validation || (p.value.validation = {}), p.value.hidden === void 0 && (p.value.hidden = !1), p.value.defaultValue === void 0 && (p.value.defaultValue = ""), Q.value = !1, k.value = !0;
}, Ke = () => {
if (G.value = {}, !p.value.key || p.value.key.trim() === "") {
G.value.key = "Key cannot be empty";
return;
}
if (a.value.fields.findIndex(
(d, w) => d.key === p.value.key && w !== U.value
) !== -1) {
G.value.key = "This key is already used by another field";
return;
}
if (p.value.hidden && (!p.value.defaultValue || p.value.defaultValue.trim() === "")) {
G.value.defaultValue = "Default value is required for hidden fields";
return;
}
p.value.hidden && (p.value.required = !1), a.value.fields.splice(U.value, 1, p.value), o("field-updated", { index: U.value, field: p.value }), o("form-updated", a.value), ye();
}, ye = () => {
k.value = !1, p.value = {}, U.value = -1, G.value = {}, Q.value = !1;
};
H(() => p.value.label, (l) => {
if (k.value && l && !Q.value) {
const d = l.toLowerCase().replace(/\s+/g, "");
p.value.key = d;
}
}), H(() => p.value.hidden, (l) => {
l && (p.value.required = !1);
});
const Je = (l) => {
K.value = l, ee.value = !0;
}, We = () => {
K.value >= 0 && (a.value.fields.splice(K.value, 1), o("field-deleted", K.value), o("form-updated", a.value)), ee.value = !1, K.value = -1;
}, ze = () => {
ee.value = !1, K.value = -1;
}, Qe = () => {
p.value.options || (p.value.options = []), p.value.options.push({ value: "", label: "" });
}, Ye = (l) => {
p.value.options.splice(l, 1);
}, Xe = () => {
const l = `header${Object.keys(y.value).length + 1}`;
y.value[l] = "", x.value[l] = l;
}, Ze = () => {
const l = {};
Object.keys(y.value).forEach((d) => {
x.value[d] && y.value[d] && (l[x.value[d]] = y.value[d]);
}), a.value.headers = l;
try {
u("saveForm", { form: a.value });
} catch (d) {
console.warn("Store not available or error saving form:", d);
}
o("save", a.value);
}, ne = () => {
const l = i.value.map((w) => it(w)).join(`
`), d = i.value.reduce((w, C) => ((C.required || C.validation) && (w[C.key || C.name || C.type + C.label.replace(/\s+/g, "")] = lt(C)), w), {});
return `<template>
<form @submit.prevent="submitForm" class="space-y-6">
` + l + `
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-` + t.color + "-600 hover:bg-" + t.color + "-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-" + t.color + `-500">
Submit
</button>
</div>
<!-- Notification Modal -->
<div v-if="showNotification" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">{{ notificationTitle }}</h3>
<div class="mb-6">
<p class="text-gray-700">{{ notificationMessage }}</p>
</div>
<div class="flex justify-end">
<button
@click="closeNotification"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-` + t.color + "-600 hover:bg-" + t.color + "-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-" + t.color + `-500"
>
OK
</button>
</div>
</div>
</div>
</form>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
name: '` + (a.value.name || "GeneratedForm") + `',
setup() {
const formData = reactive({
` + i.value.map((w) => (w.key || w.name || w.type + w.label.replace(/\s+/g, "")) + ": " + st(w.type, w)).join(`,
`) + `
})
const errors = ref({})
// Notification state
const showNotification = ref(false)
const notificationTitle = ref('Notification')
const notificationMessage = ref('')
const closeNotification = () => {
showNotification.value = false
}
const showNotificationModal = (title, message) => {
notificationTitle.value = title
notificationMessage.value = message
showNotification.value = true
}
const rules = ` + JSON.stringify(d, null, 6).replace(/"([^"]+)":/g, "$1:") + `
const validate = () => {
const newErrors = {}
Object.keys(rules).forEach(field => {
const fieldRules = rules[field]
if (fieldRules.required && !formData[field]) {
newErrors[field] = 'This field is required'
} else if (fieldRules.min && formData[field].length < fieldRules.min) {
newErrors[field] = \`Minimum length is \${fieldRules.min}\`
} else if (fieldRules.max && formData[field].length > fieldRules.max) {
newErrors[field] = \`Maximum length is \${fieldRules.max}\`
} else if (fieldRules.pattern && !new RegExp(fieldRules.pattern).test(formData[field])) {
newErrors[field] = 'Invalid format'
}
})
errors.value = newErrors
return Object.keys(newErrors).length === 0
}
const submitForm = async () => {
if (!validate()) {
return
}
try {
const response = await fetch('` + (a.value.endpoint || "https://api.example.com/submit") + `', {
method: '` + (a.value.method || "POST") + `',
headers: {
'Content-Type': 'application/json',
` + Object.entries(a.value.headers || {}).map(([w, C]) => "'" + w + "': '" + C + "'").join(`,
`) + `
},
body: JSON.stringify(formData)
})
if (response.ok) {
showNotificationModal('Success', 'Form submitted successfully!')
// Reset form or redirect
} else {
showNotificationModal('Error', 'Error submitting form')
}
} catch (error) {
console.error('Error:', error)
showNotificationModal('Error', 'Error submitting form')
}
}
return {
formData,
errors,
submitForm,
showNotification,
notificationTitle,
notificationMessage,
closeNotification
}
}
}
<\/script>`;
}, et = () => {
const l = ne();
return o("get-form-code", l), l;
}, tt = () => {
switch (b.value) {
case "vue":
h.value = ne();
break;
case "json":
h.value = ot();
break;
case "html":
h.value = rt();
break;
default:
h.value = ne();
}
Z.value = !0, o("export", h.value);
}, ot = () => {
const l = {
...a.value,
fields: i.value,
requiredComponents: t.requiredComponents || []
};
return JSON.stringify(l, null, 2);
}, rt = () => {
const l = i.value.map((d) => nt(d)).join(`
`);
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${a.value.name || "Generated Form"}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group-half {
width: 48%;
display: inline-block;
vertical-align: top;
margin-right: 2%;
}
.form-group-full {
width: 100%;
clear: both;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}
input, select, textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
input[type="checkbox"], input[type="radio"] {
width: auto;
margin-right: 0.5rem;
}
.checkbox-label, .radio-label {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
button {
background-color: #4f46e5;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background-color: #4338ca;
}
.error {
color: #dc2626;
font-size: 0.875rem;
margin-top: 0.25rem;
}
</style>
</head>
<body>
<form id="generatedForm" action="${a.value.endpoint || ""}" method="${a.value.method || "POST"}">
<h2>