@swiftwc/ui 0.0.0-dev.2 → 0.0.0-dev.20

package/generated/internal/utils/list-active.js

@@ -0,0 +1,73 @@
+const touchList = new WeakMap();
+function onDown({ target }) {
+    const el = target?.closest('button,summary');
+    if (!el)
+        return;
+    touchList.set(el, setTimeout(() => {
+        if (!touchList.has(el))
+            return;
+        el.classList.add('active');
+    }, 70));
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+    el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
+}
+function onOver({ target, buttons }) {
+    const el = target?.closest('button,summary');
+    if (!el)
+        return;
+    if (0 === buttons)
+        return;
+    el.classList.add('active');
+    el.removeEventListener('pointerover', onOver);
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+}
+function onLeave({ target }) {
+    const el = target?.closest('button,summary');
+    if (!el)
+        return;
+    el.addEventListener('pointerover', onOver, { once: true, passive: true });
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onCancel({ target }) {
+    const el = target?.closest('button,summary');
+    if (!el)
+        return;
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.removeEventListener('pointerover', onOver);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onScroll({ target }) {
+    for (const el of target?.querySelectorAll('button,summary') ?? []) {
+        el.classList.remove('active');
+        if (touchList.has(el))
+            clearTimeout(touchList.get(el));
+        touchList.delete(el);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('pointerover', onOver);
+    }
+}
+const makePointerdownHandler = (target) => {
+    return onDown;
+}, makePointerCancelHandler = (target) => {
+    return onCancel;
+};
+export default function (t) {
+    const downListener = makePointerdownHandler(t), offListener = makePointerCancelHandler(t);
+    return [
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
+    ];
+}

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

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

package/generated/internal/utils/microtask.js

@@ -0,0 +1,3 @@
+export default function () {
+    return Promise.resolve();
+}

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

@@ -0,0 +1,45 @@
+/**
+ * const el = document.querySelector('button')!
+ *
+ * @example
+ * // 1. Single — no event arg
+ * onoff('click', () => console.log('clicked'), el)
+ *
+ * @example
+ * // 2. Single — with event arg
+ * onoff('click', (e) => console.log(e.target), el)
+ *
+ * @example
+ * // 3. Single — with options
+ * onoff('click', (e) => console.log(e), el, { passive: true, once: true })
+ *
+ * @example
+ * // 4. Single — capture as boolean
+ * onoff('click', (e) => console.log(e), el, true)
+ *
+ * @example
+ * // 5. Array — shared t
+ * onoff([
+ *   { types: 'click', listener: (e) => console.log('click', e) },
+ *   { types: 'mouseover mouseout', listener: (e) => console.log('hover', e) },
+ * ], el)
+ *
+ * @example
+ * // 6. Using on/off
+ * const { on, off } = onoff('scroll', (e) => console.log(e), el, { passive: true })
+ * on()   // start listening
+ * off()  // stop listening
+ */
+type Options = boolean | AddEventListenerOptions;
+interface EventConfig {
+    types: string;
+    listener: EventListener;
+    addOptions?: Options;
+}
+declare function single(types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): {
+    on: () => () => void;
+    off: () => void;
+};
+export default function (configs: EventConfig[], t?: EventTarget): ReturnType<typeof single>;
+export default function (types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): ReturnType<typeof single>;
+export {};

package/generated/internal/utils/onoff.js

@@ -0,0 +1,31 @@
+function single(types, listener, t, addOptions) {
+    const events = types?.split(' ');
+    const removeOptions = typeof addOptions === 'boolean' ? addOptions : addOptions !== undefined && 'capture' in addOptions ? { capture: addOptions.capture } : undefined;
+    const off = () => {
+        for (const event of events)
+            t?.removeEventListener(event, listener, removeOptions);
+    }, on = () => {
+        for (const event of events)
+            t?.addEventListener(event, listener, addOptions);
+        return off;
+    };
+    return {
+        on,
+        off,
+    };
+}
+export default function (typesOrConfigs, listenerOrT, t, addOptions) {
+    if (Array.isArray(typesOrConfigs)) {
+        const element = listenerOrT, results = typesOrConfigs.map((c) => single(c.types, c.listener, element, c.addOptions)); //, c.t ?? element, c.addOptions))
+        const off = () => results.forEach((r) => r.off()), on = () => {
+            for (const r of results)
+                r.on();
+            return off;
+        };
+        return {
+            on,
+            off,
+        };
+    }
+    return single(typesOrConfigs, listenerOrT, t, addOptions);
+}

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

@@ -0,0 +1 @@
+export default function <T extends object, K extends keyof T>(obj: T, key: K, value: T[K]): boolean;

package/generated/internal/utils/set.js

@@ -0,0 +1,7 @@
+export default function (obj, key, value) {
+    if (!Object.is(obj[key], value)) {
+        obj[key] = value;
+        return true;
+    }
+    return false;
+}

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/lifecycle-observer/index.d.ts

@@ -0,0 +1 @@
+export declare const LifecycleObserver: EventTarget;

package/generated/lifecycle-observer/index.js

@@ -0,0 +1 @@
+export const LifecycleObserver = new EventTarget();

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

@@ -0,0 +1,36 @@
+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 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,92 @@
+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 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,7 @@
+export declare class Snapshot {
+    #private;
+    static readonly waitReady: Promise<[unknown, 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,37 @@
+export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    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');
+        }
+        console.debug(this.#config);
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.2",
-  "description": "Elegant SwiftUI-inspired web components for ambitious web apps and web extensions.",
+  "version": "0.0.0-dev.20",
+  "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,19 +43,42 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
-    "./styles.css": "./generated/styles.css",
-    "./scss": "./generated/scss/index.scss"
+    "./events": {
+      "types": "./generated/events/index.d.ts",
+      "default": "./generated/events/index.js"
+    },
+    "./css": "./generated/css/index.css",
+    "./scss": "./scss/index.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 && npm run build:barrels:i18n",
+    "postbuild": "npm run format:write",
+    "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
-    "build:scss": "sass --no-source-map scss/index.scss generated/styles.css"
+    "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
+    "build:manifest": "tsx scripts/make-manifest.ts",
+    "build:barrels": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "format:check": "prettier . --check",
+    "format:write": "prettier . --write",
+    "test": "vitest --dom",
+    "predeploy": "rm -rf generated",
+    "deploy":"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/_base.scss

@@ -0,0 +1,5 @@
+@forward 'base/root';
+
+@forward 'base/reboot';
+
+@forward 'base/layout';

package/scss/_components.scss

@@ -0,0 +1,77 @@
+@forward 'components/index';
+
+@forward 'components/v-keyboard';
+
+@forward 'components/disclosure-group';
+
+@forward 'components/h-divider';
+@forward 'components/v-divider';
+
+@forward 'components/full-screen';
+
+@forward 'components/detail-placeholder';
+
+@forward 'components/sticky-container';
+
+@forward 'components/sheet-view';
+
+@forward 'components/content-unavailable-view';
+
+@forward 'components/confirmation-dialog';
+
+@forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
+
+@forward 'components/h-stack';
+@forward 'components/v-stack';
+@forward 'components/v-flex-stack';
+
+@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/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

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use 'sass:string';
+
+@function subtract-tiny($value) {
+  @if math.unit($value) == 'px' {
+    @return $value - 0.01px;
+  } @else if math.unit($value) == 'rem' {
+    @return $value - 0.0001rem; // “very large” subtraction
+  } @else {
+    @warn "Unsupported unit: #{unit($value)}";
+    @return $value;
+  }
+}
+
+@function map-to-query($map) {
+  $parts: '';
+  @each $key, $value in $map {
+    $parts: string.insert($parts, '&#{$key}=#{$value}', 0);
+  }
+  @return string.slice($parts, 2);
+}

package/scss/_mixins.scss

@@ -0,0 +1,3 @@
+@forward 'mixins/index';
+
+@forward 'mixins/dialog';

package/scss/_placeholders.scss

@@ -0,0 +1,3 @@
+@forward 'placeholders/lists';
+
+@forward 'placeholders/buttons';

package/scss/_transitions.scss

@@ -0,0 +1,27 @@
+@forward 'transitions/index';
+
+@forward 'transitions/fwd';
+
+@forward 'transitions/bwd';
+
+@forward 'transitions/fwd.navbar';
+
+@forward 'transitions/bwd.navbar';
+
+@forward 'transitions/dialog';
+
+@forward 'transitions/menu-view';
+
+@forward 'transitions/glass-button';
+
+@forward 'transitions/glass-prominent-button';
+
+@forward 'transitions/confirmation-dialog';
+
+@forward 'transitions/navigation-split-view';
+
+@forward 'transitions/disclosure-group';
+
+@forward 'transitions/sidebar-view';
+
+@forward 'transitions/tab-bar';