@kws3/ui 2.1.2 → 2.1.4

package/CHANGELOG.mdx

@@ -1,3 +1,10 @@
+# 2.1.4
+  - Fix bug where disabled Checkbox components wrongly appeared as if they were checked
+
+# 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

package/controls/NumberInput.svelte

@@ -14,6 +14,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {boolean} [disabled=false] - Disables the NumberInput, Default: `false`
   @param {boolean} [fullwidth=false] - Forces the NumberInput to occupy the full width of it's container, Default: `false`
   @param {boolean} [typeable=true] - Allows typing the value into the input, Default: `true`
+  @param {string} [input_class=""] - Adds a css class to the input field, Default: `""`
   @param {string} [minus_icon="minus"] - Name of the icon that is to be displayed in the minus button, Default: `"minus"`
   @param {ColorOptions} [minus_icon_color=danger] - Color of the Minus Icon, Default: `danger`
   @param {ColorOptions} [minus_button_color=] - Color of the Minus Button, Default: ``
@@ -35,8 +36,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   <input
     {style}
     data-testid="input"
-    class="input has-text-centered {klass} is-{size} is-{value < min ||
-    value > max
+    class="input has-text-centered {klass} {input_class} is-{size} is-{value <
+      min || value > max
       ? 'danger'
       : ''}"
     type="number"
@@ -67,8 +68,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     </div>
     <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
       <input
+        style="z-index:1"
         data-testid="input"
-        class="input has-text-centered is-{size} is-{value < min || value > max
+        class="input has-text-centered {input_class} is-{size} is-{value <
+          min || value > max
           ? 'danger'
           : ''}"
         type="number"
@@ -172,6 +175,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Allows typing the value into the input
      */
     typeable = true,
+    /**
+     * Adds a css class to the input field
+     */
+    input_class = "",
     /**
      * Name of the icon that is to be displayed in the minus button
      */

package/forms/PasswordInput.svelte

@@ -26,6 +26,8 @@ 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: `""`
@@ -52,6 +54,8 @@ This property can be bound to, to fetch the current value, Default: ``
       bind:this={PASSWORD_INPUT}
       {style}
       bind:value
+      {autocomplete}
+      {required}
       class="input is-{size} is-{color} {klass} {style}"
       on:focus
       on:blur
@@ -198,6 +202,16 @@ 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}

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.2",
+  "version": "2.1.4",
   "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": "6e176377097da881f3ee68c763f007020b35cb2a"
+  "gitHead": "801fdf5363f25ccb04d1a6506bb2c51e0a8506cc"
 }

package/styles/CheckRadio.scss

@@ -130,10 +130,16 @@ $kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !default;
     }
   }
 
-  input[type="checkbox"]:disabled + .kws-checkbox-label,
-  input[type="radio"]:disabled + .kws-checkbox-label,
   input[type="checkbox"]:disabled ~ .icon,
   input[type="radio"]:disabled ~ .icon {
+    opacity: 0;
+    cursor: not-allowed;
+  }
+
+  input[type="checkbox"]:disabled + .kws-checkbox-label,
+  input[type="radio"]:disabled + .kws-checkbox-label,
+  input[type="checkbox"]:checked:disabled ~ .icon,
+  input[type="radio"]:checked:disabled ~ .icon {
     opacity: 0.5;
     cursor: not-allowed;
   }