@kws3/ui 4.3.1 → 4.3.3

package/CHANGELOG.mdx

@@ -1,3 +1,10 @@
+## 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/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.3.1",
+  "version": "4.3.3",
   "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": "e21174fbfbe5370abdfcf4862b3978cffc35659f"
+  "gitHead": "c243fb9e0463b160c24f39ad4a2a1bf9cf48a4ce"
 }

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { Readable, Writable } from "svelte/store";
 import type {
   Colors,
   BGColors,
@@ -110,10 +111,12 @@ export type DrawingPadEvents = {
 };
 
 export type ButtonEvent = {
-  doing: () => void;
-  done: (callback?: Function, timeout?: number) => void;
-  error: (callback?: Function, timeout?: number) => void;
-  context: any;
+  detail: {
+    doing: () => void;
+    done: (callback?: Function, timeout?: number) => void;
+    error: (callback?: Function, timeout?: number) => void;
+    context?: any;
+  };
 };
 
 export type SubmitButtonEvent = {
@@ -128,6 +131,51 @@ export type ButtonTracker = {
   error: boolean;
 };
 
+export type FormMakerValidators = { [key: string]: Function | Function[] };
+
+export type FormMakerReturnFormData = import("svelte/store").Writable<T>;
+
+export type FormMakerReturnErrors = import("svelte/store").Readable<{
+  [K in keyof T]: string;
+}>;
+
+export type FormMakerReturnTouched = 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;
+  errors: FormMakerReturnErrors;
+  touched: FormMakerReturnTouched;
+  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: {