mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor svelte/legacy functions to svelte 5 syntax

Browse Source
This commit is contained in:
kwaroran
2024-10-23 21:03:34 +09:00
parent f078292843
commit 9add01cda2
24 changed files with 201 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/UI/GUI/MultiLangDisplay.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { run, stopPropagation } from 'svelte/legacy';
import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
import { ParseMarkdown } from "src/ts/parser";
import { parseMultilangString, toLangName } from "src/ts/util";
@@ -16,7 +14,7 @@
if(valueObject["en"] === undefined){
selectedLang = "xx"
}
run(() => {
$effect.pre(() => {
valueObject = parseMultilangString(value)
});
</script>
@@ -25,7 +23,8 @@
<div class="flex flex-wrap max-w-fit p-1 gap-2">
{#each Object.keys(valueObject) as lang}
{#if lang !== 'xx' || Object.keys(valueObject).length === 1}
<button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} onclick={stopPropagation(() => {
<button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} onclick={((e) => {
e.stopPropagation()
selectedLang = lang
})}>{toLangName(lang)}</button>
{/if}

4
src/lib/UI/GUI/MultiLangInput.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { encodeMultilangString, languageCodes, parseMultilangString, toLangName } from "src/ts/util";
import TextAreaInput from "./TextAreaInput.svelte";
let addingLang = $state(false)
@@ -33,7 +31,7 @@
delete valueObject["xx"]
updateValue()
}
run(() => {
$effect.pre(() => {
valueObject = parseMultilangString(value)
});
</script>

6
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -114,8 +114,6 @@
</div>
</div>
<script lang="ts">
import { run } from 'svelte/legacy';
import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
import { highlighter, getNewHighlightId, removeHighlight, AllCBS } from 'src/ts/gui/highlight'
import { isMobile } from 'src/ts/storage/globalApi';
@@ -311,10 +309,10 @@
} catch (error) {}
}
run(() => {
$effect.pre(() => {
optiValue = value
});
run(() => {
$effect.pre(() => {
highlightChange(value, highlightId)
});

1
src/lib/UI/ModelList.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { DataBase } from "src/ts/storage/database";
import { getHordeModels } from "src/ts/horde/getModels";
import Arcodion from "./Arcodion.svelte";

17
src/lib/UI/Realm/RealmHubIcon.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { BookIcon, ImageIcon, SmileIcon } from "lucide-svelte";
import { alertNormal } from "src/ts/alert";
import { hubURL, type hubType } from "src/ts/characterCards";
@@ -35,13 +33,22 @@
<div class="flex-grow"></div>
<div class="flex flex-wrap w-full flex-row-reverse gap-1">
{#if chara.hasEmotion}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
e.stopPropagation()
alertNormal("This character includes emotion images")
})}><SmileIcon /></button>
{/if}
{#if chara.hasAsset}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional assets")})}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
e.stopPropagation()
alertNormal("This character includes additional assets")
})}><ImageIcon /></button>
{/if}
{#if chara.hasLore}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
e.stopPropagation()
alertNormal("This character includes lorebook")
})}><BookIcon /></button>
{/if}
</div>
</div>

5
src/lib/UI/Realm/RealmLicense.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { CCLicenseData } from "src/ts/creation/license";
import { tooltip } from "src/ts/gui/tooltip";
import { openURL } from "src/ts/storage/globalApi";
@@ -15,7 +13,8 @@
{#if Object.keys(CCLicenseData).includes(license)}
<div class="w-full flex flex-row">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={stopPropagation(() => {
<div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={((e) => {
e.stopPropagation();
openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
})}>
<img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />

11
src/lib/UI/Realm/RealmMain.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { downloadRisuHub, getRisuHub, hubAdditionalHTML, type hubType } from "src/ts/characterCards";
import { ArrowLeft, ArrowRight, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
import { alertInput } from "src/ts/alert";
@@ -9,9 +7,9 @@
import TextInput from "../GUI/TextInput.svelte";
import { MobileGUI, SizeStore } from "src/ts/stores";
import { Capacitor } from "@capacitor/core";
import RealmPopUp from "./RealmPopUp.svelte";
import { googleBuild } from "src/ts/storage/globalApi";
import { split } from "lodash";
import RealmPopUp from "./RealmPopUp.svelte";
import { googleBuild } from "src/ts/storage/globalApi";
import { split } from "lodash";
let openedData:null|hubType = $state(null)
@@ -182,7 +180,8 @@
</button>
</h1>
<div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
<button class="w-full hover:bg-selected p-4" onclick={stopPropagation(async () => {
<button class="w-full hover:bg-selected p-4" onclick={(async (e) => {
e.stopPropagation()
menuOpen = false
const input = await alertInput('Input URL or ID')
if(input.startsWith("http")){

24
src/lib/UI/Realm/RealmPopUp.svelte
View File

@@ -1,11 +1,8 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { BookIcon, FlagIcon, ImageIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-svelte";
import { language } from "src/lang";
import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
import { hubURL, type hubType, downloadRisuHub, getRealmInfo } from "src/ts/characterCards";
import { parseMarkdownSafe } from "src/ts/parser";
import { DataBase } from "src/ts/storage/database";
import RealmLicense from "./RealmLicense.svelte";
import MultiLangDisplay from "../GUI/MultiLangDisplay.svelte";
@@ -54,19 +51,26 @@
</span>
<div class="border-l-selected border-l ml-1 mr-1"></div>
{#if openedData.hasEmotion}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
alertNormal("This character includes emotion images")
})}><SmileIcon /></button>
{/if}
{#if openedData.hasAsset}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional Assets")})}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
alertNormal("This character includes additional Assets")
})}><ImageIcon /></button>
{/if}
{#if openedData.hasLore}
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
alertNormal("This character includes lorebook")
})}><BookIcon /></button>
{/if}
</div>
</div>
<div class="flex flex-row-reverse gap-2">
<button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
<button class="text-textcolor2 hover:text-red-500" onclick={(async (e) => {
e.stopPropagation()
const conf = await alertConfirm('Report this character?')
if(conf){
const report = await alertInput('Write a report text that would be sent to the admin (for copywrite issues, use email)')
@@ -83,7 +87,8 @@
<FlagIcon />
</button>
{#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
<button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
<button class="text-textcolor2 hover:text-red-500" onclick={(async (e) => {
e.stopPropagation()
const conf = await alertConfirm('Do you want to remove this character from Realm?')
if(conf){
const da = await fetch(hubURL + '/hub/remove', {
@@ -99,7 +104,8 @@
<TrashIcon />
</button>
{/if}
<button class="text-textcolor2 hover:text-green-500" onclick={stopPropagation(async () => {
<button class="text-textcolor2 hover:text-green-500" onclick={(async (e) => {
e.stopPropagation()
await navigator.clipboard.writeText(`https://realm.risuai.net/character/${openedData.id}`)
alertNormal(language.clipboardSuccess)
})}>