@kws3/ui 1.1.0 → 1.2.2

package/buttons/SubmitButton.svelte

@@ -118,7 +118,7 @@
   /**
    * call this function after form saved
    */
-  export function saved(callback) {
+  export function saved(callback, timeout = 3000) {
     tracker = {
       saving: false,
       saved: true,
@@ -136,13 +136,13 @@
        */
       fire("saved");
       callback && callback();
-    }, 1000);
+    }, timeout);
   }
 
   /**
    * call this function on form error state
    */
-  export function error(callback) {
+  export function error(callback, timeout = 3000) {
     tracker = {
       saving: false,
       saved: false,
@@ -160,7 +160,7 @@
        */
       fire("error");
       callback && callback();
-    }, 1000);
+    }, timeout);
   }
 
   $: err_text = error_text == "" ? text : error_text;

package/controls/NumberInput.svelte

@@ -49,7 +49,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
       max
       step
       {disabled}
-      readonly={typeable}
+      readonly={!typeable}
       bind:value
       on:blur={isBlurred()}
       on:focus={isFocused()} />
@@ -82,6 +82,9 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     appearance: none;
     margin: 0;
   }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 </style>
 
 <script>

package/datagrid/DataSearch/DataSearch.svelte

@@ -2,21 +2,22 @@
   @component
 
 
-  @param {boolean} [hasSearch=true] - HasSearch property, Default: `true`
-  @param {boolean} [hasFilters=true] - HasFilters property, Default: `true`
-  @param {string} [placeholder=""] - Placeholder property, Default: `""`
-  @param {object} [filters={}] - Filters property, Default: `{}`
-  @param {string} [q=""] - Q property, Default: `""`
-  @param {string} [filter_in_use_class="is-in-use"] - Filter_in_use_class property, Default: `"is-in-use"`
-  @param {string} [filter_not_in_use_class="is-not-in-use"] - Filter_not_in_use_class property, Default: `"is-not-in-use"`
-  @param {object} [filterComponent=null] - FilterComponent property, Default: `null`
-  @param {object} [filter_label_map={}] - Filter_label_map property, Default: `{}`
+  @param {boolean} [hasSearch=true] - Determines whether there is a search input or not, Default: `true`
+  @param {boolean} [hasFilters=true] - Determines if there are filters on search, Default: `true`
+  @param {string} [placeholder=""] - Placeholder text for the search input, Default: `""`
+  @param {object} [filters={}] - Contains all the filter dropdown values, Default: `{}`
+  @param {string} [q=""] - Query string from the browser url, Default: `""`
+  @param {string} [filter_in_use_class="is-in-use"] - CSS class for in use filters, Default: `"is-in-use"`
+  @param {string} [filter_not_in_use_class="is-not-in-use"] - Css class for not in use filters, Default: `"is-not-in-use"`
+  @param {object} [filterComponent=null] - To use a custom component for filters, Default: `null`
+  @param {object} [filter_label_map={}] - Contains all the labels for the filter dropdowns, Default: `{}`
 
   ### Events
-  - `resetSearch`
-  - `search`
+  - `resetSearch` - Triggered when the search is reset
+  - `search` - Event triggered on search
 
 -->
+
 <form on:submit|preventDefault={dosearch}>
   <div class="field has-addons">
     {#if hasSearch}
@@ -66,14 +67,41 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * Determines whether there is a search input or not
+   */
   export let hasSearch = true,
+    /**
+     * Determines if there are filters on search
+     */
     hasFilters = true,
+    /**
+     * Placeholder text for the search input
+     */
     placeholder = "",
+    /**
+     * Contains all the filter dropdown values
+     */
     filters = {},
+    /**
+     * Query string from the browser url
+     */
     q = "",
+    /**
+     * CSS class for in use filters
+     */
     filter_in_use_class = "is-in-use",
+    /**
+     * Css class for not in use filters
+     */
     filter_not_in_use_class = "is-not-in-use",
+    /**
+     * To use a custom component for filters
+     */
     filterComponent = null,
+    /**
+     * Contains all the labels for the filter dropdowns
+     */
     filter_label_map = {};
 
   let query = "",
@@ -133,6 +161,9 @@
     query = "";
     filterVals = filterVals;
 
+    /**
+     * Triggered when the search is reset
+     */
     fire("resetSearch");
   }
 
@@ -142,6 +173,9 @@
     for (var i in filterVals) {
       filterVals[i] && ret.push(i + ":" + filterVals[i]);
     }
+    /**
+     * Event triggered on search
+     */
     fire("search", ret.join("~"));
   }
 </script>

package/datagrid/DataSearch/SearchFilter.svelte

@@ -2,16 +2,26 @@
   @component
 
 
-  @param {object} [filter={}] - Filter property, Default: `{}`
-  @param {object} [filterVals={}] - FilterVals property, Default: `{}`
-  @param {string} [filterWidthStyle=""] - FilterWidthStyle property, Default: `""`
-  @param {string} [hilightClass=""] - HilightClass property, Default: `""`
-  @param {object} [filter_label_map={}] - Filter_label_map property, Default: `{}`
+  @param {object} [filter={}] - Contains filter options for dropdown, Default: `{}`
+  @param {object} [filterVals={}] - Contains the selected filter values, Default: `{}`
+  @param {string} [filterWidthStyle=""] - Inline CSS style for the filters, Default: `""`
+  @param {string} [hilightClass=""] - CSS classes for highlighted filter, Default: `""`
+  @param {object} [filter_label_map={}] - Contains custom labels for the filter, Default: `{}`
 
 -->
 
 {#if filter.type == "multiselect"}
-  <div class="control" style={filterWidthStyle}>NOT IMPLEMENTED YET</div>
+  <div class="control" style={filterWidthStyle}>
+    <MultiSelect
+      options={sanitizedOptions}
+      placeholder={`Any ${name}`}
+      bind:value={multiSelectValue}
+      on:change={convertValuesToString}
+      search_key="name"
+      value_key="id"
+      summary_mode
+      class={hilightClass} />
+  </div>
 {:else if filter.type == "date"}
   <div class="control" style={filterWidthStyle}>
     <Datepicker
@@ -28,15 +38,15 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <SearchableSelect
-    data={filter.options}
-    placeholder={`Any ${name}`}
-    bind:value={filterVals[filter.name]}
-    searchKey="name"
-    searchValue="id"
-    classes={`control ${hilightClass}`}
-    style={filterWidthStyle}
-    {cy} />
+  <div class="control" style={filterWidthStyle}>
+    <SearchableSelect
+      options={sanitizedOptions}
+      placeholder={`Any ${name}`}
+      bind:value={filterVals[filter.name]}
+      search_key="name"
+      value_key="id"
+      class={hilightClass} />
+  </div>
 {:else}
   <div
     class="select {hilightClass}"
@@ -47,26 +57,79 @@
       class="is-radiusless {hilightClass}"
       style="max-width:100%"
       data-cy={cy}>
-      <option value="">Any {name}</option>
-      {#each filter.options as option}
-        <option value={option.id + ""}>{option.name}</option>
+      {#each sanitizedOptions as option}
+        {#if option}
+          <option value={option.id}>{option.name}</option>
+        {/if}
       {/each}
     </select>
   </div>
 {/if}
 
 <script>
-  import { SearchableSelect, Datepicker } from "@kws3/ui";
+  import { tick } from "svelte";
+  import { SearchableSelect, MultiSelect, Datepicker } from "@kws3/ui";
   import { capitaliseFirstLetter } from "@kws3/ui/utils";
 
+  /**
+   * Contains filter options for dropdown
+   */
   export let filter = {},
+    /**
+     * Contains the selected filter values
+     */
     filterVals = {},
+    /**
+     * Inline CSS style for the filters
+     */
     filterWidthStyle = "",
+    /**
+     * CSS classes for highlighted filter
+     */
     hilightClass = "",
+    /**
+     * Contains custom labels for the filter
+     */
     filter_label_map = {};
 
+  let sanitizedOptions = [],
+    multiSelectValue = [];
+
   $: name = filter_label_map[filter.name]
     ? filter_label_map[filter.name]
     : filter.name.replace(/_/g, " ");
+  $: filter, name, sanitizeOptions();
   $: cy = name ? name.replace(/\s+/g, "-").toLowerCase() : "";
+
+  $: filterVals, filter, convertToValuesArray();
+
+  function convertValuesToString() {
+    tick().then(() => {
+      filterVals[filter.name] = multiSelectValue
+        ? multiSelectValue.join("|")
+        : "";
+    });
+  }
+  function convertToValuesArray() {
+    if (filter && filter.type == "multiselect") {
+      multiSelectValue = filterVals[filter.name]
+        ? filterVals[filter.name].split("|")
+        : [];
+    }
+  }
+
+  function sanitizeOptions() {
+    let options = filter.options || [];
+    if (options.length) {
+      options =
+        filter.type == "multiselect"
+          ? options
+          : [{ id: "", name: `Any ${name}` }, ...options];
+      options = options.map((el) => {
+        el.id = el.id + "";
+        return el;
+      });
+    }
+    sanitizedOptions = options;
+  }
 </script>

package/datagrid/DataSort/DataSort.svelte

@@ -2,11 +2,11 @@
   @component
 
 
-  @param {array} [options=[]] - Options property, Default: `[]`
-  @param {string} [sort_by=""] - Sort_by property, Default: `""`
-  @param {string} [value=""] - Value property, Default: `""`
+  @param {array} [options=[]] - List of options in the dropdown, Default: `[]`
+  @param {string} [sort_by=""] - Stores the selected option value, Default: `""`
 
 -->
+
 <div class="sorting-filters">
   <div class="field is-grouped">
     <div class="control">
@@ -30,10 +30,20 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * List of options in the dropdown
+   */
   export let options = [],
-    sort_by = "",
-    value = "";
+    /**
+     * Stores the selected option value
+     */
+    sort_by = "";
+
+  let value = "";
 
   $: value, fire("sort", value);
-  $: value = sort_by.replace("%20", " ");
+
+  $: {
+    value = sort_by.replace("%20", " ");
+  }
 </script>

package/datagrid/GridView/GridCell.svelte

@@ -2,21 +2,37 @@
   @component
 
 
-  @param {string} [column=""] - Column property, Default: `""`
-  @param {object} [row={}] - Row property, Default: `{}`
-  @param {object} [transforms={}] - Transforms property, Default: `{}`
-  @param {object} [classNames={}] - ClassNames property, Default: `{}`
-  @param {object} [styles={}] - Styles property, Default: `{}`
+  @param {string} [column=""] - Name of the column in the DB, Default: `""`
+  @param {object} [row={}] - List of all values in a row, Default: `{}`
+  @param {object} [transforms={}] - Finds custom values for the column, Default: `{}`
+  @param {object} [classNames={}] - Finds CSS class for the column, Default: `{}`
+  @param {object} [styles={}] - Finds CSS styles for the column, Default: `{}`
 
 -->
 
-<td class={classNames(column, row)} style={styles(column, row)}
-  >{@html transforms(column, row)}</td>
+<td class={classNames(column, row)} style={styles(column, row)}>
+  {@html transforms(column, row)}
+</td>
 
 <script>
+  /**
+   * Name of the column in the DB
+   */
   export let column = "",
+    /**
+     * List of all values in a row
+     */
     row = {},
+    /**
+     * Finds custom values for the column
+     */
     transforms = {},
+    /**
+     * Finds CSS class for the column
+     */
     classNames = {},
+    /**
+     * Finds CSS styles for the column
+     */
     styles = {};
 </script>

package/datagrid/GridView/GridRow.svelte

@@ -2,22 +2,22 @@
   @component
 
 
-  @param {number} [row_index=0] - Row_index property, Default: `0`
-  @param {object} [row={}] - Row property, Default: `{}`
-  @param {boolean} [rowActive=false] - RowActive property, Default: `false`
-  @param {object} [isVisible={}] - IsVisible property, Default: `{}`
-  @param {boolean} [clickableRows=false] - ClickableRows property, Default: `false`
-  @param {object} [transforms={}] - Transforms property, Default: `{}`
-  @param {object} [classNames={}] - ClassNames property, Default: `{}`
-  @param {boolean} [transition=false] - Transition property, Default: `false`
-  @param {object} [styles={}] - Styles property, Default: `{}`
+  @param {number} [row_index=0] - Row index value, Default: `0`
+  @param {object} [row={}] - Contains all the column values in a row, Default: `{}`
+  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {object} [isVisible={}] - Determines whether column is visible or not, Default: `{}`
+  @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
+  @param {object} [transforms={}] - Contains all custom values for each columns, Default: `{}`
+  @param {object} [classNames={}] - Contails all CSS class for each column, Default: `{}`
+  @param {boolean} [transition=false] - Determines whether the row has transition effect or not, Default: `false`
+  @param {object} [styles={}] - Contains all CSS styles for each column, Default: `{}`
   @param {array} [column_keys=[]] - Column_keys property, Default: `[]`
-  @param {boolean} [bulk_actions=false] - Bulk_actions property, Default: `false`
-  @param {boolean} [checked=false] - Checked property, Default: `false`
-  @param {array} [selectedIds=[]] - SelectedIds property, Default: `[]`
-  @param {string} [selectCheckboxColor="info"] - SelectCheckboxColor property, Default: `"info"`
-  @param {string} [selectCheckboxSize="medium"] - SelectCheckboxSize property, Default: `"medium"`
-  @param {function} [cellComponent()] - CellComponent function
+  @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
+  @param {boolean} [checked=false] - Determines whether the checkbox is checked or not, Default: `false`
+  @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
+  @param {string} [selectCheckboxColor="info"] - Selected checkbox color, Default: `"info"`
+  @param {string} [selectCheckboxSize="medium"] - selected checkbox size, Default: `"medium"`
+  @param {function} [cellComponent()] - Custom cell component for a column
 
   ### Events
   - `rowSelectChecked`
@@ -90,21 +90,66 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * Row index value
+   */
   export let row_index = 0,
+    /**
+     * Contains all the column values in a row
+     */
     row = {},
+    /**
+     * Determines whether the row is selected or not
+     */
     rowActive = false,
+    /**
+     * Determines whether column is visible or not
+     */
     isVisible = {},
+    /**
+     * Determines whether the row is clickable or not
+     */
     clickableRows = false,
+    /**
+     * Contains all custom values for each columns
+     */
     transforms = {},
+    /**
+     * Contails all CSS class for each column
+     */
     classNames = {},
+    /**
+     * Determines whether the row has transition effect or not
+     */
     transition = false,
+    /**
+     * Contains all CSS styles for each column
+     */
     styles = {},
     column_keys = [],
+    /**
+     * Determines if selecting multiple rows and doing multiple actions is allowed
+     */
     bulk_actions = false,
+    /**
+     * Determines whether the checkbox is checked or not
+     */
     checked = false,
+    /**
+     * List of unique IDs of all the selected rows
+     */
     selectedIds = [],
+    /**
+     * Selected checkbox color
+     */
     selectCheckboxColor = "info",
+    /**
+     * selected checkbox size
+     */
     selectCheckboxSize = "medium",
+    /**
+     * Custom cell component for a column
+     */
     cellComponent = () => null;
 
   $: resolveComponent = (column, row) => {

package/datagrid/GridView/GridView.svelte

@@ -2,27 +2,27 @@
   @component
 
 
-  @param {string} [iteration_key="id"] - Iteration_key property, Default: `"id"`
-  @param {array} [data=[]] - Data property, Default: `[]`
-  @param {object} [columns={}] - Columns property, Default: `{}`
-  @param {boolean} [transition=false] - Transition property, Default: `false`
-  @param {boolean} [is_striped=true] - Is_striped property, Default: `true`
-  @param {boolean} [clickableRows=false] - ClickableRows property, Default: `false`
-  @param {boolean} [bulk_actions=false] - Bulk_actions property, Default: `false`
-  @param {boolean} [selectAll=false] - SelectAll property, Default: `false`
-  @param {array} [selectedIds=[]] - SelectedIds property, Default: `[]`
-  @param {string} [selectAllCheckboxColor="primary"] - SelectAllCheckboxColor property, Default: `"primary"`
-  @param {string} [selectCheckboxColor="info"] - SelectCheckboxColor property, Default: `"info"`
-  @param {string} [selectCheckboxSize="medium"] - SelectCheckboxSize property, Default: `"medium"`
-  @param {object} [valueTransformers={}] - ValueTransformers property, Default: `{}`
-  @param {object} [classTransformers={}] - ClassTransformers property, Default: `{}`
-  @param {object} [styleTransformers={}] - StyleTransformers property, Default: `{}`
-  @param {object} [visibilityMap={}] - VisibilityMap property, Default: `{}`
-  @param {object} [cellComponentMap={}] - CellComponentMap property, Default: `{}`
-  @param {any} [rowComponent=undefined] - RowComponent property, Default: `undefined`
+  @param {string} [iteration_key="id"] - Iteration key, Default: `"id"`
+  @param {array} [data=[]] - Contains all the results that needs to be displayed, Default: `[]`
+  @param {object} [columns={}] - Table column names. {db_field_name: column_name}, Default: `{}`
+  @param {boolean} [transition=false] - Determines if a transision 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} [clickableRows=false] - Determines whether rows are clickable or not, Default: `false`
+  @param {boolean} [bulk_actions=false] - Determines if selecting multiple rows and doing multiple actions is allowed, Default: `false`
+  @param {boolean} [selectAll=false] - Determines if all rows are selected, Default: `false`
+  @param {array} [selectedIds=[]] - List of unique IDs of all the selected rows, Default: `[]`
+  @param {string} [selectAllCheckboxColor="primary"] - Colour of the `select all` checkbox, Default: `"primary"`
+  @param {string} [selectCheckboxColor="info"] - Color of the checkbox on each row, Default: `"info"`
+  @param {string} [selectCheckboxSize="medium"] - Size of the checkbox, Default: `"medium"`
+  @param {object} [valueTransformers={}] - Contains all custom values for each column, Default: `{}`
+  @param {object} [classTransformers={}] - CSS classes 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 {object} [cellComponentMap={}] - Contains list of columns with its custom cell component, Default: `{}`
+  @param {any} [rowComponent="GridRow"] - Contains a custom row component, Default: `"GridRow"`
 
   ### Events
-  - `toggleSelectAll`
+  - `toggleSelectAll` - Fires an event every time the `select all` checkbox is toggled
   - `rowClick`
   - `rowSelectChecked`
   - `_forwardEvent`
@@ -87,23 +87,79 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * Iteration key
+   */
   export let iteration_key = "id",
+    /**
+     * Contains all the results that needs to be displayed
+     */
     data = [],
+    /**
+     * Table column names. {db_field_name: column_name}
+     */
     columns = {},
+    /**
+     * Determines if a transision effect is used
+     */
     transition = false,
+    /**
+     * Determines whether to use alternating row shading in the table view
+     * @link https://bulma.io/documentation/elements/table/#modifiers
+     */
     is_striped = true,
+    /**
+     * Determines whether rows are clickable or not
+     */
     clickableRows = false,
+    /**
+     * Determines if selecting multiple rows and doing multiple actions is allowed
+     */
     bulk_actions = false,
+    /**
+     *Determines if all rows are selected
+     */
     selectAll = false,
+    /**
+     * List of unique IDs of all the selected rows
+     */
     selectedIds = [],
+    /**
+     * Colour of the `select all` checkbox
+     */
     selectAllCheckboxColor = "primary",
+    /**
+     * Color of the checkbox on each row
+     */
     selectCheckboxColor = "info",
+    /**
+     * Size of the checkbox
+     */
     selectCheckboxSize = "medium",
+    /**
+     * Contains all custom values for each column
+     */
     valueTransformers = {},
+    /**
+     * CSS classes for each column
+     */
     classTransformers = {},
+    /**
+     * CSS styles for each column
+     */
     styleTransformers = {},
+    /**
+     * Contains list of columns which can be visible or not
+     */
     visibilityMap = {},
+    /**
+     * Contains list of columns with its custom cell component
+     */
     cellComponentMap = {},
+    /**
+     * Contains a custom row component
+     * @default "GridRow"
+     */
     rowComponent = GridRow;
 
   $: mainRowComponent = rowComponent ? rowComponent : GridRow;
@@ -143,6 +199,7 @@
 
     return "";
   };
+
   $: cellComponent = (column, row) => {
     if (cellComponentMap && cellComponentMap[column] && row) {
       return cellComponentMap[column](row[column], row);
@@ -152,6 +209,9 @@
   };
 
   function changed() {
+    /**
+     * Fires an event every time the `select all` checkbox is toggled
+     */
     fire("toggleSelectAll", selectAll);
   }
 </script>

package/datagrid/Pagination/Pagination.svelte

@@ -2,8 +2,8 @@
   @component
 
 
-  @param {object} [meta={}] - Meta property, Default: `{}`
-  @param {boolean} [showTotal=true] - ShowTotal property, Default: `true`
+  @param {object} [meta={}] - Contains the total, count, limit, offset values, Default: `{}`
+  @param {boolean} [showTotal=true] - Determines whether to show total or not, Default: `true`
   @param {boolean} [showCurrent=true] - ShowCurrent property, Default: `true`
   @param {boolean} [showPerPage=true] - ShowPerPage property, Default: `true`
   @param {number} [breakThreshold=10] - BreakThreshold property, Default: `10`
@@ -128,6 +128,9 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * Contains the total, count, limit, offset values
+   */
   export let meta = {
       limit: 0,
       total: 0,
@@ -135,6 +138,9 @@
       offset: 0,
       status: "",
     },
+    /**
+     * Determines whether to show total or not
+     */
     showTotal = true,
     showCurrent = true,
     showPerPage = true,