\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_",[2906,2907],{"name":2868,"color":2869},{"name":2874,"color":2875},2106,"Need help: `DatePicker` set value not work","2024-11-11T16:09:38Z","https://github.com/nuxt/ui/issues/2106",0.7169006,{"description":2914,"labels":2915,"number":2920,"owner":2877,"repository":2878,"state":2879,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Description\n\nHow do you set viewport align to \"start\" like [this](https://reka-ui.com/docs/components/navigation-menu#viewport) ?\n\nFor now I am using this horrible workaround\n\n```\n:ui=\"{\n viewport: 'left-0 -ml-[1em]',\n viewportWrapper: 'absolute top-full left-4 w-auto'\n}\"\n```",[2916,2919],{"name":2917,"color":2918},"question","d876e3",{"name":2871,"color":2872},3364,"navigationmenu viewport align prop","2025-02-21T18:12:23Z","https://github.com/nuxt/ui/issues/3364",0.7198817,{"description":2926,"labels":2927,"number":2930,"owner":2877,"repository":2878,"state":2931,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Description\n\nI need to create custom components including @nuxt/ui components and forward props, emits on this components.\n\nWhen importing (in vue file)\n```ts\nimport type { FormFieldProps, FormFieldSlots } from '@nuxt/ui';\n\nconst props = defineProps\u003CFormFieldProps & { operations?: T[] }>();\nconst slots = defineEmits\u003CFormFieldSlots>();\n\nconst formFieldProps = reactiveOmit(props, ['operations']);\n```\nI receive this error on execution :\n```log\nIdentifier 'appConfig' has already been declared.\n\nInternal server error: Identifier 'appConfig' has already been declared. (105:6) 09:22:04\n Plugin: vite:vue\n File: .../app/pages/ResDossier/components/MyCustomComponent.vue:105:6\n at toParseError (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parse-error.ts:95:45)\n at raise (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/tokenizer/index.ts:1497:19)\n at checkRedeclarationInScope (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/util/scope.ts:155:19)\n at declareName (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/util/scope.ts:109:12)\n at declareName (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/plugins/typescript/scope.ts:89:11)\n at declareNameFromIdentifier (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:739:16)\n at checkIdentifier (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:734:12)\n at checkLVal (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/lval.ts:636:12)\n at parseVarId (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/parser/statement.ts:1605:10)\n at parseVarId (.../node_modules/.pnpm/@babel+parser@7.26.5/node_modules/@babel/parser/src/plugins/typescript/index.ts:3463:13)\n```\n\nIs there another way to import theses types ?",[2928,2929],{"name":2868,"color":2869},{"name":2871,"color":2872},3124,"closed","how to import type xxxProps / xxxEmits / xxxSlots","2025-01-27T12:26:22Z","https://github.com/nuxt/ui/issues/3124",0.65191567,{"description":2937,"labels":2938,"number":2942,"owner":2877,"repository":2898,"state":2931,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### 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_",[2939],{"name":2940,"color":2941},"documentation","9DE2BA",1457,"SSR Issues with Coudflare Pages (SOLVED)","2023-12-27T17:11:13Z","https://github.com/nuxt/nuxt.com/issues/1457",0.66384894,{"description":2948,"labels":2949,"number":2951,"owner":2877,"repository":2878,"state":2931,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.9.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.8.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-u8opw1?file=app.vue\r\n\r\n### Description\r\n\r\nOverflow problem, the select menu is open inside the table\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2950],{"name":2868,"color":2869},2255,"Overflow probem with SelectMenu inside a table","2024-09-26T10:21:43Z","https://github.com/nuxt/ui/issues/2255",0.66464764,{"description":2957,"labels":2958,"number":2960,"owner":2877,"repository":2878,"state":2931,"title":2961,"updated_at":2962,"url":2963,"score":2964},"# 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",[2959],{"name":2868,"color":2869},2238,"UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.6765607,{"description":2966,"labels":2967,"number":2969,"owner":2877,"repository":2878,"state":2931,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxtjs/device@3.2.4, @vueuse/nuxt@12.0.0, @nuxt/image@1.8.1, @nuxt/eslint@0.7.2, @nuxt/test-utils/module@3.15.1, @nuxt/ui@2.19.2, @pinia/nuxt@0.8.0, pinia-plugin-persistedstate/nuxt\n- Build Modules: -\n\n### Version\n\n2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-jqjcwwoz\n\n### Description\n\nThe variant for `outline` and `subtle` doesn't have the corresponding ring color class when using any colors except `primary` and `red`.\n\nThe ring color stays blue-ish and i can see that the css class is missing.\n\nThis bug exist for both dark and light modes.\n\n\n\n### Additional context\n\nThis bug only occurs when using the `UBadge` inside a component. It also occurs only when passing the badge colors through the component props.\n\n\n\n### Logs\n\n```shell-script\n\n```",[2968],{"name":2868,"color":2869},2861,"UBadge: Wrong ring color in outline and subtle variants","2025-01-13T16:34:19Z","https://github.com/nuxt/ui/issues/2861",0.6789791,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZRIzOCtd5QkRmZkdPDyVz76Yxi98GvJFu2hR0Jm5Uz4":-1},"/nuxt/ui/3148"]