70 lines
2.6 KiB
Plaintext
70 lines
2.6 KiB
Plaintext
component Divider {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
label: string = ""
|
|
orientation: string = "horizontal"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Divider"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-orientation='{orientation}'
|
|
class='w-full {class}'
|
|
class:h-full='orientation === "vertical"'
|
|
class:w-auto='orientation === "vertical"'
|
|
>
|
|
{#if orientation === "vertical"}
|
|
<div
|
|
role="separator"
|
|
aria-orientation="vertical"
|
|
class="mx-3 h-full min-h-6 border-l border-[var(--wire-color-border)]"
|
|
class:border-l-2='size === "lg"'
|
|
class:border-[var(--wire-color-primary)]='color === "primary"'
|
|
class:border-[var(--wire-color-secondary)]='color === "secondary"'
|
|
class:border-[var(--wire-color-success)]='color === "success"'
|
|
class:border-[var(--wire-color-warning)]='color === "warning"'
|
|
class:border-[var(--wire-color-danger)]='color === "danger"'
|
|
></div>
|
|
{:else}
|
|
<div
|
|
role="separator"
|
|
aria-orientation="horizontal"
|
|
class="flex w-full items-center gap-4"
|
|
>
|
|
<span
|
|
class="h-px flex-1 bg-[var(--wire-color-border)]"
|
|
class:h-0.5='size === "lg"'
|
|
class:bg-[var(--wire-color-primary)]='color === "primary" && label !== ""'
|
|
class:bg-[var(--wire-color-secondary)]='color === "secondary" && label !== ""'
|
|
class:bg-[var(--wire-color-success)]='color === "success" && label !== ""'
|
|
class:bg-[var(--wire-color-warning)]='color === "warning" && label !== ""'
|
|
class:bg-[var(--wire-color-danger)]='color === "danger" && label !== ""'
|
|
aria-hidden="true"
|
|
></span>
|
|
|
|
{#if label}
|
|
<span class="shrink-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-text-muted)]">
|
|
{label}
|
|
</span>
|
|
<span
|
|
class="h-px flex-1 bg-[var(--wire-color-border)]"
|
|
class:h-0.5='size === "lg"'
|
|
class:bg-[var(--wire-color-primary)]='color === "primary"'
|
|
class:bg-[var(--wire-color-secondary)]='color === "secondary"'
|
|
class:bg-[var(--wire-color-success)]='color === "success"'
|
|
class:bg-[var(--wire-color-warning)]='color === "warning"'
|
|
class:bg-[var(--wire-color-danger)]='color === "danger"'
|
|
aria-hidden="true"
|
|
></span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
}
|
|
}
|