chore: update knip and packages

Author: johnleider

knip.json

@@ -165,6 +165,7 @@
     "@vue/repl",
     "@vuetify/paper",
     "conventional-changelog-vuetify",
+    "@vue/compiler-dom",
     "@flagsmith/flagsmith",
     "launchdarkly-js-client-sdk",
     "posthog-js"

package.json

@@ -68,13 +68,6 @@
     "vitest": "catalog:",
     "vue-tsc": "catalog:"
   },
-  "pnpm": {
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "vite": "8"
-      }
-    }
-  },
   "packageManager": "pnpm@10.26.1",
   "web-types": "dist/json/web-types.json"
 }

packages/0/package.json

@@ -103,6 +103,7 @@
     "@ant-design/colors": "catalog:",
     "@flagsmith/flagsmith": "catalog:",
     "@material/material-color-utilities": "catalog:",
+    "@vue/compiler-dom": "catalog:",
     "@vue/test-utils": "catalog:",
     "launchdarkly-js-client-sdk": "catalog:",
     "posthog-js": "catalog:",

packages/0/src/composables/createForm/index.test.ts

@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createValidation } from '#v0/composables/createValidation'
 
 // Utilities
-import { inject, nextTick, provide, shallowRef } from 'vue'
+import { inject, nextTick, provide, shallowRef, toValue } from 'vue'
 
 import { createForm, createFormContext, useForm } from './index'
 
@@ -42,18 +42,18 @@ describe('createForm', () => {
     expect(form.size).toBe(0)
   })
 
-  it('should have disabled and readonly refs', () => {
+  it('should have disabled and readonly options', () => {
     const form = createForm({ disabled: true, readonly: true })
 
-    expect(form.disabled.value).toBe(true)
-    expect(form.readonly.value).toBe(true)
+    expect(toValue(form.disabled)).toBe(true)
+    expect(toValue(form.readonly)).toBe(true)
   })
 
   it('should default disabled and readonly to false', () => {
     const form = createForm()
 
-    expect(form.disabled.value).toBe(false)
-    expect(form.readonly.value).toBe(false)
+    expect(toValue(form.disabled)).toBe(false)
+    expect(toValue(form.readonly)).toBe(false)
   })
 
   describe('isValid computation', () => {

packages/0/src/composables/createForm/index.ts

@@ -23,8 +23,8 @@ import { createTrinity } from '#v0/composables/createTrinity'
 import { createRegistry } from '#v0/composables/createRegistry'
 
 // Utilities
-import { isNull, isNullOrUndefined } from '#v0/utilities'
-import { computed, shallowRef, toValue } from 'vue'
+import { isNull } from '#v0/utilities'
+import { computed } from 'vue'
 
 // Transformers
 import { toArray } from '#v0/composables/toArray'
@@ -34,7 +34,7 @@ import type { RegistryContext, RegistryOptions, RegistryTicket, RegistryTicketIn
 import type { ContextTrinity } from '#v0/composables/createTrinity'
 import type { ValidationContext } from '#v0/composables/createValidation'
 import type { ID } from '#v0/types'
-import type { App, ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue'
+import type { App, ComputedRef, MaybeRefOrGetter } from 'vue'
 
 export type FormValidationResult = string | boolean | Promise<string | boolean>
 
@@ -71,9 +71,9 @@ export interface FormContext<
   /** Reset all registered validations. */
   reset: () => void
   /** Whether the form is disabled. Components can read this to conditionally disable inputs. */
-  disabled: ShallowRef<boolean>
+  disabled: MaybeRefOrGetter<boolean>
   /** Whether the form is readonly. Components can read this to conditionally disable inputs. */
-  readonly: ShallowRef<boolean>
+  readonly: MaybeRefOrGetter<boolean>
   /** Aggregate: true if all validations valid, false if any invalid, null if any unvalidated. */
   isValid: ComputedRef<boolean | null>
   /** Aggregate: true if any validation is in progress. */
@@ -127,13 +127,14 @@ export function createForm<
   Z extends FormTicketInput = FormTicketInput,
   E extends FormTicket<Z> = FormTicket<Z>,
   R extends FormContext<Z, E> = FormContext<Z, E>,
-> (options?: FormOptions): R {
-  const registry = createRegistry<E>(options)
-  const disabled = shallowRef(false)
-  const readonly = shallowRef(false)
-
-  if (!isNullOrUndefined(options?.disabled)) disabled.value = toValue(options.disabled) ?? false
-  if (!isNullOrUndefined(options?.readonly)) readonly.value = toValue(options.readonly) ?? false
+> (options: FormOptions = {}): R {
+  const {
+    disabled = false,
+    readonly = false,
+    ..._options
+  } = options
+
+  const registry = createRegistry<E>({ ..._options, reactive: true })
 
   const isValidating = computed(() => {
     for (const ticket of registry.values()) {