Refactor additionalClass parameter to be className for clarity

This commit is contained in:
kwaroran
2024-04-11 05:46:10 +09:00
parent 35af70f70f
commit 386129626f
9 changed files with 21 additions and 21 deletions

View File

@@ -103,8 +103,8 @@
</script> </script>
<span class="mt-4 text-xl">{language.basicInfo}</span> <span class="mt-4 text-xl">{language.basicInfo}</span>
<TextInput bind:value={currentModule.name} additionalClass="mt-1" placeholder={language.name}/> <TextInput bind:value={currentModule.name} className="mt-1" placeholder={language.name}/>
<TextInput bind:value={currentModule.description} additionalClass="mt-1" placeholder={language.description} size="sm"/> <TextInput bind:value={currentModule.description} className="mt-1" placeholder={language.description} size="sm"/>
<span class="mt-6 text-xl">{language.moduleContent}</span> <span class="mt-6 text-xl">{language.moduleContent}</span>
<div class="grid grid-cols-2 border-selected border rounded-md"> <div class="grid grid-cols-2 border-selected border rounded-md">
<button class={(!Array.isArray(currentModule.lorebook)) ? 'p-4' : "p-4 bg-selected rounded-tl-md"} on:click={toggleLorebook}> <button class={(!Array.isArray(currentModule.lorebook)) ? 'p-4' : "p-4 bg-selected rounded-tl-md"} on:click={toggleLorebook}>

View File

@@ -624,10 +624,10 @@
{/if} {/if}
{#if currentChar.data.ttsMode === 'huggingface'} {#if currentChar.data.ttsMode === 'huggingface'}
<span class="text-textcolor">Model</span> <span class="text-textcolor">Model</span>
<TextInput additionalClass="mb-4 mt-2" bind:value={currentChar.data.hfTTS.model} /> <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.model} />
<span class="text-textcolor">Language</span> <span class="text-textcolor">Language</span>
<TextInput additionalClass="mb-4 mt-2" bind:value={currentChar.data.hfTTS.language} placeholder="en" /> <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.language} placeholder="en" />
{/if} {/if}
{#if currentChar.data.ttsMode === 'vits'} {#if currentChar.data.ttsMode === 'vits'}
{#if currentChar.data.vits} {#if currentChar.data.vits}
@@ -693,8 +693,8 @@
<span class="text-textcolor">{language.depthPrompt}</span> <span class="text-textcolor">{language.depthPrompt}</span>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<NumberInput size="sm" bind:value={currentChar.data.depth_prompt.depth} additionalClass="w-12"/> <NumberInput size="sm" bind:value={currentChar.data.depth_prompt.depth} className="w-12"/>
<TextInput size="sm" bind:value={currentChar.data.depth_prompt.prompt} additionalClass="flex-1"/> <TextInput size="sm" bind:value={currentChar.data.depth_prompt.prompt} className="flex-1"/>
</div> </div>
<span class="text-textcolor mt-2">{language.altGreet}</span> <span class="text-textcolor mt-2">{language.altGreet}</span>

View File

@@ -43,7 +43,7 @@
} }
}} class="flex items-center text-textcolor border-solid border-0 border-darkborderc p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}> }} class="flex items-center text-textcolor border-solid border-0 border-darkborderc p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
{#if editMode} {#if editMode}
<TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/> <TextInput bind:value={chara.chats[i].name} className="flex-grow min-w-0" padding={false}/>
{:else} {:else}
<span>{chat.name}</span> <span>{chat.name}</span>
{/if} {/if}

View File

@@ -57,4 +57,4 @@
<TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => { <TextAreaInput autocomplete="off" bind:value={valueObject[selectedLang]} height={"20"} onInput={() => {
updateValue() updateValue()
onInput() onInput()
}} additionalClass={className} /> }} className={className} />

View File

@@ -1,5 +1,5 @@
<input <input
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'} class:text-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}
@@ -31,7 +31,7 @@
export let fullwidth = false export let fullwidth = false
export let fullh = false export let fullh = false
export let onChange = () => {} export let onChange = () => {}
export let additionalClass = '' export let className = ''
</script> </script>
<style> <style>

View File

@@ -32,15 +32,15 @@
</div> </div>
{#if (value === null || value === undefined)} {#if (value === null || value === undefined)}
<TextInput value={"Using default"} additionalClass="flex-1" disabled/> <TextInput value={"Using default"} className="flex-1" disabled/>
{:else if typeof(value) === 'string'} {:else if typeof(value) === 'string'}
<TextInput bind:value={value} additionalClass="flex-1"/> <TextInput bind:value={value} className="flex-1"/>
{:else if typeof(value) === 'number'} {:else if typeof(value) === 'number'}
<NumberInput bind:value={value} additionalClass="flex-1"/> <NumberInput bind:value={value} className="flex-1"/>
{:else if typeof(value) === 'boolean'} {:else if typeof(value) === 'boolean'}
<button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={!value} on:click={valToggle}>True</button> <button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={!value} on:click={valToggle}>True</button>
<button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={value} on:click={valToggle}>False</button> <button class="px-2 py-2 border border-darkborderc flex-1" class:text-textcolor2={value} on:click={valToggle}>False</button>
{:else} {:else}
<TextInput value={"Using default"} additionalClass="flex-1" disabled/> <TextInput value={"Using default"} className="flex-1" disabled/>
{/if} {/if}
</div> </div>

View File

@@ -1,6 +1,6 @@
{#if optimaizedInput} {#if optimaizedInput}
<textarea <textarea
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'} class:text-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}
@@ -37,7 +37,7 @@
/> />
{:else} {:else}
<textarea <textarea
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'} class:text-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}
@@ -74,7 +74,7 @@
export let onInput = () => {} export let onInput = () => {}
export let fullwidth = false export let fullwidth = false
export let height:'20'|'24'|'32'|'full' = '20' export let height:'20'|'24'|'32'|'full' = '20'
export let additionalClass = '' export let className = ''
export let optimaizedInput = true export let optimaizedInput = true
let inpa = 0 let inpa = 0

View File

@@ -1,5 +1,5 @@
<input <input
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'} class:text-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}
@@ -39,6 +39,6 @@
export let onInput = () => {} export let onInput = () => {}
export let fullwidth = false export let fullwidth = false
export let fullh = false export let fullh = false
export let additionalClass = '' export let className = ''
export let disabled = false export let disabled = false
</script> </script>

View File

@@ -37,9 +37,9 @@
<div class="w-full flex justify-center mt-4"> <div class="w-full flex justify-center mt-4">
<div class="flex w-2xl max-w-full items-center"> <div class="flex w-2xl max-w-full items-center">
{#if $SizeStore.w < 768} {#if $SizeStore.w < 768}
<TextInput additionalClass="flex-grow min-w-0" placeholder="Search" bind:value={search} /> <TextInput className="flex-grow min-w-0" placeholder="Search" bind:value={search} />
{:else} {:else}
<TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} /> <TextInput size="xl" className="flex-grow" placeholder="Search" bind:value={search} />
{/if} {/if}
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => { <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {