feat(InputDate): new component (#5387)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: hywax

docs/app/components/content/examples/input-date/InputDateMinMaxDatesExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef(new CalendarDate(2023, 9, 10))
+const minDate = new CalendarDate(2023, 9, 1)
+const maxDate = new CalendarDate(2023, 9, 30)
+</script>
+
+<template>
+  <UInputDate v-model="modelValue" :min-value="minDate" :max-value="maxDate" />
+</template>

docs/app/components/content/examples/input-date/InputDateUnavailableDatesExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import { CalendarDate } from '@internationalized/date'
+
+const modelValue = shallowRef({
+  start: new CalendarDate(2022, 1, 1),
+  end: new CalendarDate(2022, 1, 9)
+})
+
+const isDateUnavailable = (date: DateValue) => {
+  return date.day >= 10 && date.day <= 16
+}
+</script>
+
+<template>
+  <UInputDate v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
+</template>

docs/content/docs/2.components/input-date.md

@@ -0,0 +1,169 @@
+---
+title: InputDate
+description: 'An input component for date selection.'
+category: form
+links:
+  - label: DateField
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/date-field
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputDate.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: [2022, 2, 3]
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultValue: [2022, 2, 6]
+---
+::
+
+### Range
+
+Use the `range` prop to select a range of dates.
+
+::component-code
+---
+prettier: true
+cast:
+  modelValue: DateRange
+ignore:
+  - range
+  - modelValue.start
+  - modelValue.end
+external:
+  - modelValue
+props:
+  range: true
+  modelValue:
+    start: [2022, 2, 3]
+    end: [2022, 2, 20]
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the InputDate.
+
+::component-code
+---
+props:
+  color: neutral
+  highlight: true
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the InputDate.
+
+::component-code
+---
+props:
+  variant: subtle
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the InputDate.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Separator Icon
+
+Use the `separator-icon` prop to change the icon of the range separator.
+
+::component-code
+---
+props:
+  range: true
+  separatorIcon: 'i-lucide-arrow-right'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputDate.
+
+::component-code
+---
+props:
+  disabled: true
+---
+::
+
+## Examples
+
+### With unavailable dates
+
+Use the `is-date-unavailable` prop with a function to mark specific dates as unavailable.
+
+::component-example
+---
+name: 'input-date-unavailable-dates-example'
+---
+::
+
+### With min/max dates
+
+Use the `min-value` and `max-value` props to limit the dates.
+
+::component-example
+---
+name: 'input-date-min-max-dates-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog

docs/public/components/dark/input-date.png

@@ -35,6 +35,7 @@ const components = [
   'form-field',
   'form',
   'header',
+  'input-date',
   'input-menu',
   'input-number',
   'input-tags',

docs/public/components/light/input-date.png

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { CalendarDate } from '@internationalized/date'
+import theme from '#build/ui/input-date'
+
+const colors = Object.keys(theme.variants.color)
+const variants = Object.keys(theme.variants.variant)
+const sizes = Object.keys(theme.variants.size)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color],
+  variant: [theme.defaultVariants.variant],
+  size: [theme.defaultVariants.size]
+})
+
+const value = shallowRef(new CalendarDate(2022, 1, 10))
+const range = shallowRef({
+  start: new CalendarDate(2022, 1, 10),
+  end: new CalendarDate(2022, 1, 20)
+})
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+    <USelect v-model="attrs.variant" :items="variants" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UInputDate v-model="value" autofocus v-bind="props" />
+    <UInputDate :default-value="new CalendarDate(2022, 1, 10)" v-bind="props" />
+    <UInputDate v-model="range" range v-bind="props" />
+    <UInputDate :default-value="{ start: new CalendarDate(2022, 1, 10), end: new CalendarDate(2022, 1, 20) }" range v-bind="props" />
+    <UInputDate highlight v-bind="props" />
+    <UInputDate disabled v-bind="props" />
+    <UInputDate required v-bind="props" />
+    <UInputDate icon="i-lucide-clock" v-bind="props" />
+    <UInputDate icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputDate :avatar="{ src: 'https://github.com/benjamincanac.png' }" icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputDate loading v-bind="props" />
+    <UInputDate loading trailing v-bind="props" />
+    <UInputDate loading icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" v-bind="props" />
+  </Matrix>
+</template>