\n \u003C/UFormGroup>\n\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n\n\u003C/UForm>\n```\n\n```ts\n\u003Cscript setup lang=\"ts\">\n import { z } from 'zod';\n\n const state = reactive({\n picture: undefined,\n })\n\n const schema = z.object({\n picture: z.custom\u003CFileList>()\n .transform((val) => {\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n })\n .superRefine((file, ctx) => {\n if (!(file instanceof File)) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n fatal: true,\n message: 'Not a file',\n });\n return z.NEVER;\n }\n if (file.size > 5 * 1024 * 1024) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'Max file size allowed is 5MB',\n });\n }\n if (\n !['image/jpeg', 'image/png', 'image/webp', 'image/jpg'].includes(\n file.type\n )\n ) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'File must be an image (jpeg, jpg, png, webp)',\n });\n }\n })\n });\n\n type Schema = z.infer\u003Ctypeof schema>;\n\n async function onSubmit (event: FormSubmitEvent\u003CSchema>) {\n console.log(event.data);\n }\n\u003C/script>\n```\n\nAs aspected the following onChange function logs a FileList\n\n```ts\nfunction onChangeFile(event: Event) {\n console.log(event)\n}\n```\n\nBut when I log val in the transform function of Zod\n\n```ts\n.transform((val) => {\n console.log(val);\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n})\n```\n\nI get a string like this:\n\n```\nC:\\fakepath\\Screenshot 2024-10-25 at 10.26.36.png\n```\n\nCan someone please help me out, i'm looking for a few days now for a solution.",[2910],{"name":2911,"color":2912},"question","d876e3",2462,"UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.69046044,{"description":2919,"labels":2920,"number":2923,"owner":2866,"repository":2867,"state":2868,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.7`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@nuxt/ui@2.19.2`, `@artmizu/nuxt-prometheus@2.4.0`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n### Version\n\nv2.21.1\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/select-menu#control-the-query\n\nTry to select `Wade` in the query input with mouse or trackpad \n\u003Cimg width=\"494\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a0e90d62-aabb-4d40-9d8d-a6fed67fee02\" />\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2921,2922],{"name":2877,"color":2878},{"name":2863,"color":2864},3583,"Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.69119227,{"description":2929,"labels":2930,"number":2935,"owner":2866,"repository":2936,"state":2868,"title":2937,"updated_at":2938,"url":2939,"score":2940},"We currently support running composables/components in a browser-type environment (with happy-dom, and soon jsdom). But there are use cases where it might be useful to support running tests in a hybrid server environment where things like h3 utilities and nuxt ssr utilities work.\r\n\r\nThis could definitely be classed as non-essential and experimental, but we can track it here.",[2931,2932],{"name":2857,"color":2858},{"name":2933,"color":2934},"vitest-environment","b60205",531,"test-utils","nuxt server environment support","2025-03-06T16:28:47Z","https://github.com/nuxt/test-utils/issues/531",0.6957425,{"description":2942,"labels":2943,"number":2944,"owner":2866,"repository":2945,"state":2868,"title":2946,"updated_at":2947,"url":2948,"score":2949},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.69791573,{"description":2951,"labels":2952,"number":2954,"owner":2866,"repository":2867,"state":2955,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.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/fonts@0.10.2, @nuxt/ui@2.19.2, @storyblok/nuxt@6.2.0\n- Build Modules: -\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\n-\n\n### Description\n\nThe carousel component typing only allows \"black\" as color for arrow buttons (at least in app.config.ts). But e.g. \"primary\" (and also \"grey\" in the docs) also works fine and different colors are often needed. \n\n\n_carousel.d.ts_\n```\ndeclare const _default: {\n wrapper: string;\n container: string;\n item: string;\n arrows: {\n wrapper: string;\n };\n indicators: {\n wrapper: string;\n base: string;\n active: string;\n inactive: string;\n };\n default: {\n prevButton: {\n color: \"black\";\n class: string;\n icon: string;\n };\n nextButton: {\n color: \"black\";\n class: string;\n icon: string;\n };\n };\n};\nexport default _default;\n\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2953],{"name":2877,"color":2878},2636,"closed","Carousel: arrow color typing in app.config.ts only allows 'black'","2024-12-05T13:48:52Z","https://github.com/nuxt/ui/issues/2636",0.6504242,{"description":2961,"labels":2962,"number":2965,"owner":2866,"repository":2867,"state":2955,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Description\n\nNuxt UI should have the potential to open native links in a Nuxt UI Modal by simply adding a certain `modal` parameter in [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link).\n\n`\u003CNuxtLink to=\"/about\" modal>About page shown in modal but can also be opened natively (e.g. new tab)\u003C/NuxtLink>`\n\nThe link should still be a native link with progressive enhancement, so _if users would like to open the URL in a new tab, they can do_! If not, it will open the content in a modal.\n\nThat would be great DX and UX! 🎉\n\nThe `modal` property is just one possible solution, maybe there's even a better one using a native HTML property like `rel=\"modal\"`, we should discuss that.\n\nIn future versions there might be further control parameters to override the defaults for\n\n- modal size\n- modal style\n- modal opacity\n- ...\n\nBut let's start simple.\n\nSomething similar was done here, but I think this should really be part of Nuxt UI or even Nuxt Core.\nhttps://nuxt-pages-plus.pages.dev/components/plus-modal-link\n\n### Additional context\n\n_No response_",[2963,2964],{"name":2857,"color":2858},{"name":2860,"color":2861},3298,"Enhance NuxtLink to open in Modal using a \"modal\" property","2025-03-08T12:21:53Z","https://github.com/nuxt/ui/issues/3298",0.6701388,["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTZRX3aApajvfK1QpQD4jS0GNdOqKOFgGiDZvIL6dbYA":-1},"/nuxt/ui/2662"]