[feat] added lorebook sorting

2023-07-20 17:17:09 +09:00
parent bfcf6766f0
commit 6f10461e2e
8 changed files with 213 additions and 150 deletions
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+    import { language } from "../../../lang";
+    import type { loreBook } from "../../../ts/storage/database";
+    import { alertConfirm } from "../../../ts/alert";
+    import Check from "../../UI/GUI/Check.svelte";
+    import Help from "../../Others/Help.svelte";
+    import TextInput from "../../UI/GUI/TextInput.svelte";
+    import NumberInput from "../../UI/GUI/NumberInput.svelte";
+    import TextAreaInput from "../../UI/GUI/TextAreaInput.svelte";
+    export let value:loreBook
+    export let onRemove: () => void = () => {}
+    export let idx:number
+    let open = false
+</script>
+
+<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
+    <div class="flex items-center transition-colors w-full ">
+        <button class="endflex valuer border-borderc" on:click={() => {
+            value.secondkey = value.secondkey ?? ''
+            open = !open
+        }}>
+            <span>{value.comment.length === 0 ? value.key.length === 0 ? "Unnamed Lore" : value.key : value.comment}</span>
+        </button>
+        <button class="valuer" on:click={async () => {
+            const d = await alertConfirm(language.removeConfirm + value.comment)
+            if(d){
+                onRemove()
+            }
+        }}>
+            <XIcon />
+        </button>
+    </div>
+    {#if open}
+        <div class="border-0 outline-none w-full mt-2 flex flex-col mb-2">
+            <span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
+            <TextInput size="sm" bind:value={value.comment}/>
+            {#if !value.alwaysActive}
+                <span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
+                <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                <TextInput size="sm" bind:value={value.key}/>
+
+                {#if value.selective}
+                    <span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
+                    <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
+                    <TextInput size="sm" bind:value={value.secondkey}/>
+                {/if}
+            {/if}
+            {#if !(value.activationPercent === undefined || value.activationPercent === null)}
+                <span class="text-neutral-200 mt-6">{language.activationProbability}</span>
+                <NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
+                    if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
+                        value.activationPercent = 0
+                    }
+                    if(value.activationPercent > 100){
+                        value.activationPercent = 100
+                    }
+                }} />
+            {/if}
+            <span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
+            <NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
+            <span class="text-neutral-200 mt-4 mb-2">{language.prompt}</span>
+            <TextAreaInput autocomplete="off" bind:value={value.content} />
+            <div class="flex items-center mt-4">
+                <Check bind:check={value.alwaysActive} name={language.alwaysActive}/>
+            </div>
+            <div class="flex items-center mt-2">
+                <Check bind:check={value.selective} name={language.selective}/>
+                <Help key="loreSelective" name={language.selective}/>
+            </div>
+            <div class="flex items-center mt-2 mb-6">
+                {#if value.activationPercent === undefined || value.activationPercent === null}
+                    <Check name={language.loreRandomActivation} check={false} onChange={() => {value.activationPercent = 50}}/>
+                {:else}
+                    <Check name={language.loreRandomActivation} check={true} onChange={() => {value.activationPercent = null}}/>
+                {/if}
+                <span><Help name={language.loreRandomActivation} key="loreRandomActivation"/></span>
+            </div>
+        </div>
+    {/if}
+</div>
+
+
+
+<style>
+    .valuer:hover{
+        color: rgba(16, 185, 129, 1);
+        cursor: pointer;
+    }
+
+    .endflex{
+        display: flex;
+        flex-grow: 1;
+        cursor: pointer;
+    }
+    
+</style>