From b0a45d98ce9ad5f3ee0e20fbe9ffd080a2572744 Mon Sep 17 00:00:00 2001 From: Francisco Gaona Date: Mon, 22 Dec 2025 01:50:53 +0100 Subject: [PATCH] WIP - fix date picker --- frontend/components/ui/button/Button.vue | 20 ++++----- frontend/components/ui/button/index.ts | 42 ++++++++++--------- .../components/ui/date-picker/DatePicker.vue | 24 +++++++---- frontend/components/ui/popover/Popover.vue | 4 +- .../components/ui/popover/PopoverContent.vue | 29 ++++++------- .../components/ui/popover/PopoverTrigger.vue | 4 +- frontend/nuxt.config.ts | 3 ++ frontend/package-lock.json | 7 ++-- frontend/package.json | 1 + 9 files changed, 74 insertions(+), 60 deletions(-) diff --git a/frontend/components/ui/button/Button.vue b/frontend/components/ui/button/Button.vue index 093188c..3330ec9 100644 --- a/frontend/components/ui/button/Button.vue +++ b/frontend/components/ui/button/Button.vue @@ -1,19 +1,19 @@ diff --git a/frontend/components/ui/button/index.ts b/frontend/components/ui/button/index.ts index ae37e95..3b23ad4 100644 --- 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 diff --git a/frontend/components/ui/date-picker/DatePicker.vue b/frontend/components/ui/date-picker/DatePicker.vue index a0a92b1..57b309a 100644 --- 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(new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())) + +const value = computed({ 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) => { - + diff --git a/frontend/components/ui/popover/Popover.vue b/frontend/components/ui/popover/Popover.vue index 76a9871..18a762a 100644 --- a/frontend/components/ui/popover/Popover.vue +++ b/frontend/components/ui/popover/Popover.vue @@ -1,6 +1,6 @@ diff --git a/frontend/components/ui/popover/PopoverTrigger.vue b/frontend/components/ui/popover/PopoverTrigger.vue index d34b782..185b117 100644 --- a/frontend/components/ui/popover/PopoverTrigger.vue +++ b/frontend/components/ui/popover/PopoverTrigger.vue @@ -1,6 +1,6 @@ diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index b6507eb..707c832 100644 --- 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, diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ff07748..757a216 100644 --- 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" diff --git a/frontend/package.json b/frontend/package.json index f096413..29155f3 100644 --- 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",