Risuai 0.6.3 first commit
This commit is contained in:
kwaroran
148
src/lib/Others/AlertComp.svelte
Normal file
148
src/lib/Others/AlertComp.svelte
Normal file
@@ -0,0 +1,148 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { alertStore } from "../../ts/alert";
|
||||
import { DataBase } from '../../ts/database';
|
||||
import { getCharImage } from '../../ts/characters';
|
||||
import { ParseMarkdown } from '../../ts/parser';
|
||||
import BarIcon from '../SideBars/BarIcon.svelte';
|
||||
import { User } from 'lucide-svelte';
|
||||
let btn
|
||||
let input = ''
|
||||
|
||||
$: (() => {
|
||||
if(btn){
|
||||
btn.focus()
|
||||
}
|
||||
if($alertStore.type !== 'input'){
|
||||
input = ''
|
||||
}
|
||||
|
||||
})()
|
||||
</script>
|
||||
|
||||
{#if $alertStore.type !== 'none' && $alertStore.type !== 'toast'}
|
||||
<div class="absolute w-full h-full z-50 bg-black bg-opacity-50 flex justify-center items-center" class:vis={ $alertStore.type === 'wait2'}>
|
||||
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto">
|
||||
{#if $alertStore.type === 'error'}
|
||||
<h2 class="text-red-700 mt-0 mb-2 w-40 max-w-full">Error</h2>
|
||||
{:else if $alertStore.type === 'ask'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Confirm</h2>
|
||||
{:else if $alertStore.type === 'selectChar'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Select</h2>
|
||||
{:else if $alertStore.type === 'input'}
|
||||
<h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Input</h2>
|
||||
{/if}
|
||||
{#if $alertStore.type === 'markdown'}
|
||||
<span class="text-gray-300 chattext prose prose-invert chattext2">{@html ParseMarkdown($alertStore.msg)}</span>
|
||||
{:else if $alertStore.type !== 'select'}
|
||||
<span class="text-gray-300">{$alertStore.msg}</span>
|
||||
{/if}
|
||||
{#if $alertStore.type === 'ask'}
|
||||
<div class="flex gap-2 w-full">
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors flex-1 focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'yes'
|
||||
})
|
||||
}}>YES</button>
|
||||
<button class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-red-500 transition-colors focus:border-3 flex-1" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: 'no'
|
||||
})
|
||||
}}>NO</button>
|
||||
</div>
|
||||
{:else if $alertStore.type === 'select'}
|
||||
{#each $alertStore.msg.split('||') as n, i}
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: i.toString()
|
||||
})
|
||||
}}>{n}</button>
|
||||
{/each}
|
||||
{:else if $alertStore.type === 'error' || $alertStore.type === 'normal' || $alertStore.type === 'markdown'}
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
}}>OK</button>
|
||||
{:else if $alertStore.type === 'input'}
|
||||
<input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected" bind:value={input}>
|
||||
<button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: input
|
||||
})
|
||||
}}>OK</button>
|
||||
{:else if $alertStore.type === 'selectChar'}
|
||||
<div class="flex w-full items-start flex-wrap gap-2 justify-start">
|
||||
{#each $DataBase.characters as char, i}
|
||||
{#if char.type !== 'group'}
|
||||
{#if char.image}
|
||||
{#await getCharImage($DataBase.characters[i].image, 'css')}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}}>
|
||||
<User/>
|
||||
</BarIcon>
|
||||
{:then im}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}} additionalStyle={im} />
|
||||
|
||||
{/await}
|
||||
{:else}
|
||||
<BarIcon onClick={() => {
|
||||
//@ts-ignore
|
||||
alertStore.set({type: 'none',msg: char.chaId})
|
||||
}}>
|
||||
<User/>
|
||||
</BarIcon>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if $alertStore.type === 'toast'}
|
||||
<div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto z-50 text-neutral-200"
|
||||
on:animationend={() => {
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
}}
|
||||
>{$alertStore.msg}</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.break-any{
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@keyframes toastAnime {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-anime {
|
||||
animation: toastAnime 1s ease-out;
|
||||
}
|
||||
|
||||
.vis{
|
||||
opacity: 1 !important;
|
||||
--tw-bg-opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user