[ref] input to components

src/lib/UI/GUI/NumberInput.svelte

@@ -0,0 +1,31 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+    on:change={onChange}
+    type="number"
+    min={min}
+    max={max}
+    id={id}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let fullwidth = false
+    export let fullh = false
+    export let onChange = () => {}
+
+</script>

src/lib/UI/GUI/SliderInput.svelte

@@ -0,0 +1,27 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    type="range"
+    min={min}
+    max={max}
+    id={id}
+    step={step}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let step = 1
+
+</script>

src/lib/UI/GUI/TextInput.svelte

@@ -0,0 +1,33 @@
+<input
+    class={"text-neutral-200 bg-transparent input-text focus:bg-selected" + ((additionalClass) ? (' ' + additionalClass) : '')}
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:text-xl={size === 'xl'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+
+    {autocomplete}
+    {placeholder}
+    id={id}
+    type="text"
+    bind:value
+    on:input={onInput}
+>
+
+
+<script lang="ts">
+    export let size: 'sm'|'md'|'lg'|'xl' = 'md'
+    export let autocomplete: 'on'|'off' = 'off'
+    export let placeholder: string = ''
+    export let value:string
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let onInput = () => {}
+    export let fullwidth = false
+    export let fullh = false
+    export let additionalClass = ''
+</script>