@kws3/ui 1.1.0 → 1.2.2

package/datagrid/TileView/TileView.svelte

@@ -2,22 +2,22 @@
   @component
 
 
-  @param {string} [iteration_key="id"] - Iteration_key property, Default: `"id"`
-  @param {array} [data=[]] - Data property, Default: `[]`
-  @param {boolean} [transition=false] - Transition property, Default: `false`
-  @param {object} [tileItemComponent=null] - TileItemComponent property, Default: `null`
-  @param {number} [per_row=3] - Per_row property, Default: `3`
-  @param {string} [columns=""] - Columns property, Default: `""`
-  @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} [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 {string} [iteration_key="id"] - Iteration key, Default: `"id"`
+  @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 {string} [columns=""] - Column names for the displayed table {db_field_name: column_name}, Default: `""`
+  @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} [selectCheckboxColor="info"] - Color of the `select all` checkbox, Default: `"info"`
+  @param {string} [selectCheckboxSize="medium"] - Size of each checkbox, Default: `"medium"`
+  @param {object} [valueTransformers={}] - Contains all custom values for each column, Default: `{}`
+  @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: `{}`
 
   ### Events
   - `rowClick`
@@ -56,21 +56,69 @@
   import { Transition } from "@kws3/ui";
   import TileViewItem from "./TileViewItem.svelte";
 
+  /**
+   * Iteration key
+   */
   export let iteration_key = "id",
+    /**
+     * Contains all the results to be listed
+     */
     data = [],
+    /**
+     * Determines if a transition effect is used
+     */
     transition = false,
+    /**
+     * Contains a custom component
+     */
     tileItemComponent = null,
+    /**
+     * Sets how many items to display in a row
+     */
     per_row = 3,
+    /**
+     * Column names for the displayed table {db_field_name: column_name}
+     */
     columns = "",
+    /**
+     * 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 = [],
+    /**
+     * Color of the `select all` checkbox
+     */
     selectCheckboxColor = "info",
+    /**
+     * Size of each checkbox
+     */
     selectCheckboxSize = "medium",
+    /**
+     * Contains all custom values for each column
+     */
     valueTransformers = {},
+    /**
+     * CSS class names for each column
+     */
     classTransformers = {},
+    /**
+     * CSS styles for each column
+     */
     styleTransformers = {},
+    /**
+     * Contains list of columns which can be visible or not
+     */
     visibilityMap = {};
 
   $: mainTileComponent = tileItemComponent ? tileItemComponent : TileViewItem;

package/datagrid/TileView/TileViewItem.svelte

@@ -2,17 +2,17 @@
   @component
 
 
-  @param {object} [row={}] - Row property, Default: `{}`
-  @param {boolean} [rowActive=false] - RowActive property, Default: `false`
-  @param {boolean} [clickableRows=false] - ClickableRows property, Default: `false`
-  @param {function} [isVisible()] - IsVisible function
-  @param {function} [transforms()] - Transforms function
-  @param {function} [classNames()] - ClassNames function
-  @param {function} [styles()] - Styles function
-  @param {array} [column_keys=[]] - Column_keys property, Default: `[]`
+  @param {object} [row={}] - List of all values in a row, Default: `{}`
+  @param {boolean} [rowActive=false] - Determines whether the row is selected or not, Default: `false`
+  @param {boolean} [clickableRows=false] - Determines whether the row is clickable or not, Default: `false`
+  @param {function} [isVisible()] - Returns whether a column can be visible or not
+  @param {function} [transforms()] - Returns column custom value
+  @param {function} [classNames()] - Returns column custom CSS class
+  @param {function} [styles()] - Returns column custom CSS styles
+  @param {array} [column_keys=[]] - Contains all the column key names, Default: `[]`
 
   ### Events
-  - `rowClick`
+  - `rowClick` - Fires an event when a row is clicked
 
 -->
 <div
@@ -33,18 +33,45 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * List of all values in a row
+   */
   export let row = {},
+    /**
+     * Determines whether the row is selected or not
+     */
     rowActive = false,
+    /**
+     * Determines whether the row is clickable or not
+     */
     clickableRows = false,
+    /**
+     * Returns whether a column can be visible or not
+     */
     isVisible = function () {},
+    /**
+     * Returns column custom value
+     */
     transforms = function () {},
+    /**
+     * Returns column custom CSS class
+     */
     classNames = function () {},
+    /**
+     * Returns column custom CSS styles
+     */
     styles = function () {},
+    /**
+     * Contains all the column key names
+     */
     column_keys = [];
 
   function rowClick() {
     if (clickableRows) {
       rowActive = true;
+      /**
+       * Fires an event when a row is clicked
+       */
       fire("rowClick", { row });
     }
   }

package/forms/Datepicker.svelte

@@ -14,10 +14,10 @@ This property can be bound to, to fetch the selected date or date range. Output
   @param {'primary'|'warning'|'info'|'danger'|'dark'|'light'} [calendar_color="primary"] - Colour of the Calendar, Default: `"primary"`
   @param {any} [min_date=null] - Set earliest selectable date as an object or string
 
-**Example:** `'2021-06-06'` or `{(new Date('2021-01-01'))}`, Default: `null`
+**Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`, Default: `null`
   @param {any} [max_date=null] - Set latest selectable date as an object or string
 
-**Example:** `'2021-06-06'` or `{(new Date('2021-01-01'))}`, Default: `null`
+**Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`, Default: `null`
   @param {array} [enable_dates=[]] - Enables a range of dates and disables all others, Default: `[]`
   @param {array} [disable_dates=[]] - Disables a range of dates and enables all others, Default: `[]`
   @param {boolean} [range_mode=false] - Allows selecting a date range, Default: `false`
@@ -93,14 +93,14 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   /**
    * Set earliest selectable date as an object or string
    *
-   * **Example:** `'2021-06-06'` or `{(new Date('2021-01-01'))}`
+   * **Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`
    * @type {any}
    */
   export let min_date = null;
   /**
    * Set latest selectable date as an object or string
    *
-   * **Example:** `'2021-06-06'` or `{(new Date('2021-01-01'))}`
+   * **Example:** `"2021-06-06"` or `"(new Date('2021-01-01'))"`
    * @type {any}
    */
   export let max_date = null;