trellis-line.svelte (1770B)
1 <script lang="ts"> 2 import { fmt_trellis } from "$lib/utils/app"; 3 import type { ThemeLayer } from "@radroots/themes"; 4 import type { CallbackPromiseGeneric } from "@radroots/utils"; 5 import type { Snippet } from "svelte"; 6 import LoadSymbol from "../lib/load-symbol.svelte"; 7 8 let { 9 loading = false, 10 layer, 11 callback, 12 hide_border_b, 13 hide_border_t, 14 children, 15 el_end, 16 }: { 17 loading?: boolean; 18 layer: ThemeLayer; 19 callback?: CallbackPromiseGeneric<MouseEvent>; 20 hide_border_b: boolean; 21 hide_border_t: boolean; 22 children: Snippet; 23 el_end?: Snippet; 24 } = $props(); 25 </script> 26 27 <button 28 class={`flex flex-row flex-grow overflow-hidden`} 29 onclick={async (ev) => { 30 if (callback) await callback(ev); 31 }} 32 > 33 <div 34 class={`${fmt_trellis( 35 hide_border_b, 36 hide_border_t, 37 )} flex flex-row h-full w-full justify-center items-center border-t-line border-ly${layer}-edge el-re`} 38 > 39 {#if loading} 40 <div 41 class={`flex flex-row h-full w-full justify-center items-center`} 42 > 43 <LoadSymbol basis={{ dim: `sm` }} /> 44 </div> 45 {:else} 46 <div 47 class={`relative group flex flex-row h-line w-full pr-[2px] justify-between items-center el-re`} 48 > 49 <div 50 class={`flex flex-row h-full w-trellis_display justify-between items-center`} 51 > 52 {@render children()} 53 </div> 54 {#if el_end} 55 {@render el_end()} 56 {/if} 57 </div> 58 {/if} 59 </div> 60 </button>