entry-line.svelte (2012B)
1 <script lang="ts"> 2 import { 3 Glyph, 4 parse_layer, 5 type IEntryLine, 6 type LoadingDimension, 7 } from "@radroots/apps-lib"; 8 import InputValue from "../lib/input-value.svelte"; 9 import LoadCircle from "../lib/load-circle.svelte"; 10 import EntryWrap from "./entry-wrap.svelte"; 11 12 let { 13 basis, 14 value = $bindable(``), 15 }: { 16 basis: IEntryLine; 17 value: string; 18 } = $props(); 19 20 const layer = $derived( 21 parse_layer( 22 typeof basis.wrap?.layer === `boolean` ? 0 : basis.wrap?.layer, 23 ), 24 ); 25 26 const classes_layer = $derived( 27 typeof basis.wrap?.layer === `boolean` ? `` : `text-ly${layer}-gl`, 28 ); 29 30 const loading_dim: LoadingDimension = $derived( 31 basis.wrap?.style === `guide` ? `md` : `sm`, 32 ); 33 </script> 34 35 <EntryWrap basis={basis?.wrap}> 36 <InputValue 37 bind:value 38 basis={{ 39 ...basis.el, 40 classes: `h-entry_line ${basis.el.classes}`, 41 }} 42 /> 43 {#if basis.loading} 44 <div 45 class={`z-5 absolute right-0 top-0 flex flex-row h-full pr-4 justify-end items-center fade-in el-re`} 46 > 47 <LoadCircle 48 basis={{ 49 dim: loading_dim, 50 }} 51 /> 52 </div> 53 {:else if basis.notify_inline} 54 {#if `glyph` in basis.notify_inline} 55 <div 56 class={`z-5 absolute el-re right-0 top-0 flex flex-row h-full pr-3 justify-end items-center translate-x-[34px] fade-in`} 57 > 58 <Glyph 59 basis={typeof basis.notify_inline.glyph === `string` 60 ? { 61 key: basis.notify_inline.glyph, 62 dim: `xs+`, 63 classes: `${classes_layer}`, 64 } 65 : basis.notify_inline.glyph} 66 /> 67 </div> 68 {/if} 69 {/if} 70 </EntryWrap>