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

package/generated/snapshot/index.js

@@ -0,0 +1,58 @@
+import { onoff } from '../internal/utils';
+export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
+    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');
+        }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
+        this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
+        this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
+        console.debug(this.#config);
+    }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.3",
-  "description": "Elegant SwiftUI-inspired web components for ambitious web apps and web extensions.",
+  "version": "0.0.0-dev.31",
+  "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,45 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
-    "./styles.css": "./generated/styles.css",
-    "./scss": "./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",
+    "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": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
+    "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",
+    "prepackage": "rm -rf generated",
+    "package": "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,82 @@
+@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/progress-view';
+
+@forward 'components/fine-tooltip';
+
+@forward 'components/sticky-container';
+
+@forward 'components/sheet-view';
+
+@forward 'components/content-unavailable-view';
+
+@forward 'components/confirmation-dialog';
+@forward 'components/alert-dialog';
+
+@forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
+
+@forward 'components/h-stack';
+@forward 'components/v-stack';
+@forward 'components/h-flex-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,31 @@
+@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);
+}
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/_mixins.scss

@@ -0,0 +1,7 @@
+@forward 'mixins/index';
+
+@forward 'mixins/dialog';
+
+@forward 'mixins/button';
+
+@forward 'mixins/color';

package/scss/_placeholders.scss

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

package/scss/_transitions.scss

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

package/scss/_utils.scss

@@ -0,0 +1,9 @@
+@forward 'utils/index';
+
+@forward 'utils/frame';
+
+@forward 'utils/stacks';
+
+@forward 'utils/spacing';
+
+@forward 'utils/scroll-view';

package/scss/_vars.scss

@@ -1,3 +1,179 @@
-$base-layer: base !default;
-$components-layer: components !default;
-$transitions-layer: transitions !default;
+@use 'functions';
+@use 'sass:math';
+
+$base-layer: sw-base !default;
+$components-layer: sw-components !default;
+$nav-components-layer: sw-nav-components !default;
+$tab-components-layer: sw-tab-components !default;
+$utils-layer: sw-utils !default;
+$colors-layer: sw-colors !default;
+$ui-layer: sw-actions !default;
+$transitions-layer: sw-transitions !default;
+$final-layer: sw-final !default;
+
+$vt-fwd-class-name: fwd !default;
+
+$nav-split-view-2col-bp: 43rem !default;
+$nav-split-view-3col-bp: 64rem !default;
+
+// $ipad-sheet-view-inline-size: 12rem !default;
+$ipad-sheet-view-inline-size: 37rem !default;
+
+$ipad-sheet-view-aspect-ratio: math.div(4, 3) !default;
+
+// $ipad-portrait-bp: 20rem !default;
+$ipad-portrait-bp: 43rem !default;
+
+// $ipad-landscape-bp: 30rem !default;
+$ipad-landscape-bp: 68rem !default;
+
+$table-expanded-bp: 31rem !default;
+
+// SECTION: Defaults
+$picker-styles: menu;
+$label-styles: icon-only, title-only, title-and-icon;
+$list-styles: inset, inset-grouped, sidebar;
+$form-styles: inset, inset-grouped, sidebar;
+$table-styles: inset;
+
+$label-fonts: (
+  footnote: (
+    size: 1rem,
+    line: 1rem,
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    line: calc(1 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.875rem,
+    line: calc(1.25 / 0.875),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    line: 0.875rem,
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    line: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    line: calc(1.75 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    line: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    line: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    line: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    line: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    line: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    line: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes: (
+  mini: (
+    default: (
+      padding: 0.2rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.2rem,
+      border-radius: 0.4rem,
+    ),
+  ),
+  regular: (
+    default: (
+      padding: 0.6rem,
+      border-radius: 1.2rem,
+    ),
+    fine: (
+      padding: 0.6rem,
+      border-radius: 0.8rem,
+    ),
+  ),
+  small: (
+    default: (
+      padding: 0.4rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.4rem,
+      border-radius: 0.6rem,
+    ),
+  ),
+  large: (
+    default: (
+      padding: 1.2rem,
+      border-radius: 2.4rem,
+    ),
+    fine: (
+      padding: 1.2rem,
+      border-radius: 1.4rem,
+    ),
+  ),
+);
+
+$disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
+$table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
+$picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
+
+// SECTION: computed(s)
+
+$ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};
+$ipad-portrait-bp-min: $ipad-portrait-bp;
+$ipad-landscape-bp-max: #{functions.subtract-tiny($ipad-landscape-bp)};
+$ipad-landscape-bp-min: $ipad-landscape-bp;
+
+$ipad-sheet-view-height: math.div($ipad-sheet-view-inline-size, $ipad-sheet-view-aspect-ratio); //4/3
+
+$nav-split-view-2col-bp-max: #{functions.subtract-tiny($nav-split-view-2col-bp)};
+$nav-split-view-2col-bp-min: $nav-split-view-2col-bp;
+$nav-split-view-3col-bp-max: #{functions.subtract-tiny($nav-split-view-3col-bp)};
+$nav-split-view-3col-bp-min: $nav-split-view-3col-bp;
+
+@debug $ipad-portrait-bp-max;
+
+// SECTION: checks
+
+@if ($ipad-portrait-bp < $ipad-sheet-view-inline-size) {
+  @warn "$ipad-sheet-view-inline-size should not be larger than $ipad-portrait-bp! Breaks centering";
+}
+
+@if ($nav-split-view-3col-bp < $nav-split-view-2col-bp) {
+  @warn "$nav-split-view-2col-bp should not be larger than $nav-split-view-3col-bp!";
+}

package/scss/base/_layout.scss

@@ -0,0 +1,56 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  body-view,
+  navigation-stack,
+  navigation-split-view,
+  [is='full-screen'],
+  [is='sheet-view'] {
+    :where(&) {
+      position: relative;
+
+      grid-auto-flow: column;
+
+      grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(& > *:not([slot])) {
+      // & > *:not([slot]) {
+      @include mixins.span-all;
+    }
+  }
+
+  navigation-stack:has(> navigation-stack:not([hidden]),> navigation-split-view:not([hidden])),
+  navigation-stack:has(> body-view),
+  navigation-split-view:has(> body-view),
+  dialog:has(> body-view),
+  // body-view:has(> dialog),
+  body-view:has(> body-view) {
+    & > scroll-view,
+    & > [is='sidebar-view'] > scroll-view {
+      :where(&) {
+        --scroll-view-translate: translateX(var(--view-transition-leading-x));
+      }
+    }
+
+    // & > top-bar > tool-bar-item,
+    // & > bottom-bar > tool-bar-item,
+    // & > top-bar > tool-bar-item-group,
+    // & > bottom-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item-group {
+    & > tool-bar > tool-bar-item,
+    & > tool-bar > tool-bar-item-group,
+    & > [is='sidebar-view'] > tool-bar > tool-bar-item,
+    & > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
+      :where(&) {
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
+      }
+    }
+  }
+}