@kws3/ui 1.7.2 → 1.8.0

package/CHANGELOG.mdx

@@ -1,3 +1,19 @@
+## 1.8.0
+ - `Modal`, `CardModal` and `ActionSheet` components now play an outro transition instead of abruptly disappearing.
+ - Usability fixes for `SearchableSelect` and `MultiSelect`.
+ - `SearchableSelect` and `MultiSelect` now support loading options via an async function.
+ - `SearchableSelect` and `MultiSelect` now match results using a fuzzy `search_strategy`. This can be changed to old behaviour by specifying `search_strategy="strict"`.
+
+## 1.7.4
+ - Update ApexCharts to version 3.33.2
+ - Added support for subscribing to chart events
+ - Added support for distributed bar charts using new `distributed` prop on `BarChart` component
+ - Added examples for leveraging advanced chart features
+ 
+## 1.7.3
+ - Fix docs for `Popover`
+ - Increase performance for `SlidingPane` by using ResizeObserver when available
+
 ## 1.7.2
  - `DatePicker` component: fix initialisation bug on mobile
  - `Pagination` component: rename property `breakThreshold` -> `maxVisiblePages` plus bugfix and documentation update

package/buttons/ConfirmButton.svelte

@@ -28,7 +28,6 @@
   <p class="control">
     {#if _confirm}
       <button
-        role="button"
         class="button is-success is-light is-shadowless is-{size} {button_class}"
         type="button"
         on:click|preventDefault|stopPropagation={cancel}>
@@ -38,7 +37,6 @@
   </p>
   <p class="control is-expanded">
     <button
-      role="button"
       class="button is-{size} {_doing
         ? main_color + ' is-loading'
         : _error

package/charts/AreaChart.svelte

@@ -15,16 +15,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="area"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -71,7 +115,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -79,6 +128,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-area-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/BarChart.svelte

@@ -10,6 +10,7 @@
 These are charts with minimal UI and can be
 squeezed into small spaces, Default: `false`
   @param {boolean} [horizontal=false] - Whether the chart displays horizontal bars, Default: `false`
+  @param {boolean} [distributed=false] - Make bars discrete. Each value indicates one bar per series., Default: `false`
   @param {boolean} [stacked=false] - Whether the bars are stacked on top of each other, Default: `false`
   @param {boolean} [stacked_full_width=false] - When bars are stacked, should they span the full width/height of the chart, Default: `false`
   @param {object} [y_axis_options={}] - Y Axis options, see ApexCharts options for Y Axis, Default: `{}`
@@ -18,16 +19,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="bar"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -60,6 +105,10 @@ Send an array of colors to override the default colors, or do not send anything
      * Whether the chart displays horizontal bars
      */
     horizontal = false,
+    /**
+     * Make bars discrete. Each value indicates one bar per series.
+     */
+    distributed = false,
     /**
      * Whether the bars are stacked on top of each other
      */
@@ -86,7 +135,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -94,6 +148,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-bar-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 
@@ -113,6 +175,7 @@ Send an array of colors to override the default colors, or do not send anything
       yAxis,
       sparklines,
       horizontal,
+      distributed,
       stacked,
       stacked_full_width
     ),
@@ -120,7 +183,7 @@ Send an array of colors to override the default colors, or do not send anything
   );
 
   const normaliseAll = () => {
-    if (data.length !== sets.length) {
+    if (data.length !== sets.length && !distributed) {
       console.warn("Data and sets lengths do not match");
     }
     normaliseSets();

package/charts/Chart.svelte

@@ -7,7 +7,10 @@
   @param {array} [series=[]] - Series data, Default: `[]`
   @param {string} [width="100%"] - Chart width, Default: `"100%"`
   @param {string} [height="auto"] - Chart height, Default: `"auto"`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
 
 -->
 <div class="kws-chart {klass}" bind:this={canvas} />
@@ -17,6 +20,14 @@
   import ApexCharts from "apexcharts/dist/apexcharts.esm";
   import { merge } from "./utils";
 
+  //some functions such as brush charts
+  //require ApexCharts to be globally available
+  if (window) {
+    if (!window.ApexCharts) {
+      window.ApexCharts = ApexCharts;
+    }
+  }
+
   const fire = createEventDispatcher();
   let canvas, chart;
 
@@ -39,7 +50,12 @@
     /**
      * Chart height
      */
-    height = "auto";
+    height = "auto",
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -47,6 +63,34 @@
   let klass = "";
   export { klass as class };
 
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart;
+  }
+
+  const supported_events = [
+    "animationEnd",
+    "beforeMount",
+    "mounted",
+    "updated",
+    "mouseMove",
+    "mouseLeave",
+    "click",
+    "legendClick",
+    "markerClick",
+    "selection",
+    "dataPointSelection",
+    "dataPointMouseEnter",
+    "dataPointMouseLeave",
+    "beforeZoom",
+    "beforeResetZoom",
+    "zoomed",
+    "scrolled",
+    "brushScrolled",
+  ];
+
   onMount(() => {
     init();
     return () => {
@@ -54,20 +98,23 @@
     };
   });
 
+  let Events;
+
   $: width, height, type, refresh();
   $: series, seriesChanged();
-  $: options, optionsChanged();
+  $: options, Events, optionsChanged();
+  $: captured_events, patchEvents();
 
-  const patchEvents = (evs) => {
+  const patchEvents = () => {
     const events = {};
-    if (typeof evs != "undefined") {
-      for (var type in evs) {
+    supported_events.forEach((type) => {
+      if (captured_events && captured_events.indexOf(type) > -1) {
         events[type] = (a, b, c) => {
           fire(type, [a, b, c]);
         };
       }
-    }
-    return events;
+    });
+    Events = events;
   };
 
   const init = () => {
@@ -78,22 +125,20 @@
         type,
         height,
         width,
+        events: Events,
       },
       type,
       series,
     };
 
-    var events = {};
-
+    //replace any user sent events with patched events
     if (typeof options.chart.events != "undefined") {
-      events = patchEvents(options.chart.events);
       options.chart.events = {};
     }
 
     const config = merge(options, newOptions);
 
     if (canvas) {
-      config.chart.events = events;
       chart = new ApexCharts(canvas, config);
       chart.render();
     }
@@ -111,12 +156,11 @@
   const optionsChanged = () => {
     if (chart) {
       if (typeof options.chart.events != "undefined") {
-        options.chart.events = patchEvents(options.chart.events);
+        options.chart.events = Events;
       }
       chart.updateOptions(options, true);
     } else {
       init();
     }
-    chart ? chart.updateOptions(options, true) : init();
   };
 </script>

package/charts/DonutChart.svelte

@@ -13,16 +13,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="donut"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -61,13 +105,27 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
+
   /**
    * CSS classes for container
    */
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-donut-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/LineChart.svelte

@@ -15,16 +15,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="line"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -71,7 +115,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -79,6 +128,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-line-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;
 

package/charts/MixedChart.svelte

@@ -16,16 +16,60 @@ squeezed into small spaces, Default: `false`
   @param {array} [colors=null] - Chart colors, can be modified globally in framework settings
 
 Send an array of colors to override the default colors, or do not send anything to use the default colors, Default: `null`
+  @param {array} [captured_events=[]] - String array of event names that will be captured and fired as svelte events.
+This is to prevent unnecessary event subscriptions., Default: `[]`
   @param {string} [class=""] - CSS classes for container, Default: `""`
+  @method `getInstance()` - Returns the ApexCharts instance
+
+  ### Events
+  - `animationEnd` - All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events.
+  - `beforeMount`
+  - `mounted`
+  - `updated`
+  - `mouseMove`
+  - `mouseLeave`
+  - `click`
+  - `legendClick`
+  - `markerClick`
+  - `selection`
+  - `dataPointSelection`
+  - `dataPointMouseEnter`
+  - `dataPointMouseLeave`
+  - `beforeZoom`
+  - `beforeResetZoom`
+  - `zoomed`
+  - `scrolled`
+  - `brushScrolled`
 
 -->
+<!-- All chart events only fire when they are mentioned in `captured_events` list. See ApexChart Events https://apexcharts.com/docs/options/chart/events/ for full list of supported events. -->
 <Chart
+  bind:this={chart}
+  on:animationEnd
+  on:beforeMount
+  on:mounted
+  on:updated
+  on:mouseMove
+  on:mouseLeave
+  on:click
+  on:legendClick
+  on:markerClick
+  on:selection
+  on:dataPointSelection
+  on:dataPointMouseEnter
+  on:dataPointMouseLeave
+  on:beforeZoom
+  on:beforeResetZoom
+  on:zoomed
+  on:scrolled
+  on:brushScrolled
   class={__class}
   options={_options}
   series={_data}
   type="bar"
   {height}
-  {width} />
+  {width}
+  {captured_events} />
 
 <script>
   import { Chart } from "@kws3/ui";
@@ -76,7 +120,12 @@ Send an array of colors to override the default colors, or do not send anything
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null;
+    colors = null,
+    /**
+     * String array of event names that will be captured and fired as svelte events.
+     * This is to prevent unnecessary event subscriptions.
+     */
+    captured_events = [];
 
   /**
    * CSS classes for container
@@ -84,6 +133,14 @@ Send an array of colors to override the default colors, or do not send anything
   let klass = "";
   export { klass as class };
 
+  let chart;
+  /**
+   * Returns the ApexCharts instance
+   */
+  export function getInstance() {
+    return chart.getInstance();
+  }
+
   $: __class =
     "kws-mixed-chart " + `${sparklines ? "kws-sparklines" : ""} ` + klass;