Kal
Unable to trap focus within a Nuxt UI Drawer
A workaround:
A way to force focus capture when a drawer opens:
Simply adding
<UInput autofocus class="absolute opacity-0 pointer-events-none" /> to the top of my drawer content seems to force a focus capture into the drawer, when the drawer opens.
I'll do this for now, however to me there still seems to be a focus capture issue with regards to Nuxt UI drawers, either in nested views (ie not root layout) and/or being programmatically open via a button not inside <UDrawer></UDrawer>.9 replies
Unable to trap focus within a Nuxt UI Drawer
Well, additional info: In the successful test, the drawer and button occurred together. Meanwhile, in my apps drawers, I open/close my drawers programmatically using controls not kept within <UDrawer></UDrawer>. When clicking one of those remote drawer triggers", in that moment, that button receives fvocus, and tabbing continues from there.
This is the case, I wonder if the UDrawer component has any explicit logic to "steal" focus upon opening, or does it just let the browser handle it somehow.
I will keep scrutinizing.
9 replies
Unable to trap focus within a Nuxt UI Drawer
I've tried this however it's still not working.
In another experiment, I moved the entire drawer into the root of my layout (layouts/default.vue) and both focus-on-the-first-focusable-element and focus-trap seem to work.
I suspect having a drawing in a nested view is causing problems, perhaps because it occurs deeper in the DOM?
9 replies
UDrawer with inset doesn't fully animate off the edge of screen
I made a bug report here:
https://github.com/nuxt/ui/issues/3985
7 replies
UDrawer with inset doesn't fully animate off the edge of screen
Ok, I've made a successful workaround for my specific drawer:
.myDrawer[data-state='closed'] {
top: calc(var(--spacing) * 0);
}
Specifically on the closed state, forcing top to be 0.
This of course doesn't account for other drawers and directions.7 replies
Using nuxt3 content module
Just a picky thing.... the term "hot reload" is almost always explicitly used in the literal context of a developer's local environment when working on a website or web app.
Whereas your question is more about simple content updates (in a website or web app) without requiring rebuild & redeploy. I wouldn't use the term "hot reload" in this context, to save yourself confusion in future conversations. What is an alternative term to describe the idea, I don't know.
6 replies
Build size slow down website!
Your icons implementation may be just fine... I was speaking generally; I don't know your specifics.
In all kinds of web projects (not Vue) I've seen unwanted "stealth" resources (extra icons, fonts, images, etc) make it into bundles.
Doing build analysis is a good first step.
22 replies
How config the HighChart with nuxt ui-Theme?
Have either of you tried this?
https://www.highcharts.com/docs/chart-design-and-style/custom-themes-in-styled-mode
25 replies
Build size slow down website!
Seemingly harmless resources you use in any development project can easily inflate bundle size.
For instance, in any app, it's easy to load entire icon libraries, resulting in multiple mb's added to final bundle... meanwhile you only needed 10 specific icons.
22 replies