Skip to content
This repository was archived by the owner on Feb 18, 2026. It is now read-only.

Commit df58db6

Browse files
estherbrunnerestherbrunner
committed
docs(example): add module-pagination and module-colorinfo examples,
improve form-gauge
1 parent e094bd3 commit df58db6

File tree

226 files changed

+2109
-869
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

226 files changed

+2109
-869
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ export default component(
8282
'small',
8383
setText(() => qualification.get().label),
8484
),
85+
86+
// Enable/disable buttons based on value
87+
first('button.increment', setProperty('disabled', () => el.value >= max)),
88+
first('button.decrement', setProperty('disabled', () => el.value <= 0))
8589
]
8690
},
8791
)

‎docs-src/components/module-colorinfo/module-colorinfo.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
module-colorinfo {
2+
--swatch-size: var(--input-height);
3+
4+
display: inline-flex;
5+
gap: var(--space-l);
6+
7+
& summary {
8+
cursor: pointer;
9+
margin: 0 0 var(--space-s);
10+
11+
&::marker {
12+
color: var(--color-text-soft);
13+
}
14+
}
15+
16+
& details[open] summary {
17+
margin-bottom: var(--space-xs);
18+
}
19+
20+
.summary {
21+
display: inline-flex;
22+
align-items: center;
23+
gap: var(--space-s);
24+
margin-left: var(--space-xs);
25+
vertical-align: middle;
26+
}
27+
28+
.swatch {
29+
display: inline-block;
30+
background: var(--color-swatch);
31+
width: var(--swatch-size);
32+
height: var(--swatch-size);
33+
border-radius: var(--space-xxs);
34+
}
35+
36+
.label {
37+
display: inline-block;
38+
line-height: 1;
39+
}
40+
41+
& strong,
42+
& small {
43+
display: block;
44+
}
45+
46+
& strong {
47+
font-size: var(--font-size-m);
48+
}
49+
50+
& small {
51+
color: var(--color-text-soft);
52+
font-size: var(--font-size-xs);
53+
}
54+
55+
.details {
56+
display: flex;
57+
flex-wrap: wrap;
58+
gap: 0 var(--space-m);
59+
margin-left: var(--space-l);
60+
}
61+
62+
& dl {
63+
margin: 0 0 var(--space-s);
64+
display: inline-grid;
65+
grid-template-rows: auto auto;
66+
gap: var(--space-xxs) var(--space-xs);
67+
}
68+
69+
& dt {
70+
grid-column: 1;
71+
color: var(--color-text-soft);
72+
display: inline-block;
73+
text-align: right;
74+
font-size: var(--font-size-s);
75+
font-weight: 400;
76+
line-height: var(--line-height-s);
77+
}
78+
79+
& dd {
80+
grid-column: 2;
81+
display: inline-block;
82+
margin: 0;
83+
font-size: var(--font-size-s);
84+
line-height: var(--line-height-s);
85+
}
86+
}

‎docs-src/components/module-colorinfo/module-colorinfo.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<module-colorinfo color="#143dda">
2+
<details>
3+
<summary>
4+
<div class="summary">
5+
<span class="swatch"></span>
6+
<span class="label">
7+
<strong>Blue</strong>
8+
<small class="value">#143dda</small>
9+
</span>
10+
</div>
11+
</summary>
12+
<div class="details">
13+
<dl>
14+
<dt>Lightness:</dt>
15+
<dd class="lightness"></dd>
16+
<dt>Chroma:</dt>
17+
<dd class="chroma"></dd>
18+
<dt>Hue:</dt>
19+
<dd class="hue"></dd>
20+
</dl>
21+
<dl>
22+
<dt>OKLCH:</dt>
23+
<dd class="oklch"></dd>
24+
<dt>RGB:</dt>
25+
<dd class="rgb"></dd>
26+
<dt>HSL:</dt>
27+
<dd class="hsl"></dd>
28+
</dl>
29+
</div>
30+
</details>
31+
</module-colorinfo>

‎docs-src/components/module-colorinfo/module-colorinfo.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {
2+
asString,
3+
type Component,
4+
component,
5+
fromDOM,
6+
getText,
7+
setStyle,
8+
setText,
9+
} from '../../..'
10+
import 'culori/css'
11+
import {
12+
formatCss,
13+
formatHex,
14+
formatHsl,
15+
formatRgb,
16+
type Oklch,
17+
} from 'culori/fn'
18+
import { asOklch } from '../../functions/parser/as-oklch'
19+
20+
export type ModuleColorinfoProps = {
21+
name: string
22+
color: Oklch
23+
}
24+
25+
const formatNumber = (value: number, precision = 2) => value.toFixed(precision)
26+
27+
export default component(
28+
'module-colorinfo',
29+
{
30+
name: asString(fromDOM({ '.label strong': getText() }, '')),
31+
color: asOklch(),
32+
},
33+
(el, { first }) => {
34+
const fns = [
35+
setStyle('--color-swatch', () => formatCss(el.color)),
36+
first('.label strong', setText('name')),
37+
]
38+
for (const [name, fn] of Object.entries({
39+
value: () => formatHex(el.color),
40+
lightness: () => `${formatNumber(el.color.l * 100)}%`,
41+
chroma: () => formatNumber(el.color.c, 4),
42+
hue: () => `${formatNumber(el.color.h ?? 0)}°`,
43+
oklch: () =>
44+
`oklch(${formatNumber(el.color.l, 4)} ${formatNumber(el.color.c, 4)} ${formatNumber(el.color.h ?? 0)})`,
45+
rgb: () => formatRgb(el.color),
46+
hsl: () => formatHsl(el.color),
47+
})) {
48+
fns.push(first(`.${name}`, setText(fn)))
49+
}
50+
return fns
51+
},
52+
)
53+
54+
declare global {
55+
interface HTMLElementTagNameMap {
56+
'module-colorinfo': Component<ModuleColorinfoProps>
57+
}
58+
}

‎docs-src/components/module-pagination/module-pagination.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
module-pagination {
2+
display: inline-flex;
3+
align-items: center;
4+
gap: var(--space-s);
5+
6+
& label {
7+
display: inline-block;
8+
}
9+
10+
& input {
11+
display: inline-block;
12+
box-sizing: border-box;
13+
background: var(--color-input);
14+
color: var(--color-text);
15+
border: none;
16+
border-bottom: 1px solid var(--color-border);
17+
padding: var(--space-xs) var(--space-xxs);
18+
font-size: var(--font-size-m);
19+
width: 100%;
20+
height: var(--input-height);
21+
transition: color var(--transition-short) var(--easing-inout);
22+
text-align: right;
23+
}
24+
25+
.buttons {
26+
display: flex;
27+
align-items: center;
28+
}
29+
30+
& button {
31+
flex-grow: 0;
32+
box-sizing: border-box;
33+
height: var(--input-height);
34+
min-width: var(--input-height);
35+
border: 1px solid var(--color-border);
36+
background-color: var(--color-secondary);
37+
color: var(--color-text);
38+
padding: 0 var(--space-s);
39+
font-size: var(--font-size-s);
40+
line-height: var(--line-height-s);
41+
white-space: nowrap;
42+
cursor: pointer;
43+
transition: all var(--transition-shorter) var(--easing-inout);
44+
45+
&:disabled {
46+
opacity: var(--opacity-translucent);
47+
}
48+
49+
&:not(:disabled) {
50+
cursor: pointer;
51+
opacity: var(--opacity-solid);
52+
53+
&:hover {
54+
background-color: var(--color-secondary-hover);
55+
}
56+
57+
&:active {
58+
background-color: var(--color-secondary-active);
59+
}
60+
}
61+
62+
&:first-of-type {
63+
border-radius: var(--space-xs) 0 0 var(--space-xs);
64+
border-right-width: 0;
65+
}
66+
67+
&:last-of-type {
68+
border-radius: 0 var(--space-xs) var(--space-xs) 0;
69+
}
70+
}
71+
}

‎docs-src/components/module-pagination/module-pagination.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<module-pagination max="10" value="1">
2+
<div>
3+
<label>
4+
<span class="visually-hidden">Page</span>
5+
<input type="number" name="page" min="1" max="10" value="1" />
6+
</label>
7+
<span class="value visually-hidden" aria-current="page">1</span> of
8+
<span class="max">10</span>
9+
</div>
10+
<div class="buttons">
11+
<button type="button" class="prev" disabled aria-label="Previous page">
12+
❮
13+
</button>
14+
<button type="button" class="next" aria-label="Next page">❯</button>
15+
</div>
16+
</module-pagination>

‎docs-src/components/module-pagination/module-pagination.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {
2+
asInteger,
3+
type Component,
4+
component,
5+
on,
6+
setAttribute,
7+
setProperty,
8+
setText,
9+
show,
10+
} from '../../..'
11+
12+
export type ModulePaginationProps = {
13+
value: number
14+
max: number
15+
}
16+
17+
export default component(
18+
'module-pagination',
19+
{
20+
value: asInteger(1),
21+
max: asInteger(1),
22+
},
23+
(el, { first }) => [
24+
show(() => el.max > 1),
25+
setAttribute('value', () => String(el.value)),
26+
setAttribute('max', () => String(el.max)),
27+
first('.value', setText(() => String(el.value))),
28+
first('.max', setText(() => String(el.max))),
29+
on('keyup', ({ event }) => {
30+
if ((event.target as HTMLElement)?.localName === 'input') return
31+
const key = event.key
32+
if (key === 'ArrowLeft' && el.value > 1) el.value--
33+
else if (key === 'ArrowRight' && el.value < el.max) el.value++
34+
}),
35+
first(
36+
'input',
37+
[
38+
on('change', ({ target }) => {
39+
el.value = Math.max(1, Math.min(target.valueAsNumber, el.max))
40+
}),
41+
setProperty('value', () => String(el.value)),
42+
setProperty('max', () => String(el.max)),
43+
],
44+
'Add an <input[type="number"]> to enter the page number to go to.'
45+
),
46+
first(
47+
'button.prev',
48+
[
49+
on('click', () => {
50+
el.value--
51+
}),
52+
setProperty('disabled', () => el.value <= 1),
53+
],
54+
'Add a <button.prev> to go to previous page.',
55+
),
56+
first(
57+
'button.next',
58+
[
59+
on('click', () => {
60+
el.value++
61+
}),
62+
setProperty('disabled', () => el.value >= el.max),
63+
],
64+
'Add a <button.next> to go to next page.',
65+
),
66+
],
67+
)
68+
69+
declare global {
70+
interface HTMLElementTagNameMap {
71+
'module-pagination': Component<ModulePaginationProps>
72+
}
73+
}

‎docs-src/main.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
@import "./components/module-codeblock/module-codeblock.css";
1616
@import "./components/module-demo/module-demo.css";
1717
@import "./components/module-dialog/module-dialog.css";
18+
@import "./components/module-pagination/module-pagination.css";
1819
@import "./components/module-scrollarea/module-scrollarea.css";
1920
@import "./components/module-tabgroup/module-tabgroup.css";
2021
@import "./components/module-toc/module-toc.css";
2122
@import "./components/module-todo/module-todo.css";
23+
@import "./components/module-colorinfo/module-colorinfo.css";
2224
@import "./components/section-menu/section-menu.css";
2325
@import "./components/section-hero/section-hero.css";
2426
@import "./components/rating-stars/rating-stars.css";

‎docs-src/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import './components/module-carousel/module-carousel.ts'
1616
import './components/module-catalog/module-catalog.ts'
1717
import './components/module-codeblock/module-codeblock.ts'
1818
import './components/module-dialog/module-dialog.ts'
19+
import './components/module-pagination/module-pagination.ts'
1920
import './components/module-scrollarea/module-scrollarea.ts'
2021
import './components/module-tabgroup/module-tabgroup.ts'
2122
import './components/module-lazy/module-lazy.ts'
2223
import './components/module-todo/module-todo.ts'
24+
import './components/module-colorinfo/module-colorinfo.ts'
2325
import './components/rating-stars/rating-stars.ts'
2426
import './components/rating-feedback/rating-feedback.ts'
2527
import './components/calc-table/calc-table.ts'

‎docs-src/pages/api/classes/CircularMutationError.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Class: CircularMutationError
88

9-
Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/be16cef9b9f750168be795bfcb3a37afa34e2af7/src/core/errors.ts#L10)
9+
Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L10)
1010

1111
Error thrown when a circular dependency is detected in a selection signal
1212

@@ -24,7 +24,7 @@ Error thrown when a circular dependency is detected in a selection signal
2424

2525
> **new CircularMutationError**(`host`, `selector`): `CircularMutationError`
2626
27-
Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/be16cef9b9f750168be795bfcb3a37afa34e2af7/src/core/errors.ts#L15)
27+
Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L15)
2828

2929
#### Parameters
3030

0 commit comments

Comments
 (0)