trellis.svelte (6521B)
1 <script lang="ts"> 2 import { app_lo } from "$lib/stores/app"; 3 import type { LibContext } from "$lib/types/context"; 4 import type { ITrellis } from "$lib/types/components/trellis"; 5 import { fmt_cl, get_context, parse_layer } from "@radroots/apps-lib"; 6 import type { Snippet } from "svelte"; 7 import TrellisDefaultLabel from "./trellis-default-label.svelte"; 8 import TrellisInput from "./trellis-input.svelte"; 9 import TrellisOffset from "./trellis-offset.svelte"; 10 import TrellisSelect from "./trellis-select.svelte"; 11 import TrellisTitle from "./trellis-title.svelte"; 12 import TrellisTouch from "./trellis-touch.svelte"; 13 14 const { ls } = get_context<LibContext>(`lib`); 15 16 let { 17 basis, 18 el_default, 19 el_offset, 20 el_append, 21 }: { 22 basis: ITrellis; 23 el_default?: Snippet; 24 el_offset?: Snippet; 25 el_append?: Snippet; 26 } = $props(); 27 28 const hide_border_t = $derived( 29 typeof basis.hide_border_top === `boolean` 30 ? basis.hide_border_top 31 : true, 32 ); 33 34 const hide_border_b = $derived( 35 typeof basis.hide_border_bottom === `boolean` 36 ? basis.hide_border_bottom 37 : true, 38 ); 39 40 const hide_rounded = $derived( 41 typeof basis.hide_rounded === `boolean` ? basis.hide_rounded : false, 42 ); 43 44 const set_title_background = $derived( 45 typeof basis.set_title_background === `boolean` 46 ? basis.set_title_background 47 : false, 48 ); 49 50 const set_default_background = $derived( 51 typeof basis.set_default_background === `boolean` 52 ? basis.set_default_background 53 : false, 54 ); 55 </script> 56 57 <div 58 id={basis.id || ``} 59 class={`${fmt_cl(basis.classes)} flex flex-col`} 60 data-view={basis.view || ``} 61 > 62 <div 63 class={`relative flex flex-col h-auto w-lo_${$app_lo} gap-[3px] ${ 64 set_title_background ? `bg-ly${basis.layer}` : `` 65 }`} 66 > 67 {#if basis.title && (!basis.default_el || (basis.default_el && basis.default_el.show_title))} 68 <TrellisTitle 69 basis={basis.title} 70 layer={parse_layer(basis.layer - 1)} 71 /> 72 {/if} 73 {#if basis.default_el} 74 <div 75 class={`flex flex-col h-auto w-full justify-center items-center`} 76 > 77 {#if el_default} 78 {@render el_default()} 79 {:else if basis.default_el} 80 <TrellisDefaultLabel 81 layer={parse_layer(basis.layer - 1)} 82 labels={basis.default_el.labels 83 ? basis.default_el.labels 84 : [ 85 { 86 label: `${$ls( 87 `common.no_items_to_display`, 88 )}.`, 89 }, 90 ]} 91 /> 92 {/if} 93 </div> 94 {:else if basis.list} 95 <div class={`flex flex-col w-full justify-center items-center`}> 96 {#each basis.list as li} 97 {#if li} 98 <div 99 class={`${ 100 li.hide_field ? `hidden` : `` 101 } group flex flex-row h-full w-full justify-end items-center bg-ly${ 102 basis.layer 103 } ${li.full_rounded ? `rounded-touch` : ``} ${ 104 hide_rounded 105 ? `` 106 : `first:rounded-t-2xl last:rounded-b-2xl` 107 } ${ 108 !li.hide_active 109 ? `active:bg-ly${basis.layer}_a` 110 : `` 111 } el-re`} 112 > 113 <div 114 class={`flex flex-row h-full w-full gap-1 items-center overflow-y-hidden`} 115 > 116 {#if !basis.hide_offset} 117 <TrellisOffset 118 basis={li.offset} 119 layer={basis.layer} 120 /> 121 {/if} 122 {#if el_offset} 123 {@render el_offset()} 124 {/if} 125 {#if `touch` in li && li.touch} 126 <TrellisTouch 127 basis={li.touch} 128 layer={basis.layer} 129 {hide_border_b} 130 {hide_border_t} 131 hide_active={!!li.hide_active} 132 /> 133 {:else if `input` in li && li.input} 134 <TrellisInput 135 basis={li.input} 136 layer={basis.layer} 137 {hide_border_b} 138 {hide_border_t} 139 /> 140 {:else if `select` in li && li.select} 141 <TrellisSelect 142 basis={li.select} 143 layer={basis.layer} 144 {hide_border_b} 145 {hide_border_t} 146 hide_active={!!li.hide_active} 147 /> 148 {/if} 149 </div> 150 </div> 151 {/if} 152 {/each} 153 </div> 154 {/if} 155 </div> 156 {#if el_append} 157 <div 158 class={`flex flex-col w-full ${ 159 set_default_background ? `bg-ly${basis.layer}` : `` 160 }`} 161 > 162 {@render el_append()} 163 </div> 164 {/if} 165 </div> 166 <div 167 class={`hidden group-first:border-t-0 group-first:border-t-line group-first:border-b-0 group-first:border-b-line`} 168 ></div>