web_lib

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

trellis-select.svelte (1995B)

      1 <script lang="ts">
      2     import type { ITrellisBasisSelect } from "$lib/types/components/trellis";
      3     import type { ThemeLayer } from "@radroots/themes";
      4     import LoadSymbol from "../lib/load-symbol.svelte";
      5     import SelectMenu from "../lib/select-menu.svelte";
      6     import TrellisEnd from "./trellis-end.svelte";
      7     import TrellisLine from "./trellis-line.svelte";
      8     import TrellisRowDisplayValue from "./trellis-row-display-value.svelte";
      9     import TrellisRowLabel from "./trellis-row-label.svelte";
     10 
     11     let {
     12         basis,
     13         layer,
     14         hide_active,
     15         hide_border_b,
     16         hide_border_t,
     17     }: {
     18         basis: ITrellisBasisSelect;
     19         layer: ThemeLayer;
     20         hide_active: boolean;
     21         hide_border_b: boolean;
     22         hide_border_t: boolean;
     23     } = $props();
     24 
     25     const loading = $derived(
     26         typeof basis?.loading === `boolean` ? basis.loading : false,
     27     );
     28 
     29     const value = $derived(basis.el.value);
     30 </script>
     31 
     32 <TrellisLine
     33     {layer}
     34     {loading}
     35     {hide_border_b}
     36     {hide_border_t}
     37     callback={basis.callback}
     38 >
     39     <TrellisRowLabel basis={basis.label} {layer} {hide_active} />
     40     {#if basis.display}
     41         <div class={`flex flex-row pr-3 justify-center items-end`}>
     42             <SelectMenu {value} basis={basis.el}>
     43                 {#if basis.display.loading}
     44                     <div
     45                         class={`flex flex-row h-full w-full justify-end items-center`}
     46                     >
     47                         <LoadSymbol basis={{ dim: `sm` }} />
     48                     </div>
     49                 {:else}
     50                     <TrellisRowDisplayValue
     51                         basis={{ ...basis.display }}
     52                         {layer}
     53                         {hide_active}
     54                     />
     55                 {/if}
     56             </SelectMenu>
     57         </div>
     58     {/if}
     59 
     60     {#snippet el_end()}
     61         {#if basis.end}
     62             <TrellisEnd basis={basis.end} {layer} {hide_active} />
     63         {/if}
     64     {/snippet}
     65 </TrellisLine>