Auth UI

2021-07-26 02:31:00 +03:00
parent e103bdebc4
commit 950653d669
6 changed files with 178 additions and 45 deletions
@@ -1,18 +1,35 @@
 <script>
+  import { afterUpdate } from 'svelte';
  export let label;
  export let placeholder;
  export let value;
  export let onKeyDown;
-  export let className = "";
+  export let className = '';
+  export let inputClassName = '';
+  export let type = 'text';
+  export let autoFocus = false;
+
+  let ref = null;
+
+  function typeAction(node) {
+    node.type = type;
+  }
+
+  afterUpdate(() => {
+    if (autoFocus) {
+      ref.focus();
+    }
+  });
 </script>

 <label class="block {className}">
-  {#if label}<h4 class="m-0">{label}</h4>{/if}
+  {#if label}<label class="m-0">{label}</label>{/if}
  <input
-    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
-    type="text"
+    use:typeAction
+    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
    on:keydown={onKeyDown}
    {placeholder}
    bind:value
+    bind:this={ref}
  />
 </label>