web-ui-pack - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

baseElement.d.ts

@@ -47,3 +47,3 @@ import { onEventType } from "./helpers/onEvent";
     /** Array of attribute names to listen for changes
-     * @defaultValue every option from $defaults (in lowerCase) */
+     * @defaultValue every option from `observedOptions` OR $defaults (in  `w-${k.toLowerCase()}`) */
     static get observedAttributes(): Array<string>;
@@ -63,3 +63,3 @@ /** Global default options applied to every element. Change it to configure default behavior OR use `element.$options` to change per item */
     set $options(v: Partial<TOptions>);
-    static findAllProtos(t: unknown, protos: typeof WUPBaseElement[]): typeof WUPBaseElement[];
+    static findAllProtos(t: unknown, protos: (typeof WUPBaseElement)[]): (typeof WUPBaseElement)[];
     /** Add common styles */
@@ -84,3 +84,3 @@ static firstInit(): void;
     protected gotRemoved(): void;
-    /** Called on Init and every time as options/attributes changed */
+    /** Called on Init (with propsChanged: null) and every time as options/attributes changed */
     protected gotChanges(propsChanged: Array<string> | null): void;
@@ -100,2 +100,5 @@ /** Called when element isReady and at least one of observedOptions is changed */
     protected gotAttributeChanged(name: string, value: string | null): void;
+    /** Parse attribute & assign to related property
+     * @returns defined propertyName */
+    protected attrToProp(name: string, value: string | null): string;
     /** Browser calls this method when attrs pointed in observedAttributes is changed */
@@ -102,0 +105,0 @@ protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

baseElement.js

@@ -303,2 +303,18 @@ import focusFirst from "./helpers/focusFirst";
     gotAttributeChanged(name, value) {
+        const key = this.attrToProp(name, value);
+        if (this.#isReady) {
+            if (!this.#attrTimer) {
+                this.#attrChanged = [];
+                this.#attrTimer = setTimeout(() => {
+                    this.#attrTimer = undefined;
+                    this._isStopChanges = true;
+                    this.gotChanges(this.#attrChanged);
+                    this._isStopChanges = false;
+                    this.#attrChanged = undefined;
+                });
+            }
+            this.#attrChanged.push(key);
+        }
+    }
+    attrToProp(name, value) {
         if (name.startsWith("w-")) {
@@ -320,15 +336,3 @@ name = name.substring(2);
                 : this.parseAttr(m.type, value, key, name);
-        if (this.#isReady) {
-            if (!this.#attrTimer) {
-                this.#attrChanged = [];
-                this.#attrTimer = setTimeout(() => {
-                    this.#attrTimer = undefined;
-                    this._isStopChanges = true;
-                    this.gotChanges(this.#attrChanged);
-                    this._isStopChanges = false;
-                    this.#attrChanged = undefined;
-                });
-            }
-            this.#attrChanged.push(key);
-        }
+        return key;
     }
@@ -335,0 +339,0 @@ attributeChangedCallback(name, oldValue, newValue) {

circleElement.d.ts

@@ -106,2 +106,4 @@ import WUPBaseElement from "./baseElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -108,0 +110,0 @@ interface IntrinsicElements {

controls/baseControl.js

@@ -516,7 +516,5 @@ import WUPBaseElement from "../baseElement";
             .sort((k1, k2) => {
-            if (k1 === "required")
-                return -1;
-            if (k2 === "required")
-                return 1;
-            return 0;
+            const p1 = k1[0] === "_" ? 1 : k1 === "required" ? 2 : 3;
+            const p2 = k2[0] === "_" ? 1 : k2 === "required" ? 2 : 3;
+            return p1 - p2;
         })
@@ -523,0 +521,0 @@ .map((key) => ({ [key]: (v, reason) => check.call(self, v, key, reason) }[key]));

controls/calendar.d.ts

@@ -101,2 +101,4 @@ import WUPBaseControl, { SetValueReasons } from "./baseControl";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -103,0 +105,0 @@ interface IntrinsicElements {

controls/check.d.ts

@@ -17,2 +17,4 @@ import WUPSwitchControl from "./switch";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -19,0 +21,0 @@ interface IntrinsicElements {

controls/date.d.ts

@@ -57,2 +57,4 @@ import { AttributeMap } from "../baseElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -59,0 +61,0 @@ interface IntrinsicElements {

controls/number.d.ts

@@ -63,2 +63,4 @@ import { SetValueReasons } from "./baseControl";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -65,0 +67,0 @@ interface IntrinsicElements {

controls/password.d.ts

@@ -36,2 +36,4 @@ import WUPTextControl from "./text";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -38,0 +40,0 @@ interface IntrinsicElements {

controls/radio.d.ts

@@ -41,2 +41,4 @@ import WUPBaseControl, { SetValueReasons } from "./baseControl";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -43,0 +45,0 @@ interface IntrinsicElements {

controls/select.d.ts

@@ -83,2 +83,4 @@ import WUPPopupElement from "../popup/popupElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -85,0 +87,0 @@ interface IntrinsicElements {

controls/selectMany.d.ts

@@ -32,2 +32,4 @@ import WUPPopupElement from "../popup/popupElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -34,0 +36,0 @@ interface IntrinsicElements {

controls/switch.d.ts

@@ -25,2 +25,4 @@ import WUPBaseControl, { SetValueReasons } from "./baseControl";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -27,0 +29,0 @@ interface IntrinsicElements {

controls/text.d.ts

@@ -74,2 +74,4 @@ import MaskTextInput from "./text.mask";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -130,3 +132,4 @@ interface IntrinsicElements {
     canParseInput(_text: string): boolean;
-    /** Called to parse input text to value (related to locale or pointed format) */
+    /** Called to parse/prettify input text to value (related to locale or pointed format)
+     * @throws {RangeError} if value out of possible range (for DateControl value.month > 12 for example) */
     parseInput(text: string): ValueType | undefined;
@@ -133,0 +136,0 @@ /** Returns true if need to use custom undo/redo (required when input somehow formatted/masked) */

controls/textarea.d.ts

@@ -17,2 +17,4 @@ import WUPTextControl from "./text";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -19,0 +21,0 @@ interface IntrinsicElements {

controls/time.d.ts

@@ -79,2 +79,4 @@ import { AttributeMap } from "../baseElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -81,0 +83,0 @@ interface IntrinsicElements {

dropdownElement.d.ts

@@ -50,2 +50,4 @@ import WUPBaseElement from "./baseElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -52,0 +54,0 @@ interface IntrinsicElements {

formElement.d.ts

@@ -54,3 +54,3 @@ import WUPBaseElement, { AttributeMap } from "./baseElement";
             submitActions: SubmitActions;
-            /** Enable to tore data in localStorage to prevent losing till submitted;
+            /** Enable to store data in localStorage to prevent losing till submitted;
              * @defaultValue false
@@ -97,2 +97,4 @@ * @tutorial Troubleshooting
     }
+}
+declare module "react" {
     namespace JSX {
@@ -99,0 +101,0 @@ interface IntrinsicElements {

helpers/string.d.ts

 /** Returns if string has not-word symbol at pointed char position */
 export declare function isSpecialSymbol(s: string, i: number): boolean;
-/**
- * Returns count of chars in lower case (for any language with ignoring numbers, symbols)
+/** Returns count of chars in lower case (for any language with ignoring numbers, symbols)
  * @param s
- * @param stopWith point to calc up to this value (for performance reason)
- */
+ * @param stopWith point to calc up to this value (for performance reason) */
 export declare function stringLowerCount(s: string, stopWith?: number): number;
-/**
- * Returns count of chars in upper case (for any language with ignoring numbers)
+/** Returns count of chars in upper case (for any language with ignoring numbers)
  * @param s
- * @param stopWith point to calc up to this value (for performance reason)
- */
+ * @param stopWith point to calc up to this value (for performance reason) */
 export declare function stringUpperCount(s: string, stopWith?: number): number;
 /**
- * Changes camelCase 'somePropValue' to 'Some Prop Value'
+ ** Changes camelCase 'somePropValue' to 'Some Prop Value'
+ ** Changes snake_case 'some_prop_value' to 'Some Prop Value'
+ ** Changes kebab-case 'some-prop-value' to 'Some Prop Value';
  *
- * Changes snakeCase 'some_prop_value' to 'Some prop value'
- *
- * Changes kebabCase 'some-prop-value' to 'Some prop value'; `false` by default
- *
- * To capitalize use css [text-transform: capitalize]
  * @param text The string to change
- * @param changeKebabCase Set true to apply kebabCase rule; `false` by default
- * @returns Prettified string
- */
-export declare function stringPrettify(text: string, changeKebabCase?: boolean): string;
+ * @param capitalize Set uppercase 1st letter of every word: `somePropValue` => `Some Prop Value`; @defaultValue `true`
+ * @returns Prettified string */
+export declare function stringPrettify(text: string, capitalize?: boolean, handleKebabCase?: boolean): string;

helpers/string.js

@@ -25,9 +25,37 @@ export function isSpecialSymbol(s, i) {
 }
-export function stringPrettify(text, changeKebabCase = false) {
-    const r = text
-        .replace(/([A-ZА-Я])/g, " $1")
-        .trimStart()
-        .replace(new RegExp(`[_${(changeKebabCase && "-") || ""}]`, "g"), " ")
-        .replace(/[ ]{2,}/, " ");
-    return r.charAt(0).toUpperCase() + r.slice(1);
+export function stringPrettify(text, capitalize = true, handleKebabCase = false) {
+    let r = "";
+    let nextUpper = false;
+    let wasUpper = false;
+    for (let i = 0; i < text.length; ++i) {
+        const c = text.charCodeAt(i);
+        if (c > 96 && c < 123) {
+            wasUpper = false;
+            r += String.fromCharCode(nextUpper || i === 0 ? c - 32 : c);
+        }
+        else if (c > 64 && c < 91) {
+            const cNext = text.charCodeAt(i + 1);
+            const isAbbr = i === text.length - 1 || (cNext > 64 && cNext < 91);
+            const isAbbrPrev = wasUpper && isAbbr;
+            if (!nextUpper && !isAbbrPrev && i !== 0) {
+                r += " ";
+            }
+            r += String.fromCharCode(capitalize || isAbbr || i === 0 ? c : c + 32);
+            wasUpper = true;
+        }
+        else if (c === 95 || (c === 45 && handleKebabCase)) {
+            wasUpper = false;
+            if (i !== 0) {
+                r += " ";
+            }
+            nextUpper = capitalize;
+            continue;
+        }
+        else {
+            r += String.fromCharCode(c);
+            wasUpper = false;
+        }
+        nextUpper = false;
+    }
+    return r;
 }

indexHelpers.d.ts

@@ -18,2 +18,3 @@ export { default as animate } from "./helpers/animate";
 export { default as objectClone } from "./helpers/objectClone";
+export { default as objectToFormData } from "./helpers/objectToFormData";
 export { default as onEvent } from "./helpers/onEvent";
@@ -20,0 +21,0 @@ export { default as onFocusGot } from "./helpers/onFocusGot";

indexHelpers.js

@@ -18,2 +18,3 @@ export { default as animate } from "./helpers/animate";
 export { default as objectClone } from "./helpers/objectClone";
+export { default as objectToFormData } from "./helpers/objectToFormData";
 export { default as onEvent } from "./helpers/onEvent";
@@ -20,0 +21,0 @@ export { default as onFocusGot } from "./helpers/onFocusGot";

modalElement.d.ts

@@ -81,9 +81,2 @@ import { AttributeMap } from "./baseElement";
     }
-    namespace JSX {
-        interface IntrinsicElements {
-            /**  Modal element
-             *  @see {@link WUPModalElement} */
-            [tagName]: WUP.Base.ReactHTML<WUPModalElement> & WUP.Modal.JSXProps;
-        }
-    }
     namespace React {
@@ -97,2 +90,11 @@ interface ButtonHTMLAttributes<T> {
 }
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            /**  Modal element
+             *  @see {@link WUPModalElement} */
+            [tagName]: WUP.Base.ReactHTML<WUPModalElement> & WUP.Modal.JSXProps;
+        }
+    }
+}
 declare module "preact/jsx-runtime" {
@@ -99,0 +101,0 @@ namespace JSX {

notifyElement.d.ts

@@ -66,2 +66,4 @@ import WUPBaseModal from "./baseModal";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -68,0 +70,0 @@ interface IntrinsicElements {

notifyElement.js

@@ -18,8 +18,6 @@ import WUPBaseModal from "./baseModal";
     static get observedOptions() {
-        return [];
+        return ["autoClose", "closeOnClick", "openCase", "placement", "selfRemove"];
     }
     static get observedAttributes() {
-        const arr = super.observedAttributes;
-        arr.push("w-autoclose", "w-closeonclick", "w-opencase", "w-placement", "w-selfremove");
-        return arr;
+        return super.observedAttributes;
     }
@@ -26,0 +24,0 @@ static get $styleRoot() {

package.json

 {
   "name": "web-ui-pack",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Web package with UI elements",
@@ -102,4 +102,4 @@ "main": "index.js",
     "@types/puppeteer": "^5.4.6",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -153,4 +153,4 @@ "@typescript-eslint/parser": "^5.62.0",
     "puppeteer": "^15.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.3.0",
@@ -157,0 +157,0 @@ "sass": "^1.32.13",

popup/popupArrowElement.d.ts

@@ -6,2 +6,4 @@ declare const tag = "wup-popup-arrow";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -8,0 +10,0 @@ interface IntrinsicElements {

popup/popupElement.d.ts

@@ -11,2 +11,4 @@ import { PopupOpenCases, PopupCloseCases } from "./popupElement.types";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -13,0 +15,0 @@ interface IntrinsicElements {

README.md

@@ -10,2 +10,3 @@ # ![logo](/demo/src/assets/logo-small.png) web-ui-pack
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+<!-- [![GitHub Sponsors](https://img.shields.io/github/sponsors/Yegorich555)](https://github.com/sponsors/Yegorich555) -->
 
@@ -16,4 +17,3 @@ ## Demo
 
-Template repo with React: [webpack-must-have](https://github.com/Yegorich555/webpack-must-have)
-Template repo with Angular: [webpack-angular](https://github.com/Yegorich555/web-angular)
+Template repos with React: [webpack-must-have](https://github.com/Yegorich555/webpack-must-have), [webpack-react](https://github.com/Yegorich555/webpack-react) (in progress)
 
@@ -134,3 +134,3 @@ ## Features
 4. **Inheritance**
-   - Components are developed to be easily customized and inherited. Use ...$defaults of every class to configure behavior You can rewrite everything you can imagine without digging a lot in a code. To be sure don't hesitate to take a look on \*.d.ts or source code (there are enough comments to clarify even weird/difficult cases)
+   - Components are developed to be easily customized and inherited. Use ...$defaults of every class to configure behavior. You can rewrite everything you can imagine without digging a lot in a code. To be sure don't hesitate to take a look on \*.d.ts or source code (there are enough comments to clarify even weird/difficult cases)
    - All Components inherited from [WUPBaseElement](src/baseElement.ts) that extends default HTMLElement
@@ -216,11 +216,13 @@ - All internal event-callbacks startsWith `got...` (gotReady, gotRemoved)
 declare global {
-  // add element to document.createElement
+  // add element to DOM document.createElement
   interface HTMLElementTagNameMap {
     [tagName]: Popup;
   }
+}
 
+declare module "react" {
   // add element for tsx/jsx intellisense
   namespace JSX {
     interface IntrinsicElements {
-      [tagName]: IntrinsicElements["wup-popup"];
+      [tagName]: IntrinsicElements["wup-popup"]; // reuse same definition from wup-popup
     }
@@ -235,7 +237,21 @@ }
 
-use `import focusFirst from "web-ui-pack/helpers/focusFirst"` etc.
-**WARN**: don't use `import {focusFirst} from "web-ui-pack;` because in this case the whole web-ui-pack module traps in compilation of dev-bundle and increases time of compilation
+use `import focusFirst from "web-ui-pack/helpers/focusFirst"` etc.\
+**WARNING**: avoid using `import { focusFirst } from "web-ui-pack;` because in this case the whole web-ui-pack module traps in compilation of dev-bundle and increases time of compilation
 
+#### Helpers.Animation
+
 - [**animateDropdown**](src/helpers/animateDropdown.ts) ⇒ `Animate (show/hide) element as dropdown via scale and counter-scale for children`
 - [**animateStack**](src/helpers/animateDropdown.ts) ⇒ `Animate (show/hide) every element via moving from target to own position`
+
+#### Helpers.HTML (DOM)
+
+- [**findScrollParent**](src/helpers/findScrollParent.ts) ⇒ `Find first parent with active scroll X/Y`
+- [**findScrollParentAll**](src/helpers/findScrollParent.ts) ⇒ `Find all parents with active scroll X/Y`
+- [**focusFirst**](src/helpers/focusFirst.ts) ⇒ `Set focus on element or first possible nested element`
+- [**isIntoView**](src/helpers/isIntoView.ts) ⇒ `Check if element is visible in scrollable parents`
+- [**scrollIntoView**](src/helpers/scrollIntoView.ts) ⇒ `Scroll the HTMLElement's parent container such that the element is visible to the user and return promise by animation end`
+- [class **WUPScrolled**](src/helpers/scrolled.ts) ⇒ `Class makes pointed element scrollable and implements carousel-scroll behavior (appends new items during the scrolling). Supports swipe/pageUp/pageDown/mouseWheel events.`
+
+#### Helpers.Date
+
 - [**dateCompareWithoutTime**](src/helpers/dateCompareWithoutTime.ts) ⇒ `Compare by Date-values without Time`
@@ -245,13 +261,19 @@ - [**dateCopyTime**](src/helpers/dateCopyTime.ts) ⇒ `Copy hh:mm:ss.fff part from B to A`
 - [**dateToString**](src/helpers/dateToString.ts) ⇒ `Returns a string representation of a date-time according to pointed format`
-- [**findScrollParent**](src/helpers/findScrollParent.ts) ⇒ `Find first parent with active scroll X/Y`
-- [**findScrollParentAll**](src/helpers/findScrollParent.ts) ⇒ `Find all parents with active scroll X/Y`
-- [**focusFirst**](src/helpers/focusFirst.ts) ⇒ `Set focus on element or first possible nested element`
-- [**isIntoView**](src/helpers/isIntoView.ts) ⇒ `Check if element is visible in scrollable parents`
+
+#### Helpers.Math
+
 - [**mathFixFP**](src/helpers/math.ts) ⇒ `Fix float precision issue after math operations when 10.53+0.1=>10.629999999999999`
 - [**mathScaleValue**](src/helpers/math.ts) ⇒ `Scale value from one range to another`
 - [**mathRotate**](src/helpers/math.ts) ⇒ `Apply transform.rotate on point`
+
+#### Helpers.Object
+
 - [**nestedProperty.set**](src/helpers/nestedProperty.ts) ⇒ `nestedProperty.set(obj, "value.nestedValue", 1) sets obj.value.nestedValue = 1`
 - [**nestedProperty.get**](src/helpers/nestedProperty.ts) ⇒ `nestedProperty.get(obj, "nested.val2", out?: {hasProp?: boolean} ) returns value from obj.nested.val2`
-- [**objectClone**](src/helpers/objectClone.ts) ⇒ `deep cloning object`
-- [**observer**](src/helpers/observer.md) ⇒ `converts object to observable (via Proxy) to allow listen for changes`
+- [**objectClone**](src/helpers/objectClone.ts) ⇒ `Deep cloning object`
+- [**objectToFormData**](src/helpers/objectToFormData.ts) ⇒ `Converts pointed object with nested properties to FormData (including files)`
+- [**observer**](src/helpers/observer.md) ⇒ `Converts object to observable (via Proxy) to allow listen for changes`
+
+#### Helpers.Event
+
 - [**onEvent**](src/helpers/onEvent.ts) ⇒ `More strict (for Typescript) wrapper of addEventListener() that returns callback with removeListener()`
@@ -263,11 +285,12 @@ - [**onFocusGot**](src/helpers/onFocusGot.ts) ⇒ `Fires when element/children takes focus once (fires again after onFocusLost on element)`
 - [**onSpy**](src/helpers/onSpy.ts) ⇒ `Spy on method-call of object`
-- [**promiseWait**](src/helpers/promiseWait.ts) ⇒ `Produce Promise during for "no less than pointed time"; it helps for avoding spinner blinking during the very fast API-request in case: pending > waitResponse > resetPending`
-- [**scrollIntoView**](src/helpers/scrollIntoView.ts) ⇒ `Scroll the HTMLElement's parent container such that the element is visible to the user and return promise by animation end`
-- [class **WUPScrolled**](src/helpers/scrolled.ts) ⇒ `Class makes pointed element scrollable and implements carousel-scroll behavior (appends new items during the scrolling). Supports swipe/pageUp/pageDown/mouseWheel events.`
+
+#### Helpers.String
+
 - [**stringLowerCount**](src/helpers/string.ts) ⇒ `Returns count of chars in lower case (for any language with ignoring numbers, symbols)`
 - [**stringUpperCount**](src/helpers/string.ts) ⇒ `Returns count of chars in upper case (for any language with ignoring numbers, symbols)`
-- [**stringPrettify**](src/helpers/string.ts) ⇒ `Changes camelCase, snakeCase, kebabCase text to user-friendly`
+- [**stringPrettify**](src/helpers/string.ts) ⇒ `Changes camelCase/snake_case/kebab-case text to user-friendly title: 'somePropValue' to 'Some Prop Value'`
 
-### Objects
+#### Helpers.Other
 
+- [**promiseWait**](src/helpers/promiseWait.ts) ⇒ `Produce Promise during for "no less than pointed time"; it helps for avoding spinner blinking during the very fast API-request in case: pending > waitResponse > resetPending`
 - [**localeInfo**](src/objects/localeInfo.ts) ⇒ `Locale-object with definitions related to user-locale`
@@ -274,0 +297,0 @@ - [**TimeObject**](src/objects/timeObject.ts) ⇒ `Plane time object without date`

spinElement.d.ts

@@ -49,2 +49,4 @@ import WUPBaseElement, { AttributeMap } from "./baseElement";
     }
+}
+declare module "react" {
     namespace JSX {
@@ -51,0 +53,0 @@ interface IntrinsicElements {

No alert changes

Improved metrics

Total package byte prevSize

823344

increased by0.44%

Number of package files

137

increased by1.48%

Lines of code

21041

increased by0.47%

Number of lines in readme file

330

increased by7.49%

No dependency changes