536 lines
15 KiB
Plaintext
536 lines
15 KiB
Plaintext
component Drawer {
|
|
outputs {
|
|
open(payload: { placement: string; sourceEvent: Event })
|
|
close(payload: { reason: string; placement: string; sourceEvent: Event })
|
|
cancel(payload: { placement: string; sourceEvent: Event })
|
|
}
|
|
|
|
props {
|
|
open: boolean = false
|
|
defaultOpen: boolean = false
|
|
placement: string = "right"
|
|
size: string = "md"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
title: string = "Drawer"
|
|
description: string = ""
|
|
icon: string = ""
|
|
label: string = "Drawer"
|
|
closeLabel: string = "Close drawer"
|
|
showClose: boolean = true
|
|
closeOnBackdrop: boolean = true
|
|
closeOnEscape: boolean = true
|
|
// Open/close animation length in ms. 0 disables the animation entirely.
|
|
duration: number = 260
|
|
overlay: boolean = true
|
|
scrollable: boolean = true
|
|
triggerLabel: string = ""
|
|
triggerIcon: string = ""
|
|
class: string = ""
|
|
}
|
|
|
|
state visible = defaultOpen
|
|
|
|
functions {
|
|
shared function isOpen() {
|
|
return open || visible
|
|
}
|
|
|
|
client function showDrawer(sourceEvent) {
|
|
visible = true
|
|
output.open({
|
|
placement: placement,
|
|
sourceEvent: sourceEvent
|
|
})
|
|
}
|
|
|
|
client function hideDrawer(reason, sourceEvent) {
|
|
visible = false
|
|
output.close({
|
|
reason: reason,
|
|
placement: placement,
|
|
sourceEvent: sourceEvent
|
|
})
|
|
}
|
|
|
|
client function cancelDrawer(sourceEvent) {
|
|
output.cancel({
|
|
placement: placement,
|
|
sourceEvent: sourceEvent
|
|
})
|
|
hideDrawer("cancel", sourceEvent)
|
|
}
|
|
|
|
client function handleKeydown(sourceEvent) {
|
|
if (closeOnEscape && sourceEvent.key === "Escape") {
|
|
sourceEvent.preventDefault()
|
|
cancelDrawer(sourceEvent)
|
|
}
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Drawer"
|
|
data-open='{open || visible ? "true" : "false"}'
|
|
data-placement='{placement}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
data-overlay='{overlay ? "true" : "false"}'
|
|
data-scrollable='{scrollable ? "true" : "false"}'
|
|
class='wrn-drawer {class}'
|
|
style='--drawer-duration: {duration}ms'
|
|
>
|
|
|
|
{#if triggerLabel}
|
|
<button
|
|
type="button"
|
|
class="wrn-drawer__trigger"
|
|
aria-haspopup="dialog"
|
|
aria-expanded='{open || visible ? "true" : "false"}'
|
|
@click='showDrawer(event)'
|
|
>
|
|
{#if triggerIcon}
|
|
<span class='{triggerIcon}' aria-hidden="true"></span>
|
|
{/if}
|
|
<span>{triggerLabel}</span>
|
|
</button>
|
|
{/if}
|
|
|
|
<span class="wrn-drawer__trigger-slot" @click='showDrawer(event)'>
|
|
<slot name="trigger"></slot>
|
|
</span>
|
|
|
|
<div
|
|
class="wrn-drawer__layer"
|
|
role="presentation"
|
|
@keydown='handleKeydown(event)'
|
|
>
|
|
{#if overlay}
|
|
<button
|
|
type="button"
|
|
class="wrn-drawer__backdrop"
|
|
aria-label='{closeLabel}'
|
|
@click='if (closeOnBackdrop) { cancelDrawer(event) }'
|
|
></button>
|
|
{/if}
|
|
|
|
<section
|
|
class="wrn-drawer__panel"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label='{label || title}'
|
|
tabindex="-1"
|
|
>
|
|
<div class="wrn-drawer__handle" aria-hidden="true"></div>
|
|
|
|
<header class="wrn-drawer__header">
|
|
<div class="wrn-drawer__heading">
|
|
{#if icon}
|
|
<span class='wrn-drawer__icon {icon}' aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
<div class="wrn-drawer__heading-copy">
|
|
<slot name="header"></slot>
|
|
{#if title}
|
|
<h2>{title}</h2>
|
|
{/if}
|
|
{#if description}
|
|
<p>{description}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if showClose}
|
|
<button
|
|
type="button"
|
|
class="wrn-drawer__close"
|
|
aria-label='{closeLabel}'
|
|
@click='hideDrawer("close-button", event)'
|
|
>
|
|
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
|
</button>
|
|
{/if}
|
|
</header>
|
|
|
|
<div class="wrn-drawer__body">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<footer class="wrn-drawer__footer">
|
|
<slot name="footer"></slot>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-drawer {
|
|
--drawer-accent: var(--wrn-color-primary);
|
|
--drawer-soft: var(--wrn-color-primary-soft);
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.wrn-drawer[data-color="secondary"] {
|
|
--drawer-accent: var(--wrn-color-secondary);
|
|
--drawer-soft: var(--wrn-color-secondary-soft);
|
|
}
|
|
|
|
.wrn-drawer[data-color="info"] {
|
|
--drawer-accent: var(--wrn-color-info);
|
|
--drawer-soft: var(--wrn-color-info-soft);
|
|
}
|
|
|
|
.wrn-drawer[data-color="success"] {
|
|
--drawer-accent: var(--wrn-color-success);
|
|
--drawer-soft: var(--wrn-color-success-soft);
|
|
}
|
|
|
|
.wrn-drawer[data-color="warning"] {
|
|
--drawer-accent: var(--wrn-color-warning);
|
|
--drawer-soft: var(--wrn-color-warning-soft);
|
|
}
|
|
|
|
.wrn-drawer[data-color="danger"] {
|
|
--drawer-accent: var(--wrn-color-danger);
|
|
--drawer-soft: var(--wrn-color-danger-soft);
|
|
}
|
|
|
|
.wrn-drawer__trigger,
|
|
.wrn-drawer__trigger-slot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.wrn-drawer__trigger {
|
|
appearance: none;
|
|
min-height: 2.55rem;
|
|
padding: 0.65rem 1rem;
|
|
color: var(--wrn-color-primary-contrast);
|
|
background: var(--drawer-accent);
|
|
border: 0;
|
|
border-radius: 0.8rem;
|
|
font: inherit;
|
|
font-size: 0.85rem;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
* The layer stays in the layout and is revealed by [data-open]; it used to
|
|
* be toggled with data-show, which sets display:none, and display cannot
|
|
* be transitioned -- the drawer simply snapped in and out. visibility is
|
|
* delayed by the duration on the way out so the panel can finish sliding
|
|
* before the layer is taken out of the hit-testing tree.
|
|
*/
|
|
.wrn-drawer__layer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1200;
|
|
display: flex;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
opacity var(--drawer-duration, 260ms) ease,
|
|
visibility 0s linear var(--drawer-duration, 260ms);
|
|
}
|
|
|
|
.wrn-drawer[data-open="true"] .wrn-drawer__layer {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition:
|
|
opacity var(--drawer-duration, 260ms) ease,
|
|
visibility 0s linear 0s;
|
|
}
|
|
|
|
.wrn-drawer__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
appearance: none;
|
|
padding: 0;
|
|
background: color-mix(in srgb, black 56%, transparent);
|
|
border: 0;
|
|
backdrop-filter: blur(7px);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.wrn-drawer[data-overlay="false"] .wrn-drawer__backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.wrn-drawer__panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(28rem, calc(100vw - 1rem));
|
|
max-height: 100%;
|
|
margin-left: auto;
|
|
color: var(--wrn-color-text);
|
|
background:
|
|
radial-gradient(
|
|
circle at 100% 0%,
|
|
color-mix(in srgb, var(--drawer-accent) 8%, transparent),
|
|
transparent 34%
|
|
),
|
|
var(--wrn-color-surface-raised);
|
|
border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
|
|
box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
|
|
pointer-events: auto;
|
|
overflow: hidden;
|
|
/* Slides in from whichever edge the placement puts it on. */
|
|
transform: translateX(100%);
|
|
transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
|
|
.wrn-drawer[data-open="true"] .wrn-drawer__panel {
|
|
transform: none;
|
|
}
|
|
|
|
.wrn-drawer[data-placement="left"] .wrn-drawer__panel {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.wrn-drawer[data-placement="top"] .wrn-drawer__panel {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.wrn-drawer[data-open="true"][data-placement="left"] .wrn-drawer__panel,
|
|
.wrn-drawer[data-open="true"][data-placement="top"] .wrn-drawer__panel,
|
|
.wrn-drawer[data-open="true"][data-placement="bottom"] .wrn-drawer__panel {
|
|
transform: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wrn-drawer__layer,
|
|
.wrn-drawer__panel {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.wrn-drawer[data-size="sm"] .wrn-drawer__panel {
|
|
width: min(22rem, calc(100vw - 1rem));
|
|
}
|
|
|
|
.wrn-drawer[data-size="lg"] .wrn-drawer__panel {
|
|
width: min(38rem, calc(100vw - 1rem));
|
|
}
|
|
|
|
.wrn-drawer[data-size="xl"] .wrn-drawer__panel {
|
|
width: min(52rem, calc(100vw - 1rem));
|
|
}
|
|
|
|
.wrn-drawer[data-size="full"] .wrn-drawer__panel {
|
|
width: 100vw;
|
|
}
|
|
|
|
.wrn-drawer[data-placement="left"] .wrn-drawer__panel {
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
|
|
border-left: 0;
|
|
box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
|
|
}
|
|
|
|
.wrn-drawer[data-placement="top"] .wrn-drawer__layer,
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.wrn-drawer[data-placement="top"] .wrn-drawer__panel,
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
|
|
width: 100%;
|
|
max-height: min(80vh, 44rem);
|
|
margin: 0;
|
|
border: 0;
|
|
box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
|
|
}
|
|
|
|
.wrn-drawer[data-placement="top"] .wrn-drawer__panel {
|
|
border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
|
|
}
|
|
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
|
|
border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
|
|
border-radius: 1.3rem 1.3rem 0 0;
|
|
}
|
|
|
|
.wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
|
|
background:
|
|
linear-gradient(145deg, var(--drawer-soft), transparent 65%),
|
|
var(--wrn-color-surface-raised);
|
|
}
|
|
|
|
.wrn-drawer[data-variant="solid"] .wrn-drawer__panel {
|
|
color: var(--wrn-color-primary-contrast);
|
|
background: var(--drawer-accent);
|
|
border-color: color-mix(in srgb, white 18%, transparent);
|
|
}
|
|
|
|
.wrn-drawer__handle {
|
|
display: none;
|
|
width: 2.75rem;
|
|
height: 0.28rem;
|
|
margin: 0.55rem auto 0;
|
|
background: color-mix(in srgb, var(--wrn-color-text-muted) 48%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.wrn-drawer[data-placement="bottom"] .wrn-drawer__handle {
|
|
display: block;
|
|
}
|
|
|
|
.wrn-drawer__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.35rem 1.35rem 1.1rem;
|
|
border-bottom: 1px solid var(--wrn-color-border);
|
|
}
|
|
|
|
.wrn-drawer__heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.85rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-drawer__icon {
|
|
flex: 0 0 auto;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin-top: 0.15rem;
|
|
color: var(--drawer-accent);
|
|
}
|
|
|
|
.wrn-drawer[data-variant="solid"] .wrn-drawer__icon {
|
|
color: currentColor;
|
|
}
|
|
|
|
.wrn-drawer__heading-copy {
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-drawer__heading-copy h2,
|
|
.wrn-drawer__heading-copy p {
|
|
margin: 0;
|
|
}
|
|
|
|
.wrn-drawer__heading-copy h2 {
|
|
font-size: 1.05rem;
|
|
font-weight: 650;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.wrn-drawer__heading-copy p {
|
|
color: var(--wrn-color-text-muted);
|
|
font-size: 0.8rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.wrn-drawer[data-variant="solid"] .wrn-drawer__heading-copy p {
|
|
color: color-mix(in srgb, currentColor 76%, transparent);
|
|
}
|
|
|
|
/*
|
|
* padding is reset explicitly: an app-level `button { padding: ... }` rule
|
|
* outranks the browser default and leaves this fixed-size button with a
|
|
* content box of a couple of pixels, which squeezes the icon to a sliver
|
|
* and reads as "the close button has no icon". Same trap as Modal.
|
|
*/
|
|
.wrn-drawer__close {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
width: 2.35rem;
|
|
height: 2.35rem;
|
|
color: var(--wrn-color-text-muted);
|
|
background: var(--wrn-color-surface-soft);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wrn-drawer__close:hover,
|
|
.wrn-drawer__close:focus-visible {
|
|
color: var(--drawer-accent);
|
|
border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
|
|
outline: none;
|
|
}
|
|
|
|
/* Never let the glyph be shrunk by the flex container. */
|
|
.wrn-drawer__close svg {
|
|
flex: 0 0 auto;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/*
|
|
* Slot content is authored by the host app, so the app global stylesheet
|
|
* styles it too. A bare element selector there (p { color: ... }) beats
|
|
* anything the panel merely *inherits*, which is how modal body copy ended
|
|
* up muted grey on a saturated background. State the colour explicitly;
|
|
* :where() keeps the specificity low enough that any class the app puts on
|
|
* its own slot content still wins.
|
|
*/
|
|
.wrn-drawer__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: 1.35rem;
|
|
color: var(--wrn-color-text);
|
|
}
|
|
|
|
.wrn-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
|
|
color: inherit;
|
|
}
|
|
|
|
.wrn-drawer[data-scrollable="true"] .wrn-drawer__body {
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.wrn-drawer__footer {
|
|
padding: 1rem 1.35rem 1.35rem;
|
|
border-top: 1px solid var(--wrn-color-border);
|
|
}
|
|
|
|
.wrn-drawer__footer:empty {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.wrn-drawer[data-placement="right"] .wrn-drawer__panel,
|
|
.wrn-drawer[data-placement="left"] .wrn-drawer__panel {
|
|
width: min(24rem, 100vw);
|
|
}
|
|
|
|
.wrn-drawer__header,
|
|
.wrn-drawer__body,
|
|
.wrn-drawer__footer {
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|