Pre Release New Changes
This commit is contained in:
@@ -1,21 +1,333 @@
|
||||
component Tooltip {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
|
||||
id = ""
|
||||
open = false
|
||||
defaultOpen = false
|
||||
title = ""
|
||||
description = ""
|
||||
content = "Tooltip"
|
||||
trigger = "hover"
|
||||
placement = "top"
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Tooltip"
|
||||
description = ""
|
||||
open = false
|
||||
placement = "bottom"
|
||||
closeLabel = "Close"
|
||||
variant = "dark"
|
||||
maxWidth = "18rem"
|
||||
offset = 10
|
||||
showArrow = true
|
||||
interactive = false
|
||||
disabled = false
|
||||
class = ""
|
||||
}
|
||||
|
||||
state visible = defaultOpen
|
||||
|
||||
functions {
|
||||
function isOpen() {
|
||||
return open || visible
|
||||
}
|
||||
|
||||
function showTooltip(reason, sourceEvent) {
|
||||
if (disabled || trigger === "manual") {
|
||||
return
|
||||
}
|
||||
visible = true
|
||||
$emit("open", { reason: reason, sourceEvent: sourceEvent })
|
||||
$emit("toggle", { open: true, reason: reason, sourceEvent: sourceEvent })
|
||||
}
|
||||
|
||||
function hideTooltip(reason, sourceEvent) {
|
||||
if (trigger === "manual") {
|
||||
return
|
||||
}
|
||||
visible = false
|
||||
$emit("close", { reason: reason, sourceEvent: sourceEvent })
|
||||
$emit("toggle", { open: false, reason: reason, sourceEvent: sourceEvent })
|
||||
}
|
||||
|
||||
function toggleTooltip(sourceEvent) {
|
||||
if (isOpen()) {
|
||||
hideTooltip("click", sourceEvent)
|
||||
} else {
|
||||
showTooltip("click", sourceEvent)
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(sourceEvent) {
|
||||
if (sourceEvent.key === "Escape") {
|
||||
sourceEvent.preventDefault()
|
||||
hideTooltip("escape", sourceEvent)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--tooltip wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
|
||||
<header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
<slot />
|
||||
</div>
|
||||
<span
|
||||
{...attrs}
|
||||
data-ui-component="Tooltip"
|
||||
data-open='{open || visible ? "true" : "false"}'
|
||||
data-trigger='{trigger}'
|
||||
data-placement='{placement}'
|
||||
data-size='{size}'
|
||||
data-color='{color}'
|
||||
data-variant='{variant}'
|
||||
data-interactive='{interactive ? "true" : "false"}'
|
||||
class='wire-tooltip {class}'
|
||||
style='--wire-tooltip-max-width:{maxWidth};--wire-tooltip-offset:{offset}px;'
|
||||
@mouseenter='if (trigger === "hover" || trigger === "both") { showTooltip("hover", event) }'
|
||||
@mouseleave='if (trigger === "hover" || trigger === "both") { hideTooltip("hover", event) }'
|
||||
@focusin='if (trigger === "focus" || trigger === "hover" || trigger === "both") { showTooltip("focus", event) }'
|
||||
@focusout='if (trigger === "focus" || trigger === "hover" || trigger === "both") { hideTooltip("focus", event) }'
|
||||
@keydown='handleKeydown(event)'
|
||||
>
|
||||
<span
|
||||
class="wire-tooltip__trigger"
|
||||
tabindex='{disabled ? "-1" : "0"}'
|
||||
aria-describedby='{(open || visible) && id ? id : ""}'
|
||||
@click='if (trigger === "click" || trigger === "both") { toggleTooltip(event) }'
|
||||
>
|
||||
<slot name="trigger"></slot>
|
||||
</span>
|
||||
|
||||
<span
|
||||
id='{id}'
|
||||
class="wire-tooltip__content"
|
||||
data-show='{open || visible}'
|
||||
role="tooltip"
|
||||
>
|
||||
{#if showArrow}
|
||||
<span class="wire-tooltip__arrow" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
{#if title}
|
||||
<strong>{title}</strong>
|
||||
{/if}
|
||||
|
||||
{#if description}
|
||||
<span class="wire-tooltip__description">{description}</span>
|
||||
{:else if content}
|
||||
<span class="wire-tooltip__description">{content}</span>
|
||||
{/if}
|
||||
|
||||
<slot></slot>
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-tooltip {
|
||||
--tooltip-accent: var(--wire-color-primary);
|
||||
--tooltip-soft: var(--wire-color-primary-soft);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-color="secondary"] {
|
||||
--tooltip-accent: var(--wire-color-secondary);
|
||||
--tooltip-soft: var(--wire-color-secondary-soft);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-color="info"] {
|
||||
--tooltip-accent: var(--wire-color-info);
|
||||
--tooltip-soft: var(--wire-color-info-soft);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-color="success"] {
|
||||
--tooltip-accent: var(--wire-color-success);
|
||||
--tooltip-soft: var(--wire-color-success-soft);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-color="warning"] {
|
||||
--tooltip-accent: var(--wire-color-warning);
|
||||
--tooltip-soft: var(--wire-color-warning-soft);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-color="danger"] {
|
||||
--tooltip-accent: var(--wire-color-danger);
|
||||
--tooltip-soft: var(--wire-color-danger-soft);
|
||||
}
|
||||
|
||||
.wire-tooltip__trigger {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-tooltip__trigger:focus-visible {
|
||||
border-radius: 0.4rem;
|
||||
outline: 2px solid var(--wire-color-focus);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.wire-tooltip__content {
|
||||
position: absolute;
|
||||
z-index: 1300;
|
||||
left: 50%;
|
||||
bottom: calc(100% + var(--wire-tooltip-offset));
|
||||
display: grid;
|
||||
gap: 0.22rem;
|
||||
width: max-content;
|
||||
max-width: min(var(--wire-tooltip-max-width), calc(100vw - 1rem));
|
||||
padding: 0.58rem 0.72rem;
|
||||
color: white;
|
||||
background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
|
||||
border: 1px solid color-mix(in srgb, white 12%, transparent);
|
||||
border-radius: 0.65rem;
|
||||
box-shadow: 0 14px 38px color-mix(in srgb, black 28%, transparent);
|
||||
font-size: 0.73rem;
|
||||
line-height: 1.45;
|
||||
text-align: left;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-interactive="true"] .wire-tooltip__content {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-variant="soft"] .wire-tooltip__content {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--tooltip-soft);
|
||||
border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wire-color-border));
|
||||
}
|
||||
|
||||
.wire-tooltip[data-variant="light"] .wire-tooltip__content {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-raised);
|
||||
border-color: var(--wire-color-border);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-variant="solid"] .wire-tooltip__content {
|
||||
color: var(--wire-color-primary-contrast);
|
||||
background: var(--tooltip-accent);
|
||||
border-color: color-mix(in srgb, white 18%, transparent);
|
||||
}
|
||||
|
||||
.wire-tooltip__content strong {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.wire-tooltip__description {
|
||||
color: color-mix(in srgb, currentColor 82%, transparent);
|
||||
}
|
||||
|
||||
.wire-tooltip__arrow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -0.32rem;
|
||||
width: 0.62rem;
|
||||
height: 0.62rem;
|
||||
background: inherit;
|
||||
border-right: 1px solid color-mix(in srgb, white 10%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="bottom"] .wire-tooltip__content {
|
||||
top: calc(100% + var(--wire-tooltip-offset));
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="bottom"] .wire-tooltip__arrow {
|
||||
top: -0.32rem;
|
||||
bottom: auto;
|
||||
transform: translateX(-50%) rotate(225deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="left"] .wire-tooltip__content {
|
||||
top: 50%;
|
||||
right: calc(100% + var(--wire-tooltip-offset));
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="left"] .wire-tooltip__arrow {
|
||||
top: 50%;
|
||||
right: -0.32rem;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="right"] .wire-tooltip__content {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
left: calc(100% + var(--wire-tooltip-offset));
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="right"] .wire-tooltip__arrow {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
left: -0.32rem;
|
||||
transform: translateY(-50%) rotate(135deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="top-start"] .wire-tooltip__content,
|
||||
.wire-tooltip[data-placement="bottom-start"] .wire-tooltip__content {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="top-start"] .wire-tooltip__arrow,
|
||||
.wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
|
||||
left: 1rem;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="top-end"] .wire-tooltip__content,
|
||||
.wire-tooltip[data-placement="bottom-end"] .wire-tooltip__content {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="top-end"] .wire-tooltip__arrow,
|
||||
.wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
.wire-tooltip[data-size="sm"] .wire-tooltip__content {
|
||||
padding: 0.45rem 0.58rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.wire-tooltip[data-size="lg"] .wire-tooltip__content {
|
||||
padding: 0.72rem 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.wire-tooltip__content {
|
||||
position: fixed;
|
||||
right: 0.75rem;
|
||||
bottom: 0.75rem;
|
||||
left: 0.75rem;
|
||||
top: auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-tooltip__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user