Merge pull request #46 from zeixcom/feature/docs-examples

docs: update rating-stars example to use custom event

Author: estherbrunner

docs-src/components/rating-feedback/rating-feedback.ts

@@ -1,28 +1,26 @@
 import { setProperty, UIElement } from "../../../";
 import { InputButton } from "../input-button/input-button";
-import { RatingStars } from "../rating-stars/rating-stars";
 
 export class RatingFeedback extends UIElement<{
+	rating: number,
 	empty: boolean,
 	submitted: boolean
 }> {
 	static localName = 'rating-feedback'
 
 	states = {
+		rating: 0,
 		empty: true,
         submitted: false,
     }
 
 	connectedCallback() {
 		super.connectedCallback()
 
-		const stars = this.querySelector<RatingStars>('rating-stars')
-
 		// Event listeners for rating changes and form submission
 		this.self
 			.on('change-rating', (e: Event) => {
-				const rating = (e as CustomEvent<number>).detail
-				console.log(`Rating changed to ${rating}`)
+				this.set('rating', (e as CustomEvent<number>).detail)
 			})
 			.on('submit', (e: Event) => {
 				e.preventDefault()
@@ -47,12 +45,12 @@ export class RatingFeedback extends UIElement<{
 		// Effects on rating changes
 		this.first('.feedback').sync(setProperty(
 			'hidden',
-			() => this.get('submitted') || !(stars?.get('value') ?? 0)
+			() => this.get('submitted') || !(this.get('rating') ?? 0)
 		))
 		this.all('.feedback p').sync((host, target, index) => {
 			setProperty<HTMLElement, 'hidden'>(
 				'hidden',
-				() => stars?.get('value') !== index + 1
+				() => this.get('rating') !== index + 1
             )(host, target)
 		})
 

docs-src/global.css

@@ -93,7 +93,7 @@
 	}
 }
 
-@media screen and (min-width: 75em) and (max-width: 125em) {
+/* @media screen and (min-width: 75em) and (max-width: 125em) {
 	:root {
 		--font-size-xs: clamp(0.8125rem, 0.0694vw + 0.7604rem, 0.8438rem);
 		--font-size-s: clamp(1rem, 0.2778vw + 0.7917rem, 1.125rem);
@@ -103,7 +103,7 @@
 		--font-size-xxl: clamp(2.5rem, 2.7778vw + 0.4167rem, 3.75rem);
 		--font-size-xxxl: clamp(3.125rem, 4.1667vw, 5rem);
 	}
-}
+} */
 
 @media (prefers-color-scheme: dark) {
 	:root {

docs-src/pages/about-community.md

@@ -21,6 +21,7 @@ UIElement is an **open-source project**, actively developed by [Zeix AG](https:/
 
 * **Zeix AG**: [@zeixcom](https://github.com/zeixcom) – Maintainers and primary developers
 * **Esther Brunner**: [@estherbrunner](https://github.com/estherbrunner) – Lead developer
+* **Fabian Haefliger**: [@fabianhaef](https://github.com/fabianhaef) – Core team
 
 ### Sponsors
 

docs/about-community.html

@@ -105,6 +105,7 @@ <h3>Core Team &amp; Contributors</h3>
 <ul>
 <li><strong>Zeix AG</strong>: <a href="https://github.com/zeixcom">@zeixcom</a> – Maintainers and primary developers</li>
 <li><strong>Esther Brunner</strong>: <a href="https://github.com/estherbrunner">@estherbrunner</a> – Lead developer</li>
+<li><strong>Fabian Haefliger</strong>: <a href="https://github.com/fabianhaef">@fabianhaef</a> – Core Team</li>
 </ul>
 <h3>Sponsors</h3>
 <callout-box class="note">

docs/assets/main.css

@@ -174,29 +174,27 @@
 				</p>
 				<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { setProperty, UIElement } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "../../../"</span><span style="color:#F8F8F2">;</span></span>
 <span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { InputButton } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "../input-button/input-button"</span><span style="color:#F8F8F2">;</span></span>
-<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { RatingStars } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "../rating-stars/rating-stars"</span><span style="color:#F8F8F2">;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> class</span><span> </span><span style="color:#A6E22E;text-decoration:underline">RatingFeedback</span><span style="color:#F92672"> extends</span><span style="color:#A6E22E"> UIElement</span><span style="color:#F8F8F2">&#x3C;{</span></span>
+<span class="line"><span style="color:#F8F8F2">	rating</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F8F8F2">,</span></span>
 <span class="line"><span style="color:#F8F8F2">	empty</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span><span style="color:#F8F8F2">,</span></span>
 <span class="line"><span style="color:#F8F8F2">	submitted</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span></span>
 <span class="line"><span style="color:#F8F8F2">}> {</span></span>
 <span class="line"><span style="color:#F92672">	static</span><span style="color:#F8F8F2"> localName </span><span style="color:#F92672">=</span><span style="color:#E6DB74"> 'rating-feedback'</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#F8F8F2">	states </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> {</span></span>
+<span class="line"><span style="color:#F8F8F2">		rating: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">,</span></span>
 <span class="line"><span style="color:#F8F8F2">		empty: </span><span style="color:#AE81FF">true</span><span style="color:#F8F8F2">,</span></span>
 <span class="line"><span style="color:#F8F8F2">        submitted: </span><span style="color:#AE81FF">false</span><span style="color:#F8F8F2">,</span></span>
 <span class="line"><span style="color:#F8F8F2">    }</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#A6E22E">	connectedCallback</span><span style="color:#F8F8F2">() {</span></span>
 <span class="line"><span style="color:#FD971F">		super</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">connectedCallback</span><span style="color:#F8F8F2">()</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> stars </span><span style="color:#F92672">=</span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">RatingStars</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'rating-stars'</span><span style="color:#F8F8F2">)</span></span>
-<span class="line"></span>
 <span class="line"><span style="color:#88846F">		// Event listeners for rating changes and form submission</span></span>
 <span class="line"><span style="color:#FD971F">		this</span><span style="color:#F8F8F2">.self</span></span>
 <span class="line"><span style="color:#F8F8F2">			.</span><span style="color:#A6E22E">on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change-rating'</span><span style="color:#F8F8F2">, (</span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Event</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
-<span class="line"><span style="color:#66D9EF;font-style:italic">				const</span><span style="color:#F8F8F2"> rating </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> (e </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">CustomEvent</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">number</span><span style="color:#F8F8F2">>).detail</span></span>
-<span class="line"><span style="color:#F8F8F2">				console.</span><span style="color:#A6E22E">log</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">`Rating changed to </span><span style="color:#F92672">${</span><span style="color:#F8F8F2">rating</span><span style="color:#F92672">}</span><span style="color:#E6DB74">`</span><span style="color:#F8F8F2">)</span></span>
+<span class="line"><span style="color:#FD971F">				this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'rating'</span><span style="color:#F8F8F2">, (e </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">CustomEvent</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">number</span><span style="color:#F8F8F2">>).detail)</span></span>
 <span class="line"><span style="color:#F8F8F2">			})</span></span>
 <span class="line"><span style="color:#F8F8F2">			.</span><span style="color:#A6E22E">on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'submit'</span><span style="color:#F8F8F2">, (</span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Event</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
 <span class="line"><span style="color:#F8F8F2">				e.</span><span style="color:#A6E22E">preventDefault</span><span style="color:#F8F8F2">()</span></span>
@@ -221,12 +219,12 @@
 <span class="line"><span style="color:#88846F">		// Effects on rating changes</span></span>
 <span class="line"><span style="color:#FD971F">		this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.feedback'</span><span style="color:#F8F8F2">).</span><span style="color:#A6E22E">sync</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">setProperty</span><span style="color:#F8F8F2">(</span></span>
 <span class="line"><span style="color:#E6DB74">			'hidden'</span><span style="color:#F8F8F2">,</span></span>
-<span class="line"><span style="color:#F8F8F2">			() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'submitted'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">||</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">(stars?.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">??</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">)</span></span>
+<span class="line"><span style="color:#F8F8F2">			() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'submitted'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">||</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F">this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'rating'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">??</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">)</span></span>
 <span class="line"><span style="color:#F8F8F2">		))</span></span>
 <span class="line"><span style="color:#FD971F">		this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">all</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.feedback p'</span><span style="color:#F8F8F2">).</span><span style="color:#A6E22E">sync</span><span style="color:#F8F8F2">((</span><span style="color:#FD971F;font-style:italic">host</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">index</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
 <span class="line"><span style="color:#A6E22E">			setProperty</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLElement</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'hidden'</span><span style="color:#F8F8F2">>(</span></span>
 <span class="line"><span style="color:#E6DB74">				'hidden'</span><span style="color:#F8F8F2">,</span></span>
-<span class="line"><span style="color:#F8F8F2">				() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> stars?.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">!==</span><span style="color:#F8F8F2"> index </span><span style="color:#F92672">+</span><span style="color:#AE81FF"> 1</span></span>
+<span class="line"><span style="color:#F8F8F2">				() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'rating'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">!==</span><span style="color:#F8F8F2"> index </span><span style="color:#F92672">+</span><span style="color:#AE81FF"> 1</span></span>
 <span class="line"><span style="color:#F8F8F2">            )(host, target)</span></span>
 <span class="line"><span style="color:#F8F8F2">		})</span></span>
 <span class="line"></span>

docs/assets/main.js

@@ -3,55 +3,55 @@
 
 		<url>
 			<loc>index.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>1.0</priority>
 		</url>
 
 		<url>
 			<loc>getting-started.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>building-components.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>styling-components.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>data-flow.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>patterns-techniques.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>examples-recipes.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>api-reference.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 
 		<url>
 			<loc>about-community.html</loc>
-			<lastmod>2025-02-24T00:44:55.385Z</lastmod>
+			<lastmod>2025-03-03T15:55:02.970Z</lastmod>
 			<priority>0.8</priority>
 		</url>
 	</urlset>

docs/examples/rating-feedback.html

@@ -325,7 +325,7 @@ var CONTEXT_REQUEST = "context-request";
 class ContextRequestEvent extends Event {
   context;
   callback;
-  subscribe2;
+  subscribe;
   constructor(context, callback, subscribe2 = false) {
     super(CONTEXT_REQUEST, {
       bubbles: true,