feat: added classes to modify input box size
mellbacon committed
Jul 12, 2023 at 18:53 UTC
8879170931429f6c7bd5af75ae59acbd605ef120
1 file changed
+22
-1
src/lib/utility/Input.svelte
+22
-1
@@ -1,10 +1,23 @@
1
<script lang="ts">
2
+ import { createEventDispatcher } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+
5
export let readonly = false;
6
export let label = null;
7
export let placeholder = "";
8
9
export let value = "";
10
export let _class = "";
11
+ export let extra_small = false;
12
+ export let medium = false;
13
+
14
+ let _ = null;
15
+ async function handleInput(e) {
16
+ clearTimeout(_);
17
+ _ = setTimeout(() => {
18
+ dispatch("d_input", {value: value})
19
+ }, 500);
20
+ }
21
</script>
22
23
<div class="input-container {_class}">
@@ -12,7 +25,7 @@
25
<label for="textInput">{label}:</label>
26
{/if}
27
15
- <input class="mousetrap" class:readonly bind:value type="text" name="textInput" id="textInput" readonly={readonly} placeholder={placeholder}>
28
+ <input on:input={handleInput} class="mousetrap" class:medium class:extra_small class:readonly bind:value type="text" name="textInput" id="textInput" readonly={readonly} placeholder={placeholder}>
29
</div>
30
31
<style lang="scss">
@@ -25,6 +38,14 @@
38
font-size: 0.9rem;
39
}
40
input {
41
+ &.extra_small {
42
+ width: 12% !important;
43
+ padding: 0.4rem !important;
44
+ }
45
+ &.medium {
46
+ width: 30% !important;
47
+ padding: 0.4rem !important;
48
+ }
49
border: none;
50
padding: 0.6em 0.4em 0.6em 0.8em;
51
width: 100%;