trellis-offset.svelte (2627B)
1 <script lang="ts"> 2 import type { 3 ITrellisBasisOffset, 4 ITrellisBasisOffsetMod, 5 } from "$lib/types/components/trellis"; 6 import { Flex, fmt_cl, Glyph } from "@radroots/apps-lib"; 7 import type { ThemeLayer } from "@radroots/themes"; 8 import ButtonGlyphCircle from "../button/button-glyph-circle.svelte"; 9 import LoadSymbol from "../lib/load-symbol.svelte"; 10 11 let { 12 basis = undefined, 13 layer, 14 }: { 15 basis?: ITrellisBasisOffset; 16 layer: ThemeLayer; 17 } = $props(); 18 19 const mod: ITrellisBasisOffsetMod = $derived(basis?.mod ? basis.mod : `sm`); 20 </script> 21 22 <div class={`flex flex-row h-full`}> 23 {#if mod === `sm`} 24 <div class={`${fmt_cl(``)} flex flex-row h-full w-[22px]`}> 25 <Flex /> 26 </div> 27 {:else if mod === `glyph`} 28 <div class={`flex flex-row pr-[2px]`}> 29 <div class={`${fmt_cl(``)} flex flex-row h-full w-trellisOffset`}> 30 <Flex /> 31 </div> 32 </div> 33 {:else if typeof mod === `object`} 34 <div 35 class={`flex flex-row h-full min-w-[20px] w-trellisOffset justify-center items-center pr-3`} 36 > 37 <button 38 class={`fade-in pl-2 translate-x-[3px] translate-y-[1px]`} 39 onclick={async (ev) => { 40 if (mod.loading) return; 41 else if (typeof basis !== `boolean` && basis?.callback) 42 await basis.callback(ev); 43 }} 44 > 45 {#if mod.loading} 46 <LoadSymbol basis={{ blades: 8, dim: `xs` }} /> 47 {:else if `glyph` in mod} 48 <Glyph 49 basis={{ 50 classes: mod.glyph.classes 51 ? mod.glyph.classes 52 : `text-ly${layer}-gl`, 53 ...mod.glyph, 54 }} 55 /> 56 {:else if `glyph_circle` in mod} 57 <ButtonGlyphCircle 58 basis={{ 59 classes_wrap: mod.glyph_circle?.classes_wrap, 60 glyph: { 61 classes: mod.glyph_circle?.glyph?.classes 62 ? mod.glyph_circle?.glyph?.classes 63 : `text-ly${layer}-gl`, 64 ...mod.glyph_circle?.glyph, 65 }, 66 }} 67 /> 68 {/if} 69 </button> 70 </div> 71 {/if} 72 </div>