@kws3/ui 1.9.1 → 2.0.0

package/internal/fuzzy.js

@@ -0,0 +1,116 @@
+/**
+ * fuzzy.js v0.1.0
+ * (c) 2016 Ben Ripkens
+ * @license: MIT
+ * @params
+ *  term : haystack
+ *  query : needle
+ *  opts: {
+ *   analyzeSubTerms,
+ *   analyzeSubTermDepth
+ *   highlighting
+ *  }
+ */
+/**
+ *
+ * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
+ */
+
+/*
+ * Whether or not fuzzy.js should analyze sub-terms, i.e. also
+ * check term starting positions != 0.
+ *
+ * Example:
+ * Given the term 'Halleluja' and query 'luja'
+ *
+ * Fuzzy.js scores this combination with an 8, when analyzeSubTerms is
+ * set to false, as the following matching string will be calculated:
+ * Ha[l]lel[uja]
+ *
+ * If you activate sub temr analysis though, the query will reach a score
+ * of 10, as the matching string looks as following:
+ * Halle[luja]
+ *
+ * Naturally, the second version is more expensive than the first one.
+ * You should therefore configure how many sub terms you which to analyse.
+ * This can be configured through opts.analyzeSubTermDepth = 10.
+ */
+
+export function fuzzy(term, query, opts = {}) {
+  let analyzeSubTerms = opts.analyzeSubTerms ? opts.analyzeSubTerms : false;
+  let analyzeSubTermDepth = opts.analyzeSubTermDepth
+    ? opts.analyzeSubTermDepth
+    : 10;
+  let highlighting = opts.highlighting
+    ? opts.highlighting
+    : {
+        before: "<em>",
+        after: "</em>",
+      };
+
+  let max = calcFuzzyScore(term, query, highlighting);
+  let termLength = term.length;
+
+  if (analyzeSubTerms) {
+    for (let i = 1; i < termLength && i < analyzeSubTermDepth; i++) {
+      let subTerm = term.substring(i);
+      let score = calcFuzzyScore(subTerm, query, highlighting);
+      if (score.score > max.score) {
+        // we need to correct 'term' and 'matchedTerm', as calcFuzzyScore
+        // does not now that it operates on a substring. Doing it only for
+        // new maximum score to save some performance.
+        score.term = term;
+        score.highlightedTerm = term.substring(0, i) + score.highlightedTerm;
+        max = score;
+      }
+    }
+  }
+
+  return max;
+}
+
+function calcFuzzyScore(term, query, highlighting) {
+  let score = 0;
+  let termLength = term.length;
+  let queryLength = query.length;
+  let _highlighting = "";
+  let ti = 0;
+  // -1 would not work as this would break the calculations of bonus
+  // points for subsequent character matches. Something like
+  // Number.MIN_VALUE would be more appropriate, but unfortunately
+  // Number.MIN_VALUE + 1 equals 1...
+  let previousMatchingCharacter = -2;
+
+  for (let qi = 0; qi < queryLength && ti < termLength; qi++) {
+    let qc = query.charAt(qi);
+    let lowerQc = qc.toLowerCase();
+
+    for (; ti < termLength; ti++) {
+      let tc = term.charAt(ti);
+
+      if (lowerQc === tc.toLowerCase()) {
+        score++;
+
+        if (previousMatchingCharacter + 1 === ti) {
+          score += 2;
+        }
+
+        _highlighting += highlighting.before + tc + highlighting.after;
+        previousMatchingCharacter = ti;
+        ti++;
+        break;
+      } else {
+        _highlighting += tc;
+      }
+    }
+  }
+
+  _highlighting += term.substring(ti, term.length);
+
+  return {
+    score: score,
+    term: term,
+    query: query,
+    highlightedTerm: _highlighting,
+  };
+}

package/internal/index.js

@@ -0,0 +1,27 @@
+export { scrollIntoActiveElement } from "./scrollIntoActiveElement";
+export { fuzzy } from "./fuzzy.js";
+
+/**
+ * Detect whether a user has pressed Enter.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEnterKey(e) {
+  return e.keyCode && e.keyCode === 13;
+}
+
+/**
+ * Detect whether a user has pressed Escape key.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEscKey(e) {
+  return e.keyCode && e.keyCode === 27;
+}
+
+export const IS_MAC =
+  "navigator" in window
+    ? /mac/i.test(
+        window.navigator.userAgentData
+          ? window.navigator.userAgentData.platform
+          : window.navigator.platform
+      )
+    : false;

package/internal/scrollIntoActiveElement.js

@@ -0,0 +1,22 @@
+export function scrollIntoActiveElement(listElement, activeElelement) {
+  if (listElement && activeElelement) {
+    const dropdownRect = listElement.getBoundingClientRect();
+    const activeElemRect = activeElelement.getBoundingClientRect();
+    const overScroll = activeElelement.offsetHeight / 3;
+
+    if (activeElemRect.bottom + overScroll > dropdownRect.bottom) {
+      listElement.scrollTop = Math.min(
+        activeElelement.offsetTop +
+          activeElelement.clientHeight -
+          listElement.offsetHeight +
+          overScroll,
+        listElement.scrollHeight
+      );
+    } else if (activeElemRect.top - overScroll < dropdownRect.top) {
+      listElement.scrollTop = Math.max(
+        activeElelement.offsetTop - overScroll,
+        0
+      );
+    }
+  }
+}

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.1",
+  "version": "2.0.0",
   "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,18 +18,19 @@
   "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",
-    "fuzzy.js": "^0.1.0",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "cc856b925257a0978959fa01b32b7bea6dc52c5c"
+  "gitHead": "9606d798a4c6d550863290f2c0b6baac3a61a09e"
 }

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/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";