Typebox plugin docs

.examples/autocomplete-pro/autocomplete-option-groups.vue

@@ -0,0 +1,20 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="autocomplete"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+      popover
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>

.examples/colorpicker/alpha.vue

@@ -0,0 +1,16 @@
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial% -->
+    <FormKit
+      type="colorpicker"
+      name="color"
+      value="rgba(255, 0, 0, 0.5)"
+      alpha="false"
+      popover
+      value-format="rgba"
+    />
+    <!-- %partial% -->
+
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>

.examples/currency/currency-default.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      name="currency"
+      value="12345678.90"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>

.examples/currency/currency-props-explore.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      name="currency"
+      min="-10"
+      max="1000"
+      step="0.0001"
+      currency="USD"
+      displayLocale="en-US"
+      decimals="4"
+      minDecimals="2"
+      value="123.1234"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>

.examples/currency/currency-simple-locale.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      currency="USD"
+      display-locale="en"
+      name="usd"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="EUR"
+      display-locale="de"
+      name="eur"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="INR"
+      display-locale="en-IN"
+      name="inr"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="CNY"
+      display-locale="zh-CN"
+      name="cny"
+      value="12345678.90"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>

.examples/dropdown/dropdown-option-groups.vue

@@ -0,0 +1,20 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="dropdown"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+      popover
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>

.examples/taglist/taglist-option-groups.vue

@@ -0,0 +1,19 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="taglist"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>

.examples/typebox/errors.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { createTypeboxPlugin } from '@formkit/typebox'
+import { Type } from '@sinclair/typebox'
+import { TypeCompiler } from '@sinclair/typebox/compiler'
+
+// some setup code
+const typeboxSchema = Type.Object({
+  personalInfo: Type.Object({
+    firstName: Type.String({ minLength: 3, maxLength: 25 }),
+    lastName: Type.String({ minLength: 3, maxLength: 25 }),
+  }),
+  missingField: Type.Number()
+})
+const [typeboxPlugin, submitHandler] = createTypeboxPlugin(typeboxSchema, async () => { await new Promise((r) => setTimeout(r, 2000))})
+
+// In a real app, you'd likely get the errors from
+// your server, but for this example we'll do the
+// parsing and retrieve the errors here.
+function setupFormNode(node) {
+  const invalidValues = {personalInfo: { firstName: 'A', lastName: 'K' },
+    missingField: 'not a number'
+  }
+  const checker = TypeCompiler.Compile(typeboxSchema)
+  const errors = checker.Errors(invalidValues)
+  // pass the ValueErrorIterator from Typebox to the setTypeboxErrors method
+  // which is added by the Typebox plugin.
+  node.setTypeboxErrors(errors)
+}
+</script>
+
+<template>
+  <h1 class="text-2xl font-bold mb-2">Errors set with node.setTypeboxErrors()</h1>
+  <p class="text-base mb-4">
+    This form cannot be successfully submitted because
+    the form fields do not match the provided schema.<br>
+    This is done to illustrate hydration of form-level errors.<br>
+    Do not actually do this. :)
+  </p>
+  <FormKit
+    type="form"
+    @node="setupFormNode"
+    :plugins="[typeboxPlugin]"
+    @submit="submitHandler"
+  >
+    <FormKit type="group" name="personalInfo">
+      <FormKit type="text" name="firstName" label="First Name" />
+      <FormKit type="text" name="lastName" label="Last Name" />
+    </FormKit>
+  </FormKit>
+</template>

.examples/typebox/importMap.json

@@ -0,0 +1,3 @@
+{
+  "typebox": "https://cdn.jsdelivr.net/npm/@sinclair/[email protected]/build/cjs/index.min.js"
+}

.examples/typebox/validation.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { createTypeboxPlugin } from '@formkit/typebox'
+import { Type } from '@sinclair/typebox'
+import { FormatRegistry } from '@sinclair/typebox'
+
+// http://www.w3.org/TR/html5/forms.html#valid-e-mail-address (search for 'wilful violation')
+const emailPattern = /^[a-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i
+FormatRegistry.Set('email', (value) => emailPattern.test(value))
+
+const typeboxSchema = Type.Object({
+  personalInfo: Type.Object({
+    firstName: Type.String({minLength: 3, maxLength: 25}),
+    lastName: Type.String({minLength: 3, maxLength: 25}),
+  }),
+  email: Type.String({format: 'email'}),
+  arrayMin: Type.Array(Type.String(), {min: 2}),
+})
+
+const [typeboxPlugin, submitHandler] = createTypeboxPlugin(
+  typeboxSchema,
+  async (formData) => {
+    // fake submit handler, but this is where you
+    // do something with your valid data.
+    await new Promise((r) => setTimeout(r, 2000))
+    alert('Form was submitted!')
+    console.log(formData)
+  }
+)
+</script>
+
+<template>
+  <h1>Validation from Typebox schema</h1>
+  <FormKit type="form" :plugins="[typeboxPlugin]" @submit="submitHandler">
+    <FormKit type="group" name="personalInfo">
+      <FormKit
+        validation-visibility="live"
+        type="text"
+        name="firstName"
+        label="First Name"
+      />
+      <FormKit type="text" name="lastName" label="Last Name" />
+    </FormKit>
+    <FormKit type="text" name="email" label="Your email" />
+    <FormKit
+      type="checkbox"
+      name="arrayMin"
+      label="Typebox features"
+      :options="['Validation', 'Type-Safety', 'Reusability']"
+    />
+  </FormKit>
+</template>

.examples/typebox/with-formkit-validation.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { createTypeboxPlugin } from '@formkit/typebox'
+import { Type } from '@sinclair/typebox'
+import { FormatRegistry } from '@sinclair/typebox'
+
+// http://www.w3.org/TR/html5/forms.html#valid-e-mail-address (search for 'wilful violation')
+const emailPattern = /^[a-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i
+FormatRegistry.Set('email', (value) => emailPattern.test(value))
+
+const typeboxSchema = Type.Object({
+  personalInfo: Type.Object({
+    firstName: Type.String({minLength: 3, maxLength: 25}),
+    lastName: Type.String({minLength: 3, maxLength: 25}),
+  }),
+  email: Type.string({format: 'email'}),
+  arrayMin: Type.Array(Type.String(), {min: 2}),
+})
+
+const [typeboxPlugin, submitHandler] = createTypeboxPlugin(
+  typeboxSchema,
+  async (formData) => {
+    // fake submit handler, but this is where you
+    // do something with your valid data.
+    await new Promise((r) => setTimeout(r, 2000))
+    alert('Form was submitted!')
+    console.log(formData)
+  }
+)
+</script>
+
+<template>
+  <h1 class="text-2xl font-bold mb-4">Typebox with FormKit Validation</h1>
+  <FormKit type="form" :plugins="[typeboxPlugin]" @submit="submitHandler">
+    <FormKit type="group" name="personalInfo">
+      <FormKit
+        validation="required|length:3,25"
+        validation-visibility="live"
+        type="text"
+        name="firstName"
+        label="First name"
+      />
+      <FormKit
+        validation="required|length:3,25"
+        type="text"
+        name="lastName"
+        label="Last name"
+      />
+    </FormKit>
+    <FormKit
+      validation="required|email"
+      type="text"
+      name="email"
+      label="Your email"
+    />
+    <FormKit
+      validation="required|min:2"
+      type="checkbox"
+      name="arrayMin"
+      label="Typebox features"
+      :options="['Validation', 'Type-Safety', 'Reusability']"
+    />
+  </FormKit>
+</template>

.examples/unit/unit-default.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit type="unit" unit="percent" name="percent" value="123.45" />
+
+    <FormKit type="unit" unit="fahrenheit" name="fahrenheit" value="123.45" />
+
+    <FormKit type="unit" unit="gigabyte" name="gigabyte" value="123.45" />
+
+    <FormKit type="unit" unit="kilogram" name="kilogram" displayLocale="de-DE" value="123.45" />
+
+    <FormKit type="unit" unit="fluid-ounce" name="fluid-ounce" value="123.45" />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>