@kws3/ui 4.5.1 → 4.5.2-alpha.0

package/CHANGELOG.mdx

@@ -1,3 +1,11 @@
+## Unreleased
+  - Fix hardcoded color in `Radio` component
+  - Remove legacy additional `is-active` class from active buttons in `ToggleButtons` component
+  - Fix value type in `SearchableSelect`
+  - Make `AutoComplete`, `SearchableSelect` and `MultiSelect` components work in SSR mode
+  - Fix default colors and output radius for `RangeSlider`
+  - Fix default thumb and output radius for `RangeSlider`
+
 ## 4.5.1
   - Fix ActionReturn type for `popover` action
   - Update popover arrow default colour to be border color

package/controls/ToggleButtons.svelte

@@ -39,8 +39,9 @@ This property can be bound to, to fetch the current value, Default: `null`
         }}
         class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ===
         option.value
-          ? 'is-active ' +
-            (option.active_class ? option.active_class : active_class)
+          ? option.active_class
+            ? option.active_class
+            : active_class
           : option.inactive_class
             ? option.inactive_class
             : inactive_class}">

package/forms/AutoComplete.svelte

@@ -67,7 +67,7 @@ Default value: `<span>{option.label}</span>`
       style="border: none;"
       class="button delete paddingless is-small is-loading" />
   {/if}
-  {#if rootContainer}
+  {#if typeof window !== "undefined"}
     <div
       class="kws-autocomplete is-{color || 'primary'}"
       use:portal={dropdown_portal}>
@@ -237,18 +237,11 @@ Default value: `<span>{option.label}</span>`
   let klass = "";
   export { klass as class };
 
+  let rootContainer;
+
   if (!search && (!options || !options.length))
     console.error(`Missing options`);
 
-  //ensure we have a root container for all our hoisitng related stuff
-
-  let rootContainer = document.getElementById(rootContainerId);
-  if (!rootContainer) {
-    rootContainer = document.createElement("div");
-    rootContainer.id = rootContainerId;
-    document.body.appendChild(rootContainer);
-  }
-
   const fire = createEventDispatcher();
 
   let el, //whole wrapping element
@@ -337,6 +330,16 @@ Default value: `<span>{option.label}</span>`
   const debouncedTriggerSearch = debounce(triggerExternalSearch, 150, false);
 
   onMount(() => {
+    //ensure we have a root container for all our hoisitng related stuff
+    if (typeof window !== "undefined") {
+      rootContainer = document.getElementById(rootContainerId);
+      if (!rootContainer) {
+        rootContainer = document.createElement("div");
+        rootContainer.id = rootContainerId;
+        document.body.appendChild(rootContainer);
+      }
+    }
+
     POPPER = createPopper(el, dropdown, {
       strategy: popper_strategy,
       placement: "bottom-start",

package/forms/colorpicker/Colorpicker.svelte

@@ -96,7 +96,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     _colorpicker;
 
   /**
-   * @type {import("svelte/action").Action}
+   * @type {import("svelte/action").Action<HTMLElement, string>}
    */
   function colorpicker(node) {
     _colorpicker = new ColorPicker(node);

package/forms/select/MultiSelect.svelte

@@ -120,7 +120,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       on:click|stopPropagation={removeAll}
       style={shouldShowClearAll ? "" : "display: none;"} />
   {/if}
-  {#if rootContainer}
+  {#if typeof window !== "undefined"}
     <div
       class="kws-searchableselect is-{color || 'primary'}"
       use:portal={dropdown_portal}>
@@ -335,6 +335,8 @@ Default value: `<span>{option[search_key] || option}</span>`
   let klass = "";
   export { klass as class };
 
+  let rootContainer;
+
   if (!search && (!options || !options.length))
     console.error(`Missing options`);
 
@@ -342,15 +344,6 @@ Default value: `<span>{option[search_key] || option}</span>`
     throw new TypeError(`max must be null or positive integer, got ${max}`);
   }
 
-  //ensure we have a root container for all our hoisitng related stuff
-
-  let rootContainer = document.getElementById(rootContainerId);
-  if (!rootContainer) {
-    rootContainer = document.createElement("div");
-    rootContainer.id = rootContainerId;
-    document.body.appendChild(rootContainer);
-  }
-
   const fire = createEventDispatcher();
 
   let el, //whole wrapping element
@@ -532,6 +525,16 @@ Default value: `<span>{option[search_key] || option}</span>`
   const debouncedTriggerSearch = debounce(triggerSearch, 150, false);
 
   onMount(() => {
+    //ensure we have a root container for all our hoisitng related stuff
+    if (typeof window !== "undefined") {
+      rootContainer = document.getElementById(rootContainerId);
+      if (!rootContainer) {
+        rootContainer = document.createElement("div");
+        rootContainer.id = rootContainerId;
+        document.body.appendChild(rootContainer);
+      }
+    }
+
     POPPER = createPopper(el, dropdown, {
       strategy: popper_strategy,
       placement: "bottom-start",

package/forms/select/SearchableSelect.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {object} [value=null] - Value of the Input
+  @param {any} [value=null] - Value of the Input
 
 This property can be bound to, to fetch the current value, Default: `null`
   @param {string} [placeholder="Please select..."] - Placeholder text for the input, Default: `"Please select..."`
@@ -96,7 +96,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Value of the Input
    *
    * This property can be bound to, to fetch the current value
-   * @type {object}
+   * @type {any}
    */
   export let value = null;
   /**

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.1",
+  "version": "4.5.2-alpha.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
-  "svelte": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -24,13 +23,24 @@
   "publishConfig": {
     "access": "public"
   },
+  "svelte": "index.js",
   "types": "./index.d.ts",
+  "exports": {
+    "./utils": {
+      "types": "./utils/index.d.ts",
+      "default": "./utils/index.js"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    }
+  },
   "peerDependencies": {
     "bulma": "^1.0.0",
     "svelte": "^4.2.10"
   },
   "dependencies": {
-    "@kws3/text-mask-core": "^5.1.3",
+    "@kws3/text-mask-core": "^5.1.4",
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
     "svelte-portal": "^2.2.1",
@@ -39,5 +49,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "aa49d3c649effc859ad383983f4498f8724cac42"
+  "gitHead": "b6b31eef1ad27066780cef8cfa230bb958cec969"
 }

package/styles/CheckRadio.scss

@@ -90,7 +90,7 @@ $focus-box-shadow-color: hsla(
   input[type="radio"]:checked + .kws-checkbox-label {
     &:after {
       transform: none;
-      border: 0.25em solid #fff;
+      border: 0.25em solid $check-color-invert;
       background: $check-color;
       width: 1em;
       height: 1em;

package/styles/Colorpicker.scss

@@ -34,7 +34,7 @@ $dragover-hilight-color: cv.getVar("success-soft") !default;
 }
 
 .color-picker {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;

package/styles/RangeSlider.scss

@@ -8,14 +8,14 @@ $track-radius: cv.getVar("radius") !default;
 $track-border: 0px solid cv.getVar("border") !default;
 $track-shadow: cv.getVar("input-shadow") !default;
 $thumb-background: cv.getVar("text-invert") !default;
-$thumb-radius: cv.getVar("radius-small") !default;
+$thumb-radius: cv.getVar("radius") !default;
 $thumb-border: 1px solid cv.getVar("border") !default;
 $thumb-shadow: none !default;
 $thumb-to-track-ratio: 2 !default;
 $output-width: 3rem !default;
-$output-background: cv.getVar("scheme-invert-ter") !default;
-$output-color: cv.getVar("text-invert") !default;
-$output-radius: cv.getVar("radius-small") !default;
+$output-background: cv.getVar("border-weak") !default;
+$output-color: cv.getVar("text") !default;
+$output-radius: cv.getVar("radius") !default;
 
 @use "sass:math";