@swiftwc/ui 0.0.0-dev.35 → 0.0.0-dev.36

package/generated/client/index.js

@@ -4,6 +4,7 @@ import { I18n } from '../i18n';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { $, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+//#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
     const is = kebabCase(k);
@@ -101,6 +102,7 @@ if (0 < polyfills.size) {
 }
 // SECTION: Safari polyfill
 document.addEventListener('touchstart', () => { }, { passive: true });
+//#endregion
 // SECTION
 const handleHelp = ({ target, relatedTarget }) => {
     if (!(target instanceof HTMLElement && target))
@@ -164,7 +166,7 @@ if (mediaQueryList.matches)
         ['pointerout', handleDone],
     ])
         document.addEventListener(k, v, { passive: true });
-// SECTION: Transitions
+//#region Transitions
 const cleanup = (lm, type) => {
     let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
     if (['backwards', 'forwards'].includes(type ?? ''))
@@ -315,6 +317,8 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         await updateCallback();
     }
 };
+//#endregion
+//#region fns
 export const alert = async (title, message, actions, options) => {
     await navigator.locks.request('alert:', async () => {
         const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
@@ -410,6 +414,8 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
     //   // controller.signal.addEventListener('abort', onAbort, { once: true })
     // })
 };
+//#endregion
 void Snapshot.waitReady; // void Snapshot.setOwnConfig()
-// SECTION
+//#region exports
 export { I18n, lifecycleObserver, NavigationPath, Snapshot };
+//#endregion

package/generated/components/date-picker.d.ts

@@ -10,12 +10,12 @@ export declare class DatePicker extends FormAssociatedBase {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get datePickerStyle(): DatePickerStyle;
-    get selection(): {
+    get selectedDate(): {
         year: string;
         month: string;
         day: string;
     };
-    set selection(v: {
+    set selectedDate(v: {
         year: string;
         month: string;
         day: string;

package/generated/components/date-picker.js

@@ -69,7 +69,7 @@ export class DatePicker extends FormAssociatedBase {
         if (!this.hasAttribute('selection'))
             return;
         const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.selection = { year: y, month: m, day: d };
+        this.selectedDate = { year: y, month: m, day: d };
         this.#sendValueToForm(false);
     }
     disconnectedCallback() {
@@ -80,7 +80,7 @@ export class DatePicker extends FormAssociatedBase {
         switch (name) {
             case 'selection':
                 const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.selection = { year: y, month: m, day: d };
+                this.selectedDate = { year: y, month: m, day: d };
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -162,7 +162,7 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
-    get selection() {
+    get selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
         return {
             year: map.year ?? '',
@@ -170,7 +170,7 @@ export class DatePicker extends FormAssociatedBase {
             day: map.day ?? '',
         };
     }
-    set selection(v) {
+    set selectedDate(v) {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
@@ -217,7 +217,7 @@ export class DatePicker extends FormAssociatedBase {
             else
                 this.setValidity({});
         }
-        const selection = `${this.selection.year}-${this.selection.month}-${this.selection.day}`;
+        const selection = `${this.selectedDate.year}-${this.selectedDate.month}-${this.selectedDate.day}`;
         const entries = new FormData();
         entries.append(this.name, selection);
         this.#internals.setFormValue(entries);
@@ -431,7 +431,7 @@ export class DatePicker extends FormAssociatedBase {
             input.toggleAttribute('disabled', !disabled);
     };
     formResetCallback = () => {
-        this.selection = {
+        this.selectedDate = {
             year: '',
             month: '',
             day: '',

package/generated/components/list-view.js

@@ -1,15 +1,20 @@
 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()
+    // static #template: DocumentFragment
+    // static get template() {
+    //   return (this.#template ??= $(
+    //     String.raw`
+    //   <slot name="searchable"></slot>
+    //   <slot></slot>
+    //   `
+    //   ))
+    // }
+    // #shadowRoot
     constructor() {
         super();
-        // this.#internals = this.attachInternals()
-        // this.tabIndex = 0
+        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
+        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
     }
     disconnectedCallback() {
         console.debug(`${ListView.name} ⚡️ disconnect`);
@@ -18,12 +23,5 @@ export class ListView extends HTMLElement {
     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/css/index.css

@@ -1956,6 +1956,9 @@
     place-content: safe center;
     gap: 1rem;
   }
+  :where(h-stack[template="auto spacer"]) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
   :where(h-stack[template="spacer auto"]) {
     grid-template-columns: minmax(0, 1fr) auto;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.35",
+  "version": "0.0.0-dev.36",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_h-stack.scss

@@ -3,7 +3,7 @@
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: ((auto minmax(0, 1fr)), (minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
 
 @layer #{vars.$components-layer} {
   h-stack {

package/scss/placeholders/_lists.scss

@@ -494,7 +494,6 @@
           }
         }
       }
-      // }
     }
     // }
     // [is='disclosure-group'] summary [slot='marker'] {
@@ -505,6 +504,17 @@
     //     --itempadistart: calc(calc(var(--root-font-size) * 1px) * var(--list--accessory-size) + var(--list--item-padding-inline-start, 0px));
     //   }
     // }
+
+    // // SECTION: add searchable
+    // > [slot='searchable'] {
+    //   :where(&) {
+    //     position: sticky;
+
+    //     top: 20px
+
+    //     background: red;
+    //   }
+    // }
   }
 }