diff --git a/packages/demo-pwa/package.json b/packages/demo-pwa/package.json index 19e65189..f1f27f76 100644 --- a/packages/demo-pwa/package.json +++ b/packages/demo-pwa/package.json @@ -36,6 +36,7 @@ "devDependencies": { "@alwatr/fsm": "^2.0.0", "@alwatr/logger": "^1.1.5", - "@alwatr/signal": "^2.0.0" + "@alwatr/signal": "^2.0.0", + "@ionic/core": "^7.4.1" } } diff --git a/packages/demo-pwa/src/main.css b/packages/demo-pwa/src/main.css index d7f2a92b..846c797f 100644 --- a/packages/demo-pwa/src/main.css +++ b/packages/demo-pwa/src/main.css @@ -1,2 +1,3 @@ @import '@alwatr/style/main.css'; @import '@alwatr/style/palettes/h260.css'; +@import '@ionic/core/css/core.css'; diff --git a/packages/demo-pwa/src/main.ts b/packages/demo-pwa/src/main.ts index 4228faf2..37121dae 100644 --- a/packages/demo-pwa/src/main.ts +++ b/packages/demo-pwa/src/main.ts @@ -1,6 +1,7 @@ import {render} from '@alwatr/fract'; import './main.css'; +import './share/ionic-component.js' import {appLogger} from './share/logger.js'; import {alwatrPwa, alwatrPwaContainer} from './ui/alwatr-pwa.js'; diff --git a/packages/demo-pwa/src/share/ionic-component.ts b/packages/demo-pwa/src/share/ionic-component.ts new file mode 100644 index 00000000..6b0fb82a --- /dev/null +++ b/packages/demo-pwa/src/share/ionic-component.ts @@ -0,0 +1,25 @@ +/* eslint-disable new-cap */ +import {initialize} from '@ionic/core/components'; +import {defineCustomElement as IonButton} from '@ionic/core/components/ion-button.js'; +import {defineCustomElement as IonCardContent} from '@ionic/core/components/ion-card-content.js'; +import {defineCustomElement as IonCardHeader} from '@ionic/core/components/ion-card-header.js'; +import {defineCustomElement as IonCardSubtitle} from '@ionic/core/components/ion-card-subtitle.js'; +import {defineCustomElement as IonCardTitle} from '@ionic/core/components/ion-card-title.js'; +import {defineCustomElement as IonCard} from '@ionic/core/components/ion-card.js'; +import {defineCustomElement as IonProgressBar} from '@ionic/core/components/ion-progress-bar.js'; +import {defineCustomElement as IonSearchbar} from '@ionic/core/components/ion-searchbar.js'; +import {defineCustomElement as IonSegmentButton} from '@ionic/core/components/ion-segment-button.js'; +import {defineCustomElement as IonSegment} from '@ionic/core/components/ion-segment.js'; + +initialize(); + +IonButton(); +IonCardContent(); +IonCardHeader(); +IonCardSubtitle(); +IonCardTitle(); +IonCard(); +IonProgressBar(); +IonSearchbar(); +IonSegment(); +IonSegmentButton(); diff --git a/packages/demo-pwa/src/ui/page-test.ts b/packages/demo-pwa/src/ui/page-test.ts index e8bd622a..62896239 100644 --- a/packages/demo-pwa/src/ui/page-test.ts +++ b/packages/demo-pwa/src/ui/page-test.ts @@ -1,13 +1,69 @@ -import {AlwatrDynamicDirective, directive, html, type PartInfo} from '@alwatr/fract'; +import {AlwatrDynamicDirective, directive, html, type Part, type PartInfo} from '@alwatr/fract'; export class AlwatrPageTestDirective extends AlwatrDynamicDirective { constructor(partInfo: PartInfo) { super(partInfo, ''); } + protected progress() { + this._logger.logMethod?.('progress'); + let progress = 0; + const progressBar = document.querySelector('ion-progress-bar'); + + if (!progressBar) return; + setInterval(() => { + progressBar.value = progress += 0.01; + if (progress > 1) { + setTimeout(() => { + progressBar.value = progress = 0; + }, 1000); + } + }, 50); + } + + override update(_part: Part, props: unknown[]): unknown { + this.progress(); + return super.update(_part, props); + } + render(name: string): unknown { this._logger.logMethodArgs?.('render', name); - return html`

Page ${name}

`; + return html` +
+ + + Default + + + Segment + + + Tab + + + File + + + + + + + + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +
+ `; } } diff --git a/yarn.lock b/yarn.lock index d7cbe210..268aec56 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1493,6 +1493,15 @@ resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q== +"@ionic/core@^7.4.1": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@ionic/core/-/core-7.4.1.tgz#35ba5fdc0edd19ef5cd9c65a795caf7807f2a904" + integrity sha512-ZM18jm8nvyw7HAWhLYmJ9HABqtvzw9tIn2/Oq70XBMkayO9f3LzrgHvRoOqIAMS00QYuAZw+5XhpGAvcqh/sqA== + dependencies: + "@stencil/core" "^4.3.0" + ionicons "7.1.0" + tslib "^2.1.0" + "@isaacs/cliui@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" @@ -2165,6 +2174,16 @@ "@sigstore/protobuf-specs" "^0.2.1" tuf-js "^2.1.0" +"@stencil/core@^2.18.0": + version "2.22.3" + resolved "https://registry.yarnpkg.com/@stencil/core/-/core-2.22.3.tgz#83987e20bba855c450f6d6780e3a20192603f13f" + integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng== + +"@stencil/core@^4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@stencil/core/-/core-4.3.0.tgz#ab7c4eedce1bd8947bfefdf6a0c19372f88c7fb6" + integrity sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A== + "@surma/rollup-plugin-off-main-thread@^2.2.3": version "2.2.3" resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053" @@ -5134,6 +5153,13 @@ internal-slot@^1.0.5: has "^1.0.3" side-channel "^1.0.4" +ionicons@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-7.1.0.tgz#25daa91345acedcb0f4fb7da670f5aff2e1f266a" + integrity sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg== + dependencies: + "@stencil/core" "^2.18.0" + ip@^1.1.5: version "1.1.8" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"