button-layout.svelte (1596B)
1 <script lang="ts"> 2 import { app_lo } from "$lib/stores/app"; 3 import { 4 type IClOpt, 5 type IDisabledOpt, 6 type ILoadingOpt, 7 type ILyOpt, 8 fmt_cl, 9 parse_layer, 10 } from "@radroots/apps-lib"; 11 import type { CallbackPromise } from "@radroots/utils"; 12 import LoadSymbol from "../lib/load-symbol.svelte"; 13 14 let { 15 basis, 16 }: { 17 basis: ILyOpt & 18 IClOpt & 19 IDisabledOpt & 20 ILoadingOpt & { 21 classes_inner?: string; 22 hide_active?: boolean; 23 label: string; 24 callback: CallbackPromise; 25 }; 26 } = $props(); 27 28 const layer = $derived(parse_layer(basis.layer, 1)); 29 30 const classes_active = $derived( 31 !basis.hide_active 32 ? `ly1-active-surface ly1-active-raise-less ly1-active-ring-less` 33 : ``, 34 ); 35 </script> 36 37 <button 38 class={`${fmt_cl(basis.classes)} group flex flex-row h-touch_guide w-lo_${$app_lo} justify-center items-center bg-ly${layer} rounded-touch ${basis.disabled ? `opacity-60` : classes_active} el-re`} 39 onclick={async (ev) => { 40 ev.stopPropagation(); 41 if (!basis.disabled) await basis.callback(); 42 }} 43 > 44 {#if basis.loading} 45 <LoadSymbol basis={{ dim: `md` }} /> 46 {:else} 47 <p 48 class={`${fmt_cl(basis.classes_inner)} font-sans font-[600] tracking-wide text-ly${layer}-gl-shade ${basis.disabled ? `` : `group-active:text-ly${layer}-gl/40 `} el-re`} 49 > 50 {basis.label || ``} 51 </p> 52 {/if} 53 </button>