\n \u003C/template>\n\u003C/UModal>\n```\n\n\n### Description\n\nselect menu's search input always autofocus inside modal, even when the autofocus is set to false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2865,2868,2871],{"name":2866,"color":2867},"bug","d73a4a",{"name":2869,"color":2870},"v3","49DCB8",{"name":2872,"color":2873},"triage","ffffff",3933,"nuxt","ui","open","SelectMenu's autofocus doesn't work inside Modal","2025-04-19T06:22:26Z","https://github.com/nuxt/ui/issues/3933",0.67947733,{"description":2883,"labels":2884,"number":2894,"owner":2875,"repository":2875,"state":2877,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Describe the feature\r\n\r\nEspecially when it comes to handling URL state, I've seen the wildest implementations.\r\nIt would be great to have two simple helper composables which create \"reactive\" router params and router query values.\r\nThat way, it would be even easier to sync URL state (and we could properly document + advise it).\r\n\r\nThis [already exists in VueUse](https://vueuse.org/router/useRouteParams/) but does not utilize `navigateTo`.\r\n\r\nExample syntax (adapted from VueUse example)\r\n\r\n```ts\r\nconst search = useRouteQuery('search')\r\n\r\nconst otherSearch = useRouteQuery('search', 'foo') // default value\r\n\r\nconst page = useRouteQuery('page', '1', { transform: Number }) // with transform function too\r\n\r\nconsole.log(search.value) // same as route.query.search\r\nsearch.value = 'foobar' // Calls navigateTo({ query: { search: 'foobar' } }, { replace: true })\r\n```\r\n\r\n---\r\n\r\nRelated issue (was more bare-bone): https://github.com/nuxt/nuxt/issues/24365\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [X] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2885,2888,2891],{"name":2886,"color":2887},"enhancement","8DEF37",{"name":2889,"color":2890},"workaround available","11376d",{"name":2892,"color":2893},"needs details","493824",24788,"`useRouteParams` and `useRouteQuery` for Nuxt","2024-09-13T10:57:55Z","https://github.com/nuxt/nuxt/issues/24788",0.68503296,{"description":2900,"labels":2901,"number":2906,"owner":2875,"repository":2876,"state":2877,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2902,2905],{"name":2903,"color":2904},"question","d876e3",{"name":2869,"color":2870},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.69736445,{"description":2912,"labels":2913,"number":2916,"owner":2875,"repository":2876,"state":2917,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Description\n\n### Use Case\nWhen using UTable with expandable rows alongside row-click navigation, it's currently impossible to prevent the expand action from triggering the row navigation. A custom slot would allow users to implement `@click.stop` on the expand button, separating its behavior from row clicks.\n\n### Example of Desired Usage\n```vue\n\u003CUTable :rows=\"rows\" :columns=\"columns\" @row-click=\"navigateToPage\">\n \u003Ctemplate #expand-btn=\"{ expanded, toggle }\">\n \u003Cbutton @click.stop=\"toggle\">\n {{ expanded ? 'Collapse' : 'Expand' }}\n \u003C/button>\n \u003C/template>\n\u003C/UTable>\n```\n\nI'd also like to take this opportunity to add another suggestion : Implement a way to control expandability on a per-row basis.\n\nThanks\n\n### Additional context\n\n_No response_",[2914],{"name":2886,"color":2915},"a2eeef",2301,"closed","Expand Button Slot for UTable","2024-11-05T16:13:52Z","https://github.com/nuxt/ui/issues/2301",0.68341196,{"description":2923,"labels":2924,"number":2932,"owner":2875,"repository":2876,"state":2917,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### 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_",[2925,2926,2929],{"name":2866,"color":2867},{"name":2927,"color":2928},"duplicate","cfd3d7",{"name":2930,"color":2931},"pro","5BD3CB",2220,"Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.6953291,{"description":2938,"labels":2939,"number":2941,"owner":2875,"repository":2876,"state":2917,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nThe config of the divider component allows to define types:\n\n```\ntype: {\n solid: 'border-solid',\n dotted: 'border-dotted',\n dashed: 'border-dashed',\n},\n```\n\nHowever, the solid type is set by default and can only be changed per Divider component, not globally via config. It would be great to be able to set a custom default type like so:\n\n```\ndefault: {\n border: {\n type: 'dotted',\n },\n},\n```\n\n### Additional context\n\n_No response_",[2940],{"name":2886,"color":2915},2398,"Define default type for Divider","2024-10-19T12:19:23Z","https://github.com/nuxt/ui/issues/2398",0.6973307,{"description":2947,"labels":2948,"number":2952,"owner":2875,"repository":2876,"state":2917,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### 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```",[2949,2950,2951],{"name":2866,"color":2867},{"name":2927,"color":2928},{"name":2869,"color":2870},2940,"`cursor-pointer` is missing on `UButton` with an `@click` event","2025-04-02T09:37:12Z","https://github.com/nuxt/ui/issues/2940",0.7011555,{"description":2958,"labels":2959,"number":2962,"owner":2875,"repository":2876,"state":2917,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### 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' 속성에서 가져옵니다.`",[2960,2961],{"name":2903,"color":2904},{"name":2869,"color":2870},3900,"How to set v-model type of UCalendar","2025-04-25T06:07:41Z","https://github.com/nuxt/ui/issues/3900",0.7029112,{"description":2968,"labels":2969,"number":2970,"owner":2875,"repository":2971,"state":2917,"title":2972,"updated_at":2973,"url":2974,"score":2975},"If you go to any blog and click `Edit on Github` on aside it will bring you to a 404 on github.\r\n\r\nCode that is incorrect: https://github.com/nuxt/nuxt.com/blob/a9b1e32c93714f23703f12add0f0c17cc518bd2a/pages/blog/%5Bslug%5D.vue#L66\r\n\r\nNeeds to be: \r\n\r\n```\r\nhttps://github.com/nuxt/nuxt.com/edit/main/content/${article.value._file}\r\n```",[],1533,"nuxt.com","blog \"Edit on Github\" url is broke.","2024-03-11T22:23:34Z","https://github.com/nuxt/nuxt.com/issues/1533",0.7040888,{"labels":2977,"number":2984,"owner":2875,"repository":2875,"state":2917,"title":2985,"updated_at":2986,"url":2987,"score":2988},[2978,2981],{"name":2979,"color":2980},"pending triage","E99695",{"name":2982,"color":2983},"2.x","d4c5f9",10424,"query param %2B decoded to spase instead \"+\"","2023-03-17T21:53:17Z","https://github.com/nuxt/nuxt/issues/10424",0.7042733,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYgdAJo0DhEvrDNjVFfD-iXAD0CAlw-LKHEtxq-7Q0RY":-1},"/nuxt/ui/3164"]