@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.41

package/generated/internal/utils/sleep.d.ts

@@ -0,0 +1 @@
+export default function (ms: number): Promise<void>;

package/generated/internal/utils/sleep.js

@@ -0,0 +1,3 @@
+export default function (ms) {
+    return new Promise((r) => self.setTimeout(r, ms));
+}

package/generated/internal/utils/slow-hide-show.d.ts

@@ -0,0 +1 @@
+export default function (to: 'show' | 'hide', el?: HTMLElement): void;

package/generated/internal/utils/slow-hide-show.js

@@ -0,0 +1,16 @@
+import frame from './frame';
+export default function (to, el) {
+    const transcleanup = ({ propertyName }) => {
+        if ('opacity' !== propertyName)
+            return;
+        el?.removeAttribute('slow');
+    };
+    for (const eventType of ['transitionend', 'transitioncancel'])
+        el?.addEventListener(eventType, transcleanup, {
+            once: true,
+        });
+    el?.setAttribute('slow', '');
+    frame(el).then(() => {
+        el?.setAttribute('slow', to);
+    }); //self.requestAnimationFrame(() => el?.setAttribute('slow', to))
+}

package/generated/internal/utils/timeout.d.ts

@@ -0,0 +1,5 @@
+export default function (): {
+    next: (fn: () => void, ms: number) => void;
+    cancel: () => void;
+    pending: () => boolean;
+};

package/generated/internal/utils/timeout.js

@@ -0,0 +1,16 @@
+export default function () {
+    let id;
+    const cancel = () => {
+        if (!id)
+            return;
+        self.clearTimeout(id);
+        id = undefined;
+    }, next = (fn, ms) => {
+        cancel();
+        id = self.setTimeout(() => {
+            fn();
+            id = undefined;
+        }, ms);
+    }, pending = () => undefined !== id;
+    return { next, cancel, pending };
+}

package/generated/internal/utils/touch-glass.d.ts

@@ -0,0 +1,7 @@
+export default function (t: HTMLElement, targetCallback: (target: HTMLElement) => HTMLElement, checkCallback: (evt: PointerEvent) => boolean): {
+    types: string;
+    listener: EventListener;
+    addOptions: {
+        passive: boolean;
+    };
+}[];

package/generated/internal/utils/touch-glass.js

@@ -0,0 +1,19 @@
+const makePointerdownHandler = (target, targetCallback, checkCallback) => {
+    return function (evt) {
+        // if (event.pointerType !== 'touch')  return
+        if (!checkCallback(evt))
+            return;
+        targetCallback(target).toggleAttribute('touch-glass', true);
+    };
+}, makePointercancelHandler = (target, targetCallback) => {
+    return function (evt) {
+        targetCallback(target).toggleAttribute('touch-glass', false);
+    };
+};
+export default function (t, targetCallback, checkCallback) {
+    const downListener = makePointerdownHandler(t, targetCallback, checkCallback), cancelListener = makePointercancelHandler(t, targetCallback);
+    return [
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: cancelListener, addOptions: { passive: true } },
+    ];
+}

package/generated/namespace-browser/base.d.ts

@@ -0,0 +1,45 @@
+export declare abstract class DialogBase extends HTMLDialogElement {
+    static polyfillExtends: "dialog";
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class InputBase extends HTMLInputElement {
+    static polyfillExtends: "input";
+    static polyfillConnectedCallback(el: HTMLInputElement): void;
+    static polyfillDisconnectedCallback(el: HTMLInputElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends: "button";
+    static polyfillConnectedCallback(el: HTMLButtonElement): void;
+    static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends: "details";
+    static polyfillConnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class FormBase extends HTMLFormElement {
+    static polyfillExtends: "form";
+    static polyfillConnectedCallback(el: HTMLFormElement): void;
+    static polyfillDisconnectedCallback(el: HTMLFormElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/namespace-browser/base.js

@@ -0,0 +1,115 @@
+export class DialogBase extends HTMLDialogElement {
+    static polyfillExtends = 'dialog';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class InputBase extends HTMLInputElement {
+    static polyfillExtends = 'input';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}

package/generated/namespace-browser/index.d.ts

@@ -0,0 +1,7 @@
+export type WebComponentCtor = typeof HTMLElement & {
+    observedAttributes?: string[];
+    polyfillExtends?: string;
+    polyfillConnectedCallback(el: HTMLElement): void;
+    polyfillDisconnectedCallback(el: HTMLElement): void;
+    polyfillAttributeChangedCallback?(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+};

package/generated/namespace-browser/index.js

@@ -0,0 +1 @@
+export {};

package/generated/snapshot/index.d.ts

@@ -0,0 +1,9 @@
+export declare class Snapshot {
+    #private;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
+    static readonly waitReady: Promise<[void, void]>;
+    static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
+    static get config(): Record<string, string> | undefined;
+    static setOwnConfig(): Promise<void>;
+}

package/generated/snapshot/index.js

@@ -0,0 +1,60 @@
+import { devFlags, onoff } from '../internal/utils';
+export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
+    static waitReady = Promise.all([
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', () => r(), { once: true })),
+        (async () => {
+            if (!this.#readyCalled)
+                await this.setOwnConfig();
+        })(), // Lazy config read promise, triggered on first access
+    ]);
+    static async waitReadyFor(element) {
+        if (!element.isConnected)
+            return null;
+        await this.waitReady;
+        return element.isConnected ? element : null;
+    }
+    static get config() {
+        return this.#config;
+    }
+    static async setOwnConfig() {
+        if (!this.#readyCalled)
+            this.#readyCalled = true;
+        if ('complete' !== document.readyState)
+            await new Promise((r) => self.addEventListener('load', r, { once: true }));
+        this.#getOwnConfig();
+    }
+    static #getOwnConfig() {
+        const style = self.getComputedStyle(document.documentElement, '::before'), content = style.getPropertyValue('content'), unquoted = content.replace(/^"(.*)"$/, '$1'); // Remove quotes around the content
+        try {
+            this.#config = Object.fromEntries(new URLSearchParams(unquoted).entries()); // {"none": ""}
+        }
+        catch {
+            console.error('could-not-parse-config');
+        }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
+        if (devFlags.debug)
+            console.debug(this.#config);
+    }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        if (devFlags.debug)
+            console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.4",
-  "description": "Elegant SwiftUI-inspired web components for ambitious web apps and web extensions.",
+  "version": "0.0.0-dev.41",
+  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +20,8 @@
   },
   "files": [
     "generated",
-    "scss"
+    "scss",
+    "web-components.html-data"
   ],
   "sass": "scss/index.scss",
   "keywords": [
@@ -42,23 +43,46 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
-    "./styles.css": "./generated/styles.css",
+    "./events": {
+      "types": "./generated/events/index.d.ts",
+      "default": "./generated/events/index.js"
+    },
+    "./css": "./generated/css/index.css",
     "./scss": "./scss/index.scss",
-    "./scss/*": "./scss/*.scss"
+    "./scss/*": "./scss/*.scss",
+    "./customElements/en": "./custom-elements/en.json"
   },
   "bin": {
     "swiftwc": "./generated/index.js"
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
+    "postbuild": "npm run format:write",
     "build:ts:watch": "npm run prebuild && tsc --watch",
-    "build:ts": "npm run prebuild && tsc",
-    "build:scss": "npm run prebuild && sass --no-source-map scss/index.scss generated/styles.css",
+    "build:ts": "tsc",
+    "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
+    "build:manifest": "tsx scripts/make-manifest.ts",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
-    "format:write": "prettier . --write"
+    "format:write": "prettier . --write",
+    "test": "vitest --dom",
+    "prepackage": "rm -rf generated",
+    "package": "npm run build:ts && npm run build:scss",
+    "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {
-    "sass": "^1.97.2"
-  }
+    "doctrine": "^3.0.0",
+    "happy-dom": "^20.7.0",
+    "sass": "^1.98.0",
+    "ts-morph": "^28.0.0",
+    "tsx": "^4.21.0",
+    "vitest": "^4.0.18"
+  },
+  "customElements": "custom-elements/en.json"
 }

package/scss/_components.scss

@@ -4,36 +4,81 @@
 
 @forward 'components/disclosure-group';
 
-@forward 'components/body-view';
+@forward 'components/h-divider';
+@forward 'components/v-divider';
 
-@forward 'components/tab-view';
+@forward 'components/full-screen';
 
-@forward 'components/tab-bar';
+@forward 'components/detail-placeholder';
+@forward 'components/progress-view';
 
-@forward 'components/tab-bar-stack';
+@forward 'components/fine-tooltip';
 
-@forward 'components/sidebar-toggle';
-
-@forward 'components/full-screen';
+@forward 'components/sticky-container';
 
 @forward 'components/sheet-view';
 
-@forward 'components/navigation-stack';
-
-@forward 'components/navigation-split-view';
-
-@forward 'components/toolbars';
+@forward 'components/content-unavailable-view';
 
-@forward 'components/sidebar-view';
+@forward 'components/confirmation-dialog';
+@forward 'components/alert-dialog';
 
 @forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
 
+@forward 'components/h-stack';
 @forward 'components/v-stack';
+@forward 'components/h-flex-stack';
+@forward 'components/v-flex-stack';
 
-@forward 'components/tool-bar';
+@forward 'components/scroll-view-toolbars';
 
 @forward 'components/tool-bar-item';
 
 @forward 'components/tool-bar-item-group';
 
+@forward 'components/plain-button';
 @forward 'components/borderless-button';
+@forward 'components/bordered-button';
+@forward 'components/bordered-prominent-button';
+@forward 'components/glass-button';
+@forward 'components/glass-prominent-button';
+
+@forward 'components/search-view';
+
+@forward 'components/tool-bar';
+
+@forward 'components/label-view';
+
+@forward 'components/labeled-content';
+
+// @forward 'components/button-view';
+
+@forward 'components/body-view';
+
+@forward 'components/navigation-large-title';
+@forward 'components/navigation-title';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/menu-view';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/list-view';
+@forward 'components/form-view';
+@forward 'components/section-view';
+@forward 'components/table-view';
+@forward 'components/table-row';
+@forward 'components/table-column';
+
+@forward 'components/text-field';
+@forward 'components/date-picker';
+@forward 'components/picker-view';
+
+@forward 'components/navigation-stack';
+@forward 'components/navigation-split-view';
+
+@forward 'components/tab-view';
+@forward 'components/tab-bar';
+@forward 'components/tab-item';

package/scss/_final.scss

@@ -0,0 +1 @@
+@forward 'final/touch-glass';

package/scss/_functions.scss

@@ -19,3 +19,13 @@
   }
   @return string.slice($parts, 2);
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}