WIP - fix date picker

frontend/components/ui/button/Button.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '.'
+import type { ButtonVariants } from "."
-import { Primitive } from 'reka-ui'
+import { Primitive } from "reka-ui"
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils"
-import { buttonVariants } from '.'
+import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
+  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants['size']
+  size?: ButtonVariants["size"]
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 

frontend/components/ui/button/index.ts

@@ -1,36 +1,38 @@
-import type { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"
 
-export { default as Button } from './Button.vue'
+export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        "default": "h-9 px-4 py-2",
-        xs: 'h-7 rounded px-2',
+        "xs": "h-7 rounded px-2",
-        sm: 'h-8 rounded-md px-3 text-xs',
+        "sm": "h-8 rounded-md px-3 text-xs",
-        lg: 'h-10 rounded-md px-8',
+        "lg": "h-10 rounded-md px-8",
-        icon: 'h-9 w-9',
+        "icon": "h-9 w-9",
-        'icon-sm': 'size-8',
+        "icon-sm": "size-8",
-        'icon-lg': 'size-10',
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
-      size: 'default',
+      size: "default",
+    },
   },
-  }
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>

frontend/components/ui/date-picker/DatePicker.vue

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { CalendarIcon } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { CalendarDate, type DateValue } from '@internationalized/date'
 
 interface Props {
   modelValue?: Date | string | null
@@ -22,18 +23,27 @@ const emit = defineEmits<{
   'update:modelValue': [value: Date | null]
 }>()
 
-const value = computed({
+const placeholder = ref<DateValue>(new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
+
+const value = computed<DateValue | undefined>({
   get: () => {
     if (!props.modelValue) return undefined
-    return props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    const date = props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
   },
-  set: (date) => {
+  set: (dateValue) => {
-    emit('update:modelValue', date || null)
+    if (!dateValue) {
+      emit('update:modelValue', null)
+      return
+    }
+    const jsDate = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
+    emit('update:modelValue', jsDate)
   },
 })
 
-const formatDate = (date: Date | undefined) => {
+const formatDate = (dateValue: DateValue | undefined) => {
-  if (!date) return props.placeholder
+  if (!dateValue) return props.placeholder
+  const date = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
   return date.toLocaleDateString('en-US', {
     year: 'numeric',
     month: 'long',
@@ -58,7 +68,7 @@ const formatDate = (date: Date | undefined) => {
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <Calendar v-model="value" initial-focus />
+      <Calendar v-model="value" :placeholder="placeholder" />
     </PopoverContent>
   </Popover>
 </template>

frontend/components/ui/popover/Popover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "radix-vue"
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "radix-vue"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()

frontend/components/ui/popover/PopoverContent.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "radix-vue"
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import {
   PopoverContent,
-  PopoverPortal,
   useForwardPropsEmits,
-} from "radix-vue"
+} from "reka-ui"
 import { cn } from "@/lib/utils"
 
 defineOptions({
@@ -28,7 +27,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <PopoverPortal to="body">
   <PopoverContent
     v-bind="{ ...forwarded, ...$attrs }"
     :class="
@@ -40,5 +38,4 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <slot />
   </PopoverContent>
-  </PopoverPortal>
 </template>

frontend/components/ui/popover/PopoverTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "radix-vue"
+import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "radix-vue"
+import { PopoverTrigger } from "reka-ui"
 
 const props = defineProps<PopoverTriggerProps>()
 </script>

frontend/nuxt.config.ts

@@ -53,6 +53,9 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    optimizeDeps: {
+      include: ['@internationalized/date'],
+    },
     server: {
       hmr: {
         clientPort: 3001,

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "hasInstallScript": true,
       "dependencies": {
+        "@internationalized/date": "^3.10.1",
         "@nuxtjs/tailwindcss": "^6.11.4",
         "@vueuse/core": "^10.11.1",
         "class-variance-authority": "^0.7.0",
@@ -1258,9 +1259,9 @@
       "peer": true
     },
     "node_modules/@internationalized/date": {
-      "version": "3.10.0",
+      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
-      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
+      "integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/helpers": "^0.5.0"

frontend/package.json

@@ -15,6 +15,7 @@
     "format": "prettier --write \"**/*.{js,ts,vue,json,css,scss,md}\""
   },
   "dependencies": {
+    "@internationalized/date": "^3.10.1",
     "@nuxtjs/tailwindcss": "^6.11.4",
     "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",