\n```",[2011,2012],{"name":1985,"color":1986},{"name":1988,"color":1989},3517,"How To Style NavigationMenu items","2025-03-14T13:01:49Z","https://github.com/nuxt/ui/issues/3517",0.6403271,{"description":2019,"labels":2020,"number":2023,"owner":1991,"repository":1992,"state":1993,"title":2024,"updated_at":2025,"url":2026,"score":2027},"### Description\n\n\nHow to set v-model type of UCalendar\n`\n \u003CUCalendar\n v-model=\"datePickerValue\"\n range\n size=\"lg\"\n color=\"error\"\n weekday-format=\"short\"\n >\n \u003Ctemplate #heading=\"{ value }\">\n \u003Cdiv class=\"custom-heading\">\n \u003Ch2 class=\"text-sm font-medium text-[#3f3f3f] leading-tight\">\n {{ formatMonthYear(value) }}\n \u003C/h2>\n \u003C/div>\n \u003C/template>\n\n \u003C!-- Day 커스터마이즈 -->\n \u003Ctemplate #day=\"{ day }\">\n \u003Cdiv class=\"custom-day\">\n \u003Cspan\n :class=\"{\n 'text-sm font-semibold': isDaySelected(day),\n 'text-sm font-normal': !isDaySelected(day),\n }\"\n >{{ extractDay(day) }}\u003C/span\n >\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #week-day=\"{ day }\">\n \u003Cdiv class=\"custom-week-day bg-white border-none\">\n \u003Cspan class=\"font-medium text-xs text-[#7e7e7e]\">{{ day }}\u003C/span>\n \u003C!-- 예시: 요일을 간단하게 출력 -->\n \u003C/div>\n \u003C/template>\n \u003C/UCalendar>\n`\n\n`const datePickerValue = ref\u003C{ start: DateValue; end: DateValue }>({\n start: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n end: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n});`\n\nI put the above variable in v-model, but I get the following error. How should I declare the type?\n\n`'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다.\n 'start' 속성의 형식이 호환되지 않습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322)\nCalendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly \"onUpdate:modelValue\"?: ((date: DateRange | null) => any) | undefined; readonly \"onUpdate:placeholder\"?: ((...args: unknown[]) => any) | undefined; readonly \"onUpdate:startValue\"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.`",[2021,2022],{"name":1985,"color":1986},{"name":1988,"color":1989},3900,"How to set v-model type of UCalendar","2025-04-15T02:00:18Z","https://github.com/nuxt/ui/issues/3900",0.6405598,{"description":2029,"labels":2030,"number":2038,"owner":1991,"repository":1992,"state":1993,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI’m a junior developer, and I’ve been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the `variant` and `status-position` props to the `Progress` component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[2031,2034,2035],{"name":2032,"color":2033},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":2036,"color":2037},"triage","ffffff",3728,"[UProgress]: Add `variant` and `status-position` props","2025-03-29T14:31:22Z","https://github.com/nuxt/ui/issues/3728",0.64708275,{"description":2044,"labels":2045,"number":2055,"owner":1991,"repository":1992,"state":2056,"title":2057,"updated_at":2058,"url":2059,"score":2060},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.10.0\r\n- Builder: -\r\n- User Config: extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.1, @nuxt/fonts@0.7.2, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.1\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-9zrfga?file=app.vue\r\n\n\n### Description\n\nHi everyone.\r\nI truly appreciate your work. Many many thanks!!\r\nI'm starting a new project, my first project with \"nuxt\" and \"nuxt ui+pro\" (I liked the dashboard theme).\r\nMaybe I'm doing something wrong, in this case please help me.\r\nOtherwise I think I found an error in the theme of the UDashboardModal component.\r\n\r\nThe background of UDashboardModal does not follow the length of its content in \"mobile view\" (small devide, in this example 400x616).\r\n\r\n\r\n\r\nIn desktop viewport work as expected.\r\n\r\n\r\n\r\nWhat's do you think?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2046,2049,2052],{"name":2047,"color":2048},"bug","d73a4a",{"name":2050,"color":2051},"duplicate","cfd3d7",{"name":2053,"color":2054},"pro","5BD3CB",2220,"closed","Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.5621839,{"description":2062,"labels":2063,"number":2066,"owner":1991,"repository":1992,"state":2056,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### Description\n\ni noticed that NUXT UI / NUXT UI PRO were refactored to use tailwind's new version 3 stuff + radix...\n\ni just went to the tailwind docs today and it looks like they just skipped right past their new version 3 and went to version 4...\n\nany ideas how this effects NUXT UI/PRO? \n\nMy undersanding is that version 3->4 means it was a semver breaking change?",[2064,2065],{"name":1985,"color":1986},{"name":1988,"color":1989},3167,"tailwind version 4..?","2025-01-24T10:17:32Z","https://github.com/nuxt/ui/issues/3167",0.57495016,{"description":2072,"labels":2073,"number":2075,"owner":1991,"repository":1992,"state":2056,"title":2076,"updated_at":2077,"url":2078,"score":2079},"### Description\n\nI want to use a UVerticalNavigation component however I want to manage my self who should be active since:\n\n- I don't have any to params\n- I want to stay on the same page but triggering my function on click\n\n\nEg:\n\n```\n \u003CUVerticalNavigation :links=\"links\" >\n \u003C/UVerticalNavigation>\n\n\n const links = [\n {\n label: 'Inbox',\n icon: 'i-heroicons-home',\n click: () => selectFolder('inbox'),\n active: activeFolder.value == 'inbox',\n }, {\n label: 'Drafts',\n icon: 'i-heroicons-pencil',\n click: () => selectFolder('drafts'),\n active: activeFolder.value == 'drafts'\n }, {\n label: 'Outbox',\n icon: 'i-heroicons-envelope',\n click: () => selectFolder('outbox'),\n active: activeFolder.value == 'outbox'\n }, {\n label: 'Sent',\n icon: 'i-heroicons-paper-airplane',\n click: () => selectFolder('sent'),\n active: activeFolder.value == 'sent'\n }, {\n label: 'Spam',\n icon: 'i-heroicons-exclamation-triangle',\n click: () => selectFolder('spam'),\n active: activeFolder.value == 'spam'\n }, {\n label: 'All mails',\n icon: 'i-heroicons-inbox-stack',\n click: () => selectFolder('all'),\n active: activeFolder.value == 'all'\n }\n ]\n\n```\n\nI tried using the activeFOlder.value but it's not updating upon the value change\n\nThank you!\n",[2074],{"name":1985,"color":1986},3351,"UVerticalNavigation Active","2025-02-19T05:51:40Z","https://github.com/nuxt/ui/issues/3351",0.59331167,{"description":2081,"labels":2082,"number":2086,"owner":1991,"repository":1992,"state":2056,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/image@1.8.1, @nuxt/content@2.13.4, @nuxthq/studio@1.1.2, @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/plausible@1.2.0, @nuxtjs/seo@2.0.2, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0.alpha10\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/button#loading (example with `loading-auto`)\n\n### Description\n\nWhen using a `UIButton` component with an `@click` event, the cursor does not change to `cursor-pointer`, which may confuse users about the button's clickability.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2083,2084,2085],{"name":2047,"color":2048},{"name":2050,"color":2051},{"name":1988,"color":1989},2940,"`cursor-pointer` is missing on `UButton` with an `@click` event","2025-04-02T09:37:12Z","https://github.com/nuxt/ui/issues/2940",0.5991994,{"description":2092,"labels":2093,"number":2096,"owner":1991,"repository":1992,"state":2056,"title":2097,"updated_at":2098,"url":2099,"score":2100},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@10.6.1\n- Builder: -\n- User Config: compatibilityDate, devtools, typescript, ssr, app, modules, ui, colorMode, i18n, gtag, icon, robots, pwa, runtimeConfig\n- Runtime Modules: @nuxt/ui@2.21.1, @nuxtjs/i18n@9.3.1, nuxt-gtag@3.0.2, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/icon@1.10.3, @nuxtjs/robots@5.2.6, @vite-pwa/nuxt@0.10.6, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules:\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n2.21.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/optimistic-http-yz8djj\n\n### Description\n\nThe hover effect doest work when you pass the color as variable. Doesn't work with some colors like indigo, pink, sky...\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2094,2095],{"name":1985,"color":1986},{"name":1988,"color":1989},3524,"Button hover effect","2025-03-14T11:52:31Z","https://github.com/nuxt/ui/issues/3524",0.6104293,["Reactive",2102],{},["Set"],["ShallowReactive",2105],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"dWBQ98h07-8dJBjbgvmf8tFeibEp4yWNJxQxb28MpFk":-1},"/nuxt/nuxt.com/1386"]