91 lines
3.5 KiB
Plaintext
91 lines
3.5 KiB
Plaintext
component TextLink {
|
|
outputs {
|
|
click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
label: string = "Learn more"
|
|
href: string = "#"
|
|
target: string = ""
|
|
rel: string = ""
|
|
external: boolean = false
|
|
icon: string = ""
|
|
iconPosition: string = "start"
|
|
showArrow: boolean = true
|
|
underline: boolean = false
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
disabled: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<span
|
|
{...attrs}
|
|
data-ui-component="TextLink"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
class='inline-flex min-w-0 {class}'
|
|
>
|
|
{#if disabled}
|
|
<span
|
|
aria-disabled="true"
|
|
class="inline-flex cursor-not-allowed items-center gap-2 font-semibold opacity-50"
|
|
class:text-sm='size === "sm" || size === "default"'
|
|
class:text-base='size === "md"'
|
|
class:text-lg='size === "lg"'
|
|
>
|
|
{#if icon && iconPosition === "start"}
|
|
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
|
|
{/if}
|
|
<span>{label}</span>
|
|
</span>
|
|
{:else}
|
|
<a
|
|
href='{href}'
|
|
target='{target}'
|
|
rel='{external ? (rel || "noopener noreferrer") : rel}'
|
|
class="group inline-flex items-center gap-2 rounded-md font-semibold outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)]"
|
|
class:text-sm='size === "sm" || size === "default"'
|
|
class:text-base='size === "md"'
|
|
class:text-lg='size === "lg"'
|
|
class:text-[var(--wire-color-primary)]='color === "primary"'
|
|
class:hover:text-[var(--wire-color-primary-hover)]='color === "primary"'
|
|
class:text-[var(--wire-color-secondary)]='color === "secondary"'
|
|
class:text-[var(--wire-color-success)]='color === "success"'
|
|
class:text-[var(--wire-color-warning-text)]='color === "warning"'
|
|
class:text-[var(--wire-color-danger)]='color === "danger"'
|
|
class:text-[var(--wire-color-info)]='color === "info"'
|
|
class:text-[var(--wire-color-text)]='color === "neutral"'
|
|
class:underline='underline'
|
|
class:underline-offset-4='underline'
|
|
class:rounded-lg='variant === "button"'
|
|
class:bg-[var(--wire-color-primary-soft)]='variant === "button" && color === "primary"'
|
|
class:px-3='variant === "button"'
|
|
class:py-2='variant === "button"'
|
|
>
|
|
{#if icon && iconPosition === "start"}
|
|
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
<span>{label}</span>
|
|
|
|
{#if icon && iconPosition === "end"}
|
|
<span class='{icon + " size-4 shrink-0"}' aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
{#if external}
|
|
<span class="icon-[lucide--external-link] size-4 shrink-0" aria-hidden="true"></span>
|
|
{:else if showArrow}
|
|
<span class="icon-[lucide--arrow-right] size-4 shrink-0 transition-transform group-hover:translate-x-1" aria-hidden="true"></span>
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
</span>
|
|
}
|
|
}
|