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

package/generated/components/tool-bar.js

@@ -0,0 +1,93 @@
+var _a;
+import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
+import { $, devFlags } from '../internal/utils';
+const observers = new ResizeObserverSingleton();
+/**
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot top-bar-leading - Places the item in the leading edge of the top bar
+ * @slot top-bar-principal - Places the item in the middle of the top bar
+ * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
+export class ToolBar extends HTMLElement {
+    static #template;
+    static get template() {
+        // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
+        return (this.#template ??= $(String.raw `
+    <div part="root top-bar">
+    <div part="root toolbar-leading-stack">
+      <slot name="cancellation-action"></slot>
+      <slot name="destructive-action"></slot>
+      <slot name="top-bar-leading"></slot>
+    </div>
+    <div part="root toolbar-principal-stack">
+      <slot name="top-bar-principal"></slot>
+    </div>
+    <div part="root toolbar-trailing-stack">
+      <slot name="top-bar-trailing"></slot>
+      <slot name="primary-action"></slot>
+      <slot name="confirmation-action"></slot>
+    </div>
+  </div>
+  <div part="root bottom-bar">
+    <div part="root toolbar-leading-stack">
+      <slot name="bottom-bar-leading"></slot>
+    </div>
+    <div part="root toolbar-principal-stack">
+      <slot name="bottom-bar-principal"></slot>
+    </div>
+    <div part="root toolbar-trailing-stack">
+      <slot name="bottom-bar-trailing"></slot>
+    </div>
+  </div>`));
+    }
+    #shadowRoot;
+    get #scrollView() {
+        return this.parentElement?.querySelector(':scope>scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        // NOTE: wait for config
+        // Snapshot.waitReady.then(() => {
+        for (const el of this.#shadowRoot.querySelectorAll(`[part*="toolbar-leading-stack"],[part*="toolbar-trailing-stack"]`))
+            observers.observe(el, this.#measureStacks.bind(this));
+        // })
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+    }
+    #measureStacks(entry) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (this.closest('[hidden]'))
+            return;
+        const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';
+        const parentMap = {
+            'top-bar': 'navbar',
+            'bottom-bar': 'toolbar', //'bottombar',
+        };
+        const { contentRect: { width }, target, } = entry;
+        const parentPart = target.parentElement?.part.contains('top-bar') ? 'top-bar' : target.parentElement?.part.contains('bottom-bar') ? 'bottom-bar' : null;
+        if (!parentPart)
+            return;
+        const side = target.part.contains(leading) ? 'inline-start' : target.part.contains(trailing) ? 'inline-end' : null;
+        if (!side)
+            return;
+        const prop = `--${parentMap[parentPart]}-padding-${side}`;
+        this.#scrollView?.style?.setProperty(prop, `${Math.round(width)}px`); // $.prop(prop, `${Math.round(width)}px`, this.#scrollView) //
+    }
+}
+_a = ToolBar;

package/generated/components/v-keyboard.d.ts

@@ -0,0 +1,15 @@
+/**
+ * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
+ * So we live with a pescy body-scrollbar that shows up on resize on desktops.
+ *
+ * @summary Required component, used to handle the virtual keyboard on touch devices.
+ *
+ * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
+ */
+export declare class VKeyboard extends HTMLElement {
+    #private;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    set shouldKeyboardBeOpen(fn: () => boolean);
+}

package/generated/components/v-keyboard.js

@@ -0,0 +1,89 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, devFlags, frame, onoff, sleep } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+/**
+ * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
+ * So we live with a pescy body-scrollbar that shows up on resize on desktops.
+ *
+ * @summary Required component, used to handle the virtual keyboard on touch devices.
+ *
+ * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
+ */
+export class VKeyboard extends HTMLElement {
+    /**
+     * Change like this:
+     * document.querySelector('v-keyboard').shouldKeyboardBeOpen = () => document.activeElement.tagName === 'INPUT'
+     */
+    #shouldKeyboardBeOpenCallback = () => {
+        return 'INPUT' === document.activeElement?.tagName && 'text' === document.activeElement?.getAttribute('type');
+    };
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        this.inert = true;
+        CleanupRegistry.register(this, onoff([
+            { types: 'scroll', listener: this.#handleWindowScroll },
+            { types: 'orientationchange', listener: this.#handleWindowOrientationchange },
+        ], self).on());
+        CleanupRegistry.register(this, onoff('resize', this.#handleVisualViewportResize, self.visualViewport ?? undefined, { passive: true }).on());
+        this.#handleVisualViewportResize();
+        //
+        CleanupRegistry.register(this, onoff('focusin', this.#handleBodyFocusin, document.body).on());
+        Snapshot.waitReady.then(() => {
+            document.documentElement.style.setProperty('--root-font-size', parseFloat(self.getComputedStyle(document.documentElement).fontSize).toFixed(5));
+            CleanupRegistry.register(this, onoff('transitionrun', this.#handleDocumentTransitionrun, document.documentElement).on());
+        });
+    }
+    #handleDocumentTransitionrun = (evt) => {
+        if (evt.target !== document.documentElement || 'font-size' !== evt.propertyName)
+            return;
+        document.documentElement.style.setProperty('--root-font-size', parseFloat(self.getComputedStyle(document.documentElement).fontSize).toFixed(5));
+    };
+    #handleWindowScroll = () => {
+        self.scrollTo(0, 0);
+    };
+    #handleVisualViewportResize = () => {
+        const dvh = self.visualViewport?.height ?? 0, fullLvh = this.offsetHeight;
+        const diff = Math.abs(self.outerHeight - (this.#shouldKeyboardBeOpenCallback() ? dvh : fullLvh));
+        $.prop('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        $.prop('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        $.prop('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`)
+        self.scrollTo(0, 0);
+    };
+    #handleWindowOrientationchange = async () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ orientationchange`);
+        if (!(await frame(this)))
+            return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
+        this.#ifKeyboardScrollIntoActiveElement();
+    };
+    #handleBodyFocusin = async () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ focusin`);
+        await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
+        if (!this.isConnected)
+            return;
+        this.#ifKeyboardScrollIntoActiveElement();
+    };
+    #ifKeyboardScrollIntoActiveElement = () => {
+        if (!this.#shouldKeyboardBeOpenCallback() || !document.activeElement)
+            return;
+        const parent = document.activeElement?.closest('scroll-view');
+        parent?.centerScrollToElement?.(document.activeElement);
+    };
+    set shouldKeyboardBeOpen(fn) {
+        if ('function' !== typeof fn)
+            throw new TypeError(`fn must be typeof function`);
+        this.#shouldKeyboardBeOpenCallback = fn;
+    }
+}
+_a = VKeyboard;

package/generated/components/v-stack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ *
+ * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ */
+export declare class VStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/v-stack.js

@@ -0,0 +1,19 @@
+import { devFlags } from '../internal/utils';
+/**
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ *
+ * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ */
+export class VStack extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${VStack.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${VStack.name} ⚡️ disconnect`);
+    }
+}