litechatplus/src/lib/QuickSetting.svelte

<script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'

 import { crossfade, fade } from 'svelte/transition';
 import { expoInOut } from 'svelte/easing';

 const [send, receive] = crossfade({
     duration: 350,
     easing: expoInOut
 });

 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();

 export let enabled: boolean = false;
 export let icon: IconDefinition | undefined = undefined;
 export let chevron: IconDefinition | undefined = undefined;
 export let title: string;
 export let subtitle: string = "";

 export let showMenu: boolean = false;
 export let menu: {
     title: string,
     items?: {
	 value: string,
	 enabled?: boolean,
     }[]
 } = { title: "Menu" };

 export let column: number | undefined = undefined, row: number | undefined = undefined;
</script>

{#if showMenu}
    <div class="modal-background clickable" transition:fade="{{easing: expoInOut}}"
	 on:click={() => showMenu = false} />
    <div class="menu" in:send="{{key: 0}}" out:receive="{{key: 0}}">
	<h1 class="no-select">{menu.title}</h1>
	<div class="items d-flex col">
	    {#each menu.items || [] as item}
		<button class="item mb-8 radius-24 border-0 px-24 py-24"
			class:enabled="{item.enabled}"
			on:click={() => dispatch("menu:click", item.value)}
		    >{item.value}</button>
	    {/each}
	</div>
    </div>
{:else}
    <button in:send="{{key: 0}}" out:receive="{{key: 0}}"
	    style:grid-row-start="{row}"
	    style:grid-column-start="{column}"
	    class:enabled="{enabled}"
	    class="border-0 ma-8 radius-32 d-flex pa-8 no-select"
	    on:click>
	<div class="button-icon px-8">
	    {#if icon}
		<FontAwesomeIcon icon="{icon}" />
	    {/if}
	</div>
	<div class="button-text d-flex col grow-1">
	    <div class="title mb-2">
		{title}
	    </div>
	    <div class="subtitle overflow-hidden">
		{subtitle}
	    </div>
	</div>
	<div class="button-icon px-8">
	    {#if chevron}
		<FontAwesomeIcon icon="{chevron}" />
	    {/if}
	</div>
    </button>
{/if}

<style lang="scss">
 .hide {
     visibility: hidden;
 }

 button {
     height: auto;
     align-items: center;
     text-align: start;
     /* padding-left: 24px; */
     font-size: 1.2em;
     transition: background-color;
     transition-duration: 250ms;
     font-size: min(calc(15px + 0.390625vw), 18.5px);
 }

 button.enabled {
     background: var(--base-600);
     color: var(--base-700);
 }
 button:not(.enabled) {
     background: var(--base-800);
 }

 .button-text {
     min-width: 0;
 }

 button .title {
     font-weight: bold;
     font-size: .9em;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 button .subtitle {
     font-size: .85em;
     font-weight: 300;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .menu {
     position: absolute;
     left: 50%;
     top: 50%;
     width: calc(100vw - 4em);
     max-width: 32em;
     max-height: calc(100vh - 4em);
     overflow: auto;
     transform: translate(-50%,-50%);
     padding: 1em;
     border-radius: 12px;
     background: var(--base-700);
     z-index: 300;
 }

 .modal-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.3);
     z-index: 300;
 }

 .items {

 }

</style>