UNPKG

@samehdoush/vue-formbuilder

Version:

A dynamic form builder and renderer using Vue 3, Vuetify 3, and Tailwind CSS

1,248 lines (1,247 loc) 243 kB
import Sr, { defineComponent as dn, ref as $t, watch as nn, onMounted as Er, resolveComponent as H, createElementBlock as at, openBlock as Z, createElementVNode as Nt, createCommentVNode as Tt, createBlock as At, createVNode as L, withCtx as W, createTextVNode as xt, computed as rr, Fragment as Ze, renderList as Dn, toDisplayString as Zt, reactive as xr, withModifiers as Or, resolveDynamicComponent as Tr, mergeProps as Pr } from "vue"; const It = []; for (let n = 0; n < 256; ++n) It.push((n + 256).toString(16).slice(1)); function Dr(n, e = 0) { return (It[n[e + 0]] + It[n[e + 1]] + It[n[e + 2]] + It[n[e + 3]] + "-" + It[n[e + 4]] + It[n[e + 5]] + "-" + It[n[e + 6]] + It[n[e + 7]] + "-" + It[n[e + 8]] + It[n[e + 9]] + "-" + It[n[e + 10]] + It[n[e + 11]] + It[n[e + 12]] + It[n[e + 13]] + It[n[e + 14]] + It[n[e + 15]]).toLowerCase(); } let hn; const Cr = new Uint8Array(16); function Ir() { if (!hn) { if (typeof crypto > "u" || !crypto.getRandomValues) throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported"); hn = crypto.getRandomValues.bind(crypto); } return hn(Cr); } const wr = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Kn = { randomUUID: wr }; function Hn(n, e, r) { var o; if (Kn.randomUUID && !n) return Kn.randomUUID(); n = n || {}; const a = n.random ?? ((o = n.rng) == null ? void 0 : o.call(n)) ?? Ir(); if (a.length < 16) throw new Error("Random bytes length must be >= 16"); return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Dr(a); } /*! * Signature Pad v5.0.7 | https://github.com/szimek/signature_pad * (c) 2025 Szymon Nowak | Released under the MIT license */ class rn { constructor(e, r, a, o) { if (isNaN(e) || isNaN(r)) throw new Error(`Point is invalid: (${e}, ${r})`); this.x = +e, this.y = +r, this.pressure = a || 0, this.time = o || Date.now(); } distanceTo(e) { return Math.sqrt(Math.pow(this.x - e.x, 2) + Math.pow(this.y - e.y, 2)); } equals(e) { return this.x === e.x && this.y === e.y && this.pressure === e.pressure && this.time === e.time; } velocityFrom(e) { return this.time !== e.time ? this.distanceTo(e) / (this.time - e.time) : 0; } } class Mn { static fromPoints(e, r) { const a = this.calculateControlPoints(e[0], e[1], e[2]).c2, o = this.calculateControlPoints(e[1], e[2], e[3]).c1; return new Mn(e[1], a, o, e[2], r.start, r.end); } static calculateControlPoints(e, r, a) { const o = e.x - r.x, u = e.y - r.y, t = r.x - a.x, i = r.y - a.y, l = { x: (e.x + r.x) / 2, y: (e.y + r.y) / 2 }, s = { x: (r.x + a.x) / 2, y: (r.y + a.y) / 2 }, d = Math.sqrt(o * o + u * u), c = Math.sqrt(t * t + i * i), p = l.x - s.x, f = l.y - s.y, v = d + c == 0 ? 0 : c / (d + c), h = { x: s.x + p * v, y: s.y + f * v }, m = r.x - h.x, g = r.y - h.y; return { c1: new rn(l.x + m, l.y + g), c2: new rn(s.x + m, s.y + g) }; } constructor(e, r, a, o, u, t) { this.startPoint = e, this.control2 = r, this.control1 = a, this.endPoint = o, this.startWidth = u, this.endWidth = t; } length() { let r = 0, a, o; for (let u = 0; u <= 10; u += 1) { const t = u / 10, i = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x), l = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); if (u > 0) { const s = i - a, d = l - o; r += Math.sqrt(s * s + d * d); } a = i, o = l; } return r; } point(e, r, a, o, u) { return r * (1 - e) * (1 - e) * (1 - e) + 3 * a * (1 - e) * (1 - e) * e + 3 * o * (1 - e) * e * e + u * e * e * e; } } class Ar { constructor() { try { this._et = new EventTarget(); } catch { this._et = document; } } addEventListener(e, r, a) { this._et.addEventListener(e, r, a); } dispatchEvent(e) { return this._et.dispatchEvent(e); } removeEventListener(e, r, a) { this._et.removeEventListener(e, r, a); } } function Fr(n, e = 250) { let r = 0, a = null, o, u, t; const i = () => { r = Date.now(), a = null, o = n.apply(u, t), a || (u = null, t = []); }; return function(...s) { const d = Date.now(), c = e - (d - r); return u = this, t = s, c <= 0 || c > e ? (a && (clearTimeout(a), a = null), r = d, o = n.apply(u, t), a || (u = null, t = [])) : a || (a = window.setTimeout(i, c)), o; }; } let Rr = class Cn extends Ar { constructor(e, r = {}) { var a, o, u; super(), this.canvas = e, this._drawingStroke = !1, this._isEmpty = !0, this._lastPoints = [], this._data = [], this._lastVelocity = 0, this._lastWidth = 0, this._handleMouseDown = (t) => { !this._isLeftButtonPressed(t, !0) || this._drawingStroke || this._strokeBegin(this._pointerEventToSignatureEvent(t)); }, this._handleMouseMove = (t) => { if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) { this._strokeEnd(this._pointerEventToSignatureEvent(t), !1); return; } this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t)); }, this._handleMouseUp = (t) => { this._isLeftButtonPressed(t) || this._strokeEnd(this._pointerEventToSignatureEvent(t)); }, this._handleTouchStart = (t) => { t.targetTouches.length !== 1 || this._drawingStroke || (t.cancelable && t.preventDefault(), this._strokeBegin(this._touchEventToSignatureEvent(t))); }, this._handleTouchMove = (t) => { if (t.targetTouches.length === 1) { if (t.cancelable && t.preventDefault(), !this._drawingStroke) { this._strokeEnd(this._touchEventToSignatureEvent(t), !1); return; } this._strokeMoveUpdate(this._touchEventToSignatureEvent(t)); } }, this._handleTouchEnd = (t) => { t.targetTouches.length === 0 && (t.cancelable && t.preventDefault(), this.canvas.removeEventListener("touchmove", this._handleTouchMove), this._strokeEnd(this._touchEventToSignatureEvent(t))); }, this._handlePointerDown = (t) => { !t.isPrimary || !this._isLeftButtonPressed(t) || this._drawingStroke || (t.preventDefault(), this._strokeBegin(this._pointerEventToSignatureEvent(t))); }, this._handlePointerMove = (t) => { if (t.isPrimary) { if (!this._isLeftButtonPressed(t, !0) || !this._drawingStroke) { this._strokeEnd(this._pointerEventToSignatureEvent(t), !1); return; } t.preventDefault(), this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t)); } }, this._handlePointerUp = (t) => { !t.isPrimary || this._isLeftButtonPressed(t) || (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t))); }, this.velocityFilterWeight = r.velocityFilterWeight || 0.7, this.minWidth = r.minWidth || 0.5, this.maxWidth = r.maxWidth || 2.5, this.throttle = (a = r.throttle) !== null && a !== void 0 ? a : 16, this.minDistance = (o = r.minDistance) !== null && o !== void 0 ? o : 5, this.dotSize = r.dotSize || 0, this.penColor = r.penColor || "black", this.backgroundColor = r.backgroundColor || "rgba(0,0,0,0)", this.compositeOperation = r.compositeOperation || "source-over", this.canvasContextOptions = (u = r.canvasContextOptions) !== null && u !== void 0 ? u : {}, this._strokeMoveUpdate = this.throttle ? Fr(Cn.prototype._strokeUpdate, this.throttle) : Cn.prototype._strokeUpdate, this._ctx = e.getContext("2d", this.canvasContextOptions), this.clear(), this.on(); } clear() { const { _ctx: e, canvas: r } = this; e.fillStyle = this.backgroundColor, e.clearRect(0, 0, r.width, r.height), e.fillRect(0, 0, r.width, r.height), this._data = [], this._reset(this._getPointGroupOptions()), this._isEmpty = !0; } fromDataURL(e, r = {}) { return new Promise((a, o) => { const u = new Image(), t = r.ratio || window.devicePixelRatio || 1, i = r.width || this.canvas.width / t, l = r.height || this.canvas.height / t, s = r.xOffset || 0, d = r.yOffset || 0; this._reset(this._getPointGroupOptions()), u.onload = () => { this._ctx.drawImage(u, s, d, i, l), a(); }, u.onerror = (c) => { o(c); }, u.crossOrigin = "anonymous", u.src = e, this._isEmpty = !1; }); } toDataURL(e = "image/png", r) { switch (e) { case "image/svg+xml": return typeof r != "object" && (r = void 0), `data:image/svg+xml;base64,${btoa(this.toSVG(r))}`; default: return typeof r != "number" && (r = void 0), this.canvas.toDataURL(e, r); } } on() { this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", this.canvas.style.userSelect = "none"; const e = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document; window.PointerEvent && !e ? this._handlePointerEvents() : (this._handleMouseEvents(), "ontouchstart" in window && this._handleTouchEvents()); } off() { this.canvas.style.touchAction = "auto", this.canvas.style.msTouchAction = "auto", this.canvas.style.userSelect = "auto", this.canvas.removeEventListener("pointerdown", this._handlePointerDown), this.canvas.removeEventListener("mousedown", this._handleMouseDown), this.canvas.removeEventListener("touchstart", this._handleTouchStart), this._removeMoveUpEventListeners(); } _getListenerFunctions() { var e; const r = window.document === this.canvas.ownerDocument ? window : (e = this.canvas.ownerDocument.defaultView) !== null && e !== void 0 ? e : this.canvas.ownerDocument; return { addEventListener: r.addEventListener.bind(r), removeEventListener: r.removeEventListener.bind(r) }; } _removeMoveUpEventListeners() { const { removeEventListener: e } = this._getListenerFunctions(); e("pointermove", this._handlePointerMove), e("pointerup", this._handlePointerUp), e("mousemove", this._handleMouseMove), e("mouseup", this._handleMouseUp), e("touchmove", this._handleTouchMove), e("touchend", this._handleTouchEnd); } isEmpty() { return this._isEmpty; } fromData(e, { clear: r = !0 } = {}) { r && this.clear(), this._fromData(e, this._drawCurve.bind(this), this._drawDot.bind(this)), this._data = this._data.concat(e); } toData() { return this._data; } _isLeftButtonPressed(e, r) { return r ? e.buttons === 1 : (e.buttons & 1) === 1; } _pointerEventToSignatureEvent(e) { return { event: e, type: e.type, x: e.clientX, y: e.clientY, pressure: "pressure" in e ? e.pressure : 0 }; } _touchEventToSignatureEvent(e) { const r = e.changedTouches[0]; return { event: e, type: e.type, x: r.clientX, y: r.clientY, pressure: r.force }; } _getPointGroupOptions(e) { return { penColor: e && "penColor" in e ? e.penColor : this.penColor, dotSize: e && "dotSize" in e ? e.dotSize : this.dotSize, minWidth: e && "minWidth" in e ? e.minWidth : this.minWidth, maxWidth: e && "maxWidth" in e ? e.maxWidth : this.maxWidth, velocityFilterWeight: e && "velocityFilterWeight" in e ? e.velocityFilterWeight : this.velocityFilterWeight, compositeOperation: e && "compositeOperation" in e ? e.compositeOperation : this.compositeOperation }; } _strokeBegin(e) { if (!this.dispatchEvent(new CustomEvent("beginStroke", { detail: e, cancelable: !0 }))) return; const { addEventListener: a } = this._getListenerFunctions(); switch (e.event.type) { case "mousedown": a("mousemove", this._handleMouseMove), a("mouseup", this._handleMouseUp); break; case "touchstart": a("touchmove", this._handleTouchMove), a("touchend", this._handleTouchEnd); break; case "pointerdown": a("pointermove", this._handlePointerMove), a("pointerup", this._handlePointerUp); break; } this._drawingStroke = !0; const o = this._getPointGroupOptions(), u = Object.assign(Object.assign({}, o), { points: [] }); this._data.push(u), this._reset(o), this._strokeUpdate(e); } _strokeUpdate(e) { if (!this._drawingStroke) return; if (this._data.length === 0) { this._strokeBegin(e); return; } this.dispatchEvent(new CustomEvent("beforeUpdateStroke", { detail: e })); const r = this._createPoint(e.x, e.y, e.pressure), a = this._data[this._data.length - 1], o = a.points, u = o.length > 0 && o[o.length - 1], t = u ? r.distanceTo(u) <= this.minDistance : !1, i = this._getPointGroupOptions(a); if (!u || !(u && t)) { const l = this._addPoint(r, i); u ? l && this._drawCurve(l, i) : this._drawDot(r, i), o.push({ time: r.time, x: r.x, y: r.y, pressure: r.pressure }); } this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: e })); } _strokeEnd(e, r = !0) { this._removeMoveUpEventListeners(), this._drawingStroke && (r && this._strokeUpdate(e), this._drawingStroke = !1, this.dispatchEvent(new CustomEvent("endStroke", { detail: e }))); } _handlePointerEvents() { this._drawingStroke = !1, this.canvas.addEventListener("pointerdown", this._handlePointerDown); } _handleMouseEvents() { this._drawingStroke = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown); } _handleTouchEvents() { this.canvas.addEventListener("touchstart", this._handleTouchStart); } _reset(e) { this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (e.minWidth + e.maxWidth) / 2, this._ctx.fillStyle = e.penColor, this._ctx.globalCompositeOperation = e.compositeOperation; } _createPoint(e, r, a) { const o = this.canvas.getBoundingClientRect(); return new rn(e - o.left, r - o.top, a, (/* @__PURE__ */ new Date()).getTime()); } _addPoint(e, r) { const { _lastPoints: a } = this; if (a.push(e), a.length > 2) { a.length === 3 && a.unshift(a[0]); const o = this._calculateCurveWidths(a[1], a[2], r), u = Mn.fromPoints(a, o); return a.shift(), u; } return null; } _calculateCurveWidths(e, r, a) { const o = a.velocityFilterWeight * r.velocityFrom(e) + (1 - a.velocityFilterWeight) * this._lastVelocity, u = this._strokeWidth(o, a), t = { end: u, start: this._lastWidth }; return this._lastVelocity = o, this._lastWidth = u, t; } _strokeWidth(e, r) { return Math.max(r.maxWidth / (e + 1), r.minWidth); } _drawCurveSegment(e, r, a) { const o = this._ctx; o.moveTo(e, r), o.arc(e, r, a, 0, 2 * Math.PI, !1), this._isEmpty = !1; } _drawCurve(e, r) { const a = this._ctx, o = e.endWidth - e.startWidth, u = Math.ceil(e.length()) * 2; a.beginPath(), a.fillStyle = r.penColor; for (let t = 0; t < u; t += 1) { const i = t / u, l = i * i, s = l * i, d = 1 - i, c = d * d, p = c * d; let f = p * e.startPoint.x; f += 3 * c * i * e.control1.x, f += 3 * d * l * e.control2.x, f += s * e.endPoint.x; let v = p * e.startPoint.y; v += 3 * c * i * e.control1.y, v += 3 * d * l * e.control2.y, v += s * e.endPoint.y; const h = Math.min(e.startWidth + s * o, r.maxWidth); this._drawCurveSegment(f, v, h); } a.closePath(), a.fill(); } _drawDot(e, r) { const a = this._ctx, o = r.dotSize > 0 ? r.dotSize : (r.minWidth + r.maxWidth) / 2; a.beginPath(), this._drawCurveSegment(e.x, e.y, o), a.closePath(), a.fillStyle = r.penColor, a.fill(); } _fromData(e, r, a) { for (const o of e) { const { points: u } = o, t = this._getPointGroupOptions(o); if (u.length > 1) for (let i = 0; i < u.length; i += 1) { const l = u[i], s = new rn(l.x, l.y, l.pressure, l.time); i === 0 && this._reset(t); const d = this._addPoint(s, t); d && r(d, t); } else this._reset(t), a(u[0], t); } } toSVG({ includeBackgroundColor: e = !1 } = {}) { const r = this._data, a = Math.max(window.devicePixelRatio || 1, 1), o = 0, u = 0, t = this.canvas.width / a, i = this.canvas.height / a, l = document.createElementNS("http://www.w3.org/2000/svg", "svg"); if (l.setAttribute("xmlns", "http://www.w3.org/2000/svg"), l.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), l.setAttribute("viewBox", `${o} ${u} ${t} ${i}`), l.setAttribute("width", t.toString()), l.setAttribute("height", i.toString()), e && this.backgroundColor) { const s = document.createElement("rect"); s.setAttribute("width", "100%"), s.setAttribute("height", "100%"), s.setAttribute("fill", this.backgroundColor), l.appendChild(s); } return this._fromData(r, (s, { penColor: d }) => { const c = document.createElement("path"); if (!isNaN(s.control1.x) && !isNaN(s.control1.y) && !isNaN(s.control2.x) && !isNaN(s.control2.y)) { const p = `M ${s.startPoint.x.toFixed(3)},${s.startPoint.y.toFixed(3)} C ${s.control1.x.toFixed(3)},${s.control1.y.toFixed(3)} ${s.control2.x.toFixed(3)},${s.control2.y.toFixed(3)} ${s.endPoint.x.toFixed(3)},${s.endPoint.y.toFixed(3)}`; c.setAttribute("d", p), c.setAttribute("stroke-width", (s.endWidth * 2.25).toFixed(3)), c.setAttribute("stroke", d), c.setAttribute("fill", "none"), c.setAttribute("stroke-linecap", "round"), l.appendChild(c); } }, (s, { penColor: d, dotSize: c, minWidth: p, maxWidth: f }) => { const v = document.createElement("circle"), h = c > 0 ? c : (p + f) / 2; v.setAttribute("r", h.toString()), v.setAttribute("cx", s.x.toString()), v.setAttribute("cy", s.y.toString()), v.setAttribute("fill", d), l.appendChild(v); }), l.outerHTML; } }; const cn = (n, e) => { const r = n.__vccOpts || n; for (const [a, o] of e) r[a] = o; return r; }, Mr = dn({ name: "SignaturePad", props: { modelValue: { type: String, default: "" }, width: { type: Number, default: 400 }, height: { type: Number, default: 200 }, backgroundColor: { type: String, default: "rgb(255, 255, 255)" }, penColor: { type: String, default: "rgb(0, 0, 0)" }, readOnly: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(n, { emit: e }) { const r = $t(null), a = $t(null), o = () => { r.value && (a.value = new Rr(r.value, { backgroundColor: n.backgroundColor, penColor: n.penColor }), n.readOnly && a.value.off(), n.modelValue && a.value.fromDataURL(n.modelValue)); }, u = () => { a.value && (a.value.clear(), e("update:modelValue", "")); }, t = () => { if (a.value && !a.value.isEmpty()) { const i = a.value.toDataURL("image/png"); e("update:modelValue", i); } }; return nn(() => n.modelValue, (i) => { a.value && (i ? a.value.fromDataURL(i) : a.value.clear()); }), nn(() => n.readOnly, (i) => { a.value && (i ? a.value.off() : a.value.on()); }), Er(() => { o(); }), { signaturePad: r, clear: u, save: t }; } }), Lr = { class: "signature-pad-container" }, Nr = ["width", "height"], jr = { key: 0, class: "signature-pad-actions" }; function Vr(n, e, r, a, o, u) { const t = H("v-btn"); return Z(), at("div", Lr, [ Nt("canvas", { ref: "signaturePad", class: "signature-pad", width: n.width, height: n.height }, null, 8, Nr), n.readOnly ? Tt("", !0) : (Z(), at("div", jr, [ n.modelValue ? (Z(), At(t, { key: 0, color: "error", size: "small", variant: "outlined", onClick: n.clear, class: "mr-2" }, { default: W(() => e[0] || (e[0] = [ xt(" Clear ") ])), _: 1, __: [0] }, 8, ["onClick"])) : Tt("", !0), L(t, { color: "primary", size: "small", variant: "outlined", onClick: n.save }, { default: W(() => e[1] || (e[1] = [ xt(" Save ") ])), _: 1, __: [1] }, 8, ["onClick"]) ])) ]); } const Ln = /* @__PURE__ */ cn(Mr, [["render", Vr], ["__scopeId", "data-v-761bf55a"]]), Nn = (n) => new Promise((e, r) => { if (!n) { e(null); return; } const a = new FileReader(); a.readAsDataURL(n), a.onload = () => e(a.result), a.onerror = (o) => r(o); }), jn = async (n) => !n || n.length === 0 ? null : (Array.isArray(n) || (n = [n]), await Promise.all( Array.from(n).map(async (r) => { const a = await Nn(r); return { name: r.name, type: r.type, size: r.size, data: a }; }) )), or = (n) => n || null, Vn = (n, e = "") => { if (!n) return null; const r = n.split(",")[1], a = atob(r), o = [], u = 512; for (let t = 0; t < a.length; t += u) { const i = a.slice(t, t + u), l = new Array(i.length); for (let d = 0; d < i.length; d++) l[d] = i.charCodeAt(d); const s = new Uint8Array(l); o.push(s); } return new Blob(o, { type: e }); }, Un = async (n, e) => { const r = { ...n }; for (const a of e) { const o = n[a.id]; a.type === "file" && o && (r[a.id] = await jn(o)), a.type; } return r; }, ar = (n, e) => { const r = { ...n }; for (const a of e) n[a.id]; return r; }, Ur = { fileToBase64: Nn, processFiles: jn, base64ToUrl: or, base64ToBlob: Vn, prepareFormForSubmission: Un, prepareStoredFormForRendering: ar }, va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, base64ToBlob: Vn, base64ToUrl: or, default: Ur, fileToBase64: Nn, prepareFormForSubmission: Un, prepareStoredFormForRendering: ar, processFiles: jn }, Symbol.toStringTag, { value: "Module" })), $r = dn({ name: "FileDisplay", props: { fileData: { type: [Array, Object], default: () => null } }, setup(n) { const e = $t(!1), r = $t(null), a = $t(""), o = rr(() => n.fileData ? Array.isArray(n.fileData) ? n.fileData : [n.fileData] : []), u = (f) => { if (!f || f === 0) return "0 Bytes"; const v = ["Bytes", "KB", "MB", "GB"], h = Math.floor(Math.log(f) / Math.log(1024)); return `${parseFloat((f / Math.pow(1024, h)).toFixed(2))} ${v[h]}`; }, t = (f) => f && f.data && (i(f) || l(f) || s(f)), i = (f) => f.type && f.type.startsWith("image/"), l = (f) => f.type === "application/pdf", s = (f) => { const v = [ "text/", "application/json", "application/javascript", "application/xml", "application/html" ]; return f.type && v.some((h) => f.type.includes(h)); }; return { previewDialog: e, previewFile: r, previewTextContent: a, normalizedFileData: o, formatFileSize: u, canPreview: t, isImageFile: i, isPdfFile: l, isTextFile: s, getFileIcon: (f) => !f || !f.type ? "mdi-file-outline" : f.type.startsWith("image/") ? "mdi-file-image-outline" : f.type === "application/pdf" ? "mdi-file-pdf-outline" : f.type.includes("word") || f.type.includes("document") || f.type.includes("msword") ? "mdi-file-document-outline" : f.type.includes("excel") || f.type.includes("spreadsheet") || f.type.includes("csv") ? "mdi-file-excel-outline" : f.type.includes("powerpoint") || f.type.includes("presentation") ? "mdi-file-powerpoint-outline" : f.type.includes("text/") || f.type.includes("code") ? "mdi-file-code-outline" : f.type.includes("zip") || f.type.includes("tar") || f.type.includes("compressed") || f.type.includes("archive") ? "mdi-folder-zip-outline" : f.type.includes("video/") ? "mdi-file-video-outline" : f.type.includes("audio/") ? "mdi-file-music-outline" : "mdi-file-outline", openPreview: (f) => { if (r.value = f, s(f) && f.data) try { if (f.data.startsWith("data:")) { const v = f.data.split(",")[1], h = atob(v); a.value = h; } else a.value = f.data; } catch (v) { console.error("Error decoding text content:", v), a.value = "Error loading text content"; } e.value = !0; }, downloadFile: (f) => { if (!(!f || !f.data)) try { const v = f.type || "application/octet-stream", h = Vn(f.data, v), m = document.createElement("a"); m.href = URL.createObjectURL(h), m.download = f.name || "download", document.body.appendChild(m), m.click(), document.body.removeChild(m); } catch (v) { console.error("Error downloading file:", v); } } }; } }), Gr = { class: "file-display-component" }, Br = { key: 0, class: "text-body-2 text-grey" }, Wr = { key: 1 }, Kr = { class: "file-name" }, Hr = { key: 0, class: "text-caption text-grey ml-2" }, Xr = { key: 0 }, zr = ["src"], Yr = ["src"], Jr = { key: 2, class: "preview-text" }, Zr = { key: 3, class: "text-center py-5" }; function Qr(n, e, r, a, o, u) { const t = H("v-icon"), i = H("v-btn"), l = H("v-card-title"), s = H("v-card-text"), d = H("v-card"), c = H("v-dialog"); return Z(), at("div", Gr, [ !n.fileData || n.fileData.length === 0 ? (Z(), at("div", Br, " No file uploaded ")) : (Z(), at("div", Wr, [ (Z(!0), at(Ze, null, Dn(n.normalizedFileData, (p, f) => (Z(), at("div", { key: f, class: "file-item" }, [ L(t, { class: "mr-2", icon: n.getFileIcon(p) }, null, 8, ["icon"]), Nt("span", Kr, Zt(p.name), 1), p.size ? (Z(), at("span", Hr, " (" + Zt(n.formatFileSize(p.size)) + ") ", 1)) : Tt("", !0), n.canPreview(p) ? (Z(), At(i, { key: 1, class: "ml-2", size: "x-small", variant: "text", color: "primary", onClick: (v) => n.openPreview(p) }, { default: W(() => e[3] || (e[3] = [ xt(" Preview ") ])), _: 2, __: [3] }, 1032, ["onClick"])) : (Z(), At(i, { key: 2, class: "ml-2", size: "x-small", variant: "text", color: "primary", onClick: (v) => n.downloadFile(p) }, { default: W(() => e[4] || (e[4] = [ xt(" Download ") ])), _: 2, __: [4] }, 1032, ["onClick"])) ]))), 128)) ])), L(c, { modelValue: n.previewDialog, "onUpdate:modelValue": e[2] || (e[2] = (p) => n.previewDialog = p), "max-width": "800" }, { default: W(() => [ L(d, null, { default: W(() => [ L(l, { class: "d-flex justify-space-between align-center" }, { default: W(() => [ Nt("span", null, Zt(n.previewFile ? n.previewFile.name : "File Preview"), 1), L(i, { icon: "", onClick: e[0] || (e[0] = (p) => n.previewDialog = !1) }, { default: W(() => [ L(t, null, { default: W(() => e[5] || (e[5] = [ xt("mdi-close") ])), _: 1, __: [5] }) ]), _: 1 }) ]), _: 1 }), L(s, { class: "text-center" }, { default: W(() => [ n.previewFile && n.previewFile.data ? (Z(), at("div", Xr, [ n.isImageFile(n.previewFile) ? (Z(), at("img", { key: 0, src: n.previewFile.data, class: "preview-image", alt: "File Preview" }, null, 8, zr)) : n.isPdfFile(n.previewFile) ? (Z(), at("iframe", { key: 1, src: n.previewFile.data, class: "preview-pdf", width: "100%", height: "600" }, null, 8, Yr)) : n.isTextFile(n.previewFile) ? (Z(), at("pre", Jr, " " + Zt(n.previewTextContent) + ` `, 1)) : (Z(), at("div", Zr, [ L(t, { size: "64", color: "grey" }, { default: W(() => e[6] || (e[6] = [ xt("mdi-file-document-outline") ])), _: 1, __: [6] }), e[8] || (e[8] = Nt("div", { class: "mt-2" }, "Preview not available for this file type", -1)), L(i, { color: "primary", class: "mt-4", onClick: e[1] || (e[1] = (p) => n.downloadFile(n.previewFile)) }, { default: W(() => e[7] || (e[7] = [ xt(" Download File ") ])), _: 1, __: [7] }) ])) ])) : Tt("", !0) ]), _: 1 }) ]), _: 1 }) ]), _: 1 }, 8, ["modelValue"]) ]); } const ir = /* @__PURE__ */ cn($r, [["render", Qr], ["__scopeId", "data-v-e4148185"]]), kr = dn({ name: "FormRenderer", components: { SignaturePad: Ln, FileDisplay: ir }, props: { formData: { type: Object, required: !0, default: () => ({ title: "", elements: [] }) }, initialValues: { type: Object, default: () => ({}) }, readOnly: { type: Boolean, default: !1 } }, emits: ["save", "update:modelValue"], setup(n, { emit: e }) { const r = $t(null), a = $t(!0), o = xr({}); return nn(() => n.formData.elements, (s) => { s && s.forEach((d) => { if (n.initialValues && n.initialValues[d.id] !== void 0) if (d.type === "file") { const c = n.initialValues[d.id]; n.readOnly && c && (Array.isArray(c) || typeof c == "object" && c.data), o[d.id] = c; } else o[d.id] = n.initialValues[d.id]; else switch (d.type) { case "checkbox": case "switch": o[d.id] = !1; break; case "select": case "radio": d.props.items && d.props.items.length > 0 && (o[d.id] = null); break; case "file": o[d.id] = null; break; default: o[d.id] = ""; break; } }); }, { immediate: !0, deep: !0 }), { form: r, isFormValid: a, formValues: o, isTextField: (s) => { var c; const d = ["text", "email", "password", "number", "date", "time"]; return s.type === "text" || d.includes((c = s.props) == null ? void 0 : c.type); }, generateRules: (s) => { const d = [], c = s.props || {}; if ((c.required || c.rules && c.rules.required) && d.push((p) => !!p || `${c.label} is required`), s.type === "email" || c.rules && c.rules.email) { const p = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; d.push((f) => !f || p.test(f) || "Please enter a valid email"); } if (c.rules && c.rules.minLength && c.rules.minLength.enabled) { const p = parseInt(c.rules.minLength.value) || 0; d.push((f) => !f || f.length >= p || `Minimum ${p} characters`); } if (c.rules && c.rules.maxLength && c.rules.maxLength.enabled) { const p = parseInt(c.rules.maxLength.value) || 999; d.push((f) => !f || f.length <= p || `Maximum ${p} characters`); } return d; }, submitForm: async () => { if (r.value && r.value.validate()) { const s = await Un(o, n.formData.elements); e("save", s), e("update:modelValue", s); } }, resetForm: () => { r.value && r.value.reset(); } }; } }), qr = { class: "form-renderer" }, _r = { key: 8, class: "mb-3" }, to = { class: "text-body-1 mb-1 d-block" }, eo = { class: "text-caption text-grey" }, no = { key: 9, class: "mb-3" }, ro = { class: "text-body-1 mb-1 d-block" }, oo = { class: "text-caption text-grey" }; function ao(n, e, r, a, o, u) { const t = H("v-card-title"), i = H("v-text-field"), l = H("v-textarea"), s = H("v-select"), d = H("v-autocomplete"), c = H("v-checkbox"), p = H("v-radio"), f = H("v-radio-group"), v = H("v-switch"), h = H("v-file-input"), m = H("file-display"), g = H("signature-pad"), b = H("v-card-text"), D = H("v-spacer"), T = H("v-btn"), C = H("v-card-actions"), x = H("v-card"), F = H("v-form"); return Z(), at("div", qr, [ L(F, { ref: "form", modelValue: n.isFormValid, "onUpdate:modelValue": e[0] || (e[0] = (y) => n.isFormValid = y), onSubmit: Or(n.submitForm, ["prevent"]) }, { default: W(() => [ L(x, null, { default: W(() => [ L(t, null, { default: W(() => [ xt(Zt(n.formData.title || "Form"), 1) ]), _: 1 }), L(b, null, { default: W(() => [ (Z(!0), at(Ze, null, Dn(n.formData.elements, (y) => (Z(), at("div", { key: y.id, class: "mb-4" }, [ n.isTextField(y) ? (Z(), At(i, { key: 0, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, placeholder: y.props.placeholder, hint: y.props.hint, type: y.props.type || "text", variant: y.props.variant || "outlined", density: y.props.density || "comfortable", rules: n.generateRules(y), required: y.props.required, counter: y.props.counter, readonly: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "placeholder", "hint", "type", "variant", "density", "rules", "required", "counter", "readonly"])) : y.type === "textarea" ? (Z(), At(l, { key: 1, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, placeholder: y.props.placeholder, hint: y.props.hint, rows: y.props.rows, variant: y.props.variant || "outlined", density: y.props.density || "comfortable", rules: n.generateRules(y), required: y.props.required, counter: y.props.counter, readonly: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "placeholder", "hint", "rows", "variant", "density", "rules", "required", "counter", "readonly"])) : y.type === "select" ? (Z(), At(s, { key: 2, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, items: y.props.items, hint: y.props.hint, variant: y.props.variant || "outlined", density: y.props.density || "comfortable", rules: n.generateRules(y), required: y.props.required, readonly: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "items", "hint", "variant", "density", "rules", "required", "readonly"])) : y.type === "autocomplete" ? (Z(), At(d, { key: 3, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, items: y.props.items, hint: y.props.hint, variant: y.props.variant || "outlined", density: y.props.density || "comfortable", rules: n.generateRules(y), required: y.props.required, readonly: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "items", "hint", "variant", "density", "rules", "required", "readonly"])) : y.type === "checkbox" ? (Z(), At(c, { key: 4, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, hint: y.props.hint, required: y.props.required, rules: n.generateRules(y), readonly: n.readOnly, disabled: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "hint", "required", "rules", "readonly", "disabled"])) : y.type === "radio" ? (Z(), At(f, { key: 5, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, hint: y.props.hint, rules: n.generateRules(y), required: y.props.required, readonly: n.readOnly, disabled: n.readOnly }, { default: W(() => [ (Z(!0), at(Ze, null, Dn(y.props.items, (O) => (Z(), At(p, { key: O.value, label: O.title, value: O.value }, null, 8, ["label", "value"]))), 128)) ]), _: 2 }, 1032, ["modelValue", "onUpdate:modelValue", "label", "hint", "rules", "required", "readonly", "disabled"])) : y.type === "switch" ? (Z(), At(v, { key: 6, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, color: y.props.color || "primary", hint: y.props.hint, required: y.props.required, rules: n.generateRules(y), readonly: n.readOnly, disabled: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "color", "hint", "required", "rules", "readonly", "disabled"])) : y.type === "file" && !n.readOnly ? (Z(), At(h, { key: 7, modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, label: y.props.label, hint: y.props.hint, accept: y.props.accept, multiple: y.props.multiple, variant: y.props.variant || "outlined", density: y.props.density || "comfortable", rules: n.generateRules(y), required: y.props.required, readonly: n.readOnly, disabled: n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "hint", "accept", "multiple", "variant", "density", "rules", "required", "readonly", "disabled"])) : y.type === "file" && n.readOnly ? (Z(), at("div", _r, [ Nt("label", to, Zt(y.props.label), 1), L(m, { "file-data": n.formValues[y.id], class: "mt-2 mb-2 pa-2 border rounded" }, null, 8, ["file-data"]), Nt("div", eo, Zt(y.props.hint), 1) ])) : y.type === "signature" ? (Z(), at("div", no, [ Nt("label", ro, Zt(y.props.label), 1), L(g, { modelValue: n.formValues[y.id], "onUpdate:modelValue": (O) => n.formValues[y.id] = O, width: y.props.width || 400, height: y.props.height || 200, "pen-color": y.props.penColor, "background-color": y.props.backgroundColor, "read-only": n.readOnly }, null, 8, ["modelValue", "onUpdate:modelValue", "width", "height", "pen-color", "background-color", "read-only"]), Nt("div", oo, Zt(y.props.hint), 1) ])) : Tt("", !0) ]))), 128)) ]), _: 1 }), L(C, { class: "pa-4" }, { default: W(() => [ L(D), n.readOnly ? Tt("", !0) : (Z(), at(Ze, { key: 0 }, [ L(T, { color: "grey-darken-1", variant: "text", onClick: n.resetForm }, { default: W(() => e[1] || (e[1] = [ xt(" Reset ") ])), _: 1, __: [1] }, 8, ["onClick"]), L(T, { color: "primary", type: "submit", disabled: !n.isFormValid, onClick: n.submitForm }, { default: W(() => e[2] || (e[2] = [ xt(" Save ") ])), _: 1, __: [2] }, 8, ["disabled", "onClick"]) ], 64)) ]), _: 1 }) ]), _: 1 }) ]), _: 1 }, 8, ["modelValue", "onSubmit"]) ]); } const lr = /* @__PURE__ */ cn(kr, [["render", ao], ["__scopeId", "data-v-e37531e9"]]); function io(n) { return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n; } function lo(n) { if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n; var e = n.default; if (typeof e == "function") { var r = function a() { return this instanceof a ? Reflect.construct(e, arguments, this.constructor) : e.apply(this, arguments); }; r.prototype = e.prototype; } else r = {}; return Object.defineProperty(r, "__esModule", { value: !0 }), Object.keys(n).forEach(function(a) { var o = Object.getOwnPropertyDescriptor(n, a); Object.defineProperty(r, a, o.get ? o : { enumerable: !0, get: function() { return n[a]; } }); }), r; } var Qe = { exports: {} }; /**! * Sortable 1.14.0 * @author RubaXa <trash@rubaxa.org> * @author owenm <owen23355@gmail.com> * @license MIT */ function Xn(n, e) { var r = Object.keys(n); if (Object.getOwnPropertySymbols) { var a = Object.getOwnPropertySymbols(n); e && (a = a.filter(function(o) { return Object.getOwnPropertyDescriptor(n, o).enumerable; })), r.push.apply(r, a); } return r; } function _t(n) { for (var e = 1; e < arguments.length; e++) { var r = arguments[e] != null ? arguments[e] : {}; e % 2 ? Xn(Object(r), !0).forEach(function(a) { so(n, a, r[a]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(r)) : Xn(Object(r)).forEach(function(a) { Object.defineProperty(n, a, Object.getOwnPropertyDescriptor(r, a)); }); } return n; } function ke(n) { "@babel/helpers - typeof"; return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? ke = function(e) { return typeof e; } : ke = function(e) { return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e; }, ke(n); } function so(n, e, r) { return e in n ? Object.defineProperty(n, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : n[e] = r, n; } function Ht() { return Ht = Object.assign || function(n) { for (var e = 1; e < arguments.length; e++) { var r = arguments[e]; for (var a in r) Object.prototype.hasOwnProperty.call(r, a) && (n[a] = r[a]); } return n; }, Ht.apply(this, arguments); } function uo(n, e) { if (n == null) return {}; var r = {}, a = Object.keys(n), o, u; for (u = 0; u < a.length; u++) o = a[u], !(e.indexOf(o) >= 0) && (r[o] = n[o]); return r; } function co(n, e) { if (n == null) return {}; var r = uo(n, e), a, o; if (Object.getOwnPropertySymbols) { var u = Object.getOwnPropertySymbols(n); for (o = 0; o < u.length; o++) a = u[o], !(e.indexOf(a) >= 0) && Object.prototype.propertyIsEnumerable.call(n, a) && (r[a] = n[a]); } return r; } function fo(n) { return po(n) || vo(n) || ho(n) || mo(); } function po(n) { if (Array.isArray(n)) return In(n); } function vo(n) { if (typeof Symbol < "u" && n[Symbol.iterator] != null || n["@@iterator"] != null) return Array.from(n); } function ho(n, e) { if (n) { if (typeof n == "string") return In(n, e); var r = Object.prototype.toString.call(n).slice(8, -1); if (r === "Object" && n.constructor && (r = n.constructor.name), r === "Map" || r === "Set") return Array.from(n); if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return In(n, e); } } function In(n, e) { (e == null || e > n.length) && (e = n.length); for (var r = 0, a = new Array(e); r < e; r++) a[r] = n[r]; return a; } function mo() { throw new TypeError(`Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`); } var go = "1.14.0"; function te(n) { if (typeof window < "u" && window.navigator) return !!/* @__PURE__ */ navigator.userAgent.match(n); } var ee = te(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), $e = te(/Edge/i), zn = te(/firefox/i), Le = te(/safari/i) && !te(/chrome/i) && !te(/android/i), sr = te(/iP(ad|od|hone)/i), yo = te(/chrome/i) && te(/android/i), ur = { capture: !1, passive: !1 }; function tt(n, e, r) { n.addEventListener(e, r, !ee && ur); } function _(n, e, r) { n.removeEventListener(e, r, !ee && ur); } function on(n, e) { if (e) { if (e[0] === ">" && (e = e.substring(1)), n) try { if (n.matches) return n.matches(e); if (n.msMatchesSelector) return n.msMatchesSelector(e); if (n.webkitMatchesSelector) return n.webkitMatchesSelector(e); } catch { return !1; } return !1; } } function bo(n) { return n.host && n !== document && n.host.nodeType ? n.host : n.parentNode; } function Jt(n, e, r, a) { if (n) { r = r || document; do { if (e != null && (e[0] === ">" ? n.parentNode === r && on(n, e) : on(n, e)) || a && n === r) return n; if (n === r) break; } while (n = bo(n)); } return null; } var Yn = /\s+/g; function ft(n, e, r) { if (n && e) if (n.classList) n.classList[r ? "add" : "remove"](e); else { var a = (" " + n.className + " ").replace(Yn, " ").replace(" " + e + " ", " "); n.className = (a + (r ? " " + e : "")).replace(Yn, " "); } } function $(n, e, r) { var a = n && n.style; if (a) { if (r === void 0) return document.defaultView && document.defaultView.getComputedStyle ? r = document.defaultView.getComputedStyle(n, "") : n.currentStyle && (r = n.currentStyle), e === void 0 ? r : r[e]; !(e in a) && e.indexOf("webkit") === -1 && (e = "-webkit-" + e), a[e] = r + (typeof r == "string" ? "" : "px"); } } function pe(n, e) { var r = ""; if (typeof n == "string") r = n; else do { var a = $(n, "transform"); a && a !== "none" && (r = a + " " + r); } while (!e && (n = n.parentNode)); var o = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; return o && new o(r); } function dr(n, e, r) { if (n) { var a = n.getElementsByTagName(e), o = 0, u = a.length; if (r) for (; o < u; o++) r(a[o], o); return a; } return []; } function qt() { var n = document.scrollingElement; return n || document.documentElement; } function dt(n, e, r, a, o) { if (!(!n.getBoundingClientRect && n !== window)) { var u, t, i, l, s, d, c; if (n !== window && n.parentNode && n !== qt() ? (u = n.getBoundingClientRect(), t = u.top, i = u.left, l = u.bottom, s = u.right, d = u.height, c = u.width) : (t = 0, i = 0, l = window.innerHeight, s = window.innerWidth, d = window.innerHeight, c = window.innerWidth), (e || r) && n !== window && (o = o || n.parentNode, !ee)) do if (o && o.getBoundingClientRect && ($(o, "transform") !== "none" || r && $(o, "position") !== "static")) { var p = o.getBoundingClientRect(); t -= p.top + parseInt($(o, "border-top-width")), i -= p.left + parseInt($(o, "border-left-width")), l = t + u.height, s = i + u.width; break; } while (o = o.parentNode); if (a && n !== window) { var f = pe(o || n), v = f && f.a, h = f && f.d; f && (t /= h, i /= v, c /= v, d /= h, l = t + d, s = i + c); } return { top: t, left: i, bottom: l, right: s, width: c, height: d }; } } function Jn(n, e, r) { for (var a = le(n, !0), o = dt(n)[e]; a; ) { var u = dt(a)[r], t = void 0; if (t = o >= u, !t) return a; if (a === qt()) break; a = le(a, !1); } return !1; } function Se(n, e, r, a) { for (var o = 0, u = 0, t = n.children; u < t.length; ) {