\n \u003C/template>\n\n \u003Ccomponent\n v-if=\"resolvedComponent\"\n :is=\"resolvedComponent\"\n :field=\"field\"\n :fieldName=\"fieldName\"\n :state=\"state\"\n />\n\n \u003Ctemplate v-if=\"helpContent\" #help>\n \u003Cspan v-html=\"cleanHTML(helpContent)\" />\n \u003C/template>\n \u003C/UFormField>\n```\n\n ```\n \u003CURadioGroup\n v-model=\"state[fieldName]\"\n :items=\"transformOptions(field['#options'] || {})\"\n orientation=\"horizontal\"\n class=\"w-full\"\n />\n```\n\n```\n \u003CUSelect\n v-model=\"state[fieldName]\"\n placeholder=\"Select\"\n :items=\"transformOptions(field['#options'] || {})\"\n class=\"w-full\"\n />\n\n```\nHowever when using a UCheckbox label and description have to be set here\n\n```\n \u003CUCheckbox\n v-model=\"checkboxValue\"\n :label=\"field['#title']\"\n :description=\"field['#description']\"\n class=\"w-full\"\n @update:model-value=\"props.state[fieldName] = $event\"\n />\n```\n\nSeems like this is a bug or maybe this is by design?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2062,2063],{"name":1985,"color":1986},{"name":1988,"color":1989},3294,"UCheckbox fieldform support","2025-02-12T19:23:36Z","https://github.com/nuxt/ui/issues/3294",0.72894645,{"description":2070,"labels":2071,"number":2075,"owner":1991,"repository":1992,"state":2044,"title":2076,"updated_at":2077,"url":2078,"score":2079},"# tldr\r\nWhen using nuxt UI v2.18.5 or higher -> `\u003CUInput value=\"'12714274'\" readonly />` change it to `\u003CUInput :model-value=\"'12714274'\" readonly />`\r\n\r\n\r\n\r\n--------- \r\n\r\n\r\n### Version\r\n\r\nedit: v2.18.5\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-uds7la?file=app.vue\r\n\r\n### Description\r\n\r\nSo i have a few grouped form inputs and noticed all values being empty since last update, reverted back to 2.18.4 and worked again. \r\n\r\n_(👀 or you can tell me im using it wrong)_\r\n\r\n### Why i am using :value= ? \r\n\r\n```\r\n\u003CUInput\r\n :value=\"firstname\"\r\n @input=\"$emit('update:firstname', $event.target.value)\"\r\n />\r\n \u003CUInput\r\n :value=\"lastname\"\r\n @input=\"$emit('update:lastname', $event.target.value)\"\r\n />\r\n```\r\n\r\nand using \r\n```\r\n\u003CAccountFormDetails\r\n v-model:firstname=\"formState.firstname\"\r\n v-model:lastname=\"formState.lastname\"\r\n/>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\nno logs,no errors\r\n```\r\n\r\nedit: added repro\r\nedit: pinpointed on 2.18.5, this happened between 18.4 and 18.5",[2072],{"name":2073,"color":2074},"bug","d73a4a",2238,"UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.7311724,{"description":2081,"labels":2082,"number":2094,"owner":1991,"repository":1991,"state":2044,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### Describe the feature\n\nSeveral composable functions ( `useState`, `useFetch`, `useAsyncData`, `useLazyAsyncData`, `useLazyFetch`) provide auto-key generation that is unique to the file name and line number of the instance of function call. However, this makes it impossible to create your own wrappers around these functions, because then the auto-generated key will always be the same for any wrapper-function call.\r\n\r\n```ts\r\n// composables/useAsyncSpecifiedData.ts\r\nexport function useAsyncSpecifiedData(params) {\r\n\t// ... do some work\r\n\tconst handler = createHandler( params )\r\n\tconst options = createOptions( params )\r\n\treturn useAsyncData(handler, options) // \u003C- the unique key always generated exactly for this file+line\r\n}\r\n```\r\nI would like to have oportynity to somehow expand keyed functions with myown\r\nhttps://github.com/nuxt/framework/blob/51bc6e44fef6e4a249946ba910a497089b089a64/packages/vite/src/plugins/composable-keys.ts#L15-L17\r\n\r\nSo that nuxt will generates a unique key directly for the wrapper function call, which will be passed down in `useAsyncData`. Since it is work for `useLazyAsyncData`\r\nhttps://github.com/nuxt/framework/blob/51bc6e44fef6e4a249946ba910a497089b089a64/packages/nuxt/src/app/composables/asyncData.ts#L263-L274\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2083,2085,2088,2091],{"name":2002,"color":2084},"8DEF37",{"name":2086,"color":2087},"good first issue","fbca04",{"name":2089,"color":2090},"3.x","29bc7f",{"name":2092,"color":2093},"🍰 p2-nice-to-have","0E8A16",12369,"Ability to add your own keyed functions ","2023-03-07T21:06:18Z","https://github.com/nuxt/nuxt/issues/12369",0.7351,{"description":2100,"labels":2101,"number":2104,"owner":1991,"repository":1992,"state":2044,"title":2105,"updated_at":2106,"url":2107,"score":2108},"### Description\n\nThis is highly experimental and potentially canceled, I'm opening this issue to both track down best approach and naming conventions before working on a PR. **I'll update this issue as I work on it**\n\n## Idea\n\nWith the current [Design Tokens](https://ui3.nuxt.dev/getting-started/theme#tokens) we control colors, radius and container width. This greatly simplifies both prototyping process and agencies working on templates built with Nuxt UI.\nPersonally there is one missing feature about colors: their opacity/shades, that you can find in the various states and variants.\n\nTaking in example any variant for the `Button` component, we have a set of hardcoded opacities (in this case: `/25`, `/10` and `/15`):\nhttps://github.com/nuxt/ui/blob/7f64198a70104436f39f2f9d8527df0508fd84f6/src/theme/button.ts#L91-L95\n\nIn a design first approach, especially when working on bigger projects, it is often to have the brand colors pre-defined for things like hover, disabled and such. This means that, if the project requires them, you are most probably forced to edit each very component's color in the `app.config`.\n\n### What we have\n\nWe auto generate a series of css variables as `--ui-{color}` based on `ui.theme.colors` inside the `nuxt.config.ts`. Then use them as `(text/bg/ring)-[var(--ui-{color})]/{opacity}` both as base and with modifiers (hover, disabled and so on).\n\nThey are used 40 times in total (7 unique: `/10`, `/15`, `/20`, `/25`, `/50`, `/75` and `/90`), distributed as:\n- **24** on `--ui-{color}`\n - ...\n- **7** on `--ui-bg-elevated`\n - `/50` for bg, hover and `data-highlighted`\n- **4** on `--ui-bg-accented`\n - `/75` for hover\n- **3** on `--ui-bg`\n - `/75` for pinned and sticky in UTable\n- **2** on `--ui-bg-inverted`\n - `/20` for `data-[highlighted]`\n - `/90` for hover\n\n### My approach\n\nI would like to group the various opacities into two categories: those that are actual opacities (mainly for `--ui-bg*`) and those that are for colors.\n- for the background ones I would mostly group them as three type of opacities (potentially creating three named variants)\n- for colors I would simply replace them with another named css variable, with follows the naming convention of `--ui-bg-(elevated/inverted/accented/*)`, becoming something like `--ui-{color}-(elevated/inverted/accented/*)`. For its default value I would use `color-mix(oklab, var(--ui-{color}) {opacity});`, keeping the current functionality of requiring a single starting color.\n\n### Additional context\n\n_No response_",[2102,2103],{"name":2002,"color":2028},{"name":1988,"color":1989},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.73850185,["Reactive",2110],{},["Set"],["ShallowReactive",2113],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"DAVTvGeFmQbjJhpdgpp3Y0V_xRBjmPIu0vdNhKlglic":-1},"/nuxt/ui/2409"]