\n \u003C/slot> \n```\n\n### Additional context\n\nI believe this is common throughout the library, and was wondering to post this issue or not given that there might already be a specific reason. But alas, I couldn't find one in the issues.\n\ncc, from #4411",[2941,2944,2945],{"name":2942,"color":2943},"enhancement","a2eeef",{"name":2928,"color":2929},{"name":2946,"color":2947},"triage","ffffff",4435,"InputNumber increment/decrement button props not being passed to their respective slots","2025-07-01T17:13:20Z","https://github.com/nuxt/ui/issues/4435",0.75669664,{"description":2954,"labels":2955,"number":2964,"owner":2931,"repository":2932,"state":2965,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Description\r\n\r\nThe code for specifying column width when there is no data is as follows and it is expected\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUTable :empty-state=\"{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }\" :rows=\"people\"\r\n :columns=\"columns\">\r\n \u003Ctemplate #from-data=\"{ row }\">\r\n {{ row.from.value }}\r\n \u003C/template>\r\n \u003C/UTable>\r\n \u003CUNotifications>\r\n \u003Ctemplate #title=\"{ title }\">\r\n \u003Cspan v-html=\"title\" />\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[2956,2959,2962],{"name":2957,"color":2958},"question","d876e3",{"name":2960,"color":2961},"closed-by-bot","ededed",{"name":2963,"color":2961},"stale",2092,"closed","UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7190354,{"description":2971,"labels":2972,"number":2975,"owner":2931,"repository":2932,"state":2965,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Description\n\nI am trying to add style to a specific row in a UTable. So far I am trying something like this: \n\n```\n\u003CUTable\n :ui=\"{\n tbody: [\n tr.id === '1001' ? ' ' : 'light:bg-[#000] dark:bg-[#000] font-bold',\n ],\n }\"\n\u003C/UTable>\n```\n\nI am using the `:ui` prop as the docs say: \n\n```\n{ root?: ClassNameValue; base?: ClassNameValue; caption?: ClassNameValue; thead?: ClassNameValue; tbody?: ClassNameValue; ... 4 more ...; loading?: ClassNameValue; }\n```\n(Taken from: https://ui.nuxt.com/components/table)\n\nHowever, the docs don't say how to add a condition. I tried this: ` tr.id === '1001' ?` as well as hundreds of other possibilities because I am trying without knowing. It is not working, I suppose because I am not using the correct syntax.\n\nCould you provide more info as what options I have with the UTable to achieve this? Thank you in advance.\n\n",[2973,2974],{"name":2957,"color":2958},{"name":2928,"color":2929},4089,"How to add style to a specific row in a UTable?","2025-05-08T11:59:49Z","https://github.com/nuxt/ui/issues/4089",0.71952343,{"description":2981,"labels":2982,"number":1660,"owner":2931,"repository":2987,"state":2965,"title":2988,"updated_at":2989,"url":2990,"score":2991},"",[2983,2984],{"name":2942,"color":2943},{"name":2985,"color":2986},"provider","1161A4","fonts","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.7373928,{"description":2993,"labels":2994,"number":2998,"owner":2931,"repository":2932,"state":2965,"title":2999,"updated_at":3000,"url":3001,"score":3002},"### Description\n\nHi,\r\n\r\nI have a customized Nuxt UI setup, with multiple variants and colors for the UInput elements set in the app.config. Currently if the input is in error state inside a FormGroup, it will override the input classes only with the base classes, and it will not use my classes for the given variant.\r\n\r\n`input: {\r\n base: 'dark:focus:ring-1 ring-1 dark:focus:bg-white dark:focus:text-hollow font-bold dark:focus:placeholder-black/30',\r\n placeholder: \"dark:placeholder-white/30\",\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-[13px]',\r\n xl: 'text-[13px]'\r\n },\r\n padding: {\r\n xs: 'px-4 py-0 h-8',\r\n sm: 'px-4 py-0 h-12',\r\n xl: 'h-14 px-4 py-0'\r\n },\r\n color: {\r\n white: {\r\n outline: 'dark:bg-primaryBg dark:placeholder-white/10',\r\n solid: \"dark:bg-hollow dark:placeholder-white/30\",\r\n soft: 'dark:bg-white/10 dark:placeholder-white/10',\r\n },\r\n primary: {\r\n solid: \"dark:text-peach-500 dark:placeholder-peach-500/40 dark:bg-hollow dark:ring-0 font-bold\"\r\n },\r\n },\r\n rounded: \"rounded-lg\",\r\n default: {\r\n variant: 'solid'\r\n }\r\n }`\r\n\r\n\n\n### Additional context\n\n_No response_",[2995,2996,2997],{"name":2942,"color":2943},{"name":2960,"color":2961},{"name":2963,"color":2961},1593,"UInput error state style override","2025-06-19T02:12:46Z","https://github.com/nuxt/ui/issues/1593",0.73828745,{"description":3004,"labels":3005,"number":3008,"owner":2931,"repository":2932,"state":2965,"title":3009,"updated_at":3010,"url":3011,"score":3012},"### Description\n\nHi,\n\nit would be nice to have the option to disable the behaviour that the numbers increase or decrease when the buttons are pressed. Because even if I disable the component it doesn't stops. \n\n```js\n\u003CUInputNumber\n :disabled=\"loadingDec || loadingInc\"\n :min=\"0\"\n :max=\"10\"\n v-model=\"quantity\"\n variant=\"soft\"\n size=\"xl\"\n >\u003Ctemplate #decrement>\n \u003CUButton\n :loading=\"loadingDec\"\n variant=\"link\"\n :icon=\"quantity \u003C= 1 ? 'i-heroicons-trash' : 'i-lucide-minus'\"\n @click=\"loadingDec = true\"\n @mousedown=\"onMousedown()\"\n :ui=\"{\n base: `${iconHoverColor} text-gray-500 disabled:text-gray-500 cursor-pointer`,\n }\"\n />\n \u003C/template>\n \u003Ctemplate #increment>\n \u003CUButton\n :loading=\"loadingInc\"\n variant=\"link\"\n icon=\"i-lucide-plus\"\n @click=\"loadingInc = true\"\n :ui=\"{\n base: 'text-gray-500 hover:text-[var(--ui-color-primary-500)] disabled:text-gray-500 cursor-pointer',\n }\"\n />\n \u003C/template>\n \u003C/UInputNumber>\n````\n\nbest,\ngregor\n\n### Additional context\n\n_No response_",[3006,3007],{"name":2942,"color":2943},{"name":2928,"color":2929},3159,"option to disable on press behaviour for increment/decrement for inputNumber component","2025-05-14T15:41:35Z","https://github.com/nuxt/ui/issues/3159",0.73904276,{"description":3014,"labels":3015,"number":3019,"owner":2931,"repository":2932,"state":2965,"title":3020,"updated_at":3021,"url":3022,"score":3023},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.0.0-beta.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nHere's a demo (https://codesandbox.io/p/devbox/nuxtui3-bug-3432-sphrpl)\n\n**index.vue**\n```\n\u003Ctemplate>\n \u003CUContainer>\n \u003CFooModal @some-action=\"fnHandleAction\" /> \u003Cbr />\n \u003CUButton @click=\"fnOpenModal\">Open FooModal from code\u003C/UButton>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n import { FooModal } from '#components';\n\n const overlay = useOverlay();\n\n const foo = overlay.create(FooModal);\n\n const fnOpenModal = async () => {\n foo.open();\n };\n\n const fnHandleAction = (action) => {\n console.log(\"Handle FooModal action: \", action);\n };\n\u003C/script>\n```\n\n**FooModal**\n```\n\u003Ctemplate>\n \u003CUModal v-model:open=\"open\" title=\"Foobar\">\n \u003CUButton label=\"Open FooModal from modal\" color=\"neutral\" variant=\"subtle\" />\n\n \u003Ctemplate #body>\n \u003CUButton @click=\"click()\" >Submit\u003C/UButton>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n const open = ref(false);\n\n const emits = defineEmits(['some-action']);\n\n const click = () => {\n console.log(\"clicked from inside the modal\");\n emits('some-action', 'closing'); //emits does not work if Modal opened using useOverlay.\n open.value = false; //closing modal does not work if Modal opened using useOverlay.\n };\n\u003C/script>\n```\n\n### Description\n\nHello Nuxt UI team,\n\nThank you for providing a high-quality UI library. I truly appreciate the effort you put into creating and maintaining it.\n\nI have encountered an issue while using `UModal` in my application. The modal is used to create and/or update database entries, and it needs to be opened in two different ways:\n\n1. Via a `UButton` that is always present on the screen (provided by the modal itself).\n2. Programmatically, through a link in a dropdown menu, using `useOverlay`.\n\nWhen the modal is opened using the first method, everything works as expected. However, when it is opened programmatically using the second method, the modal does not behave the same way. Specifically:\n\n- I am unable to trigger an `emit` to notify the parent component that the update was successful.\n- The modal does not close properly using the `open.value = false` technique.\n\nI am unsure if this behavior is intentional or a bug. I was under the impression that `UModal` and `useOverlay` should work seamlessly together and exhibit consistent behavior. Could you please confirm whether this is a valid concern?\n\nThank you for your time and attention to this matter. I look forward to your guidance.\n\n**Note**: You'll also notice that the button within the modal appears on the screen when opened using `useOverlay`. It would be helpful if it could be hidden automatically, but I believe this is something I can control easily. As such, I do not consider this to be a bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3016,3017,3018],{"name":2922,"color":2923},{"name":2928,"color":2929},{"name":2946,"color":2947},3432,"UModal and useOverlay compatibility Issue","2025-03-11T13:57:03Z","https://github.com/nuxt/ui/issues/3432",0.7393323,{"description":3025,"labels":3026,"number":3029,"owner":2931,"repository":2932,"state":2965,"title":3030,"updated_at":3031,"url":3032,"score":3033},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, css, future, compatibilityDate, vite\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-bsi7gjhw?file=app%2Fapp.vue\n\n### Description\n\nThe UInput component behaves the same way whether using `v-model` or just `:modelValue`—it retains input values when typed into. However, this is incorrect because I did not set up the `@update:modelValue` event\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3027,3028],{"name":2922,"color":2923},{"name":2928,"color":2929},4355,"The UInput component is not a controlled component","2025-06-16T10:45:31Z","https://github.com/nuxt/ui/issues/4355",0.74221855,{"description":3035,"labels":3036,"number":3042,"owner":2931,"repository":2932,"state":2965,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.4\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0, nuxt-file-storage@0.2.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst bill = defineModel()\nconst calcStep = (value: int): int => value \u003C 1000 ? 100 : 500\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex gap-4 items-center\">\n от \u003CUInputNumber v-model=\"bill.from\" :min=\"0\" :max=\"bill.to || 10000\" :step=\"calcStep(bill.from)\" variant=\"soft\" class=\"max-w-32\" />\n до \u003CUInputNumber v-model=\"bill.to\" :min=\"bill.from\" :max=\"10000\" :step=\"calcStep(bill.to)\" variant=\"soft\" class=\"max-w-32\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nhttps://skr.sh/vT5m5gCX1Bk\n\nThe value changes when clicking outside the field, regardless of the `step` and `modelValue` state. The `step` parameter is also calculated incorrectly at the threshold of 1000.",[3037,3038,3039,3040,3041],{"name":2922,"color":2923},{"name":2925,"color":2926},{"name":2928,"color":2929},{"name":2946,"color":2947},{"name":2960,"color":2961},2859,"UInputNumber changes value on blur when not asked for","2025-06-19T02:15:22Z","https://github.com/nuxt/ui/issues/2859",0.7428845,["Reactive",3048],{},["Set"],["ShallowReactive",3051],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fV0jrpoR-A2n_mkCWGN-Z4nXxynuO_WBxwh_rM5jQtIs":-1},"/nuxt/ui/3381"]