diegoenriquezserrano.dev
this repo has no description
1<script lang="ts">
2 let {
3 value = $bindable(''),
4 limit,
5 id,
6 name,
7 placeholder,
8 type,
9 required = false,
10 }: {
11 value: string;
12 limit: number;
13 id: string;
14 name: string;
15 placeholder: string;
16 type: string;
17 required?: boolean;
18 } = $props();
19
20 let counter = $derived(limit);
21
22 $effect(() => {
23 counter = limit - value.length;
24 });
25</script>
26
27<input
28 class="border-color-gray border-rounded-8 border-style-inset border-width-2 full-width letter-spacing-1 squeeze-16 squish-16 sunken-1 surface-char text-color-white"
29 {id}
30 {name}
31 {placeholder}
32 {required}
33 {type}
34 bind:value
35/>
36<div class="full-width stack-8 text-align-end" class:text-color-scarlet={counter < 0}>
37 {counter}
38</div>