544 lines
17 KiB
Plaintext
544 lines
17 KiB
Plaintext
component Popover {
|
|
outputs {
|
|
toggle(payload: { open: boolean; sourceEvent: Event; reason?: object })
|
|
open(payload: { sourceEvent: Event })
|
|
close(payload: { reason: string; sourceEvent: Event })
|
|
action(payload: { href: string; sourceEvent: Event })
|
|
}
|
|
|
|
props {
|
|
|
|
open: boolean = false
|
|
defaultOpen: boolean = false
|
|
triggerLabel: string = "Open popover"
|
|
triggerIcon: string = ""
|
|
title: string = ""
|
|
description: string = ""
|
|
icon: string = ""
|
|
placement: string = "bottom-start"
|
|
width: string = "md"
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "raised"
|
|
showArrow: boolean = true
|
|
showClose: boolean = false
|
|
closeLabel: string = "Close popover"
|
|
closeOnOutside: boolean = true
|
|
closeOnEscape: boolean = true
|
|
actionLabel: string = ""
|
|
actionHref: string = ""
|
|
actionIcon: string = ""
|
|
closeOnAction: boolean = true
|
|
disabled: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
state visible = defaultOpen
|
|
|
|
functions {
|
|
shared function isOpen() {
|
|
return open || visible
|
|
}
|
|
|
|
client function showPopover(sourceEvent) {
|
|
if (disabled) {
|
|
return
|
|
}
|
|
visible = true
|
|
output.open({ sourceEvent: sourceEvent })
|
|
output.toggle({ open: true, sourceEvent: sourceEvent })
|
|
}
|
|
|
|
client function hidePopover(reason, sourceEvent) {
|
|
visible = false
|
|
output.close({ reason: reason, sourceEvent: sourceEvent })
|
|
output.toggle({ open: false, reason: reason, sourceEvent: sourceEvent })
|
|
}
|
|
|
|
client function togglePopover(sourceEvent) {
|
|
if (isOpen()) {
|
|
hidePopover("toggle", sourceEvent)
|
|
} else {
|
|
showPopover(sourceEvent)
|
|
}
|
|
}
|
|
|
|
client function activateAction(sourceEvent) {
|
|
output.action({
|
|
href: actionHref,
|
|
sourceEvent: sourceEvent
|
|
})
|
|
if (closeOnAction) {
|
|
hidePopover("action", sourceEvent)
|
|
}
|
|
}
|
|
|
|
client function handleKeydown(sourceEvent) {
|
|
if (closeOnEscape && sourceEvent.key === "Escape") {
|
|
sourceEvent.preventDefault()
|
|
hidePopover("escape", sourceEvent)
|
|
}
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Popover"
|
|
data-open='{open || visible ? "true" : "false"}'
|
|
data-placement='{placement}'
|
|
data-width='{width}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
class='wrn-popover {class}'
|
|
@keydown='handleKeydown(event)'
|
|
data-wrn-owner="Popover" data-wrn-part="root" data-wrn-component="Popover" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
|
<button
|
|
type="button"
|
|
class="wrn-popover__trigger"
|
|
disabled='{disabled}'
|
|
aria-haspopup="dialog"
|
|
aria-expanded='{open || visible ? "true" : "false"}'
|
|
@click='togglePopover(event)'
|
|
data-wrn-owner="Popover" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<slot name="trigger"></slot>
|
|
{#if triggerIcon}
|
|
<span class='{triggerIcon}' aria-hidden="true"></span>
|
|
{/if}
|
|
{#if triggerLabel}
|
|
<span>{triggerLabel}</span>
|
|
{/if}
|
|
</button>
|
|
|
|
{#if closeOnOutside}
|
|
<button
|
|
type="button"
|
|
class="wrn-popover__dismiss-layer"
|
|
data-show='{open || visible}'
|
|
aria-label='{closeLabel}'
|
|
@click='hidePopover("outside", event)'
|
|
data-wrn-owner="Popover" data-wrn-part="dismissLayer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
|
|
{/if}
|
|
|
|
<section
|
|
class="wrn-popover__panel"
|
|
data-wrn-anchored="true"
|
|
data-show='{open || visible}'
|
|
role="dialog"
|
|
aria-label='{title || triggerLabel}'
|
|
data-wrn-owner="Popover" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if showArrow}
|
|
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="arrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
{/if}
|
|
|
|
{#if title || description || icon || showClose}
|
|
<header class="wrn-popover__header" data-wrn-owner="Popover" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<div class="wrn-popover__heading" data-wrn-owner="Popover" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if icon}
|
|
<span class='wrn-popover__icon {icon}' aria-hidden="true" data-wrn-owner="Popover" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
|
{/if}
|
|
<div class="wrn-popover__heading-copy" data-wrn-owner="Popover" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<slot name="header"></slot>
|
|
{#if title}
|
|
<h3 data-wrn-owner="Popover" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{title}</h3>
|
|
{/if}
|
|
{#if description}
|
|
<p>{description}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if showClose}
|
|
<button
|
|
type="button"
|
|
class="wrn-popover__close"
|
|
aria-label='{closeLabel}'
|
|
@click='hidePopover("close-button", event)'
|
|
data-wrn-owner="Popover" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
|
</button>
|
|
{/if}
|
|
</header>
|
|
{/if}
|
|
|
|
<div class="wrn-popover__body" data-wrn-owner="Popover" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
{#if actionLabel}
|
|
<footer class="wrn-popover__footer" data-wrn-owner="Popover" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if actionHref}
|
|
<a
|
|
href='{actionHref}'
|
|
class="wrn-popover__action"
|
|
@click='activateAction(event)'
|
|
data-wrn-owner="Popover" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span>{actionLabel}</span>
|
|
{#if actionIcon}
|
|
<span class='{actionIcon}' aria-hidden="true"></span>
|
|
{:else}
|
|
<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span>
|
|
{/if}
|
|
</a>
|
|
{:else}
|
|
<button
|
|
type="button"
|
|
class="wrn-popover__action"
|
|
@click='activateAction(event)'
|
|
data-wrn-owner="Popover" data-wrn-part="action" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<span>{actionLabel}</span>
|
|
{#if actionIcon}
|
|
<span class='{actionIcon}' aria-hidden="true"></span>
|
|
{:else}
|
|
<span class="icon-[lucide--arrow-right]" aria-hidden="true"></span>
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
</footer>
|
|
{/if}
|
|
|
|
<slot name="footer"></slot>
|
|
</section>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-popover {
|
|
--popover-accent: var(--wrn-color-primary);
|
|
--popover-soft: var(--wrn-color-primary-soft);
|
|
--popover-contrast: var(--wrn-color-primary-contrast);
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.wrn-popover[data-color="secondary"] {
|
|
--popover-accent: var(--wrn-color-secondary);
|
|
--popover-soft: var(--wrn-color-secondary-soft);
|
|
--popover-contrast: var(--wrn-color-secondary-contrast);
|
|
}
|
|
|
|
.wrn-popover[data-color="info"] {
|
|
--popover-accent: var(--wrn-color-info);
|
|
--popover-soft: var(--wrn-color-info-soft);
|
|
--popover-contrast: var(--wrn-color-info-contrast);
|
|
}
|
|
|
|
.wrn-popover[data-color="success"] {
|
|
--popover-accent: var(--wrn-color-success);
|
|
--popover-soft: var(--wrn-color-success-soft);
|
|
--popover-contrast: var(--wrn-color-success-contrast);
|
|
}
|
|
|
|
.wrn-popover[data-color="warning"] {
|
|
--popover-accent: var(--wrn-color-warning);
|
|
--popover-soft: var(--wrn-color-warning-soft);
|
|
--popover-contrast: var(--wrn-color-warning-text);
|
|
}
|
|
|
|
.wrn-popover[data-color="danger"] {
|
|
--popover-accent: var(--wrn-color-danger);
|
|
--popover-soft: var(--wrn-color-danger-soft);
|
|
--popover-contrast: var(--wrn-color-on-danger);
|
|
}
|
|
|
|
.wrn-popover__trigger {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
min-height: var(--wrn-control-height, 2.5rem);
|
|
padding: 0 0.875rem;
|
|
color: var(--wrn-color-text);
|
|
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
|
|
border-radius: var(--wrn-radius-sm);
|
|
box-shadow: var(--wrn-shadow-1);
|
|
font: inherit;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
|
|
}
|
|
|
|
.wrn-popover__trigger:hover,
|
|
.wrn-popover__trigger:focus-visible,
|
|
.wrn-popover[data-open="true"] .wrn-popover__trigger {
|
|
color: var(--wrn-color-text);
|
|
background: var(--wrn-color-surface);
|
|
border-color: var(--wrn-color-border-strong, var(--wrn-color-border));
|
|
outline: none;
|
|
}
|
|
|
|
.wrn-popover__trigger:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.wrn-popover[data-size="sm"] .wrn-popover__trigger {
|
|
min-height: var(--wrn-control-height-sm, 2rem);
|
|
padding: 0.5rem 0.72rem;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.wrn-popover[data-size="lg"] .wrn-popover__trigger {
|
|
min-height: var(--wrn-control-height-lg, 2.75rem);
|
|
padding: 0.78rem 1.05rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.wrn-popover__dismiss-layer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1120;
|
|
appearance: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.wrn-popover__panel {
|
|
position: absolute;
|
|
z-index: 1121;
|
|
top: calc(100% + 0.5rem);
|
|
left: 0;
|
|
width: 18rem;
|
|
max-width: calc(100vw - 1.5rem);
|
|
color: var(--wrn-color-text);
|
|
background: var(--wrn-color-surface-raised);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius);
|
|
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
|
|
}
|
|
|
|
.wrn-popover[data-width="sm"] .wrn-popover__panel {
|
|
width: 14rem;
|
|
}
|
|
|
|
.wrn-popover[data-width="lg"] .wrn-popover__panel {
|
|
width: 24rem;
|
|
}
|
|
|
|
.wrn-popover[data-width="xl"] .wrn-popover__panel {
|
|
width: 32rem;
|
|
}
|
|
|
|
.wrn-popover[data-width="trigger"] .wrn-popover__panel {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.wrn-popover[data-placement="bottom-end"] .wrn-popover__panel {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
.wrn-popover[data-placement="top-start"] .wrn-popover__panel {
|
|
top: auto;
|
|
bottom: calc(100% + 0.72rem);
|
|
}
|
|
|
|
.wrn-popover[data-placement="top-end"] .wrn-popover__panel {
|
|
top: auto;
|
|
right: 0;
|
|
bottom: calc(100% + 0.72rem);
|
|
left: auto;
|
|
}
|
|
|
|
.wrn-popover[data-placement="left"] .wrn-popover__panel {
|
|
top: 50%;
|
|
right: calc(100% + 0.72rem);
|
|
left: auto;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.wrn-popover[data-placement="right"] .wrn-popover__panel {
|
|
top: 50%;
|
|
left: calc(100% + 0.72rem);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.wrn-popover[data-variant="soft"] .wrn-popover__panel {
|
|
background: color-mix(in srgb, var(--popover-accent) 4%, var(--wrn-color-surface-raised));
|
|
box-shadow: var(--wrn-shadow-3);
|
|
}
|
|
|
|
.wrn-popover[data-variant="outline"] .wrn-popover__panel {
|
|
background: var(--wrn-color-surface-raised);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.wrn-popover[data-variant="solid"] .wrn-popover__panel {
|
|
color: var(--popover-contrast);
|
|
background: var(--popover-accent);
|
|
border-color: color-mix(in srgb, white 20%, transparent);
|
|
}
|
|
|
|
.wrn-popover__arrow {
|
|
position: absolute;
|
|
top: -0.3125rem;
|
|
left: 1.25rem;
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
background: inherit;
|
|
border-top: 1px solid var(--wrn-color-border);
|
|
border-left: 1px solid var(--wrn-color-border);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.wrn-popover[data-placement="bottom-end"] .wrn-popover__arrow {
|
|
right: 1.25rem;
|
|
left: auto;
|
|
}
|
|
|
|
.wrn-popover[data-placement="top-start"] .wrn-popover__arrow,
|
|
.wrn-popover[data-placement="top-end"] .wrn-popover__arrow {
|
|
top: auto;
|
|
bottom: -0.35rem;
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.wrn-popover[data-placement="left"] .wrn-popover__arrow {
|
|
top: 50%;
|
|
right: -0.35rem;
|
|
left: auto;
|
|
transform: translateY(-50%) rotate(135deg);
|
|
}
|
|
|
|
.wrn-popover[data-placement="right"] .wrn-popover__arrow {
|
|
top: 50%;
|
|
left: -0.35rem;
|
|
transform: translateY(-50%) rotate(-45deg);
|
|
}
|
|
|
|
.wrn-popover__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 0.875rem 0.625rem;
|
|
}
|
|
|
|
.wrn-popover__heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.7rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-popover__icon {
|
|
flex: 0 0 auto;
|
|
width: 1.05rem;
|
|
height: 1.05rem;
|
|
margin-top: 0.15rem;
|
|
color: var(--popover-accent);
|
|
}
|
|
|
|
.wrn-popover[data-variant="solid"] .wrn-popover__icon {
|
|
color: currentColor;
|
|
}
|
|
|
|
.wrn-popover__heading-copy {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-popover__heading-copy h3,
|
|
.wrn-popover__heading-copy p {
|
|
margin: 0;
|
|
}
|
|
|
|
.wrn-popover__heading-copy h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 620;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.wrn-popover__heading-copy p {
|
|
color: var(--wrn-color-text-muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.wrn-popover[data-variant="solid"] .wrn-popover__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 crushes the icon inside this
|
|
* fixed-size button. Same trap as Modal and Drawer.
|
|
*/
|
|
.wrn-popover__close {
|
|
padding: 0;
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--wrn-color-text-muted);
|
|
background: var(--wrn-color-surface-soft);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: 0.65rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wrn-popover__body {
|
|
padding: 0 0.875rem 0.875rem;
|
|
color: var(--wrn-color-text-muted);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.wrn-popover__footer {
|
|
padding: 0.75rem 0.875rem;
|
|
border-top: 1px solid var(--wrn-color-border);
|
|
background: var(--wrn-color-surface-soft, transparent);
|
|
border-radius: 0 0 var(--wrn-radius) var(--wrn-radius);
|
|
}
|
|
|
|
.wrn-popover__action {
|
|
appearance: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.4rem;
|
|
min-height: 2rem;
|
|
padding: 0 0.75rem;
|
|
color: var(--popover-contrast);
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--popover-accent) 92%, white), var(--popover-accent));
|
|
border: 1px solid color-mix(in srgb, var(--popover-accent) 82%, black);
|
|
border-bottom-color: color-mix(in srgb, var(--popover-accent) 64%, black);
|
|
border-radius: var(--wrn-radius-sm);
|
|
box-shadow: var(--wrn-highlight-edge, none);
|
|
font: inherit;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.wrn-popover__panel {
|
|
position: fixed;
|
|
right: 0.75rem;
|
|
bottom: 0.75rem;
|
|
left: 0.75rem;
|
|
top: auto;
|
|
width: auto;
|
|
max-width: none;
|
|
transform: none;
|
|
}
|
|
|
|
.wrn-popover__arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|