\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DatePicker as VCalendarDatePicker } from 'v-calendar'\r\nimport type { DatePickerDate } from 'v-calendar/dist/types/src/use/datePicker'\r\nimport 'v-calendar/dist/style.css'\r\n\r\nconst props = defineProps({\r\n modelValue: {\r\n type: Date as PropType\u003CDatePickerDate>,\r\n default: null\r\n }\r\n})\r\n\r\nconst emit = defineEmits(['update:model-value', 'close'])\r\n\r\nconst date = computed({\r\n get: () => props.modelValue,\r\n set: (value) => {\r\n emit('update:model-value', value)\r\n emit('close')\r\n }\r\n})\r\n\r\nconst attrs = {\r\n transparent: true,\r\n borderless: true,\r\n color: 'primary',\r\n 'is-dark': { selector: 'html', darkClass: 'dark' },\r\n 'first-day-of-week': 1\r\n}\r\n\u003C/script>\r\n```\r\n\r\nAnd I use this component like this:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CPagesForm\r\n :title=\"title\"\r\n :action=\"action\"\r\n @submit=\"formRef.submit()\"\r\n :submit-button-label=\"submitButtonLabel\"\r\n >\r\n \u003CUForm\r\n :validate=\"validate\"\r\n :state=\"state\"\r\n class=\"flex w-full flex-col gap-8\"\r\n @error=\"onError\"\r\n @submit=\"onSubmit\"\r\n ref=\"formRef\"\r\n >\r\n \u003CUFormGroup label=\"Name\" name=\"name\" required>\r\n \u003CUInput placeholder=\"Enter member name...\" size=\"xl\" v-model=\"state.name\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Email\" name=\"email\" required>\r\n \u003CUInput placeholder=\"Enter member email...\" size=\"xl\" v-model=\"state.email\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"School\" name=\"school\" required>\r\n \u003CUInput placeholder=\"Enter member school...\" size=\"xl\" v-model=\"state.school\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Position\" name=\"position\" required>\r\n \u003CUSelect\r\n placeholder=\"Select\"\r\n size=\"xl\"\r\n v-model=\"state.position\"\r\n :options=\"positionOptions\"\r\n />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Joined At\" name=\"joinedAt\" required>\r\n \u003CUPopover :popper=\"{ placement: 'bottom-start' }\" class=\"w-full\">\r\n \u003CUButton\r\n icon=\"i-heroicons-calendar-days\"\r\n :label=\"format(state.joinedAt || new Date(), 'd MMM, yyy')\"\r\n color=\"white\"\r\n class=\"w-full\"\r\n size=\"xl\"\r\n />\r\n\r\n \u003Ctemplate #panel=\"{ close }\">\r\n \u003CCommonDatePicker v-model=\"state.joinedAt\" @close=\"close\" />\r\n \u003C/template>\r\n \u003C/UPopover>\r\n \u003C/UFormGroup>\r\n \u003C/UForm>\r\n \u003C/PagesForm>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { format } from 'date-fns'\r\nimport type { FormSubmitEvent, FormError, FormErrorEvent } from '#ui/types'\r\nimport { positionOptions } from '~/constants/select-options/positions'\r\nimport type { MemberForm, MemberFormState } from '~/types/members'\r\n\r\nconst props = defineProps\u003CMemberForm>()\r\n\r\nconst formRef = ref()\r\n\r\nconst state = reactive\u003CMemberFormState>({\r\n name: props.form?.name || '',\r\n email: props.form?.email || '',\r\n school: props.form?.school || '',\r\n position: props.form?.position || '',\r\n joinedAt: props.form?.joinedAt || new Date(),\r\n gen: props.form?.gen || undefined,\r\n aboutThisMember: props.form?.aboutThisMember || '',\r\n facebook: props.form?.facebook || '',\r\n github: props.form?.github || '',\r\n linkedin: props.form?.linkedin || ''\r\n})\r\n\r\nconst validate = (state: MemberFormState): FormError[] => {\r\n const errors = []\r\n if (!state.name) errors.push({ path: 'name', message: 'Required' })\r\n if (!state.email) errors.push({ path: 'email', message: 'Required' })\r\n if (!state.school) errors.push({ path: 'school', message: 'Required' })\r\n if (!state.position) errors.push({ path: 'position', message: 'Required' })\r\n if (!state.joinedAt) errors.push({ path: 'joinedAt', message: 'Required' })\r\n if (!state.gen) errors.push({ path: 'gen', message: 'Required' })\r\n if (!state.aboutThisMember) errors.push({ path: 'aboutThisMember', message: 'Required' })\r\n if (!state.facebook) errors.push({ path: 'facebook', message: 'Required' })\r\n if (!state.github) errors.push({ path: 'joinedAt', message: 'Required' })\r\n if (!state.linkedin) errors.push({ path: 'linkedin', message: 'Required' })\r\n return errors\r\n}\r\n\r\nconst onError = async (event: FormErrorEvent) => {\r\n const element = document.getElementById(event.errors[0].id)\r\n element?.focus()\r\n element?.scrollIntoView({ behavior: 'smooth', block: 'center' })\r\n}\r\n\r\nconst emit = defineEmits\u003C{\r\n (e: 'form-submit', data: object): void\r\n}>()\r\n\r\nconst onSubmit = async (event: FormSubmitEvent\u003CMemberFormState>) => {\r\n emit('form-submit', event.data)\r\n}\r\n\u003C/script>\r\n```\r\n\r\n\r\nWhen I click the button, the DatePicker is shown but the label of the Button is not change. I still don't know that caused by the date is not changed or I set the label of the button wrongly. But when I put a `console.log` inside the `set()`, it does not run.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",2106,"nuxt","ui","open","Need help: `DatePicker` set value not work","2024-11-11T16:09:38Z","https://github.com/nuxt/ui/issues/2106",0.77525634,{"description":2882,"labels":2883,"number":2889,"owner":2874,"repository":2875,"state":2876,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Environment\n\nNuxt UI pro v 3.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input-menu#control-search-term\n\n### Description\n\nHello, \n\nI am reopening an issue based on https://github.com/nuxt/ui/issues/3782\n\nI still have an issue on the InputMenu that filters with the default value.\n\nAs a reproduction : we can see the same behavior I am facing in the documentation : https://ui.nuxt.com/components/input-menu#control-search-term . \n\n1) => The first click on InputMenu shows only the seacherd term (here Backlog)\n2) => If I close the popover and reopen it a second time, it shows the entire list.\n\nI tried the :reset-search-term-on-select=\"false\" , it allows to display the entire list at 1st click but it leads to not showing the default selected value (the placeholder is displayed).\n\nActually, I am looking to display the entire list at first click, even if a value is already selected.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2884,2885,2888],{"name":2868,"color":2869},{"name":2886,"color":2887},"v3","49DCB8",{"name":2871,"color":2872},3993,"InputMenu Clear Search on Select at first click","2025-04-27T12:37:04Z","https://github.com/nuxt/ui/issues/3993",0.7820802,{"description":2895,"labels":2896,"number":2901,"owner":2874,"repository":2875,"state":2876,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Description\n\nHi there,\n\nI'm really curious about how Nuxt UI is handling trailing slashes. In the Nuxt Content repo I can see they are using `ufo` to remove the trailing slashes, but in the Nuxt UI repo I can't find how you get rid of it. Even tho I know you can do these things on Vercel and Netlify, I'm curious how you handle it in Nuxt UI.\n\nIn my case, route.path is returning a path with a trailing slash and breaks my `queryCollection`...\n\n```vue\nconst { data: page } = await useAsyncData(\n `${route.path}/.navigation`,\n async () => {\n return await queryCollection('content').path(route.path).first();\n }\n);\n```",[2897,2900],{"name":2898,"color":2899},"question","d876e3",{"name":2886,"color":2887},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.78280187,{"description":2907,"labels":2908,"number":2911,"owner":2874,"repository":2875,"state":2912,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Environment\n\nHi, I just wanted to share that the styling on the docs website appears broken when viewed in Firefox. I checked on Chrome, and it displays correctly there.\n\nHere’s a screenshot:\n\n\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nN/A\n\n### Reproduction\n\nN/A\n\n### Description\n\nN/A\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2909,2910],{"name":2868,"color":2869},{"name":2886,"color":2887},3397,"closed","Nuxt UI v3 docs styling broken","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3397",0.62566453,{"description":2918,"labels":2919,"number":2932,"owner":2874,"repository":2874,"state":2912,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### 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).",[2920,2923,2926,2929],{"name":2921,"color":2922},"enhancement","8DEF37",{"name":2924,"color":2925},"good first issue","fbca04",{"name":2927,"color":2928},"3.x","29bc7f",{"name":2930,"color":2931},"🍰 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.74414825,{"description":2938,"labels":2939,"number":2944,"owner":2874,"repository":2875,"state":2912,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\nThe current implementation of Nested forms in nuxt ui uses flex as a way to differentiate between row forms.\n\nI am currently trying to use Nuxt UI v2 UTable component with the UForm component. \n\nHowever, a more ideal situation for me would be an implementation that uses the features of Nuxt UI's table with the nested Uform component. Meaning I can have the benefits of nuxt ui's form validation as well as the table.\n\n[The implementation here would be awesome](https://stackoverflow.com/questions/6707386/add-form-to-table-rows). A more ideal implentation is [this](https://jsfiddle.net/ZRQPP/), but with the form validation features that nuxt ui provides ",[2940,2941],{"name":2898,"color":2899},{"name":2942,"color":2943},"stale","ededed",3171,"[Table] with row [Form] component features.","2025-03-09T13:19:00Z","https://github.com/nuxt/ui/issues/3171",0.7460266,{"labels":2950,"number":2956,"owner":2874,"repository":2874,"state":2912,"title":2957,"updated_at":2958,"url":2959,"score":2960},[2951,2952,2953],{"name":2921,"color":2922},{"name":2927,"color":2928},{"name":2954,"color":2955},"dx","C39D69",13963,"automatically generate unique keys for keyed composables","2023-01-19T17:11:03Z","https://github.com/nuxt/nuxt/issues/13963",0.74752694,{"description":2962,"labels":2963,"number":2967,"owner":2874,"repository":2968,"state":2912,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### Environment\n\nNot needed\n\n### Reproduction\n\nNot necessary, any SSR/Prerender Nuxt will fail\n\n### Describe the bug\n\nI'm just creating this issue to warn anyone that is using Cloudflare with Nuxt SSR\r\n\r\nDISABLE ASSET MINIFICATION, it breaks Vue hydration\r\n\r\n\r\nI've spent weeks trying to fix it, and it was as simple as unchecking these boxes, hope it helps anyone\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2964],{"name":2965,"color":2966},"documentation","9DE2BA",1457,"nuxt.com","SSR Issues with Coudflare Pages (SOLVED)","2023-12-27T17:11:13Z","https://github.com/nuxt/nuxt.com/issues/1457",0.75817364,{"description":2974,"labels":2975,"number":2981,"owner":2874,"repository":2874,"state":2912,"title":2982,"updated_at":2983,"url":2984,"score":2985},"### Describe the feature\r\n\r\nhttps://github.com/nuxt/framework/blob/02227a2f1b86b077082c50b46cb7486a8672eabe/packages/nuxt/src/app/nuxt.ts#L10\r\nIn micro frontend environment, multi apps will be conflicted with same context key (`nuxt-app`). Can make it configurable in nuxt.config.ts?\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://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2976,2977,2980],{"name":2921,"color":2922},{"name":2978,"color":2979},"discussion","538de2",{"name":2927,"color":2928},15234,"Custom key of nuxt app context","2024-05-15T10:30:07Z","https://github.com/nuxt/nuxt/issues/15234",0.7685925,{"description":2987,"labels":2988,"number":2992,"owner":2874,"repository":2875,"state":2912,"title":2993,"updated_at":2994,"url":2995,"score":2996},"### 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_",[2989,2991],{"name":2921,"color":2990},"a2eeef",{"name":2886,"color":2887},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.77004683,["Reactive",2998],{},["Set"],["ShallowReactive",3001],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fIDmMgsaXxH1dVR6SMldbpeBXuuZF_LvuG0mkqrg5ypg":-1},"/nuxt/ui/2887"]