\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.7300935,{"description":2018,"labels":2019,"number":2028,"owner":1991,"repository":1992,"state":2029,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Description\r\n\r\nFor elements like UAvatar that use images, it would be a good idea to integrate with Nuxt Image for those who have it installed to benefit from image optimizations like setting image format, applying modifiers, and all the other features that Nuxt Image offers.\r\n\r\n### Additional context\r\n\r\n_No response_",[2020,2023,2025],{"name":2021,"color":2022},"enhancement","a2eeef",{"name":2024,"color":1989},"wontfix-v2",{"name":2026,"color":2027},"v3","49DCB8",2078,"closed","[Avatar] Integration with Nuxt Image for built in image optimization","2024-11-07T12:02:04Z","https://github.com/nuxt/ui/issues/2078",0.67230207,{"description":2035,"labels":2036,"number":2040,"owner":1991,"repository":2002,"state":2029,"title":2041,"updated_at":2042,"url":2043,"score":2044},"### 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_",[2037],{"name":2038,"color":2039},"documentation","9DE2BA",1457,"SSR Issues with Coudflare Pages (SOLVED)","2023-12-27T17:11:13Z","https://github.com/nuxt/nuxt.com/issues/1457",0.6884103,{"description":2046,"labels":2047,"number":2055,"owner":1991,"repository":1992,"state":2029,"title":2056,"updated_at":2057,"url":2058,"score":2059},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.10.0\r\n- Builder: -\r\n- User Config: extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.1, @nuxt/fonts@0.7.2, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.1\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-9zrfga?file=app.vue\r\n\n\n### Description\n\nHi everyone.\r\nI truly appreciate your work. Many many thanks!!\r\nI'm starting a new project, my first project with \"nuxt\" and \"nuxt ui+pro\" (I liked the dashboard theme).\r\nMaybe I'm doing something wrong, in this case please help me.\r\nOtherwise I think I found an error in the theme of the UDashboardModal component.\r\n\r\nThe background of UDashboardModal does not follow the length of its content in \"mobile view\" (small devide, in this example 400x616).\r\n\r\n\r\n\r\nIn desktop viewport work as expected.\r\n\r\n\r\n\r\nWhat's do you think?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2048,2049,2052],{"name":1985,"color":1986},{"name":2050,"color":2051},"duplicate","cfd3d7",{"name":2053,"color":2054},"pro","5BD3CB",2220,"Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.6947555,{"description":2061,"labels":2062,"number":2065,"owner":1991,"repository":1992,"state":2029,"title":2066,"updated_at":2067,"url":2068,"score":2069},"### 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 ?",[2063,2064],{"name":1985,"color":1986},{"name":2026,"color":2027},3124,"how to import type xxxProps / xxxEmits / xxxSlots","2025-01-27T12:26:22Z","https://github.com/nuxt/ui/issues/3124",0.69717354,{"description":2071,"labels":2072,"number":2078,"owner":1991,"repository":1992,"state":2029,"title":2079,"updated_at":2080,"url":2081,"score":2082},"### 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.)",[2073,2074,2075],{"name":1985,"color":1986},{"name":2053,"color":2054},{"name":2076,"color":2077},"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.70760703,{"description":2084,"labels":2085,"number":2088,"owner":1991,"repository":1992,"state":2029,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### 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_",[2086,2087],{"name":2021,"color":2022},{"name":2026,"color":2027},2941,"[Design Tokens] add `opacity` modifiers","2025-02-07T15:47:50Z","https://github.com/nuxt/ui/issues/2941",0.7093524,{"description":2094,"labels":2095,"number":2097,"owner":1991,"repository":1992,"state":2029,"title":2098,"updated_at":2099,"url":2100,"score":2101},"# 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",[2096],{"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.71675366,["Reactive",2103],{},["Set"],["ShallowReactive",2106],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"O9XYlBGZddgleTw-mLKC8GS_VjgkmUEeceIKWLPxv1U":-1},"/nuxt/ui/3713"]