@kws3/ui 4.5.0-beta.2 → 4.5.1

package/CHANGELOG.mdx

@@ -1,4 +1,11 @@
-### 4.5.0 <span className="has-text-danger">[BREAKING]</span>
+## 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
   - All SCSS files are now modular, so you need to use `@use` instead of `@import`

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,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.0-beta.2",
+  "version": "4.5.1",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -39,5 +39,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "c5a77050657a2bc3237013f0d64f97bd6ce1d015"
+  "gitHead": "aa49d3c649effc859ad383983f4498f8724cac42"
 }

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