69 lines
1.2 KiB
Svelte
69 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
let input: HTMLInputElement;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let placeholder = "";
|
|
export let value = "";
|
|
export let disabled = false;
|
|
export let size: number | undefined = 7;
|
|
|
|
let focused = false;
|
|
$: dispatch("focusChange", focused);
|
|
|
|
function onInput() {
|
|
dispatch("input", value);
|
|
}
|
|
|
|
export function focus() {
|
|
input.focus();
|
|
}
|
|
</script>
|
|
|
|
<div class="input" class:focused>
|
|
<slot name="prefix" />
|
|
<input
|
|
bind:this={input}
|
|
{placeholder}
|
|
bind:value
|
|
on:input={onInput}
|
|
on:focus={() => (focused = true)}
|
|
on:blur={() => (focused = false)}
|
|
size={Math.max(value.length, size)}
|
|
on:keydown
|
|
{disabled}
|
|
/>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
padding: 0.25em;
|
|
|
|
border: 1px solid var(--foreground-lighter);
|
|
border-radius: 4px;
|
|
background: var(--background);
|
|
|
|
transition: box-shadow 0.25s;
|
|
&.focused {
|
|
box-shadow: 0 0 2px 3px var(--primary);
|
|
}
|
|
}
|
|
|
|
input {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
|
|
color: var(--foreground);
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
</style>
|