mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 21:28:18 +00:00
Fix sidebar nested item styling
This commit is contained in:
Ronan Berder
+21
-11
@@ -1155,33 +1155,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-9 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-8 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-14 px-3 text-sm;
|
||||
}
|
||||
|
||||
@@ -1194,10 +1203,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1136,33 +1136,42 @@
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-8 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-12 text-xs;
|
||||
}
|
||||
|
||||
@@ -1175,10 +1184,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1143,33 +1143,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-9 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-8 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-14 px-3 text-sm;
|
||||
}
|
||||
|
||||
@@ -1182,10 +1191,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1144,33 +1144,42 @@
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-xs focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-muted/20 dark:bg-muted/30 border-input shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-8 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-12 text-xs;
|
||||
}
|
||||
|
||||
@@ -1183,10 +1192,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-xs focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1140,33 +1140,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-8 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-12 text-sm;
|
||||
}
|
||||
|
||||
@@ -1179,10 +1188,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1152,33 +1152,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm duration-200 focus-visible:ring-3 whitespace-nowrap has-[>svg:first-child]:ps-2.5 has-[>svg:last-child]:pe-2.5 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-8 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-12 px-3 text-sm;
|
||||
}
|
||||
|
||||
@@ -1191,10 +1200,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-xl px-3 text-sm focus-visible:ring-3 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1163,33 +1163,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-none px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-3.5;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-9 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-8 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-14 px-3 text-sm;
|
||||
}
|
||||
|
||||
@@ -1202,10 +1211,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 text-sm focus-visible:ring-2 [&>svg]:size-3.5;
|
||||
}
|
||||
|
||||
|
||||
+21
-11
@@ -1140,33 +1140,42 @@
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary) {
|
||||
.sidebar nav li > :is(a, button),
|
||||
.sidebar nav li > details > summary {
|
||||
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):is([aria-current=page], [data-active=true]) {
|
||||
.sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]),
|
||||
.sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) {
|
||||
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-variant]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-variant]),
|
||||
.sidebar nav li > details > summary:not([data-variant]),
|
||||
.sidebar nav li > :is(a, button)[data-variant=default],
|
||||
.sidebar nav li > details > summary[data-variant=default] {
|
||||
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-variant=outline] {
|
||||
.sidebar nav li > :is(a, button)[data-variant=outline],
|
||||
.sidebar nav li > details > summary[data-variant=outline] {
|
||||
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary):not([data-size]),
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=default] {
|
||||
.sidebar nav li > :is(a, button):not([data-size]),
|
||||
.sidebar nav li > details > summary:not([data-size]),
|
||||
.sidebar nav li > :is(a, button)[data-size=default],
|
||||
.sidebar nav li > details > summary[data-size=default] {
|
||||
@apply h-8 text-sm;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
|
||||
.sidebar nav li > :is(a, button)[data-size=sm],
|
||||
.sidebar nav li > details > summary[data-size=sm] {
|
||||
@apply h-7 text-xs;
|
||||
}
|
||||
|
||||
.sidebar nav li > :is(a, button, details > summary)[data-size=lg] {
|
||||
.sidebar nav li > :is(a, button)[data-size=lg],
|
||||
.sidebar nav li > details > summary[data-size=lg] {
|
||||
@apply h-12 text-sm;
|
||||
}
|
||||
|
||||
@@ -1179,10 +1188,11 @@
|
||||
}
|
||||
|
||||
.sidebar nav ul ul {
|
||||
@apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
|
||||
}
|
||||
|
||||
.sidebar nav ul ul > li > :is(a, button, details > summary) {
|
||||
.sidebar nav ul ul > li > :is(a, button),
|
||||
.sidebar nav ul ul > li > details > summary {
|
||||
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
|
||||
}
|
||||
|
||||
|
||||
@@ -70,6 +70,7 @@ export const registerNavigationFilters = (eleventyConfig, lucideIcons) => {
|
||||
if (item?.type === 'submenu') {
|
||||
const submenuIcon = resolveIcon(item.icon) || null;
|
||||
const processed = (item.items || []).map((sub) => processItem(sub));
|
||||
const commandItems = processed.map((entry) => entry.command).filter(Boolean);
|
||||
return {
|
||||
sidebar: {
|
||||
...item,
|
||||
@@ -77,11 +78,11 @@ export const registerNavigationFilters = (eleventyConfig, lucideIcons) => {
|
||||
open: item.open ?? processed.some((entry) => entry.sidebar?.current),
|
||||
items: processed.map((entry) => entry.sidebar).filter(Boolean),
|
||||
},
|
||||
command: {
|
||||
command: commandItems.length ? {
|
||||
type: 'group',
|
||||
label: item.label,
|
||||
items: processed.map((entry) => entry.command).filter(Boolean),
|
||||
},
|
||||
items: commandItems,
|
||||
} : null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
+66
-33
@@ -2,58 +2,77 @@
|
||||
const componentRegistry = {};
|
||||
let observer = null;
|
||||
|
||||
const registerComponent = (name, selector, initFunction) => {
|
||||
const getInitFlag = (name) => `data-${name}-initialized`;
|
||||
|
||||
const registerComponent = (name, selectorOrOptions, initFunction) => {
|
||||
const options = typeof selectorOrOptions === 'object'
|
||||
? selectorOrOptions
|
||||
: { selector: selectorOrOptions, init: initFunction };
|
||||
|
||||
componentRegistry[name] = {
|
||||
selector,
|
||||
init: initFunction
|
||||
selector: options.selector,
|
||||
init: options.init,
|
||||
refresh: options.refresh,
|
||||
};
|
||||
};
|
||||
|
||||
const initComponent = (element, componentName) => {
|
||||
const component = componentRegistry[componentName];
|
||||
if (!component) return;
|
||||
|
||||
|
||||
try {
|
||||
component.init(element);
|
||||
element.dataset.basecoatComponent = componentName;
|
||||
} catch (error) {
|
||||
console.error(`Failed to initialize ${componentName}:`, error);
|
||||
}
|
||||
};
|
||||
|
||||
const initAllComponents = () => {
|
||||
Object.entries(componentRegistry).forEach(([name, { selector, init }]) => {
|
||||
document.querySelectorAll(selector).forEach(init);
|
||||
Object.entries(componentRegistry).forEach(([name, { selector }]) => {
|
||||
document.querySelectorAll(selector).forEach(element => initComponent(element, name));
|
||||
});
|
||||
};
|
||||
|
||||
const initNewComponents = (node) => {
|
||||
if (node.nodeType !== Node.ELEMENT_NODE) return;
|
||||
|
||||
Object.entries(componentRegistry).forEach(([name, { selector, init }]) => {
|
||||
if (node.matches(selector)) {
|
||||
init(node);
|
||||
}
|
||||
node.querySelectorAll(selector).forEach(init);
|
||||
|
||||
Object.entries(componentRegistry).forEach(([name, { selector }]) => {
|
||||
if (node.matches(selector)) initComponent(node, name);
|
||||
node.querySelectorAll(selector).forEach(element => initComponent(element, name));
|
||||
});
|
||||
};
|
||||
|
||||
const refreshComponent = (element) => {
|
||||
if (!element) return;
|
||||
if (typeof element.refresh === 'function') {
|
||||
element.refresh();
|
||||
return;
|
||||
}
|
||||
|
||||
const componentName = element.dataset?.basecoatComponent;
|
||||
const component = componentName ? componentRegistry[componentName] : null;
|
||||
if (component?.refresh) {
|
||||
component.refresh(element);
|
||||
}
|
||||
};
|
||||
|
||||
const startObserver = () => {
|
||||
if (observer) return;
|
||||
|
||||
|
||||
observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach(initNewComponents);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
};
|
||||
|
||||
const stopObserver = () => {
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
}
|
||||
if (!observer) return;
|
||||
observer.disconnect();
|
||||
observer = null;
|
||||
};
|
||||
|
||||
const reinitComponent = (componentName) => {
|
||||
@@ -62,38 +81,52 @@
|
||||
console.warn(`Component '${componentName}' not found in registry`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear initialization flag for this component
|
||||
const flag = `data-${componentName}-initialized`;
|
||||
document.querySelectorAll(`[${flag}]`).forEach(el => {
|
||||
el.removeAttribute(flag);
|
||||
|
||||
const flag = getInitFlag(componentName);
|
||||
document.querySelectorAll(`[${flag}]`).forEach(element => {
|
||||
element.removeAttribute(flag);
|
||||
delete element.dataset.basecoatComponent;
|
||||
});
|
||||
|
||||
document.querySelectorAll(component.selector).forEach(component.init);
|
||||
|
||||
document.querySelectorAll(component.selector).forEach(element => initComponent(element, componentName));
|
||||
};
|
||||
|
||||
const reinitAll = () => {
|
||||
// Clear all initialization flags using the registry
|
||||
Object.entries(componentRegistry).forEach(([name, { selector }]) => {
|
||||
const flag = `data-${name}-initialized`;
|
||||
document.querySelectorAll(`[${flag}]`).forEach(el => {
|
||||
el.removeAttribute(flag);
|
||||
Object.entries(componentRegistry).forEach(([name]) => {
|
||||
const flag = getInitFlag(name);
|
||||
document.querySelectorAll(`[${flag}]`).forEach(element => {
|
||||
element.removeAttribute(flag);
|
||||
delete element.dataset.basecoatComponent;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
initAllComponents();
|
||||
};
|
||||
|
||||
const setTheme = (mode) => {
|
||||
const dark = mode === 'dark';
|
||||
document.documentElement.classList.toggle('dark', dark);
|
||||
try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
|
||||
};
|
||||
|
||||
const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
|
||||
window.basecoat = {
|
||||
register: registerComponent,
|
||||
init: reinitComponent,
|
||||
initAll: reinitAll,
|
||||
refresh: refreshComponent,
|
||||
start: startObserver,
|
||||
stop: stopObserver
|
||||
stop: stopObserver,
|
||||
theme: {
|
||||
get: getTheme,
|
||||
set: setTheme,
|
||||
toggle: () => setTheme(getTheme() === 'dark' ? 'light' : 'dark'),
|
||||
},
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initAllComponents();
|
||||
startObserver();
|
||||
});
|
||||
})();
|
||||
})();
|
||||
|
||||
+327
-283
@@ -1,334 +1,378 @@
|
||||
(() => {
|
||||
const initCombobox = (combobox) => {
|
||||
const input = combobox.querySelector(':scope > input[role="combobox"], :scope > .combobox-chips input[role="combobox"]');
|
||||
const chips = combobox.querySelector(':scope > .combobox-chips');
|
||||
const popover = combobox.querySelector(':scope > [data-popover]');
|
||||
const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
|
||||
const hiddenInput = combobox.querySelector(':scope > input[type="hidden"]');
|
||||
const states = new WeakMap();
|
||||
|
||||
if (!input || !popover || !listbox || !hiddenInput) {
|
||||
const getElements = (root) => {
|
||||
const input = root.querySelector(':scope > input[role="combobox"], :scope > .combobox-chips input[role="combobox"]');
|
||||
const chips = root.querySelector(':scope > .combobox-chips');
|
||||
const popover = root.querySelector(':scope > [data-popover]');
|
||||
const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
|
||||
const hiddenInput = root.querySelector(':scope > input[type="hidden"]');
|
||||
return { input, chips, popover, listbox, hiddenInput };
|
||||
};
|
||||
|
||||
const getValue = option => option.dataset.value ?? option.textContent.trim();
|
||||
const getLabel = option => option.dataset.label || option.textContent.trim();
|
||||
const isDisabled = option => option.getAttribute('aria-disabled') === 'true';
|
||||
|
||||
const getOptions = (listbox) => {
|
||||
const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
|
||||
return {
|
||||
allOptions,
|
||||
options: allOptions.filter(option => !isDisabled(option)),
|
||||
};
|
||||
};
|
||||
|
||||
const scrollOptionIntoListbox = (state, option) => {
|
||||
const optionRect = option.getBoundingClientRect();
|
||||
const listboxRect = state.listbox.getBoundingClientRect();
|
||||
|
||||
if (optionRect.top < listboxRect.top) {
|
||||
state.listbox.scrollTop -= listboxRect.top - optionRect.top;
|
||||
} else if (optionRect.bottom > listboxRect.bottom) {
|
||||
state.listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveOption = (state, index) => {
|
||||
if (state.activeIndex > -1 && state.options[state.activeIndex]) {
|
||||
state.options[state.activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
state.activeIndex = index;
|
||||
|
||||
if (state.activeIndex > -1) {
|
||||
const activeOption = state.options[state.activeIndex];
|
||||
activeOption.classList.add('active');
|
||||
if (!activeOption.id) activeOption.id = `${state.listbox.id || state.root.id || 'combobox'}-option-${state.activeIndex}`;
|
||||
state.input.setAttribute('aria-activedescendant', activeOption.id);
|
||||
} else {
|
||||
state.input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const syncEmptyState = (state) => {
|
||||
state.popover.dataset.empty = String(state.visibleOptions.length === 0);
|
||||
};
|
||||
|
||||
const filterOptions = (state, { preserveActive = false } = {}) => {
|
||||
const previousActive = state.activeIndex > -1 ? state.options[state.activeIndex] : null;
|
||||
const search = state.input.value.trim().toLowerCase();
|
||||
state.visibleOptions = [];
|
||||
|
||||
state.allOptions.forEach(option => {
|
||||
if (option.hasAttribute('data-force')) {
|
||||
option.setAttribute('aria-hidden', 'false');
|
||||
if (state.options.includes(option)) state.visibleOptions.push(option);
|
||||
return;
|
||||
}
|
||||
|
||||
const optionText = (option.dataset.filter || option.dataset.label || option.textContent).trim().toLowerCase();
|
||||
const keywords = (option.dataset.keywords || '').toLowerCase().split(/[\s,]+/).filter(Boolean);
|
||||
const matches = !search || optionText.includes(search) || keywords.some(keyword => keyword.includes(search));
|
||||
option.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && state.options.includes(option)) state.visibleOptions.push(option);
|
||||
});
|
||||
|
||||
if (preserveActive && previousActive && state.visibleOptions.includes(previousActive)) {
|
||||
setActiveOption(state, state.options.indexOf(previousActive));
|
||||
} else {
|
||||
setActiveOption(state, state.autoHighlight && state.visibleOptions.length > 0 ? state.options.indexOf(state.visibleOptions[0]) : -1);
|
||||
}
|
||||
syncEmptyState(state);
|
||||
};
|
||||
|
||||
const renderChips = (root) => {
|
||||
const state = states.get(root);
|
||||
if (!state.chips) return;
|
||||
|
||||
state.chips.querySelectorAll('.combobox-chip').forEach(chip => chip.remove());
|
||||
const selected = state.options.filter(option => state.selectedOptions.has(option));
|
||||
|
||||
selected.forEach(option => {
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'combobox-chip';
|
||||
chip.dataset.value = getValue(option);
|
||||
chip.textContent = getLabel(option);
|
||||
|
||||
const remove = document.createElement('button');
|
||||
remove.type = 'button';
|
||||
remove.className = 'combobox-chip-remove';
|
||||
remove.setAttribute('aria-label', `Remove ${getLabel(option)}`);
|
||||
remove.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
|
||||
remove.addEventListener('click', () => root.deselect(getValue(option)));
|
||||
|
||||
chip.appendChild(remove);
|
||||
state.chips.insertBefore(chip, state.input);
|
||||
});
|
||||
};
|
||||
|
||||
const updateValue = (root, optionOrOptions, triggerEvent = true) => {
|
||||
const state = states.get(root);
|
||||
let value;
|
||||
|
||||
if (state.isMultiple) {
|
||||
const selected = Array.isArray(optionOrOptions) ? optionOrOptions : [];
|
||||
state.selectedOptions.clear();
|
||||
selected.forEach(option => state.selectedOptions.add(option));
|
||||
state.options.forEach(option => {
|
||||
if (state.selectedOptions.has(option)) {
|
||||
option.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
option.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
value = state.options.filter(option => state.selectedOptions.has(option)).map(getValue);
|
||||
state.hiddenInput.value = JSON.stringify(value);
|
||||
state.input.value = '';
|
||||
renderChips(root);
|
||||
filterOptions(state, { preserveActive: true });
|
||||
} else {
|
||||
const option = optionOrOptions;
|
||||
if (!option) return;
|
||||
state.options.forEach(opt => {
|
||||
if (opt === option) {
|
||||
opt.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
opt.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
value = getValue(option);
|
||||
state.hiddenInput.value = value;
|
||||
state.input.value = getLabel(option);
|
||||
}
|
||||
|
||||
if (triggerEvent) {
|
||||
root.dispatchEvent(new CustomEvent('change', {
|
||||
detail: { value },
|
||||
bubbles: true,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const closePopover = (state, focusInput = false) => {
|
||||
if (state.popover.getAttribute('aria-hidden') === 'true') return;
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
state.input.setAttribute('aria-expanded', 'false');
|
||||
setActiveOption(state, -1);
|
||||
if (focusInput) state.input.focus();
|
||||
};
|
||||
|
||||
const refreshCombobox = (root) => {
|
||||
const state = states.get(root);
|
||||
if (!state) return;
|
||||
|
||||
const elements = getElements(root);
|
||||
if (!elements.input || !elements.popover || !elements.listbox || !elements.hiddenInput) {
|
||||
const missing = [];
|
||||
if (!input) missing.push('input');
|
||||
if (!popover) missing.push('popover');
|
||||
if (!listbox) missing.push('listbox');
|
||||
if (!hiddenInput) missing.push('hidden input');
|
||||
console.error(`Combobox initialisation failed. Missing element(s): ${missing.join(', ')}`, combobox);
|
||||
if (!elements.input) missing.push('input');
|
||||
if (!elements.popover) missing.push('popover');
|
||||
if (!elements.listbox) missing.push('listbox');
|
||||
if (!elements.hiddenInput) missing.push('hidden input');
|
||||
console.error(`Combobox refresh failed. Missing element(s): ${missing.join(', ')}`, root);
|
||||
return;
|
||||
}
|
||||
|
||||
const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
|
||||
const options = allOptions.filter(option => option.getAttribute('aria-disabled') !== 'true');
|
||||
const isMultiple = listbox.getAttribute('aria-multiselectable') === 'true' || combobox.dataset.multiple === 'true';
|
||||
const closeOnSelect = combobox.dataset.closeOnSelect === 'true';
|
||||
const autoHighlight = combobox.dataset.autoHighlight === 'true';
|
||||
const selectedOptions = isMultiple ? new Set() : null;
|
||||
let visibleOptions = [...options];
|
||||
let activeIndex = -1;
|
||||
const previousValue = elements.hiddenInput.value;
|
||||
const previousInputValue = elements.input.value;
|
||||
Object.assign(state, elements, getOptions(elements.listbox));
|
||||
state.isMultiple = state.listbox.getAttribute('aria-multiselectable') === 'true' || root.dataset.multiple === 'true';
|
||||
state.closeOnSelect = root.dataset.closeOnSelect === 'true';
|
||||
state.autoHighlight = root.dataset.autoHighlight === 'true';
|
||||
if (state.isMultiple && !state.selectedOptions) state.selectedOptions = new Set();
|
||||
|
||||
const getValue = option => option.dataset.value ?? option.textContent.trim();
|
||||
const getLabel = option => option.dataset.label || option.textContent.trim();
|
||||
|
||||
const scrollOptionIntoListbox = (option) => {
|
||||
const optionRect = option.getBoundingClientRect();
|
||||
const listboxRect = listbox.getBoundingClientRect();
|
||||
|
||||
if (optionRect.top < listboxRect.top) {
|
||||
listbox.scrollTop -= listboxRect.top - optionRect.top;
|
||||
} else if (optionRect.bottom > listboxRect.bottom) {
|
||||
listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
|
||||
if (state.isMultiple) {
|
||||
let values = [];
|
||||
try {
|
||||
const parsed = JSON.parse(previousValue || '[]');
|
||||
values = Array.isArray(parsed) ? parsed : [];
|
||||
} catch (_) {
|
||||
values = [];
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveOption = (index) => {
|
||||
if (activeIndex > -1 && options[activeIndex]) {
|
||||
options[activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
activeIndex = index;
|
||||
|
||||
if (activeIndex > -1) {
|
||||
const activeOption = options[activeIndex];
|
||||
activeOption.classList.add('active');
|
||||
if (!activeOption.id) activeOption.id = `${listbox.id || combobox.id || 'combobox'}-option-${activeIndex}`;
|
||||
input.setAttribute('aria-activedescendant', activeOption.id);
|
||||
const ariaSelected = state.options.filter(option => option.getAttribute('aria-selected') === 'true').map(getValue);
|
||||
const selectedValues = values.length ? values : ariaSelected;
|
||||
updateValue(root, state.options.filter(option => selectedValues.includes(getValue(option))), false);
|
||||
} else {
|
||||
const selected = state.options.find(option => getValue(option) === previousValue)
|
||||
|| state.options.find(option => option.getAttribute('aria-selected') === 'true');
|
||||
if (selected) {
|
||||
updateValue(root, selected, false);
|
||||
} else {
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
state.input.value = previousInputValue;
|
||||
state.options.forEach(option => option.removeAttribute('aria-selected'));
|
||||
filterOptions(state, { preserveActive: true });
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const syncEmptyState = () => {
|
||||
popover.dataset.empty = String(visibleOptions.length === 0);
|
||||
};
|
||||
const selectValue = (root, value) => {
|
||||
const state = states.get(root);
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
|
||||
const filterOptions = ({ preserveActive = false } = {}) => {
|
||||
const previousActive = activeIndex > -1 ? options[activeIndex] : null;
|
||||
const search = input.value.trim().toLowerCase();
|
||||
visibleOptions = [];
|
||||
if (state.isMultiple) {
|
||||
const selected = new Set(state.selectedOptions);
|
||||
selected.add(option);
|
||||
updateValue(root, state.options.filter(opt => selected.has(opt)));
|
||||
if (state.closeOnSelect) root.close(true);
|
||||
} else {
|
||||
updateValue(root, option);
|
||||
root.close(true);
|
||||
}
|
||||
};
|
||||
|
||||
allOptions.forEach(option => {
|
||||
if (option.hasAttribute('data-force')) {
|
||||
option.setAttribute('aria-hidden', 'false');
|
||||
if (options.includes(option)) visibleOptions.push(option);
|
||||
return;
|
||||
}
|
||||
const deselectValue = (root, value) => {
|
||||
const state = states.get(root);
|
||||
if (!state.isMultiple) return;
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (!option || !state.selectedOptions.has(option)) return;
|
||||
const selected = new Set(state.selectedOptions);
|
||||
selected.delete(option);
|
||||
updateValue(root, state.options.filter(opt => selected.has(opt)));
|
||||
};
|
||||
|
||||
const optionText = (option.dataset.filter || option.dataset.label || option.textContent).trim().toLowerCase();
|
||||
const keywords = (option.dataset.keywords || '').toLowerCase().split(/[\s,]+/).filter(Boolean);
|
||||
const matches = !search || optionText.includes(search) || keywords.some(keyword => keyword.includes(search));
|
||||
option.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && options.includes(option)) visibleOptions.push(option);
|
||||
});
|
||||
const handleKeydown = (event, root) => {
|
||||
const state = states.get(root);
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape', 'Backspace'].includes(event.key)) return;
|
||||
|
||||
if (preserveActive && previousActive && visibleOptions.includes(previousActive)) {
|
||||
setActiveOption(options.indexOf(previousActive));
|
||||
} else {
|
||||
setActiveOption(autoHighlight && visibleOptions.length > 0 ? options.indexOf(visibleOptions[0]) : -1);
|
||||
}
|
||||
syncEmptyState();
|
||||
};
|
||||
const isOpen = state.popover.getAttribute('aria-hidden') === 'false';
|
||||
|
||||
const openPopover = () => {
|
||||
if (popover.getAttribute('aria-hidden') === 'false') return;
|
||||
if (event.key === 'Backspace' && state.isMultiple && state.input.value === '') {
|
||||
const selected = state.options.filter(option => state.selectedOptions.has(option));
|
||||
const last = selected[selected.length - 1];
|
||||
if (last) root.deselect(getValue(last));
|
||||
return;
|
||||
}
|
||||
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
||||
detail: { source: combobox }
|
||||
}));
|
||||
if (event.key === 'Escape') {
|
||||
root.close(true);
|
||||
return;
|
||||
}
|
||||
|
||||
filterOptions();
|
||||
popover.setAttribute('aria-hidden', 'false');
|
||||
input.setAttribute('aria-expanded', 'true');
|
||||
};
|
||||
|
||||
const closePopover = (focusInput = false) => {
|
||||
if (popover.getAttribute('aria-hidden') === 'true') return;
|
||||
popover.setAttribute('aria-hidden', 'true');
|
||||
input.setAttribute('aria-expanded', 'false');
|
||||
setActiveOption(-1);
|
||||
if (focusInput) input.focus();
|
||||
};
|
||||
|
||||
const renderChips = () => {
|
||||
if (!chips) return;
|
||||
chips.querySelectorAll('.combobox-chip').forEach(chip => chip.remove());
|
||||
const selected = options.filter(option => selectedOptions.has(option));
|
||||
|
||||
selected.forEach(option => {
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'combobox-chip';
|
||||
chip.dataset.value = getValue(option);
|
||||
chip.textContent = getLabel(option);
|
||||
|
||||
const remove = document.createElement('button');
|
||||
remove.type = 'button';
|
||||
remove.className = 'combobox-chip-remove';
|
||||
remove.setAttribute('aria-label', `Remove ${getLabel(option)}`);
|
||||
remove.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
|
||||
remove.addEventListener('click', () => deselect(getValue(option)));
|
||||
|
||||
chip.appendChild(remove);
|
||||
chips.insertBefore(chip, input);
|
||||
});
|
||||
};
|
||||
|
||||
const updateValue = (optionOrOptions, triggerEvent = true) => {
|
||||
let value;
|
||||
|
||||
if (isMultiple) {
|
||||
const selected = Array.isArray(optionOrOptions) ? optionOrOptions : [];
|
||||
selectedOptions.clear();
|
||||
selected.forEach(option => selectedOptions.add(option));
|
||||
options.forEach(option => {
|
||||
if (selectedOptions.has(option)) {
|
||||
option.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
option.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
value = options.filter(option => selectedOptions.has(option)).map(getValue);
|
||||
hiddenInput.value = JSON.stringify(value);
|
||||
input.value = '';
|
||||
renderChips();
|
||||
filterOptions({ preserveActive: true });
|
||||
} else {
|
||||
const option = optionOrOptions;
|
||||
if (!option) return;
|
||||
options.forEach(opt => {
|
||||
if (opt === option) {
|
||||
opt.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
opt.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
value = getValue(option);
|
||||
hiddenInput.value = value;
|
||||
input.value = getLabel(option);
|
||||
}
|
||||
|
||||
if (triggerEvent) {
|
||||
combobox.dispatchEvent(new CustomEvent('change', {
|
||||
detail: { value },
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const select = (value) => {
|
||||
const option = options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
|
||||
if (isMultiple) {
|
||||
const selected = new Set(selectedOptions);
|
||||
selected.add(option);
|
||||
updateValue(options.filter(opt => selected.has(opt)));
|
||||
if (closeOnSelect) closePopover(true);
|
||||
} else {
|
||||
updateValue(option);
|
||||
closePopover(true);
|
||||
}
|
||||
};
|
||||
|
||||
const deselect = (value) => {
|
||||
if (!isMultiple) return;
|
||||
const option = options.find(opt => getValue(opt) === value);
|
||||
if (!option || !selectedOptions.has(option)) return;
|
||||
const selected = new Set(selectedOptions);
|
||||
selected.delete(option);
|
||||
updateValue(options.filter(opt => selected.has(opt)));
|
||||
};
|
||||
|
||||
const toggle = (value) => {
|
||||
if (!isMultiple) return;
|
||||
const option = options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
selectedOptions.has(option) ? deselect(value) : select(value);
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape', 'Backspace'].includes(event.key)) return;
|
||||
|
||||
const isOpen = popover.getAttribute('aria-hidden') === 'false';
|
||||
|
||||
if (event.key === 'Backspace' && isMultiple && input.value === '') {
|
||||
const selected = options.filter(option => selectedOptions.has(option));
|
||||
const last = selected[selected.length - 1];
|
||||
if (last) deselect(getValue(last));
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
closePopover(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isOpen && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
openPopover();
|
||||
}
|
||||
|
||||
if (popover.getAttribute('aria-hidden') === 'true') return;
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
if (activeIndex > -1) {
|
||||
event.preventDefault();
|
||||
const option = options[activeIndex];
|
||||
isMultiple ? toggle(getValue(option)) : select(getValue(option));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || visibleOptions.length === 0) return;
|
||||
if (!isOpen && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
root.open();
|
||||
}
|
||||
|
||||
const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
if (state.popover.getAttribute('aria-hidden') === 'true') return;
|
||||
|
||||
if (event.key === 'ArrowDown') nextVisibleIndex = Math.min(currentVisibleIndex + 1, visibleOptions.length - 1);
|
||||
if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex <= 0 ? 0 : currentVisibleIndex - 1;
|
||||
if (event.key === 'Home') nextVisibleIndex = 0;
|
||||
if (event.key === 'End') nextVisibleIndex = visibleOptions.length - 1;
|
||||
if (event.key === 'Enter') {
|
||||
if (state.activeIndex > -1) {
|
||||
event.preventDefault();
|
||||
const option = state.options[state.activeIndex];
|
||||
state.isMultiple ? root.toggle(getValue(option)) : root.select(getValue(option));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const nextOption = visibleOptions[nextVisibleIndex];
|
||||
setActiveOption(options.indexOf(nextOption));
|
||||
scrollOptionIntoListbox(nextOption);
|
||||
if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || state.visibleOptions.length === 0) return;
|
||||
event.preventDefault();
|
||||
|
||||
const currentVisibleIndex = state.activeIndex > -1 ? state.visibleOptions.indexOf(state.options[state.activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
|
||||
if (event.key === 'ArrowDown') nextVisibleIndex = Math.min(currentVisibleIndex + 1, state.visibleOptions.length - 1);
|
||||
if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex <= 0 ? 0 : currentVisibleIndex - 1;
|
||||
if (event.key === 'Home') nextVisibleIndex = 0;
|
||||
if (event.key === 'End') nextVisibleIndex = state.visibleOptions.length - 1;
|
||||
|
||||
const nextOption = state.visibleOptions[nextVisibleIndex];
|
||||
setActiveOption(state, state.options.indexOf(nextOption));
|
||||
scrollOptionIntoListbox(state, nextOption);
|
||||
};
|
||||
|
||||
const initCombobox = (root) => {
|
||||
if (root.dataset.comboboxInitialized) return;
|
||||
|
||||
const state = { root, activeIndex: -1, allOptions: [], options: [], visibleOptions: [], selectedOptions: null };
|
||||
states.set(root, state);
|
||||
root.refresh = () => refreshCombobox(root);
|
||||
|
||||
refreshCombobox(root);
|
||||
if (!state.input || !state.popover || !state.listbox || !state.hiddenInput) {
|
||||
states.delete(root);
|
||||
return;
|
||||
}
|
||||
|
||||
root.open = () => {
|
||||
if (state.popover.getAttribute('aria-hidden') === 'false') return;
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
|
||||
root.refresh();
|
||||
filterOptions(state);
|
||||
state.popover.setAttribute('aria-hidden', 'false');
|
||||
state.input.setAttribute('aria-expanded', 'true');
|
||||
};
|
||||
root.close = (focusInput = false) => closePopover(state, focusInput);
|
||||
|
||||
input.addEventListener('focus', openPopover);
|
||||
input.addEventListener('click', openPopover);
|
||||
input.addEventListener('input', () => {
|
||||
openPopover();
|
||||
filterOptions();
|
||||
if (!isMultiple) {
|
||||
hiddenInput.value = '';
|
||||
options.forEach(option => option.removeAttribute('aria-selected'));
|
||||
root.select = (value) => selectValue(root, value);
|
||||
root.selectByValue = root.select;
|
||||
if (state.isMultiple) {
|
||||
root.deselect = (value) => deselectValue(root, value);
|
||||
root.toggle = (value) => {
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
state.selectedOptions.has(option) ? root.deselect(value) : root.select(value);
|
||||
};
|
||||
root.selectAll = () => updateValue(root, state.options);
|
||||
root.selectNone = () => updateValue(root, []);
|
||||
}
|
||||
|
||||
state.input.addEventListener('focus', root.open);
|
||||
state.input.addEventListener('click', root.open);
|
||||
state.input.addEventListener('input', () => {
|
||||
root.open();
|
||||
filterOptions(state);
|
||||
if (!state.isMultiple) {
|
||||
state.hiddenInput.value = '';
|
||||
state.options.forEach(option => option.removeAttribute('aria-selected'));
|
||||
}
|
||||
});
|
||||
input.addEventListener('keydown', handleKeydown);
|
||||
state.input.addEventListener('keydown', (event) => handleKeydown(event, root));
|
||||
|
||||
listbox.addEventListener('mousemove', (event) => {
|
||||
state.listbox.addEventListener('mousemove', (event) => {
|
||||
const option = event.target.closest('[role="option"]');
|
||||
if (option && visibleOptions.includes(option)) setActiveOption(options.indexOf(option));
|
||||
if (option && state.visibleOptions.includes(option)) setActiveOption(state, state.options.indexOf(option));
|
||||
});
|
||||
|
||||
listbox.addEventListener('click', (event) => {
|
||||
state.listbox.addEventListener('click', (event) => {
|
||||
const option = event.target.closest('[role="option"]');
|
||||
if (!option || !options.includes(option)) return;
|
||||
isMultiple ? toggle(getValue(option)) : select(getValue(option));
|
||||
if (isMultiple && !closeOnSelect) input.focus();
|
||||
if (!option || !state.options.includes(option)) return;
|
||||
state.isMultiple ? root.toggle(getValue(option)) : root.select(getValue(option));
|
||||
if (state.isMultiple && !state.closeOnSelect) state.input.focus();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!combobox.contains(event.target)) closePopover(false);
|
||||
if (!root.contains(event.target)) root.close(false);
|
||||
});
|
||||
|
||||
document.addEventListener('basecoat:popover', (event) => {
|
||||
if (event.detail.source !== combobox) closePopover(false);
|
||||
if (event.detail.source !== root) root.close(false);
|
||||
});
|
||||
|
||||
if (isMultiple) {
|
||||
let initialValues = [];
|
||||
try {
|
||||
initialValues = JSON.parse(hiddenInput.value || '[]');
|
||||
} catch (_) {
|
||||
initialValues = [];
|
||||
}
|
||||
if (!Array.isArray(initialValues)) initialValues = [];
|
||||
const ariaSelected = options.filter(option => option.getAttribute('aria-selected') === 'true').map(getValue);
|
||||
const values = initialValues.length ? initialValues : ariaSelected;
|
||||
updateValue(options.filter(option => values.includes(getValue(option))), false);
|
||||
} else {
|
||||
const initialOption = options.find(option => getValue(option) === hiddenInput.value || option.getAttribute('aria-selected') === 'true');
|
||||
if (initialOption) updateValue(initialOption, false);
|
||||
}
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
state.input.setAttribute('aria-expanded', 'false');
|
||||
|
||||
popover.setAttribute('aria-hidden', 'true');
|
||||
input.setAttribute('aria-expanded', 'false');
|
||||
|
||||
Object.defineProperty(combobox, 'value', {
|
||||
get: () => isMultiple ? options.filter(option => selectedOptions.has(option)).map(getValue) : hiddenInput.value,
|
||||
Object.defineProperty(root, 'value', {
|
||||
configurable: true,
|
||||
get: () => state.isMultiple ? state.options.filter(option => state.selectedOptions.has(option)).map(getValue) : state.hiddenInput.value,
|
||||
set: (value) => {
|
||||
if (isMultiple) {
|
||||
if (state.isMultiple) {
|
||||
const values = Array.isArray(value) ? value : (value == null ? [] : [value]);
|
||||
updateValue(options.filter(option => values.includes(getValue(option))));
|
||||
updateValue(root, state.options.filter(option => values.includes(getValue(option))));
|
||||
} else {
|
||||
select(value);
|
||||
root.select(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
combobox.select = select;
|
||||
combobox.selectByValue = select;
|
||||
if (isMultiple) {
|
||||
combobox.deselect = deselect;
|
||||
combobox.toggle = toggle;
|
||||
combobox.selectAll = () => updateValue(options);
|
||||
combobox.selectNone = () => updateValue([]);
|
||||
}
|
||||
|
||||
combobox.dataset.comboboxInitialized = true;
|
||||
combobox.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
root.dataset.comboboxInitialized = 'true';
|
||||
root.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('combobox', '.combobox:not([data-combobox-initialized])', initCombobox);
|
||||
window.basecoat.register('combobox', {
|
||||
selector: '.combobox:not([data-combobox-initialized])',
|
||||
init: initCombobox,
|
||||
refresh: refreshCombobox,
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+159
-154
@@ -1,171 +1,176 @@
|
||||
(() => {
|
||||
const initCommand = (container) => {
|
||||
const input = container.querySelector('header input');
|
||||
const menu = container.querySelector('[role="menu"]');
|
||||
const states = new WeakMap();
|
||||
|
||||
if (!input || !menu) {
|
||||
const isDisabled = (item) =>
|
||||
item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
|
||||
|
||||
const getElements = (container) => ({
|
||||
input: container.querySelector('header input'),
|
||||
menu: container.querySelector('[role="menu"]'),
|
||||
});
|
||||
|
||||
const getItems = (menu) => {
|
||||
const allItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
|
||||
return {
|
||||
allItems,
|
||||
items: allItems.filter(item => !isDisabled(item)),
|
||||
};
|
||||
};
|
||||
|
||||
const scrollItemIntoMenu = (state, item) => {
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const menuRect = state.menu.getBoundingClientRect();
|
||||
|
||||
if (itemRect.top < menuRect.top) {
|
||||
state.menu.scrollTop -= menuRect.top - itemRect.top;
|
||||
} else if (itemRect.bottom > menuRect.bottom) {
|
||||
state.menu.scrollTop += itemRect.bottom - menuRect.bottom;
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveItem = (state, index) => {
|
||||
if (state.activeIndex > -1 && state.items[state.activeIndex]) {
|
||||
state.items[state.activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
state.activeIndex = index;
|
||||
|
||||
if (state.activeIndex > -1) {
|
||||
const activeItem = state.items[state.activeIndex];
|
||||
activeItem.classList.add('active');
|
||||
if (activeItem.id) {
|
||||
state.input.setAttribute('aria-activedescendant', activeItem.id);
|
||||
} else {
|
||||
state.input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
} else {
|
||||
state.input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const filterItems = (state) => {
|
||||
const searchTerm = state.input.value.trim().toLowerCase();
|
||||
|
||||
setActiveItem(state, -1);
|
||||
state.visibleItems = [];
|
||||
|
||||
state.allItems.forEach(item => {
|
||||
if (item.hasAttribute('data-force')) {
|
||||
item.setAttribute('aria-hidden', 'false');
|
||||
if (state.items.includes(item)) state.visibleItems.push(item);
|
||||
return;
|
||||
}
|
||||
|
||||
const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
|
||||
const keywordList = (item.dataset.keywords || '')
|
||||
.toLowerCase()
|
||||
.split(/[\s,]+/)
|
||||
.filter(Boolean);
|
||||
const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
|
||||
const matches = itemText.includes(searchTerm) || matchesKeyword;
|
||||
item.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && state.items.includes(item)) state.visibleItems.push(item);
|
||||
});
|
||||
|
||||
if (state.visibleItems.length > 0) {
|
||||
setActiveItem(state, state.items.indexOf(state.visibleItems[0]));
|
||||
scrollItemIntoMenu(state, state.visibleItems[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const refreshCommand = (container) => {
|
||||
const state = states.get(container);
|
||||
if (!state) return;
|
||||
|
||||
const elements = getElements(container);
|
||||
if (!elements.input || !elements.menu) {
|
||||
const missing = [];
|
||||
if (!input) missing.push('input');
|
||||
if (!menu) missing.push('menu');
|
||||
console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
|
||||
if (!elements.input) missing.push('input');
|
||||
if (!elements.menu) missing.push('menu');
|
||||
console.error(`Command component refresh failed. Missing element(s): ${missing.join(', ')}`, container);
|
||||
return;
|
||||
}
|
||||
|
||||
const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
|
||||
const menuItems = allMenuItems.filter(item =>
|
||||
!item.hasAttribute('disabled') &&
|
||||
item.getAttribute('aria-disabled') !== 'true'
|
||||
);
|
||||
let visibleMenuItems = [...menuItems];
|
||||
let activeIndex = -1;
|
||||
Object.assign(state, elements, getItems(elements.menu));
|
||||
filterItems(state);
|
||||
};
|
||||
|
||||
const scrollItemIntoMenu = (item) => {
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const menuRect = menu.getBoundingClientRect();
|
||||
|
||||
if (itemRect.top < menuRect.top) {
|
||||
menu.scrollTop -= menuRect.top - itemRect.top;
|
||||
} else if (itemRect.bottom > menuRect.bottom) {
|
||||
menu.scrollTop += itemRect.bottom - menuRect.bottom;
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveItem = (index) => {
|
||||
if (activeIndex > -1 && menuItems[activeIndex]) {
|
||||
menuItems[activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
activeIndex = index;
|
||||
|
||||
if (activeIndex > -1) {
|
||||
const activeItem = menuItems[activeIndex];
|
||||
activeItem.classList.add('active');
|
||||
if (activeItem.id) {
|
||||
input.setAttribute('aria-activedescendant', activeItem.id);
|
||||
} else {
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
} else {
|
||||
input.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const filterMenuItems = () => {
|
||||
const searchTerm = input.value.trim().toLowerCase();
|
||||
|
||||
setActiveItem(-1);
|
||||
|
||||
visibleMenuItems = [];
|
||||
allMenuItems.forEach(item => {
|
||||
if (item.hasAttribute('data-force')) {
|
||||
item.setAttribute('aria-hidden', 'false');
|
||||
if (menuItems.includes(item)) {
|
||||
visibleMenuItems.push(item);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const itemText = (item.dataset.filter || item.textContent).trim().toLowerCase();
|
||||
const keywordList = (item.dataset.keywords || '')
|
||||
.toLowerCase()
|
||||
.split(/[\s,]+/)
|
||||
.filter(Boolean);
|
||||
const matchesKeyword = keywordList.some(keyword => keyword.includes(searchTerm));
|
||||
const matches = itemText.includes(searchTerm) || matchesKeyword;
|
||||
item.setAttribute('aria-hidden', String(!matches));
|
||||
if (matches && menuItems.includes(item)) {
|
||||
visibleMenuItems.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
if (visibleMenuItems.length > 0) {
|
||||
setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
|
||||
scrollItemIntoMenu(visibleMenuItems[0]);
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('input', filterMenuItems);
|
||||
|
||||
const handleKeyNavigation = (event) => {
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (activeIndex > -1) {
|
||||
menuItems[activeIndex]?.click();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (visibleMenuItems.length === 0) return;
|
||||
const handleKeyNavigation = (event, state) => {
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) return;
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
if (currentVisibleIndex < visibleMenuItems.length - 1) {
|
||||
nextVisibleIndex = currentVisibleIndex + 1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (currentVisibleIndex > 0) {
|
||||
nextVisibleIndex = currentVisibleIndex - 1;
|
||||
} else if (currentVisibleIndex === -1) {
|
||||
nextVisibleIndex = 0;
|
||||
}
|
||||
break;
|
||||
case 'Home':
|
||||
nextVisibleIndex = 0;
|
||||
break;
|
||||
case 'End':
|
||||
nextVisibleIndex = visibleMenuItems.length - 1;
|
||||
break;
|
||||
}
|
||||
|
||||
if (nextVisibleIndex !== currentVisibleIndex) {
|
||||
const newActiveItem = visibleMenuItems[nextVisibleIndex];
|
||||
setActiveItem(menuItems.indexOf(newActiveItem));
|
||||
scrollItemIntoMenu(newActiveItem);
|
||||
}
|
||||
};
|
||||
|
||||
menu.addEventListener('mousemove', (event) => {
|
||||
const menuItem = event.target.closest('[role="menuitem"]');
|
||||
if (menuItem && visibleMenuItems.includes(menuItem)) {
|
||||
const index = menuItems.indexOf(menuItem);
|
||||
if (index !== activeIndex) {
|
||||
setActiveItem(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
menu.addEventListener('click', (event) => {
|
||||
const clickedItem = event.target.closest('[role="menuitem"]');
|
||||
if (clickedItem && visibleMenuItems.includes(clickedItem)) {
|
||||
const dialog = container.closest('dialog.command-dialog');
|
||||
if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) {
|
||||
dialog.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', handleKeyNavigation);
|
||||
|
||||
if (visibleMenuItems.length > 0) {
|
||||
setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
|
||||
scrollItemIntoMenu(visibleMenuItems[0]);
|
||||
if (state.activeIndex > -1) state.items[state.activeIndex]?.click();
|
||||
return;
|
||||
}
|
||||
|
||||
container.dataset.commandInitialized = true;
|
||||
if (state.visibleItems.length === 0) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const currentVisibleIndex = state.activeIndex > -1 ? state.visibleItems.indexOf(state.items[state.activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
|
||||
if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleItems.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
|
||||
if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
|
||||
if (event.key === 'Home') nextVisibleIndex = 0;
|
||||
if (event.key === 'End') nextVisibleIndex = state.visibleItems.length - 1;
|
||||
|
||||
if (nextVisibleIndex !== currentVisibleIndex) {
|
||||
const newActiveItem = state.visibleItems[nextVisibleIndex];
|
||||
setActiveItem(state, state.items.indexOf(newActiveItem));
|
||||
scrollItemIntoMenu(state, newActiveItem);
|
||||
}
|
||||
};
|
||||
|
||||
const initCommand = (container) => {
|
||||
if (container.dataset.commandInitialized) return;
|
||||
|
||||
const state = { activeIndex: -1, allItems: [], items: [], visibleItems: [] };
|
||||
states.set(container, state);
|
||||
|
||||
container.refresh = () => refreshCommand(container);
|
||||
|
||||
const elements = getElements(container);
|
||||
if (!elements.input || !elements.menu) {
|
||||
const missing = [];
|
||||
if (!elements.input) missing.push('input');
|
||||
if (!elements.menu) missing.push('menu');
|
||||
console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
|
||||
states.delete(container);
|
||||
return;
|
||||
}
|
||||
Object.assign(state, elements);
|
||||
|
||||
state.input.addEventListener('input', () => filterItems(state));
|
||||
state.input.addEventListener('keydown', (event) => handleKeyNavigation(event, state));
|
||||
|
||||
state.menu.addEventListener('mousemove', (event) => {
|
||||
const menuItem = event.target.closest('[role="menuitem"]');
|
||||
if (menuItem && state.visibleItems.includes(menuItem)) {
|
||||
const index = state.items.indexOf(menuItem);
|
||||
if (index !== state.activeIndex) setActiveItem(state, index);
|
||||
}
|
||||
});
|
||||
|
||||
state.menu.addEventListener('click', (event) => {
|
||||
const clickedItem = event.target.closest('[role="menuitem"]');
|
||||
if (clickedItem && state.visibleItems.includes(clickedItem)) {
|
||||
const dialog = container.closest('dialog.command-dialog');
|
||||
if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) dialog.close();
|
||||
}
|
||||
});
|
||||
|
||||
refreshCommand(container);
|
||||
container.dataset.commandInitialized = 'true';
|
||||
container.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
|
||||
window.basecoat.register('command', {
|
||||
selector: '.command:not([data-command-initialized])',
|
||||
init: initCommand,
|
||||
refresh: refreshCommand,
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+123
-125
@@ -1,174 +1,172 @@
|
||||
(() => {
|
||||
const initDropdownMenu = (dropdownMenuComponent) => {
|
||||
const trigger = dropdownMenuComponent.querySelector(':scope > button');
|
||||
const popover = dropdownMenuComponent.querySelector(':scope > [data-popover]');
|
||||
const menu = popover.querySelector('[role="menu"]');
|
||||
|
||||
if (!trigger || !menu || !popover) {
|
||||
const states = new WeakMap();
|
||||
|
||||
const isDisabled = (item) =>
|
||||
item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
|
||||
|
||||
const getElements = (root) => {
|
||||
const trigger = root.querySelector(':scope > button');
|
||||
const popover = root.querySelector(':scope > [data-popover]');
|
||||
const menu = popover ? popover.querySelector('[role="menu"]') : null;
|
||||
return { trigger, popover, menu };
|
||||
};
|
||||
|
||||
const getItems = (menu) => Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item => !isDisabled(item));
|
||||
|
||||
const setActiveItem = (state, index) => {
|
||||
if (state.activeIndex > -1 && state.items[state.activeIndex]) {
|
||||
state.items[state.activeIndex].classList.remove('active');
|
||||
}
|
||||
state.activeIndex = index;
|
||||
if (state.activeIndex > -1 && state.items[state.activeIndex]) {
|
||||
const activeItem = state.items[state.activeIndex];
|
||||
activeItem.classList.add('active');
|
||||
if (activeItem.id) state.trigger.setAttribute('aria-activedescendant', activeItem.id);
|
||||
} else {
|
||||
state.trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const refreshDropdownMenu = (root) => {
|
||||
const state = states.get(root);
|
||||
if (!state) return;
|
||||
|
||||
const elements = getElements(root);
|
||||
if (!elements.trigger || !elements.popover || !elements.menu) {
|
||||
const missing = [];
|
||||
if (!trigger) missing.push('trigger');
|
||||
if (!menu) missing.push('menu');
|
||||
if (!popover) missing.push('popover');
|
||||
console.error(`Dropdown menu initialisation failed. Missing element(s): ${missing.join(', ')}`, dropdownMenuComponent);
|
||||
if (!elements.trigger) missing.push('trigger');
|
||||
if (!elements.popover) missing.push('popover');
|
||||
if (!elements.menu) missing.push('menu');
|
||||
console.error(`Dropdown menu refresh failed. Missing element(s): ${missing.join(', ')}`, root);
|
||||
return;
|
||||
}
|
||||
|
||||
let menuItems = [];
|
||||
let activeIndex = -1;
|
||||
Object.assign(state, elements);
|
||||
state.items = getItems(state.menu);
|
||||
if (state.activeIndex > -1 && !state.items[state.activeIndex]) setActiveItem(state, -1);
|
||||
};
|
||||
|
||||
const isDisabled = (item) =>
|
||||
item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
|
||||
const closePopover = (state, focusOnTrigger = true) => {
|
||||
if (state.trigger.getAttribute('aria-expanded') === 'false') return;
|
||||
state.trigger.setAttribute('aria-expanded', 'false');
|
||||
state.trigger.removeAttribute('aria-activedescendant');
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
if (focusOnTrigger) state.trigger.focus();
|
||||
setActiveItem(state, -1);
|
||||
};
|
||||
|
||||
const closePopover = (focusOnTrigger = true) => {
|
||||
if (trigger.getAttribute('aria-expanded') === 'false') return;
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
trigger.removeAttribute('aria-activedescendant');
|
||||
popover.setAttribute('aria-hidden', 'true');
|
||||
|
||||
if (focusOnTrigger) {
|
||||
trigger.focus();
|
||||
}
|
||||
|
||||
setActiveItem(-1);
|
||||
};
|
||||
const openPopover = (root, state, initialSelection = false) => {
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
|
||||
root.refresh();
|
||||
state.trigger.setAttribute('aria-expanded', 'true');
|
||||
state.popover.setAttribute('aria-hidden', 'false');
|
||||
|
||||
const openPopover = (initialSelection = false) => {
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
||||
detail: { source: dropdownMenuComponent }
|
||||
}));
|
||||
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
popover.setAttribute('aria-hidden', 'false');
|
||||
menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(item => !isDisabled(item));
|
||||
|
||||
if (menuItems.length > 0 && initialSelection) {
|
||||
if (initialSelection === 'first') {
|
||||
setActiveItem(0);
|
||||
} else if (initialSelection === 'last') {
|
||||
setActiveItem(menuItems.length - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
if (state.items.length > 0 && initialSelection) {
|
||||
setActiveItem(state, initialSelection === 'last' ? state.items.length - 1 : 0);
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveItem = (index) => {
|
||||
if (activeIndex > -1 && menuItems[activeIndex]) {
|
||||
menuItems[activeIndex].classList.remove('active');
|
||||
}
|
||||
activeIndex = index;
|
||||
if (activeIndex > -1 && menuItems[activeIndex]) {
|
||||
const activeItem = menuItems[activeIndex];
|
||||
activeItem.classList.add('active');
|
||||
if (activeItem.id) {
|
||||
trigger.setAttribute('aria-activedescendant', activeItem.id);
|
||||
}
|
||||
} else {
|
||||
trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
const initDropdownMenu = (root) => {
|
||||
if (root.dataset.dropdownMenuInitialized) return;
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
||||
if (isExpanded) {
|
||||
closePopover();
|
||||
} else {
|
||||
openPopover(false);
|
||||
}
|
||||
});
|
||||
const state = { activeIndex: -1, items: [] };
|
||||
states.set(root, state);
|
||||
root.refresh = () => refreshDropdownMenu(root);
|
||||
|
||||
dropdownMenuComponent.addEventListener('keydown', (event) => {
|
||||
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
||||
refreshDropdownMenu(root);
|
||||
if (!state.trigger || !state.popover || !state.menu) {
|
||||
states.delete(root);
|
||||
return;
|
||||
}
|
||||
|
||||
root.open = (initialSelection = false) => openPopover(root, state, initialSelection);
|
||||
root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
|
||||
root.toggle = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open(false);
|
||||
|
||||
state.trigger.addEventListener('click', root.toggle);
|
||||
|
||||
root.addEventListener('keydown', (event) => {
|
||||
const isExpanded = state.trigger.getAttribute('aria-expanded') === 'true';
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
if (isExpanded) closePopover();
|
||||
if (isExpanded) root.close();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!isExpanded) {
|
||||
if (['Enter', ' '].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
openPopover(false);
|
||||
root.open(false);
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
openPopover('first');
|
||||
root.open('first');
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
openPopover('last');
|
||||
root.open('last');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (menuItems.length === 0) return;
|
||||
if (state.items.length === 0) return;
|
||||
|
||||
let nextIndex = activeIndex;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
nextIndex = activeIndex === -1 ? 0 : Math.min(activeIndex + 1, menuItems.length - 1);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
nextIndex = activeIndex === -1 ? menuItems.length - 1 : Math.max(activeIndex - 1, 0);
|
||||
break;
|
||||
case 'Home':
|
||||
event.preventDefault();
|
||||
nextIndex = 0;
|
||||
break;
|
||||
case 'End':
|
||||
event.preventDefault();
|
||||
nextIndex = menuItems.length - 1;
|
||||
break;
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
event.preventDefault();
|
||||
menuItems[activeIndex]?.click();
|
||||
closePopover();
|
||||
return;
|
||||
let nextIndex = state.activeIndex;
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
nextIndex = state.activeIndex === -1 ? 0 : Math.min(state.activeIndex + 1, state.items.length - 1);
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
nextIndex = state.activeIndex === -1 ? state.items.length - 1 : Math.max(state.activeIndex - 1, 0);
|
||||
} else if (event.key === 'Home') {
|
||||
event.preventDefault();
|
||||
nextIndex = 0;
|
||||
} else if (event.key === 'End') {
|
||||
event.preventDefault();
|
||||
nextIndex = state.items.length - 1;
|
||||
} else if (['Enter', ' '].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
state.items[state.activeIndex]?.click();
|
||||
root.close();
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
if (nextIndex !== activeIndex) {
|
||||
setActiveItem(nextIndex);
|
||||
}
|
||||
if (nextIndex !== state.activeIndex) setActiveItem(state, nextIndex);
|
||||
});
|
||||
|
||||
menu.addEventListener('mousemove', (event) => {
|
||||
state.menu.addEventListener('mousemove', (event) => {
|
||||
const menuItem = event.target.closest('[role^="menuitem"]');
|
||||
if (menuItem && !isDisabled(menuItem) && menuItems.includes(menuItem)) {
|
||||
const index = menuItems.indexOf(menuItem);
|
||||
if (index !== activeIndex) {
|
||||
setActiveItem(index);
|
||||
}
|
||||
if (menuItem && !isDisabled(menuItem) && state.items.includes(menuItem)) {
|
||||
const index = state.items.indexOf(menuItem);
|
||||
if (index !== state.activeIndex) setActiveItem(state, index);
|
||||
}
|
||||
});
|
||||
|
||||
menu.addEventListener('mouseleave', () => {
|
||||
setActiveItem(-1);
|
||||
});
|
||||
|
||||
menu.addEventListener('click', (event) => {
|
||||
state.menu.addEventListener('mouseleave', () => setActiveItem(state, -1));
|
||||
state.menu.addEventListener('click', (event) => {
|
||||
const menuItem = event.target.closest('[role^="menuitem"]');
|
||||
if (menuItem && !isDisabled(menuItem)) {
|
||||
closePopover();
|
||||
}
|
||||
if (menuItem && !isDisabled(menuItem)) root.close();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!dropdownMenuComponent.contains(event.target)) {
|
||||
closePopover();
|
||||
}
|
||||
if (!root.contains(event.target)) root.close(false);
|
||||
});
|
||||
|
||||
document.addEventListener('basecoat:popover', (event) => {
|
||||
if (event.detail.source !== dropdownMenuComponent) {
|
||||
closePopover(false);
|
||||
}
|
||||
if (event.detail.source !== root) root.close(false);
|
||||
});
|
||||
|
||||
dropdownMenuComponent.dataset.dropdownMenuInitialized = true;
|
||||
dropdownMenuComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
state.trigger.setAttribute('aria-expanded', 'false');
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
root.dataset.dropdownMenuInitialized = 'true';
|
||||
root.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('dropdown-menu', '.dropdown-menu:not([data-dropdown-menu-initialized])', initDropdownMenu);
|
||||
window.basecoat.register('dropdown-menu', {
|
||||
selector: '.dropdown-menu:not([data-dropdown-menu-initialized])',
|
||||
init: initDropdownMenu,
|
||||
refresh: refreshDropdownMenu,
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+294
-318
@@ -1,380 +1,356 @@
|
||||
(() => {
|
||||
const initSelect = (selectComponent) => {
|
||||
const trigger = selectComponent.querySelector(':scope > button');
|
||||
const selectedLabel = trigger.querySelector(':scope > span');
|
||||
const popover = selectComponent.querySelector(':scope > [data-popover]');
|
||||
const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
|
||||
const input = selectComponent.querySelector(':scope > input[type="hidden"]');
|
||||
const states = new WeakMap();
|
||||
|
||||
if (!trigger || !popover || !listbox || !input) {
|
||||
const getElements = (root) => {
|
||||
const trigger = root.querySelector(':scope > button');
|
||||
const selectedLabel = trigger?.querySelector(':scope > span') || null;
|
||||
const popover = root.querySelector(':scope > [data-popover]');
|
||||
const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
|
||||
const input = root.querySelector(':scope > input[type="hidden"]');
|
||||
return { trigger, selectedLabel, popover, listbox, input };
|
||||
};
|
||||
|
||||
const getValue = (option) => option.dataset.value ?? option.textContent.trim();
|
||||
const isDisabled = (option) => option.getAttribute('aria-disabled') === 'true';
|
||||
|
||||
const getOptions = (listbox) => {
|
||||
const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
|
||||
return {
|
||||
allOptions,
|
||||
options: allOptions.filter(option => !isDisabled(option)),
|
||||
};
|
||||
};
|
||||
|
||||
const scrollOptionIntoListbox = (state, option) => {
|
||||
const optionRect = option.getBoundingClientRect();
|
||||
const listboxRect = state.listbox.getBoundingClientRect();
|
||||
|
||||
if (optionRect.top < listboxRect.top) {
|
||||
state.listbox.scrollTop -= listboxRect.top - optionRect.top;
|
||||
} else if (optionRect.bottom > listboxRect.bottom) {
|
||||
state.listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveOption = (state, index) => {
|
||||
if (state.activeIndex > -1 && state.options[state.activeIndex]) {
|
||||
state.options[state.activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
state.activeIndex = index;
|
||||
|
||||
if (state.activeIndex > -1) {
|
||||
const activeOption = state.options[state.activeIndex];
|
||||
activeOption.classList.add('active');
|
||||
if (activeOption.id) {
|
||||
state.trigger.setAttribute('aria-activedescendant', activeOption.id);
|
||||
} else {
|
||||
state.trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
} else {
|
||||
state.trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const updateValue = (root, optionOrOptions, triggerEvent = true) => {
|
||||
const state = states.get(root);
|
||||
let value;
|
||||
|
||||
if (state.isMultiple) {
|
||||
const selected = Array.isArray(optionOrOptions) ? optionOrOptions : [];
|
||||
state.selectedOptions.clear();
|
||||
selected.forEach(option => state.selectedOptions.add(option));
|
||||
|
||||
const selectedInOrder = state.options.filter(option => state.selectedOptions.has(option));
|
||||
if (selectedInOrder.length === 0) {
|
||||
state.selectedLabel.textContent = state.placeholder;
|
||||
state.selectedLabel.classList.add('text-muted-foreground');
|
||||
} else {
|
||||
state.selectedLabel.textContent = selectedInOrder.map(option => option.dataset.label || option.textContent.trim()).join(', ');
|
||||
state.selectedLabel.classList.remove('text-muted-foreground');
|
||||
}
|
||||
|
||||
value = selectedInOrder.map(getValue);
|
||||
state.input.value = JSON.stringify(value);
|
||||
} else {
|
||||
const option = optionOrOptions;
|
||||
if (!option) return;
|
||||
state.selectedLabel.innerHTML = option.innerHTML;
|
||||
value = getValue(option);
|
||||
state.input.value = value;
|
||||
}
|
||||
|
||||
state.options.forEach(option => {
|
||||
const isSelected = state.isMultiple ? state.selectedOptions.has(option) : option === optionOrOptions;
|
||||
if (isSelected) {
|
||||
option.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
option.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
|
||||
if (triggerEvent) {
|
||||
root.dispatchEvent(new CustomEvent('change', {
|
||||
detail: { value },
|
||||
bubbles: true,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const closePopover = (state, focusOnTrigger = true) => {
|
||||
if (state.popover.getAttribute('aria-hidden') === 'true') return;
|
||||
if (focusOnTrigger) state.trigger.focus();
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
state.trigger.setAttribute('aria-expanded', 'false');
|
||||
setActiveOption(state, -1);
|
||||
};
|
||||
|
||||
const refreshSelect = (root) => {
|
||||
const state = states.get(root);
|
||||
if (!state) return;
|
||||
|
||||
const elements = getElements(root);
|
||||
if (!elements.trigger || !elements.selectedLabel || !elements.popover || !elements.listbox || !elements.input) {
|
||||
const missing = [];
|
||||
if (!trigger) missing.push('trigger');
|
||||
if (!popover) missing.push('popover');
|
||||
if (!listbox) missing.push('listbox');
|
||||
if (!input) missing.push('input');
|
||||
console.error(`Select component initialisation failed. Missing element(s): ${missing.join(', ')}`, selectComponent);
|
||||
if (!elements.trigger) missing.push('trigger');
|
||||
if (!elements.selectedLabel) missing.push('selected label');
|
||||
if (!elements.popover) missing.push('popover');
|
||||
if (!elements.listbox) missing.push('listbox');
|
||||
if (!elements.input) missing.push('input');
|
||||
console.error(`Select component refresh failed. Missing element(s): ${missing.join(', ')}`, root);
|
||||
return;
|
||||
}
|
||||
|
||||
const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
|
||||
const options = allOptions.filter(opt => opt.getAttribute('aria-disabled') !== 'true');
|
||||
let visibleOptions = [...options];
|
||||
let activeIndex = -1;
|
||||
const isMultiple = listbox.getAttribute('aria-multiselectable') === 'true';
|
||||
const selectedOptions = isMultiple ? new Set() : null;
|
||||
const placeholder = isMultiple ? (selectComponent.dataset.placeholder || '') : null;
|
||||
const closeOnSelect = selectComponent.dataset.closeOnSelect === 'true';
|
||||
const previousValue = elements.input.value;
|
||||
Object.assign(state, elements, getOptions(elements.listbox));
|
||||
state.visibleOptions = [...state.options];
|
||||
state.isMultiple = state.listbox.getAttribute('aria-multiselectable') === 'true';
|
||||
state.placeholder = state.isMultiple ? (root.dataset.placeholder || '') : null;
|
||||
state.closeOnSelect = root.dataset.closeOnSelect === 'true';
|
||||
|
||||
const getValue = (opt) => opt.dataset.value ?? opt.textContent.trim();
|
||||
|
||||
const scrollOptionIntoListbox = (option) => {
|
||||
const optionRect = option.getBoundingClientRect();
|
||||
const listboxRect = listbox.getBoundingClientRect();
|
||||
|
||||
if (optionRect.top < listboxRect.top) {
|
||||
listbox.scrollTop -= listboxRect.top - optionRect.top;
|
||||
} else if (optionRect.bottom > listboxRect.bottom) {
|
||||
listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
|
||||
}
|
||||
};
|
||||
|
||||
const setActiveOption = (index) => {
|
||||
if (activeIndex > -1 && options[activeIndex]) {
|
||||
options[activeIndex].classList.remove('active');
|
||||
}
|
||||
|
||||
activeIndex = index;
|
||||
|
||||
if (activeIndex > -1) {
|
||||
const activeOption = options[activeIndex];
|
||||
activeOption.classList.add('active');
|
||||
if (activeOption.id) {
|
||||
trigger.setAttribute('aria-activedescendant', activeOption.id);
|
||||
} else {
|
||||
trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
} else {
|
||||
trigger.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
const updateValue = (optionOrOptions, triggerEvent = true) => {
|
||||
let value;
|
||||
|
||||
if (isMultiple) {
|
||||
const opts = Array.isArray(optionOrOptions) ? optionOrOptions : [];
|
||||
selectedOptions.clear();
|
||||
opts.forEach(opt => selectedOptions.add(opt));
|
||||
|
||||
// Get selected options in DOM order
|
||||
const selected = options.filter(opt => selectedOptions.has(opt));
|
||||
if (selected.length === 0) {
|
||||
selectedLabel.textContent = placeholder;
|
||||
selectedLabel.classList.add('text-muted-foreground');
|
||||
} else {
|
||||
selectedLabel.textContent = selected.map(opt => opt.dataset.label || opt.textContent.trim()).join(', ');
|
||||
selectedLabel.classList.remove('text-muted-foreground');
|
||||
}
|
||||
|
||||
value = selected.map(getValue);
|
||||
input.value = JSON.stringify(value);
|
||||
} else {
|
||||
const option = optionOrOptions;
|
||||
if (!option) return;
|
||||
selectedLabel.innerHTML = option.innerHTML;
|
||||
value = getValue(option);
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
options.forEach(opt => {
|
||||
const isSelected = isMultiple ? selectedOptions.has(opt) : opt === optionOrOptions;
|
||||
if (isSelected) {
|
||||
opt.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
opt.removeAttribute('aria-selected');
|
||||
}
|
||||
});
|
||||
|
||||
if (triggerEvent) {
|
||||
selectComponent.dispatchEvent(new CustomEvent('change', {
|
||||
detail: { value },
|
||||
bubbles: true
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const closePopover = (focusOnTrigger = true) => {
|
||||
if (popover.getAttribute('aria-hidden') === 'true') return;
|
||||
|
||||
if (focusOnTrigger) trigger.focus();
|
||||
popover.setAttribute('aria-hidden', 'true');
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
setActiveOption(-1);
|
||||
};
|
||||
|
||||
const toggleMultipleValue = (option) => {
|
||||
if (selectedOptions.has(option)) {
|
||||
selectedOptions.delete(option);
|
||||
} else {
|
||||
selectedOptions.add(option);
|
||||
}
|
||||
updateValue(options.filter(opt => selectedOptions.has(opt)));
|
||||
};
|
||||
|
||||
const select = (value) => {
|
||||
if (isMultiple) {
|
||||
const option = options.find(opt => getValue(opt) === value && !selectedOptions.has(opt));
|
||||
if (!option) return;
|
||||
selectedOptions.add(option);
|
||||
updateValue(options.filter(opt => selectedOptions.has(opt)));
|
||||
} else {
|
||||
const option = options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
if (input.value !== value) {
|
||||
updateValue(option);
|
||||
}
|
||||
closePopover();
|
||||
}
|
||||
};
|
||||
|
||||
const deselect = (value) => {
|
||||
if (!isMultiple) return;
|
||||
const option = options.find(opt => getValue(opt) === value && selectedOptions.has(opt));
|
||||
if (!option) return;
|
||||
selectedOptions.delete(option);
|
||||
updateValue(options.filter(opt => selectedOptions.has(opt)));
|
||||
};
|
||||
|
||||
const toggle = (value) => {
|
||||
if (!isMultiple) return;
|
||||
const option = options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
toggleMultipleValue(option);
|
||||
};
|
||||
|
||||
// Initialization
|
||||
if (isMultiple) {
|
||||
const ariaSelected = options.filter(opt => opt.getAttribute('aria-selected') === 'true');
|
||||
if (state.isMultiple) {
|
||||
if (!state.selectedOptions) state.selectedOptions = new Set();
|
||||
let values = [];
|
||||
try {
|
||||
const parsed = JSON.parse(input.value || '[]');
|
||||
const validValues = new Set(options.map(getValue));
|
||||
const initialValues = Array.isArray(parsed) ? parsed.filter(v => validValues.has(v)) : [];
|
||||
|
||||
const initialOptions = [];
|
||||
if (initialValues.length > 0) {
|
||||
// Match values to options in order, allowing duplicates
|
||||
initialValues.forEach(val => {
|
||||
const opt = options.find(o => getValue(o) === val && !initialOptions.includes(o));
|
||||
if (opt) initialOptions.push(opt);
|
||||
});
|
||||
} else {
|
||||
initialOptions.push(...ariaSelected);
|
||||
}
|
||||
|
||||
updateValue(initialOptions, false);
|
||||
} catch (e) {
|
||||
updateValue(ariaSelected, false);
|
||||
const parsed = JSON.parse(previousValue || '[]');
|
||||
values = Array.isArray(parsed) ? parsed : [];
|
||||
} catch (_) {
|
||||
values = [];
|
||||
}
|
||||
const selected = values.length
|
||||
? values.map(value => state.options.find(option => getValue(option) === value)).filter(Boolean)
|
||||
: state.options.filter(option => option.getAttribute('aria-selected') === 'true');
|
||||
updateValue(root, selected, false);
|
||||
} else {
|
||||
const initialOption = options.find(opt => getValue(opt) === input.value) || options[0];
|
||||
if (initialOption) updateValue(initialOption, false);
|
||||
const selected = state.options.find(option => getValue(option) === previousValue)
|
||||
|| state.options.find(option => option.getAttribute('aria-selected') === 'true');
|
||||
state.options.forEach(option => option.removeAttribute('aria-selected'));
|
||||
if (selected) updateValue(root, selected, false);
|
||||
}
|
||||
|
||||
const handleKeyNavigation = (event) => {
|
||||
const isPopoverOpen = popover.getAttribute('aria-hidden') === 'false';
|
||||
const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
|
||||
setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
|
||||
};
|
||||
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) {
|
||||
return;
|
||||
const toggleMultipleValue = (root, option) => {
|
||||
const state = states.get(root);
|
||||
if (state.selectedOptions.has(option)) {
|
||||
state.selectedOptions.delete(option);
|
||||
} else {
|
||||
state.selectedOptions.add(option);
|
||||
}
|
||||
updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
|
||||
};
|
||||
|
||||
const selectValue = (root, value) => {
|
||||
const state = states.get(root);
|
||||
if (state.isMultiple) {
|
||||
const option = state.options.find(opt => getValue(opt) === value && !state.selectedOptions.has(opt));
|
||||
if (!option) return;
|
||||
state.selectedOptions.add(option);
|
||||
updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
|
||||
} else {
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (!option) return;
|
||||
if (state.input.value !== value) updateValue(root, option);
|
||||
closePopover(state);
|
||||
}
|
||||
};
|
||||
|
||||
const deselectValue = (root, value) => {
|
||||
const state = states.get(root);
|
||||
if (!state.isMultiple) return;
|
||||
const option = state.options.find(opt => getValue(opt) === value && state.selectedOptions.has(opt));
|
||||
if (!option) return;
|
||||
state.selectedOptions.delete(option);
|
||||
updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
|
||||
};
|
||||
|
||||
const handleKeyNavigation = (event, root) => {
|
||||
const state = states.get(root);
|
||||
const isPopoverOpen = state.popover.getAttribute('aria-hidden') === 'false';
|
||||
|
||||
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) return;
|
||||
|
||||
if (!isPopoverOpen) {
|
||||
if (event.key !== 'Enter' && event.key !== 'Escape') {
|
||||
event.preventDefault();
|
||||
root.open();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isPopoverOpen) {
|
||||
if (event.key !== 'Enter' && event.key !== 'Escape') {
|
||||
event.preventDefault();
|
||||
trigger.click();
|
||||
event.preventDefault();
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
root.close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
if (state.activeIndex > -1) {
|
||||
const option = state.options[state.activeIndex];
|
||||
if (state.isMultiple) {
|
||||
toggleMultipleValue(root, option);
|
||||
if (state.closeOnSelect) root.close();
|
||||
} else {
|
||||
if (state.input.value !== getValue(option)) updateValue(root, option);
|
||||
root.close();
|
||||
}
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
if (state.visibleOptions.length === 0) return;
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
closePopover();
|
||||
return;
|
||||
}
|
||||
const currentVisibleIndex = state.activeIndex > -1 ? state.visibleOptions.indexOf(state.options[state.activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
if (activeIndex > -1) {
|
||||
const option = options[activeIndex];
|
||||
if (isMultiple) {
|
||||
toggleMultipleValue(option);
|
||||
if (closeOnSelect) {
|
||||
closePopover();
|
||||
}
|
||||
} else {
|
||||
if (input.value !== getValue(option)) {
|
||||
updateValue(option);
|
||||
}
|
||||
closePopover();
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleOptions.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
|
||||
if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
|
||||
if (event.key === 'Home') nextVisibleIndex = 0;
|
||||
if (event.key === 'End') nextVisibleIndex = state.visibleOptions.length - 1;
|
||||
|
||||
if (visibleOptions.length === 0) return;
|
||||
if (nextVisibleIndex !== currentVisibleIndex) {
|
||||
const newActiveOption = state.visibleOptions[nextVisibleIndex];
|
||||
setActiveOption(state, state.options.indexOf(newActiveOption));
|
||||
scrollOptionIntoListbox(state, newActiveOption);
|
||||
}
|
||||
};
|
||||
|
||||
const currentVisibleIndex = activeIndex > -1 ? visibleOptions.indexOf(options[activeIndex]) : -1;
|
||||
let nextVisibleIndex = currentVisibleIndex;
|
||||
const initSelect = (root) => {
|
||||
if (root.dataset.selectInitialized) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
if (currentVisibleIndex < visibleOptions.length - 1) {
|
||||
nextVisibleIndex = currentVisibleIndex + 1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (currentVisibleIndex > 0) {
|
||||
nextVisibleIndex = currentVisibleIndex - 1;
|
||||
} else if (currentVisibleIndex === -1) {
|
||||
nextVisibleIndex = 0;
|
||||
}
|
||||
break;
|
||||
case 'Home':
|
||||
nextVisibleIndex = 0;
|
||||
break;
|
||||
case 'End':
|
||||
nextVisibleIndex = visibleOptions.length - 1;
|
||||
break;
|
||||
}
|
||||
const state = { activeIndex: -1, selectedOptions: null, options: [], allOptions: [], visibleOptions: [] };
|
||||
states.set(root, state);
|
||||
root.refresh = () => refreshSelect(root);
|
||||
|
||||
if (nextVisibleIndex !== currentVisibleIndex) {
|
||||
const newActiveOption = visibleOptions[nextVisibleIndex];
|
||||
setActiveOption(options.indexOf(newActiveOption));
|
||||
scrollOptionIntoListbox(newActiveOption);
|
||||
refreshSelect(root);
|
||||
if (!state.trigger || !state.selectedLabel || !state.popover || !state.listbox || !state.input) {
|
||||
states.delete(root);
|
||||
return;
|
||||
}
|
||||
|
||||
root.open = () => {
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
|
||||
root.refresh();
|
||||
state.popover.setAttribute('aria-hidden', 'false');
|
||||
state.trigger.setAttribute('aria-expanded', 'true');
|
||||
|
||||
const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
|
||||
if (selectedOption) {
|
||||
setActiveOption(state, state.options.indexOf(selectedOption));
|
||||
scrollOptionIntoListbox(state, selectedOption);
|
||||
}
|
||||
};
|
||||
root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
|
||||
root.togglePopover = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open();
|
||||
|
||||
listbox.addEventListener('mousemove', (event) => {
|
||||
state.trigger.addEventListener('keydown', (event) => handleKeyNavigation(event, root));
|
||||
state.trigger.addEventListener('click', root.togglePopover);
|
||||
|
||||
state.listbox.addEventListener('mousemove', (event) => {
|
||||
const option = event.target.closest('[role="option"]');
|
||||
if (option && visibleOptions.includes(option)) {
|
||||
const index = options.indexOf(option);
|
||||
if (index !== activeIndex) {
|
||||
setActiveOption(index);
|
||||
}
|
||||
if (option && state.visibleOptions.includes(option)) {
|
||||
const index = state.options.indexOf(option);
|
||||
if (index !== state.activeIndex) setActiveOption(state, index);
|
||||
}
|
||||
});
|
||||
|
||||
listbox.addEventListener('mouseleave', () => {
|
||||
const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
|
||||
if (selectedOption) {
|
||||
setActiveOption(options.indexOf(selectedOption));
|
||||
} else {
|
||||
setActiveOption(-1);
|
||||
}
|
||||
state.listbox.addEventListener('mouseleave', () => {
|
||||
const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
|
||||
setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
|
||||
});
|
||||
|
||||
trigger.addEventListener('keydown', handleKeyNavigation);
|
||||
const openPopover = () => {
|
||||
document.dispatchEvent(new CustomEvent('basecoat:popover', {
|
||||
detail: { source: selectComponent }
|
||||
}));
|
||||
|
||||
popover.setAttribute('aria-hidden', 'false');
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
|
||||
const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
|
||||
if (selectedOption) {
|
||||
setActiveOption(options.indexOf(selectedOption));
|
||||
scrollOptionIntoListbox(selectedOption);
|
||||
}
|
||||
};
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
|
||||
if (isExpanded) {
|
||||
closePopover();
|
||||
} else {
|
||||
openPopover();
|
||||
}
|
||||
});
|
||||
|
||||
listbox.addEventListener('click', (event) => {
|
||||
state.listbox.addEventListener('click', (event) => {
|
||||
const clickedOption = event.target.closest('[role="option"]');
|
||||
if (!clickedOption) return;
|
||||
|
||||
const option = options.find(opt => opt === clickedOption);
|
||||
const option = state.options.find(opt => opt === clickedOption);
|
||||
if (!option) return;
|
||||
|
||||
if (isMultiple) {
|
||||
toggleMultipleValue(option);
|
||||
if (closeOnSelect) {
|
||||
closePopover();
|
||||
if (state.isMultiple) {
|
||||
toggleMultipleValue(root, option);
|
||||
if (state.closeOnSelect) {
|
||||
root.close();
|
||||
} else {
|
||||
setActiveOption(options.indexOf(option));
|
||||
trigger.focus();
|
||||
setActiveOption(state, state.options.indexOf(option));
|
||||
state.trigger.focus();
|
||||
}
|
||||
} else {
|
||||
if (input.value !== getValue(option)) {
|
||||
updateValue(option);
|
||||
}
|
||||
closePopover();
|
||||
if (state.input.value !== getValue(option)) updateValue(root, option);
|
||||
root.close();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!selectComponent.contains(event.target)) {
|
||||
closePopover(false);
|
||||
}
|
||||
if (!root.contains(event.target)) root.close(false);
|
||||
});
|
||||
|
||||
document.addEventListener('basecoat:popover', (event) => {
|
||||
if (event.detail.source !== selectComponent) {
|
||||
closePopover(false);
|
||||
}
|
||||
if (event.detail.source !== root) root.close(false);
|
||||
});
|
||||
|
||||
popover.setAttribute('aria-hidden', 'true');
|
||||
|
||||
// Public API
|
||||
Object.defineProperty(selectComponent, 'value', {
|
||||
get: () => {
|
||||
if (isMultiple) {
|
||||
return options.filter(opt => selectedOptions.has(opt)).map(getValue);
|
||||
Object.defineProperty(root, 'value', {
|
||||
configurable: true,
|
||||
get: () => state.isMultiple ? state.options.filter(option => state.selectedOptions.has(option)).map(getValue) : state.input.value,
|
||||
set: (value) => {
|
||||
if (state.isMultiple) {
|
||||
const values = Array.isArray(value) ? value : (value != null ? [value] : []);
|
||||
updateValue(root, values.map(v => state.options.find(option => getValue(option) === v)).filter(Boolean));
|
||||
} else {
|
||||
return input.value;
|
||||
}
|
||||
},
|
||||
set: (val) => {
|
||||
if (isMultiple) {
|
||||
const values = Array.isArray(val) ? val : (val != null ? [val] : []);
|
||||
const opts = [];
|
||||
values.forEach(v => {
|
||||
const opt = options.find(o => getValue(o) === v && !opts.includes(o));
|
||||
if (opt) opts.push(opt);
|
||||
});
|
||||
updateValue(opts);
|
||||
} else {
|
||||
const option = options.find(opt => getValue(opt) === val);
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (option) {
|
||||
updateValue(option);
|
||||
closePopover();
|
||||
updateValue(root, option);
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
selectComponent.select = select;
|
||||
selectComponent.selectByValue = select; // Backward compatibility alias
|
||||
if (isMultiple) {
|
||||
selectComponent.deselect = deselect;
|
||||
selectComponent.toggle = toggle;
|
||||
selectComponent.selectAll = () => updateValue(options);
|
||||
selectComponent.selectNone = () => updateValue([]);
|
||||
root.select = (value) => selectValue(root, value);
|
||||
root.selectByValue = root.select;
|
||||
if (state.isMultiple) {
|
||||
root.deselect = (value) => deselectValue(root, value);
|
||||
root.toggle = (value) => {
|
||||
const option = state.options.find(opt => getValue(opt) === value);
|
||||
if (option) toggleMultipleValue(root, option);
|
||||
};
|
||||
root.selectAll = () => updateValue(root, state.options);
|
||||
root.selectNone = () => updateValue(root, []);
|
||||
}
|
||||
selectComponent.dataset.selectInitialized = true;
|
||||
selectComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
|
||||
state.popover.setAttribute('aria-hidden', 'true');
|
||||
state.trigger.setAttribute('aria-expanded', 'false');
|
||||
root.dataset.selectInitialized = 'true';
|
||||
root.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('select', 'div.select:not([data-select-initialized])', initSelect);
|
||||
window.basecoat.register('select', {
|
||||
selector: 'div.select:not([data-select-initialized])',
|
||||
init: initSelect,
|
||||
refresh: refreshSelect,
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+16
-29
@@ -1,15 +1,17 @@
|
||||
(() => {
|
||||
const initSidebar = (sidebarComponent) => {
|
||||
if (sidebarComponent.dataset.sidebarInitialized) return;
|
||||
|
||||
const initialOpen = sidebarComponent.dataset.initialOpen !== 'false';
|
||||
const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === 'true';
|
||||
const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
|
||||
|
||||
let open = breakpoint > 0
|
||||
|
||||
let open = breakpoint > 0
|
||||
? (window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen)
|
||||
: initialOpen;
|
||||
|
||||
|
||||
const updateState = () => {
|
||||
sidebarComponent.setAttribute('aria-hidden', !open);
|
||||
sidebarComponent.setAttribute('aria-hidden', String(!open));
|
||||
if (open) {
|
||||
sidebarComponent.removeAttribute('inert');
|
||||
} else {
|
||||
@@ -18,48 +20,33 @@
|
||||
};
|
||||
|
||||
const setState = (state) => {
|
||||
open = state;
|
||||
open = Boolean(state);
|
||||
updateState();
|
||||
};
|
||||
|
||||
const sidebarId = sidebarComponent.id;
|
||||
sidebarComponent.open = () => setState(true);
|
||||
sidebarComponent.close = () => setState(false);
|
||||
sidebarComponent.toggle = () => setState(!open);
|
||||
|
||||
document.addEventListener('basecoat:sidebar', (event) => {
|
||||
if (event.detail?.id && event.detail.id !== sidebarId) return;
|
||||
|
||||
switch (event.detail?.action) {
|
||||
case 'open':
|
||||
setState(true);
|
||||
break;
|
||||
case 'close':
|
||||
setState(false);
|
||||
break;
|
||||
default:
|
||||
setState(!open);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
sidebarComponent.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
const nav = sidebarComponent.querySelector('nav');
|
||||
|
||||
const isMobile = window.innerWidth < breakpoint;
|
||||
|
||||
if (isMobile && (target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]'))) {
|
||||
|
||||
if (isMobile && target.closest('a, button') && !target.closest('[data-keep-mobile-sidebar-open]')) {
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
setState(false);
|
||||
sidebarComponent.close();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (target === sidebarComponent || (nav && !nav.contains(target))) {
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
setState(false);
|
||||
sidebarComponent.close();
|
||||
}
|
||||
});
|
||||
|
||||
updateState();
|
||||
sidebarComponent.dataset.sidebarInitialized = true;
|
||||
sidebarComponent.dataset.sidebarInitialized = 'true';
|
||||
sidebarComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
|
||||
+59
-49
@@ -1,81 +1,91 @@
|
||||
(() => {
|
||||
const initTabs = (tabsComponent) => {
|
||||
const tablist = tabsComponent.querySelector('[role="tablist"]');
|
||||
if (!tablist) return;
|
||||
const states = new WeakMap();
|
||||
|
||||
const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
|
||||
const isDisabled = (tab) => tab.disabled || tab.getAttribute('aria-disabled') === 'true';
|
||||
|
||||
const getElements = (root) => {
|
||||
const tablist = root.querySelector('[role="tablist"]');
|
||||
const tabs = tablist ? Array.from(tablist.querySelectorAll('[role="tab"]')) : [];
|
||||
const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
|
||||
return { tablist, tabs, panels };
|
||||
};
|
||||
|
||||
const isDisabled = (tab) => tab.disabled || tab.getAttribute('aria-disabled') === 'true';
|
||||
const getEnabledTabs = () => tabs.filter(tab => !isDisabled(tab));
|
||||
const refreshTabs = (root) => {
|
||||
const state = states.get(root);
|
||||
if (!state) return;
|
||||
|
||||
const selectTab = (tabToSelect) => {
|
||||
if (isDisabled(tabToSelect)) return;
|
||||
Object.assign(state, getElements(root));
|
||||
if (!state.tablist) return;
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
const selected = state.tabs.find(tab => tab.getAttribute('aria-selected') === 'true' && !isDisabled(tab))
|
||||
|| state.tabs.find(tab => !isDisabled(tab));
|
||||
if (selected) root.select(selected, false);
|
||||
};
|
||||
|
||||
const initTabs = (root) => {
|
||||
if (root.dataset.tabsInitialized) return;
|
||||
|
||||
const state = {};
|
||||
states.set(root, state);
|
||||
root.refresh = () => refreshTabs(root);
|
||||
|
||||
const selectTab = (tabToSelect, focus = false) => {
|
||||
if (!tabToSelect || isDisabled(tabToSelect)) return;
|
||||
|
||||
state.tabs.forEach((tab) => {
|
||||
tab.setAttribute('aria-selected', 'false');
|
||||
tab.setAttribute('tabindex', '-1');
|
||||
if (panels[index]) panels[index].hidden = true;
|
||||
const panel = document.getElementById(tab.getAttribute('aria-controls'));
|
||||
if (panel) panel.hidden = true;
|
||||
});
|
||||
|
||||
tabToSelect.setAttribute('aria-selected', 'true');
|
||||
tabToSelect.setAttribute('tabindex', '0');
|
||||
const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
|
||||
if (activePanel) activePanel.hidden = false;
|
||||
if (focus) tabToSelect.focus();
|
||||
};
|
||||
|
||||
tablist.addEventListener('click', (event) => {
|
||||
root.select = selectTab;
|
||||
refreshTabs(root);
|
||||
if (!state.tablist) return;
|
||||
|
||||
state.tablist.addEventListener('click', (event) => {
|
||||
const clickedTab = event.target.closest('[role="tab"]');
|
||||
if (clickedTab) selectTab(clickedTab);
|
||||
if (clickedTab) root.select(clickedTab);
|
||||
});
|
||||
|
||||
tablist.addEventListener('keydown', (event) => {
|
||||
state.tablist.addEventListener('keydown', (event) => {
|
||||
const currentTab = event.target;
|
||||
if (!tabs.includes(currentTab)) return;
|
||||
if (!state.tabs.includes(currentTab)) return;
|
||||
|
||||
let nextTab;
|
||||
const enabledTabs = getEnabledTabs();
|
||||
const enabledTabs = state.tabs.filter(tab => !isDisabled(tab));
|
||||
const currentIndex = enabledTabs.indexOf(currentTab);
|
||||
const orientation = tablist.getAttribute('aria-orientation') || 'horizontal';
|
||||
const orientation = state.tablist.getAttribute('aria-orientation') || 'horizontal';
|
||||
if (currentIndex === -1) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
if (orientation !== 'horizontal') return;
|
||||
nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
if (orientation !== 'horizontal') return;
|
||||
nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (orientation !== 'vertical') return;
|
||||
nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
if (orientation !== 'vertical') return;
|
||||
nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
|
||||
break;
|
||||
case 'Home':
|
||||
nextTab = enabledTabs[0];
|
||||
break;
|
||||
case 'End':
|
||||
nextTab = enabledTabs[enabledTabs.length - 1];
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
let nextTab;
|
||||
if (event.key === 'ArrowRight' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
|
||||
if (event.key === 'ArrowLeft' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
|
||||
if (event.key === 'ArrowDown' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
|
||||
if (event.key === 'ArrowUp' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
|
||||
if (event.key === 'Home') nextTab = enabledTabs[0];
|
||||
if (event.key === 'End') nextTab = enabledTabs[enabledTabs.length - 1];
|
||||
if (!nextTab) return;
|
||||
|
||||
event.preventDefault();
|
||||
selectTab(nextTab);
|
||||
nextTab.focus();
|
||||
root.select(nextTab, true);
|
||||
});
|
||||
|
||||
tabsComponent.dataset.tabsInitialized = true;
|
||||
tabsComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
|
||||
root.dataset.tabsInitialized = 'true';
|
||||
root.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
};
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('tabs', '.tabs:not([data-tabs-initialized])', initTabs);
|
||||
window.basecoat.register('tabs', {
|
||||
selector: '.tabs:not([data-tabs-initialized])',
|
||||
init: initTabs,
|
||||
refresh: refreshTabs,
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
+22
-33
@@ -23,6 +23,16 @@
|
||||
}
|
||||
});
|
||||
|
||||
toasterElement.toast = (config = {}) => {
|
||||
const toastElement = createToast(config);
|
||||
toasterElement.appendChild(toastElement);
|
||||
initToast(toastElement);
|
||||
return toastElement;
|
||||
};
|
||||
toasterElement.closeAll = () => {
|
||||
toasterElement.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(closeToast);
|
||||
};
|
||||
|
||||
toaster.querySelectorAll('.toast:not([data-toast-initialized])').forEach(initToast);
|
||||
toaster.dataset.toasterInitialized = 'true';
|
||||
toaster.dispatchEvent(new CustomEvent('basecoat:initialized'));
|
||||
@@ -35,13 +45,13 @@
|
||||
const timeoutDuration = duration !== -1
|
||||
? duration || (element.dataset.category === 'error' ? 5000 : 3000)
|
||||
: -1;
|
||||
|
||||
|
||||
const state = {
|
||||
remainingTime: timeoutDuration,
|
||||
timeoutId: null,
|
||||
startTime: null,
|
||||
};
|
||||
|
||||
|
||||
if (timeoutDuration !== -1) {
|
||||
if (isPaused) {
|
||||
state.timeoutId = null;
|
||||
@@ -51,18 +61,19 @@
|
||||
}
|
||||
}
|
||||
toasts.set(element, state);
|
||||
|
||||
|
||||
element.close = () => closeToast(element);
|
||||
element.dataset.toastInitialized = 'true';
|
||||
}
|
||||
|
||||
function pauseAllTimeouts() {
|
||||
if (isPaused) return;
|
||||
if (isPaused || !toaster) return;
|
||||
|
||||
isPaused = true;
|
||||
|
||||
|
||||
toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
|
||||
if (!toasts.has(element)) return;
|
||||
|
||||
|
||||
const state = toasts.get(element);
|
||||
if (state.timeoutId) {
|
||||
clearTimeout(state.timeoutId);
|
||||
@@ -73,7 +84,7 @@
|
||||
}
|
||||
|
||||
function resumeAllTimeouts() {
|
||||
if (!isPaused) return;
|
||||
if (!isPaused || !toaster) return;
|
||||
|
||||
isPaused = false;
|
||||
|
||||
@@ -93,28 +104,17 @@
|
||||
}
|
||||
|
||||
function closeToast(element) {
|
||||
if (!toasts.has(element)) return;
|
||||
if (!element || !toasts.has(element)) return;
|
||||
|
||||
const state = toasts.get(element);
|
||||
clearTimeout(state.timeoutId);
|
||||
toasts.delete(element);
|
||||
|
||||
|
||||
if (element.contains(document.activeElement)) document.activeElement.blur();
|
||||
element.setAttribute('aria-hidden', 'true');
|
||||
element.addEventListener('transitionend', () => element.remove(), { once: true });
|
||||
}
|
||||
|
||||
function executeAction(button, toast) {
|
||||
const actionString = button.dataset.toastAction;
|
||||
if (!actionString) return;
|
||||
try {
|
||||
const func = new Function('close', actionString);
|
||||
func(() => closeToast(toast));
|
||||
} catch (event) {
|
||||
console.error('Error executing toast action:', event);
|
||||
}
|
||||
}
|
||||
|
||||
function createToast(config) {
|
||||
const {
|
||||
category = 'info',
|
||||
@@ -135,7 +135,7 @@
|
||||
? `<button type="button" class="btn" data-toast-action onclick="${action.onclick}">${action.label}</button>`
|
||||
: '';
|
||||
const cancelHtml = cancel
|
||||
? `<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${cancel?.onclick}">${cancel.label}</button>`
|
||||
? `<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${cancel?.onclick || ''}">${cancel.label}</button>`
|
||||
: '';
|
||||
|
||||
const footerHtml = actionHtml || cancelHtml ? `<footer>${actionHtml}${cancelHtml}</footer>` : '';
|
||||
@@ -155,7 +155,6 @@
|
||||
${descriptionHtml}
|
||||
</section>
|
||||
${footerHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -164,18 +163,8 @@
|
||||
return template.content.firstChild;
|
||||
}
|
||||
|
||||
document.addEventListener('basecoat:toast', (event) => {
|
||||
if (!toaster) {
|
||||
console.error('Cannot create toast: toaster container not found on page.');
|
||||
return;
|
||||
}
|
||||
const config = event.detail?.config || {};
|
||||
const toastElement = createToast(config);
|
||||
toaster.appendChild(toastElement);
|
||||
});
|
||||
|
||||
if (window.basecoat) {
|
||||
window.basecoat.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
|
||||
window.basecoat.register('toast', '.toast:not([data-toast-initialized])', initToast);
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user