53 lines
1.2 KiB
Svelte
53 lines
1.2 KiB
Svelte
<script>
|
|
import Icon from './Icon.svelte';
|
|
|
|
export let value = '';
|
|
export let placeholder = '';
|
|
export let autofocus = false;
|
|
export let show = false;
|
|
let classes = '';
|
|
export {classes as class};
|
|
|
|
let input;
|
|
|
|
export function focus() {
|
|
input.focus();
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
button {
|
|
border: 1px solid oklch(var(--bc) / 0.2);
|
|
border-left: none;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="join w-full has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
|
|
<input
|
|
bind:this={input}
|
|
type={show ? 'text' : 'password'}
|
|
{value} {placeholder} {autofocus}
|
|
on:input={e => value = e.target.value}
|
|
on:input on:change on:focus on:blur
|
|
class="input input-bordered flex-grow join-item placeholder:text-gray-500 focus:outline-none {classes}"
|
|
/>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost join-item swap swap-rotate"
|
|
class:swap-active={show}
|
|
on:click={() => show = !show}
|
|
>
|
|
<Icon
|
|
name="eye"
|
|
class="w-5 h-5 swap-off"
|
|
/>
|
|
<Icon
|
|
name="eye-slash"
|
|
class="w-5 h-5 swap-on"
|
|
/>
|
|
</button>
|
|
</div>
|