Merge pull request #44 from zeixcom/feature/type-inference

Feature/type inference

Author: estherbrunner

CONTRIBUTING.md

@@ -97,7 +97,7 @@ bun run serve:docs
 
 To maintain a high-quality codebase, please follow these guidelines:
 
-* Follow the project’s existing coding style.
+* Follow the project's existing coding style.
 * Avoid unnecessary dependencies.
 * Use functional programming principles where applicable.
 * Prefer composition over inheritance.

README.md

@@ -1,6 +1,6 @@
 # UIElement
 
-Version 0.10.0
+Version 0.10.1
 
 **UIElement** - transform reusable markup, styles and behavior into powerful, reactive, and maintainable Web Components.
 
@@ -158,15 +158,17 @@ class TabList extends UIElement {
         // Handle click events on menu buttons and update active tab index
         this.all('menu button')
             .on('click', (_el, index) => () => this.set('active', index))
-            .sync((host, target, index) => setAttribute(
-                'aria-pressed',
-                () => host.get('active') === index ? 'true' : 'false')(host, target)
-            )
+            .sync((host, target, index) => {
+				setAttribute(
+					'aria-pressed',
+					() => host.get('active') === index ? 'true' : 'false'
+				)(host, target)
+			})
 
         // Pass open attribute to tab-panel elements based on active tab index
-        this.all('tab-panel').pass({
-            open: (_el, index) => () => index === this.get('active')
-        })
+        this.all('tab-panel').pass((_el, index) => ({
+            open: () => index === this.get('active')
+        }))
     }
 }
 TabList.define('tab-list')
@@ -218,7 +220,7 @@ import { UIElement, setText, setProperty, effect, enqueue } from '@zeix/ui-eleme
 
 class LazyLoad extends UIElement {
     static observedAttributes = ['src']
-    static states = {
+    states = {
         src: v => {
                 let url = ''
                 try {
@@ -238,12 +240,12 @@ class LazyLoad extends UIElement {
 
         // Show / hide loading message
         this.first('.loading')
-            .sync(setProperty('ariaHidden', () => !!this.get('error')))
+            .sync(setProperty('hidden', () => !!this.get('error')))
 
         // Set and show / hide error message
         this.first('.error')
             .sync(setText('error'))
-            .sync(setProperty('ariaHidden', () => !this.get('error')))
+            .sync(setProperty('hidden', () => !this.get('error')))
 
         // Load content from provided URL
         effect(async () => {

bun.lockb

@@ -1,26 +1,32 @@
-import { asBoolean, setProperty, toggleAttribute, UIElement } from "@zeix/ui-element"
+import { asBoolean, setProperty, toggleAttribute, UIElement } from "../../../"
 
-export class AccordionPanel extends UIElement {
-	static states = {
-		open: asBoolean,
-		collapsible: asBoolean
-	}
+export class AccordionPanel extends UIElement<{
+	open: boolean,
+    collapsible: boolean,
+}> {
+	static readonly localName = 'accordion-panel'
+	static observedAttributes = ['open', 'collapsible']
+
+	states = {
+        open: asBoolean,
+        collapsible: asBoolean
+    }
 
 	connectedCallback() {
 		super.connectedCallback()
-		
+
 		// Handle open and collapsible state changes
 		this.self.sync(
 			toggleAttribute('open'),
 			toggleAttribute('collapsible'),
-			setProperty('ariaHidden', () => !this.get('open') && !this.get('collapsible'))
+			setProperty('hidden', () => !this.get('open') && !this.get('collapsible'))
 		)
 
 		// Control inner details panel
-		this.first('details').sync(
+		this.first<HTMLDetailsElement>('details').sync(
 			setProperty('open'),
-			setProperty('ariaDisabled', () => !this.get('collapsible'))
+			setProperty('ariaDisabled', () => String(!this.get('collapsible')))
 		)
 	}
 }
-AccordionPanel.define('accordion-panel')
+AccordionPanel.define()

docs-src/components/accordion-panel/accordion-panel.ts

@@ -10,12 +10,16 @@
 	</p>
 	<pre><code class="language-html"></code></pre>
 	<input-button class="copy">
-		<button type="button" class="secondary small">Copy</button>
+		<button type="button" class="secondary small">
+			<span class="label">Copy</span>
+		</button>
 	</input-button>
 	<button type="button" class="overlay">Expand</button>
 </code-block></code></pre>
 	<input-button class="copy">
-		<button type="button" class="secondary small">Copy</button>
+		<button type="button" class="secondary small">
+			<span class="label">Copy</span>
+		</button>
 	</input-button>
 	<button type="button" class="overlay">Expand</button>
 </code-block>

docs-src/components/badge-button/badge-button.css

@@ -1,14 +1,16 @@
-import { asBoolean, toggleAttribute, UIElement } from "@zeix/ui-element"
+import { asBoolean, toggleAttribute, UIElement } from '../../../'
 // import Prism from 'prismjs'
 // import 'prismjs/components/prism-bash';
 // import 'prismjs/components/prism-json';
 // import 'prismjs/components/prism-typescript';
 
 import type { InputButton } from '../input-button/input-button'
 
-export class CodeBlock extends UIElement {
+export class CodeBlock extends UIElement<{ collapsed: boolean }> {
+	static readonly localName = 'code-block'
 	static observedAttributes = ['collapsed']
-	static states = {
+
+	states = {
 		collapsed: asBoolean
 	}
 
@@ -39,7 +41,7 @@ export class CodeBlock extends UIElement {
 			// Copy to clipboard
 			this.first('.copy').on('click', async (e: Event) => {
 				const copyButton = e.currentTarget as InputButton
-				const label = copyButton.textContent
+				const label = copyButton.textContent ?? ''
 				let status = 'success'
 				try {
 					await navigator.clipboard.writeText(content.textContent ?? '')
@@ -48,7 +50,7 @@ export class CodeBlock extends UIElement {
 					status = 'error'
 				}
 				copyButton.set('disabled', true)
-				copyButton.set('label', this.getAttribute(`copy-${status}`))
+				copyButton.set('label', this.getAttribute(`copy-${status}`) ?? label)
 				setTimeout(() => {
 					copyButton.set('disabled', false)
 					copyButton.set('label', label)
@@ -61,4 +63,4 @@ export class CodeBlock extends UIElement {
 		}
 	}
 }
-CodeBlock.define('code-block')
+CodeBlock.define()

docs-src/components/badge-button/badge-button.html

@@ -1,11 +1,13 @@
-import { setText, UIElement } from "@zeix/ui-element"
+import { setText, UIElement, RESET } from "../../../"
+
+export class HelloWorld extends UIElement<{ name?: string }> {
+	static localName = 'hello-world'
 
-export class HelloWorld extends UIElement {
 	connectedCallback() {
-		this.first('span').sync(setText('name'))
+        this.first('span').sync(setText('name'))
 		this.first('input').on('input', (e: Event) => {
-			this.set('name', (e.target as HTMLInputElement)?.value || undefined)
+			this.set('name', (e.target as HTMLInputElement)?.value || RESET)
 		})
 	}
 }
-HelloWorld.define('hello-world')
+HelloWorld.define()

docs-src/components/badge-button/badge-button.ts

@@ -1,4 +1,5 @@
 input-button {
+	position: relative;
 	display: inline-block;
 	flex: 0;
 
@@ -37,9 +38,9 @@ input-button {
 			color: var(--color-text-inverted);
 			background-color: var(--color-primary);
 			border-color: var(--color-primary-active);
-			opacity: var(--opacity-solid);
-
+			
 			&:not(:disabled) {
+				opacity: var(--opacity-solid);
 
 				&:hover {
 					background-color: var(--color-primary-hover);
@@ -55,9 +56,9 @@ input-button {
 			color: var(--color-text-inverted);
 			background-color: var(--color-error);
 			border-color: var(--color-error-active);
-			opacity: var(--opacity-solid);
-
+			
 			&:not(:disabled) {
+				opacity: var(--opacity-solid);
 
 				&:hover {
 					background-color: var(--color-error-hover);
@@ -73,9 +74,9 @@ input-button {
 			color: var(--color-text-inverted);
 			background-color: var(--color-success);
 			border-color: var(--color-success-active);
-			opacity: var(--opacity-solid);
-
+			
 			&:not(:disabled) {
+				opacity: var(--opacity-solid);
 
 				&:hover {
 					background-color: var(--color-success-hover);
@@ -99,4 +100,23 @@ input-button {
 			padding-inline: var(--space-m);
 		}
 	}
+
+	.badge {
+		position: absolute;
+		box-sizing: border-box;
+		top: calc(-1* var(--space-s));
+		right: calc(-1* var(--space-s));
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+		background-color: var(--color-primary);
+		color: var(--color-white);
+		padding: var(--space-xxs) var(--space-xs);
+		height: calc(2* var(--space-s));
+		min-width: calc(2* var(--space-s));
+		border-radius: var(--space-s);
+
+		&:empty {
+			display: none;
+		}
+	}
 }

docs-src/components/code-block/code-block.html

@@ -1,7 +1,10 @@
 <input-button>
-	<button type="button">Button</button>
+	<button type="button">
+		<span class="label">🛒 Shopping Cart</span>
+		<span class="badge">5</span>
+	</button>
 </input-button>
 
-<input-button>
+<input-button disabled>
 	<button type="submit" class="primary" disabled>Submit</button>
 </input-button>

docs-src/components/code-block/code-block.ts

@@ -1,16 +1,23 @@
-import { asBoolean, setProperty, setText, UIElement } from "@zeix/ui-element"
+import { asBoolean, setProperty, setText, UIElement } from "../../../"
 
-export class InputButton extends UIElement {
+export class InputButton extends UIElement<{
+    disabled: boolean,
+	label?: string,
+    badge?: string,
+}> {
+	static localName = 'input-button'
 	static observedAttributes = ['disabled']
-	static states = {
-		disabled: asBoolean
-	}
+
+	states = {
+        disabled: asBoolean,
+    }
 
 	connectedCallback() {
-		this.first('button').sync(
-			setText('label'),
-			setProperty('disabled')
-		)
-	}
+        super.connectedCallback()
+
+		this.first<HTMLButtonElement>('button').sync(setProperty('disabled'))
+		this.first('.label').sync(setText('label'))
+		this.first('.badge').sync(setText('badge'))
+    }
 }
-InputButton.define('input-button')
+InputButton.define()

docs-src/components/hello-world/hello-world.ts

@@ -1,5 +1,15 @@
 input-checkbox {
 	flex-grow: 1;
+	border-radius: var(--space-xs);
+
+	&:focus-within {
+		box-shadow: 0 0 var(--space-xxs) 2px var(--color-selection);
+	}
+
+	& input:focus {
+		outline: none;
+		box-shadow: none;
+	}
 
 	& label {
 		font-size: var(--font-size-s);