@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.31

package/generated/components/form-view.js

@@ -0,0 +1,58 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { listActive, onoff } from '../internal/utils';
+import { FormBase } from '../namespace-browser/base';
+export class FormView extends FormBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${FormView.name} ⚡️ disconnect`);
+        // finally
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${FormView.name} ⚡️ connect`);
+        if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
+            el.method = 'dialog';
+            el.noValidate = true;
+        }
+        CleanupRegistry.register(el, onoff(listActive(el), el).on());
+        if (el.matches(':empty'))
+            el.insertAdjacentHTML('beforeend', `<button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <details is="disclosure-group">
+              <summary><button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <details is="disclosure-group">
+              <summary><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <details is="disclosure-group">
+              <summary><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>`);
+    }
+}

package/generated/components/glass-button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
+export declare class GlassButton extends ButtonBase {
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: ButtonBase): void;
+    static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/glass-button.js

@@ -0,0 +1,39 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
+export class GlassButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role', 'title-key'];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${GlassButton.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
+        el.tabIndex = 0;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
+}

package/generated/components/glass-prominent-button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
+export declare class GlassProminentButton extends ButtonBase {
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: ButtonBase): void;
+    static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/glass-prominent-button.js

@@ -0,0 +1,39 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
+export class GlassProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role', 'title-key'];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
+        el.tabIndex = 0;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
+}

package/generated/components/index.d.ts

@@ -1 +1,41 @@
-export * from "./v-keyboard";
+export * from './alert-dialog';
+export * from './body-view';
+export * from './bordered-button';
+export * from './bordered-prominent-button';
+export * from './borderless-button';
+export * from './confirmation-dialog';
+export * from './content-unavailable-view';
+export * from './date-picker';
+export * from './disclosure-group';
+export * from './fine-tooltip';
+export * from './form-view';
+export * from './glass-button';
+export * from './glass-prominent-button';
+export * from './label-view';
+export * from './list-view';
+export * from './menu-view';
+export * from './navigation-large-title';
+export * from './navigation-split-view';
+export * from './navigation-stack';
+export * from './navigation-title';
+export * from './picker-view';
+export * from './plain-button';
+export * from './progress-view';
+export * from './screen-view';
+export * from './scroll-view-proxy';
+export * from './scroll-view';
+export * from './section-view';
+export * from './sheet-view';
+export * from './sidebar-toggle';
+export * from './sidebar-view';
+export * from './sticky-container';
+export * from './tab-bar';
+export * from './tab-item';
+export * from './tab-view';
+export * from './table-view';
+export * from './text-field';
+export * from './tool-bar-item-group';
+export * from './tool-bar-item';
+export * from './tool-bar';
+export * from './v-keyboard';
+export * from './v-stack';

package/generated/components/index.js

@@ -1,6 +1,41 @@
-/*
- * This is a barrel export file for all components and their related types.
- *
- * 🟢 You can import this file directly.
- */
-export * from "./v-keyboard";
+export * from './alert-dialog';
+export * from './body-view';
+export * from './bordered-button';
+export * from './bordered-prominent-button';
+export * from './borderless-button';
+export * from './confirmation-dialog';
+export * from './content-unavailable-view';
+export * from './date-picker';
+export * from './disclosure-group';
+export * from './fine-tooltip';
+export * from './form-view';
+export * from './glass-button';
+export * from './glass-prominent-button';
+export * from './label-view';
+export * from './list-view';
+export * from './menu-view';
+export * from './navigation-large-title';
+export * from './navigation-split-view';
+export * from './navigation-stack';
+export * from './navigation-title';
+export * from './picker-view';
+export * from './plain-button';
+export * from './progress-view';
+export * from './screen-view';
+export * from './scroll-view-proxy';
+export * from './scroll-view';
+export * from './section-view';
+export * from './sheet-view';
+export * from './sidebar-toggle';
+export * from './sidebar-view';
+export * from './sticky-container';
+export * from './tab-bar';
+export * from './tab-item';
+export * from './tab-view';
+export * from './table-view';
+export * from './text-field';
+export * from './tool-bar-item-group';
+export * from './tool-bar-item';
+export * from './tool-bar';
+export * from './v-keyboard';
+export * from './v-stack';

package/generated/components/label-view.d.ts

@@ -0,0 +1,9 @@
+export declare class LabelView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/label-view.js

@@ -0,0 +1,56 @@
+import { $ } from '../internal/utils';
+export class LabelView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-image', 'title', 'line-limit', 'truncation-mode'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <slot name="image"></slot>
+    <slot></slot>
+    `
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
+        ));
+    }
+    #shadowRoot;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    disconnectedCallback() {
+        console.debug(`${LabelView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${LabelView.name} ⚡️ connect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'system-image':
+                let image = this.querySelector(':scope>[slot=image]');
+                if (newValue) {
+                    image ??= this.appendChild($(`<i slot="image" style="line-height: 1.05"></i>`, '>1'));
+                    image.setAttribute('class', `ph ph-${newValue}`);
+                }
+                else
+                    image?.remove();
+                break;
+            case 'title':
+                let title = this.querySelector(':scope>:not([slot])');
+                if (newValue) {
+                    title ??= this.appendChild($(`<span></span>`, '>1'));
+                    title.textContent = newValue;
+                }
+                else
+                    title?.remove();
+                break;
+        }
+    }
+}

package/generated/components/list-view.d.ts

@@ -0,0 +1,5 @@
+export declare class ListView extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/list-view.js

@@ -0,0 +1,29 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { listActive, onoff } from '../internal/utils';
+export class ListView extends HTMLElement {
+    // static formAssociated = true
+    // #internals
+    // #options
+    // #focusedIndex = 0
+    // #selected = new Set()
+    constructor() {
+        super();
+        // this.#internals = this.attachInternals()
+        // this.tabIndex = 0
+    }
+    disconnectedCallback() {
+        console.debug(`${ListView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        console.debug(`${ListView.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(listActive(this), this).on());
+        // this.setAttribute('role', 'listbox')
+        // this.setAttribute('aria-multiselectable', 'true')
+        // this.#options = Array.from(this.querySelectorAll('[option]'))
+        // this.addEventListener('pointerleave', this.#onCancel)
+        // this.addEventListener('click', this.#onClick)
+        // this.addEventListener('keydown', this.#onKeyDown)
+        // this.#updateOptionAttributes()
+    }
+}

package/generated/components/menu-view.d.ts

@@ -0,0 +1,9 @@
+export declare class MenuView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/menu-view.js

@@ -0,0 +1,138 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, onoff, touchGlass } from '../internal/utils';
+export class MenuView extends HTMLElement {
+    static get observedAttributes() {
+        return ['open', 'closing', 'label'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+  <button type="button" part="root button menu-summary">
+    <slot name="label"></slot>
+  </button>
+  <dialog part="root menu-dialog" autofocus inert>
+    <form part="root menu-form" method="dialog" novalidate>
+      <div part="root menu-scrollable">
+        <slot></slot>
+      </div>
+    </form>
+  </dialog>`));
+    }
+    #shadowRoot;
+    #dialog;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        // const dialog = this.#shadowRoot.querySelector('dialog'),
+        //   trigger = this.#shadowRoot.querySelector('button')
+        // trigger?.removeEventListener('click', this.#handleTriggerClick)
+        // dialog?.removeEventListener('click', this.#handleDialogClick)
+        // dialog?.removeEventListener('close', this.#handleDialogClose)
+        // dialog?.removeEventListener('cancel', this.#handleDialogCancel)
+        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
+        summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
+        dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
+        const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
+        CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'click', listener: this.#handleDialogClick },
+            { types: 'close', listener: this.#handleDialogClose },
+            { types: 'cancel', listener: this.#handleDialogCancel },
+        ], this.#dialog).on());
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, (evt) => {
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                return true;
+            if (target.matches('menu-view'))
+                return false;
+            if (!target.closest('menu-view[open]'))
+                return false;
+            return true;
+        }), this).on());
+        const newAnchorName = `--menu-view-${self.crypto.randomUUID()}`;
+        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
+        summaryPart?.style.setProperty('anchor-name', newAnchorName, 'important'); // override unset:all // $.prop('anchor-name', newAnchorName, summaryPart, 'important') //
+        dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'open':
+                if (!this.#dialog)
+                    break;
+                this.#dialog.inert = null === newValue;
+                if (null === newValue && this.#dialog.open) {
+                    console.debug(`${_a.name} ⚡️ will-close`);
+                    this.setAttribute('closing', '');
+                    Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
+                        if (!this.hasAttribute('closing'))
+                            return;
+                        this.#dialog?.close();
+                        this.removeAttribute('closing');
+                    });
+                }
+                if ('' === newValue && !this.#dialog.open) {
+                    console.debug(`${_a.name} ⚡️ will-open`);
+                    this.removeAttribute('closing');
+                    const form = this.#shadowRoot.querySelector('form');
+                    form.scrollTop = 0;
+                    this.#dialog.showModal();
+                }
+                break;
+            case 'label':
+                let label = this.querySelector(':scope>[slot=label]');
+                if (newValue) {
+                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label?.remove();
+                break;
+        }
+    }
+    #handleDialogClick = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (target.matches('dialog'))
+            return this.toggleAttribute('open', false); // click outside
+        target.scrollIntoView({
+            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+        if (!target.closest('button'))
+            return;
+        // TODO: Handle btns this.toggleAttribute('open', false)
+        this.toggleAttribute('open', false);
+        // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
+    };
+    #handleTriggerClick = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.toggleAttribute('open', true);
+    };
+    // intercept to modify open attr
+    #handleDialogCancel = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!evt.cancelable)
+            return;
+        evt.preventDefault();
+        this.toggleAttribute('open', false);
+    };
+    #handleDialogClose = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
+    };
+}
+_a = MenuView;

package/generated/components/navigation-large-title.d.ts

@@ -0,0 +1,6 @@
+export declare class NavigationLargeTitle extends HTMLElement {
+    #private;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}