We should not add a div on top for popper but instead pass the ref to PopoverPanel / MenuItems.

However, we need the latest version of headlessui to make this work.

$ npm i npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@nuxthq/[email protected]', npm WARN EBADENGINE required: { node: '>=18 <19' }, npm WARN EBADENGINE current: { node: 'v20.1.0', npm: '8.19.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '[email protected]', npm WARN EBADENGINE required: { node: '^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0' }, npm WARN EBADENGINE current: { node: 'v20.1.0', npm: '8.19.1' } npm WARN EBADENGINE } npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs

<UButtonGroup>
  <UButton label="One" color="white" />
  <UButton label="Two" color="white" />
  <UButton label="Three" color="white" />
</UButtonGroup>

Putting these classes somewhere in a file, so tailwind can pick them up, fixes the problem:

• rounded-l-md
• rounded-r-md
• -ml-px

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@headlessui/vue, @iconify-json/heroicons, @iconify-json/simple-icons, @nuxt/eslint-config, @nuxt/module-builder, @nuxt/ui-pro, @nuxtjs/color-mode, @tailwindcss/typography, release-it, vitest, vue-tsc, zod)
• chore(deps): update devdependency eslint to v9

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency fuse.js to v7
• chore(deps): update node.js to v20

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

(First, I'd like to tell I'm deeply grateful for releasing this UI lib in open source, this makes the whole Nuxt ecosystem stronger. THANKS!)

After reading the documentation, I still have some general questions in mind. Some of them may seem naive or out of scope, but I'm thinking they may help other people like me so I'll give it a try.

1. Input validation
   I know this is a UI lib and validation is another topic. However I'm curious what solution is used by the Volta team. Maybe there are solutions that are better suited than others?
   Besides, other UI libs like PrimeVue shows some examples of form validation using their components.
   Is there any chance that the Nuxt Labs team release its own validation system, to have an even more integrated solution?

2. Missing components and contributions
   What if I find a missing component? Can I extend nuxtlab UI or should I just make a create an (unrelated) component in my project?
   If I think this component could be useful to others, should I make a PR?
   If I don't want or know how to develop that component by myself, should I ask its development in a feature request issue?

Thanks!

First of all, really loving what you've created so far. That's definitely going to get used in my next projects!

It would be so awesome if you could simply pass an items prop to the Context Menu as well, just like you can with the Dropdown Component for example. Maybe even with nested groups, so that you don't have to do all this kind of repeating work on yourself.

It would be great to consider datatable implementation, as I have been observing Vue/Nuxt community for a while and there is a a lot of requests flying around for good datatable component. Support for filtering, server-side data etc. would be extremely good IMO.

There are some alternative to look at but I noticed PrimeVue being recommended the most
https://primevue.org/datatable/

Perhaps something for backlog if you see fit.

It would be great to have a built in chat UI, to handle openAI like streaming responses.

This could help folks build their own support bots, without relying on third part scripts and control the end to end experience.

Is your feature request related to a problem? Please describe.

I am frustrated when the toast slides out from bottom right of the screen. the first time I interreacted with the example I had to look around the screen to see where it was.

Describe the solution you'd like

Normally all the toasts that I have experience with are ones the slide out from the top-right of the screen. I love the toast component but I would love the flexibility to decide which corner of the page it is placed.

Describe alternatives you've considered

Several third party libraries and I haven't found a good clean solution like yours.

• clipboard.client.ts
• toast.client.ts

It would be nice to be able to use these components as MarkDown Components (MDC) in Nuxt Content. Are there any plans for that?

Could it be as easy as moving them to a components/content folder?

Something similar to:

• https://primevue.org/slider/
• https://daisyui.com/components/range/

Dropdown only works with mouse click, not with enter key.

Is your feature request related to a problem? Please describe.

Yes, the feature request is related to the problem of querying API results and needing to display a loading state while the results are being fetched.

Describe the solution you'd like

The solution I would like is for the CommandPalette component to have a loading state that can be displayed while the API results are being fetched. This would help improve the user experience by letting them know that the query is being processed and that they should wait for the results.

Describe alternatives you've considered

One alternative that could be considered is to not have a loading state and just let the user wait for the results without any indication of progress. However, this could lead to confusion and frustration for the user, especially if the query takes a long time.

Additional context

Results should be sorted by score before groups

So this is what i have in my app.config

export default defineAppConfig({
    ui: {
        primary: "emerald",
        gray: "stone",
    },
});

but it is picking up the darkest shade of stone in dark mode. how do i change the dark mode variant?

A button without label of size xxs, lg or xl does not have a correct height:

I guess we didn't catch it yet because all lg/xl buttons on Volta have a label.

Is your feature request related to a problem? Please describe.

Popovers and tooltips should always be rendered at the top of every other element on the page. But since they're rendered at the same place in the DOM as their trigger element, they will render behind other parts of layout with higher z-index than the popover's ancestors in the DOM tree.

Describe the solution you'd like

As an example, Headlessui-Float (a library that combines HeadlessUI with FloatingUI - a new version of Popper) provides in its components a portal prop which renders the popover content at the end of the body, outside of the z-index scope. This permanently solves the problem.

[nuxt] [request error] [unhandled] [500] Cannot convert undefined or null to object 01:36:53
at Function.entries ()
at ReactiveEffect.fn (./node_modules/@nuxthq/ui/dist/runtime/plugins/colors.mjs:15:10)
at ReactiveEffect.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25)
at get value [as value] (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:1163:39)
at innerHTML (./node_modules/@nuxthq/ui/dist/runtime/plugins/colors.mjs:21:29)
at resolveUnref (./node_modules/@unhead/vue/dist/shared/vue.505b826e.mjs:6:36)
at resolveUnrefHeadInput (./node_modules/@unhead/vue/dist/shared/vue.505b826e.mjs:11:16)
at ./node_modules/@unhead/vue/dist/shared/vue.505b826e.mjs:21:20
at Array.map ()

• Operating System: Mac OS Ventura 13.1
• Nuxt version: 3.0.0
• Nitro version: 1.0.0
• Package Manager: Yarn
• Builder: Vite
• Runtime modules: ['@pinia/nuxt',
  '@pinia-plugin-persistedstate/nuxt',
  '@nuxtjs/i18n',
  'nuxt-appwrite',
  '@nuxtjs/strapi',
  '@nuxthq/ui'
  ]

Badge slot uses ml-auto but should have a guaranteed minimum spacing with its left sibling

`
ERROR Failed to resolve import "#tailwind-config/theme/colors" from "node_modules@nuxthq\ui\dist\runtime\plugins\colors.mjs?v=b331f5e1". Does the file exist? 7:31:34 AM

[7:31:35 AM] ERROR [postcss] C:/Users/Vad/OneDrive/Documents/GitHub/project-juniper/App/node_modules/@nuxthq/ui/dist/runtime/ui.css:6:3: The outline-primary-500 class does not exist. If outline-primary-500 is a custom class, make sure it is defined within a @layer directive.

ℹ Vite client warmed up in 3671ms 7:31:38 AM
✔ Nitro built in 1737 ms `

• Operating System: Windows_NT
• Node Version: v20.1.0
• Nuxt Version: 3.4.3
• Nitro Version: 2.4.0
• Package Manager: [email protected]
• Builder: vite
• User Config: typescript, css, app, modules, bugsnag, googleFonts, routeRules, runtimeConfig, nitro, devtools, image, vite
• Runtime Modules: @storyblok/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected], @formkit/[email protected], @nuxthq/[email protected]
• Build Modules: -

Just installed it. In my package.json
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest",

and nuxt.config
modules: [ [ "@storyblok/nuxt", { accessToken: process.env.STORYBLOK_API_TOKEN, devtools: true, apiOptions: { cache: { type: "memory" }, region: "us", // region code here }, }, ], "@nuxtjs/tailwindcss", "@nuxt/image-edge", "@nuxt/devtools", "@nuxtjs/supabase", "@nuxtjs/google-fonts", "nuxt-vitest", "nuxt-bugsnag", "@formkit/nuxt", "@nuxthq/ui", // "nuxt-security" // only for SSG apps. we are doing static generation with nitro ],

app.config
// app.config.ts export default defineAppConfig({ ui: { primary: "emerald", gray: "stone", }, });

Is your feature request related to a problem? Please describe.

Offcavas components are useful when creating collapsable mobile menus, ex:

https://vuetifyjs.com/en/components/navigation-drawers/
https://getbootstrap.com/docs/5.3/components/offcanvas

[Btw thanks for your work this is an useful library to use with Nuxt projects:)]

`$ npm i --dev @iconify/json-mdi --dev @iconify/json-uil
npm WARN config dev Please use --include=dev instead.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@iconify%2fjson-mdi - Not found
npm ERR! 404
npm ERR! 404 '@iconify/json-mdi@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Vad\AppData\Local\npm-cache_logs\2023-05-16T13_42_24_628Z-debug-0.log`

Something similar to https://primevue.org/steps