web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

form-line-ledger.svelte (2903B)

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