form-line-ledger-select.svelte (2800B)
1 <script lang="ts"> 2 import { 3 type ElementCallbackValueKeydown, 4 type IIdOpt, 5 type ISelectCallback, 6 type ISelectOption, 7 fmt_id, 8 } from "@radroots/apps-lib"; 9 import InputPwa from "../lib/input-pwa.svelte"; 10 import SelectPwa from "../lib/select-pwa.svelte"; 11 12 let { 13 basis, 14 value_input = $bindable(``), 15 value_sel = $bindable(``), 16 }: { 17 basis: IIdOpt & { 18 display_value?: string; 19 label?: string; 20 input: { 21 placeholder?: string; 22 callback_keydown?: 23 | ElementCallbackValueKeydown<HTMLInputElement> 24 | undefined; 25 }; 26 select: { 27 entries: ISelectOption<string>[]; 28 callback?: ISelectCallback; 29 }; 30 }; 31 value_input?: string; 32 value_sel?: string; 33 } = $props(); 34 35 const id = $derived(basis.id || ``); 36 </script> 37 38 <div class={`flex flex-col w-full gap-2 justify-start items-start`}> 39 {#if basis.label} 40 <div class={`flex flex-row w-full justify-start items-center`}> 41 <p class={`font-sansd text-trellis_ti text-ly0-gl-label uppercase`}> 42 {basis.label} 43 </p> 44 </div> 45 {/if} 46 <div 47 class={`relative flex flex-row h-12 w-full justify-start items-center border-y-line border-ly0-edge`} 48 > 49 {#if basis.display_value} 50 <p class={`font-sans font-[400] text-ly0-gl text-form_base`}> 51 {basis.display_value} 52 </p> 53 {:else} 54 <InputPwa 55 bind:value={value_input} 56 basis={{ 57 id: id ? fmt_id(`${id}_input`) : undefined, 58 layer: 0, 59 classes: `h-10 placeholder:text-[1.1rem]`, 60 placeholder: basis.input.placeholder || ``, 61 callback_keydown: basis.input.callback_keydown, 62 }} 63 /> 64 <div 65 class={`absolute right-0 flex flex-row justify-center items-center`} 66 > 67 <SelectPwa 68 bind:value={value_sel} 69 basis={{ 70 classes: `w-fit text-ly1-gl`, 71 id: id ? fmt_id(`${id}_sel`) : undefined, 72 sync: true, 73 layer: 1, 74 show_arrows: `r`, 75 options: [ 76 { 77 entries: basis.select.entries, 78 }, 79 ], 80 callback: basis.select.callback, 81 }} 82 /> 83 </div> 84 {/if} 85 </div> 86 </div>