WIP - fix date picker

2025-12-22 01:50:53 +01:00
parent b6cb5652b7
commit b0a45d98ce
9 changed files with 74 additions and 60 deletions
--- a/frontend/components/ui/button/Button.vue
+++ b/frontend/components/ui/button/Button.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import type { ButtonVariants } from '.'
-import { Primitive } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."

 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
 }

 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: "button",
 })
 </script>

--- a/frontend/components/ui/button/index.ts
+++ b/frontend/components/ui/button/index.ts
@@ -1,36 +1,38 @@
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } 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',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/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',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "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",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
-        default: 'h-9 px-4 py-2',
-        xs: 'h-7 rounded px-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        "default": "h-9 px-4 py-2",
+        "xs": "h-7 rounded px-2",
+        "sm": "h-8 rounded-md px-3 text-xs",
+        "lg": "h-10 rounded-md px-8",
+        "icon": "h-9 w-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
+    },
  },
-  }
 )

 export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/frontend/components/ui/date-picker/DatePicker.vue
+++ b/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) => {
-    emit('update:modelValue', date || null)
+  set: (dateValue) => {
+    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) => {
-  if (!date) return props.placeholder
+const formatDate = (dateValue: DateValue | undefined) => {
+  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>
--- a/frontend/components/ui/popover/Popover.vue
+++ b/frontend/components/ui/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "radix-vue"
-import { PopoverRoot, useForwardPropsEmits } from "radix-vue"
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"

 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
--- a/frontend/components/ui/popover/PopoverContent.vue
+++ b/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>
--- a/frontend/components/ui/popover/PopoverTrigger.vue
+++ b/frontend/components/ui/popover/PopoverTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "radix-vue"
-import { PopoverTrigger } from "radix-vue"
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"

 const props = defineProps<PopoverTriggerProps>()
 </script>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -53,6 +53,9 @@ export default defineNuxtConfig({
  },

  vite: {
+    optimizeDeps: {
+      include: ['@internationalized/date'],
+    },
    server: {
      hmr: {
        clientPort: 3001,
--- a/frontend/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
-      "integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
+      "integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
      "license": "Apache-2.0",
      "dependencies": {
        "@swc/helpers": "^0.5.0"
--- a/frontend/package.json
+++ b/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",