98 lines
3.3 KiB
Svelte
98 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { XIcon } from "lucide-svelte";
|
|
import { language } from "src/lang";
|
|
import { alertConfirm } from "src/ts/alert";
|
|
import type { customscript } from "src/ts/storage/database";
|
|
import Check from "../../UI/GUI/CheckInput.svelte";
|
|
import TextInput from "../../UI/GUI/TextInput.svelte";
|
|
import SelectInput from "../../UI/GUI/SelectInput.svelte";
|
|
import OptionInput from "../../UI/GUI/OptionInput.svelte";
|
|
|
|
export let value:customscript
|
|
export let onRemove: () => void = () => {}
|
|
export let onClose: () => void = () => {}
|
|
export let onOpen: () => 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={() => {
|
|
open = !open
|
|
if(open){
|
|
onOpen()
|
|
}
|
|
else{
|
|
onClose()
|
|
}
|
|
}}>
|
|
<span>{value.comment.length === 0 ? 'Unnamed Script' : value.comment}</span>
|
|
</button>
|
|
<button class="valuer" on:click={async () => {
|
|
const d = await alertConfirm(language.removeConfirm + value.comment)
|
|
if(d){
|
|
if(!open){
|
|
onClose()
|
|
}
|
|
onRemove()
|
|
}
|
|
}}>
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
{#if open}
|
|
<div class="seperator p-2">
|
|
<span class="text-textcolor mt-6">{language.name}</span>
|
|
<TextInput size="sm" bind:value={value.comment} />
|
|
<span class="text-textcolor mt-4">Modification Type</span>
|
|
<SelectInput bind:value={value.type}>
|
|
<OptionInput value="editinput">{language.editInput}</OptionInput>
|
|
<OptionInput value="editoutput">{language.editOutput}</OptionInput>
|
|
<OptionInput value="editprocess">{language.editProcess}</OptionInput>
|
|
<OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
|
|
<OptionInput value="edittrans">{language.editTranslationDisplay}</OptionInput>
|
|
</SelectInput>
|
|
<span class="text-textcolor mt-6">IN:</span>
|
|
<TextInput size="sm" bind:value={value.in} />
|
|
<span class="text-textcolor mt-6">OUT:</span>
|
|
<TextInput size="sm" bind:value={value.out} />
|
|
{#if value.ableFlag}
|
|
<span class="text-textcolor mt-6">FLAG:</span>
|
|
<TextInput size="sm" bind:value={value.flag} />
|
|
{/if}
|
|
<div class="flex items-center mt-4">
|
|
<Check bind:check={value.ableFlag} onChange={() => {
|
|
if(!value.flag){
|
|
value.flag = 'g'
|
|
}
|
|
}}/>
|
|
<span>Custom Flag</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.valuer:hover{
|
|
color: rgba(16, 185, 129, 1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.endflex{
|
|
display: flex;
|
|
flex-grow: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.seperator{
|
|
border: none;
|
|
outline: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
</style> |