@kws3/ui 1.6.7 → 1.7.1

package/CHANGELOG.mdx

@@ -0,0 +1,99 @@
+## 1.7.1
+ - `Skeleton` component: Illustrate in example the use of empty string for `color` prop.
+ - `Pagination` component: Deprecate `meta` prop. And use separate props for `offset`, `limit`, `count` and `total` instead.
+ - `Pagination` component: Add methods `prev()`, `next()`, `first()`, `last()` and `goto(page)`.
+ - New `Divider` component.
+ - `Modal` component can now be opened and closed programatically via `open()` and `close()` methods.
+ - Added linting rules for ESLint. And corrected all resulting issues.
+
+
+## 1.7.0
+- Ensure uniform usage of $kws-theme-colors across all components, this means $kws-theme-colors can be independent of the global $colors SCSS variable.
+- `DataSearch` component: Expand filters to fill area when main search input is not present.
+- `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
+- New `Skeleton` component.
+
+## 1.6.9
+- New `Timeline`, `TimelineItem` and `TimelineHeader` components.
+
+## 1.6.8
+- Vertically align `is-icon` cells in `Grid`
+
+## 1.6.7
+- Added granular events `showing`, `shown`, `hiding` and `hidden` for `Popover`.
+- Added `is-checked` class on `Grid` when a row is checked using the multiselect checkboxes.
+- New colors for `is-checked` class on `Grid`
+
+## 1.6.6
+- Enhance `Popover` with native `show` `hide` `enable` `disable` methods
+
+## 1.6.5
+- Filter fix on `DataSearch`
+
+## 1.6.4
+- Add support for `dropdown_portal` prop in `SearchableSelect`
+
+## 1.6.3
+- Prevent submit call on `MultiSelect` when `Enter` key is pressed while searching
+- Fix filter items going blank after search is initiated in `DataSearch`
+
+## 1.6.2
+- Add `dropdown_portal` prop on `MultiSelect` to allow rendering dropdown in alternative locations
+
+## 1.6.1
+- New `Portal` component
+- Use `Portal` for `MultiSelect` and `SearchableSelect` components
+
+## 1.6.0
+- Fix `DataSearch` responsiveness for mobile
+- Fix `Pagination` CSS for mobile
+- Fix `DataSort`  responsiveness for mobile
+- Fix functionality of `DataSearch`
+
+## 1.5.9
+- Fix `z-index` issue with `SearchableSelect`
+
+## 1.5.8
+- Showing `undefined` on total in `Pagination`
+
+## 1.5.7
+- Width calculation on `DataSearch`
+- More `text` validation `Nl2br`
+
+## 1.5.6
+- Fix attribute of `MultiSelect`
+- Fix `text` checking on `Nl2br`
+
+## 1.5.5
+- Added `BarChart`
+- Added `LineChart`
+- Added `AreaChart`
+- Added `RadialChart`
+- Support `sparklines` in `Charts`
+- Add `yAxisOptions` and `horizontal` bar for `Charts`
+- Fix attribute of `ConfirmButton`
+- Fix error Handling in `MixedChart`
+
+## 1.5.1
+- Chart bugfixes
+- Fix attribute of `NumberInput` for UI testing
+
+## 1.5.0
+- Added `DonutChart`
+- Added `MixedChart`
+- Added `PieChart`
+
+## 1.4.7
+- Fix value mismatch on `NumberInput`
+
+## 1.4.6
+- Fix Typing bug on `NumberInput`
+
+## 1.4.5
+- Fix **on:change** event on `NumberInput`
+
+## 1.4.4
+- import  `Floatie`, `FloatingUIOutput`, `FloatiesStore` from `@kws3/ui` for `FloatingUIOutput`
+
+## 1.4.3
+- Rename `completion_timeout` to `error_timeout` in `Buttons`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 KWS3 Media Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
 UI components for use with Svelte v3 applications.
 
-Docs: [https://ui.kws3.media](https://ui.kws3.media)
+[Demo and Documentation](https://ui.kws3.media)

package/buttons/SubmitButton.svelte

@@ -15,9 +15,9 @@
   @param {number} [completion_timeout=600] - How long to wait before `saved` event is fired, and the UI state reverts back to normal, Default: `600`
   @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for Button container, Default: `""`
-  @param {function} [saving()] - call this function on form saving state
-  @param {function} [saved(callback, timeout)] - call this function after form saved
-  @param {function} [error(callback, timeout)] - call this function on form error state
+  @method `saving()` - call this method on form saving state
+  @method `saved(callback, timeout)` - call this method after form saved
+  @method `error(callback, timeout)` - call this method on form error state
 
   ### Events
   - `saved` - Fired on successful submission
@@ -115,7 +115,7 @@
   export { klass as class };
 
   /**
-   * call this function on form saving state
+   * call this method on form saving state
    */
   export function saving() {
     tracker = {
@@ -126,7 +126,7 @@
   }
 
   /**
-   * call this function after form saved
+   * call this method after form saved
    */
   export function saved(callback, timeout = completion_timeout) {
     tracker = {
@@ -150,7 +150,7 @@
   }
 
   /**
-   * call this function on form error state
+   * call this method on form error state
    */
   export function error(callback, timeout = error_timeout) {
     tracker = {
@@ -173,6 +173,6 @@
     }, timeout);
   }
 
-  $: err_text = error_text == "" ? text : error_text;
-  $: icon_size = size == "large" ? "" : "small";
+  $: err_text = error_text === "" ? text : error_text;
+  $: icon_size = size === "large" ? "" : "small";
 </script>

package/controls/Checkbox.svelte

@@ -15,9 +15,9 @@ Checked\Not Checked, Default: `false`
   @param {string} [label_style=""] - Inline CSS for the Checkbox label, Default: `""`
   @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [icon_family="null"] - Icon family to be used
 
-Defaults to global family set via `Icon.setDefaultIconType()`
+Defaults to global family set via `Icon.setDefaultIconType()`
 
-Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
+Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   @param {string} [class=""] - CSS classes of the Checkbox, Default: `""`
 
   ### Events
@@ -96,9 +96,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
     /**
      * Icon family to be used
      *
-     * Defaults to global family set via `Icon.setDefaultIconType()`
+     * Defaults to global family set via `Icon.setDefaultIconType()`
      *
-     * Ultimately defaults to `fa`, if family is not set anywhere
+     * Ultimately defaults to `fa`, if family is not set anywhere
      *
      * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}
      */
@@ -111,5 +111,5 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   let klass = "";
   export { klass as class };
 
-  $: has_icon = icon && icon != "";
+  $: has_icon = icon && icon !== "";
 </script>

package/controls/FileUpload.svelte

@@ -170,7 +170,7 @@ The following functions are returned in `event.detail`:
 
   $: {
     fileTypes =
-      allowed != "*" && Array.isArray(allowed) && allowed.length
+      allowed !== "*" && Array.isArray(allowed) && allowed.length
         ? allowed.join(", ")
         : "";
     _progress = Math.floor((_uploaded / _total) * 100);
@@ -256,18 +256,18 @@ The following functions are returned in `event.detail`:
       } else {
         size = 0;
       }
-      val = val.split(/[\/\\]+/);
+      val = val.split(/[/\\]+/);
       val = val[val.length - 1];
       ext = val.split(/\./);
       ext = ext[ext.length - 1];
       ext = ext.toLowerCase();
-      if (size == 0) {
+      if (size === 0) {
         valid = false;
         val = "No file selected";
       }
 
       //check if file extension is allowed
-      if (allowed != "*") {
+      if (allowed !== "*") {
         if (typeof allowed.length != "undefined") {
           if (allowed.indexOf(ext) === -1) {
             valid = false;

package/controls/NumberInput.svelte

@@ -183,7 +183,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   const count = (i) => () => {
     if (typeof value == "undefined" || value === null) value = min;
     value = Number(value) + i * step;
-    if (step % 1 != 0) value = value.toFixed(1);
+    if (step % 1 !== 0) value = value.toFixed(1);
   };
 
   function validateInput() {
@@ -194,7 +194,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     if (value < min) value = min;
     if (value > max) value = max;
 
-    if (_old_value != value) {
+    if (_old_value !== value) {
       _old_value = value;
       /**
        * Triggered when value changes

package/controls/ToggleButtons.svelte

@@ -34,7 +34,7 @@ This property can be bound to, to fetch the current value, Default: `null`
         type="button"
         {disabled}
         on:click={setValue(option.value)}
-        class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ==
+        class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ===
         option.value
           ? 'is-active ' +
             (option.active_class ? option.active_class : active_class)

package/datagrid/DataSearch/DataSearch.svelte

@@ -23,7 +23,7 @@
     {#if hasSearch}
       <div class="control is-expanded main-search">
         <input
-          class="input {query != '' && query != undefined
+          class="input {query !== '' && query !== undefined
             ? filter_in_use_class
             : filter_not_in_use_class}"
           type="text"
@@ -32,14 +32,14 @@
       </div>
     {/if}
     {#if hasFilters}
-      {#each _filters as filter, i}
+      {#each _filters as filter}
         <svelte:component
           this={usedFilterComponent}
           {filterVals}
           {filter}
           {filterWidthStyle}
-          hilightClass={filterVals[filter.name] != "" &&
-          filterVals[filter.name] != undefined
+          hilightClass={filterVals[filter.name] !== "" &&
+          filterVals[filter.name] !== undefined
             ? filter_in_use_class
             : filter_not_in_use_class}
           {filter_label_map} />
@@ -117,7 +117,7 @@
     filterWidthStyle = "";
 
   $: usedFilterComponent = filterComponent ? filterComponent : SearchFilter;
-  $: changed = q && q.trim() != "";
+  $: changed = q && q.trim() !== "";
   $: q, qHasChanged();
   $: filters, filtersHaveChanged();
 
@@ -152,7 +152,7 @@
   }
 
   function qHasChanged() {
-    if (q == "") {
+    if (q === "") {
       //bail out early and reset all filters
       //this happens when using back/forward browser buttons
       return doresetSearch();
@@ -183,6 +183,7 @@
       filterVals[i] = "";
     }
     query = "";
+    // eslint-disable-next-line no-self-assign
     filterVals = filterVals;
 
     /**

package/datagrid/DataSearch/SearchFilter.svelte

@@ -10,8 +10,11 @@
 
 -->
 
-{#if filter.type == "multiselect"}
-  <div class="control search-control" style={filterWidthStyle}>
+{#if filter.type === "multiselect"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <MultiSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -22,15 +25,21 @@
       summary_mode
       class={hilightClass} />
   </div>
-{:else if filter.type == "date"}
-  <div class="control search-control" style={filterWidthStyle}>
+{:else if filter.type === "date"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
-{:else if filter.type == "daterange"}
-  <div class="control search-control" style={filterWidthStyle}>
+{:else if filter.type === "daterange"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
@@ -38,7 +47,10 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <SearchableSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -50,12 +62,13 @@
 {:else}
   <div
     class="select control search-control {hilightClass}"
+    class:is-expanded={shouldExpandToFill}
     style={filterWidthStyle}
     data-cy="select-container">
     <select
       bind:value={filterVals[filter.name]}
       class="is-radiusless {hilightClass}"
-      style="max-width:100%"
+      style="max-width:100%;width:100%;"
       data-cy={cy}>
       {#each sanitizedOptions as option}
         {#if option}
@@ -103,6 +116,8 @@
 
   $: filterVals, filter, convertToValuesArray();
 
+  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() === "";
+
   function convertValuesToString() {
     tick().then(() => {
       filterVals[filter.name] = multiSelectValue
@@ -111,7 +126,7 @@
     });
   }
   function convertToValuesArray() {
-    if (filter && filter.type == "multiselect") {
+    if (filter && filter.type === "multiselect") {
       multiSelectValue = filterVals[filter.name]
         ? filterVals[filter.name].split("|")
         : [];
@@ -122,7 +137,7 @@
     let options = filter.options || [];
     if (options.length) {
       options =
-        filter.type == "multiselect"
+        filter.type === "multiselect"
           ? options
           : [{ id: "", name: `Any ${name}` }, ...options];
       options = options.map((el) => {

package/datagrid/GridView/GridCell.svelte

@@ -11,6 +11,7 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
+  <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
   {@html transforms(column, row)}
 </td>
 

package/datagrid/GridView/GridRow.svelte

@@ -164,7 +164,7 @@
 
   function setCheckedValue() {
     checked = false;
-    if (selectedIds.indexOf(row.id) != -1) {
+    if (selectedIds.indexOf(row.id) !== -1) {
       checked = true;
     }
   }