@kws3/ui 2.0.4 → 2.1.0

package/styles/Canvas.scss

@@ -0,0 +1,100 @@
+:root {
+  --kws-peninput-height: 350px;
+  --kws-peninput-width: 250px;
+  --kws-peninput-border: 1px dotted #ccc;
+  --kws-peninput-controls-height: 2.4rem;
+}
+.kws-canvas-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  height: var(--kws-peninput-height);
+  width: var(--kws-peninput-width);
+  transform: translate3d(0, 0, 0);
+  transition: transform 0.3s $easeOutCustom;
+  transform-origin: center center;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  position: relative;
+  .kws-pen-controls {
+    position: absolute;
+    width: 100%;
+    min-height: var(--kws-peninput-controls-height);
+    background: transparentize($grey-light, 0.5);
+    padding: 0.25rem;
+    margin: 0 auto;
+    .control {
+      .button {
+        &.is-always-rounded {
+          border-radius: 1rem !important;
+          padding-left: 1em;
+          padding-right: 1em;
+        }
+      }
+    }
+    &.is-placement-bottom {
+      top: var(--kws-peninput-height);
+    }
+    &.is-placement-top {
+      top: 0;
+    }
+
+    input[type="color"] {
+      -webkit-appearance: none;
+      border: none;
+      width: 32px;
+      height: 32px;
+      padding: 3px;
+      background-color: $white-ter;
+    }
+    input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    input[type="color"]::-webkit-color-swatch {
+      border: none;
+    }
+    &.expanded {
+      z-index: 999;
+      position: relative;
+      box-shadow: $card-shadow;
+      .kws-pen-controls {
+        background: $grey-lighter;
+      }
+    }
+  }
+
+  .kws-pen-input {
+    position: relative;
+    margin: auto auto;
+    overflow: hidden;
+    img {
+      display: block;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center center;
+      border: 1px dotted #ccc;
+    }
+    canvas {
+      display: block;
+      cursor: crosshair;
+      box-sizing: border-box;
+      background-color: #fdfdfd;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center center;
+      border: 1px solid #000000;
+    }
+    &.is-readonly {
+      canvas {
+        cursor: default;
+      }
+    }
+  }
+
+  &.has-toolbar-top {
+    .kws-pen-input {
+      top: var(--kws-peninput-controls-height);
+    }
+  }
+}

package/styles/RangeSlider.scss

@@ -253,6 +253,18 @@ $kws-slider-output-radius: $radius !default;
             }
           }
         }
+
+        &.is-thumb-#{$name} {
+          &::-webkit-slider-thumb {
+            background: $color !important;
+          }
+          &::-moz-range-thumb {
+            background: $color !important;
+          }
+          &::-ms-thumb {
+            background: $color !important;
+          }
+        }
       }
     }
   }

package/transitions/components/getEasing.d.ts

@@ -0,0 +1,2 @@
+export default function getEasing(easing: any): any;
+//# sourceMappingURL=getEasing.d.ts.map

package/transitions/components/getEasing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEasing.d.ts","sourceRoot":"","sources":["getEasing.js"],"names":[],"mappings":"AAUA,oDAWC"}

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  // Change this to match your project
+  "include": ["./**/*.js", "./**/*.svelte"],
+  "compilerOptions": {
+    "lib": ["es2020", "DOM"],
+    "skipLibCheck": true,
+    "checkJs": true,
+    // Tells TypeScript to read JS files, as
+    // normally they are ignored as source files
+    "allowJs": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    // Types should go into this directory.
+    // Removing this would place the .d.ts files
+    // next to the .js files
+    //"declarationDir": "./generatedTypes",
+    //"outDir": "./generatedTypes",
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "declarationMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@kws3/ui": ["./"],
+      "@kws3/ui/*": ["./*"],
+      "@kws3/ui/types": ["./types"]
+    },
+    "types": ["svelte"]
+  },
+  "exclude": ["node_modules"]
+}

package/types/index.d.ts

@@ -1,4 +1,44 @@
-import { Colors, BGColors, SpinnerColors, Sizes } from "./type-defs.ts";
+import type {
+  Colors,
+  BGColors,
+  ExtendedColors,
+  Sizes,
+  Positions,
+  FontFamilies,
+  FloatiePositions,
+  TippyPositions,
+} from "./type-defs";
+
+export type ColorOptions = (typeof Colors)[number];
+export type SizeOptions = (typeof Sizes)[number];
+export type ExtendedColorOptions = (typeof ExtendedColors)[number];
+export type BGColorOptions = (typeof BGColors)[number];
+export type FontFamilies = (typeof FontFamilies)[number];
+export type Positions = (typeof Positions)[number];
+export type TippyPositions = (typeof TippyPositions)[number];
+export type FloatiePositions = (typeof FloatiePositions)[number];
+
+export type FloatieType = {
+  create: (opts: object) => { props: object; destroy: () => void };
+  remove: (props: object) => void;
+};
+
+export type DialogProps = {
+  title?: string;
+  help_text?: string;
+  size?: SizeOptions;
+  input_value?: string;
+  icon?: string;
+  icon_color?: ColorOptions;
+  icon_size?: SizeOptions;
+  ok_button_text?: string;
+  ok_button_color?: ColorOptions;
+  ok_button_icon?: string;
+  cancel_button_text?: string;
+  cancel_button_color?: ColorOptions;
+  cancel_button_icon?: string;
+};
+
 export type SearchOptions = {
   search_key: Array<string> | string;
   scoreThreshold: number;
@@ -12,7 +52,10 @@ export type SearchOptions = {
   };
 };
 
-export type SearchHelper = (needle: string, haystack: array) => array;
+export type SearchHelper = (
+  needle: string,
+  haystack: Array<string>
+) => Array<any>;
 
 export type ValidatePasswordOptions = {
   name: string;
@@ -25,6 +68,64 @@ export type ValidatePasswordOptions = {
   negate?: boolean;
 };
 
+export type SettingOptions = {
+  defaultIconFamily?: FontFamilies;
+  defaultToastPlacement?: TippyPositions;
+  defaultSnackbarPlacement?: TippyPositions;
+  defaultNotificationPlacement?: TippyPositions;
+  hasTransitions?: boolean;
+  defaultChartColors?: Array<string>;
+};
+
+type DrawingTool = {
+  name: string;
+  icon: string;
+  draw: (pad: DrawingPad) => void;
+};
+
+export type DrawingTools = {
+  [key: string]: DrawingTool;
+};
+
+export type DrawingPadOptions = {
+  initialScale: number;
+  penColor: string;
+  penWidth: number;
+  eraserWidth: number;
+  readonly?: boolean;
+  image?: string;
+  tools: DrawingTools;
+  expanded?: boolean;
+  expand?: number;
+};
+
+export type DrawingPadEvents = {
+  change: {
+    canUndo: boolean;
+    canRedo: boolean;
+    canvasImage: string;
+  };
+};
+
+export type ButtonEvent = {
+  doing: () => void;
+  done: (callback?: Function, timeout?: number) => void;
+  error: (callback?: Function, timeout?: number) => void;
+  context: any;
+};
+
+export type SubmitButtonEvent = {
+  saving: () => void;
+  saved: (callback?: Function, timeout?: number) => void;
+  error: (callback?: Function, timeout?: number) => void;
+};
+
+export type ButtonTracker = {
+  saving: boolean;
+  saved: boolean;
+  error: boolean;
+};
+
 declare global {
   interface Navigator {
     readonly userAgentData: {
@@ -37,10 +138,3 @@ declare global {
     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.d.ts

@@ -0,0 +1,64 @@
+export const Colors = [
+  "",
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "danger",
+  "dark",
+  "light",
+  "link",
+] as const;
+
+export const ExtendedColors = [...Colors, "grey"] as const;
+export const BGColors = [...Colors, "transparent"] as const;
+
+export const Sizes = ["", "small", "medium", "large"] as const;
+
+export const Positions = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "start",
+  "center",
+  "end",
+] as const;
+
+export const FontFamilies = [
+  "",
+  "fa",
+  "lar",
+  "las",
+  "gg",
+  "unicons",
+  "material",
+] as const;
+
+export const FloatiePositions = [
+  "",
+  "top",
+  "bottom",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+] as const;
+
+export const TippyPositions = [
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "auto",
+  "auto-start",
+  "auto-end",
+] as const;

package/utils/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * 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?: string, len?: number): string;
+/**
+ * Insert line breaks where newlines (\n) occur in the string.
+ * @param {string} [input=""] - String to be checked, Default: `""`
+ */
+export function nl2br(input?: string): string;
+/**
+ * Clone an Object.
+ * @param {object} [obj={}] - Object to be cloned, Default: `{}`
+ */
+export function cloneObject(obj?: object): any;
+/**
+ * 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?: number, isAsap?: boolean): {
+    (...args: any[]): any;
+    cancel(): void;
+};
+/**
+ * Capitalise First letter of string.
+ * @param {string} [string=""] - A string whose first letter is to be capitalised, Default: `""`
+ */
+export function capitaliseFirstLetter(string?: string): string;
+/**
+ * Returns Date Object.
+ * Makes mysql dates work in safari
+ * @param {string} [strDate=""] - Date String., Default: `""`
+ */
+export function createDate(strDate?: string): Date;
+/**
+ * Returns currency format.
+ * @param {number} [n=''] - Number., Default: `""`
+ */
+export function currency(n?: number): string;
+/**
+ * Converts date to ordinal.
+ * @param {number} [n=''] - Number., Default: `""`
+ */
+export function dateToOrdinal(n?: number): string;
+/**
+ * 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?: number, max?: number): number;
+/**
+ * Returns random percentage.
+ * @param {number} [min=1] - Minimum Number, Default: `1`
+ * @param {number} [max=100] - Maximum Number, Default: `100`
+ */
+export function randomPercent(min?: number, max?: number): string;
+/**
+ * Downloads file.
+ * @param {Object} [data={}] - File data.
+ * @param {string} [fileName=''] - File Name.
+ */
+export function fileDownloader(data?: any, fileName?: string): void;
+/**
+ * Request an animation before the next repaint.
+ * @param {function} [callback=function(){}] - callback function
+ */
+export const rAF: any;
+//# sourceMappingURL=index.d.ts.map

package/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+BAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;GAGG;AACH,8BAFW,MAAM,UAQhB;AAED;;;GAGG;AACH,kCAFW,MAAM,OAIhB;AAsBD;;;;;;;;GAQG;AACH,oDAJW,MAAM,WACN,OAAO;;;EA2BjB;AAED;;;GAGG;AACH,+CAFW,MAAM,UAIhB;AAED;;;;GAIG;AACH,qCAFW,MAAM,QAKhB;AAED;;;GAGG;AACH,6BAFW,MAAM,UAKhB;AAED;;;GAGG;AACH,kCAFW,MAAM,UAUhB;AAED;;;;;;;GAOG;AACH,gDAHW,MAAM,QACN,MAAM,UAMhB;AAED;;;;GAIG;AACH,oCAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;;GAIG;AACH,sDAFW,MAAM,QAYhB;AAtID;;;GAGG;AACH,sBAce"}

package/types/type-defs/index.ts

@@ -1,14 +0,0 @@
-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";