Update the documentation for the FormKitSchema for nuxt

.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/rule-date-after-node/rule-date-after-node.vue

@@ -0,0 +1,18 @@
+<template>
+  <FormKit type="group">
+    <FormKit
+      type="date"
+      name="startDate"
+      label="Start Date"
+      help="Select a start date"
+    />
+    <FormKit
+      type="date"
+      name="endDate"
+      label="End Date"
+      validation="date_after_node:startDate"
+      validation-label="End Date"
+      :help="`Select an end date after the start date`"
+    />
+  </FormKit>
+</template>

.examples/rule-date-after-or-equal/rule-date-after-or-equal.vue

@@ -0,0 +1,9 @@
+<template>
+  <FormKit
+    type="date"
+    label="Select a date after or equal to 2020-01-01"
+    validation="date_after_or_equal:2020-01-01"
+    validation-label="Date"
+    help="The selected date must be after or equal to 2020-01-01"
+  />
+</template>

.examples/rule-date-before-node/rule-date-before-node.vue

@@ -0,0 +1,18 @@
+<template>
+  <FormKit type="group">
+    <FormKit
+      type="date"
+      name="startDate"
+      label="Start Date"
+      help="Select a start date"
+    />
+    <FormKit
+      type="date"
+      name="endDate"
+      label="End Date"
+      validation="date_before_node:startDate"
+      validation-label="End Date"
+      :help="`Select an end date before the start date`"
+    />
+  </FormKit>
+</template>

.examples/rule-date-before-or-equal/rule-date-before-or-equal.vue

@@ -0,0 +1,9 @@
+<template>
+  <FormKit
+    type="date"
+    label="Select a date before or equal to 2020-01-01"
+    validation="date_before_or_equal:2020-01-01"
+    validation-label="Date"
+    help="The selected date must be before 2020-01-01"
+  />
+</template>

.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/unit/unit-decimals.vue

@@ -0,0 +1,27 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="liter"
+      name="input_1"
+      label="5 decimals allowed"
+      decimals="5"
+    />
+    <FormKit
+      type="unit"
+      unit="liter"
+      name="input_2"
+      label="Minimum of 2 decimals"
+      min-decimals="2"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>

.examples/unit/unit-display.vue

@@ -0,0 +1,36 @@
+<script setup>
+const initialValues = {
+  narrow: 100,
+  short: 100,
+  long: 100,
+  empty: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="narrow"
+      unit-display="narrow"
+      label="Narrow"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="short"
+      unit-display="short"
+      label="Short"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="long"
+      unit-display="long"
+      label="Long"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>

.examples/unit/unit-locale.vue

@@ -0,0 +1,35 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 100,
+  input_3: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_1"
+      unit-display="long"
+      display-locale="en-US"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_2"
+      unit-display="long"
+      display-locale="de-DE"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_3"
+      unit-display="long"
+      display-locale="zh-CN"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>

.examples/unit/unit-min-max.vue

@@ -0,0 +1,27 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 0,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="millisecond"
+      name="input_1"
+      label="Min of 100"
+      min="100"
+    />
+    <FormKit
+      type="unit"
+      unit="millisecond"
+      name="input_2"
+      label="Max of 100"
+      max="100"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>

.examples/unit/unit-step.vue

@@ -0,0 +1,19 @@
+<script setup>
+const initialValues = {
+  input_1: 0,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="centimeter"
+      name="input_1"
+      label="Step of 100"
+      step="100"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>