@swiftwc/ui 0.0.0-dev.17 → 0.0.0-dev.19

package/generated/client/index.js

@@ -167,9 +167,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         // prepare new
         const toolbarExclusion = 0 < modalViews.length
             ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
-            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length
-            ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)')
-            : (value, index, array) => value;
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
         for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
             bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
         for (const bt of tos?.filter?.(bodyExclusion) ?? []) {
@@ -185,10 +183,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         }
         else {
             console.debug(`⚡️ view-transition-start (${type})`);
-            await Promise.allSettled([
-                ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-                ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ]);
+            await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
             console.debug(`⚡️ view-transition-end (${type})`);
         }
         if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
@@ -249,10 +244,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
             el.close(); // close old inbetween modals
         // capture trans
         console.debug(`⚡️ view-transition-start (${type})`);
-        await Promise.allSettled([
-            ...(from.body?.getAnimations().map(({ finished }) => finished) ?? []),
-            ...(to.body?.getAnimations().map(({ finished }) => finished) ?? []),
-        ]);
+        await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
         console.debug(`⚡️ view-transition-end (${type})`);
         if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;

package/generated/components/content-unavailable-view.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export declare class ContentUnavailableView 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/content-unavailable-view.js

@@ -0,0 +1,78 @@
+import { CleanupRegistry } from '#internal/class/cleanup-registry.js';
+import { $, onoff } from '#internal/utils/index.js';
+import { I18n } from '../i18n';
+/**
+ * @summary A message with a title and extra information that you show when part of your app can’t be used.
+ *
+ * @example <content-unavailable-view search></content-unavailable-view>
+ *
+ * @example <content-unavailable-view search="foo"></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><i class="ph ph-tray" slot="image" foreground="secondary"></i></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ *
+ * @example <content-unavailable-view padding><label-view title="No Mail"><svg slot="image" foreground="secondary" ...>...</svg></label-view><label-view title="New mails you receive will appear here." foreground="secondary" slot="description"></label-view><button is="borderless-button" type="button" tabindex="0" slot="actions"><label-view title="Switch Account"></label-view></button></content-unavailable-view>
+ *
+ * @slot description
+ * @slot actions
+ *
+ */
+export class ContentUnavailableView extends HTMLElement {
+    static get observedAttributes() {
+        return ['search'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+      <div part="root content-unavailable-title-stack">
+        <slot></slot>
+      </div>
+      <div part="root content-unavailable-description-stack">
+        <slot name="description"></slot>
+      </div>
+      <div part="root content-unavailable-actions-stack">
+        <slot name="actions"></slot>
+      </div>`, ''));
+    }
+    #shadowRoot;
+    #slots;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        this.#slots = {
+            '': this.#shadowRoot.querySelector('slot:not([name])') ?? undefined,
+            description: this.#shadowRoot.querySelector('slot[name="description"]') ?? undefined,
+            actions: this.#shadowRoot.querySelector('slot[name="actions"]') ?? undefined,
+        };
+    }
+    disconnectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${ContentUnavailableView.name} ⚡️ connect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${ContentUnavailableView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'search':
+                if (oldValue === newValue)
+                    break;
+                this.#renderSearch(newValue);
+                CleanupRegistry.unregister(this, 'i18n');
+                CleanupRegistry.register(this, onoff('localechange', () => {
+                    this.#renderSearch(this.getAttribute('search'));
+                }, I18n.on).on(), 'i18n');
+                break;
+        }
+    }
+    #renderSearch = (search) => {
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="image" foreground="secondary"></i></label-view>`)), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`));
+        if (search) {
+            const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
+            titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));
+        }
+        else
+            titleLabel?.setAttribute('title', I18n.t('SearchUnavailableContent').NoLabel);
+        descText.setAttribute('title', I18n.t('SearchUnavailableContent').Description);
+    };
+}

package/generated/components/date-picker.js

@@ -61,7 +61,7 @@ export class DatePicker extends FormAssociatedBase {
         super.connectedCallback();
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         this.#render();
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.#render();
         }, I18n.on).on());
         // finally
@@ -113,9 +113,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     get datePickerStyle() {
-        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '')
-            ? this.getAttribute('date-picker-style')
-            : 'automatic';
+        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
         console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);

package/generated/components/index.d.ts

@@ -1,11 +1,9 @@
-/**
- * @file Automatically generated by barrelsby.
- */
 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 './form-view';
@@ -21,6 +19,7 @@ export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
 export * from './section-view';
 export * from './sheet-view';

package/generated/components/index.js

@@ -1,11 +1,9 @@
-/**
- * @file Automatically generated by barrelsby.
- */
 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 './form-view';
@@ -21,6 +19,7 @@ export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
 export * from './section-view';
 export * from './sheet-view';

package/generated/components/navigation-split-view.d.ts

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export declare class NavigationSplitView extends NavigationView {
     constructor();
     disconnectedCallback(): void;

package/generated/components/navigation-split-view.js

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export class NavigationSplitView extends NavigationView {
     constructor() {
         super();

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

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export declare class NavigationStack extends NavigationView {
     constructor();
     disconnectedCallback(): void;

package/generated/components/navigation-stack.js

@@ -1,4 +1,7 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export class NavigationStack extends NavigationView {
     constructor() {
         super();

package/generated/components/scroll-view-proxy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export declare class ScrollViewProxy extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/scroll-view-proxy.js

@@ -0,0 +1,14 @@
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export class ScrollViewProxy extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
+    }
+}

package/generated/components/sidebar-toggle.js

@@ -1,19 +1,11 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, debounce, onoff } from '../internal/utils';
+import { debounce, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class SidebarToggle extends HTMLElement {
-    // #ro
-    // #io
     constructor() {
         super();
-        // this.#ro = new ResizeObserver(
-        //   debounce(this.#handleMeasure.bind(this), 100, true)
-        // )
-        // this.#io = new IntersectionObserver((entries) => {
-        //   this._checkVisibility2(entries)
-        // })
     }
     connectedCallback() {
         console.debug(`${_a.name} ⚡️ connect`);
@@ -21,18 +13,13 @@ export class SidebarToggle extends HTMLElement {
         const entry = {
             target: this,
         };
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
         observers.observe(this, debounce(_a.#handleMeasure, 100, true)); //this.#ro?.observe(this)
-        // this.#io.observe(this)
         // @ts-expect-error
         _a.#handleMeasure([entry]);
-        // })
     }
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this); //this.#ro?.disconnect()
-        // this.#io.disconnect()
+        observers.unobserve(this);
         CleanupRegistry.unregister(this);
     }
     static query(target) {
@@ -42,62 +29,48 @@ export class SidebarToggle extends HTMLElement {
     // This triggers on show/hide of any of sidebar-toggle elements
     static #handleMeasure(entry) {
         console.debug(`${_a.name} ⚡️ measure`);
-        const target = entry?.target;
+        const { target } = entry ?? {};
+        if (!(target instanceof HTMLElement))
+            return;
         // set/remove css var/prop to parent based on shown/hidden
-        // for (const { target } of entries) {
-        const tv = target?.parentElement, width = target?.offsetWidth ?? 0;
-        // const gapProp =
-        //     getComputedStyle(tg).getPropertyValue('--toolbar-col-gap') || '0',
-        //   gap = parseFloat(gapProp) * 1 //(gapProp.endsWith('rem')? parseFloat(getComputedStyle(document.documentElement).fontSize): 1)
-        if (0 < width)
-            $.prop('--sidebar-toggle-padding-inline-start', `${width}px`, tv); //tv?.style?.setProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'], `${width}px`)
-        else
-            $.prop('--sidebar-toggle-padding-inline-start', null, tv); //tv?.style?.removeProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'])
-        // }
+        const tv = target.parentElement;
+        // inlineSize = entry.borderBoxSize?.at(0)?.inlineSize ?? entry.contentRect?.width ?? 0,
+        // blockSize = entry.borderBoxSize?.at(0)?.blockSize ?? entry.contentRect?.height ?? 0
+        self.requestAnimationFrame(() => {
+            const inlineSize = target.offsetWidth ?? 0;
+            if (0 < inlineSize)
+                tv?.style?.setProperty?.('--sidebar-toggle-padding-inline-start', `${inlineSize}px`); //$.prop('--sidebar-toggle-padding-inline-start', `${inlineSize}px`, tv) //
+            else
+                tv?.style?.removeProperty?.('--sidebar-toggle-padding-inline-start'); //$.prop('--sidebar-toggle-padding-inline-start', null, tv) //
+        });
         // auto close IF open
-        // for (const { target } of entries) {
         const { container, sideBar } = _a.query(target); //target?.closest('navigation-split-view,tab-view')
-        // const sideBar = container?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
         if (!sideBar?.open)
             return;
-        switch (container?.tagName) {
-            case 'NAVIGATION-SPLIT-VIEW':
-                // const sideBar = target?.parentElement?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
-                // if (!sideBar?.open) return
-                if (0 < target.offsetWidth && 0 < target.offsetHeight)
-                    return;
-                // sideBar?.close?.()
-                break;
-            case 'TAB-VIEW':
-                // const tabBar = container.querySelector<HTMLDialogElement>(':scope > dialog[is=tab-bar]')
-                // if (!tabBar?.open) return
-                // scan all toggles for anyone that is visible, sign that sidebar should stay open
-                if ([
-                    ...container.querySelectorAll(":scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle"),
-                ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
-                    return;
-                //tabBar?.close?.()
-                break;
-        }
-        sideBar?.close?.();
-        // }
+        self.requestAnimationFrame(() => {
+            switch (container?.tagName) {
+                case 'NAVIGATION-SPLIT-VIEW':
+                    if (0 < target.offsetWidth && 0 < target.offsetHeight)
+                        return;
+                    break;
+                case 'TAB-VIEW':
+                    // scan all toggles for anyone that is visible, sign that sidebar should stay open
+                    if ([
+                        ...container.querySelectorAll(':scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle' //,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle" ?? FIXME: removed this bc/ inside sidebar!
+                        ),
+                    ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
+                        return;
+                    break;
+            }
+            sideBar?.close?.();
+        });
     }
-    // _checkVisibility2(entries) {
-    //   entries.forEach((entry) => {
-    //     console.log('Visible in viewport?', entry.isIntersecting)
-    //   })
-    // }
     #handleClick(evt) {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target;
+        const { target } = evt;
         if (!target?.closest('button'))
             return;
         const { sideBar } = _a.query(target);
-        // const container = target?.closest('tab-view,navigation-split-view')
-        // const dialog =
-        //   'TAB-VIEW' === container?.tagName
-        //     ? container.querySelector<TabBar>('dialog[is="tab-bar"]')
-        //     : container?.querySelector<SidebarView>('dialog[is="sidebar-view"]')
         if (!sideBar?.open)
             sideBar?.showModal();
         else

package/generated/components/tab-bar.d.ts

@@ -1,4 +1,7 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 export declare class TabBar extends DialogBase {
     #private;
     constructor();

package/generated/components/tab-bar.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 export class TabBar extends DialogBase {
     constructor() {
         super();

package/generated/components/text-field.js

@@ -62,7 +62,7 @@ export class TextField extends FormAssociatedBase {
             { types: 'beforeinput', listener: this.#handleInputBeforeinput },
             { types: 'paste', listener: this.#handleInputPaste },
         ], this.#input).on());
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.text = this.text;
         }, I18n.on).on());
     }