trellis-title.svelte (1805B)
1 <script lang="ts"> 2 import type { ITrellisTitle } from "$lib/types/components/trellis"; 3 import { Flex, fmt_cl, Glyph } from "@radroots/apps-lib"; 4 import type { ThemeLayer } from "@radroots/themes"; 5 import LabelSwap from "../lib/label-swap.svelte"; 6 7 let { 8 basis, 9 layer = 0, 10 }: { 11 basis: ITrellisTitle; 12 layer: ThemeLayer; 13 } = $props(); 14 15 const mod = $derived(basis?.mod ? basis.mod : `sm`); 16 </script> 17 18 <div 19 class={`${fmt_cl( 20 basis.classes, 21 )} flex flex-row h-[24px] w-full pl-[2px] gap-1 items-center`} 22 > 23 <button 24 class={`flex flex-row h-full w-max items-center gap-1 ${ 25 mod === `glyph` ? `pl-[36px]` : mod === `sm` ? `pl-[16px]` : `` 26 }`} 27 onclick={async () => { 28 if (basis && basis.callback) await basis.callback(); 29 }} 30 > 31 {#if basis.value === true} 32 <Flex /> 33 {:else} 34 <p 35 class={`font-sans text-trellis_ti text-ly${layer}-gl-label uppercase`} 36 > 37 {basis.value || ``} 38 </p> 39 {/if} 40 </button> 41 {#if basis.link} 42 <button 43 class={`${fmt_cl( 44 basis.link.classes, 45 )} group flex flex-row h-full w-max items-center`} 46 onclick={async () => { 47 if (basis.link && basis.link.callback) 48 await basis.link.callback(); 49 }} 50 > 51 {#if basis.link.label} 52 {#if `swap` in basis.link.label} 53 <LabelSwap basis={basis.link.label} /> 54 {:else if `value` in basis.link.label} 55 <p 56 class={`${fmt_cl( 57 basis.link.label.classes, 58 )} font-sans text-trellis_ti uppercase fade-in`} 59 > 60 {basis.link.label.value || ``} 61 </p> 62 {/if} 63 {/if} 64 {#if basis.link.glyph} 65 <div class={`flex flex-row w-max`}> 66 <Glyph 67 basis={{ 68 ...basis.link.glyph, 69 dim: `xs-`, 70 classes: `${fmt_cl( 71 basis.link.glyph.classes, 72 )} fade-in`, 73 }} 74 /> 75 </div> 76 {/if} 77 </button> 78 {/if} 79 </div>