\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_",[2010,2011],{"name":1985,"color":1986},{"name":1988,"color":1989},2106,"Need help: `DatePicker` set value not work","2024-11-11T16:09:38Z","https://github.com/nuxt/ui/issues/2106",0.70630026,{"description":2018,"labels":2019,"number":2027,"owner":1991,"repository":1992,"state":1993,"title":2028,"updated_at":2029,"url":2030,"score":2031},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI’m a junior developer, and I’ve been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the `variant` and `status-position` props to the `Progress` component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[2020,2023,2026],{"name":2021,"color":2022},"enhancement","a2eeef",{"name":2024,"color":2025},"v3","49DCB8",{"name":1988,"color":1989},3728,"[UProgress]: Add `variant` and `status-position` props","2025-03-29T14:31:22Z","https://github.com/nuxt/ui/issues/3728",0.7147781,{"description":2033,"labels":2034,"number":2038,"owner":1991,"repository":2002,"state":2039,"title":2040,"updated_at":2041,"url":2042,"score":2043},"### 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_",[2035],{"name":2036,"color":2037},"documentation","9DE2BA",1457,"closed","SSR Issues with Coudflare Pages (SOLVED)","2023-12-27T17:11:13Z","https://github.com/nuxt/nuxt.com/issues/1457",0.6037496,{"description":2045,"labels":2046,"number":2048,"owner":1991,"repository":1992,"state":2039,"title":2049,"updated_at":2050,"url":2051,"score":2052},"# 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",[2047],{"name":1985,"color":1986},2238,"UInput :value not working in v2.18.5","2024-09-25T08:36:59Z","https://github.com/nuxt/ui/issues/2238",0.6182384,{"description":2054,"labels":2055,"number":2063,"owner":1991,"repository":1992,"state":2039,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### Environment\n\nBuild error on vercel.app and on local windows 10, both on build and dev.\n\n### Version\n\nv1.4.4 @nuxt/ui-pro - Saas Template\n\n### Reproduction\n\nInstall a clean saas template.\nEnable typescript check in nuxt.config\n\nTry to deploy it on vercel.\n\nAnd try to copy/paste the url in a facebook post.\n\nHere is a 100% clean saas template, without typeCheck enabled:\nhttps://stackblitz.com/~/github.com/LutherApp/codespace-project\n\n(This is a copy of my [github repo](https://github.com/LutherApp/codespace-project))\n\n### Description\n\nOn build there will be \n## errors on the \"title\"-variable\nError-msg:\nObject literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'. (etc.)\n\n## \"authors\"- and \"title\"-variable in blog/index\n3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n\n## Fix\nI was adding this workaround for typecheck in three or four files:\n```\n// @ts-expect-error Object literal may only specify known properties, and 'title' does not exist in type 'OgImageOptions\u003C\"NuxtSeo\"> | OgImagePrebuilt'.\n```\n\nIn blog/index.vue a was adding this lines in the template in front of `UPageBody` (in blog/index.vue):\n``` \n\u003C!--\n @vue-expect-error The variable authors throws four errors;\n 3 x Type 'bla bla bla' is not assignable to type 'bla bla bla'.\n 1 x Property 'avatar' is optional in type 'bla bla bla' but required in type 'bla bla bla'.\n -->\n```\n\n## seo info from the page missing on facebook\nThere is still noe data about the page on facebook. \n(Other nuxt-content I have made earlier have this info when I copy/paste the url to facebook.)\n\n## Any questions to this issue?\nPlease add some questions to get more info about this issues. (This was written faster than normal.)",[2056,2057,2060],{"name":1985,"color":1986},{"name":2058,"color":2059},"pro","5BD3CB",{"name":2061,"color":2062},"upstream","78bddb",2415,"og:fields in my 100% clean saas template doesn't shows on facebook, and your own public saas template don't show the og:image","2024-10-22T09:40:37Z","https://github.com/nuxt/ui/issues/2415",0.649117,{"description":2069,"labels":2070,"number":2073,"owner":1991,"repository":1992,"state":2039,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### 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 ?",[2071,2072],{"name":1985,"color":1986},{"name":2024,"color":2025},3124,"how to import type xxxProps / xxxEmits / xxxSlots","2025-01-27T12:26:22Z","https://github.com/nuxt/ui/issues/3124",0.6527026,{"description":2079,"labels":2080,"number":2081,"owner":1991,"repository":2082,"state":2039,"title":2083,"updated_at":2084,"url":2085,"score":2086},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.5`\n- Package Manager: `bun@1.2.4`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `app`, `site`, `sitemap`, `robots`, `css`, `icon`, `image`, `ui`, `devtools`, `future`, `unhead`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0-beta.3`, `@pinia/nuxt@0.10.1`, `@nuxt/scripts@0.10.5`, `@nuxt/image@1.9.0`, `@nuxtjs/seo@2.2.0`\n- Build Modules: `-`\n\n### Reproduction\n\nnda\n\n### Describe the bug\n\nnr dev\n$ nuxt dev\nNuxt 3.16.0 with Nitro 2.11.5 nuxi 8:23:08 PM\n 8:23:08 PM\n ➜ Local: http://localhost:3003/\n ➜ Network: use --host to expose\n\n ➜ DevTools: press Shift + Option + D in the browser (v2.2.1) 8:23:10 PM\n\n\n✔ Nuxt Icon loaded local collection elfi with 70 icons 8:23:10 PM\nℹ Running with compatibility version 4 nuxt 8:23:10 PM\n✔ Vite client built in 190ms 8:23:11 PM\n✔ Vite server built in 528ms 8:23:12 PM\n\n[nitro 8:23:14 PM] ERROR Error: Could not load /\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs (imported by node_modules/nuxt-og-image/dist/runtime/server/og-image/satori/instances.js): ENOENT: no such file or directory, open '/\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs'\n\n\nundefined\n\n### Additional context\n\nUpgraded by \"nuxi upgrade -f\" from 3.15.4 and couldn't able to start properly with provided error.\nTried with unhead flag in nuxt.config - same error\n```\nunhead: {\n legacy: true,\n }\n```\n\n### Logs\n\n```shell-script\n\n```",[],414,"scripts","Nuxt 3.16.0 won't start properly nor dev nor build","2025-03-07T18:58:03Z","https://github.com/nuxt/scripts/issues/414",0.6815454,{"description":2088,"labels":2089,"number":2091,"owner":1991,"repository":1992,"state":2039,"title":2092,"updated_at":2093,"url":2094,"score":2095},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.14.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/Yves852/nuxt-ui-commandpalette-hover\n\n### Description\n\nSelecting an element on click is visually inconsistent. Visually all elements are selected, independantly of `v-model=\"selected\"`.\r\n\r\nWith props `multiple` visually will select all or unselect all, independantly of `v-model=\"selected\"`.\r\n\r\nOn keyboard, using \"enter\" to select update selected correctly but component jump to first element. Same visual problems as mouse.\r\n\r\nThe prop `nullable` doesn't seem to influence the bug.\r\n\r\nRelated to https://github.com/nuxt/ui/issues/2284\r\nCould be related to [1708](https://github.com/nuxt/ui/issues/1708)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2090],{"name":1985,"color":1986},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.6965686,["Reactive",2097],{},["Set"],["ShallowReactive",2100],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"0V_2yONINUZxOrLeiQxNyH-8DIX9_hH8SDMfTnNQjd4":-1},"/nuxt/ui/2941"]