\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`",[2937],{"name":2926,"color":2927},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.71651405,{"description":2944,"labels":2945,"number":2953,"owner":2903,"repository":2917,"state":2905,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.0.0, @nuxt/eslint@1.2.0, nuxt-echarts@0.2.6\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst data = ref([\n {\n id: '0',\n },\n])\n\nconst add = () => {\n data.value.push({\n id: `${data.value.length}`,\n })\n console.log(data.value)\n}\n\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUTable :data=\"data\" class=\"flex-1\"/>\n \u003CUButton\n @click=\"add\">Add\n \u003C/UButton>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter click the \"add\" button, it will push a new data into dataRef, but the Table will not rendering new data\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2946,2949,2952],{"name":2947,"color":2948},"bug","d73a4a",{"name":2950,"color":2951},"duplicate","cfd3d7",{"name":2914,"color":2915},3597,"UTable data updated but UI will not update","2025-03-24T02:11:33Z","https://github.com/nuxt/ui/issues/3597",0.71919745,{"description":2959,"labels":2960,"number":2963,"owner":2903,"repository":2917,"state":2905,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### 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```",[2961,2962],{"name":2947,"color":2948},{"name":2914,"color":2915},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.7192767,{"description":2969,"labels":2970,"number":2974,"owner":2903,"repository":2904,"state":2905,"title":2975,"updated_at":2976,"url":2977,"score":2978},"- [x] Move Revue contacts\n- [x] Subscribe form to contact Sendgrid API",[2971],{"name":2972,"color":2973},"enhancement","1ad6ff",1104,"Migrate newsletter to SendGrid","2023-01-10T15:04:54Z","https://github.com/nuxt/nuxt.com/issues/1104",0.7210289,{"description":2980,"labels":2981,"number":2990,"owner":2903,"repository":2917,"state":2905,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### 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```",[2982,2983,2986,2987],{"name":2947,"color":2948},{"name":2984,"color":2985},"needs reproduction","CB47CF",{"name":2914,"color":2915},{"name":2988,"color":2989},"triage","ffffff",3753,"unplugin components.d.ts not working","2025-03-31T13:04:11Z","https://github.com/nuxt/ui/issues/3753",0.72154933,{"description":2996,"labels":2997,"number":3001,"owner":2903,"repository":2917,"state":2905,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Environment\n\n \"@nuxt/ui\": \"^3.0.0-alpha.12\",\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.12\n\n### Reproduction\n\nself\n\n### Description\n\n```\n\u003Ctemplate> \n \u003CUSelectMenu\n v-model=\"form.regionId\"\n labelKey=\"name\"\n valueKey=\"iso\"\n :items=\"regions\"\n placeholder=\"Ej: Buenos Aires\"\n class=\"w-full\"\n :filter-fields=\"['name']\"\n />\n \u003CUSelectMenu\n v-model=\"form.cityId\"\n labelKey=\"name\"\n valueKey=\"id\"\n :items=\"cities\"\n placeholder=\"Ej: CABA\"\n class=\"w-full\"\n :filter-fields=\"['name']\"\n v-model:search-term=\"searchTerm\"\n :loading=\"loadingCities\"\n />\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n regions: RegionModel[]\n}>();\nconst { regions } = toRefs(props);\n\n// Formulario reactivo\nconst form = reactive({\n name: '',\n address: '',\n regionId: '',\n cityId: '',\n website: '',\n phone: '',\n email: ''\n});\n\nconst loadingCities = ref\u003Cboolean>(false)\nconst getCities = async (regionId: string) => {\n try {\n loadingCities.value = true\n const response = await placeRepo.getCityByRegionId(regionId, searchTerm.value)\n cities.value = response\n } catch (error) {\n console.error(error)\n } finally {\n loadingCities.value = false\n }\n}\n\n\u003C/script>\n```\n\n### Additional context\n\nWhen you open select B and then open select A, select A flashes, B closes and A does not open.\n\n\n\n### Logs\n\n```shell-script\n\n```",[2998,2999,3000],{"name":2947,"color":2948},{"name":2984,"color":2985},{"name":2914,"color":2915},3312,"USelectmenu flickers when changing select and does not open 3.0.0-alpha.12 SelectMenu","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3312",0.72306055,{"description":3007,"labels":3008,"number":3012,"owner":2903,"repository":2917,"state":2905,"title":3013,"updated_at":3014,"url":3015,"score":3016},"### 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```",[3009,3010,3011],{"name":2947,"color":2948},{"name":2914,"color":2915},{"name":2988,"color":2989},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.7234565,["Reactive",3018],{},["Set"],["ShallowReactive",3021],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOTAtbaJNE01f7TuAYRd1BoDLk_6MrfN88ekh9ZcdD9w":-1},"/nuxt/ui/3821"]