68 lines
2.3 KiB
Plaintext
68 lines
2.3 KiB
Plaintext
import Button from "./button.wrn"
|
|
|
|
component HeroActions {
|
|
props {
|
|
actions: unknown[] = []
|
|
align: string = "left"
|
|
orientation: string = "horizontal"
|
|
stackOnMobile: boolean = true
|
|
fullWidthMobile: boolean = true
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
data-ui-component="HeroActions"
|
|
role="group"
|
|
aria-label="Page actions"
|
|
data-align='{align}'
|
|
data-orientation='{orientation}'
|
|
data-stack-mobile='{stackOnMobile ? "true" : "false"}'
|
|
data-full-mobile='{fullWidthMobile ? "true" : "false"}'
|
|
class='wrn-hero-actions {class}'
|
|
>
|
|
{#each actions as action, index}
|
|
{#if action.label}
|
|
<Button
|
|
label='{action.label}'
|
|
href='{action.href || ""}'
|
|
target='{action.target || ""}'
|
|
rel='{action.rel || ""}'
|
|
type='{action.type || "button"}'
|
|
variant='{action.variant || (index === 0 ? "default" : "outline")}'
|
|
color='{action.color || color}'
|
|
size='{action.size || size}'
|
|
disabled='{action.disabled || false}'
|
|
loading='{action.loading || false}'
|
|
icon='{action.icon || ""}'
|
|
iconPosition='{action.iconPosition || "start"}'
|
|
ariaLabel='{action.ariaLabel || action.label}'
|
|
fullWidth='{fullWidthMobile}'
|
|
controlClass='{action.controlClass || ""}'
|
|
class='{"wrn-hero-actions__action " + (action.class || "")}'
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
|
|
.wrn-hero-actions[data-align="center"] { justify-content: center; }
|
|
.wrn-hero-actions[data-align="right"] { justify-content: flex-end; }
|
|
.wrn-hero-actions[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
|
|
.wrn-hero-actions[data-full-mobile="true"] { width: 100%; }
|
|
@media (max-width: 39.999rem) {
|
|
.wrn-hero-actions[data-stack-mobile="true"] { flex-direction: column; align-items: stretch; }
|
|
}
|
|
@media (min-width: 40rem) {
|
|
.wrn-hero-actions[data-full-mobile="true"] { width: auto; }
|
|
.wrn-hero-actions__action { width: auto; }
|
|
}
|
|
}
|
|
}
|