trellis-input.svelte (3513B)
1 <script lang="ts"> 2 import type { ITrellisBasisInput } from "$lib/types/components/trellis"; 3 import { fmt_trellis } from "$lib/utils/app"; 4 import { fmt_cl, Glyph } from "@radroots/apps-lib"; 5 import type { ThemeLayer } from "@radroots/themes"; 6 import InputPwa from "../lib/input-pwa.svelte"; 7 import LoadSymbol from "../lib/load-symbol.svelte"; 8 9 let { 10 basis, 11 layer, 12 hide_border_b, 13 hide_border_t, 14 }: { 15 basis: ITrellisBasisInput; 16 layer: ThemeLayer; 17 hide_border_b: boolean; 18 hide_border_t: boolean; 19 } = $props(); 20 </script> 21 22 <div class={`flex flex-row flex-grow h-full w-full`}> 23 <div 24 class={`${fmt_trellis( 25 hide_border_b, 26 hide_border_t, 27 )} flex flex-row h-line w-full justify-start items-center border-t-line border-ly${layer}-edge overflow-hidden`} 28 > 29 {#if basis.line_label && basis.line_label.value} 30 <div 31 class={`${fmt_cl( 32 basis.line_label.classes, 33 )} flex flex-row h-full justify-start items-center overflow-x-hidden`} 34 > 35 <p class={`font-sans text-ly${layer}-gl_b`}> 36 {basis.line_label.value} 37 </p> 38 </div> 39 {/if} 40 <div 41 class={`relative flex flex-row flex-grow h-full pr-12 justify-start items-center`} 42 > 43 <InputPwa 44 basis={{ 45 ...basis.basis, 46 layer: layer, 47 }} 48 /> 49 {#if basis.action} 50 {#if basis.action.visible} 51 <div 52 class={`absolute top-0 right-0 flex flex-row h-full w-12 pr-4 justify-end items-center fade-in`} 53 > 54 {#if basis.action.loading} 55 <div class={`flex flex-row fade-in`}> 56 <LoadSymbol 57 basis={{ 58 dim: `glyph-send-button`, 59 blades: 8, 60 classes: `text-ly${layer}-gl el-re`, 61 }} 62 /> 63 </div> 64 {:else} 65 <button 66 class={`group fade-in-long`} 67 onclick={async () => { 68 if (basis.action?.callback) 69 await basis.action.callback(); 70 }} 71 > 72 <Glyph 73 basis={basis.action.glyph 74 ? { 75 dim: `md-`, 76 ...basis.action.glyph, 77 } 78 : { 79 key: `plus`, 80 classes: `text-ly${layer}-gl`, 81 dim: `md-`, 82 }} 83 /> 84 </button> 85 {/if} 86 </div> 87 {/if} 88 {/if} 89 </div> 90 </div> 91 </div>