@likable-hair/svelte 0.0.76 → 0.0.77

package/forms/Textfield.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
+<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined, autocomplete = true;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -110,7 +110,7 @@ $: if (!!labelElement) {
 </style>
 
 
-<div 
+<div
   style:width={width}
   style:min-width={minWidth}
   style:max-width={maxWidth}
@@ -121,12 +121,12 @@ $: if (!!labelElement) {
   style:--textfield-focus-border-color={focusBorderColor}
   style:--textfield-legend-width={legendWidth + 'px'}
   style:--textfield-focused-box-shadow={focusedBoxShadow}
-  class="input-container" 
+  class="input-container"
   class:focused={focused}
   class:not-focused={!focused}
   class:texted={focused || !!value}
 >
-  <fieldset 
+  <fieldset
     aria-hidden="true"
     style:border-radius={borderRadius}
     style:background-color={backgroundColor}
@@ -141,12 +141,12 @@ $: if (!!labelElement) {
   >
     {#if variant == 'outlined'}
         <legend class="legend-outlined"></legend>
-        <label 
+        <label
           for={inputId}
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div 
+        <div
           style:display="flex"
           style:position="relative"
           style:bottom="8px"
@@ -157,11 +157,12 @@ $: if (!!labelElement) {
             <slot name="prepend-inner"></slot>
           </div>
           {#if type == 'password'}
-            <input 
+            <input
+              autocomplete={autocomplete ? 'on' : 'new-password'}
               style:background-color={backgroundColor}
               style:color={textColor}
               style:font-size={fontSize}
-              id={inputId} 
+              id={inputId}
               class="input-outlined"
               type="password"
               placeholder={placeholder}
@@ -180,11 +181,12 @@ $: if (!!labelElement) {
               bind:this={inputElement}
             />
           {:else if type == 'text'}
-            <input 
+            <input
+              autocomplete={autocomplete ? 'on' : 'off'}
               style:background-color={backgroundColor}
               style:color={textColor}
               style:font-size={fontSize}
-              id={inputId} 
+              id={inputId}
               class="input-outlined"
               type="text"
               placeholder={placeholder}
@@ -231,7 +233,7 @@ $: if (!!labelElement) {
           </div>
         </div>
     {:else if variant == 'boxed'}
-      <div 
+      <div
         style:display="flex"
       >
         <div>
@@ -239,6 +241,7 @@ $: if (!!labelElement) {
         </div>
         {#if type == 'password'}
           <input
+            autocomplete={autocomplete ? 'on' : 'new-password'}
             style:background-color={backgroundColor}
             style:color={textColor}
             style:font-size={fontSize}
@@ -258,10 +261,10 @@ $: if (!!labelElement) {
             on:keydown
             on:keypress
             on:keyup
-            bind:this={inputElement}
           />
         {:else if type == 'text'}
           <input
+            autocomplete={autocomplete ? 'on' : 'off'}
             style:background-color={backgroundColor}
             style:color={textColor}
             style:font-size={fontSize}

package/forms/Textfield.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
         type?: 'text' | 'password' | 'number';
         readonly?: boolean;
         inputElement?: HTMLElement;
+        autocomplete?: boolean;
     };
     events: {
         change: Event;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",