cobalt / web /src /components /settings /SettingsInput.svelte
playingapi's picture
Upload 376 files
43a06dc verified
<script
lang="ts"
generics="
Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
Id extends keyof CobaltSettings[Context]
"
>
import { get } from "svelte/store";
import { t } from "$lib/i18n/translations";
import type { CobaltSettings } from "$lib/types/settings";
import settings, { updateSetting } from "$lib/state/settings";
import { customInstanceWarning } from "$lib/api/safety-warning";
import IconX from "@tabler/icons-svelte/IconX.svelte";
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
export let settingId: Id;
export let settingContext: Context;
export let placeholder: string;
export let altText: string;
export let type: "url" | "uuid" = "url";
export let showInstanceWarning = false;
const regex = {
url: "https?:\\/\\/[a-z0-9.\\-]+(:\\d+)?/?",
uuid: "^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$",
};
let input: HTMLInputElement;
let inputValue: string = String(get(settings)[settingContext][settingId]);
let inputFocused = false;
let validInput = false;
const writeToSettings = (value: string, type: "url" | "uuid" | "text") => {
updateSetting({
[settingContext]: {
[settingId]:
type === "url" ? new URL(value).origin.toString() : value,
},
});
inputValue = String(get(settings)[settingContext][settingId]);
};
const save = async () => {
if (showInstanceWarning) {
await customInstanceWarning();
if ($settings.processing.seenCustomWarning && inputValue) {
return writeToSettings(inputValue, type);
}
return;
}
return writeToSettings(inputValue, type);
};
</script>
<div id="settings-input-holder">
<div id="input-container" class:focused={inputFocused} aria-hidden="false">
<input
id="input-box"
bind:this={input}
bind:value={inputValue}
on:input={() => (validInput = input.checkValidity())}
on:input={() => (inputFocused = true)}
on:focus={() => (inputFocused = true)}
on:blur={() => (inputFocused = false)}
spellcheck="false"
autocomplete="off"
autocapitalize="off"
maxlength="64"
pattern={regex[type]}
aria-label={altText}
aria-hidden="false"
/>
{#if inputValue.length === 0}
<span class="input-placeholder" aria-hidden="true">
{placeholder}
</span>
{/if}
</div>
<div id="settings-input-buttons">
<button
class="settings-input-button"
aria-label={$t("button.save")}
disabled={inputValue == $settings[settingContext][settingId] || !validInput}
on:click={save}
>
<IconCheck />
</button>
<button
class="settings-input-button"
aria-label={$t("button.reset")}
disabled={String($settings[settingContext][settingId]).length <= 0}
on:click={() => writeToSettings("", "text")}
>
<IconX />
</button>
</div>
</div>
<style>
#settings-input-holder {
display: flex;
gap: 6px;
}
#input-container {
padding: 0 18px;
border-radius: var(--border-radius);
color: var(--secondary);
background-color: var(--button);
box-shadow: var(--button-box-shadow);
display: flex;
align-items: center;
width: 100%;
position: relative;
overflow: hidden;
}
#input-container,
#input-box {
font-size: 13.5px;
font-weight: 500;
min-width: 0;
}
#input-box {
flex: 1;
background-color: transparent;
color: var(--secondary);
border: none;
padding-block: 0;
padding-inline: 0;
padding: 12px 0;
}
#input-box::placeholder {
color: var(--gray);
/* fix for firefox */
opacity: 1;
}
.input-placeholder {
position: absolute;
color: var(--gray);
pointer-events: none;
white-space: nowrap;
}
#input-box:focus-visible {
box-shadow: unset !important;
}
#input-container.focused {
box-shadow: 0 0 0 2px var(--secondary) inset;
}
#settings-input-buttons {
display: flex;
flex-direction: row;
gap: 6px;
}
.settings-input-button {
height: 42px;
width: 42px;
padding: 0;
}
.settings-input-button :global(svg) {
height: 21px;
width: 21px;
stroke-width: 1.5px;
}
.settings-input-button[disabled] {
opacity: 0.5;
pointer-events: none;
}
</style>