@kws3/ui 1.9.2 → 2.0.1

package/keyboard/index.js

@@ -0,0 +1,94 @@
+import { IS_MAC } from "../internal";
+const ctrlKeys = {
+  ctrl: "ctrlKey",
+  meta: "metaKey",
+  shift: "shiftKey",
+  alt: "altKey",
+};
+
+/**
+ * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
+ * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
+ * @returns {function} .
+ */
+
+export function makeKeyDefinition(definition, CommandKey = false) {
+  let def = definition;
+  let keys = [];
+
+  if (typeof def === "number") {
+    keys = [def];
+  }
+
+  if (typeof def === "string") {
+    if (CommandKey) {
+      if (IS_MAC) {
+        def = def.replace("ctrl", "meta");
+      }
+    }
+    keys = def.split("+");
+  }
+
+  return function (node, fire) {
+    function keydownHandler(event) {
+      event.preventDefault();
+      let firedCount = 0;
+      let which = event.which || event.keyCode;
+      keys.forEach((key) => {
+        if (event[ctrlKeys[key]]) {
+          firedCount++;
+        }
+        if (
+          key === event.key ||
+          ("key" + key).toLowerCase() === event.code.toLowerCase()
+        ) {
+          firedCount++;
+        }
+        if (key === which) {
+          firedCount++;
+        }
+      });
+
+      let valid = false;
+      if (keys.length === firedCount) {
+        valid = true;
+      }
+
+      if (valid) {
+        fire(event);
+      }
+    }
+
+    node.addEventListener("keydown", keydownHandler, false);
+
+    return {
+      destroy() {
+        node.removeEventListener("keydown", keydownHandler, false);
+      },
+    };
+  };
+}
+
+export let enter = makeKeyDefinition("Enter");
+export let tab = makeKeyDefinition("Tab");
+export let escape = makeKeyDefinition("Escape");
+export let space = makeKeyDefinition(" ");
+export let leftarrow = makeKeyDefinition("ArrowLeft");
+export let rightarrow = makeKeyDefinition("ArrowRight");
+export let downarrow = makeKeyDefinition("ArrowDown");
+export let uparrow = makeKeyDefinition("ArrowUp");
+export let backspace = makeKeyDefinition("Backspace");
+export let del = makeKeyDefinition("Delete");
+
+export default {
+  enter,
+  tab,
+  escape,
+  space,
+  leftarrow,
+  rightarrow,
+  downarrow,
+  uparrow,
+  backspace,
+  del,
+};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@kws3/ui",
-  "version": "1.9.2",
+  "version": "2.0.1",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
+  "svelte": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,11 +18,13 @@
   "contributors": [
     "Sharif Ahmed <me.sharifahmed@gmail.com>",
     "Sabir <sabirveli@gmail.com>",
-    "Suneesh S K <suneeshsk3@gmail.com>"
+    "Suneesh S K <suneeshsk3@gmail.com>",
+    "Nikeeta <nikeetaa231@gmail.com>"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "types": "types/index.d.ts",
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
@@ -29,5 +32,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "9e6e5f8d4dbb1e5f0a40e3dade66bdfd5f31fd4d"
+  "gitHead": "d724cb9ab00f7eba724b874aabfef4cf03ef8e35"
 }

package/search/index.js

@@ -0,0 +1,52 @@
+import { fuzzy } from "../internal";
+
+/**
+ * @typedef {import('@kws3/ui/types').SearchOptions} SearchOptions - contains search options and fuzzy lib options
+ * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take unction take params `needle` and `haystack`.
+ */
+
+/**
+ * @param {SearchOptions} opts
+ */
+export function makeSearchEngine(opts) {
+  let search_key = opts.search_key ? opts.search_key : "value";
+  let scoreThreshold = opts.scoreThreshold ? opts.scoreThreshold : 5;
+  let fuzzyOpts = opts.fuzzyOpts ? opts.fuzzyOpts : {};
+
+  /**
+   * @param {string} needle
+   * @param {array} haystack
+   * @returns {array}
+   */
+  return function (needle, haystack) {
+    let OPTS = haystack.map((option) => {
+      let item = { ...option };
+      item.original = { ...option };
+      if (typeof item === "object") {
+        if (!Array.isArray(search_key)) {
+          search_key = [search_key];
+        }
+
+        search_key.forEach((s_key) => {
+          if (`${s_key}` in item) {
+            let output = fuzzy(option[s_key], needle, fuzzyOpts);
+            item.original[s_key] = output.highlightedTerm;
+            item.score =
+              !item.score || (item.score && item.score < output.score)
+                ? output.score
+                : item.score || 0;
+          }
+        });
+      }
+      return item;
+    });
+
+    let maxScore = Math.max(...OPTS.map((i) => i.score));
+    let calculatedLimit = maxScore - scoreThreshold;
+
+    OPTS = OPTS.filter(
+      (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
+    );
+    return OPTS.map((i) => i.original);
+  };
+}

package/settings.js

@@ -40,7 +40,7 @@ export {
  * - `hasTransitions`: `true` - Transitions are applied
  * - `defaultChartColors`: `["#284BED", "#ED6134", "#1DAFEC", "#EDB405", "#11EDB7", "#77ED11"]` - default colors for charts
  *
- * @param {*} object containing all settings
+ * @param {*} obj containing all settings
  */
 export function applySettings(obj) {
   Object.entries(obj).forEach(([k, v]) => {

package/sliding-panes/SlidingPane.svelte

@@ -54,10 +54,7 @@ This will work only when `track_height` is set to `true`
 <script>
   import { onMount, createEventDispatcher } from "svelte";
   import { debounce } from "@kws3/ui/utils";
-  import {
-    resizeObserver,
-    hasResizeObserver,
-  } from "@kws3/ui/utils/resizeObserver";
+  import { resizeObserver, hasResizeObserver } from "@kws3/ui/resizeObserver";
 
   const fire = createEventDispatcher();
 

package/styles/AutoComplete.scss

@@ -14,6 +14,7 @@ $kws-autocomplete-selecting-background: $primary !default;
 $kws-autocomplete-text-matches-color: currentColor !default;
 $kws-autocomplete-text-matches-background: transparent !default;
 $kws-autocomplete-text-matches-font-weight: $weight-bold !default;
+$kws-autocomplete-options-background: $scheme-main-ter !default;
 
 $__modal-z: 41 !default;
 @if $modal-z {
@@ -65,7 +66,7 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !default;
     padding: 0;
     cursor: pointer;
     overflow: auto;
-    background: #fff;
+    background: $kws-autocomplete-options-background;
     border: 1px solid $kws-autocomplete-border-color;
     box-shadow: $kws-autocomplete-box-shadow;
     position: relative;

package/styles/Datepicker.scss

@@ -1,5 +1,5 @@
 $kws-theme-colors: $colors !default;
-$kws-datepicker-background: $background !default;
+$kws-datepicker-background: $scheme-main-ter !default;
 $kws-datepicker-text: $text !default;
 
 .flatpickr-calendar {

package/styles/Grid.scss

@@ -13,6 +13,9 @@ $kws-gridview-checked-row-background: $primary-light !default;
     color: $kws-gridview-th-color;
     vertical-align: middle;
   }
+  td {
+    vertical-align: middle;
+  }
   &.is-bordered {
     tr {
       th:last-child,
@@ -54,4 +57,15 @@ $kws-gridview-checked-row-background: $primary-light !default;
       color: findColorInvert($kws-gridview-checked-row-background) !important;
     }
   }
+
+  &.is-narrow {
+    th {
+      font-size: 0.9rem;
+      line-height: 1.2;
+    }
+    td,
+    th {
+      padding: 0.25rem 0.4rem;
+    }
+  }
 }

package/styles/Pagination.scss

@@ -1,12 +1,12 @@
 $kws-pagination-item-color: $text !default;
-$kws-pagination-item-background: #fff !default;
+$kws-pagination-item-background: $scheme-main !default;
 $kws-pagination-item-border: 1px solid $border !default;
 $kws-pagination-item-hover-color: $kws-pagination-item-color !default;
 $kws-pagination-item-hover-border: $kws-pagination-item-border !default;
-$kws-pagination-item-disabled-background: $white-ter !default;
+$kws-pagination-item-disabled-background: $scheme-main-ter !default;
 $kws-pagination-item-disabled-color: $grey !default;
-$kws-pagination-item-ellipsis-background: $white-bis !default;
-$kws-pagination-item-ellipsis-border-color: $grey-lighter !default;
+$kws-pagination-item-ellipsis-background: $scheme-main-ter !default;
+$kws-pagination-item-ellipsis-border-color: $scheme-main-ter !default;
 $kws-pagination-item-active-background: $success !default;
 $kws-pagination-item-active-color: findColorInvert(
   $kws-pagination-item-active-background
@@ -14,7 +14,10 @@ $kws-pagination-item-active-color: findColorInvert(
 
 $kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
-$kws-pagination-frame-background: linear-gradient(#fff, #fafafa) !default;
+$kws-pagination-frame-background: linear-gradient(
+  $scheme-main,
+  $scheme-main-ter
+) !default;
 
 .pagination {
   &.is-small {

package/styles/Select.scss

@@ -10,6 +10,7 @@ $kws-select-selecting-color: $primary-invert !default;
 $kws-select-selecting-background: $primary !default;
 $kws-select-selected-color: $primary-dark !default;
 $kws-select-selected-background: $primary-light !default;
+$kws-select-options-background: $scheme-main-ter !default;
 
 $__modal-z: 41 !default;
 @if $modal-z {
@@ -96,7 +97,7 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
     cursor: pointer;
     border-radius: 0 0 $kws-select-radius $kws-select-radius;
     overflow: auto;
-    background: #fff;
+    background: $kws-select-options-background;
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4);
     position: relative;
     z-index: 4;

package/transitions/components/Scale.svelte

@@ -17,6 +17,7 @@
   class="transible {klass}"
   style="transform:translate3d(0,0,0)"
   in:scale={{
+    // @ts-ignore
     from: from || 0.5,
     to: to || 1,
     duration: duration || 300,

package/transitions/components/getEasing.js

@@ -1,9 +1,22 @@
-import { sineOut, elasticOut, expoOut, cubicOut, circOut, bounceOut, backOut } from 'svelte/easing';
+import {
+  sineOut,
+  elasticOut,
+  expoOut,
+  cubicOut,
+  circOut,
+  bounceOut,
+  backOut,
+} from "svelte/easing";
 
 export default function getEasing(easing) {
   let eases = {
-    sineOut, elasticOut, expoOut,
-    cubicOut, circOut, bounceOut, backOut
+    sineOut,
+    elasticOut,
+    expoOut,
+    cubicOut,
+    circOut,
+    bounceOut,
+    backOut,
   };
-  return easing ? (eases[easing] || sineOut) : sineOut;
-}
+  return easing ? eases[easing] || sineOut : sineOut;
+}

package/types/ambient.d.ts

@@ -0,0 +1,16 @@
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {
+    onshowing?: (event: any) => any;
+    onshown?: (event: any) => any;
+    onhiding?: (event: any) => any;
+    onhidden?: (event: any) => any;
+    ontriggered?: (event: any) => any;
+    onclose?: (event: any) => any;
+    ontimeChange?: (event: any) => any;
+    onready?: (event: any) => any;
+    onopen?: (event: any) => any;
+    ondateChange?: (event: any) => any;
+    onmonthChange?: (event: any) => any;
+    onyearChange?: (event: any) => any;
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,46 @@
+import { Colors, BGColors, SpinnerColors, Sizes } from "./type-defs.ts";
+export type SearchOptions = {
+  search_key: Array<string> | string;
+  scoreThreshold: number;
+  fuzzyOpts: {
+    analyzeSubTerms: boolean;
+    analyzeSubTermDepth: number;
+    highlighting: {
+      after: string;
+      before: string;
+    };
+  };
+};
+
+export type SearchHelper = (needle: string, haystack: array) => array;
+
+export type ValidatePasswordOptions = {
+  name: string;
+  text: string;
+  identifier: string;
+  regex: RegExp;
+  passed: boolean;
+  active: boolean;
+  value?: string;
+  negate?: boolean;
+};
+
+declare global {
+  interface Navigator {
+    readonly userAgentData: {
+      platform: string;
+    };
+    readonly platform: string;
+  }
+  interface Window {
+    ApexCharts: Object;
+    readonly navigator: Navigator;
+  }
+}
+
+export type Options<T> = T;
+
+export type ColorOptions = Options<Colors>;
+export type SizeOptions = Options<Sizes>;
+export type SpinnerColorOptions = Options<Colors | SpinnerColors>;
+export type BGColorOptions = Options<Colors | BGColors>;

package/types/type-defs/index.ts

@@ -0,0 +1,14 @@
+export type Colors =
+  | ""
+  | "primary"
+  | "success"
+  | "warning"
+  | "info"
+  | "danger"
+  | "dark"
+  | "light";
+
+export type BGColors = "" | "transparent" | "link";
+export type SpinnerColors = "" | "grey";
+
+export type Sizes = "" | "small" | "medium" | "large";

package/utils/index.js

@@ -1,32 +1,64 @@
-export function truncate(str, len) {
+/**
+ * Truncate a string.
+ * @param {string} [str=""] - String to truncate, Default: `""`
+ * @param {number} [len=0] - The number of characters to extract, Default: `""`
+ */
+export function truncate(str = "", len = 0) {
   return str && str.length >= len + 3 ? str.substr(0, len) + "..." : str;
 }
 
-export function nl2br(input) {
+/**
+ * Insert line breaks where newlines (\n) occur in the string.
+ * @param {string} [input=""] - String to be checked, Default: `""`
+ */
+export function nl2br(input = "") {
   if (!input) {
     return "";
   }
-  return (input + "").replace(/\n/g, "<br>");
+  let html = (input + ``).replace(/\n/g, "<br/>");
+  return html;
 }
 
+/**
+ * Clone an Object.
+ * @param {object} [obj={}] - Object to be cloned, Default: `{}`
+ */
 export function cloneObject(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
+/**
+ * Request an animation before the next repaint.
+ * @param {function} [callback=function(){}] - callback function
+ */
 export var rAF =
   window.requestAnimationFrame ||
+  //@ts-ignore
   window.webkitRequestAnimationFrame ||
+  //@ts-ignore
   window.mozRequestAnimationFrame ||
+  //@ts-ignore
   window.oRequestAnimationFrame ||
+  //@ts-ignore
   window.msRequestAnimationFrame ||
   function (callback) {
     window.setTimeout(callback, 1000 / 60);
   };
 
-export function debounce(fn, threshold, isAsap) {
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * `threshold` milliseconds.
+ * @param {function} [fn=function(){}] - The function that you want to execute after the debounce time
+ * @param {number} [threshold=100] - The amount of time to wait, Default: `100`
+ * @param {boolean} [isAsap=false] - flag to debounce early, Default: `false`
+ *
+ */
+export function debounce(fn = function () {}, threshold, isAsap) {
   var timeout, result;
   function debounced() {
     var args = arguments,
+      //@ts-ignore
       context = this;
     function delayed() {
       if (!isAsap) {
@@ -48,14 +80,83 @@ export function debounce(fn, threshold, isAsap) {
   return debounced;
 }
 
-export function capitaliseFirstLetter(string) {
+/**
+ * Capitalise First letter of string.
+ * @param {string} [string=""] - A string whose first letter is to be capitalised, Default: `""`
+ */
+export function capitaliseFirstLetter(string = "") {
   return string.charAt(0).toUpperCase() + string.toLowerCase().slice(1);
 }
 
-export function isEnterKey(e) {
-  return e.keyCode && e.keyCode === 13;
+/**
+ * Returns Date Object.
+ * Makes mysql dates work in safari
+ * @param {string} [strDate=""] - Date String., Default: `""`
+ */
+export function createDate(strDate) {
+  // eslint-disable-next-line @kws3/svelte3/no-date-string-arg
+  return strDate ? new Date(strDate.replace(/-/g, "/")) : null;
 }
 
-export function isEscKey(e) {
-  return e.keyCode && e.keyCode === 27;
+/**
+ * Returns currency format.
+ * @param {number} [n=''] - Number., Default: `""`
+ */
+export function currency(n) {
+  var nn = Number(n);
+  return (isNaN(nn) ? 0 : nn).toFixed(2);
+}
+
+/**
+ * Converts date to ordinal.
+ * @param {number} [n=''] - Number., Default: `""`
+ */
+export function dateToOrdinal(n) {
+  n = Number(n);
+  return (
+    n +
+    (n > 0
+      ? ["th", "st", "nd", "rd"][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10]
+      : "")
+  );
+}
+
+/**
+ * Returns a random integer between min (inclusive) and max (inclusive).
+ * The value is no lower than min (or the next integer greater than min
+ * if min isn't an integer) and no greater than max (or the next integer
+ * lower than max if max isn't an integer).
+ * @param {number} [min] - Minimum Number.
+ * @param {number} [max] - Maximum Number.
+ */
+export function randomIntegerFromInterval(min = 0, max = Infinity) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * Returns random percentage.
+ * @param {number} [min=1] - Minimum Number, Default: `1`
+ * @param {number} [max=100] - Maximum Number, Default: `100`
+ */
+export function randomPercent(min = 1, max = 100) {
+  return randomIntegerFromInterval(min, max) + "%";
+}
+
+/**
+ * Downloads file.
+ * @param {Object} [data={}] - File data.
+ * @param {string} [fileName=''] - File Name.
+ */
+export function fileDownloader(data, fileName = "file_name") {
+  let a = document.createElement("a");
+  document.body.appendChild(a);
+  a.setAttribute("style", "display: none");
+  let blob = new Blob([data], { type: "octet/stream" }),
+    url = window.URL.createObjectURL(blob);
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  window.URL.revokeObjectURL(url);
 }

package/utils/fuzzysearch.js

@@ -1,42 +0,0 @@
-import fuzzy from "./fuzzy.js";
-
-export function fuzzysearch(needle, haystack, opts) {
-  let search_key = defaultValue(opts, "search_key", "value");
-  let scoreThreshold = defaultValue(opts, "scoreThreshold", 5);
-
-  let OPTS = haystack.map((option) => {
-    let item = { ...option };
-    item.original = { ...option };
-    if (typeof item === "object") {
-      if (!Array.isArray(search_key)) {
-        search_key = [search_key];
-      }
-
-      search_key.forEach((s_key) => {
-        if (`${s_key}` in item) {
-          let output = fuzzy(option[s_key], needle);
-          item.original[s_key] = output.highlightedTerm;
-          item.score =
-            !item.score || (item.score && item.score < output.score)
-              ? output.score
-              : item.score || 0;
-        }
-      });
-    }
-    return item;
-  });
-
-  let maxScore = Math.max(...OPTS.map((i) => i.score));
-  let calculatedLimit = maxScore - scoreThreshold;
-
-  OPTS = OPTS.filter(
-    (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-  );
-  return OPTS.map((i) => i.original);
-}
-
-function defaultValue(opts, key, value) {
-  return opts && opts[key] ? opts[key] : value;
-}
-
-export { fuzzy };

package/utils/keyboard-events.js

@@ -1,32 +0,0 @@
-let events = [
-  {name: 'enter', code: 13},
-  {name: 'tab', code: 9},
-  {name: 'escape', code: 27},
-  {name: 'space', code: 32},
-  {name: 'leftarrow', code: 37},
-  {name: 'rightarrow', code: 39},
-  {name: 'downarrow', code: 40},
-  {name: 'uparrow', code: 38},
-  {name: 'backspace', code: 8},
-  {name: 'del', code: 46},
-];
-
-export function keyboardEvents(node) {
-  function keydownHandler(event) {
-    events.forEach(({name, code}) => {
-      let which = event.which || event.keyCode;
-      if (which === code) {
-        node.dispatchEvent(
-          new CustomEvent(name)
-        );
-      }
-    });
-  }
-  node.addEventListener('keydown', keydownHandler, false);
-
-  return {
-    destroy() {
-      node.removeEventListener('keydown', keydownHandler, false);
-    }
-  };
-}