53 lines
1.7 KiB
Plaintext
53 lines
1.7 KiB
Plaintext
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"
|
|
class='flex flex-wrap items-center gap-3 {class}'
|
|
class:flex-col='orientation === "vertical" || stackOnMobile'
|
|
class:sm:flex-row='orientation === "horizontal" && stackOnMobile'
|
|
class:justify-center='align === "center"'
|
|
class:justify-end='align === "right"'
|
|
class:w-full='fullWidthMobile'
|
|
class:sm:w-auto='fullWidthMobile'
|
|
>
|
|
{#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='{"sm:w-auto " + (action.class || "")}'
|
|
/>
|
|
{/if}
|
|
{/each}
|
|
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
}
|