@kws3/ui 4.5.0 → 4.5.2-alpha.0

package/CHANGELOG.mdx

@@ -1,3 +1,18 @@
+## 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
+  - Fix dark mode default text colour in `Timepicker` component
+  - Fix default border colours for active and checked rows in `Grid` component
+  - Allow border colours to be configured for checked and active rows in `Grid` component
+
 # 4.5.0 <span className="has-text-danger">[BREAKING]</span>
   - This version requires Bulma v1
   - Supports bulma dark mode

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/helpers/Popover.svelte

@@ -15,7 +15,7 @@ If you would like to trigger the popover programatically only, you can use `manu
 Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>, Default: `auto`
   @param {boolean} [interactive=false] - Allows you to interact with the Popover content, when turned on, Default: `false`
   @param {boolean} [hide_on_click=true] - Whether the popover should hide on clicking outside of it, Default: `true`
-  @param {object} [external_target=null] - Specify a target node reference to use as the Popover content
+  @param {HTMLElement | null} [external_target=null] - Specify a target node reference to use as the Popover content
 
 When set to `null`, it will use the content of the `popover` slot, Default: `null`
   @param {string} [max_width="none"] - Maximum allowed width of the popover
@@ -126,6 +126,7 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Specify a target node reference to use as the Popover content
    *
    * When set to `null`, it will use the content of the `popover` slot
+   * @type {HTMLElement | null}
    */
   export let external_target = null;
   /**

package/helpers/Tooltip.d.ts

@@ -1,5 +1,9 @@
 /**
  * @typedef {import('@kws3/ui/types').TippyPositions} TippyPositions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * content?: HTMLElement
+ * }>} TippyAction
  */
 /**
  * Activates tooltips via event delegation
@@ -8,12 +12,15 @@
  */
 export function activateTooltips(container: string, opts?: object | null): void;
 /**
- * @type {import("svelte/action").Action}
+ * @type {TippyAction}
  */
-export let popover: import("svelte/action").Action;
+export let popover: TippyAction;
 /**
- * @type {import("svelte/action").Action}
+ * @type {TippyAction}
  */
-export let tooltip: import("svelte/action").Action;
+export let tooltip: TippyAction;
 export type TippyPositions = import('@kws3/ui/types').TippyPositions;
+export type TippyAction = import("svelte/action").Action<HTMLElement, {
+    content?: HTMLElement;
+}>;
 //# sourceMappingURL=Tooltip.d.ts.map

package/helpers/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["Tooltip.js"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;;;GAIG;AACH,4CAHW,MAAM,SACN,MAAM,eAmBhB;AA8DD;;GAEG;AACH,oBAFU,OAAO,eAAe,EAAE,MAAM,CAkBrC;AAEH;;GAEG;AACH,oBAFU,OAAO,eAAe,EAAE,MAAM,CAWrC;6BAxHU,OAAO,gBAAgB,EAAE,cAAc"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["Tooltip.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;GAIG;AACH,4CAHW,MAAM,SACN,MAAM,eAmBhB;AA8DD;;GAEG;AACH,oBAFU,WAAW,CAkBlB;AAEH;;GAEG;AACH,oBAFU,WAAW,CAWlB;6BA5HU,OAAO,gBAAgB,EAAE,cAAc;0BAEvC,OAAO,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE;IACxD,OAAS,CAAC,EAAE,WAAW,CAAA;CACpB,CAAC"}

package/helpers/Tooltip.js

@@ -2,6 +2,10 @@ import tippy, { delegate } from "tippy.js";
 
 /**
  * @typedef {import('@kws3/ui/types').TippyPositions} TippyPositions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * content?: HTMLElement
+ * }>} TippyAction
  */
 
 /**
@@ -22,7 +26,7 @@ export function activateTooltips(container, opts = {}) {
       offset: [0, 15],
       touch: true,
     },
-    opts
+    opts,
   );
 
   delegate(container, _opts);
@@ -89,7 +93,7 @@ function createTippyAction(defaultOpts) {
 }
 
 /**
- * @type {import("svelte/action").Action}
+ * @type {TippyAction}
  */
 export let popover = createTippyAction({
   appendTo: () => document.body,
@@ -110,7 +114,7 @@ export let popover = createTippyAction({
 });
 
 /**
- * @type {import("svelte/action").Action}
+ * @type {TippyAction}
  */
 export let tooltip = createTippyAction({
   animation: "scale",

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.0",
+  "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": "79ec200c7ffc1728fa4bae3bb3ff7b275425e889"
+  "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/Grid.scss

@@ -8,16 +8,16 @@ $tag-margin: 0 0.125rem 0.125rem 0 !default;
 $icon-size: 1.5em !default;
 $checked-row-background: cv.getVar("info-light") !default;
 $checked-row-color: cv.getVar("info") !default;
+$checked-row-border-color: $checked-row-color !default;
 $active-row-background: cv.getVar("table-row-active-background-color") !default;
 $active-row-color: cv.getVar("table-row-active-color") !default;
+$active-row-border-color: $active-row-color !default;
 $background: cv.getVar("table-background-color") !default;
 $striped-row-background: cv.getVar(
   "table-striped-row-even-background-color"
 ) !default;
 $sticky-column-border-color: cv.getVar("border") !default;
-$sticky-column-active-row-border-color: cv.getVar(
-  "table-row-active-color"
-) !default;
+$sticky-column-active-row-border-color: $active-row-border-color !default;
 $hover-background-color: cv.getVar("table-row-hover-background-color") !default;
 $even-row-hover-background-color: cv.getVar(
   "table-striped-row-even-hover-background-color"
@@ -73,6 +73,8 @@ $cell-border-color: cv.getVar("table-cell-border-color") !default;
     td {
       background-color: $checked-row-background !important;
       color: $checked-row-color !important;
+      border-color: $checked-row-border-color !important;
+      box-shadow: inset 0 1px 0 $checked-row-border-color;
     }
   }
 
@@ -125,6 +127,8 @@ $cell-border-color: cv.getVar("table-cell-border-color") !default;
           td {
             background: $active-row-background;
             color: $active-row-color;
+            border-color: $active-row-border-color;
+            box-shadow: inset 0 1px 0 $active-row-border-color;
           }
         }
       }
@@ -164,7 +168,17 @@ $cell-border-color: cv.getVar("table-cell-border-color") !default;
       tr.is-selected {
         td.is-sticky-column,
         th.is-sticky-column {
-          box-shadow: inset -1px 0 0 $sticky-column-active-row-border-color;
+          box-shadow:
+            inset -1px 0 0 $sticky-column-active-row-border-color,
+            inset 0 1px 0 $sticky-column-active-row-border-color;
+        }
+      }
+      tr.is-checked {
+        td.is-sticky-column,
+        th.is-sticky-column {
+          box-shadow:
+            inset -1px 0 0 $checked-row-border-color,
+            inset 0 1px 0 $checked-row-border-color;
         }
       }
     }

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";
 

package/styles/Timepicker.scss

@@ -56,10 +56,11 @@ $radius: cv.getVar("radius") !default;
       border: 1px solid $color;
       input,
       .flatpickr-am-pm {
-        color: $color-dark;
+        color: $text;
         &:hover,
         &:focus {
           background: $color-light;
+          color: $color-dark;
         }
       }
       .numInputWrapper {

package/styles/Tooltip.scss

@@ -10,7 +10,7 @@ $radius: cv.getVar("radius-small") !default;
 $shadow: 0 5px 10px -5px hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
 $popover-background: cv.getVar("background") !default;
 $popover-color: cv.getVar("text") !default;
-$popover-arrow-color: cv.getVar("background") !default;
+$popover-arrow-color: cv.getVar("border") !default;
 $popover-shadow: $shadow !default;
 $popover-radius: $radius !default;