\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`",[2039],{"name":1985,"color":1986},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.75403,{"description":2046,"labels":2047,"number":2051,"owner":1991,"repository":2052,"state":2031,"title":2053,"updated_at":2054,"url":2055,"score":2056},"",[2048],{"name":2049,"color":2050},"bug","ff281a",1140,"nuxt.com","[Cards]: external links icon missing","2023-02-15T12:31:11Z","https://github.com/nuxt/nuxt.com/issues/1140",0.7544542,{"description":2058,"labels":2059,"number":2064,"owner":1991,"repository":1992,"state":2031,"title":2065,"updated_at":2066,"url":2067,"score":2068},"### Environment\n\nOS Linux\nnode v22.14\n\nnuxt v3.16.1\nnuxt ui v3.0.1\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.1\n\n### Reproduction\n\n\nhttps://codesandbox.io/p/devbox/peaceful-newton-7rrnpq?workspaceId=ws_BXPvVpCjQQH8Dp7pSA8M1q\n\n### Description\n\nA tooltip with, as content, an Avatar without src prop did not display the popup.\n\n ```\n\u003CUTooltip arrow text=\"title\">\n \u003CUAvatar text=\"Avatar\" size=\"3xl\" />\n \u003C/UTooltip>\n```\nThe popup with 'title' is never displayed\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2060,2062,2063],{"name":2049,"color":2061},"d73a4a",{"name":1988,"color":1989},{"name":2018,"color":2019},3699,"tooltip with avatar without src do not work","2025-03-28T09:27:27Z","https://github.com/nuxt/ui/issues/3699",0.75530916,{"description":2070,"labels":2071,"number":2074,"owner":1991,"repository":1992,"state":2031,"title":2075,"updated_at":2076,"url":2077,"score":2078},"### Description\n\nHow do I override e.g. `ui.modal.variants.fullscreen.false` styles for just one element?",[2072,2073],{"name":1985,"color":1986},{"name":1988,"color":1989},3704,"How to override variants for single components","2025-03-28T08:52:19Z","https://github.com/nuxt/ui/issues/3704",0.7565121,{"description":2080,"labels":2081,"number":2084,"owner":1991,"repository":1992,"state":2031,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nI would like the `useModal` composable to supports opening multiple modals.\n\n### Additional context\n\n_No response_",[2082,2083],{"name":2014,"color":2015},{"name":1988,"color":1989},2799,"[v3][UModal] `useModal` supports multiple modals at the same time","2025-02-27T16:32:50Z","https://github.com/nuxt/ui/issues/2799",0.7605815,{"description":2090,"labels":2091,"number":2095,"owner":1991,"repository":1992,"state":2031,"title":2096,"updated_at":2097,"url":2098,"score":2099},"### Description\n\nWhile most components support the theming props (globally via app.config and as local props) the UForm component doesn't. For consistency it'd be great if this could be added to the Form component too.\n\n### Additional context\n\n_No response_",[2092,2093,2094],{"name":2014,"color":2015},{"name":1988,"color":1989},{"name":2018,"color":2019},3752,"Form Component: Support theming props","2025-04-10T19:55:39Z","https://github.com/nuxt/ui/issues/3752",0.7639161,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"CWf8IgAWZAd6MGvARKy_LCodqUMmiqApNyunsq99znA":-1},"/nuxt/ui/2530"]