@mulmochat-plugin/form 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,994 +1,9 @@
1
- import { defineComponent as j, ref as D, watch as N, computed as E, createElementBlock as l, openBlock as u, createCommentVNode as f, createElementVNode as c, toDisplayString as p, createTextVNode as L, Fragment as C, renderList as q, withModifiers as O, normalizeClass as y, withDirectives as V, vModelText as A, vModelRadio as G, vModelSelect as K, vModelCheckbox as Q, normalizeStyle as X } from "vue";
2
- const Z = "presentForm", ee = {
3
- type: "function",
4
- name: Z,
5
- description: "Create a structured form to collect information from the user. Supports various field types including text input, textarea, multiple choice (radio), dropdown menus, checkboxes, date/time pickers, and number inputs. Each field can have validation rules and help text.",
6
- parameters: {
7
- type: "object",
8
- properties: {
9
- title: {
10
- type: "string",
11
- description: "Optional title for the form (e.g., 'User Registration')"
12
- },
13
- description: {
14
- type: "string",
15
- description: "Optional description explaining the purpose of the form"
16
- },
17
- fields: {
18
- type: "array",
19
- description: "Array of form fields with various types and configurations",
20
- items: {
21
- type: "object",
22
- properties: {
23
- id: {
24
- type: "string",
25
- description: "Unique identifier for the field (e.g., 'email', 'birthdate'). This will be the key in the JSON response. Use descriptive camelCase or snake_case names."
26
- },
27
- type: {
28
- type: "string",
29
- enum: [
30
- "text",
31
- "textarea",
32
- "radio",
33
- "dropdown",
34
- "checkbox",
35
- "date",
36
- "time",
37
- "number"
38
- ],
39
- description: "Field type: 'text' for short text, 'textarea' for long text, 'radio' for 2-6 choices, 'dropdown' for many choices, 'checkbox' for multiple selections, 'date' for date picker, 'time' for time picker, 'number' for numeric input"
40
- },
41
- label: {
42
- type: "string",
43
- description: "Field label shown to the user"
44
- },
45
- description: {
46
- type: "string",
47
- description: "Optional help text explaining the field"
48
- },
49
- required: {
50
- type: "boolean",
51
- description: "Whether the field is required (default: false)"
52
- },
53
- placeholder: {
54
- type: "string",
55
- description: "Placeholder text for text/textarea fields"
56
- },
57
- validation: {
58
- type: "string",
59
- description: "For text fields: 'email', 'url', 'phone', or a regex pattern"
60
- },
61
- minLength: {
62
- type: "number",
63
- description: "Minimum character length for textarea fields"
64
- },
65
- maxLength: {
66
- type: "number",
67
- description: "Maximum character length for textarea fields"
68
- },
69
- rows: {
70
- type: "number",
71
- description: "Number of visible rows for textarea (default: 4)"
72
- },
73
- choices: {
74
- type: "array",
75
- items: { type: "string" },
76
- description: "Array of choices for radio/dropdown/checkbox fields. Radio should have 2-6 choices, dropdown for 7+ choices."
77
- },
78
- searchable: {
79
- type: "boolean",
80
- description: "Make dropdown searchable (for large lists)"
81
- },
82
- minSelections: {
83
- type: "number",
84
- description: "Minimum number of selections for checkbox fields"
85
- },
86
- maxSelections: {
87
- type: "number",
88
- description: "Maximum number of selections for checkbox fields"
89
- },
90
- minDate: {
91
- type: "string",
92
- description: "Minimum date (ISO format: YYYY-MM-DD)"
93
- },
94
- maxDate: {
95
- type: "string",
96
- description: "Maximum date (ISO format: YYYY-MM-DD)"
97
- },
98
- format: {
99
- type: "string",
100
- description: "Format for time fields: '12hr' or '24hr'"
101
- },
102
- min: {
103
- type: "number",
104
- description: "Minimum value for number fields"
105
- },
106
- max: {
107
- type: "number",
108
- description: "Maximum value for number fields"
109
- },
110
- step: {
111
- type: "number",
112
- description: "Step increment for number fields"
113
- },
114
- defaultValue: {
115
- description: "Optional default/pre-filled value for the field. Type varies by field: string for text/textarea/radio/dropdown/date/time, number for number fields, array of strings for checkbox fields. For radio/dropdown, must be one of the choices. For checkbox, must be a subset of choices."
116
- }
117
- },
118
- required: ["id", "type", "label"]
119
- },
120
- minItems: 1
121
- }
122
- },
123
- required: ["fields"]
124
- }
125
- }, te = [
126
- {
127
- name: "Contact Form",
128
- args: {
129
- title: "Contact Us",
130
- description: "Please fill out the form below to get in touch.",
131
- fields: [
132
- {
133
- id: "name",
134
- type: "text",
135
- label: "Full Name",
136
- required: !0,
137
- placeholder: "John Doe"
138
- },
139
- {
140
- id: "email",
141
- type: "text",
142
- label: "Email Address",
143
- required: !0,
144
- placeholder: "john@example.com",
145
- validation: "email"
146
- },
147
- {
148
- id: "subject",
149
- type: "dropdown",
150
- label: "Subject",
151
- choices: [
152
- "General Inquiry",
153
- "Technical Support",
154
- "Sales",
155
- "Feedback"
156
- ],
157
- required: !0
158
- },
159
- {
160
- id: "message",
161
- type: "textarea",
162
- label: "Message",
163
- required: !0,
164
- minLength: 10,
165
- maxLength: 500,
166
- rows: 5
167
- }
168
- ]
169
- }
170
- },
171
- {
172
- name: "Survey Form",
173
- args: {
174
- title: "Customer Satisfaction Survey",
175
- fields: [
176
- {
177
- id: "satisfaction",
178
- type: "radio",
179
- label: "How satisfied are you with our service?",
180
- choices: [
181
- "Very Satisfied",
182
- "Satisfied",
183
- "Neutral",
184
- "Dissatisfied",
185
- "Very Dissatisfied"
186
- ],
187
- required: !0
188
- },
189
- {
190
- id: "features",
191
- type: "checkbox",
192
- label: "Which features do you use most?",
193
- choices: [
194
- "Dashboard",
195
- "Reports",
196
- "Analytics",
197
- "API",
198
- "Integrations"
199
- ],
200
- minSelections: 1,
201
- maxSelections: 3
202
- },
203
- {
204
- id: "recommendation",
205
- type: "number",
206
- label: "How likely are you to recommend us? (0-10)",
207
- min: 0,
208
- max: 10,
209
- step: 1
210
- }
211
- ]
212
- }
213
- },
214
- {
215
- name: "Event Registration",
216
- args: {
217
- title: "Event Registration",
218
- description: "Register for our upcoming conference.",
219
- fields: [
220
- {
221
- id: "attendeeName",
222
- type: "text",
223
- label: "Attendee Name",
224
- required: !0
225
- },
226
- {
227
- id: "eventDate",
228
- type: "date",
229
- label: "Preferred Date",
230
- required: !0,
231
- minDate: "2025-01-01",
232
- maxDate: "2025-12-31"
233
- },
234
- {
235
- id: "sessionTime",
236
- type: "time",
237
- label: "Session Time",
238
- format: "12hr"
239
- },
240
- {
241
- id: "dietaryRestrictions",
242
- type: "checkbox",
243
- label: "Dietary Restrictions",
244
- choices: ["Vegetarian", "Vegan", "Gluten-Free", "Halal", "Kosher"]
245
- }
246
- ]
247
- }
248
- }
249
- ], re = { class: "w-full h-full overflow-y-auto p-8" }, ae = {
250
- key: 0,
251
- class: "max-w-3xl w-full mx-auto"
252
- }, ie = {
253
- key: 0,
254
- class: "text-gray-900 text-3xl font-bold mb-4 text-center"
255
- }, oe = {
256
- key: 1,
257
- class: "text-gray-600 text-center mb-8 text-lg"
258
- }, ne = {
259
- key: 2,
260
- class: "bg-red-50 border-2 border-red-500 rounded-lg p-4 mb-6",
261
- role: "alert"
262
- }, se = { class: "text-red-700 space-y-1" }, le = ["href", "onClick"], ue = ["id"], de = ["for"], ce = {
263
- key: 0,
264
- class: "text-red-500 ml-1",
265
- "aria-label": "required"
266
- }, me = {
267
- key: 0,
268
- class: "text-gray-600 text-sm mb-2"
269
- }, he = ["id", "onUpdate:modelValue", "placeholder", "aria-invalid", "aria-describedby", "onBlur", "onInput"], pe = ["id", "onUpdate:modelValue", "placeholder", "rows", "aria-invalid", "aria-describedby", "onBlur", "onInput"], ve = ["id", "onUpdate:modelValue", "min", "max", "step", "aria-invalid", "aria-describedby", "onBlur", "onInput"], be = ["id", "onUpdate:modelValue", "min", "max", "aria-invalid", "aria-describedby", "onBlur", "onChange"], ge = ["id", "onUpdate:modelValue", "aria-invalid", "aria-describedby", "onBlur", "onChange"], ye = ["aria-invalid", "aria-describedby"], fe = ["name", "value", "onUpdate:modelValue", "onChange", "onBlur"], xe = { class: "text-gray-800" }, we = ["id", "onUpdate:modelValue", "aria-invalid", "aria-describedby", "onBlur", "onChange"], $e = ["value"], ke = ["aria-invalid", "aria-describedby"], _e = ["value", "onUpdate:modelValue", "onChange", "onBlur"], Ve = { class: "text-gray-800" }, Se = ["id"], Fe = { key: 0 }, De = { class: "mt-8 flex justify-center" }, Ee = ["disabled"], Le = { class: "mt-4 text-center text-gray-600 text-sm" }, Me = /* @__PURE__ */ j({
270
- __name: "View",
271
- props: {
272
- selectedResult: {},
273
- sendTextMessage: { type: Function }
274
- },
275
- emits: ["updateResult"],
276
- setup(S, { emit: x }) {
277
- const m = S, $ = x, d = D(null), n = D({}), o = D(/* @__PURE__ */ new Set()), b = D(/* @__PURE__ */ new Map()), v = D(!1), M = D(!1), g = D(!1);
278
- N(
279
- () => m.selectedResult,
280
- (r, i) => {
281
- if (r?.toolName === "presentForm" && r.jsonData && (!i || !i.jsonData || i.uuid !== r.uuid || i.jsonData !== r.jsonData)) {
282
- if (g.value = !0, d.value = r.jsonData, n.value = {}, d.value.fields.forEach((a) => {
283
- n.value[a.id] = t(a);
284
- }), r.viewState) {
285
- const a = r.viewState;
286
- a.userResponses && Object.assign(n.value, a.userResponses), a.touched && (o.value = new Set(a.touched), a.touched.forEach((h) => {
287
- R(h);
288
- })), a.submitted !== void 0 && (v.value = a.submitted);
289
- }
290
- g.value = !1;
291
- }
292
- },
293
- { immediate: !0 }
294
- ), N(
295
- [n, o, v],
296
- () => {
297
- if (g.value || !m.selectedResult) return;
298
- const r = {
299
- ...m.selectedResult,
300
- viewState: {
301
- userResponses: { ...n.value },
302
- touched: Array.from(o.value),
303
- submitted: v.value
304
- }
305
- };
306
- $("updateResult", r);
307
- },
308
- { deep: !0 }
309
- );
310
- function t(r) {
311
- const i = r;
312
- if (i.defaultValue !== void 0)
313
- switch (r.type) {
314
- case "radio":
315
- case "dropdown": {
316
- const e = r.choices.indexOf(
317
- i.defaultValue
318
- );
319
- return e !== -1 ? e : null;
320
- }
321
- case "checkbox":
322
- return Array.isArray(i.defaultValue) ? i.defaultValue.map((e) => r.choices.indexOf(e)).filter((e) => e !== -1) : [];
323
- default:
324
- return i.defaultValue;
325
- }
326
- switch (r.type) {
327
- case "text":
328
- case "textarea":
329
- return "";
330
- case "number":
331
- return r.min !== void 0 ? r.min : 0;
332
- case "date":
333
- case "time":
334
- return "";
335
- case "radio":
336
- case "dropdown":
337
- return null;
338
- case "checkbox":
339
- return [];
340
- default:
341
- return null;
342
- }
343
- }
344
- function w(r) {
345
- return r == null ? !0 : typeof r == "string" ? r.trim() === "" : Array.isArray(r) ? r.length === 0 : !1;
346
- }
347
- function I(r) {
348
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);
349
- }
350
- function P(r) {
351
- try {
352
- return new URL(r), !0;
353
- } catch {
354
- return !1;
355
- }
356
- }
357
- function T(r) {
358
- return /^[\d\s\-+()]+$/.test(r) && r.replace(/\D/g, "").length >= 10;
359
- }
360
- function z(r, i) {
361
- if (r.required && w(i))
362
- return `${r.label} is required`;
363
- if (w(i))
364
- return null;
365
- switch (r.type) {
366
- case "text": {
367
- const e = r;
368
- if (e.validation === "email" && !I(i))
369
- return "Please enter a valid email address";
370
- if (e.validation === "url" && !P(i))
371
- return "Please enter a valid URL";
372
- if (e.validation === "phone" && !T(i))
373
- return "Please enter a valid phone number";
374
- if (typeof e.validation == "string" && e.validation !== "email" && e.validation !== "url" && e.validation !== "phone")
375
- try {
376
- if (!new RegExp(e.validation).test(i))
377
- return `${r.label} format is invalid`;
378
- } catch {
379
- console.warn(`Invalid regex pattern: ${e.validation}`);
380
- }
381
- break;
382
- }
383
- case "textarea": {
384
- const e = r;
385
- if (e.minLength && i.length < e.minLength)
386
- return `Must be at least ${e.minLength} characters (currently ${i.length})`;
387
- if (e.maxLength && i.length > e.maxLength)
388
- return `Must be no more than ${e.maxLength} characters (currently ${i.length})`;
389
- break;
390
- }
391
- case "number": {
392
- const e = r;
393
- if (e.min !== void 0 && i < e.min)
394
- return `Must be at least ${e.min}`;
395
- if (e.max !== void 0 && i > e.max)
396
- return `Must be no more than ${e.max}`;
397
- break;
398
- }
399
- case "date": {
400
- const e = r;
401
- if (e.minDate && i < e.minDate)
402
- return `Date must be on or after ${e.minDate}`;
403
- if (e.maxDate && i > e.maxDate)
404
- return `Date must be on or before ${e.maxDate}`;
405
- break;
406
- }
407
- case "checkbox": {
408
- const e = r, a = i?.length || 0;
409
- if (e.minSelections && a < e.minSelections)
410
- return `Please select at least ${e.minSelections} option${e.minSelections > 1 ? "s" : ""}`;
411
- if (e.maxSelections && a > e.maxSelections)
412
- return `Please select no more than ${e.maxSelections} option${e.maxSelections > 1 ? "s" : ""}`;
413
- break;
414
- }
415
- }
416
- return null;
417
- }
418
- function R(r) {
419
- const i = d.value?.fields.find((h) => h.id === r);
420
- if (!i) return !0;
421
- const e = n.value[r], a = z(i, e);
422
- return a ? (b.value.set(r, {
423
- fieldId: r,
424
- message: a,
425
- type: "custom"
426
- }), !1) : (b.value.delete(r), !0);
427
- }
428
- function k(r) {
429
- o.value.add(r), R(r);
430
- }
431
- function _(r) {
432
- o.value.has(r) && R(r);
433
- }
434
- function s(r) {
435
- return b.value.has(r);
436
- }
437
- function B(r) {
438
- const i = document.getElementById(`input-${r}`);
439
- i && (i.focus(), i.scrollIntoView({ behavior: "smooth", block: "center" }));
440
- }
441
- function Y(r) {
442
- return (r.type === "text" || r.type === "textarea") && r.maxLength !== void 0;
443
- }
444
- function U(r) {
445
- if (r.type !== "text" && r.type !== "textarea") return !1;
446
- const i = r.maxLength;
447
- return i ? (n.value[r.id] || "").length / i > 0.9 : !1;
448
- }
449
- const H = E(() => d.value?.fields.filter((r) => r.required).length || 0), J = E(() => d.value ? d.value.fields.filter(
450
- (r) => r.required && !w(n.value[r.id])
451
- ).length : 0);
452
- function W() {
453
- if (v.value) return;
454
- if (d.value?.fields.forEach((e) => {
455
- o.value.add(e.id), R(e.id);
456
- }), b.value.size > 0) {
457
- M.value = !0;
458
- const e = Array.from(b.value.keys())[0];
459
- B(e);
460
- return;
461
- }
462
- const r = {};
463
- d.value?.fields.forEach((e) => {
464
- const a = n.value[e.id];
465
- e.type === "radio" || e.type === "dropdown" ? a != null ? r[e.id] = e.choices[a] : r[e.id] = null : e.type === "checkbox" ? r[e.id] = (a || []).map(
466
- (h) => e.choices[h]
467
- ) : r[e.id] = a;
468
- });
469
- const i = JSON.stringify(
470
- {
471
- formSubmission: {
472
- formTitle: d.value?.title || "Form",
473
- responses: r
474
- }
475
- },
476
- null,
477
- 2
478
- );
479
- v.value = !0, m.sendTextMessage(i);
480
- }
481
- return (r, i) => (u(), l("div", re, [
482
- d.value ? (u(), l("div", ae, [
483
- d.value.title ? (u(), l("h2", ie, p(d.value.title), 1)) : f("", !0),
484
- d.value.description ? (u(), l("p", oe, p(d.value.description), 1)) : f("", !0),
485
- M.value && b.value.size > 0 ? (u(), l("div", ne, [
486
- i[0] || (i[0] = c("h3", { class: "text-red-800 font-semibold mb-2 flex items-center gap-2" }, [
487
- c("svg", {
488
- class: "w-5 h-5",
489
- fill: "currentColor",
490
- viewBox: "0 0 20 20",
491
- "aria-hidden": "true"
492
- }, [
493
- c("path", {
494
- "fill-rule": "evenodd",
495
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
496
- "clip-rule": "evenodd"
497
- })
498
- ]),
499
- L(" Please fix the following errors: ")
500
- ], -1)),
501
- c("ul", se, [
502
- (u(!0), l(C, null, q(b.value, ([e, a]) => (u(), l("li", { key: e }, [
503
- c("a", {
504
- href: `#${e}`,
505
- onClick: O((h) => B(e), ["prevent"]),
506
- class: "hover:underline cursor-pointer"
507
- }, p(a.message), 9, le)
508
- ]))), 128))
509
- ])
510
- ])) : f("", !0),
511
- c("form", {
512
- onSubmit: O(W, ["prevent"]),
513
- class: "space-y-6"
514
- }, [
515
- (u(!0), l(C, null, q(d.value.fields, (e) => (u(), l("div", {
516
- key: e.id,
517
- id: e.id,
518
- class: y(["form-field", { "has-error": s(e.id) && o.value.has(e.id) }])
519
- }, [
520
- c("label", {
521
- for: `input-${e.id}`,
522
- class: y(["block text-gray-800 font-semibold mb-2", {
523
- "text-red-600": s(e.id) && o.value.has(e.id)
524
- }])
525
- }, [
526
- L(p(e.label) + " ", 1),
527
- e.required ? (u(), l("span", ce, "*")) : f("", !0)
528
- ], 10, de),
529
- e.description ? (u(), l("p", me, p(e.description), 1)) : f("", !0),
530
- e.type === "text" ? V((u(), l("input", {
531
- key: 1,
532
- id: `input-${e.id}`,
533
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
534
- type: "text",
535
- placeholder: e.placeholder,
536
- "aria-invalid": s(e.id) && o.value.has(e.id),
537
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
538
- onBlur: (a) => k(e.id),
539
- onInput: (a) => _(e.id),
540
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
541
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
542
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
543
- }])
544
- }, null, 42, he)), [
545
- [A, n.value[e.id]]
546
- ]) : e.type === "textarea" ? V((u(), l("textarea", {
547
- key: 2,
548
- id: `input-${e.id}`,
549
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
550
- placeholder: e.placeholder,
551
- rows: e.rows || 4,
552
- "aria-invalid": s(e.id) && o.value.has(e.id),
553
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
554
- onBlur: (a) => k(e.id),
555
- onInput: (a) => _(e.id),
556
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors resize-y", {
557
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
558
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
559
- }])
560
- }, null, 42, pe)), [
561
- [A, n.value[e.id]]
562
- ]) : e.type === "number" ? V((u(), l("input", {
563
- key: 3,
564
- id: `input-${e.id}`,
565
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
566
- type: "number",
567
- min: e.min,
568
- max: e.max,
569
- step: e.step,
570
- "aria-invalid": s(e.id) && o.value.has(e.id),
571
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
572
- onBlur: (a) => k(e.id),
573
- onInput: (a) => _(e.id),
574
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
575
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
576
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
577
- }])
578
- }, null, 42, ve)), [
579
- [
580
- A,
581
- n.value[e.id],
582
- void 0,
583
- { number: !0 }
584
- ]
585
- ]) : e.type === "date" ? V((u(), l("input", {
586
- key: 4,
587
- id: `input-${e.id}`,
588
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
589
- type: "date",
590
- min: e.minDate,
591
- max: e.maxDate,
592
- "aria-invalid": s(e.id) && o.value.has(e.id),
593
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
594
- onBlur: (a) => k(e.id),
595
- onChange: (a) => _(e.id),
596
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
597
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
598
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
599
- }])
600
- }, null, 42, be)), [
601
- [A, n.value[e.id]]
602
- ]) : e.type === "time" ? V((u(), l("input", {
603
- key: 5,
604
- id: `input-${e.id}`,
605
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
606
- type: "time",
607
- "aria-invalid": s(e.id) && o.value.has(e.id),
608
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
609
- onBlur: (a) => k(e.id),
610
- onChange: (a) => _(e.id),
611
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors", {
612
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
613
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
614
- }])
615
- }, null, 42, ge)), [
616
- [A, n.value[e.id]]
617
- ]) : e.type === "radio" ? (u(), l("div", {
618
- key: 6,
619
- class: "space-y-2",
620
- role: "radiogroup",
621
- "aria-invalid": s(e.id) && o.value.has(e.id),
622
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0
623
- }, [
624
- (u(!0), l(C, null, q(e.choices, (a, h) => (u(), l("label", {
625
- key: h,
626
- class: y(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50", {
627
- "border-blue-500 bg-blue-50": n.value[e.id] === h,
628
- "border-gray-300": n.value[e.id] !== h
629
- }])
630
- }, [
631
- V(c("input", {
632
- type: "radio",
633
- name: e.id,
634
- value: h,
635
- "onUpdate:modelValue": (F) => n.value[e.id] = F,
636
- onChange: (F) => _(e.id),
637
- onBlur: (F) => k(e.id),
638
- class: "mr-3 h-4 w-4 flex-shrink-0"
639
- }, null, 40, fe), [
640
- [G, n.value[e.id]]
641
- ]),
642
- c("span", xe, p(a), 1)
643
- ], 2))), 128))
644
- ], 8, ye)) : e.type === "dropdown" ? V((u(), l("select", {
645
- key: 7,
646
- id: `input-${e.id}`,
647
- "onUpdate:modelValue": (a) => n.value[e.id] = a,
648
- "aria-invalid": s(e.id) && o.value.has(e.id),
649
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0,
650
- onBlur: (a) => k(e.id),
651
- onChange: (a) => _(e.id),
652
- class: y(["w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white", {
653
- "border-red-500 focus:ring-red-500": s(e.id) && o.value.has(e.id),
654
- "border-gray-300": !s(e.id) || !o.value.has(e.id)
655
- }])
656
- }, [
657
- i[1] || (i[1] = c("option", {
658
- value: null,
659
- disabled: ""
660
- }, "Select an option...", -1)),
661
- (u(!0), l(C, null, q(e.choices, (a, h) => (u(), l("option", {
662
- key: h,
663
- value: h
664
- }, p(a), 9, $e))), 128))
665
- ], 42, we)), [
666
- [K, n.value[e.id]]
667
- ]) : e.type === "checkbox" ? (u(), l("div", {
668
- key: 8,
669
- class: "space-y-2",
670
- role: "group",
671
- "aria-invalid": s(e.id) && o.value.has(e.id),
672
- "aria-describedby": s(e.id) && o.value.has(e.id) ? `${e.id}-error` : void 0
673
- }, [
674
- (u(!0), l(C, null, q(e.choices, (a, h) => (u(), l("label", {
675
- key: h,
676
- class: y(["flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50", {
677
- "border-blue-500 bg-blue-50": (n.value[e.id] || []).includes(h),
678
- "border-gray-300": !(n.value[e.id] || []).includes(
679
- h
680
- )
681
- }])
682
- }, [
683
- V(c("input", {
684
- type: "checkbox",
685
- value: h,
686
- "onUpdate:modelValue": (F) => n.value[e.id] = F,
687
- onChange: (F) => _(e.id),
688
- onBlur: (F) => k(e.id),
689
- class: "mr-3 h-4 w-4 flex-shrink-0"
690
- }, null, 40, _e), [
691
- [Q, n.value[e.id]]
692
- ]),
693
- c("span", Ve, p(a), 1)
694
- ], 2))), 128))
695
- ], 8, ke)) : f("", !0),
696
- s(e.id) && o.value.has(e.id) ? (u(), l("div", {
697
- key: 9,
698
- id: `${e.id}-error`,
699
- class: "flex items-center gap-2 mt-2 text-red-600 text-sm",
700
- role: "alert"
701
- }, [
702
- i[2] || (i[2] = c("svg", {
703
- class: "w-4 h-4 flex-shrink-0",
704
- fill: "currentColor",
705
- viewBox: "0 0 20 20",
706
- "aria-hidden": "true"
707
- }, [
708
- c("path", {
709
- "fill-rule": "evenodd",
710
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
711
- "clip-rule": "evenodd"
712
- })
713
- ], -1)),
714
- L(" " + p(b.value.get(e.id)?.message), 1)
715
- ], 8, Se)) : f("", !0),
716
- Y(e) ? (u(), l("div", {
717
- key: 10,
718
- class: y(["text-sm mt-2", {
719
- "text-amber-600 font-semibold": U(e),
720
- "text-gray-500": !U(e)
721
- }])
722
- }, [
723
- L(p((n.value[e.id] || "").length) + " ", 1),
724
- e.maxLength ? (u(), l("span", Fe, " / " + p(e.maxLength), 1)) : f("", !0),
725
- i[3] || (i[3] = L(" characters ", -1))
726
- ], 2)) : f("", !0)
727
- ], 10, ue))), 128)),
728
- c("div", De, [
729
- c("button", {
730
- type: "submit",
731
- disabled: v.value,
732
- class: y([
733
- v.value ? "bg-green-600 cursor-default" : "bg-blue-600 hover:bg-blue-700",
734
- "px-8 py-3 rounded-lg text-white font-semibold text-lg transition-colors"
735
- ])
736
- }, p(v.value ? "Submitted" : "Submit Form"), 11, Ee)
737
- ]),
738
- c("div", Le, p(J.value) + " / " + p(H.value) + " required fields completed ", 1)
739
- ], 32)
740
- ])) : f("", !0)
741
- ]));
742
- }
743
- }), Ce = (S, x) => {
744
- const m = S.__vccOpts || S;
745
- for (const [$, d] of x)
746
- m[$] = d;
747
- return m;
748
- }, qe = /* @__PURE__ */ Ce(Me, [["__scopeId", "data-v-b79fe71c"]]), Ae = { class: "w-full h-full flex flex-col items-center justify-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border-2 border-gray-200" }, Re = { class: "text-center" }, Be = { class: "text-gray-900 font-bold text-lg mb-1 line-clamp-2" }, Ue = { class: "text-gray-600 text-sm mb-2" }, Ne = {
749
- key: 0,
750
- class: "flex items-center justify-center gap-2"
751
- }, Oe = { class: "w-32 h-2 bg-gray-200 rounded-full overflow-hidden" }, je = { class: "text-xs text-gray-500" }, Ie = {
752
- key: 1,
753
- class: "inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold"
754
- }, Pe = /* @__PURE__ */ j({
755
- __name: "Preview",
756
- props: {
757
- result: {}
758
- },
759
- setup(S) {
760
- const x = S, m = E(() => x.result?.toolName === "presentForm" ? x.result.jsonData : null), $ = E(() => x.result?.viewState || null), d = E(() => m.value?.fields.length || 0), n = E(() => $.value?.submitted || !1), o = E(() => {
761
- if (!m.value || n.value) return 100;
762
- const b = m.value.fields.filter((g) => g.required);
763
- if (b.length === 0) return 0;
764
- const v = $.value?.userResponses || {}, M = b.filter((g) => {
765
- const t = v[g.id];
766
- return t == null ? !1 : typeof t == "string" ? t.trim() !== "" : Array.isArray(t) ? t.length > 0 : !0;
767
- }).length;
768
- return Math.round(M / b.length * 100);
769
- });
770
- return (b, v) => (u(), l("div", Ae, [
771
- c("div", Re, [
772
- v[1] || (v[1] = c("svg", {
773
- class: "w-12 h-12 mx-auto mb-3 text-blue-600",
774
- fill: "none",
775
- stroke: "currentColor",
776
- viewBox: "0 0 24 24"
777
- }, [
778
- c("path", {
779
- "stroke-linecap": "round",
780
- "stroke-linejoin": "round",
781
- "stroke-width": "2",
782
- d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
783
- })
784
- ], -1)),
785
- c("h3", Be, p(m.value?.title || "Form"), 1),
786
- c("p", Ue, p(d.value) + " field" + p(d.value !== 1 ? "s" : ""), 1),
787
- n.value ? (u(), l("div", Ie, [...v[0] || (v[0] = [
788
- c("svg", {
789
- class: "w-3 h-3",
790
- fill: "currentColor",
791
- viewBox: "0 0 20 20"
792
- }, [
793
- c("path", {
794
- "fill-rule": "evenodd",
795
- d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
796
- "clip-rule": "evenodd"
797
- })
798
- ], -1),
799
- L(" Submitted ", -1)
800
- ])])) : (u(), l("div", Ne, [
801
- c("div", Oe, [
802
- c("div", {
803
- class: "h-full bg-blue-600 transition-all duration-300",
804
- style: X({ width: `${o.value}%` })
805
- }, null, 4)
806
- ]),
807
- c("span", je, p(o.value) + "%", 1)
808
- ]))
809
- ])
810
- ]));
811
- }
812
- }), Te = async (S, x) => {
813
- try {
814
- const { title: m, description: $, fields: d } = x;
815
- if (!d || !Array.isArray(d) || d.length === 0)
816
- throw new Error("At least one field is required");
817
- const n = /* @__PURE__ */ new Set();
818
- for (let g = 0; g < d.length; g++) {
819
- const t = d[g];
820
- if (!t.id || typeof t.id != "string")
821
- throw new Error(`Field ${g + 1} must have a valid 'id' property`);
822
- if (!t.type || typeof t.type != "string")
823
- throw new Error(`Field ${g + 1} must have a valid 'type' property`);
824
- if (!t.label || typeof t.label != "string")
825
- throw new Error(`Field ${g + 1} must have a valid 'label' property`);
826
- if (n.has(t.id))
827
- throw new Error(`Duplicate field ID: '${t.id}'`);
828
- switch (n.add(t.id), t.type) {
829
- case "text":
830
- case "textarea":
831
- if (t.minLength !== void 0 && t.maxLength !== void 0 && t.minLength > t.maxLength)
832
- throw new Error(
833
- `Field '${t.id}': minLength cannot be greater than maxLength`
834
- );
835
- break;
836
- case "radio":
837
- if (!Array.isArray(t.choices) || t.choices.length < 2)
838
- throw new Error(
839
- `Field '${t.id}': radio fields must have at least 2 choices`
840
- );
841
- t.choices.length > 6 && console.warn(
842
- `Field '${t.id}': radio fields with more than 6 choices should use 'dropdown' type instead`
843
- );
844
- break;
845
- case "dropdown":
846
- case "checkbox":
847
- if (!Array.isArray(t.choices) || t.choices.length < 1)
848
- throw new Error(
849
- `Field '${t.id}': ${t.type} fields must have at least 1 choice`
850
- );
851
- break;
852
- case "number":
853
- if (t.min !== void 0 && t.max !== void 0 && t.min > t.max)
854
- throw new Error(
855
- `Field '${t.id}': min cannot be greater than max`
856
- );
857
- break;
858
- case "date":
859
- if (t.minDate && t.maxDate && t.minDate > t.maxDate)
860
- throw new Error(
861
- `Field '${t.id}': minDate cannot be after maxDate`
862
- );
863
- break;
864
- case "time":
865
- break;
866
- default: {
867
- const w = t;
868
- throw new Error(
869
- `Field '${w.id}': unknown field type '${w.type}'`
870
- );
871
- }
872
- }
873
- if (t.type === "checkbox") {
874
- if (t.minSelections !== void 0 && t.maxSelections !== void 0 && t.minSelections > t.maxSelections)
875
- throw new Error(
876
- `Field '${t.id}': minSelections cannot be greater than maxSelections`
877
- );
878
- if (t.maxSelections !== void 0 && t.maxSelections > t.choices.length)
879
- throw new Error(
880
- `Field '${t.id}': maxSelections cannot exceed number of choices`
881
- );
882
- }
883
- if (t.defaultValue !== void 0)
884
- switch (t.type) {
885
- case "text":
886
- case "textarea":
887
- if (typeof t.defaultValue != "string")
888
- throw new Error(
889
- `Field '${t.id}': defaultValue must be a string`
890
- );
891
- if (t.minLength !== void 0 && t.defaultValue.length < t.minLength)
892
- throw new Error(
893
- `Field '${t.id}': defaultValue length is less than minLength`
894
- );
895
- if (t.maxLength !== void 0 && t.defaultValue.length > t.maxLength)
896
- throw new Error(
897
- `Field '${t.id}': defaultValue length exceeds maxLength`
898
- );
899
- break;
900
- case "radio":
901
- case "dropdown":
902
- if (typeof t.defaultValue != "string")
903
- throw new Error(
904
- `Field '${t.id}': defaultValue must be a string`
905
- );
906
- if (!t.choices.includes(t.defaultValue))
907
- throw new Error(
908
- `Field '${t.id}': defaultValue '${t.defaultValue}' is not in choices`
909
- );
910
- break;
911
- case "checkbox":
912
- if (!Array.isArray(t.defaultValue))
913
- throw new Error(
914
- `Field '${t.id}': defaultValue must be an array`
915
- );
916
- for (const w of t.defaultValue)
917
- if (!t.choices.includes(w))
918
- throw new Error(
919
- `Field '${t.id}': defaultValue contains '${w}' which is not in choices`
920
- );
921
- if (t.minSelections !== void 0 && t.defaultValue.length < t.minSelections)
922
- throw new Error(
923
- `Field '${t.id}': defaultValue has fewer selections than minSelections`
924
- );
925
- if (t.maxSelections !== void 0 && t.defaultValue.length > t.maxSelections)
926
- throw new Error(
927
- `Field '${t.id}': defaultValue has more selections than maxSelections`
928
- );
929
- break;
930
- case "number":
931
- if (typeof t.defaultValue != "number")
932
- throw new Error(
933
- `Field '${t.id}': defaultValue must be a number`
934
- );
935
- if (t.min !== void 0 && t.defaultValue < t.min)
936
- throw new Error(
937
- `Field '${t.id}': defaultValue is less than min`
938
- );
939
- if (t.max !== void 0 && t.defaultValue > t.max)
940
- throw new Error(
941
- `Field '${t.id}': defaultValue is greater than max`
942
- );
943
- break;
944
- case "date":
945
- if (typeof t.defaultValue != "string")
946
- throw new Error(
947
- `Field '${t.id}': defaultValue must be a string (ISO date format)`
948
- );
949
- if (t.minDate !== void 0 && t.defaultValue < t.minDate)
950
- throw new Error(
951
- `Field '${t.id}': defaultValue is before minDate`
952
- );
953
- if (t.maxDate !== void 0 && t.defaultValue > t.maxDate)
954
- throw new Error(
955
- `Field '${t.id}': defaultValue is after maxDate`
956
- );
957
- break;
958
- case "time":
959
- if (typeof t.defaultValue != "string")
960
- throw new Error(
961
- `Field '${t.id}': defaultValue must be a string`
962
- );
963
- break;
964
- }
965
- }
966
- const o = {
967
- title: m,
968
- description: $,
969
- fields: d
970
- }, b = `${d.length} field${d.length > 1 ? "s" : ""}`, v = m ? `: ${m}` : "";
971
- return {
972
- message: `Form created with ${b}${v}`,
973
- jsonData: o,
974
- instructions: "The form has been presented to the user. Wait for the user to fill out and submit the form. They will send their responses as a JSON message."
975
- };
976
- } catch (m) {
977
- return console.error(`ERR: exception
978
- Form creation error`, m), {
979
- message: `Form error: ${m instanceof Error ? m.message : "Unknown error"}`,
980
- instructions: "Acknowledge that there was an error creating the form and suggest trying again with corrected field definitions."
981
- };
982
- }
983
- }, ze = {
984
- toolDefinition: ee,
985
- execute: Te,
986
- generatingMessage: "Preparing form...",
987
- isEnabled: () => !0,
988
- viewComponent: qe,
989
- previewComponent: Pe,
990
- samples: te
991
- }, He = { plugin: ze };
1
+ import { SAMPLES as r, TOOL_DEFINITION as O, TOOL_NAME as u, pluginCore as l, executeForm as p, pluginCore as t } from "./core.js";
992
2
  export {
993
- He as default
3
+ r as SAMPLES,
4
+ O as TOOL_DEFINITION,
5
+ u as TOOL_NAME,
6
+ l as default,
7
+ p as executeForm,
8
+ t as pluginCore
994
9
  };