\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`",[2034],{"name":2024,"color":2025},2202,"closed","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.6755453,{"description":2042,"labels":2043,"number":2044,"owner":1985,"repository":2045,"state":2036,"title":2046,"updated_at":2047,"url":2048,"score":2049},"- [x] Colors & Fonts\n- [x] Landing page (Home)\n- [x] Showcase categories/hero\n- [x] Modules categories/hero\n- [x] Blog categories/hero\n- [x] Support hero/content",[],1305,"nuxt.com","Marketing Update","2023-07-04T10:00:31Z","https://github.com/nuxt/nuxt.com/issues/1305",0.6790001,{"description":2051,"labels":2052,"number":2058,"owner":1985,"repository":1986,"state":2036,"title":2059,"updated_at":2060,"url":2061,"score":2062},"### 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```",[2053,2056,2057],{"name":2054,"color":2055},"bug","d73a4a",{"name":1999,"color":2000},{"name":2002,"color":2003},3821,"Table is not reactive","2025-04-08T10:36:33Z","https://github.com/nuxt/ui/issues/3821",0.69358975,{"description":2064,"labels":2065,"number":2069,"owner":1985,"repository":1986,"state":2036,"title":2070,"updated_at":2071,"url":2072,"score":2073},"### 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```",[2066,2067,2068],{"name":2054,"color":2055},{"name":1999,"color":2000},{"name":2002,"color":2003},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.69715524,{"description":2075,"labels":2076,"number":2079,"owner":1985,"repository":1986,"state":2036,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### 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```",[2077,2078],{"name":2054,"color":2055},{"name":1999,"color":2000},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.72623307,{"description":2085,"labels":2086,"number":2089,"owner":1985,"repository":1986,"state":2036,"title":2090,"updated_at":2091,"url":2092,"score":2093},"### 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```",[2087,2088],{"name":2054,"color":2055},{"name":1999,"color":2000},2977,"The placeholder in UInput within UModal does not display","2025-03-03T09:06:21Z","https://github.com/nuxt/ui/issues/2977",0.7331774,["Reactive",2095],{},["Set"],["ShallowReactive",2098],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"4R09S-Pa99nzbUxFyLJDVhMyeCPEkGlMHZHaUBwoyik":-1},"/nuxt/ui/3704"]