@kws3/ui 4.4.0-alpha.0 → 4.4.0-alpha.2

package/CHANGELOG.mdx

@@ -1,3 +1,16 @@
+## 4.3.5
+  - Fix Radio component value type
+
+## 4.3.4
+  - Make granular types of form maker generic
+
+## 4.3.3
+  - More granular types for form maker
+
+## 4.3.2
+  - Extended typings for form helper
+  - Fix typings for ButtonEvent
+
 ## 4.3.1
   - Include bulma 0.9 as peer dependency
   - Include svelte 4 as peer dependency

package/controls/Radio.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {object} [value=null] - Value of radio button, Default: `null`
+  @param {any} [value=null] - Value of radio button, Default: `null`
   @param {string} [style=""] - Inline CSS for the Radio button, Default: `""`
   @param {string} [label_style=""] - Inline CSS for Radio label, Default: `""`
   @param {SizeOptions} [size=] - Size of the Radio Button, Default: ``
@@ -46,6 +46,7 @@ See: https://svelte.dev/docs#bind_group, Default: `null`
    */
   /**
    * Value of radio button
+   * @type {any}
    */
   export let value = null,
     /**

package/form/index.d.ts

@@ -1,16 +1,19 @@
-/// <reference types="svelte" />
-export function makeForms(items: any): any[] | {
-    formData: import("svelte/store").Writable<any>;
-    errors: import("svelte/store").Readable<any>;
-    touched: import("svelte/store").Readable<any>;
-    isValid: import("svelte/store").Readable<boolean>;
-    isTouched: import("svelte/store").Readable<any>;
-    tracker: import("svelte/store").Writable<any>;
-    update: (newData: any) => void;
-    reset: (e: any) => void;
-    setValidators: (newValidators: any) => void;
-};
-export function notEmpty(v: any): boolean;
-export function noDigits(v: any): boolean;
-export function withMsg(msg: any, fn: any): (v: any, otherFields: any) => any;
+/** @type {import("@kws3/ui/types").MakeForms} */
+export const makeForms: typeof import("@kws3/ui/types").MakeForms;
+/**
+ * @param {string} v
+ * @returns
+ */
+export function noDigits(v: string): boolean;
+/**
+ * @param {string} v
+ * @returns
+ */
+export function notEmpty(v: string): boolean;
+/**
+ * @param {string} msg
+ * @param {function} fn
+ * @returns
+ */
+export function withMsg(msg: string, fn: Function): (v: any, otherFields: object) => string;
 //# sourceMappingURL=index.d.ts.map

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";AAGA;;;;;;;;;;EAWC;AA2ID,0CAA4C;AAE5C,0CAAqC;AAErC,8EAA8E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAGA,iDAAiD;AAEjD,kEAME;AAmKF;;;GAGG;AACH,4BAHW,MAAM,WAGoB;AAVrC;;;GAGG;AACH,4BAHW,MAAM,WAG2B;AAQ5C;;;;GAIG;AACH,6BAJW,MAAM,qBAKU,GAAG,eAAmB,MAAM,YACtB"}

package/form/index.js

@@ -1,19 +1,20 @@
-import { cloneObject } from "../utils/index";
+import { cloneObject } from "@kws3/ui/utils";
 import { derived, get, writable } from "svelte/store";
 
+/** @type {import("@kws3/ui/types").MakeForms} */
+// @ts-ignore
 const makeForms = (items) => {
-  var res = Array.isArray(items);
-  if (!res) {
+  if (Array.isArray(items)) {
+    return items.map((item) => formMaker(item));
+  } else {
     return formMaker(items);
   }
-
-  let ret = [];
-  if (items.length) {
-    items.forEach((item) => ret.push(formMaker(item)));
-  }
-  return ret;
 };
 
+/**
+ * @param {import("@kws3/ui/types").FormMakerConfig} config
+ * @returns
+ */
 const formMaker = (config) => {
   let data = config.data || {};
   let validators = config.validators || {};
@@ -32,6 +33,12 @@ const formMaker = (config) => {
     let fields = Object.keys($formData);
     let res = fields.reduce((o, v) => ((o[v] = false), o), {});
 
+    /**
+     * @param {string} field
+     * @param {{ [x: string]: any }} oldData
+     * @param {{ [x: string]: any }} newData
+     * @returns
+     */
     let compare = (field, oldData, newData) => {
       if (Array.isArray(newData[field])) {
         if (
@@ -81,6 +88,11 @@ const formMaker = (config) => {
   const errors = derived(formData, ($formData, set) => {
     let fields = Object.keys(validators) || [];
     let res = fields.reduce((o, v) => ((o[v] = ""), o), {});
+    /**
+     * @param {string} field
+     * @param {function | function[]} validator
+     * @returns
+     */
     let validate = (field, validator) => {
       let message = "";
       if (validator || typeof validator !== "undefined") {
@@ -122,17 +134,20 @@ const formMaker = (config) => {
     Object.values($errors).every((v) => v === "")
   );
 
+  /** @param {{ [key: string]: any }} newData */
   function update(newData) {
     data = newData;
     reset();
   }
 
+  /** @param {import("@kws3/ui/types").FormMakerConfig["validators"]} newValidators */
   function setValidators(newValidators) {
     validators = newValidators;
     formData.set(get(formData));
   }
 
-  function reset(e) {
+  /** @param {Event | null} e */
+  function reset(e = null) {
     e && e.preventDefault();
     formData.set(cloneObject(data));
     tracker.set(cloneObject(tracker_data));
@@ -151,10 +166,25 @@ const formMaker = (config) => {
   };
 };
 
+/**
+ * @param {string} v
+ * @returns
+ */
 const notEmpty = (v) => v && v.trim() !== "";
 
+/**
+ * @param {string} v
+ * @returns
+ */
 const noDigits = (v) => !/\d/.test(v);
 
-const withMsg = (msg, fn) => (v, otherFields) => fn(v, otherFields) ? "" : msg;
+/**
+ * @param {string} msg
+ * @param {function} fn
+ * @returns
+ */
+const withMsg =
+  (msg, fn) => (/** @type {any} */ v, /** @type {object} */ otherFields) =>
+    fn(v, otherFields) ? "" : msg;
 
-export { makeForms, notEmpty, noDigits, withMsg };
+export { makeForms, noDigits, notEmpty, withMsg };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.4.0-alpha.0",
+  "version": "4.4.0-alpha.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -39,5 +39,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "e3c45d2a5ae11ab2c88777a26d3cf80a78f09689"
+  "gitHead": "67ef949462d49fde55b07a24d2a484f9840771dd"
 }

package/styles/DataSort.scss

@@ -3,22 +3,36 @@
 @use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/mixins" as mx;
 
+$border-radius: cv.getVar("radius-medium") !default;
+$background: cv.getVar("border") !default;
+$label-background: hsla(
+  cv.getVar("scheme-h"),
+  cv.getVar("scheme-s"),
+  90%,
+  1
+) !default;
+$dropdown-text-color: cv.getVar("primary") !default;
+$dropdown-marker-color: cv.getVar("primary") !default;
+
 .sorting-filters {
   font-weight: bold;
   margin-top: -1.55rem;
   margin-bottom: 1.5rem;
+  .field {
+    gap: 0;
+  }
   .control {
-    background: cv.getVar("border");
+    background: $background;
     margin: 0 !important;
     padding: 0.2rem 0;
     &:first-child {
       padding-left: calc(0.625rem - 1px);
-      border-radius: 0 0 0 #{cv.getVar("radius-medium")};
-      background: darken(dv.$border, 5%);
+      border-radius: 0 0 0 $border-radius;
+      background: $label-background;
       padding-right: calc(0.625rem - 1px);
     }
     &:last-child {
-      border-radius: 0 0 #{cv.getVar("radius-medium")} 0;
+      border-radius: 0 0 $border-radius 0;
     }
   }
   .select {
@@ -28,7 +42,7 @@
       padding-bottom: 0.2rem;
       border: none;
       background: transparent;
-      color: #{cv.getVar("primary")};
+      color: $dropdown-text-color;
       height: auto;
       font-weight: bold;
       &:focus,
@@ -41,7 +55,7 @@
       }
     }
     &::after {
-      border-color: #{cv.getVar("primary")};
+      border-color: $dropdown-marker-color;
     }
   }
 }
@@ -54,14 +68,10 @@
     }
     .control {
       &:first-child {
-        border-radius: #{cv.getVar("radius-large")} 0 0 #{cv.getVar(
-            "radius-large"
-          )};
+        border-radius: $border-radius 0 0 $border-radius;
       }
       &:last-child {
-        border-radius: 0 #{cv.getVar("radius-large")} #{cv.getVar(
-            "radius-large"
-          )} 0;
+        border-radius: 0 $border-radius $border-radius 0;
         flex-grow: 1;
         flex-shrink: 1;
         .select {

package/styles/Datepicker.scss

@@ -2,19 +2,18 @@
 @use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/functions" as fn;
 
-$text: dv.$text !default;
 $kws-theme-colors: dv.$colors !default;
 $kws-datepicker-background: #{cv.getVar("scheme-main-ter")} !default;
-$kws-datepicker-text: $text !default;
+$kws-datepicker-text: dv.$text !default;
 $kws-datepicker-shadow:
   0 2px 5px rgba(0, 0, 0, 0.3),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
 $kws-datepicker-radius: 0px !default;
 
 .flatpickr-calendar {
-  $inRangeBg: lighten($kws-datepicker-text, 55);
+  $inRangeBg: fn.bulmaLighten($kws-datepicker-text, 55);
   @if (fn.bulmaColorLuminance($kws-datepicker-text) > 0.55) {
-    $inRangeBg: darken($kws-datepicker-text, 55);
+    $inRangeBg: fn.bulmaDarken($kws-datepicker-text, 55);
   }
 
   box-shadow: $kws-datepicker-shadow;

package/styles/Grid.scss

@@ -73,13 +73,6 @@ $kws-gridView-cell-border-color: #{cv.getVar("table-cell-border-color")} !defaul
     }
   }
 
-  tr.is-selected {
-    td {
-      color: currentColor !important;
-      //border-color: $kws-gridView-cell-border-color !important;
-    }
-  }
-
   tr.is-checked {
     background-color: $kws-gridview-checked-row-background !important;
     td {

package/styles/Panel.scss

@@ -1,6 +1,6 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 
-$kws-panel-heading-background: #{cv.getVar("scheme-main-ter")} !default;
+$kws-panel-heading-background: #{cv.getVar("scheme-main-bis")} !default;
 $kws-panel-background: #{cv.getVar("scheme-main")} !default;
 $kws-panel-box-shadow: #{cv.getVar("panel-shadow")} !default;
 $kws-panel-title-color: #{cv.getVar("scheme-invert-bis")} !default;

package/styles/Skeleton.scss

@@ -4,8 +4,8 @@
 
 $kws-theme-colors: dv.$colors !default;
 $text: dv.$text !default;
-$kws-skeleton-color: lighten($text, 60%) !default;
-$kws-skeleton-hilight-color: lighten($text, 65%) !default;
+$kws-skeleton-color: fn.bulmaLighten(dv.$text, 60%) !default;
+$kws-skeleton-hilight-color: fn.bulmaLighten(dv.$text, 65%) !default;
 
 .kws-skeleton {
   width: 100%;

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { Readable, Writable } from "svelte/store";
 import type {
   Colors,
   BGColors,
@@ -130,6 +131,51 @@ export type ButtonTracker = {
   error: boolean;
 };
 
+export type FormMakerValidators = { [key: string]: Function | Function[] };
+
+export type FormMakerReturnFormData<T> = import("svelte/store").Writable<T>;
+
+export type FormMakerReturnErrors<T> = import("svelte/store").Readable<{
+  [K in keyof T]: string;
+}>;
+
+export type FormMakerReturnTouched<T> = import("svelte/store").Readable<{
+  [K in keyof T]: boolean;
+}>;
+
+export type FormMakerReturnIsValid = import("svelte/store").Readable<boolean>;
+export type FormMakerReturnIsTouched = import("svelte/store").Readable<boolean>;
+export type FormMakerReturnTracker =
+  import("svelte/store").Writable<ButtonTracker>;
+
+export type FormMakerConfig<T = Record<string, any>> = {
+  data: T;
+  validators?: FormMakerValidators;
+  strictMode?: boolean;
+};
+
+export type FormMakerReturn<T> = {
+  formData: FormMakerReturnFormData<T>;
+  errors: FormMakerReturnErrors<T>;
+  touched: FormMakerReturnTouched<T>;
+  isValid: FormMakerReturnIsValid;
+  isTouched: FormMakerReturnIsTouched;
+  tracker: FormMakerReturnTracker;
+  update: (newData: { [key: string]: any }) => void;
+  reset: (e?: Event | null) => void;
+  setValidators: (newValidators: FormMakerValidators) => void;
+};
+
+export type CloneObject = <T>(obj: T) => T;
+
+// Overloads
+export declare function MakeForms<T extends Record<string, any>>(
+  items: FormMakerConfig<T>,
+): FormMakerReturn<T>;
+export declare function MakeForms<T extends Record<string, any>>(
+  items: FormMakerConfig<T>[],
+): FormMakerReturn<T>[];
+
 declare global {
   interface Navigator {
     readonly userAgentData: {

package/utils/index.d.ts

@@ -9,11 +9,7 @@ export function truncate(str?: string, len?: number): 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;
+export function cloneObject<T>(obj: T): T;
 /**
  * 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

package/utils/index.d.ts.map

@@ -1 +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;AAED;;;;;;GAMG;AACH,6BALW,MAAM,cACN,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,GACd,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,yCAJW,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,YAU1B;AArKD;;;GAGG;AACH,sBAce"}
+{"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;AAoIe,0CAAiB;AArGjC;;;;;;;;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;AAED;;;;;;GAMG;AACH,6BALW,MAAM,cACN,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,GACd,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,yCAJW,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,YAU1B;AArKD;;;GAGG;AACH,sBAce"}

package/utils/index.js

@@ -21,6 +21,7 @@ export function nl2br(input = "") {
 
 /**
  * Clone an Object.
+ * @type {import("@kws3/ui/types").CloneObject}
  * @param {object} [obj={}] - Object to be cloned, Default: `{}`
  */
 export function cloneObject(obj) {