@kws3/ui 2.1.1 → 2.1.3

package/CHANGELOG.mdx

@@ -1,5 +1,13 @@
+# 2.1.3
+ - `PasswordInput` - add support for field `autocomplete` and `required`
+ - `PasswordValidator` - fix `valid` field binding
+
+# 2.1.2
+ - `PasswordInput` - add support for field `name`
+ - `PasswordInput` - fix spacing when icons are turned off
+
 # 2.1.1
- - Package `text-mask-core` moved to @kws3 namespace and removed from dependencies.
+ - Package `text-mask-core` moved to @kws3 namespace.
 
 # 2.1.0
  - Bugfix with Colorpicker component, where colors could not be typed in manually.

package/forms/PasswordInput.svelte

@@ -26,7 +26,10 @@ This property can be bound to, to fetch the current value, Default: ``
   @param {ColorOptions} [color=] - Colour of the PasswordInput, Default: ``
   @param {string} [style=""] - Inline CSS for the PasswordInput, Default: `""`
   @param {boolean} [disabled=false] - Disables the PasswordInput, Default: `false`
+  @param {boolean} [required=false] - Whether Input is required or not, Default: `false`
+  @param {string} [autocomplete="on"] - Whether autocompletion turned off or on, Default: `"on"`
   @param {string} [placeholder=""] - Input placeholder, Default: `""`
+  @param {string} [name="password"] - Input HTML name, Default: `"password"`
   @param {string} [class=""] - CSS classes of the PasswordInput, Default: `""`
 
   ### Events
@@ -41,12 +44,18 @@ This property can be bound to, to fetch the current value, Default: ``
 -->
 
 <div class="field is-marginless">
-  <p class="control has-icons-left has-icons-right is-marginless">
+  <p
+    class="control is-marginless"
+    class:has-icons-left={show_field_icon}
+    class:has-icons-right={show_visibility_switch}>
     <input
+      {name}
       type="password"
       bind:this={PASSWORD_INPUT}
       {style}
       bind:value
+      {autocomplete}
+      {required}
       class="input is-{size} is-{color} {klass} {style}"
       on:focus
       on:blur
@@ -193,11 +202,26 @@ This property can be bound to, to fetch the current value, Default: ``
    * @type {boolean}
    */
   export let disabled = false;
+  /**
+   * Whether Input is required or not
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether autocompletion turned off or on
+   * @type {string}
+   */
+  export let autocomplete = "on";
   /**
    * Input placeholder
    * @type {string}
    */
   export let placeholder = "";
+  /**
+   * Input HTML name
+   * @type {string}
+   */
+  export let name = "password";
 
   /**
    * CSS classes of the PasswordInput

package/forms/PasswordValidator/PasswordValidator.svelte

@@ -210,11 +210,7 @@ Should be used with `bind` from parent component, Default: `false`
 
   $: result = validate(password, sanitizedOptions);
 
-  $: {
-    if (result.overall) {
-      valid = true;
-    }
-  }
+  $: valid = result && result.overall;
 
   function getSanitizedCustomRules(cr) {
     return cr.map((el) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.0.4"
   },
-  "gitHead": "e13405d2772906f133ca6e37f73f6222a636005f"
+  "gitHead": "021ed6b77f9600a544b6fe567104887a0a3f0358"
 }