@tachui/forms 0.8.15 → 0.8.17

package/src/components/text-input/TextField.ts

@@ -47,6 +47,7 @@ export const TextField: Component<TextFieldProps> = props => {
     autocomplete,
     spellcheck = true,
     disabled = false,
+    readOnly = false,
     required = false,
     validation,
     value: controlledValue,
@@ -74,6 +75,7 @@ export const TextField: Component<TextFieldProps> = props => {
     text: textSignal,
     placeholderSignal,
     disabledSignal,
+    readOnlySignal,
 
     ...restProps
   } = props
@@ -96,6 +98,17 @@ export const TextField: Component<TextFieldProps> = props => {
   const [currentText, setCurrentText] = createSignal('')
   const [currentPlaceholder, setCurrentPlaceholder] = createSignal('')
   const [currentDisabled, setCurrentDisabled] = createSignal(false)
+  const [currentReadOnly, setCurrentReadOnly] = createSignal(false)
+
+  if (
+    disabledSignal !== undefined &&
+    typeof process !== 'undefined' &&
+    process.env.NODE_ENV === 'development'
+  ) {
+    console.warn(
+      'TextField: `disabledSignal` is deprecated. Prefer `disabled` with a Signal<boolean>.'
+    )
+  }
 
   // Set up reactive updates for signal-based props
   createEffect(() => {
@@ -120,6 +133,12 @@ export const TextField: Component<TextFieldProps> = props => {
     }
   })
 
+  createEffect(() => {
+    if (readOnlySignal) {
+      setCurrentReadOnly(resolveValue(readOnlySignal, false))
+    }
+  })
+
   // Sync with controlled value
   if (controlledValue !== undefined) {
     createEffect(() => {
@@ -241,7 +260,16 @@ export const TextField: Component<TextFieldProps> = props => {
   const currentPlaceholderValue = placeholderSignal
     ? currentPlaceholder()
     : placeholder
-  const isDisabled = disabledSignal ? currentDisabled() : disabled
+  const disabledBinding = disabledSignal
+    ? currentDisabled
+    : typeof disabled === 'function'
+      ? (disabled as () => boolean)
+      : () => disabled
+  const readOnlyBinding = readOnlySignal
+    ? currentReadOnly
+    : typeof readOnly === 'function'
+      ? (readOnly as () => boolean)
+      : () => readOnly
   const displayValue = textSignal ? currentText() : field.value() || ''
   const formattedDisplayValue = formatValue(displayValue)
 
@@ -251,7 +279,8 @@ export const TextField: Component<TextFieldProps> = props => {
     name,
     value: formattedDisplayValue,
     placeholder: currentPlaceholderValue,
-    disabled: isDisabled,
+    disabled: disabledBinding,
+    readOnly: readOnlyBinding,
     required,
     minlength: minLength,
     maxlength: maxLength,

package/src/modifiers/placeholder.ts

@@ -1,4 +1,4 @@
-import { isSignal } from '@tachui/core'
+import { createEffect, isComputed, isSignal } from '@tachui/core'
 import type { Signal } from '@tachui/core'
 import type {
   Modifier,
@@ -22,6 +22,7 @@ function resolvePlaceholder(value: PlaceholderValue): string {
 }
 
 const placeholderHandlers = new WeakMap<Element, () => void>()
+const placeholderDisposers = new WeakMap<Element, () => void>()
 
 function applyPlaceholder(
   element: Element,
@@ -59,10 +60,21 @@ function createPlaceholderModifier(value: PlaceholderValue): Modifier {
         element.removeEventListener('input', previous)
       }
 
+      const previousDispose = placeholderDisposers.get(element)
+      if (previousDispose) {
+        previousDispose()
+        placeholderDisposers.delete(element)
+      }
+
       const handler = () => applyPlaceholder(element, value)
       element.addEventListener('input', handler)
       placeholderHandlers.set(element, handler)
 
+      if (isSignal(value) || isComputed(value)) {
+        const effect = createEffect(update)
+        placeholderDisposers.set(element, () => effect.dispose())
+      }
+
       return node
     },
   }

package/src/modifiers/required.ts

@@ -1,16 +1,31 @@
 import type { Modifier, ModifierContext } from '@tachui/core/modifiers/types'
 import type { ModifierRegistry, PluginInfo } from '@tachui/registry'
 import { registerModifierWithMetadata } from '@tachui/core/modifiers'
+import { createEffect, isComputed, isSignal, type Signal } from '@tachui/core'
 
 const requiredPriority = 72
 
 interface RequiredModifierOptions {
+  message?: string | Signal<string>
+  enabled?: boolean | Signal<boolean>
+}
+
+type RequiredInput = boolean | string | RequiredModifierOptions
+interface ResolvedRequiredOptions {
   message?: string
   enabled?: boolean
 }
+const requiredDisposers = new WeakMap<Element, () => void>()
+
+function resolveReactive<T>(value: T | Signal<T>): T {
+  if (isSignal(value) || isComputed(value)) {
+    return (value as Signal<T>)()
+  }
+  return value as T
+}
 
 function normalizeOptions(
-  value?: boolean | string | RequiredModifierOptions,
+  value?: RequiredInput,
 ): RequiredModifierOptions {
   if (typeof value === 'boolean') {
     return { enabled: value }
@@ -27,9 +42,36 @@ function normalizeOptions(
   return normalized
 }
 
+function resolveOptions(
+  value?: RequiredInput,
+): ResolvedRequiredOptions {
+  const normalized = normalizeOptions(value)
+  return {
+    enabled:
+      normalized.enabled === undefined
+        ? undefined
+        : resolveReactive(normalized.enabled),
+    message:
+      normalized.message === undefined
+        ? undefined
+        : resolveReactive(normalized.message),
+  }
+}
+
+function hasReactiveOptions(value?: RequiredInput): boolean {
+  if (isSignal(value) || isComputed(value)) return true
+  if (!value || typeof value !== 'object') return false
+  return (
+    isSignal(value.enabled) ||
+    isComputed(value.enabled) ||
+    isSignal(value.message) ||
+    isComputed(value.message)
+  )
+}
+
 function applyRequired(
   element: Element,
-  { enabled, message }: RequiredModifierOptions,
+  { enabled, message }: ResolvedRequiredOptions,
 ): void {
   if (!(element instanceof HTMLElement)) return
 
@@ -57,18 +99,30 @@ function applyRequired(
 }
 
 function createRequiredModifier(
-  options?: boolean | string | RequiredModifierOptions,
+  options?: RequiredInput,
 ): Modifier {
-  const normalized = normalizeOptions(options)
   return {
     type: 'forms:required',
     priority: requiredPriority,
-    properties: normalized,
+    properties: normalizeOptions(options),
     apply(node: any, context: ModifierContext) {
       const element = (context.element ?? node) as Element | undefined
       if (!element) return node
 
-      applyRequired(element, normalized)
+      const applyCurrent = () => applyRequired(element, resolveOptions(options))
+
+      const previousDispose = requiredDisposers.get(element)
+      if (previousDispose) {
+        previousDispose()
+        requiredDisposers.delete(element)
+      }
+
+      applyCurrent()
+
+      if (hasReactiveOptions(options)) {
+        const effect = createEffect(applyCurrent)
+        requiredDisposers.set(element, () => effect.dispose())
+      }
       return node
     },
   }
@@ -83,7 +137,7 @@ const REQUIRED_METADATA = {
 }
 
 export function required(
-  options?: boolean | string | RequiredModifierOptions,
+  options?: RequiredInput,
 ): Modifier {
   return createRequiredModifier(options)
 }
@@ -92,7 +146,7 @@ export function registerRequiredModifier(
   registry?: ModifierRegistry,
   plugin?: PluginInfo,
 ): void {
-  const factory = (options?: boolean | string | RequiredModifierOptions) =>
+  const factory = (options?: RequiredInput) =>
     createRequiredModifier(options)
 
   registerModifierWithMetadata(

package/src/modifiers/validation.ts

@@ -1,6 +1,7 @@
 import type { Modifier, ModifierContext } from '@tachui/core/modifiers/types'
 import type { ModifierRegistry, PluginInfo } from '@tachui/registry'
 import { registerModifierWithMetadata } from '@tachui/core/modifiers'
+import { createEffect, isComputed, isSignal, type Signal } from '@tachui/core'
 import { validateValue } from '../validation'
 import type { ValidationResult, ValidationRule } from '../types'
 
@@ -9,25 +10,40 @@ const validationPriority = 74
 type ValidationArgs =
   | ValidationRule[]
   | ValidationRule
+  | Signal<ValidationRule[]>
+  | Signal<ValidationRule>
+  | Signal<ValidationRule[] | ValidationRule>
 
 interface ValidationProperties {
   rules: ValidationRule[]
 }
 
 const validationHandlers = new WeakMap<Element, (event?: Event) => void>()
+const validationDisposers = new WeakMap<Element, () => void>()
+
+function isReactiveRuleInput(
+  value: ValidationArgs
+): value is Signal<ValidationRule[] | ValidationRule> {
+  return isSignal(value) || isComputed(value)
+}
 
 function normalizeRules(input: ValidationArgs[]): ValidationRule[] {
   const flattened: ValidationRule[] = []
   input.forEach(entry => {
-    if (Array.isArray(entry)) {
-      flattened.push(...entry)
+    const resolvedEntry = isReactiveRuleInput(entry) ? entry() : entry
+    if (Array.isArray(resolvedEntry)) {
+      flattened.push(...resolvedEntry)
     } else {
-      flattened.push(entry)
+      flattened.push(resolvedEntry)
     }
   })
   return flattened
 }
 
+function hasReactiveRuleInput(input: ValidationArgs[]): boolean {
+  return input.some(entry => isReactiveRuleInput(entry))
+}
+
 function applyValidationResult(
   element: Element,
   result: ValidationResult,
@@ -73,27 +89,42 @@ function createValidationHandler(
 }
 
 function createValidationModifier(
-  rules: ValidationRule[],
+  rulesInput: ValidationArgs[],
 ): Modifier {
-  const normalizedRules = rules.length
-    ? rules
-    : (['required'] as ValidationRule[])
-
   return {
     type: 'forms:validation',
     priority: validationPriority,
-    properties: { rules: normalizedRules } satisfies ValidationProperties,
+    properties: {
+      get rules() {
+        const resolved = normalizeRules(rulesInput)
+        return resolved.length ? resolved : (['required'] as ValidationRule[])
+      },
+    } as ValidationProperties,
     apply(node: any, context: ModifierContext) {
       const element = (context.element ?? node) as Element | undefined
       if (!element) return node
 
-      const handler = createValidationHandler(element, normalizedRules)
+      const buildRules = (): ValidationRule[] => {
+        const resolved = normalizeRules(rulesInput)
+        return resolved.length ? resolved : (['required'] as ValidationRule[])
+      }
+
+      const handler = () => {
+        const currentRules = buildRules()
+        const run = createValidationHandler(element, currentRules)
+        run()
+      }
 
       const existing = validationHandlers.get(element)
       if (existing) {
         element.removeEventListener('blur', existing)
         element.removeEventListener('input', existing)
       }
+      const existingDispose = validationDisposers.get(element)
+      if (existingDispose) {
+        existingDispose()
+        validationDisposers.delete(element)
+      }
 
       element.addEventListener('blur', handler)
       element.addEventListener('input', handler)
@@ -101,6 +132,11 @@ function createValidationModifier(
 
       handler()
 
+      if (hasReactiveRuleInput(rulesInput)) {
+        const effect = createEffect(handler)
+        validationDisposers.set(element, () => effect.dispose())
+      }
+
       return node
     },
   }
@@ -117,8 +153,7 @@ const VALIDATION_METADATA = {
 export function validation(
   ...rules: ValidationArgs[]
 ): Modifier {
-  const normalized = normalizeRules(rules)
-  return createValidationModifier(normalized)
+  return createValidationModifier(rules)
 }
 
 export function registerValidationModifier(
@@ -126,7 +161,7 @@ export function registerValidationModifier(
   plugin?: PluginInfo,
 ): void {
   const factory = (...rules: ValidationArgs[]) =>
-    createValidationModifier(normalizeRules(rules))
+    createValidationModifier(rules)
 
   registerModifierWithMetadata(
     'validation',

package/src/types/index.ts

@@ -9,6 +9,7 @@ import type {
   ComponentChildren,
   ComponentInstance,
   ComponentProps,
+  Signal,
 } from '@tachui/core'
 
 /**
@@ -125,7 +126,8 @@ export interface BaseFieldProps extends ComponentProps {
   name: string
   label?: string
   placeholder?: string
-  disabled?: boolean
+  disabled?: boolean | Signal<boolean>
+  readOnly?: boolean | Signal<boolean>
   required?: boolean
   validation?: FieldValidation
   value?: any
@@ -241,6 +243,7 @@ export interface TextFieldProps extends BaseFieldProps {
   text?: string | (() => string) // Signal support
   placeholderSignal?: string | (() => string) // Signal support
   disabledSignal?: boolean | (() => boolean) // Signal support
+  readOnlySignal?: boolean | (() => boolean) // Signal support
 }
 
 /**