snice 7.2.0 → 7.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/snice/SKILL.md +40 -13
- package/README.md +6 -5
- package/adapters/react/SniceProvider.js +1 -1
- package/adapters/react/SniceRouter.d.ts +2 -0
- package/adapters/react/SniceRouter.js +3 -2
- package/adapters/react/SniceRouter.js.map +1 -1
- package/adapters/react/matchRoute.d.ts +4 -1
- package/adapters/react/matchRoute.js +13 -3
- package/adapters/react/matchRoute.js.map +1 -1
- package/adapters/react/useRequestHandler.js +1 -1
- package/bin/analyzer-contracts.js +2 -1
- package/bin/project-analyzer.js +302 -14
- package/bin/templates/AI_GUIDANCE.md +6 -1
- package/bin/templates/default/README.md +1 -1
- package/bin/templates/default/src/components/app-header.ts +11 -16
- package/bin/templates/default/src/components/notification-badge.ts +5 -14
- package/bin/templates/default/src/components/search-bar.ts +21 -65
- package/bin/templates/default/src/pages/dashboard.ts +15 -11
- package/bin/templates/default/src/pages/data.ts +10 -13
- package/bin/templates/default/src/pages/notifications.ts +4 -9
- package/bin/templates/default/src/pages/profile.ts +2 -8
- package/bin/templates/default/src/pages/settings.ts +16 -16
- package/dist/cdn/accordion/snice-accordion.js +1 -1
- package/dist/cdn/action-bar/snice-action-bar.js +1 -1
- package/dist/cdn/activity-feed/snice-activity-feed.js +1 -1
- package/dist/cdn/alert/snice-alert.js +1 -1
- package/dist/cdn/app-tiles/snice-app-tiles.js +1 -1
- package/dist/cdn/approval-flow/snice-approval-flow.js +1 -1
- package/dist/cdn/audio-recorder/snice-audio-recorder.js +1 -1
- package/dist/cdn/availability/snice-availability.js +1 -1
- package/dist/cdn/avatar/snice-avatar.js +1 -1
- package/dist/cdn/avatar-group/snice-avatar-group.js +1 -1
- package/dist/cdn/badge/snice-badge.js +1 -1
- package/dist/cdn/banner/snice-banner.js +1 -1
- package/dist/cdn/binpack/snice-binpack.js +1 -1
- package/dist/cdn/book/snice-book.js +1 -1
- package/dist/cdn/booking/snice-booking.js +1 -1
- package/dist/cdn/breadcrumbs/snice-breadcrumbs.js +1 -1
- package/dist/cdn/button/snice-button.js +1 -1
- package/dist/cdn/calendar/snice-calendar.js +1 -1
- package/dist/cdn/camera/snice-camera.js +1 -1
- package/dist/cdn/camera-annotate/snice-camera-annotate.js +1 -1
- package/dist/cdn/candlestick/snice-candlestick.js +1 -1
- package/dist/cdn/card/snice-card.js +1 -1
- package/dist/cdn/carousel/snice-carousel.js +1 -1
- package/dist/cdn/cart/snice-cart.js +1 -1
- package/dist/cdn/chart/snice-chart.js +1 -1
- package/dist/cdn/chat/snice-chat.js +1 -1
- package/dist/cdn/checkbox/snice-checkbox.js +1 -1
- package/dist/cdn/chip/snice-chip.js +1 -1
- package/dist/cdn/code-block/snice-code-block.js +1 -1
- package/dist/cdn/color-display/snice-color-display.js +1 -1
- package/dist/cdn/color-picker/snice-color-picker.js +1 -1
- package/dist/cdn/command-palette/snice-command-palette.js +1 -1
- package/dist/cdn/comments/snice-comments.js +1 -1
- package/dist/cdn/countdown/snice-countdown.js +1 -1
- package/dist/cdn/cropper/snice-cropper.js +1 -1
- package/dist/cdn/data-card/snice-data-card.js +1 -1
- package/dist/cdn/date-picker/snice-date-picker.js +1 -1
- package/dist/cdn/date-range-picker/snice-date-range-picker.js +1 -1
- package/dist/cdn/date-time-picker/snice-date-time-picker.js +1 -1
- package/dist/cdn/diff/snice-diff.js +1 -1
- package/dist/cdn/divider/snice-divider.js +1 -1
- package/dist/cdn/doc/snice-doc.js +1 -1
- package/dist/cdn/draw/snice-draw.js +1 -1
- package/dist/cdn/drawer/snice-drawer.js +1 -1
- package/dist/cdn/empty-state/snice-empty-state.js +1 -1
- package/dist/cdn/estimate/snice-estimate.js +1 -1
- package/dist/cdn/file-gallery/snice-file-gallery.js +1 -1
- package/dist/cdn/file-upload/snice-file-upload.js +1 -1
- package/dist/cdn/flip-card/snice-flip-card.js +1 -1
- package/dist/cdn/flow/snice-flow.js +1 -1
- package/dist/cdn/form-layout/snice-form-layout.js +1 -1
- package/dist/cdn/funnel/snice-funnel.js +1 -1
- package/dist/cdn/gantt/snice-gantt.js +1 -1
- package/dist/cdn/gauge/snice-gauge.js +1 -1
- package/dist/cdn/grid/snice-grid.js +1 -1
- package/dist/cdn/heatmap/snice-heatmap.js +1 -1
- package/dist/cdn/image/snice-image.js +1 -1
- package/dist/cdn/input/snice-input.js +1 -1
- package/dist/cdn/invoice/snice-invoice.js +1 -1
- package/dist/cdn/kanban/snice-kanban.js +1 -1
- package/dist/cdn/key-value/snice-key-value.js +1 -1
- package/dist/cdn/kpi/snice-kpi.js +1 -1
- package/dist/cdn/layout/snice-layout.js +1 -1
- package/dist/cdn/leaderboard/snice-leaderboard.js +1 -1
- package/dist/cdn/link/snice-link.js +1 -1
- package/dist/cdn/link-preview/snice-link-preview.js +1 -1
- package/dist/cdn/list/snice-list.js +1 -1
- package/dist/cdn/location/snice-location.js +1 -1
- package/dist/cdn/login/snice-login.js +1 -1
- package/dist/cdn/map/snice-map.js +1 -1
- package/dist/cdn/markdown/snice-markdown.js +1 -1
- package/dist/cdn/masonry/snice-masonry.js +1 -1
- package/dist/cdn/menu/snice-menu.js +1 -1
- package/dist/cdn/message-strip/snice-message-strip.js +1 -1
- package/dist/cdn/modal/snice-modal.js +1 -1
- package/dist/cdn/music-player/snice-music-player.js +1 -1
- package/dist/cdn/nav/snice-nav.js +1 -1
- package/dist/cdn/network-graph/snice-network-graph.js +1 -1
- package/dist/cdn/notification-center/snice-notification-center.js +1 -1
- package/dist/cdn/order-tracker/snice-order-tracker.js +1 -1
- package/dist/cdn/org-chart/snice-org-chart.js +1 -1
- package/dist/cdn/pagination/snice-pagination.js +1 -1
- package/dist/cdn/paint/snice-paint.js +1 -1
- package/dist/cdn/pdf-viewer/snice-pdf-viewer.js +1 -1
- package/dist/cdn/permission-matrix/snice-permission-matrix.js +1 -1
- package/dist/cdn/podcast-player/snice-podcast-player.js +1 -1
- package/dist/cdn/popover/snice-popover.js +1 -1
- package/dist/cdn/pricing-table/snice-pricing-table.js +1 -1
- package/dist/cdn/product-card/snice-product-card.js +1 -1
- package/dist/cdn/progress/snice-progress.js +1 -1
- package/dist/cdn/progress-ring/snice-progress-ring.js +1 -1
- package/dist/cdn/qr-code/snice-qr-code.js +1 -1
- package/dist/cdn/qr-reader/snice-qr-reader.js +1 -1
- package/dist/cdn/radio/snice-radio.js +1 -1
- package/dist/cdn/range-slider/snice-range-slider.js +1 -1
- package/dist/cdn/rating/snice-rating.js +1 -1
- package/dist/cdn/receipt/snice-receipt.js +1 -1
- package/dist/cdn/recipe/snice-recipe.js +1 -1
- package/dist/cdn/runtime/README.md +2 -2
- package/dist/cdn/runtime/snice-runtime.esm.js +28 -8
- package/dist/cdn/runtime/snice-runtime.esm.js.map +1 -1
- package/dist/cdn/runtime/snice-runtime.esm.min.js +1 -1
- package/dist/cdn/runtime/snice-runtime.esm.min.js.map +1 -1
- package/dist/cdn/runtime/snice-runtime.js +28 -8
- package/dist/cdn/runtime/snice-runtime.js.map +1 -1
- package/dist/cdn/runtime/snice-runtime.min.js +1 -1
- package/dist/cdn/runtime/snice-runtime.min.js.map +1 -1
- package/dist/cdn/sankey/snice-sankey.js +1 -1
- package/dist/cdn/segmented-control/snice-segmented-control.js +1 -1
- package/dist/cdn/select/snice-select.js +1 -1
- package/dist/cdn/skeleton/snice-skeleton.js +1 -1
- package/dist/cdn/slider/snice-slider.js +1 -1
- package/dist/cdn/sortable/snice-sortable.js +1 -1
- package/dist/cdn/sparkline/snice-sparkline.js +1 -1
- package/dist/cdn/spinner/snice-spinner.js +1 -1
- package/dist/cdn/split-button/snice-split-button.js +1 -1
- package/dist/cdn/split-pane/snice-split-pane.js +1 -1
- package/dist/cdn/spotlight/snice-spotlight.js +1 -1
- package/dist/cdn/stat-group/snice-stat-group.js +1 -1
- package/dist/cdn/step-input/snice-step-input.js +1 -1
- package/dist/cdn/stepper/snice-stepper.js +1 -1
- package/dist/cdn/switch/snice-switch.js +1 -1
- package/dist/cdn/table/snice-table.esm.js +1 -1
- package/dist/cdn/table/snice-table.js +1 -1
- package/dist/cdn/tabs/snice-tabs.js +1 -1
- package/dist/cdn/tag/snice-tag.js +1 -1
- package/dist/cdn/tag-input/snice-tag-input.js +1 -1
- package/dist/cdn/terminal/snice-terminal.js +1 -1
- package/dist/cdn/testimonial/snice-testimonial.js +1 -1
- package/dist/cdn/textarea/snice-textarea.js +1 -1
- package/dist/cdn/time-picker/snice-time-picker.js +1 -1
- package/dist/cdn/time-range-picker/snice-time-range-picker.js +1 -1
- package/dist/cdn/timeline/snice-timeline.js +1 -1
- package/dist/cdn/timer/snice-timer.js +1 -1
- package/dist/cdn/toast/snice-toast.js +1 -1
- package/dist/cdn/tooltip/snice-tooltip.js +1 -1
- package/dist/cdn/tree/snice-tree.js +1 -1
- package/dist/cdn/treemap/snice-treemap.js +1 -1
- package/dist/cdn/user-card/snice-user-card.js +1 -1
- package/dist/cdn/video-player/snice-video-player.js +1 -1
- package/dist/cdn/virtual-scroller/snice-virtual-scroller.js +1 -1
- package/dist/cdn/waterfall/snice-waterfall.js +1 -1
- package/dist/cdn/weather/snice-weather.js +1 -1
- package/dist/cdn/work-order/snice-work-order.js +1 -1
- package/dist/index.cjs +25 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +25 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.iife.js +25 -5
- package/dist/index.iife.js.map +1 -1
- package/dist/react/SniceProvider.js +1 -1
- package/dist/react/SniceRouter.d.ts +2 -0
- package/dist/react/SniceRouter.js +3 -2
- package/dist/react/SniceRouter.js.map +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/matchRoute.d.ts +4 -1
- package/dist/react/matchRoute.js +13 -3
- package/dist/react/matchRoute.js.map +1 -1
- package/dist/react/useRequestHandler.js +1 -1
- package/dist/symbols.cjs +1 -1
- package/dist/symbols.esm.js +1 -1
- package/dist/transitions.cjs +1 -1
- package/dist/transitions.esm.js +1 -1
- package/dist/types/page-options.d.ts +15 -1
- package/dist/types/router-instance.d.ts +2 -1
- package/docs/ai/README.md +6 -4
- package/docs/ai/api.md +1 -1
- package/docs/ai/architecture.md +21 -8
- package/docs/ai/cli.md +4 -1
- package/docs/ai/controllers.md +11 -1
- package/docs/ai/decorators.md +1 -1
- package/docs/ai/react-integration.md +1 -0
- package/docs/ai/routing.md +25 -3
- package/docs/cli.md +4 -2
- package/docs/controllers.md +16 -4
- package/docs/react-integration.md +1 -0
- package/docs/routing.md +29 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { page } from '../router';
|
|
2
|
-
import { render, styles, html, css, context, observe, dispose } from 'snice';
|
|
2
|
+
import { render, styles, html, css, context, observe, dispose, state } from 'snice';
|
|
3
3
|
import type { Placard, Context } from 'snice';
|
|
4
4
|
import type { ApplicationContext } from '../context';
|
|
5
5
|
import { isAuthenticated } from '../guards/auth';
|
|
@@ -15,9 +15,9 @@ const placard: Placard = {
|
|
|
15
15
|
|
|
16
16
|
@page({ tag: 'dashboard-page', routes: ['/', '/dashboard'], guards: [isAuthenticated], placard })
|
|
17
17
|
export class DashboardPage extends HTMLElement {
|
|
18
|
-
userName = '';
|
|
19
|
-
notificationCount = 0;
|
|
20
|
-
isCompact = false;
|
|
18
|
+
@state() userName = '';
|
|
19
|
+
@state() notificationCount = 0;
|
|
20
|
+
@state() isCompact = false;
|
|
21
21
|
private unsubscribe: (() => void) | null = null;
|
|
22
22
|
|
|
23
23
|
@context()
|
|
@@ -48,7 +48,7 @@ export class DashboardPage extends HTMLElement {
|
|
|
48
48
|
@render()
|
|
49
49
|
renderContent() {
|
|
50
50
|
return html`
|
|
51
|
-
<div class="container">
|
|
51
|
+
<div class="container" class:compact=${this.isCompact}>
|
|
52
52
|
<div class="welcome">
|
|
53
53
|
<h1>Welcome, ${this.userName}!</h1>
|
|
54
54
|
<p class="subtitle">This is your dashboard</p>
|
|
@@ -87,12 +87,12 @@ export class DashboardPage extends HTMLElement {
|
|
|
87
87
|
<snice-card>
|
|
88
88
|
<h3>Architecture</h3>
|
|
89
89
|
<ul>
|
|
90
|
-
<li><strong>Pages:</strong>
|
|
91
|
-
<li><strong>Components:</strong> Reusable
|
|
92
|
-
<li><strong>Controllers:</strong>
|
|
93
|
-
<li><strong>Services:</strong>
|
|
90
|
+
<li><strong>Pages:</strong> Element orchestration</li>
|
|
91
|
+
<li><strong>Components:</strong> Reusable visual behavior</li>
|
|
92
|
+
<li><strong>Controllers:</strong> Application behavior for a set of elements</li>
|
|
93
|
+
<li><strong>Services:</strong> Host-free functions in this project</li>
|
|
94
94
|
<li><strong>Middleware:</strong> Fetch interceptors</li>
|
|
95
|
-
<li><strong>Daemons:</strong>
|
|
95
|
+
<li><strong>Daemons:</strong> Explicit state and lifecycle</li>
|
|
96
96
|
<li><strong>Guards:</strong> Route protection</li>
|
|
97
97
|
</ul>
|
|
98
98
|
</snice-card>
|
|
@@ -102,7 +102,7 @@ export class DashboardPage extends HTMLElement {
|
|
|
102
102
|
<ul>
|
|
103
103
|
<li><code>@page</code> - Route pages</li>
|
|
104
104
|
<li><code>@element</code> - Custom elements</li>
|
|
105
|
-
<li><code>@controller</code> -
|
|
105
|
+
<li><code>@controller</code> - Element-specific application behavior</li>
|
|
106
106
|
<li><code>@context</code> - Global state</li>
|
|
107
107
|
<li><code>@observe</code> - DOM observers</li>
|
|
108
108
|
<li><code>@watch</code> - Property watchers</li>
|
|
@@ -140,6 +140,10 @@ export class DashboardPage extends HTMLElement {
|
|
|
140
140
|
margin: 0 auto;
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
+
.container.compact {
|
|
144
|
+
padding: 1rem;
|
|
145
|
+
}
|
|
146
|
+
|
|
143
147
|
.welcome {
|
|
144
148
|
margin-bottom: 2rem;
|
|
145
149
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { page } from '../router';
|
|
2
|
-
import { render, styles, observe,
|
|
2
|
+
import { render, styles, observe, ready, html, css, state } from 'snice';
|
|
3
3
|
import type { Placard } from 'snice';
|
|
4
4
|
import { isAuthenticated } from '../guards/auth';
|
|
5
5
|
|
|
@@ -34,19 +34,16 @@ const MOCK_ITEMS: DataItem[] = [
|
|
|
34
34
|
|
|
35
35
|
@page({ tag: 'data-page', routes: ['/data'], guards: [isAuthenticated], placard })
|
|
36
36
|
export class DataPage extends HTMLElement {
|
|
37
|
-
allItems: DataItem[] = [];
|
|
38
|
-
filteredItems: DataItem[] = [];
|
|
39
|
-
searchQuery = '';
|
|
40
|
-
statusFilter: 'all' | 'active' | 'pending' | 'archived' = 'all';
|
|
41
|
-
@
|
|
37
|
+
@state() allItems: DataItem[] = [];
|
|
38
|
+
@state() filteredItems: DataItem[] = [];
|
|
39
|
+
@state() searchQuery = '';
|
|
40
|
+
@state() statusFilter: 'all' | 'active' | 'pending' | 'archived' = 'all';
|
|
41
|
+
@state() loading = true;
|
|
42
|
+
@state() compact = false;
|
|
42
43
|
|
|
43
44
|
@observe('resize')
|
|
44
45
|
handleResize(entries: ResizeObserverEntry[]) {
|
|
45
|
-
|
|
46
|
-
const table = this.shadowRoot?.querySelector('.data-table');
|
|
47
|
-
if (table) {
|
|
48
|
-
table.classList.toggle('compact', width < 600);
|
|
49
|
-
}
|
|
46
|
+
this.compact = entries[0].contentRect.width < 600;
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
@ready()
|
|
@@ -145,7 +142,7 @@ export class DataPage extends HTMLElement {
|
|
|
145
142
|
></snice-empty-state>
|
|
146
143
|
</when>
|
|
147
144
|
<default>
|
|
148
|
-
<div class="data-table">
|
|
145
|
+
<div class="data-table" class:compact=${this.compact}>
|
|
149
146
|
<div class="table-header">
|
|
150
147
|
<span class="col-title">Title</span>
|
|
151
148
|
<span class="col-status">Status</span>
|
|
@@ -158,7 +155,7 @@ export class DataPage extends HTMLElement {
|
|
|
158
155
|
<span class="description">${item.description}</span>
|
|
159
156
|
</div>
|
|
160
157
|
<div class="col-status">
|
|
161
|
-
<span class="status-dot" style
|
|
158
|
+
<span class="status-dot" style:background=${this.getStatusColor(item.status)}></span>
|
|
162
159
|
${item.status}
|
|
163
160
|
</div>
|
|
164
161
|
<div class="col-date">${item.createdAt}</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { page } from '../router';
|
|
2
|
-
import { render, styles, html, css, context, dispose,
|
|
2
|
+
import { render, styles, html, css, context, dispose, on, state } from 'snice';
|
|
3
3
|
import type { Placard, Context } from 'snice';
|
|
4
4
|
import type { ApplicationContext } from '../context';
|
|
5
5
|
import { isAuthenticated } from '../guards/auth';
|
|
@@ -16,8 +16,8 @@ const placard: Placard = {
|
|
|
16
16
|
|
|
17
17
|
@page({ tag: 'notifications-page', routes: ['/notifications'], guards: [isAuthenticated], placard })
|
|
18
18
|
export class NotificationsPage extends HTMLElement {
|
|
19
|
-
notifications: Notification[] = [];
|
|
20
|
-
filter: NotificationType | 'all' = 'all';
|
|
19
|
+
@state() notifications: Notification[] = [];
|
|
20
|
+
@state() filter: NotificationType | 'all' = 'all';
|
|
21
21
|
private unsubscribe: (() => void) | null = null;
|
|
22
22
|
|
|
23
23
|
@context()
|
|
@@ -38,11 +38,6 @@ export class NotificationsPage extends HTMLElement {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
@watch('filter')
|
|
42
|
-
onFilterChange() {
|
|
43
|
-
// Re-render triggers automatically via property change
|
|
44
|
-
}
|
|
45
|
-
|
|
46
41
|
get filteredNotifications(): Notification[] {
|
|
47
42
|
if (this.filter === 'all') return this.notifications;
|
|
48
43
|
return this.notifications.filter(n => n.type === this.filter);
|
|
@@ -124,7 +119,7 @@ export class NotificationsPage extends HTMLElement {
|
|
|
124
119
|
key=${notification.id}
|
|
125
120
|
.variant=${notification.type}
|
|
126
121
|
dismissible
|
|
127
|
-
@dismiss=${() => this.removeNotification(notification.id)}
|
|
122
|
+
@alert-dismiss=${() => this.removeNotification(notification.id)}
|
|
128
123
|
>
|
|
129
124
|
<strong>${notification.title}</strong>
|
|
130
125
|
<p>${notification.message}</p>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { page } from '../router';
|
|
2
|
-
import { render, styles, html, css, context, dispatch,
|
|
2
|
+
import { render, styles, html, css, context, dispatch, state } from 'snice';
|
|
3
3
|
import type { Placard, Context } from 'snice';
|
|
4
4
|
import type { Principal, User } from '../types/auth';
|
|
5
5
|
import { isAuthenticated } from '../guards/auth';
|
|
@@ -16,9 +16,8 @@ const placard: Placard = {
|
|
|
16
16
|
|
|
17
17
|
@page({ tag: 'profile-page', routes: ['/profile'], guards: [isAuthenticated], placard })
|
|
18
18
|
export class ProfilePage extends HTMLElement {
|
|
19
|
-
user: User | null = null;
|
|
19
|
+
@state() user: User | null = null;
|
|
20
20
|
private ctx?: Context;
|
|
21
|
-
isMobile = false;
|
|
22
21
|
|
|
23
22
|
@context()
|
|
24
23
|
handleContext(ctx: Context) {
|
|
@@ -27,11 +26,6 @@ export class ProfilePage extends HTMLElement {
|
|
|
27
26
|
this.user = principal?.user || null;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
|
-
@observe('media:(max-width: 640px)')
|
|
31
|
-
handleMediaChange(matches: boolean) {
|
|
32
|
-
this.isMobile = matches;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
29
|
@dispatch('user-logout')
|
|
36
30
|
async handleLogout() {
|
|
37
31
|
await logout();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { page } from '../router';
|
|
2
|
-
import { render, styles, context, dispatch, on, html, css } from 'snice';
|
|
2
|
+
import { render, styles, context, dispatch, on, html, css, live, state } from 'snice';
|
|
3
3
|
import type { Placard, Context } from 'snice';
|
|
4
4
|
import { isAuthenticated } from '../guards/auth';
|
|
5
5
|
import type { Principal, User } from '../types/auth';
|
|
@@ -17,11 +17,11 @@ const placard: Placard = {
|
|
|
17
17
|
@page({ tag: 'settings-page', routes: ['/settings'], guards: [isAuthenticated], placard })
|
|
18
18
|
export class SettingsPage extends HTMLElement {
|
|
19
19
|
private ctx?: Context;
|
|
20
|
-
displayName = '';
|
|
21
|
-
email = '';
|
|
22
|
-
theme: 'light' | 'dark' | 'system' = 'system';
|
|
23
|
-
notificationsEnabled = true;
|
|
24
|
-
saved = false;
|
|
20
|
+
@state() displayName = '';
|
|
21
|
+
@state() email = '';
|
|
22
|
+
@state() theme: 'light' | 'dark' | 'system' = 'system';
|
|
23
|
+
@state() notificationsEnabled = true;
|
|
24
|
+
@state() saved = false;
|
|
25
25
|
|
|
26
26
|
@context()
|
|
27
27
|
handleContext(ctx: Context) {
|
|
@@ -37,12 +37,12 @@ export class SettingsPage extends HTMLElement {
|
|
|
37
37
|
this.notificationsEnabled = localStorage.getItem('notifications-enabled') !== 'false';
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
handleNameInput(e:
|
|
41
|
-
this.displayName =
|
|
40
|
+
handleNameInput(e: CustomEvent<{ value: string }>) {
|
|
41
|
+
this.displayName = e.detail.value;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
handleEmailInput(e:
|
|
45
|
-
this.email =
|
|
44
|
+
handleEmailInput(e: CustomEvent<{ value: string }>) {
|
|
45
|
+
this.email = e.detail.value;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
setTheme(theme: 'light' | 'dark' | 'system') {
|
|
@@ -51,8 +51,8 @@ export class SettingsPage extends HTMLElement {
|
|
|
51
51
|
this.applyTheme(theme);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
this.notificationsEnabled =
|
|
54
|
+
handleNotificationsChange(e: CustomEvent<{ checked: boolean }>) {
|
|
55
|
+
this.notificationsEnabled = e.detail.checked;
|
|
56
56
|
localStorage.setItem('notifications-enabled', String(this.notificationsEnabled));
|
|
57
57
|
}
|
|
58
58
|
|
|
@@ -106,7 +106,7 @@ export class SettingsPage extends HTMLElement {
|
|
|
106
106
|
<div class="form-group">
|
|
107
107
|
<label>Display Name</label>
|
|
108
108
|
<snice-input
|
|
109
|
-
.value=${this.displayName}
|
|
109
|
+
.value=${live(this.displayName)}
|
|
110
110
|
@input-input=${this.handleNameInput}
|
|
111
111
|
placeholder="Your name"
|
|
112
112
|
></snice-input>
|
|
@@ -114,7 +114,7 @@ export class SettingsPage extends HTMLElement {
|
|
|
114
114
|
<div class="form-group">
|
|
115
115
|
<label>Email</label>
|
|
116
116
|
<snice-input
|
|
117
|
-
.value=${this.email}
|
|
117
|
+
.value=${live(this.email)}
|
|
118
118
|
@input-input=${this.handleEmailInput}
|
|
119
119
|
placeholder="your@email.com"
|
|
120
120
|
></snice-input>
|
|
@@ -156,8 +156,8 @@ export class SettingsPage extends HTMLElement {
|
|
|
156
156
|
<p class="toggle-desc">Receive real-time notification alerts</p>
|
|
157
157
|
</div>
|
|
158
158
|
<snice-switch
|
|
159
|
-
|
|
160
|
-
@change=${this.
|
|
159
|
+
.checked=${live(this.notificationsEnabled)}
|
|
160
|
+
@switch-change=${this.handleNotificationsChange}
|
|
161
161
|
></snice-switch>
|
|
162
162
|
</div>
|
|
163
163
|
</snice-card>
|