@stacksjs/defaults 0.75.422 → 0.75.431

package/resources/views/cms/blocks/form.stx

@@ -8,6 +8,7 @@
 <div class="mx-auto px-6 py-8 max-w-xl cms-form" data-form-uuid="{{ props.formUuid }}">
   <script client>
   import type { PublicFormDefinition, PublicFormField, SubmissionErrors } from '@stacksjs/forms'
+  import { visibleFields } from '@stacksjs/forms/conditions'
   import { moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
 
   // `_form` carries a whole-form failure; the rest are keyed by field name.
@@ -15,7 +16,7 @@
 
   const host = useRef<HTMLElement>('host')
   const definition = state<PublicFormDefinition | null>(null)
-  const values = reactive<Record<string, string | number | boolean>>({})
+  const values = state<Record<string, string | number | boolean>>({})
   const errors = state<FormErrors>({})
   const sending = state(false)
   const done = state('')
@@ -27,7 +28,7 @@
   // rather than only the storage path the server answered with.
   const attached = reactive<Record<string, string>>({})
 
-  effect(() => {
+  onMount(() => {
     if (!host() || definition())
       return
     const uuid = host()?.dataset.formUuid
@@ -39,25 +40,19 @@
       .catch(() => {})
   })
 
+  function setFieldValue(name: string, value: string | number | boolean): void {
+    values.set({ ...values(), [name]: value })
+  }
+
+  function clearFieldValue(name: string): void {
+    const next = { ...values() }
+    delete next[name]
+    values.set(next)
+  }
+
   function fieldVisible(field: PublicFormField): boolean {
-    const conditions = field.conditions
-    if (!conditions || !conditions.rules || conditions.rules.length === 0)
-      return true
-    const results = conditions.rules.map((rule) => {
-      const actual = values[rule.field]
-      switch (rule.op) {
-        case 'eq': return String(actual ?? '') === String(rule.value ?? '')
-        case 'neq': return String(actual ?? '') !== String(rule.value ?? '')
-        case 'contains': return String(actual ?? '').includes(String(rule.value ?? ''))
-        case 'gt': return Number(actual) > Number(rule.value)
-        case 'lt': return Number(actual) < Number(rule.value)
-        case 'empty': return actual === undefined || actual === null || String(actual) === ''
-        case 'not_empty': return actual !== undefined && actual !== null && String(actual) !== ''
-        default: return false
-      }
-    })
-    const matched = conditions.logic === 'all' ? results.every(Boolean) : results.some(Boolean)
-    return conditions.action === 'show' ? matched : !matched
+    try { return visibleFields(definition()?.fields ?? [], values()).includes(field) }
+    catch { return false }
   }
 
   /**
@@ -97,13 +92,13 @@
         // Clear the input as well as the value: leaving a rejected file
         // showing next to its own error message reads as though it was taken.
         input.value = ''
-        delete values[field.name]
+        clearFieldValue(field.name)
         delete attached[field.name]
         errors.set({ ...errors(), [field.name]: (failure as { data?: { message?: string } }).data?.message ?? 'That file could not be uploaded.' })
         return
       }
 
-      values[field.name] = body.path ?? ''
+      setFieldValue(field.name, body.path ?? '')
       attached[field.name] = file.name
     }
     catch {
@@ -128,7 +123,7 @@
     if (field.type === 'currency')
       setAmount(field, raw)
     else
-      values[field.name] = raw
+      setFieldValue(field.name, raw)
   }
 
   /**
@@ -149,16 +144,16 @@
     const currency = formCurrency()
     const error = moneyInputError(raw, currency, { required: false })
     if (error) {
-      values[field.name] = raw
+      setFieldValue(field.name, raw)
       errors.set({ ...errors(), [field.name]: error })
       return
     }
 
     const minor = parseMoneyInput(raw, currency, { required: false })
     if (minor === null)
-      delete values[field.name]
+      clearFieldValue(field.name)
     else
-      values[field.name] = minor
+      setFieldValue(field.name, minor)
     if (errors()[field.name])
       errors.set({ ...errors(), [field.name]: '' })
   }
@@ -199,7 +194,7 @@
       // 403 "CSRF token mismatch" on every submission.
       let body: { message?: string, redirect?: string }
       try {
-        body = await useMutation(`/api/forms/${uuid}/submissions`).mutate({ ...values, _renderedMs: Date.now() - openedAt })
+        body = await useMutation(`/api/forms/${uuid}/submissions`).mutate({ ...values(), _renderedMs: Date.now() - openedAt })
       }
       catch (failure) {
         const { status, data } = failure as { status?: number, data?: { errors?: FormErrors, message?: string } }
@@ -232,41 +227,41 @@
 
       <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 mt-6">
         <template :for="field in definition()?.fields ?? []">
-          <div :if="fieldVisible(field)" class="{{ field.width === 'half' ? '' : 'sm:col-span-2' }}">
+          <div :if="fieldVisible(field)" :class="field.width === 'half' ? '' : 'sm:col-span-2'">
             <h3 :if="field.type === 'section_break'" class="mt-2 pt-4 font-medium text-lg border-gray-200 border-t">{{ field.label }}</h3>
             <template :else>
               <label class="block font-medium text-[14px] text-gray-800">{{ field.label }}<span :if="field.required" aria-hidden="true" class="text-red-500"> *</span></label>
-              <textarea :if="field.type === 'textarea'" rows="4" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" @input="values[field.name] = $event.target.value" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg"></textarea>
-              <select :else-if="field.type === 'select'" :required="field.required" @change="values[field.name] = $event.target.value" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] bg-white border border-gray-300 rounded-lg">
+              <textarea :if="field.type === 'textarea'" rows="4" :required="field.required" :placeholder="field.options.placeholder ?? ''" @input="setFieldValue(field.name, $event.target.value)" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg"></textarea>
+              <select :else-if="field.type === 'select'" :required="field.required" @change="setFieldValue(field.name, $event.target.value)" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] bg-white border border-gray-300 rounded-lg">
                 <option value="">Choose...</option>
-                <option :for="choice in field.options.choices ?? []" value="{{ choice.value }}">{{ choice.label }}</option>
+                <option :for="choice in field.options.choices ?? []" :value="choice.value">{{ choice.label }}</option>
               </select>
               <div :else-if="field.type === 'radio'" class="mt-2 space-y-2">
                 <label :for="choice in field.options.choices ?? []" class="flex gap-2.5 items-center text-[15px]">
-                  <input type="radio" name="{{ field.name }}" value="{{ choice.value }}" @change="values[field.name] = $event.target.value" class="h-4 w-4">
+                  <input type="radio" :name="field.name" :value="choice.value" @change="setFieldValue(field.name, $event.target.value)" class="h-4 w-4">
                   {{ choice.label }}
                 </label>
               </div>
               <label :else-if="field.type === 'checkbox'" class="flex gap-2.5 items-center mt-2 text-[15px]">
-                <input type="checkbox" @change="values[field.name] = $event.target.checked" class="h-4 w-4 rounded">
+                <input type="checkbox" @change="setFieldValue(field.name, $event.target.checked)" class="h-4 w-4 rounded">
                 {{ field.options.placeholder ?? 'Yes' }}
               </label>
               {{-- A file field used to fall through to the text input below, so
                    a person typed prose into what should have been a picker and
                    the submission could never satisfy it. --}}
               <div :else-if="field.type === 'file'" class="mt-1.5">
-                <input type="file" :required="field.required && !values[field.name]" :disabled="uploading[field.name]" accept="{{ acceptAttr(field) }}" @change="uploadFile(field, $event)" class="block file:mr-3 file:px-3.5 file:py-2 w-full text-[15px] file:font-medium file:text-[14px] file:bg-gray-100 file:border-0 file:rounded-lg">
+                <input type="file" :required="field.required && !values()[field.name]" :disabled="uploading[field.name]" :accept="acceptAttr(field)" @change="uploadFile(field, $event)" class="block file:mr-3 file:px-3.5 file:py-2 w-full text-[15px] file:font-medium file:text-[14px] file:bg-gray-100 file:border-0 file:rounded-lg">
                 <p :if="uploading[field.name]" class="mt-1.5 text-[13px] text-gray-500">Uploading...</p>
                 <p :else-if="attached[field.name]" class="mt-1.5 text-[13px] text-green-700">Attached {{ attached[field.name] }}</p>
               </div>
-              <input :else type="{{ field.type === 'email' ? 'email' : (field.type === 'phone' ? 'tel' : (field.type === 'date' ? 'date' : (field.type === 'currency' ? 'number' : 'text'))) }}" :required="field.required" placeholder="{{ field.options.placeholder ?? '' }}" :step="field.type === 'currency' ? moneyInputStep(formCurrency()) : null" @input="setInput(field, $event.target.value)" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg">
+              <input :else :type="field.type === 'email' ? 'email' : (field.type === 'phone' ? 'tel' : (field.type === 'date' ? 'date' : (field.type === 'currency' ? 'number' : 'text')))" :required="field.required" :placeholder="field.options.placeholder ?? ''" :step="field.type === 'currency' ? moneyInputStep(formCurrency()) : null" @input="setInput(field, $event.target.value)" class="mt-1.5 px-3.5 py-2.5 w-full text-[15px] border border-gray-300 rounded-lg">
               <p :if="errors()[field.name]" class="mt-1.5 text-[13px] text-red-600">{{ errors()[field.name] }}</p>
             </template>
           </div>
         </template>
       </div>
 
-      <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="hidden" @input="values._hp = $event.target.value">
+      <input type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true" class="hidden" @input="setFieldValue('_hp', $event.target.value)">
 
       <button type="submit" :disabled="sending() || anyUploading()" class="mt-7 px-6 py-3 font-medium text-white bg-gray-900 rounded-lg disabled:opacity-60 transition-transform active:scale-[0.98]">
         {{ sending() ? 'Sending...' : (definition()?.submitLabel ?? 'Submit') }}

package/routes/forms.ts

@@ -13,7 +13,7 @@ import { response, route } from '@stacksjs/router'
  * allowlist - deliberately not shipped until something needs it.)
  */
 
-async function siteIdForRequest(request: any): Promise<number | null> {
+async function siteIdForRequest(request: any): Promise<number | null | undefined> {
   const options = sitesOptions()
   if (!options.enabled)
     return null
@@ -22,13 +22,16 @@ async function siteIdForRequest(request: any): Promise<number | null> {
     ? request.headers
     : new Headers(request.headers ?? {})
   const site = await resolveSiteByHost(requestHost(headers, options), undefined, options)
-  return site?.id ?? null
+  return site?.id
 }
 
 route.get('/api/forms/{uuid}', async (request: any) => {
   const { loadFormByUuid, publicDefinition } = await import('@stacksjs/forms')
 
-  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), await siteIdForRequest(request))
+  const siteId = await siteIdForRequest(request)
+  if (siteId === undefined)
+    return response.notFound('Form not found')
+  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), siteId)
   if (!form || form.status === 'draft')
     return response.notFound('Form not found')
 
@@ -50,7 +53,10 @@ route.get('/api/forms/{uuid}', async (request: any) => {
 route.post('/api/forms/{uuid}/uploads', async (request: any) => {
   const { checkUpload, fileFieldNamed, formUploadPrefix, loadFormByUuid, resolveUploadLimits } = await import('@stacksjs/forms')
 
-  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), await siteIdForRequest(request))
+  const siteId = await siteIdForRequest(request)
+  if (siteId === undefined)
+    return response.notFound('Form not found')
+  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), siteId)
   if (!form || form.status === 'draft')
     return response.notFound('Form not found')
 
@@ -84,7 +90,10 @@ route.post('/api/forms/{uuid}/uploads', async (request: any) => {
 route.post('/api/forms/{uuid}/submissions', async (request: any) => {
   const { dispatchSubmissionNotifications, loadFormByUuid, submissionIdentity, submitForm } = await import('@stacksjs/forms')
 
-  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), await siteIdForRequest(request))
+  const siteId = await siteIdForRequest(request)
+  if (siteId === undefined)
+    return response.notFound('Form not found')
+  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), siteId)
   if (!form)
     return response.notFound('Form not found')