@kws3/ui 1.9.2 → 2.0.1

package/controls/RangeSlider.svelte

@@ -48,6 +48,12 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 <script>
   import { onMount } from "svelte";
 
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   /**
    * Minumum permitted value
    */
@@ -78,12 +84,12 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     disabled = false,
     /**
      * Size of the Slider
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**
      * Colour of the Slider
-     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "",
     /**

package/controls/Toggle.svelte

@@ -37,6 +37,13 @@ This property can be bound to, to fetch the current value, Default: `false`
 
 <script>
   import { createEventDispatcher } from "svelte";
+
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   const fire = createEventDispatcher();
 
   /**
@@ -51,7 +58,7 @@ This property can be bound to, to fetch the current value, Default: `false`
     disabled = false,
     /**
      * Color of the Toggle
-     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "",
     /**
@@ -64,7 +71,7 @@ This property can be bound to, to fetch the current value, Default: `false`
     off_text = "",
     /**
      * Size of the Toggle
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**

package/controls/ToggleButtons.svelte

@@ -33,7 +33,9 @@ This property can be bound to, to fetch the current value, Default: `null`
       <button
         type="button"
         {disabled}
-        on:click={setValue(option.value)}
+        on:click={() => {
+          setValue(option.value);
+        }}
         class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ===
         option.value
           ? 'is-active ' +
@@ -44,7 +46,7 @@ This property can be bound to, to fetch the current value, Default: `null`
         style="height:auto">
         <span>
           {#if option.icon}
-            <Icon icon={option.icon} size="small" icon_class="is-marginless" />
+            <Icon icon={option.icon} size="small" class="is-marginless" />
           {/if}
           <span class="is-block">{option.name}</span>
           {#if option.subtitle}
@@ -76,6 +78,11 @@ This property can be bound to, to fetch the current value, Default: `null`
 <script>
   import { createEventDispatcher } from "svelte";
   import { Icon } from "@kws3/ui";
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
 
   const fire = createEventDispatcher();
   /**
@@ -119,7 +126,7 @@ This property can be bound to, to fetch the current value, Default: `null`
     inactive_class = "is-outlined",
     /**
      * Size of the Toggle Buttons
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**

package/datagrid/DataSearch/DataSearch.svelte

@@ -111,7 +111,7 @@
      */
     filter_label_map = {};
 
-  let query = "",
+  let query = null,
     _filters = [],
     filterVals = {},
     filterWidthStyle = "";

package/datagrid/GridView/GridCell.svelte

@@ -26,14 +26,17 @@
     row = {},
     /**
      * Finds custom values for the column
+     * @type {object}
      */
     transforms = {},
     /**
      * Finds CSS class for the column
+     * @type {object}
      */
     classNames = {},
     /**
      * Finds CSS styles for the column
+     * @type {object}
      */
     styles = {};
 </script>

package/datagrid/GridView/GridRow.svelte

@@ -99,6 +99,11 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Row index value
    */
@@ -117,6 +122,7 @@
     activatedId = null,
     /**
      * Determines whether column is visible or not
+     * @type {object}
      */
     isVisible = {},
     /**
@@ -125,10 +131,12 @@
     clickableRows = false,
     /**
      * Contains all custom values for each columns
+     * @type {object}
      */
     transforms = {},
     /**
      * Contails all CSS class for each column
+     * @type {object}
      */
     classNames = {},
     /**
@@ -137,8 +145,12 @@
     transition = false,
     /**
      * Contains all CSS styles for each column
+     * @type {object}
      */
     styles = {},
+    /**
+     * Column keys
+     */
     column_keys = [],
     /**
      * Determines if selecting multiple rows and doing multiple actions is allowed
@@ -154,10 +166,12 @@
     selectedIds = [],
     /**
      * Selected checkbox color
+     * @type {Exclude<ColorOptions, 'success'>}
      */
     selectCheckboxColor = "info",
     /**
      * selected checkbox size
+     * @type {SizeOptions}
      */
     selectCheckboxSize = "medium",
     /**
@@ -166,6 +180,7 @@
     cellComponent = () => null;
 
   $: resolveComponent = (column, row) => {
+    // @ts-ignore
     return cellComponent(column, row) || GridCell;
   };
 

package/datagrid/GridView/GridView.svelte

@@ -7,6 +7,7 @@
   @param {object} [columns={}] - Table column names. {db_field_name: column_name}, Default: `{}`
   @param {boolean} [transition=false] - Determines if a transition effect is used, Default: `false`
   @param {boolean} [is_striped=true] - Determines whether to use alternating row shading in the table view, Default: `true`
+  @param {boolean} [is_narrow=false] - Determines whether to display rows in a more compact manner, Default: `false`
   @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
   @param {object} [activatedId=null] - Unique id of row that is activated, Default: `null`
@@ -22,6 +23,7 @@
   @param {object} [visibilityMap={}] - Contains list of columns which can be visible or not, Default: `{}`
   @param {object} [cellComponentMap={}] - Contains list of columns with its custom cell component, Default: `{}`
   @param {any} [rowComponent="GridRow"] - Contains a custom row component, Default: `"GridRow"`
+  @param {string} [class=""] - CSS classes for parent table, Default: `""`
 
   ### Events
   - `toggleSelectAll` - Fires an event every time the `select all` checkbox is toggled
@@ -32,9 +34,9 @@
 -->
 <div class="data-table" data-cy="data-table">
   <table
-    class="table is-fullwidth {is_striped ? 'is-striped' : ''} {clickableRows
-      ? 'is-hoverable'
-      : ''} is-bordered">
+    class="table is-fullwidth {is_striped ? 'is-striped' : ''} {is_narrow
+      ? 'is-narrow'
+      : ''} {clickableRows ? 'is-hoverable' : ''} is-bordered {klass}">
     <thead>
       <tr>
         {#if bulk_actions}
@@ -91,6 +93,10 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Iteration key
    */
@@ -112,6 +118,11 @@
      * @link https://bulma.io/documentation/elements/table/#modifiers
      */
     is_striped = true,
+    /**
+     * Determines whether to display rows in a more compact manner
+     * @link https://bulma.io/documentation/elements/table/#modifiers
+     */
+    is_narrow = false,
     /**
      * Determines whether clickable rows activate visually on click
      */
@@ -138,6 +149,7 @@
     selectedIds = [],
     /**
      * Colour of the `select all` checkbox
+     * @type {Exclude<ColorOptions, 'success'>}
      */
     selectAllCheckboxColor = "primary",
     /**
@@ -174,6 +186,12 @@
      */
     rowComponent = GridRow;
 
+  /**
+   * CSS classes for parent table
+   */
+  let klass = "";
+  export { klass as class };
+
   $: mainRowComponent = rowComponent ? rowComponent : GridRow;
   $: column_keys = columns ? Object.keys(columns) : [];
 

package/datagrid/Pagination/Pagination.svelte

@@ -189,7 +189,7 @@
     entityName = "entries",
     /**
      * Size of the pagination elements
-     * @type {''|'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "small",
     /**
@@ -210,7 +210,7 @@
     perPageOptions = [20, 50, 100, 150, 200, 250];
 
   let pages = [],
-    _perPageOptions = 0;
+    _perPageOptions = {};
 
   $: _total = total || meta.total || 0;
   $: _count = count || meta.count || 0;
@@ -303,7 +303,7 @@
 
   /**
    * Go to an arbitrary page number
-   * @param {int} targetPage
+   * @param {number} targetPage
    */
   export function goto(targetPage) {
     let limit = _limit,

package/datagrid/TileView/TileView.svelte

@@ -6,7 +6,12 @@
   @param {array} [data=[]] - Contains all the results to be listed, Default: `[]`
   @param {boolean} [transition=false] - Determines if a transition effect is used, Default: `false`
   @param {object} [tileItemComponent=null] - Contains a custom component, Default: `null`
-  @param {number} [per_row=3] - Sets how many items to display in a row, Default: `3`
+  @param {number} [per_row=3] - Sets how many items to display in a row. This is ignored when `fluid_items_per_row` is `true`, Default: `3`
+  @param {boolean} [fluid_items_per_row=false] - When set to `true`, the number of items per row varies with available space, Default: `false`
+  @param {string} [min_width="unset"] - CSS string specifying minimum width, this is only applied when `fluid_items_per_row` is `true`, Default: `"unset"`
+  @param {string} [max_width="unset"] - CSS string specifying maximum width, this is only applied when `fluid_items_per_row` is `true`, Default: `"unset"`
+  @param {boolean} [grow=true] - Whether a tile can grow if there is space available, this is only applied when `fluid_items_per_row` is `true`, Default: `true`
+  @param {boolean} [shrink=true] - Whether a tile can shrink if there isn't enough space available, this is only applied when `fluid_items_per_row` is `true`, Default: `true`
   @param {object} [columns={}] - Column names for the displayed table {db_field_name: column_name}, Default: `{}`
   @param {boolean} [visualActivationOnClick=true] - Determines whether clickable rows activate visually on click, Default: `true`
   @param {boolean} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
@@ -15,6 +20,7 @@
   @param {object} [classTransformers={}] - CSS class names for each column, Default: `{}`
   @param {object} [styleTransformers={}] - CSS styles for each column, Default: `{}`
   @param {object} [visibilityMap={}] - Contains list of columns which can be visible or not, Default: `{}`
+  @param {string} [class=""] - CSS classes for tiles wrapper, Default: `""`
 
   ### Events
   - `rowClick`
@@ -22,9 +28,9 @@
   - `_forwardEvent`
 
 -->
-<div class="columns is-multiline">
+<div class="columns is-multiline {klass}">
   {#each data as row, row_index (row[iteration_key])}
-    <div class="column is-{column_size}">
+    <div class="column is-{column_size}" style={fluid_css}>
       <Transition {transition} y={20} delay={20 * row_index}>
         <svelte:component
           this={mainTileComponent}
@@ -72,9 +78,29 @@
      */
     tileItemComponent = null,
     /**
-     * Sets how many items to display in a row
+     * Sets how many items to display in a row. This is ignored when `fluid_items_per_row` is `true`
      */
     per_row = 3,
+    /**
+     * When set to `true`, the number of items per row varies with available space
+     */
+    fluid_items_per_row = false,
+    /**
+     * CSS string specifying minimum width, this is only applied when `fluid_items_per_row` is `true`
+     */
+    min_width = "unset",
+    /**
+     * CSS string specifying maximum width, this is only applied when `fluid_items_per_row` is `true`
+     */
+    max_width = "unset",
+    /**
+     * Whether a tile can grow if there is space available, this is only applied when `fluid_items_per_row` is `true`
+     */
+    grow = true,
+    /**
+     * Whether a tile can shrink if there isn't enough space available, this is only applied when `fluid_items_per_row` is `true`
+     */
+    shrink = true,
     /**
      * Column names for the displayed table {db_field_name: column_name}
      */
@@ -129,8 +155,23 @@
      */
     selectCheckboxSize = "medium";
 
+  /**
+   * CSS classes for tiles wrapper
+   */
+  let klass = "";
+  export { klass as class };
+
   $: mainTileComponent = tileItemComponent ? tileItemComponent : TileViewItem;
-  $: column_size = per_row < 12 ? Math.floor(12 / per_row) : 12;
+  $: column_size = fluid_items_per_row
+    ? "fluid"
+    : per_row < 12
+    ? Math.floor(12 / per_row)
+    : 12;
+  $: fluid_css = fluid_items_per_row
+    ? `min-width:${min_width};max-width:${max_width};flex-shrink:${Number(
+        shrink
+      )};flex-grow:${Number(grow)};`
+    : "";
   $: column_keys = columns ? Object.keys(columns) : [];
 
   $: transforms = (column, row) => {

package/datagrid/TileView/TileViewItem.svelte

@@ -53,18 +53,22 @@
     clickableRows = false,
     /**
      * Returns whether a column can be visible or not
+     * @type {function}
      */
     isVisible = function () {},
     /**
      * Returns column custom value
+     * @type {function}
      */
     transforms = function () {},
     /**
      * Returns column custom CSS class
+     * @type {function}
      */
     classNames = function () {},
     /**
      * Returns column custom CSS styles
+     * @type {function}
      */
     styles = function () {},
     /**

package/form/index.js

@@ -0,0 +1,160 @@
+import { cloneObject } from "../utils/index";
+import { derived, get, writable } from "svelte/store";
+
+const makeForms = (items) => {
+  var res = Array.isArray(items);
+  if (!res) {
+    return formMaker(items);
+  }
+
+  let ret = [];
+  if (items.length) {
+    items.forEach((item) => ret.push(formMaker(item)));
+  }
+  return ret;
+};
+
+const formMaker = (config) => {
+  let data = config.data || {};
+  let validators = config.validators || {};
+  let strictMode = config.strictMode || false;
+  let tracker_data = {
+    saving: false,
+    saved: false,
+    error: false,
+  };
+
+  const formData = writable(cloneObject(data));
+
+  const tracker = writable(cloneObject(tracker_data));
+
+  const touched = derived(formData, ($formData, set) => {
+    let fields = Object.keys($formData);
+    let res = fields.reduce((o, v) => ((o[v] = false), o), {});
+
+    let compare = (field, oldData, newData) => {
+      if (Array.isArray(newData[field])) {
+        if (
+          !Array.isArray(oldData[field]) ||
+          (Array.isArray(oldData[field]) &&
+            oldData[field].length !== newData[field].length)
+        ) {
+          return true;
+        }
+      } else if (
+        typeof newData[field] === "object" &&
+        newData[field] !== null
+      ) {
+        let ret = {};
+        for (let key in newData[field]) {
+          ret[key] = compare(key, oldData[field], newData[field]);
+        }
+        return ret;
+      } else {
+        if (!strictMode) {
+          if (
+            (oldData[field] === null &&
+              [0, "", false].indexOf(newData[field]) !== -1) ||
+            (oldData[field] === 0 && newData[field] === false) ||
+            (oldData[field] === 1 && newData[field] === true)
+          ) {
+            return false;
+          }
+        }
+
+        if (oldData[field] !== newData[field]) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (fields.length) {
+      fields.forEach((field) => {
+        res[field] = compare(field, data, $formData);
+      });
+    }
+
+    set(res);
+  });
+
+  const errors = derived(formData, ($formData, set) => {
+    let fields = Object.keys(validators) || [];
+    let res = fields.reduce((o, v) => ((o[v] = ""), o), {});
+    let validate = (field, validator) => {
+      let message = "";
+      if (validator || typeof validator !== "undefined") {
+        if (Array.isArray(validator)) {
+          for (let i = 0; i < validator.length; i++) {
+            message = validate(field, validator[i]);
+            if (message) {
+              break;
+            }
+          }
+        } else {
+          message = validator($formData[field], $formData);
+        }
+      }
+      return message;
+    };
+
+    if (fields.length) {
+      fields.forEach((field) => {
+        res[field] = validate(field, validators[field]);
+      });
+    }
+    set(res);
+  });
+
+  const isTouched = derived(touched, ($touched, set) => {
+    let find = (fields) =>
+      Object.values(fields).some((field) => {
+        if (typeof field === "object") {
+          return find(field);
+        } else {
+          return field === true;
+        }
+      });
+    set(find($touched));
+  });
+
+  const isValid = derived(errors, ($errors) =>
+    Object.values($errors).every((v) => v === "")
+  );
+
+  function update(newData) {
+    data = newData;
+    reset();
+  }
+
+  function setValidators(newValidators) {
+    validators = newValidators;
+    formData.set(get(formData));
+  }
+
+  function reset(e) {
+    e && e.preventDefault();
+    formData.set(cloneObject(data));
+    tracker.set(cloneObject(tracker_data));
+  }
+
+  return {
+    formData,
+    errors,
+    touched,
+    isValid,
+    isTouched,
+    tracker,
+    update,
+    reset,
+    setValidators,
+  };
+};
+
+const notEmpty = (v) => v && v.trim() !== "";
+
+const noDigits = (v) => !/\d/.test(v);
+
+const withMsg = (msg, fn) => (v, otherFields) => fn(v, otherFields) ? "" : msg;
+
+export { makeForms, notEmpty, noDigits, withMsg };