web_lib

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

settings.svelte (4235B)

      1 <script lang="ts">
      2     import { LayoutView, PageToolbar } from "$lib";
      3     import LayoutTrellis from "$lib/components/layout/layout-trellis.svelte";
      4     import Trellis from "$lib/components/trellis/trellis.svelte";
      5     import type { LibContext } from "$lib/types/context";
      6     import type { ITrellisExtList } from "$lib/types/components/trellis";
      7     import type { IViewBasis } from "$lib/types/views";
      8     import { idb_kv_init_page } from "$lib/utils/keyval";
      9     import {
     10         get_context,
     11         SYMBOLS,
     12         theme_mode,
     13     } from "@radroots/apps-lib";
     14     import { handle_err } from "@radroots/utils";
     15     import { onMount } from "svelte";
     16 
     17     const { ls, lc_color_mode } = get_context<LibContext>(`lib`);
     18 
     19     let {
     20         basis,
     21     }: {
     22         basis: IViewBasis<{
     23             trellis_ext?: ITrellisExtList[];
     24         }>;
     25     } = $props();
     26 
     27     onMount(async () => {
     28         try {
     29             if (!basis.kv_init_prevent) await idb_kv_init_page();
     30         } catch (e) {
     31             handle_err(e, `on_mount`);
     32         }
     33     });
     34 </script>
     35 
     36 <LayoutView>
     37     <PageToolbar
     38         basis={{
     39             header: {
     40                 label: `${$ls(`common.settings`)}`,
     41             },
     42         }}
     43     />
     44     <LayoutTrellis>
     45         <Trellis
     46             basis={{
     47                 layer: 1,
     48                 title: {
     49                     value: `Appearance`,
     50                 },
     51                 list: [
     52                     {
     53                         hide_active: true,
     54                         select: {
     55                             label: {
     56                                 left: [
     57                                     {
     58                                         value: `${$ls(`common.color_mode`)}`,
     59                                         classes: `capitalize`,
     60                                     },
     61                                 ],
     62                             },
     63                             display: {
     64                                 label: {
     65                                     value: `${$theme_mode}`,
     66                                     classes: `capitalize`,
     67                                 },
     68                             },
     69                             el: {
     70                                 value: $theme_mode,
     71                                 options: [
     72                                     {
     73                                         entries: [
     74                                             {
     75                                                 value: SYMBOLS.bullet,
     76                                                 label: `${$ls(`icu.choose_*`, {
     77                                                     value: `${$ls(
     78                                                         `common.color_mode`,
     79                                                     )}`.toLowerCase(),
     80                                                 })}`,
     81                                                 disabled: true,
     82                                             },
     83                                             {
     84                                                 value: `light`,
     85                                                 label: `${$ls(`common.light`)}`,
     86                                             },
     87                                             {
     88                                                 value: `dark`,
     89                                                 label: `${$ls(`common.dark`)}`,
     90                                             },
     91                                         ],
     92                                     },
     93                                 ],
     94                                 callback: lc_color_mode,
     95                             },
     96                             end: {
     97                                 glyph: {
     98                                     key: `caret-right`,
     99                                 },
    100                             },
    101                         },
    102                     },
    103                 ],
    104             }}
    105         />
    106         {#if basis.trellis_ext?.length}
    107             {#each basis.trellis_ext as trellis_ext}
    108                 <Trellis
    109                     basis={{
    110                         layer: 1,
    111                         list: trellis_ext.list,
    112                     }}
    113                 />
    114             {/each}
    115         {/if}
    116     </LayoutTrellis>
    117 </LayoutView>