@seed-ship/mcp-ui-solid 2.6.2 → 2.6.4
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/components/ChatPrompt.cjs +1 -1
- package/dist/components/ChatPrompt.cjs.map +1 -1
- package/dist/components/ChatPrompt.js +1 -1
- package/dist/components/ChatPrompt.js.map +1 -1
- package/dist/components/FormFieldRenderer.cjs +145 -50
- package/dist/components/FormFieldRenderer.cjs.map +1 -1
- package/dist/components/FormFieldRenderer.js +145 -50
- package/dist/components/FormFieldRenderer.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ChatPrompt.tsx +1 -1
- package/src/components/FormFieldRenderer.tsx +122 -38
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const web = require("solid-js/web");
|
|
4
4
|
const solidJs = require("solid-js");
|
|
5
5
|
const FormFieldRenderer = require("./FormFieldRenderer.cjs");
|
|
6
|
-
var _tmpl$ = /* @__PURE__ */ web.template(`<div class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ web.template(`<div class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"role=dialog style="animation:chat-prompt-slide-up 0.2s ease-out"><div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700"><p class="text-sm font-medium text-gray-900 dark:text-white"></p><button></button></div><div class="px-4 py-3"></div><style>
|
|
7
7
|
@keyframes chat-prompt-slide-up {
|
|
8
8
|
from { opacity: 0; transform: translateY(8px); }
|
|
9
9
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPrompt.cjs","sources":["../../src/components/ChatPrompt.tsx"],"sourcesContent":["/**\n * ChatPrompt — Ephemeral structured interaction above chat input\n * v2.4.0: choice, confirm, form subtypes\n *\n * @experimental — This component may change without major bump until v2.5.0.\n *\n * Renders above the chat input. User responds → Promise resolves → prompt disappears.\n * Supports AbortSignal for cleanup on navigation (C4).\n */\n\nimport { Component, Show, For, createSignal, onCleanup, Switch, Match } from 'solid-js'\nimport type {\n ChatPromptConfig,\n ChatPromptResponse,\n ChoicePromptConfig,\n ConfirmPromptConfig,\n FormPromptConfig,\n} from '../types/chat-bus'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { FormFieldParams } from '../types'\n\nexport interface ChatPromptProps {\n /** Prompt configuration */\n config: ChatPromptConfig\n /** Called when user responds */\n onSubmit: (response: ChatPromptResponse) => void\n /** Called when user dismisses (e.g. \"send as-is\") */\n onDismiss?: () => void\n /** Label for the dismiss button (replaces X icon). Default: shows X icon. */\n dismissLabel?: string\n}\n\n/**\n * @experimental\n * Ephemeral interaction component — choice buttons, confirmation dialog, or quick form.\n * Designed to sit between the chat messages and the input area.\n *\n * @example\n * <ChatPrompt\n * config={{ type: 'choice', title: 'Format?', config: { options: [...] } }}\n * onSubmit={(r) => bus.events.emit('onChatPromptResponse', { streamKey, response: r })}\n * onDismiss={() => setActivePrompt(null)}\n * />\n */\nexport const ChatPrompt: Component<ChatPromptProps> = (props) => {\n // F1: Guard against null/undefined config (e.g. after dismiss clears state)\n if (!props.config) return null\n\n return (\n <div\n class=\"w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-hidden\"\n style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}\n role=\"dialog\"\n aria-label={props.config.title}\n >\n {/* Header */}\n <div class=\"flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700\">\n <p class=\"text-sm font-medium text-gray-900 dark:text-white\">{props.config.title}</p>\n <button\n onClick={() => {\n props.onDismiss?.()\n props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })\n }}\n class={props.dismissLabel\n ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'\n : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'\n }\n aria-label={props.dismissLabel || 'Dismiss'}\n >\n <Show when={props.dismissLabel} fallback={\n <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }>\n {props.dismissLabel}\n </Show>\n </button>\n </div>\n\n {/* Body — type-specific */}\n <div class=\"px-4 py-3\">\n <Switch>\n <Match when={props.config.type === 'choice'}>\n <ChoiceBody\n config={props.config.config as ChoicePromptConfig}\n onSelect={(value, label) => props.onSubmit({ type: 'choice', value, label })}\n />\n </Match>\n <Match when={props.config.type === 'confirm'}>\n <ConfirmBody\n config={props.config.config as ConfirmPromptConfig}\n onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}\n onCancel={() => {\n props.onDismiss?.()\n props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })\n }}\n />\n </Match>\n <Match when={props.config.type === 'form'}>\n <FormBody\n config={props.config.config as FormPromptConfig}\n onSubmit={(data, label) => props.onSubmit({ type: 'form', value: data, label })}\n />\n </Match>\n </Switch>\n </div>\n\n <style>{`\n @keyframes chat-prompt-slide-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `}</style>\n </div>\n )\n}\n\n// ─── Choice ──────────────────────────────────────────────────\n\nconst ChoiceBody: Component<{\n config: ChoicePromptConfig\n onSelect: (value: string, label: string) => void\n}> = (props) => {\n const layoutClass = () => {\n switch (props.config.layout) {\n case 'vertical': return 'flex flex-col gap-2'\n case 'grid': return 'grid grid-cols-2 gap-2'\n default: return 'flex flex-wrap gap-2'\n }\n }\n\n return (\n <div class={layoutClass()}>\n <For each={props.config.options}>\n {(option) => (\n <button\n onClick={() => props.onSelect(option.value, option.label)}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left\"\n >\n <Show when={option.icon}>\n <span class=\"mr-2\">{option.icon}</span>\n </Show>\n {option.label}\n <Show when={option.description}>\n <span class=\"block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal\">{option.description}</span>\n </Show>\n </button>\n )}\n </For>\n </div>\n )\n}\n\n// ─── Confirm ─────────────────────────────────────────────────\n\nconst ConfirmBody: Component<{\n config: ConfirmPromptConfig\n onConfirm: () => void\n onCancel: () => void\n}> = (props) => {\n const isDanger = () => props.config.variant === 'danger'\n\n return (\n <div>\n <Show when={props.config.message}>\n <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">{props.config.message}</p>\n </Show>\n <div class=\"flex gap-2 justify-end\">\n <button\n onClick={props.onCancel}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n {props.config.cancelLabel || 'Cancel'}\n </button>\n <button\n onClick={props.onConfirm}\n class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${\n isDanger()\n ? 'bg-red-600 hover:bg-red-700'\n : 'bg-blue-600 hover:bg-blue-700'\n }`}\n >\n {props.config.confirmLabel || 'Confirm'}\n </button>\n </div>\n </div>\n )\n}\n\n// ─── Form (delegates to FormFieldRenderer for all field types) ───\n\nconst FormBody: Component<{\n config: FormPromptConfig\n onSubmit: (data: Record<string, unknown>, label: string) => void\n}> = (props) => {\n const [formData, setFormData] = createSignal<Record<string, any>>({})\n\n const updateField = (name: string, value: any) => {\n setFormData((prev) => ({ ...prev, [name]: value }))\n }\n\n const handleSubmit = (e: Event) => {\n e.preventDefault()\n const data = formData()\n const label = Object.entries(data)\n .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))\n .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)\n .join(', ')\n props.onSubmit(data, label || 'Form submitted')\n }\n\n const isValid = () => {\n const data = formData()\n return (props.config.fields || [])\n .filter((f) => f.required)\n .every((f) => {\n const val = data[f.name]\n if (Array.isArray(val)) return val.length > 0\n if (typeof val === 'boolean') return true\n return val !== undefined && val !== ''\n })\n }\n\n return (\n <form onSubmit={handleSubmit} class=\"flex flex-col gap-3\">\n <For each={props.config.fields}>\n {(field) => (\n <FormFieldRenderer\n field={field as FormFieldParams}\n value={formData()[field.name]}\n onChange={(val) => updateField(field.name, val)}\n formData={formData}\n />\n )}\n </For>\n <div class=\"flex justify-end\">\n <button\n type=\"submit\"\n disabled={!isValid()}\n class=\"px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors\"\n >\n {props.config.submitLabel || 'Submit'}\n </button>\n </div>\n </form>\n )\n}\n"],"names":["ChatPrompt","props","config","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$insert","title","$$click","onDismiss","onSubmit","type","value","label","dismissed","_$createComponent","Show","when","dismissLabel","fallback","_tmpl$2","children","Switch","Match","ChoiceBody","onSelect","ConfirmBody","onConfirm","confirmLabel","onCancel","cancelLabel","FormBody","data","_$effect","_p$","_v$","_v$2","_v$3","e","_$setAttribute","t","_$className","a","undefined","_$runHydrationEvents","layoutClass","layout","_el$7","_tmpl$3","For","each","options","option","_el$8","_tmpl$6","_el$1","_el$10","_co$","_$getNextMarker","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","icon","_el$9","_tmpl$4","description","_el$0","_tmpl$5","isDanger","variant","_el$15","_tmpl$8","_el$20","_el$21","_co$4","_el$17","_el$18","_el$19","message","_el$16","_tmpl$7","_$addEventListener","formData","setFormData","createSignal","updateField","name","prev","handleSubmit","preventDefault","Object","entries","filter","v","Array","isArray","length","map","k","join","isValid","fields","f","required","every","val","_el$22","_tmpl$9","_el$25","_el$26","_co$5","_el$23","_el$24","addEventListener","field","FormFieldRenderer","onChange","submitLabel","_$setProperty","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatPrompt.cjs","sources":["../../src/components/ChatPrompt.tsx"],"sourcesContent":["/**\n * ChatPrompt — Ephemeral structured interaction above chat input\n * v2.4.0: choice, confirm, form subtypes\n *\n * @experimental — This component may change without major bump until v2.5.0.\n *\n * Renders above the chat input. User responds → Promise resolves → prompt disappears.\n * Supports AbortSignal for cleanup on navigation (C4).\n */\n\nimport { Component, Show, For, createSignal, onCleanup, Switch, Match } from 'solid-js'\nimport type {\n ChatPromptConfig,\n ChatPromptResponse,\n ChoicePromptConfig,\n ConfirmPromptConfig,\n FormPromptConfig,\n} from '../types/chat-bus'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { FormFieldParams } from '../types'\n\nexport interface ChatPromptProps {\n /** Prompt configuration */\n config: ChatPromptConfig\n /** Called when user responds */\n onSubmit: (response: ChatPromptResponse) => void\n /** Called when user dismisses (e.g. \"send as-is\") */\n onDismiss?: () => void\n /** Label for the dismiss button (replaces X icon). Default: shows X icon. */\n dismissLabel?: string\n}\n\n/**\n * @experimental\n * Ephemeral interaction component — choice buttons, confirmation dialog, or quick form.\n * Designed to sit between the chat messages and the input area.\n *\n * @example\n * <ChatPrompt\n * config={{ type: 'choice', title: 'Format?', config: { options: [...] } }}\n * onSubmit={(r) => bus.events.emit('onChatPromptResponse', { streamKey, response: r })}\n * onDismiss={() => setActivePrompt(null)}\n * />\n */\nexport const ChatPrompt: Component<ChatPromptProps> = (props) => {\n // F1: Guard against null/undefined config (e.g. after dismiss clears state)\n if (!props.config) return null\n\n return (\n <div\n class=\"w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible\"\n style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}\n role=\"dialog\"\n aria-label={props.config.title}\n >\n {/* Header */}\n <div class=\"flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700\">\n <p class=\"text-sm font-medium text-gray-900 dark:text-white\">{props.config.title}</p>\n <button\n onClick={() => {\n props.onDismiss?.()\n props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })\n }}\n class={props.dismissLabel\n ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'\n : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'\n }\n aria-label={props.dismissLabel || 'Dismiss'}\n >\n <Show when={props.dismissLabel} fallback={\n <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }>\n {props.dismissLabel}\n </Show>\n </button>\n </div>\n\n {/* Body — type-specific */}\n <div class=\"px-4 py-3\">\n <Switch>\n <Match when={props.config.type === 'choice'}>\n <ChoiceBody\n config={props.config.config as ChoicePromptConfig}\n onSelect={(value, label) => props.onSubmit({ type: 'choice', value, label })}\n />\n </Match>\n <Match when={props.config.type === 'confirm'}>\n <ConfirmBody\n config={props.config.config as ConfirmPromptConfig}\n onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}\n onCancel={() => {\n props.onDismiss?.()\n props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })\n }}\n />\n </Match>\n <Match when={props.config.type === 'form'}>\n <FormBody\n config={props.config.config as FormPromptConfig}\n onSubmit={(data, label) => props.onSubmit({ type: 'form', value: data, label })}\n />\n </Match>\n </Switch>\n </div>\n\n <style>{`\n @keyframes chat-prompt-slide-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `}</style>\n </div>\n )\n}\n\n// ─── Choice ──────────────────────────────────────────────────\n\nconst ChoiceBody: Component<{\n config: ChoicePromptConfig\n onSelect: (value: string, label: string) => void\n}> = (props) => {\n const layoutClass = () => {\n switch (props.config.layout) {\n case 'vertical': return 'flex flex-col gap-2'\n case 'grid': return 'grid grid-cols-2 gap-2'\n default: return 'flex flex-wrap gap-2'\n }\n }\n\n return (\n <div class={layoutClass()}>\n <For each={props.config.options}>\n {(option) => (\n <button\n onClick={() => props.onSelect(option.value, option.label)}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left\"\n >\n <Show when={option.icon}>\n <span class=\"mr-2\">{option.icon}</span>\n </Show>\n {option.label}\n <Show when={option.description}>\n <span class=\"block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal\">{option.description}</span>\n </Show>\n </button>\n )}\n </For>\n </div>\n )\n}\n\n// ─── Confirm ─────────────────────────────────────────────────\n\nconst ConfirmBody: Component<{\n config: ConfirmPromptConfig\n onConfirm: () => void\n onCancel: () => void\n}> = (props) => {\n const isDanger = () => props.config.variant === 'danger'\n\n return (\n <div>\n <Show when={props.config.message}>\n <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">{props.config.message}</p>\n </Show>\n <div class=\"flex gap-2 justify-end\">\n <button\n onClick={props.onCancel}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n {props.config.cancelLabel || 'Cancel'}\n </button>\n <button\n onClick={props.onConfirm}\n class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${\n isDanger()\n ? 'bg-red-600 hover:bg-red-700'\n : 'bg-blue-600 hover:bg-blue-700'\n }`}\n >\n {props.config.confirmLabel || 'Confirm'}\n </button>\n </div>\n </div>\n )\n}\n\n// ─── Form (delegates to FormFieldRenderer for all field types) ───\n\nconst FormBody: Component<{\n config: FormPromptConfig\n onSubmit: (data: Record<string, unknown>, label: string) => void\n}> = (props) => {\n const [formData, setFormData] = createSignal<Record<string, any>>({})\n\n const updateField = (name: string, value: any) => {\n setFormData((prev) => ({ ...prev, [name]: value }))\n }\n\n const handleSubmit = (e: Event) => {\n e.preventDefault()\n const data = formData()\n const label = Object.entries(data)\n .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))\n .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)\n .join(', ')\n props.onSubmit(data, label || 'Form submitted')\n }\n\n const isValid = () => {\n const data = formData()\n return (props.config.fields || [])\n .filter((f) => f.required)\n .every((f) => {\n const val = data[f.name]\n if (Array.isArray(val)) return val.length > 0\n if (typeof val === 'boolean') return true\n return val !== undefined && val !== ''\n })\n }\n\n return (\n <form onSubmit={handleSubmit} class=\"flex flex-col gap-3\">\n <For each={props.config.fields}>\n {(field) => (\n <FormFieldRenderer\n field={field as FormFieldParams}\n value={formData()[field.name]}\n onChange={(val) => updateField(field.name, val)}\n formData={formData}\n />\n )}\n </For>\n <div class=\"flex justify-end\">\n <button\n type=\"submit\"\n disabled={!isValid()}\n class=\"px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors\"\n >\n {props.config.submitLabel || 'Submit'}\n </button>\n </div>\n </form>\n )\n}\n"],"names":["ChatPrompt","props","config","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$insert","title","$$click","onDismiss","onSubmit","type","value","label","dismissed","_$createComponent","Show","when","dismissLabel","fallback","_tmpl$2","children","Switch","Match","ChoiceBody","onSelect","ConfirmBody","onConfirm","confirmLabel","onCancel","cancelLabel","FormBody","data","_$effect","_p$","_v$","_v$2","_v$3","e","_$setAttribute","t","_$className","a","undefined","_$runHydrationEvents","layoutClass","layout","_el$7","_tmpl$3","For","each","options","option","_el$8","_tmpl$6","_el$1","_el$10","_co$","_$getNextMarker","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","icon","_el$9","_tmpl$4","description","_el$0","_tmpl$5","isDanger","variant","_el$15","_tmpl$8","_el$20","_el$21","_co$4","_el$17","_el$18","_el$19","message","_el$16","_tmpl$7","_$addEventListener","formData","setFormData","createSignal","updateField","name","prev","handleSubmit","preventDefault","Object","entries","filter","v","Array","isArray","length","map","k","join","isValid","fields","f","required","every","val","_el$22","_tmpl$9","_el$25","_el$26","_co$5","_el$23","_el$24","addEventListener","field","FormFieldRenderer","onChange","submitLabel","_$setProperty","_$delegateEvents"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { delegateEvents, getNextElement, template, insert, createComponent, effect, setAttribute, className, runHydrationEvents, getNextMarker, addEventListener, setProperty } from "solid-js/web";
|
|
2
2
|
import { Show, Switch, Match, For, createSignal } from "solid-js";
|
|
3
3
|
import { FormFieldRenderer } from "./FormFieldRenderer.js";
|
|
4
|
-
var _tmpl$ = /* @__PURE__ */ template(`<div class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-
|
|
4
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div class="w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"role=dialog style="animation:chat-prompt-slide-up 0.2s ease-out"><div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700"><p class="text-sm font-medium text-gray-900 dark:text-white"></p><button></button></div><div class="px-4 py-3"></div><style>
|
|
5
5
|
@keyframes chat-prompt-slide-up {
|
|
6
6
|
from { opacity: 0; transform: translateY(8px); }
|
|
7
7
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPrompt.js","sources":["../../src/components/ChatPrompt.tsx"],"sourcesContent":["/**\n * ChatPrompt — Ephemeral structured interaction above chat input\n * v2.4.0: choice, confirm, form subtypes\n *\n * @experimental — This component may change without major bump until v2.5.0.\n *\n * Renders above the chat input. User responds → Promise resolves → prompt disappears.\n * Supports AbortSignal for cleanup on navigation (C4).\n */\n\nimport { Component, Show, For, createSignal, onCleanup, Switch, Match } from 'solid-js'\nimport type {\n ChatPromptConfig,\n ChatPromptResponse,\n ChoicePromptConfig,\n ConfirmPromptConfig,\n FormPromptConfig,\n} from '../types/chat-bus'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { FormFieldParams } from '../types'\n\nexport interface ChatPromptProps {\n /** Prompt configuration */\n config: ChatPromptConfig\n /** Called when user responds */\n onSubmit: (response: ChatPromptResponse) => void\n /** Called when user dismisses (e.g. \"send as-is\") */\n onDismiss?: () => void\n /** Label for the dismiss button (replaces X icon). Default: shows X icon. */\n dismissLabel?: string\n}\n\n/**\n * @experimental\n * Ephemeral interaction component — choice buttons, confirmation dialog, or quick form.\n * Designed to sit between the chat messages and the input area.\n *\n * @example\n * <ChatPrompt\n * config={{ type: 'choice', title: 'Format?', config: { options: [...] } }}\n * onSubmit={(r) => bus.events.emit('onChatPromptResponse', { streamKey, response: r })}\n * onDismiss={() => setActivePrompt(null)}\n * />\n */\nexport const ChatPrompt: Component<ChatPromptProps> = (props) => {\n // F1: Guard against null/undefined config (e.g. after dismiss clears state)\n if (!props.config) return null\n\n return (\n <div\n class=\"w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-hidden\"\n style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}\n role=\"dialog\"\n aria-label={props.config.title}\n >\n {/* Header */}\n <div class=\"flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700\">\n <p class=\"text-sm font-medium text-gray-900 dark:text-white\">{props.config.title}</p>\n <button\n onClick={() => {\n props.onDismiss?.()\n props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })\n }}\n class={props.dismissLabel\n ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'\n : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'\n }\n aria-label={props.dismissLabel || 'Dismiss'}\n >\n <Show when={props.dismissLabel} fallback={\n <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }>\n {props.dismissLabel}\n </Show>\n </button>\n </div>\n\n {/* Body — type-specific */}\n <div class=\"px-4 py-3\">\n <Switch>\n <Match when={props.config.type === 'choice'}>\n <ChoiceBody\n config={props.config.config as ChoicePromptConfig}\n onSelect={(value, label) => props.onSubmit({ type: 'choice', value, label })}\n />\n </Match>\n <Match when={props.config.type === 'confirm'}>\n <ConfirmBody\n config={props.config.config as ConfirmPromptConfig}\n onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}\n onCancel={() => {\n props.onDismiss?.()\n props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })\n }}\n />\n </Match>\n <Match when={props.config.type === 'form'}>\n <FormBody\n config={props.config.config as FormPromptConfig}\n onSubmit={(data, label) => props.onSubmit({ type: 'form', value: data, label })}\n />\n </Match>\n </Switch>\n </div>\n\n <style>{`\n @keyframes chat-prompt-slide-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `}</style>\n </div>\n )\n}\n\n// ─── Choice ──────────────────────────────────────────────────\n\nconst ChoiceBody: Component<{\n config: ChoicePromptConfig\n onSelect: (value: string, label: string) => void\n}> = (props) => {\n const layoutClass = () => {\n switch (props.config.layout) {\n case 'vertical': return 'flex flex-col gap-2'\n case 'grid': return 'grid grid-cols-2 gap-2'\n default: return 'flex flex-wrap gap-2'\n }\n }\n\n return (\n <div class={layoutClass()}>\n <For each={props.config.options}>\n {(option) => (\n <button\n onClick={() => props.onSelect(option.value, option.label)}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left\"\n >\n <Show when={option.icon}>\n <span class=\"mr-2\">{option.icon}</span>\n </Show>\n {option.label}\n <Show when={option.description}>\n <span class=\"block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal\">{option.description}</span>\n </Show>\n </button>\n )}\n </For>\n </div>\n )\n}\n\n// ─── Confirm ─────────────────────────────────────────────────\n\nconst ConfirmBody: Component<{\n config: ConfirmPromptConfig\n onConfirm: () => void\n onCancel: () => void\n}> = (props) => {\n const isDanger = () => props.config.variant === 'danger'\n\n return (\n <div>\n <Show when={props.config.message}>\n <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">{props.config.message}</p>\n </Show>\n <div class=\"flex gap-2 justify-end\">\n <button\n onClick={props.onCancel}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n {props.config.cancelLabel || 'Cancel'}\n </button>\n <button\n onClick={props.onConfirm}\n class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${\n isDanger()\n ? 'bg-red-600 hover:bg-red-700'\n : 'bg-blue-600 hover:bg-blue-700'\n }`}\n >\n {props.config.confirmLabel || 'Confirm'}\n </button>\n </div>\n </div>\n )\n}\n\n// ─── Form (delegates to FormFieldRenderer for all field types) ───\n\nconst FormBody: Component<{\n config: FormPromptConfig\n onSubmit: (data: Record<string, unknown>, label: string) => void\n}> = (props) => {\n const [formData, setFormData] = createSignal<Record<string, any>>({})\n\n const updateField = (name: string, value: any) => {\n setFormData((prev) => ({ ...prev, [name]: value }))\n }\n\n const handleSubmit = (e: Event) => {\n e.preventDefault()\n const data = formData()\n const label = Object.entries(data)\n .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))\n .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)\n .join(', ')\n props.onSubmit(data, label || 'Form submitted')\n }\n\n const isValid = () => {\n const data = formData()\n return (props.config.fields || [])\n .filter((f) => f.required)\n .every((f) => {\n const val = data[f.name]\n if (Array.isArray(val)) return val.length > 0\n if (typeof val === 'boolean') return true\n return val !== undefined && val !== ''\n })\n }\n\n return (\n <form onSubmit={handleSubmit} class=\"flex flex-col gap-3\">\n <For each={props.config.fields}>\n {(field) => (\n <FormFieldRenderer\n field={field as FormFieldParams}\n value={formData()[field.name]}\n onChange={(val) => updateField(field.name, val)}\n formData={formData}\n />\n )}\n </For>\n <div class=\"flex justify-end\">\n <button\n type=\"submit\"\n disabled={!isValid()}\n class=\"px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors\"\n >\n {props.config.submitLabel || 'Submit'}\n </button>\n </div>\n </form>\n )\n}\n"],"names":["ChatPrompt","props","config","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$insert","title","$$click","onDismiss","onSubmit","type","value","label","dismissed","_$createComponent","Show","when","dismissLabel","fallback","_tmpl$2","children","Switch","Match","ChoiceBody","onSelect","ConfirmBody","onConfirm","confirmLabel","onCancel","cancelLabel","FormBody","data","_$effect","_p$","_v$","_v$2","_v$3","e","_$setAttribute","t","_$className","a","undefined","_$runHydrationEvents","layoutClass","layout","_el$7","_tmpl$3","For","each","options","option","_el$8","_tmpl$6","_el$1","_el$10","_co$","_$getNextMarker","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","icon","_el$9","_tmpl$4","description","_el$0","_tmpl$5","isDanger","variant","_el$15","_tmpl$8","_el$20","_el$21","_co$4","_el$17","_el$18","_el$19","message","_el$16","_tmpl$7","_$addEventListener","formData","setFormData","createSignal","updateField","name","prev","handleSubmit","preventDefault","Object","entries","filter","v","Array","isArray","length","map","k","join","isValid","fields","f","required","every","val","_el$22","_tmpl$9","_el$25","_el$26","_co$5","_el$23","_el$24","addEventListener","field","FormFieldRenderer","onChange","submitLabel","_$setProperty","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatPrompt.js","sources":["../../src/components/ChatPrompt.tsx"],"sourcesContent":["/**\n * ChatPrompt — Ephemeral structured interaction above chat input\n * v2.4.0: choice, confirm, form subtypes\n *\n * @experimental — This component may change without major bump until v2.5.0.\n *\n * Renders above the chat input. User responds → Promise resolves → prompt disappears.\n * Supports AbortSignal for cleanup on navigation (C4).\n */\n\nimport { Component, Show, For, createSignal, onCleanup, Switch, Match } from 'solid-js'\nimport type {\n ChatPromptConfig,\n ChatPromptResponse,\n ChoicePromptConfig,\n ConfirmPromptConfig,\n FormPromptConfig,\n} from '../types/chat-bus'\nimport { FormFieldRenderer } from './FormFieldRenderer'\nimport type { FormFieldParams } from '../types'\n\nexport interface ChatPromptProps {\n /** Prompt configuration */\n config: ChatPromptConfig\n /** Called when user responds */\n onSubmit: (response: ChatPromptResponse) => void\n /** Called when user dismisses (e.g. \"send as-is\") */\n onDismiss?: () => void\n /** Label for the dismiss button (replaces X icon). Default: shows X icon. */\n dismissLabel?: string\n}\n\n/**\n * @experimental\n * Ephemeral interaction component — choice buttons, confirmation dialog, or quick form.\n * Designed to sit between the chat messages and the input area.\n *\n * @example\n * <ChatPrompt\n * config={{ type: 'choice', title: 'Format?', config: { options: [...] } }}\n * onSubmit={(r) => bus.events.emit('onChatPromptResponse', { streamKey, response: r })}\n * onDismiss={() => setActivePrompt(null)}\n * />\n */\nexport const ChatPrompt: Component<ChatPromptProps> = (props) => {\n // F1: Guard against null/undefined config (e.g. after dismiss clears state)\n if (!props.config) return null\n\n return (\n <div\n class=\"w-full max-w-2xl mx-auto mb-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible\"\n style={{ animation: 'chat-prompt-slide-up 0.2s ease-out' }}\n role=\"dialog\"\n aria-label={props.config.title}\n >\n {/* Header */}\n <div class=\"flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700\">\n <p class=\"text-sm font-medium text-gray-900 dark:text-white\">{props.config.title}</p>\n <button\n onClick={() => {\n props.onDismiss?.()\n props.onSubmit({ type: props.config.type, value: '', label: '', dismissed: true })\n }}\n class={props.dismissLabel\n ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'\n : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'\n }\n aria-label={props.dismissLabel || 'Dismiss'}\n >\n <Show when={props.dismissLabel} fallback={\n <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n }>\n {props.dismissLabel}\n </Show>\n </button>\n </div>\n\n {/* Body — type-specific */}\n <div class=\"px-4 py-3\">\n <Switch>\n <Match when={props.config.type === 'choice'}>\n <ChoiceBody\n config={props.config.config as ChoicePromptConfig}\n onSelect={(value, label) => props.onSubmit({ type: 'choice', value, label })}\n />\n </Match>\n <Match when={props.config.type === 'confirm'}>\n <ConfirmBody\n config={props.config.config as ConfirmPromptConfig}\n onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}\n onCancel={() => {\n props.onDismiss?.()\n props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })\n }}\n />\n </Match>\n <Match when={props.config.type === 'form'}>\n <FormBody\n config={props.config.config as FormPromptConfig}\n onSubmit={(data, label) => props.onSubmit({ type: 'form', value: data, label })}\n />\n </Match>\n </Switch>\n </div>\n\n <style>{`\n @keyframes chat-prompt-slide-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `}</style>\n </div>\n )\n}\n\n// ─── Choice ──────────────────────────────────────────────────\n\nconst ChoiceBody: Component<{\n config: ChoicePromptConfig\n onSelect: (value: string, label: string) => void\n}> = (props) => {\n const layoutClass = () => {\n switch (props.config.layout) {\n case 'vertical': return 'flex flex-col gap-2'\n case 'grid': return 'grid grid-cols-2 gap-2'\n default: return 'flex flex-wrap gap-2'\n }\n }\n\n return (\n <div class={layoutClass()}>\n <For each={props.config.options}>\n {(option) => (\n <button\n onClick={() => props.onSelect(option.value, option.label)}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-blue-50 hover:border-blue-300 dark:hover:bg-blue-900/30 dark:hover:border-blue-600 transition-colors text-left\"\n >\n <Show when={option.icon}>\n <span class=\"mr-2\">{option.icon}</span>\n </Show>\n {option.label}\n <Show when={option.description}>\n <span class=\"block text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-normal\">{option.description}</span>\n </Show>\n </button>\n )}\n </For>\n </div>\n )\n}\n\n// ─── Confirm ─────────────────────────────────────────────────\n\nconst ConfirmBody: Component<{\n config: ConfirmPromptConfig\n onConfirm: () => void\n onCancel: () => void\n}> = (props) => {\n const isDanger = () => props.config.variant === 'danger'\n\n return (\n <div>\n <Show when={props.config.message}>\n <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">{props.config.message}</p>\n </Show>\n <div class=\"flex gap-2 justify-end\">\n <button\n onClick={props.onCancel}\n class=\"px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n >\n {props.config.cancelLabel || 'Cancel'}\n </button>\n <button\n onClick={props.onConfirm}\n class={`px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors ${\n isDanger()\n ? 'bg-red-600 hover:bg-red-700'\n : 'bg-blue-600 hover:bg-blue-700'\n }`}\n >\n {props.config.confirmLabel || 'Confirm'}\n </button>\n </div>\n </div>\n )\n}\n\n// ─── Form (delegates to FormFieldRenderer for all field types) ───\n\nconst FormBody: Component<{\n config: FormPromptConfig\n onSubmit: (data: Record<string, unknown>, label: string) => void\n}> = (props) => {\n const [formData, setFormData] = createSignal<Record<string, any>>({})\n\n const updateField = (name: string, value: any) => {\n setFormData((prev) => ({ ...prev, [name]: value }))\n }\n\n const handleSubmit = (e: Event) => {\n e.preventDefault()\n const data = formData()\n const label = Object.entries(data)\n .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))\n .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)\n .join(', ')\n props.onSubmit(data, label || 'Form submitted')\n }\n\n const isValid = () => {\n const data = formData()\n return (props.config.fields || [])\n .filter((f) => f.required)\n .every((f) => {\n const val = data[f.name]\n if (Array.isArray(val)) return val.length > 0\n if (typeof val === 'boolean') return true\n return val !== undefined && val !== ''\n })\n }\n\n return (\n <form onSubmit={handleSubmit} class=\"flex flex-col gap-3\">\n <For each={props.config.fields}>\n {(field) => (\n <FormFieldRenderer\n field={field as FormFieldParams}\n value={formData()[field.name]}\n onChange={(val) => updateField(field.name, val)}\n formData={formData}\n />\n )}\n </For>\n <div class=\"flex justify-end\">\n <button\n type=\"submit\"\n disabled={!isValid()}\n class=\"px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors\"\n >\n {props.config.submitLabel || 'Submit'}\n </button>\n </div>\n </form>\n )\n}\n"],"names":["ChatPrompt","props","config","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$insert","title","$$click","onDismiss","onSubmit","type","value","label","dismissed","_$createComponent","Show","when","dismissLabel","fallback","_tmpl$2","children","Switch","Match","ChoiceBody","onSelect","ConfirmBody","onConfirm","confirmLabel","onCancel","cancelLabel","FormBody","data","_$effect","_p$","_v$","_v$2","_v$3","e","_$setAttribute","t","_$className","a","undefined","_$runHydrationEvents","layoutClass","layout","_el$7","_tmpl$3","For","each","options","option","_el$8","_tmpl$6","_el$1","_el$10","_co$","_$getNextMarker","_el$11","_el$12","_co$2","_el$13","_el$14","_co$3","icon","_el$9","_tmpl$4","description","_el$0","_tmpl$5","isDanger","variant","_el$15","_tmpl$8","_el$20","_el$21","_co$4","_el$17","_el$18","_el$19","message","_el$16","_tmpl$7","_$addEventListener","formData","setFormData","createSignal","updateField","name","prev","handleSubmit","preventDefault","Object","entries","filter","v","Array","isArray","length","map","k","join","isValid","fields","f","required","every","val","_el$22","_tmpl$9","_el$25","_el$26","_co$5","_el$23","_el$24","addEventListener","field","FormFieldRenderer","onChange","submitLabel","_$setProperty","_$delegateEvents"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const web = require("solid-js/web");
|
|
4
4
|
const solidJs = require("solid-js");
|
|
5
5
|
const useConditionalField = require("../hooks/useConditionalField.cjs");
|
|
6
|
-
var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ web.template(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<input>`), _tmpl$4 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ web.template(`<input type=text>`), _tmpl$10 = /* @__PURE__ */ web.template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$13 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$14 = /* @__PURE__ */ web.template(`<option>`), _tmpl$15 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$16 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="absolute z-
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ web.template(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<input>`), _tmpl$4 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ web.template(`<input type=text>`), _tmpl$10 = /* @__PURE__ */ web.template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$13 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$14 = /* @__PURE__ */ web.template(`<option>`), _tmpl$15 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$16 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$19 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$21 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">×`), _tmpl$22 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$23 = /* @__PURE__ */ web.template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$25 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs">✓`), _tmpl$26 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`);
|
|
7
7
|
const FormFieldRenderer = (props) => {
|
|
8
8
|
const {
|
|
9
9
|
isVisible
|
|
@@ -431,6 +431,7 @@ const FormFieldRenderer = (props) => {
|
|
|
431
431
|
};
|
|
432
432
|
const MultiSelectField = (props) => {
|
|
433
433
|
const [open, setOpen] = solidJs.createSignal(false);
|
|
434
|
+
const [filter, setFilter] = solidJs.createSignal("");
|
|
434
435
|
const toggle = (val) => {
|
|
435
436
|
const current = props.value || [];
|
|
436
437
|
if (current.includes(val)) {
|
|
@@ -446,8 +447,13 @@ const MultiSelectField = (props) => {
|
|
|
446
447
|
var _a, _b;
|
|
447
448
|
return ((_b = (_a = props.field.options) == null ? void 0 : _a.find((o) => o.value === val)) == null ? void 0 : _b.label) || val;
|
|
448
449
|
};
|
|
450
|
+
const filteredOptions = () => {
|
|
451
|
+
const q = filter().toLowerCase();
|
|
452
|
+
if (!q) return props.field.options || [];
|
|
453
|
+
return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
|
|
454
|
+
};
|
|
449
455
|
return (() => {
|
|
450
|
-
var _el$44 = web.getNextElement(_tmpl$
|
|
456
|
+
var _el$44 = web.getNextElement(_tmpl$20), _el$59 = _el$44.firstChild, [_el$60, _co$13] = web.getNextMarker(_el$59.nextSibling), _el$46 = _el$60.nextSibling, _el$47 = _el$46.firstChild, _el$61 = _el$46.nextSibling, [_el$62, _co$14] = web.getNextMarker(_el$61.nextSibling);
|
|
451
457
|
web.insert(_el$44, web.createComponent(solidJs.Show, {
|
|
452
458
|
get when() {
|
|
453
459
|
return props.value.length > 0;
|
|
@@ -459,18 +465,21 @@ const MultiSelectField = (props) => {
|
|
|
459
465
|
return props.value;
|
|
460
466
|
},
|
|
461
467
|
children: (val) => (() => {
|
|
462
|
-
var _el$
|
|
463
|
-
web.insert(_el$
|
|
464
|
-
_el$
|
|
465
|
-
web.effect(() => web.setAttribute(_el$
|
|
468
|
+
var _el$63 = web.getNextElement(_tmpl$21), _el$65 = _el$63.firstChild, [_el$66, _co$15] = web.getNextMarker(_el$65.nextSibling), _el$64 = _el$66.nextSibling;
|
|
469
|
+
web.insert(_el$63, () => getLabel(val), _el$66, _co$15);
|
|
470
|
+
_el$64.$$click = () => removeChip(val);
|
|
471
|
+
web.effect(() => web.setAttribute(_el$64, "aria-label", `Remove ${getLabel(val)}`));
|
|
466
472
|
web.runHydrationEvents();
|
|
467
|
-
return _el$
|
|
473
|
+
return _el$63;
|
|
468
474
|
})()
|
|
469
475
|
}));
|
|
470
476
|
return _el$45;
|
|
471
477
|
}
|
|
472
|
-
}), _el$
|
|
473
|
-
_el$46.$$click = () =>
|
|
478
|
+
}), _el$60, _co$13);
|
|
479
|
+
_el$46.$$click = () => {
|
|
480
|
+
setOpen(!open());
|
|
481
|
+
if (!open()) setFilter("");
|
|
482
|
+
};
|
|
474
483
|
web.insert(_el$47, (() => {
|
|
475
484
|
var _c$ = web.memo(() => !!props.value.length);
|
|
476
485
|
return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
|
|
@@ -480,22 +489,43 @@ const MultiSelectField = (props) => {
|
|
|
480
489
|
return open();
|
|
481
490
|
},
|
|
482
491
|
get children() {
|
|
483
|
-
var _el$48 = web.getNextElement(_tmpl$
|
|
484
|
-
web.insert(_el$48, web.createComponent(solidJs.
|
|
492
|
+
var _el$48 = web.getNextElement(_tmpl$19), _el$57 = _el$48.firstChild, [_el$58, _co$12] = web.getNextMarker(_el$57.nextSibling), _el$51 = _el$58.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$10] = web.getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$11] = web.getNextMarker(_el$55.nextSibling);
|
|
493
|
+
web.insert(_el$48, web.createComponent(solidJs.Show, {
|
|
494
|
+
get when() {
|
|
495
|
+
var _a;
|
|
496
|
+
return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
|
|
497
|
+
},
|
|
498
|
+
get children() {
|
|
499
|
+
var _el$49 = web.getNextElement(_tmpl$17), _el$50 = _el$49.firstChild;
|
|
500
|
+
_el$50.$$input = (e) => setFilter(e.currentTarget.value);
|
|
501
|
+
web.effect(() => web.setProperty(_el$50, "value", filter()));
|
|
502
|
+
web.runHydrationEvents();
|
|
503
|
+
return _el$49;
|
|
504
|
+
}
|
|
505
|
+
}), _el$58, _co$12);
|
|
506
|
+
web.insert(_el$51, web.createComponent(solidJs.For, {
|
|
485
507
|
get each() {
|
|
486
|
-
return
|
|
508
|
+
return filteredOptions();
|
|
487
509
|
},
|
|
488
510
|
children: (option) => (() => {
|
|
489
|
-
var _el$
|
|
490
|
-
_el$
|
|
491
|
-
web.insert(_el$
|
|
492
|
-
web.effect(() => web.setProperty(_el$
|
|
493
|
-
return _el$
|
|
511
|
+
var _el$67 = web.getNextElement(_tmpl$22), _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling;
|
|
512
|
+
_el$68.addEventListener("change", () => toggle(option.value));
|
|
513
|
+
web.insert(_el$69, () => option.label);
|
|
514
|
+
web.effect(() => web.setProperty(_el$68, "checked", (props.value || []).includes(option.value)));
|
|
515
|
+
return _el$67;
|
|
494
516
|
})()
|
|
495
|
-
}));
|
|
517
|
+
}), _el$54, _co$10);
|
|
518
|
+
web.insert(_el$51, web.createComponent(solidJs.Show, {
|
|
519
|
+
get when() {
|
|
520
|
+
return filteredOptions().length === 0;
|
|
521
|
+
},
|
|
522
|
+
get children() {
|
|
523
|
+
return web.getNextElement(_tmpl$18);
|
|
524
|
+
}
|
|
525
|
+
}), _el$56, _co$11);
|
|
496
526
|
return _el$48;
|
|
497
527
|
}
|
|
498
|
-
}), _el$
|
|
528
|
+
}), _el$62, _co$14);
|
|
499
529
|
web.effect((_p$) => {
|
|
500
530
|
var _v$65 = props.disabled, _v$66 = `${props.baseClass} text-left flex items-center justify-between`, _v$67 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
|
|
501
531
|
_v$65 !== _p$.e && web.setProperty(_el$46, "disabled", _p$.e = _v$65);
|
|
@@ -515,8 +545,10 @@ const AutocompleteField = (props) => {
|
|
|
515
545
|
const [query, setQuery] = solidJs.createSignal("");
|
|
516
546
|
const [suggestions, setSuggestions] = solidJs.createSignal([]);
|
|
517
547
|
const [isOpen, setIsOpen] = solidJs.createSignal(false);
|
|
518
|
-
const [
|
|
548
|
+
const [selectedLabels, setSelectedLabels] = solidJs.createSignal(/* @__PURE__ */ new Map());
|
|
519
549
|
let debounceTimer = null;
|
|
550
|
+
const isMultiple = () => props.field.multiple === true;
|
|
551
|
+
const selectedValues = () => isMultiple() ? Array.isArray(props.value) ? props.value : [] : [];
|
|
520
552
|
const minChars = () => props.field.minChars ?? 2;
|
|
521
553
|
const debounceMs = () => props.field.debounceMs ?? 300;
|
|
522
554
|
const fetchSuggestions = async (q) => {
|
|
@@ -547,8 +579,9 @@ const AutocompleteField = (props) => {
|
|
|
547
579
|
};
|
|
548
580
|
const handleInput = (value) => {
|
|
549
581
|
setQuery(value);
|
|
550
|
-
|
|
551
|
-
|
|
582
|
+
if (!isMultiple()) {
|
|
583
|
+
props.onChange("");
|
|
584
|
+
}
|
|
552
585
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
553
586
|
if (value.length < minChars()) {
|
|
554
587
|
setSuggestions([]);
|
|
@@ -558,58 +591,120 @@ const AutocompleteField = (props) => {
|
|
|
558
591
|
debounceTimer = setTimeout(() => fetchSuggestions(value), debounceMs());
|
|
559
592
|
};
|
|
560
593
|
const selectSuggestion = (item) => {
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
594
|
+
if (isMultiple()) {
|
|
595
|
+
const current = selectedValues();
|
|
596
|
+
if (!current.includes(item.value)) {
|
|
597
|
+
props.onChange([...current, item.value]);
|
|
598
|
+
setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
|
|
599
|
+
}
|
|
600
|
+
setQuery("");
|
|
601
|
+
setSuggestions([]);
|
|
602
|
+
setIsOpen(false);
|
|
603
|
+
} else {
|
|
604
|
+
props.onChange(item.value);
|
|
605
|
+
setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
|
|
606
|
+
setQuery(item.label);
|
|
607
|
+
setIsOpen(false);
|
|
608
|
+
setSuggestions([]);
|
|
609
|
+
}
|
|
566
610
|
};
|
|
611
|
+
const removeChip = (val) => {
|
|
612
|
+
props.onChange(selectedValues().filter((v) => v !== val));
|
|
613
|
+
setSelectedLabels((prev) => {
|
|
614
|
+
const m = new Map(prev);
|
|
615
|
+
m.delete(val);
|
|
616
|
+
return m;
|
|
617
|
+
});
|
|
618
|
+
};
|
|
619
|
+
const getLabel = (val) => selectedLabels().get(val) || val;
|
|
567
620
|
solidJs.onCleanup(() => {
|
|
568
621
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
569
622
|
});
|
|
570
623
|
return (() => {
|
|
571
|
-
var _el$
|
|
572
|
-
_el$
|
|
573
|
-
|
|
624
|
+
var _el$70 = web.getNextElement(_tmpl$24), _el$74 = _el$70.firstChild, [_el$75, _co$16] = web.getNextMarker(_el$74.nextSibling), _el$72 = _el$75.nextSibling, _el$76 = _el$72.nextSibling, [_el$77, _co$17] = web.getNextMarker(_el$76.nextSibling);
|
|
625
|
+
web.insert(_el$70, web.createComponent(solidJs.Show, {
|
|
626
|
+
get when() {
|
|
627
|
+
return web.memo(() => !!isMultiple())() && selectedValues().length > 0;
|
|
628
|
+
},
|
|
629
|
+
get children() {
|
|
630
|
+
var _el$71 = web.getNextElement(_tmpl$16);
|
|
631
|
+
web.insert(_el$71, web.createComponent(solidJs.For, {
|
|
632
|
+
get each() {
|
|
633
|
+
return selectedValues();
|
|
634
|
+
},
|
|
635
|
+
children: (val) => (() => {
|
|
636
|
+
var _el$78 = web.getNextElement(_tmpl$21), _el$80 = _el$78.firstChild, [_el$81, _co$18] = web.getNextMarker(_el$80.nextSibling), _el$79 = _el$81.nextSibling;
|
|
637
|
+
web.insert(_el$78, () => getLabel(val), _el$81, _co$18);
|
|
638
|
+
_el$79.$$click = () => removeChip(val);
|
|
639
|
+
web.effect(() => web.setAttribute(_el$79, "aria-label", `Remove ${getLabel(val)}`));
|
|
640
|
+
web.runHydrationEvents();
|
|
641
|
+
return _el$78;
|
|
642
|
+
})()
|
|
643
|
+
}));
|
|
644
|
+
return _el$71;
|
|
645
|
+
}
|
|
646
|
+
}), _el$75, _co$16);
|
|
647
|
+
_el$72.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
|
|
648
|
+
_el$72.addEventListener("focus", () => {
|
|
574
649
|
if (suggestions().length) setIsOpen(true);
|
|
575
650
|
});
|
|
576
|
-
_el$
|
|
577
|
-
web.insert(_el$
|
|
651
|
+
_el$72.$$input = (e) => handleInput(e.currentTarget.value);
|
|
652
|
+
web.insert(_el$70, web.createComponent(solidJs.Show, {
|
|
578
653
|
get when() {
|
|
579
654
|
return web.memo(() => !!isOpen())() && suggestions().length > 0;
|
|
580
655
|
},
|
|
581
656
|
get children() {
|
|
582
|
-
var _el$
|
|
583
|
-
web.insert(_el$
|
|
657
|
+
var _el$73 = web.getNextElement(_tmpl$23);
|
|
658
|
+
web.insert(_el$73, web.createComponent(solidJs.For, {
|
|
584
659
|
get each() {
|
|
585
660
|
return suggestions();
|
|
586
661
|
},
|
|
587
|
-
children: (item) =>
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
662
|
+
children: (item) => {
|
|
663
|
+
const isSelected = () => isMultiple() && selectedValues().includes(item.value);
|
|
664
|
+
return (() => {
|
|
665
|
+
var _el$82 = web.getNextElement(_tmpl$26), _el$84 = _el$82.firstChild, [_el$85, _co$19] = web.getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$20] = web.getNextMarker(_el$86.nextSibling);
|
|
666
|
+
_el$82.$$click = () => selectSuggestion(item);
|
|
667
|
+
_el$82.$$mousedown = (e) => e.preventDefault();
|
|
668
|
+
web.insert(_el$82, () => item.label, _el$85, _co$19);
|
|
669
|
+
web.insert(_el$82, web.createComponent(solidJs.Show, {
|
|
670
|
+
get when() {
|
|
671
|
+
return isSelected();
|
|
672
|
+
},
|
|
673
|
+
get children() {
|
|
674
|
+
return web.getNextElement(_tmpl$25);
|
|
675
|
+
}
|
|
676
|
+
}), _el$87, _co$20);
|
|
677
|
+
web.effect((_p$) => {
|
|
678
|
+
var _v$71 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$72 = isSelected();
|
|
679
|
+
_v$71 !== _p$.e && web.className(_el$82, _p$.e = _v$71);
|
|
680
|
+
_v$72 !== _p$.t && web.setProperty(_el$82, "disabled", _p$.t = _v$72);
|
|
681
|
+
return _p$;
|
|
682
|
+
}, {
|
|
683
|
+
e: void 0,
|
|
684
|
+
t: void 0
|
|
685
|
+
});
|
|
686
|
+
web.runHydrationEvents();
|
|
687
|
+
return _el$82;
|
|
688
|
+
})();
|
|
689
|
+
}
|
|
595
690
|
}));
|
|
596
|
-
return _el$
|
|
691
|
+
return _el$73;
|
|
597
692
|
}
|
|
598
|
-
}), _el$
|
|
693
|
+
}), _el$77, _co$17);
|
|
599
694
|
web.effect((_p$) => {
|
|
600
|
-
var _v$68 = props.field.placeholder, _v$69 = props.disabled, _v$70 = props.baseClass;
|
|
601
|
-
_v$68 !== _p$.e && web.setAttribute(_el$
|
|
602
|
-
_v$69 !== _p$.t && web.setProperty(_el$
|
|
603
|
-
_v$70 !== _p$.a && web.className(_el$
|
|
695
|
+
var _v$68 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$69 = props.disabled, _v$70 = props.baseClass;
|
|
696
|
+
_v$68 !== _p$.e && web.setAttribute(_el$72, "placeholder", _p$.e = _v$68);
|
|
697
|
+
_v$69 !== _p$.t && web.setProperty(_el$72, "disabled", _p$.t = _v$69);
|
|
698
|
+
_v$70 !== _p$.a && web.className(_el$72, _p$.a = _v$70);
|
|
604
699
|
return _p$;
|
|
605
700
|
}, {
|
|
606
701
|
e: void 0,
|
|
607
702
|
t: void 0,
|
|
608
703
|
a: void 0
|
|
609
704
|
});
|
|
610
|
-
web.effect(() => web.setProperty(_el$
|
|
705
|
+
web.effect(() => web.setProperty(_el$72, "value", query()));
|
|
611
706
|
web.runHydrationEvents();
|
|
612
|
-
return _el$
|
|
707
|
+
return _el$70;
|
|
613
708
|
})();
|
|
614
709
|
};
|
|
615
710
|
web.delegateEvents(["input", "click", "mousedown"]);
|