trellis-row-label.svelte (2045B)
1 <script lang="ts"> 2 import { get_label_classes_kind } from "$lib/utils/app"; 3 import { type ILabelTupFields, fmt_cl } from "@radroots/apps-lib"; 4 import type { ThemeLayer } from "@radroots/themes"; 5 import ButtonGlyph from "../button/button-glyph.svelte"; 6 7 let { 8 basis, 9 layer, 10 hide_active, 11 }: { 12 basis: ILabelTupFields; 13 layer: ThemeLayer; 14 hide_active: boolean; 15 } = $props(); 16 </script> 17 18 <div class={`flex flex-row h-full items-center justify-between`}> 19 {#if basis.left && basis.left.length} 20 <div class={`flex flex-row h-full items-center truncate`}> 21 {#each basis.left as title_l} 22 <div 23 class={`${fmt_cl( 24 title_l.classes_wrap, 25 )} flex flex-row h-full items-center ${get_label_classes_kind( 26 layer, 27 undefined, 28 hide_active, 29 )} ${title_l.hide_truncate ? `` : `truncate`}`} 30 > 31 {#if `glyph` in title_l} 32 <div 33 class={`flex flex-row justify-start items-center pr-2`} 34 > 35 <ButtonGlyph basis={{ ...title_l.glyph }} /> 36 </div> 37 {:else if `value` in title_l} 38 <p 39 class={`${fmt_cl( 40 title_l.classes, 41 )} font-sans text-line_d ${ 42 title_l.hide_truncate ? `` : `truncate` 43 } el-re`} 44 > 45 {title_l.value || ``} 46 </p> 47 {/if} 48 </div> 49 {/each} 50 </div> 51 {/if} 52 {#if basis.right && basis.right.length} 53 <div 54 class={`flex flex-row h-full w-content items-center justify-end pr-4`} 55 > 56 {#each basis.right.reverse() as title_r} 57 <div 58 class={`${fmt_cl( 59 title_r.classes_wrap, 60 )} flex flex-row h-full gap-1 items-center ${ 61 title_r.hide_truncate ? `` : `truncate` 62 }`} 63 > 64 {#if `glyph` in title_r} 65 <ButtonGlyph basis={{ ...title_r.glyph }} /> 66 {:else if `value` in title_r} 67 <p 68 class={`${fmt_cl( 69 title_r.classes, 70 )} font-sans text-line_d text-ly${layer}-gl_d ${ 71 title_r.hide_truncate ? `` : `truncate` 72 } el-re`} 73 > 74 {title_r.value || ``} 75 </p> 76 {/if} 77 </div> 78 {/each} 79 </div> 80 {/if} 81 </div>