feat(Date): improve date components (#761)

* feat(Calendar): replace library with Vue-compatible library * refactor: use flat-internationalized-date for reference consistency * refactor: add temporalToString instead of toString * docs: update docs with new package * docs: update locale prop docs * docs: added localized calendar stories * fix: return the day as the default * fix: use locale string for default day in calendars * refactor: remove default date from context * chore: update date in calendar locales story * chore: bump date package version * chore: bump date package * fix: add extra day to formatter for edge cases with other calendars * refactor: use exposed getDaysInMonth function from updated package * refactor: bump date package with new persian calendar calculations * fix: convert date parsed to string to reference value calendar * docs: replace reference to old package * feat(Calendar): memoize getYears function * feat(RangeCalendar): memoize getYears function * chore(RangeCalendar): update popover story with today marker * fix(Calendar): update calendar on locale change * fix(RangeCalendar): fix locale change not updating placeholder * refactor(DateField): refactor segment updates to prevent watcher inconsistent updates * refactor(DatePicker/DateRangePicker): refactor updating logic to account for calendar changes * fix(RangeCalendar): fix test referencing old DOM node * fix(Calendar): fix flaky tests * fix(RangeCalendar): fix story import * fix: only update model value on modifier keys * fix(DateField/DateRangeField): return granularity if placeholder/modelValue has time * chore: update lock * chore: update peer deps * fix: passive property on DateField modelValue * fix(Calendar): set placeholder on model value undefined * chore(useCalendar): remove unused prop * chore(CalendarCell): bind props * fix(RangeCalendar): remove unused grid prop * fix(RangeCalendarCell): fix props * chore: use DateRange Type * chore: generate docs with updated DateRange type * refactor: revert to @internationalized/date * chore: update docs * chore(DateRangeField): fix typo in docs * refactor: revert stories to @internationalized/date methods
radix-vue · Mar 30, 2024 · 2c86a7c · 2c86a7c
1 parent a7dacf2
commit 2c86a7c
Show file tree

Hide file tree

Showing 66 changed files with 885 additions and 609 deletions.
diff --git a/.histoire/package.json b/.histoire/package.json
@@ -12,13 +12,13 @@
     "@antfu/eslint-config": "^0.39.7",
     "@floating-ui/dom": "^1.4.2",
     "@floating-ui/vue": "^1.0.2",
-    "@histoire/plugin-vue": "^0.17.9",
+    "@histoire/plugin-vue": "^0.17.14",
     "@iconify/vue": "^4.1.1",
     "@radix-ui/colors": "^1.0.1",
     "@rollup/plugin-alias": "^5.1.0",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
-    "histoire": "^0.17.9",
+    "histoire": "^0.17.14",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1"
   },

diff --git a/docs/components/demo/DatePicker/css/index.vue b/docs/components/demo/DatePicker/css/index.vue
@@ -21,6 +21,7 @@ import {
   DatePickerTrigger,
   Label,
 } from 'radix-vue'
+
 import './styles.css'
 </script>
 

diff --git a/docs/components/demo/DateRangePicker/css/index.vue b/docs/components/demo/DateRangePicker/css/index.vue
@@ -21,6 +21,7 @@ import {
   DateRangePickerTrigger,
   Label,
 } from 'radix-vue'
+
 import './styles.css'
 </script>
 

diff --git a/docs/components/demo/RangeCalendar/css/index.vue b/docs/components/demo/RangeCalendar/css/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, type RangeCalendarRootProps } from 'radix-vue'
+
 import './styles.css'
 
 const isDateUnavailable: RangeCalendarRootProps['isDateUnavailable'] = (date) => {

diff --git a/docs/components/demo/RangeCalendar/tailwind/index.vue b/docs/components/demo/RangeCalendar/tailwind/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import type { DateValue } from '@internationalized/date'
+import { type DateValue } from '@internationalized/date'
 import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot } from 'radix-vue'
 
 function isDateUnavailable(date: DateValue) {

diff --git a/docs/content/components/calendar.md b/docs/content/components/calendar.md
@@ -35,6 +35,7 @@ This component was built taking inspiration from the implementation in [melt-ui]
 
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
 
+
 We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.
 
 ## Installation
@@ -103,7 +104,7 @@ Contains all the parts of a calendar
 
 <!-- @include: @/meta/CalendarRoot.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-readonly]',
@@ -133,12 +134,12 @@ Calendar navigation button. It navigates the calendar one month/year/decade in t
 
 <!-- @include: @/meta/CalendarPrev.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
-    }, 
+    },
   ]"
 />
 
@@ -149,12 +150,12 @@ Calendar navigation button. It navigates the calendar one month/year/decade in t
 
 <!-- @include: @/meta/CalendarNext.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
-    }, 
+    },
   ]"
 />
 
@@ -165,8 +166,8 @@ Heading for displaying the current month and year
 
 <!-- @include: @/meta/CalendarHeading.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
@@ -181,7 +182,7 @@ Container for wrapping the calendar grid.
 
 <!-- @include: @/meta/CalendarGrid.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-readonly]',
@@ -225,12 +226,12 @@ Container for wrapping the calendar cells.
 
 <!-- @include: @/meta/CalendarCell.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
-    }, 
+    },
   ]"
 />
 
@@ -242,7 +243,7 @@ Interactable container for displaying the cell dates. Clicking it selects the da
 <!-- @include: @/meta/CalendarCellTrigger.md -->
 
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-selected]',

diff --git a/docs/content/components/date-field.md b/docs/content/components/date-field.md
@@ -36,6 +36,7 @@ This component was built taking inspiration from the implementation in [melt-ui]
 
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
 
+
 We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.
 
 ## Installation
@@ -75,7 +76,7 @@ Contains all the parts of a date field
 
 <!-- @include: @/meta/DateFieldRoot.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-readonly]',
@@ -98,8 +99,8 @@ Contains the date field segments
 
 <!-- @include: @/meta/DateFieldInput.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',

diff --git a/docs/content/components/date-picker.md b/docs/content/components/date-picker.md
@@ -35,6 +35,7 @@ This component was built taking inspiration from the implementation in [melt-ui]
 
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
 
+
 We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.
 
 ## Installation
@@ -131,7 +132,7 @@ Contains the date picker date field segments and trigger
 
 <!-- @include: @/meta/DatePickerField.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-readonly]',
@@ -154,8 +155,8 @@ Contains the date picker date field segments
 
 <!-- @include: @/meta/DatePickerInput.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
@@ -204,8 +205,8 @@ Contains all the parts of a calendar
 
 <!-- @include: @/meta/DatePickerCalendar.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
@@ -233,12 +234,12 @@ Calendar navigation button. It navigates the calendar one month/year/decade in t
 
 <!-- @include: @/meta/DatePickerPrev.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
-    }, 
+    },
   ]"
 />
 
@@ -249,8 +250,8 @@ Calendar navigation button. It navigates the calendar one month/year/decade in t
 
 <!-- @include: @/meta/DatePickerNext.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
@@ -271,8 +272,8 @@ Container for wrapping the calendar grid.
 
 <!-- @include: @/meta/DatePickerGrid.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
@@ -315,12 +316,12 @@ Container for wrapping the calendar cells.
 
 <!-- @include: @/meta/DatePickerCell.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',
-    }, 
+    },
   ]"
 />
 
@@ -330,7 +331,7 @@ Interactable container for displaying the cell dates. Clicking it selects the da
 
 <!-- @include: @/meta/DatePickerCellTrigger.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-selected]',

diff --git a/docs/content/components/date-range-field.md b/docs/content/components/date-range-field.md
@@ -36,6 +36,7 @@ This component was built taking inspiration from the implementation in [melt-ui]
 
 The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
 
+
 We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.
 
 ## Installation
@@ -75,7 +76,7 @@ Contains all the parts of a date field
 
 <!-- @include: @/meta/DateRangeFieldRoot.md -->
 
-<DataAttributesTable 
+<DataAttributesTable
   :data="[
     {
       attribute: '[data-readonly]',
@@ -98,8 +99,8 @@ Contains the date field segments
 
 <!-- @include: @/meta/DateRangeFieldInput.md -->
 
-<DataAttributesTable 
-  :data="[ 
+<DataAttributesTable
+  :data="[
     {
       attribute: '[data-disabled]',
       values: 'Present when disabled',