Skip to content

Commit bfce874

Browse files
estherbrunnerestherbrunner
committed
docs: update to ui-element v0.10.0, adjust new API
1 parent 4b6e4e0 commit bfce874

File tree

13 files changed

+32
-53
lines changed

13 files changed

+32
-53
lines changed

‎bun.lockb‎

1 Byte
Binary file not shown.

‎docs-src/components/input-field/input-field.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -211,11 +211,7 @@ export class InputField extends UIElement {
211211
if (typeof value === 'function')
212212
value = this.get('value')
213213
if (this.input?.value !== String(value))
214-
// this.self.emit('value-change', value) // New syntax since v0.10.0
215-
this.dispatchEvent(new CustomEvent('value-change', {
216-
detail: value,
217-
bubbles: true
218-
}))
214+
this.self.emit('value-change', value)
219215
}
220216

221217
}

‎docs-src/components/media-context/media-context.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { UIElement } from "@zeix/ui-element"
2-
import { Context } from "@zeix/ui-element/src/core/context"
1+
import { UIElement, type Context } from "@zeix/ui-element"
32

43
/* === Pure Functions === */
54

‎docs-src/components/tab-list/tab-list.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { asBoolean, setProperty, toggleAttribute, UIElement } from "@zeix/ui-element"
2-
import { Context } from "@zeix/ui-element/src/core/context"
1+
import { asBoolean, setProperty, toggleAttribute, UIElement, type Context } from "@zeix/ui-element"
32

43
export class TabList extends UIElement {
54
static observedAttributes = ['accordion']

‎docs-src/components/todo-form/todo-form.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,7 @@ export class TodoForm extends UIElement {
1414
queueMicrotask(() => {
1515
const value = input?.get<string>('value')?.trim()
1616
if (value) {
17-
// this.self.emit('add-todo', value) // New syntax since v0.10.0
18-
this.dispatchEvent(new CustomEvent('add-todo', {
19-
bubbles: true,
20-
detail: input?.get('value') ?? ''
21-
}))
17+
this.self.emit('add-todo', value)
2218
input?.clear()
2319
}
2420
})

‎docs/assets/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples/input-field.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -494,11 +494,7 @@
494494
<span class="line"><span style="color:#F92672"> if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">typeof</span><span style="color:#F8F8F2"> value </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'function'</span><span style="color:#F8F8F2">)</span></span>
495495
<span class="line"><span style="color:#F8F8F2"> value </span><span style="color:#F92672">=</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">'value'</span><span style="color:#F8F8F2">)</span></span>
496496
<span class="line"><span style="color:#F92672"> if</span><span style="color:#F8F8F2"> (</span><span style="color:#FD971F">this</span><span style="color:#F8F8F2">.input?.value </span><span style="color:#F92672">!==</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(value))</span></span>
497-
<span class="line"><span style="color:#88846F"> // this.self.emit('value-change', value) // New syntax since v0.10.0</span></span>
498-
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">dispatchEvent</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">new</span><span style="color:#A6E22E"> CustomEvent</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value-change'</span><span style="color:#F8F8F2">, {</span></span>
499-
<span class="line"><span style="color:#F8F8F2"> detail: value,</span></span>
500-
<span class="line"><span style="color:#F8F8F2"> bubbles: </span><span style="color:#AE81FF">true</span></span>
501-
<span class="line"><span style="color:#F8F8F2"> }))</span></span>
497+
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.self.</span><span style="color:#A6E22E">emit</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value-change'</span><span style="color:#F8F8F2">, value)</span></span>
502498
<span class="line"><span style="color:#F8F8F2"> }</span></span>
503499
<span class="line"></span>
504500
<span class="line"><span style="color:#F8F8F2">}</span></span>

‎docs/examples/media-context.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
<span class="file">media-context.ts</span>
1515
<span class="language">ts</span>
1616
</p>
17-
<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"> { UIElement } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
18-
<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { Context } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element/src/core/context"</span></span>
17+
<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"> { UIElement, </span><span style="color:#F92672">type</span><span style="color:#F8F8F2"> Context } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
1918
<span class="line"></span>
2019
<span class="line"><span style="color:#88846F">/* === Pure Functions === */</span></span>
2120
<span class="line"></span>

‎docs/examples/tab-list.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,7 @@
9393
<span class="file">tab-list.ts</span>
9494
<span class="language">ts</span>
9595
</p>
96-
<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"> { asBoolean, setProperty, toggleAttribute, UIElement } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
97-
<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { Context } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element/src/core/context"</span></span>
96+
<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"> { asBoolean, setProperty, toggleAttribute, UIElement, </span><span style="color:#F92672">type</span><span style="color:#F8F8F2"> Context } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> "@zeix/ui-element"</span></span>
9897
<span class="line"></span>
9998
<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">TabList</span><span style="color:#F92672"> extends</span><span> </span><span style="color:#A6E22E;font-style:italic;text-decoration:underline">UIElement</span><span style="color:#F8F8F2"> {</span></span>
10099
<span class="line"><span style="color:#F92672"> static</span><span style="color:#F8F8F2"> observedAttributes </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> [</span><span style="color:#E6DB74">'accordion'</span><span style="color:#F8F8F2">]</span></span>

‎docs/examples/todo-form.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,7 @@
101101
<span class="line"><span style="color:#A6E22E"> queueMicrotask</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
102102
<span class="line"><span style="color:#66D9EF;font-style:italic"> const</span><span style="color:#F8F8F2"> value </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input?.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">string</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'value'</span><span style="color:#F8F8F2">)?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">()</span></span>
103103
<span class="line"><span style="color:#F92672"> if</span><span style="color:#F8F8F2"> (value) {</span></span>
104-
<span class="line"><span style="color:#88846F"> // this.self.emit('add-todo', value) // New syntax since v0.10.0</span></span>
105-
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.</span><span style="color:#A6E22E">dispatchEvent</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">new</span><span style="color:#A6E22E"> CustomEvent</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'add-todo'</span><span style="color:#F8F8F2">, {</span></span>
106-
<span class="line"><span style="color:#F8F8F2"> bubbles: </span><span style="color:#AE81FF">true</span><span style="color:#F8F8F2">,</span></span>
107-
<span class="line"><span style="color:#F8F8F2"> detail: input?.</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:#E6DB74"> ''</span></span>
108-
<span class="line"><span style="color:#F8F8F2"> }))</span></span>
104+
<span class="line"><span style="color:#FD971F"> this</span><span style="color:#F8F8F2">.self.</span><span style="color:#A6E22E">emit</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'add-todo'</span><span style="color:#F8F8F2">, value)</span></span>
109105
<span class="line"><span style="color:#F8F8F2"> input?.</span><span style="color:#A6E22E">clear</span><span style="color:#F8F8F2">()</span></span>
110106
<span class="line"><span style="color:#F8F8F2"> }</span></span>
111107
<span class="line"><span style="color:#F8F8F2"> })</span></span>

0 commit comments

Comments
 (0)