\r\n\r\n \u003CUModal v-model=\"isOpen\">\r\n \u003C!-- Display the command palette -->\r\n \u003CUCommandPalette\r\n @select=\"onSelectKeyword\"\r\n v-model=\"selected\"\r\n multiple\r\n nullable\r\n :groups=\"[{ key: 'items', commands: items }]\"\r\n />\r\n\r\n \u003C!-- Input and button to add a new keyword -->\r\n \u003Cdiv class=\"mt-4\">\r\n \u003CUInput\r\n v-model=\"newKeyword\"\r\n placeholder=\"Enter a new keyword\"\r\n class=\"w-full\"\r\n />\r\n \u003CUButton\r\n @click=\"addKeyword\"\r\n label=\"Add Keyword\"\r\n color=\"green\"\r\n class=\"mt-2\"\r\n />\r\n \u003C/div>\r\n\r\n \u003C!-- Display the selected keyword -->\r\n \u003Cdiv v-if=\"selectedKeyword\" class=\"mt-4 text-lg\">\r\n Selected Keyword: \u003Cspan class=\"font-bold\">{{ selectedKeyword }}\u003C/span>\r\n \u003C/div>\r\n \u003C/UModal>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst props = defineProps({\r\n items: {\r\n type: Array,\r\n required: true,\r\n },\r\n});\r\nconst isOpen = ref(false)\r\nconst selected = ref([])\r\n// Log to check if items are being passed correctly\r\nconsole.log('Command Items in Child Component:', props.items);\r\nconst emit = defineEmits(['add-new-keyword']);\r\nconst selectedKeyword = ref([]);\r\nconst newKeyword = ref('');\r\n\r\n// Function to handle keyword selection\r\nconst onSelectKeyword = (item) => {\r\n const index = selectedKeyword.value.findIndex(i => i === item.value);\r\n\r\n if (index === -1) {\r\n // Add item if not already selected\r\n selectedKeyword.value.push(item.value);\r\n } else {\r\n // Remove item if already selected (deselect)\r\n selectedKeyword.value.splice(index, 1);\r\n }\r\n};\r\n\r\n// Function to add a new keyword\r\nconst addKeyword = () => {\r\n const trimmedKeyword = newKeyword.value.trim().toLowerCase();\r\n\r\n // Emit the new keyword to the parent component if it's valid\r\n if (trimmedKeyword && !props.items.includes(trimmedKeyword)) {\r\n emit('add-new-keyword', trimmedKeyword); // Emit the event to the parent\r\n newKeyword.value = ''; // Reset the input field\r\n } else {\r\n alert('Keyword is either empty or already exists.');\r\n }\r\n};\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle scoped>\r\n.UCommandPalette {\r\n border: 1px solid red;\r\n background-color: lightyellow;\r\n}\r\n/* Optional styling for better UI */\r\n.mt-4 {\r\n margin-top: 1rem;\r\n}\r\n.mt-2 {\r\n margin-top: 0.5rem;\r\n}\r\n.w-full {\r\n width: 100%;\r\n}\r\n\u003C/style>\r\n`",[2911],{"name":2888,"color":2889},2202,"when using the UCommandPalette I click on one item and all get selected","2024-09-30T12:46:35Z","https://github.com/nuxt/ui/issues/2202",0.67833525,{"description":2918,"labels":2919,"number":2925,"owner":2877,"repository":2878,"state":2903,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Environment\n\nOperating System: Windows_NT\nNode Version: v22\nNuxt Version: 3.16.1\nCLI Version: 3.23.1\nNitro Version: 2.11.7\nPackage Manager: npm@10.8.2\nBuilder: -\nUser Config: devtools, modules, css, future, compatibilityDate\nRuntime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.2.0, @nuxt/content@3.4.0, @vueuse/nuxt@13.0.0, @nuxt/image@1.10.0\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.16\n\n### Reproduction\n\n1. create a reaactive items array which will be used as data \n items = ref([\"Backlog\", \"Todo\", \"In Progress\" ]);\n2. create a Utable in template\n3. assing items array as data\n \u003CUTable :data= \"items\"/>\n4. add items to array \n \u003Ctempalte>\n \u003CUButton label=\"add\" @click=\"addItem\" />\n\n\n \u003CScript setup>\n const addItem = () => { items.value.push(\"Done\")}\n5. check table rows\n\n\nActual Result\nnew item is added to array but not in table until nex hot reload\n\nExpected result\nnew item should be added to table rows, as NuxUI V2\n\n\nnote: same issue adding colums props\n\n### Description\n\nUTable is not showing new items added to reactive array used for data until nex hot module reload\n\n\nhttps://codesandbox.io/p/devbox/fancy-hill-5fr65h?workspaceId=ws_Xcg6XEDPVvQDQh4Bj2yVGA\n\n\n### Additional context\n\n\u003Ctemplate>\n \u003CUContainer>\n \u003CUButton label=\"add\" @click=\"addItem\" />\n \u003CUTable :data= \"items\"/>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\"Backlog\", \"Todo\", \"In Progress\" ]);\n\nconst addItem = () => {\n // pushing done to items array is no updated in table rows\n items.value.push(\"Done\")\n console.log(items.value)\n\n // Work arrond.\n // create a new arry reference an then assing it to items\n // this way new row is being added to table\n // const arr = items.value\n // items.value = [...arr]\n }\n\u003C/script>\n\n### Logs\n\n```shell-script\n\n```",[2920,2923,2924],{"name":2921,"color":2922},"bug","d73a4a",{"name":2871,"color":2872},{"name":2874,"color":2875},3732,"[Table] new item added to array is not rendered in table","2025-03-30T08:41:27Z","https://github.com/nuxt/ui/issues/3732",0.7064067,{"description":2931,"labels":2932,"number":2936,"owner":2877,"repository":2878,"state":2903,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: app, compatibilityDate, devtools, modules, css, runtimeConfig, vuefire\n- Runtime Modules: @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/stupefied-lucy-jmlxr4\n\n### Description\n\nTable component is not reactive. Here's a simple example where items are added and removed. The 'num items' is updating in the view. However, the table does not remove nor add items.\n\n``` vue\n\u003Ctemplate>\n {{ data.length }} num items\n \u003CUTable :data=\"data\" />\n \u003CUButton label=\"Delete\" @click=\"deleteItem\" />\n \u003CUButton label=\"Add\" @click=\"addItem\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction deleteItem() {\n const randomIndex = Math.floor(Math.random() * data.value.length);\n data.value.splice(randomIndex, 1);\n}\n\nfunction addItem() {\n data.value.push({\n id: Math.floor(Math.random() * 10000).toString(),\n });\n}\n\nconst data = ref([\n {\n id: \"4600\",\n },\n {\n id: \"4599\",\n },\n {\n id: \"4598\",\n },\n {\n id: \"4597\",\n },\n {\n id: \"4596\",\n },\n]);\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2933,2934,2935],{"name":2921,"color":2922},{"name":2871,"color":2872},{"name":2874,"color":2875},3821,"Table is not reactive","2025-04-08T10:36:33Z","https://github.com/nuxt/ui/issues/3821",0.7114783,{"description":2942,"labels":2943,"number":2950,"owner":2877,"repository":2878,"state":2903,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.19.0\n- Nuxt Version: -\n- CLI Version: 3.23.1\n- Nitro Version: -\n- Package Manager: pnpm@10.7.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nfreshly pulled official starter template using\n```bash\nnpx giget@latest gh:nuxt-ui-pro/starter-vue . --force\n```\ncleaned components.d.ts / deleted it\nit has been recreated: but missing ALL nuxtui components:\n\n```js\n/* eslint-disable */\n// @ts-nocheck\n// Generated by unplugin-vue-components\n// Read more: https://github.com/vuejs/core/pull/3399\n// biome-ignore lint: disable\nexport {}\n\n/* prettier-ignore */\ndeclare module 'vue' {\n export interface GlobalComponents {\n LogoPro: typeof import('./src/components/LogoPro.vue')['default']\n RouterLink: typeof import('vue-router')['RouterLink']\n RouterView: typeof import('vue-router')['RouterView']\n }\n}\n```\n\n### Description\n\nThe components.d.ts file generated by `unplugin-vue-components` is incomplete.\n\n### Additional context\n\n```js\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport uiPro from '@nuxt/ui-pro/vite'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n vue(),\n uiPro({\n ui: {\n colors: {\n primary: 'green',\n neutral: 'slate'\n }\n },\n prefix: 'U'\n })\n ]\n})\n```\n\n### Logs\n\n```shell-script\n\n```",[2944,2945,2948,2949],{"name":2921,"color":2922},{"name":2946,"color":2947},"needs reproduction","CB47CF",{"name":2871,"color":2872},{"name":2874,"color":2875},3753,"unplugin components.d.ts not working","2025-03-31T13:04:11Z","https://github.com/nuxt/ui/issues/3753",0.7154719,{"description":2956,"labels":2957,"number":2960,"owner":2877,"repository":2878,"state":2903,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nRepo: https://github.com/Cyanhall/nuxt-ui-v3-demo/tree/main/demo3\n\nCode: https://github.com/Cyanhall/nuxt-ui-v3-demo/blob/main/demo3/app/components/SearchPalette.vue#L46\n\n### Description\n\nThe placeholder in UInput within UModal does not display.\n\n```vue\n\u003CUInput\n class=\"w-full mb-4\"\n size=\"sm\"\n icon=\"i-lucide-search\"\n placeholder=\"Search...\"\n>\n \u003Ctemplate #trailing>\n \u003CUKbd value=\"shift\" />\n \u003CUKbd value=\"G\" />\n \u003C/template>\n\u003C/UInput>\n```\n\u003Cimg width=\"496\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/be2e8457-b3ac-4b70-838b-2b2b7399c091\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2958,2959],{"name":2921,"color":2922},{"name":2871,"color":2872},2977,"The placeholder in UInput within UModal does not display","2025-03-03T09:06:21Z","https://github.com/nuxt/ui/issues/2977",0.7179224,{"description":2966,"labels":2967,"number":2969,"owner":2877,"repository":2878,"state":2903,"title":2970,"updated_at":2971,"url":2972,"score":2973},"Currently, portal components (modals, popovers, etc.) are directly attached to the root of the body. It would be beneficial to allow specifying their destination within the configuration .This would provide greater control over rendering order and potential styling conflicts, especially in complex applications with open shadow Dom. \n\nFor instance, a developer might want to render a modal within a specific container to inherit styles or avoid interference with other elements on the page (I currently using Nuxt ui as a web component withing WordPress). \n\nThe proposed configuration option could be a CSS selector string, allowing for flexible targeting of any existing element in the DOM defaulting to 'body'. ",[2968],{"name":2871,"color":2872},3687,"Allow specify portal destination for all portaled components","2025-04-21T15:42:56Z","https://github.com/nuxt/ui/issues/3687",0.71946704,{"description":2975,"labels":2976,"number":2979,"owner":2877,"repository":2878,"state":2903,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.1, @nuxtjs/seo@2.0.0-rc.23\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.8\",\n\n### Reproduction\n\n\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto\">\n \u003Cu-breadcrumb :items=\"items \" />\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2977,2978],{"name":2921,"color":2922},{"name":2871,"color":2872},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.7272637,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4R09S-Pa99nzbUxFyLJDVhMyeCPEkGlMHZHaUBwoyik":-1},"/nuxt/ui/3704"]