feat: support null value for all form components

docs/content/meta/AccordionRoot.md

@@ -24,7 +24,7 @@
   {
     'name': 'defaultValue',
     'description': '<p>The default active value of the item(s).</p>\n<p>Use when you do not need to control the state of the item(s).</p>\n',
-    'type': 'AcceptableValue | AcceptableValue[]',
+    'type': 'string | string[]',
     'required': false
   },
   {
@@ -43,7 +43,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled value of the active item(s).</p>\n<p>Use this when you need to control the state of the items. Can be binded with <code>v-model</code></p>\n',
-    'type': 'AcceptableValue | AcceptableValue[]',
+    'type': 'string | string[]',
     'required': false
   },
   {
@@ -55,7 +55,7 @@
   },
   {
     'name': 'type',
-    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be pressed at a time.</p>\n<p>This prop will be ignored if any of <code>v-model</code> or <code>defaultValue</code> is defined, as the type will be inferred from the value.</p>\n',
+    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be selected at a time.</p>\n<p>This prop will overwrite the inferred type from <code>modelValue</code> and <code>defaultValue</code>.</p>\n',
     'type': '\'single\' | \'multiple\'',
     'required': false
   },

docs/content/meta/CalendarRoot.md

@@ -30,5 +30,10 @@
     'name': 'fixedWeeks',
     'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The current date of the calendar</p>\n',
+    'type': 'CalendarDate | CalendarDateTime | ZonedDateTime'
   }
 ]" />

docs/content/meta/CheckboxRoot.md

@@ -35,7 +35,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled value of the checkbox. Can be binded with v-model.</p>\n',
-    'type': 'boolean | \'indeterminate\'',
+    'type': 'boolean | \'indeterminate\' | null',
     'required': false
   },
   {

docs/content/meta/ComboboxVirtualizer.md

@@ -31,12 +31,12 @@
   {
     'name': 'option',
     'description': '',
-    'type': 'string | number | Record<string, any>'
+    'type': 'null | string | number | Record<string, any>'
   },
   {
     'name': 'virtualizer',
     'description': '',
-    'type': 'Virtualizer<Element | Window, Element>'
+    'type': 'Virtualizer<HTMLElement, Element>'
   },
   {
     'name': 'virtualItem',

docs/content/meta/DateFieldRoot.md

@@ -90,7 +90,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the calendar. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'DateValue',
+    'type': 'DateValue | null',
     'required': false
   },
   {

docs/content/meta/DatePickerRoot.md

@@ -118,7 +118,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the calendar. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'DateValue',
+    'type': 'DateValue | null',
     'required': false
   },
   {

docs/content/meta/DateRangeFieldRoot.md

@@ -90,7 +90,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the calendar. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'DateRange',
+    'type': 'DateRange | null',
     'required': false
   },
   {
@@ -137,7 +137,7 @@
   {
     'name': 'modelValue',
     'description': '',
-    'type': 'DateRange'
+    'type': 'DateRange | null'
   },
   {
     'name': 'segments',

docs/content/meta/DateRangePickerField.md

@@ -9,6 +9,6 @@
   {
     'name': 'modelValue',
     'description': '',
-    'type': 'DateRange'
+    'type': 'DateRange | null'
   }
 ]" />

docs/content/meta/DateRangePickerRoot.md

@@ -126,7 +126,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the calendar. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'DateRange',
+    'type': 'DateRange | null',
     'required': false
   },
   {

docs/content/meta/EditableRoot.md

@@ -62,7 +62,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The value of the editable field</p>\n',
-    'type': 'string',
+    'type': 'string | null',
     'required': false
   },
   {
@@ -117,7 +117,7 @@
   {
     'name': 'submit',
     'description': '<p>Event handler called when a value is submitted</p>\n',
-    'type': '[value: string]'
+    'type': '[value: string | null]'
   },
   {
     'name': 'update:modelValue',
@@ -140,7 +140,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The value of the editable field</p>\n',
-    'type': 'string | undefined'
+    'type': 'string | null | undefined'
   },
   {
     'name': 'isEmpty',

docs/content/meta/ListboxVirtualizer.md

@@ -31,12 +31,12 @@
   {
     'name': 'option',
     'description': '',
-    'type': 'string | number | Record<string, any>'
+    'type': 'null | string | number | Record<string, any>'
   },
   {
     'name': 'virtualizer',
     'description': '',
-    'type': 'Virtualizer<Element | Window, Element>'
+    'type': 'Virtualizer<HTMLElement, Element>'
   },
   {
     'name': 'virtualItem',

docs/content/meta/NumberFieldRoot.md

@@ -59,7 +59,7 @@
   {
     'name': 'modelValue',
     'description': '',
-    'type': 'number',
+    'type': 'number | null',
     'required': false
   },
   {

docs/content/meta/PinInputRoot.md

@@ -47,7 +47,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the pin input. Can be binded as <code>v-model</code>.</p>\n',
-    'type': 'string[]',
+    'type': 'string[] | null',
     'required': false
   },
   {

docs/content/meta/RadioGroupRoot.md

@@ -79,6 +79,6 @@
   {
     'name': 'modelValue',
     'description': '<p>Current input values</p>\n',
-    'type': 'string | number | Record<string, any>'
+    'type': 'null | string | number | Record<string, any>'
   }
 ]" />

docs/content/meta/RangeCalendarRoot.md

@@ -100,7 +100,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the calendar. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'DateRange',
+    'type': 'DateRange | null',
     'required': false
   },
   {
@@ -213,6 +213,11 @@
     'name': 'fixedWeeks',
     'description': '<p>Whether or not to always display 6 weeks in the calendar</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The current date range</p>\n',
+    'type': 'DateRange'
   }
 ]" />
 

docs/content/meta/SliderRoot.md

@@ -65,7 +65,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled value of the slider. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'number[]',
+    'type': 'number[] | null',
     'required': false
   },
   {
@@ -113,6 +113,6 @@
   {
     'name': 'modelValue',
     'description': '<p>Current slider values</p>\n',
-    'type': 'number[]'
+    'type': 'number[] | null'
   }
 ]" />

docs/content/meta/SwitchRoot.md

@@ -35,7 +35,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled state of the switch. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'boolean',
+    'type': 'boolean | null',
     'required': false
   },
   {

docs/content/meta/TagsInputRoot.md

@@ -93,7 +93,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled value of the tags input. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'AcceptableInputValue[]',
+    'type': 'AcceptableInputValue[] | null',
     'required': false
   },
   {

docs/content/meta/TimeFieldRoot.md

@@ -84,7 +84,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled checked state of the field. Can be bound as <code>v-model</code>.</p>\n',
-    'type': 'TimeValue',
+    'type': 'TimeValue | null',
     'required': false
   },
   {

docs/content/meta/Toggle.md

@@ -30,7 +30,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled pressed state of the toggle. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'boolean',
+    'type': 'boolean | null',
     'required': false
   },
   {

docs/content/meta/ToggleGroupItem.md

@@ -29,7 +29,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled pressed state of the toggle. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'boolean',
+    'type': 'boolean | null',
     'required': false
   },
   {

docs/content/meta/ToggleGroupRoot.md

@@ -73,7 +73,7 @@
   },
   {
     'name': 'type',
-    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be pressed at a time.</p>\n<p>This prop will be ignored if any of <code>v-model</code> or <code>defaultValue</code> is defined, as the type will be inferred from the value.</p>\n',
+    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be selected at a time.</p>\n<p>This prop will overwrite the inferred type from <code>modelValue</code> and <code>defaultValue</code>.</p>\n',
     'type': '\'single\' | \'multiple\'',
     'required': false
   }

docs/content/meta/ToolbarToggleGroup.md

@@ -70,7 +70,7 @@
   },
   {
     'name': 'type',
-    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be pressed at a time.</p>\n<p>This prop will be ignored if any of <code>v-model</code> or <code>defaultValue</code> is defined, as the type will be inferred from the value.</p>\n',
+    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be selected at a time.</p>\n<p>This prop will overwrite the inferred type from <code>modelValue</code> and <code>defaultValue</code>.</p>\n',
     'type': '\'single\' | \'multiple\'',
     'required': false
   }

docs/content/meta/ToolbarToggleItem.md

@@ -29,7 +29,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled pressed state of the toggle. Can be bind as <code>v-model</code>.</p>\n',
-    'type': 'boolean',
+    'type': 'boolean | null',
     'required': false
   },
   {

packages/core/src/Calendar/CalendarRoot.vue

@@ -151,6 +151,8 @@ defineSlots<{
     locale: string
     /** Whether or not to always display 6 weeks in the calendar */
     fixedWeeks: boolean
+    /** The current date of the calendar */
+    modelValue: DateValue | undefined
   }) => any
 }>()
 

packages/core/src/Checkbox/CheckboxRoot.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import type { Ref } from 'vue'
-import { createContext, isValueEqualOrExist, useFormControl, useForwardExpose } from '@/shared'
+import { createContext, isNullish, isValueEqualOrExist, useFormControl, useForwardExpose } from '@/shared'
 import type { CheckedState } from './utils'
 import type { AcceptableValue, FormFieldProps } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
@@ -11,7 +11,7 @@ export interface CheckboxRootProps extends PrimitiveProps, FormFieldProps {
   /** The value of the checkbox when it is initially rendered. Use when you do not need to control its value. */
   defaultValue?: boolean | 'indeterminate'
   /** The controlled value of the checkbox. Can be binded with v-model. */
-  modelValue?: boolean | 'indeterminate'
+  modelValue?: boolean | 'indeterminate' | null
   /** When `true`, prevents the user from interacting with the checkbox */
   disabled?: boolean
   /**
@@ -77,7 +77,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 const disabled = computed(() => checkboxGroupContext?.disabled.value || props.disabled)
 
 const checkboxState = computed<CheckedState>(() => {
-  if (checkboxGroupContext?.modelValue.value !== undefined) {
+  if (!isNullish(checkboxGroupContext?.modelValue.value)) {
     return isValueEqualOrExist(checkboxGroupContext.modelValue.value, props.value)
   }
   else {
@@ -86,7 +86,7 @@ const checkboxState = computed<CheckedState>(() => {
 })
 
 function handleClick() {
-  if (checkboxGroupContext?.modelValue.value !== undefined) {
+  if (!isNullish(checkboxGroupContext?.modelValue.value)) {
     const modelValueArray = [...(checkboxGroupContext.modelValue.value || [])]
     if (isValueEqualOrExist(modelValueArray, props.value)) {
       const index = modelValueArray.findIndex(i => isEqual(i, props.value))

packages/core/src/Combobox/ComboboxVirtualizer.vue

@@ -13,7 +13,7 @@ const props = defineProps<ComboboxVirtualizerProps<T>>()
 defineSlots<{
   default: (props: {
     option: T
-    virtualizer: Virtualizer<Element | Window, Element>
+    virtualizer: Virtualizer<HTMLElement, Element>
     virtualItem: VirtualItem
   }) => any
 }>()

packages/core/src/DateField/DateFieldRoot.vue

@@ -40,7 +40,7 @@ export interface DateFieldRootProps extends PrimitiveProps, FormFieldProps {
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
   /** The controlled checked state of the calendar. Can be bound as `v-model`. */
-  modelValue?: DateValue | undefined
+  modelValue?: DateValue | null
   /** The hour cycle used for formatting times. Defaults to the local preference */
   hourCycle?: HourCycle
   /** The granularity to use for formatting times. Defaults to day if a CalendarDate is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity */
@@ -197,7 +197,7 @@ watch([modelValue, locale], ([_modelValue]) => {
   if (!isNullish(_modelValue)) {
     segmentValues.value = { ...syncSegmentValues({ value: _modelValue, formatter }) }
   }
-  else if (Object.values(segmentValues.value).every(value => value === null) || _modelValue === undefined) {
+  else if (Object.values(segmentValues.value).every(value => value === null) || isNullish(_modelValue)) {
     segmentValues.value = { ...initialSegments }
   }
 })