jsl-ui 9.28.7 → 10.0.0

package/lib/ui/number.input.js

@@ -3,54 +3,67 @@ import { numeric } from "../core/numeric";
 import { EventHandler } from "../interaction/eventhandler";
 const defaultOptions = { format: "0.###", formatOnBlur: true, commitOnEnter: true, placeholder: false, enabled: true };
 export function NumberInput(input, options) {
-    let el;
+    const el = typeof input === "string" ? document.querySelector(input) : input;
     const o = { ...defaultOptions, ...options };
-    o.onChange = EventHandler.Create(o.onChange);
-    if (typeof input === "string") {
-        el = document.querySelector(input);
-    }
-    else {
-        el = input;
-    }
-    if (o.value || o.value === 0) {
+    const onChange = EventHandler.Create(o.onChange);
+    if (o.value != null) {
         el.value = numeric.format(o.value, o.format);
     }
-    if (o.placeholder !== false) {
-        if (o.placeholder === true) {
-            el.placeholder = numeric.format(0, o.format);
-        }
-        else {
-            el.placeholder = o.placeholder;
-        }
+    if (o.placeholder !== false && o.placeholder != null) {
+        el.placeholder = o.placeholder === true ? numeric.format(0, o.format) : o.placeholder;
     }
     if (o.inputmode != null) {
         el.inputMode = o.inputmode;
     }
     el.classList.add("jsl-number");
-    if (o.enabled === false) {
-        el.setAttribute("disabled", "disabled");
+    el.disabled = o.enabled === false;
+    if (!o.enabled) {
+        return el;
     }
-    else {
-        if (o.formatOnBlur) {
-            el.addEventListener("blur", (evt) => {
-                const val = numeric.parse(el.value);
-                el.value = numeric.format(val, o.format);
-            });
+    let notified = false;
+    let lastValue;
+    const parse = () => {
+        const value = numeric.parse(el.value);
+        const invalid = el.value.trim() !== "" && !Number.isFinite(value);
+        el.setCustomValidity(invalid ? "Enter a valid number." : "");
+        if (invalid) {
+            el.setAttribute("aria-invalid", "true");
+        }
+        else {
+            el.removeAttribute("aria-invalid");
         }
-        if (o.onChange != null) {
-            el.addEventListener("change", (evt) => {
-                o.onChange.notify(numeric.parse(el.value));
-            });
+        return { value, invalid };
+    };
+    const commit = () => {
+        if (el.readOnly || el.matches(":disabled")) {
+            return;
         }
-        el.addEventListener("keydown", (evt) => {
-            if (evt.which === 13) {
-                if (o.formatOnBlur) {
-                    const val = numeric.parse(el.value);
-                    el.value = numeric.format(val, o.format);
-                }
-                o.onChange.notify(numeric.parse(el.value));
-            }
-        });
+        const result = parse();
+        if (!result.invalid && (!notified || !Object.is(lastValue, result.value))) {
+            notified = true;
+            lastValue = result.value;
+            onChange.notify(result.value);
+        }
+    };
+    const format = () => {
+        const result = parse();
+        if (!result.invalid) {
+            el.value = numeric.format(result.value, o.format);
+        }
+    };
+    if (o.formatOnBlur) {
+        el.addEventListener("blur", format);
     }
+    el.addEventListener("input", () => { notified = false; });
+    el.addEventListener("change", commit);
+    el.addEventListener("keydown", event => {
+        if (event.key === "Enter" && o.commitOnEnter && !event.isComposing && !el.readOnly && !el.matches(":disabled")) {
+            if (o.formatOnBlur) {
+                format();
+            }
+            // Use a normal change event so wrappers observe the same commit.
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    });
     return el;
 }

package/lib/ui/theme.css

@@ -0,0 +1,28 @@
+/* Neutral base palette shared by redesigned components.
+   Override --jsl-color-* on :root or a container to theme an application.
+   These tokens do not change the host application's typography or background. */
+:where(:root) {
+    --jsl-color-canvas: #f7f7f8;
+    --jsl-color-surface: #ffffff;
+    --jsl-color-surface-subtle: #fafafa;
+    --jsl-color-surface-hover: #f0f0f2;
+    --jsl-color-surface-selected: #e8e8eb;
+    --jsl-color-border: #d4d4d8;
+    --jsl-color-border-subtle: #e4e4e7;
+    --jsl-color-text: #27272a;
+    --jsl-color-text-secondary: #52525b;
+    --jsl-color-text-muted: #71717a;
+    --jsl-color-accent: #3f3f46;
+    --jsl-color-accent-hover: #27272a;
+    --jsl-color-accent-active: #18181b;
+    --jsl-color-on-accent: #ffffff;
+    --jsl-color-focus: #52525b;
+    --jsl-color-danger: #b42318;
+    --jsl-color-success: #15803d;
+    --jsl-color-warning: #b45309;
+    --jsl-color-info: #2563eb;
+    --jsl-color-disabled-surface: #f4f4f5;
+    --jsl-color-disabled-text: #71717a;
+    --jsl-color-overlay: rgba(24, 24, 27, 0.45);
+    --jsl-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
+}

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "jsl-ui",
-  "version": "9.28.7",
-  "description": "javascript UI library",
+  "version": "10.0.0",
   "main": "lib/index.js",
+  "description": "javascript UI library",
   "files": [
-    "lib/**/*"
+    "lib/**/*",
+    "docs/**/*.md",
+    "examples/showcase/**/*"
   ],
   "scripts": {
     "copycss": "xcopy /sy ui\\*.css lib\\ui\\ && xcopy /sy components\\*.css lib\\components\\ && xcopy /sy grid\\*.css lib\\grid\\ && xcopy /sy interaction\\*.css lib\\interaction\\",
     "copyscss": "xcopy /sy ui\\*.scss lib\\ui\\ && xcopy /sy components\\*.scss lib\\components\\ && xcopy /sy grid\\*.scss lib\\grid\\ && xcopy /sy interaction\\*.scss lib\\interaction\\",
-    "buildcss": "parcel build .\\grid.ts --no-scope-hoist && powershell Rename-Item -Path \"lib\\index.css\" -NewName \"grid.css\" -force && parcel build .\\index.ts --no-scope-hoist",
+    "buildcss": "parcel build .\\grid.ts --no-scope-hoist && powershell Move-Item -LiteralPath \"lib\\index.css\" -Destination \"lib\\grid.css\" -Force && parcel build .\\index.ts --no-scope-hoist",
     "build": "npm run buildcss && npm run copycss && npm run copyscss && tsc",
-    "test": "parcel examples/grid/g-01-basic.html"
+    "test": "parcel examples/components/jsl-render.html",
+    "showcase": "parcel examples/showcase/index.html --port 1235"
   },
   "author": "Philipp P.",
   "devDependencies": {
-    "@parcel/transformer-sass": "2.13.3",
-    "parcel": "2.13.3"
+    "@parcel/transformer-sass": "^2.13.3",
+    "parcel": "^2.13.3",
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "jsl-render": "^3.6.3"
+    "jsl-render": "^3.7.0"
   }
 }

package/lib/components/drop-down/DropDownComponent.d.ts

@@ -1,27 +0,0 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDropDownOptions, IDropDown } from "../../ui/drop.down";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface IDropDownComponentOptions<T = any> extends IDropDownOptions {
-    class?: string;
-    placeholder?: string;
-    /**
-     * @deprecated
-     */
-    onSelect?: (value: string | string[]) => void;
-    onChange?: EventHandler<string | string[]> | ((value?: string | string[]) => void);
-    value?: string | string[];
-    bindTo?: T;
-    property?: keyof T;
-    converter?: IDataConverter<any, string | string[]>;
-    enabled?: boolean;
-}
-export declare class DropDownComponent<T = any> implements IJSLComponent {
-    private ref;
-    private options;
-    constructor(options: IDropDownComponentOptions<T>);
-    render(): IJSLVNode;
-    getRef(): IDropDown;
-    onCreate(node: IJSLVNode): void;
-    onRemove(): void;
-}

package/lib/components/drop-down/DropDownComponent.js

@@ -1,60 +0,0 @@
-import { DropDown } from "../../ui/drop.down";
-import { EventHandler } from "../../interaction/eventhandler";
-export class DropDownComponent {
-    constructor(options) {
-        var _a;
-        this.options = { ...{ enabled: true }, ...options };
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-        }
-    }
-    render() {
-        return {
-            tag: "select"
-        };
-    }
-    getRef() {
-        return this.ref;
-    }
-    onCreate(node) {
-        this.ref = DropDown(node.dom, this.options);
-        if (!this.options.enabled) {
-            this.ref.disable();
-        }
-        node.dom.parentElement.classList.add(this.options.class);
-        if (this.options.width) {
-            node.dom.parentElement.style.display = "inline-block";
-        }
-        node.dom.addEventListener("change", (evt) => {
-            var _a;
-            let value;
-            if (this.options.multiple) {
-                value = Array.prototype.slice.call(node.dom.querySelectorAll("option:checked"), 0).map((v) => v.value);
-            }
-            else {
-                value = node.dom.value;
-            }
-            if (this.options.bindTo != null && this.options.property != null) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
-            }
-            if (this.options.onSelect != null) {
-                this.options.onSelect(value);
-            }
-            if (this.options.onChange != null) {
-                this.options.onChange.notify(value);
-            }
-        });
-        if (this.options.value != null) {
-            this.ref.setValue(this.options.value);
-        }
-    }
-    onRemove() {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
-    }
-}

package/lib/components/expander/OldExpanderStyle.scss

@@ -1,37 +0,0 @@
-.expander-comp {
-
-    margin: 1rem;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
-
-    .header {
-        position: relative;
-        padding: 0.5rem;
-        padding-left: 1.6rem;
-        border-bottom: 2px solid #cccccc;
-        cursor: pointer;
-        background: #3B99FF;
-        color: white;
-        font-weight: bold;
-    }
-
-    .body {
-        padding: 0.5rem;
-    }
-
-    .expand-collapse-icon {
-        position: absolute;
-        left: 0.2rem;
-        top: 0.4rem;
-        font-size: 0.9rem;
-        box-sizing: border-box;
-        padding: 0.1rem;
-        opacity: 0.6;
-        font-weight: bold;
-        color: black;
-    }
-
-    .header:hover .expand-collapse-icon {
-        opacity: 1;
-    }
-
-}

package/lib/ui/drop.down.d.ts

@@ -1,52 +0,0 @@
-/*!
- * Selectr 2.4.12
- * http://mobius.ovh/docs/selectr
- *
- * Released under the MIT license
- */
-import "./drop.down.css";
-export interface IDropDown {
-    setValue: (value: string | string[]) => void;
-    getValue: (toObject?: boolean, toJson?: boolean) => string | string[];
-    add: (data: {
-        value: string;
-        text: string;
-    } | Array<{
-        value: string;
-        text: string;
-    }>, skipDuplicate?: boolean) => void;
-    remove: (element: number | string | any[]) => void;
-    removeAll: () => void;
-    serialize: (toJson?: boolean) => any;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    clear: () => void;
-    disable: (submitValue?: boolean) => void;
-    enable: () => void;
-    destroy: () => void;
-}
-export interface IDropDownOptions {
-    defaultSelected?: boolean;
-    multiple?: boolean;
-    data?: any[];
-    pagination?: number;
-    sortSelected?: boolean;
-    searchable?: boolean;
-    clearable?: boolean;
-    allowDeselect?: boolean;
-    width?: number | string;
-    placeholder?: string;
-    taggable?: boolean;
-    maxSelections?: number;
-    tagSeperators?: string[];
-    tagPlaceholder?: string;
-    renderOption?: (option: any) => string;
-    renderSelection?: (option: any) => string;
-    closeOnScroll?: boolean;
-    customClass?: string;
-    messages?: {
-        [index: string]: string;
-    };
-}
-export declare let DropDown: (input: string | HTMLElement, config?: IDropDownOptions) => IDropDown;