Skip to content

Commit 33662fd

Browse files
titouanmathistitouanmathis
committed
Merge branch 'release/1.0.0-alpha.8'
2 parents a52d75f + 063123c commit 33662fd

33 files changed

+484
-257
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
## [v1.0.0-alpha.8](https://github.com/studiometa/ui/compare/1.0.0-alpha.7..1.0.0-alpha.8) (2024-09-25)
10+
11+
### Added
12+
13+
- **Action:** add support for handling multiple events ([#298](https://github.com/studiometa/ui/issues/298), [#299](https://github.com/studiometa/ui/pull/299), [b739f2b](https://github.com/studiometa/ui/commit/b739f2b))
14+
15+
### Changed
16+
17+
- ⚠️ **DataBind:** rename the `name` option to `group` ([#288](https://github.com/studiometa/ui/issues/288), [#297](https://github.com/studiometa/ui/pull/297), [5ea37c9](https://github.com/studiometa/ui/commit/5ea37c9))
18+
919
## [v1.0.0-alpha.7](https://github.com/studiometa/ui/compare/1.0.0-alpha.6..1.0.0-alpha.7) (2024-09-10)
1020

1121
### Fixed

‎composer.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "studiometa/ui",
3-
"version": "1.0.0-alpha.7",
3+
"version": "1.0.0-alpha.8",
44
"description": "A set of opiniated, unstyled and accessible components.",
55
"license": "MIT",
66
"require": {

‎package-lock.json

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/ui-workspace",
3-
"version": "1.0.0-alpha.7",
3+
"version": "1.0.0-alpha.8",
44
"private": true,
55
"workspaces": [
66
"packages/*"

‎packages/docs/components/atoms/Action/index.md

+9
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,12 @@ The `Target` component is a companion of the `Action` component that can be used
5252
:html="() => import('./stories/counter/app.twig')"
5353
:script="() => import('./stories/counter/app.js?raw')"
5454
/>
55+
56+
### Listening to multiple events
57+
58+
The advanced HTML [option `on:<event>[.<modifier>]`](./js-api.html#on-event-modifier) can be used to listen to multiple events on a single `Action` component.
59+
60+
<PreviewPlayground
61+
:html="() => import('./stories/multiple-events/app.twig')"
62+
:script="() => import('./stories/multiple-events/app.js?raw')"
63+
/>

‎packages/docs/components/atoms/Action/js-api.md

+20
Original file line numberDiff line numberDiff line change
@@ -159,3 +159,23 @@ This can be useful to destructure the first `ctx` parameter and make a direct re
159159
::: warning Advanced pattern
160160
The pattern described above with multiple components as targets is an advanced pattern that should be used with care, as it adds complexity to the DOM that might not be necessary.
161161
:::
162+
163+
### `on:<event>[.<modifier>]`
164+
165+
- Type: `string`
166+
- Format: `[<name>[(<selector>)] -> ]<effect>`
167+
168+
This option can be used to combine the [`on`](#on), [`target`](#target) and [`effect`](#effect) options into one single attributes. This option can be used to attach multiple events to a single `Action` component.
169+
170+
```html {3}
171+
<button
172+
data-component="Action"
173+
data-option-on:click.stop="target.$el.textContent = 'Clicked'"
174+
data-option-on:mouseenter="target.$el.textContent = 'Hovered'">
175+
Hover and click me
176+
</button>
177+
```
178+
179+
::: warning Virtual option
180+
This is a virtual option, meaning that it can be used in HTML but will not be present in the `$options` property of the component in JavaScript.
181+
:::

‎packages/docs/components/atoms/Action/stories/multiple-events/app.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Base, createApp } from '@studiometa/js-toolkit';
2+
import { Action, Transition } from '@studiometa/ui';
3+
4+
class App extends Base {
5+
static config = {
6+
name: 'App',
7+
components: {
8+
Action,
9+
Transition,
10+
},
11+
};
12+
}
13+
14+
export default createApp(App, document.body);

‎packages/docs/components/atoms/Action/stories/multiple-events/app.twig

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<button
2+
data-component="Action"
3+
data-option-on:click.stop="target.$el.textContent = 'Clicked'"
4+
data-option-on:mouseenter="target.$el.textContent = 'Hovered'"
5+
data-option-on:mouseleave="target.$el.textContent = 'Hover and click me'"
6+
class="px-4 py-2 rounded bg-blue-400 dark:bg-blue-600">
7+
Hover and click me
8+
</button>

‎packages/docs/components/atoms/DataBind/data-bind-js-api.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ The `DataBind` component can be used to keep a value in sync between multiple DO
1414
- Type: `string`
1515
- Default: `'textContent'`
1616

17-
### `name`
17+
### `group`
1818

1919
- Type: `string`
2020
- Default: `''`
2121

22-
The `name` option is used to group instances together. All related instances will be updated when the value changes.
22+
The `group` option is used to group instances together. All related instances will be updated when the value changes.
2323

2424
When using it with multiple checkboxes or select multiple, use the `[]` suffix to push each selected value in an array. See the [checkboxes example](/components/atoms/DataBind/examples.html#checkboxes) for more details on how this works.
2525

@@ -41,7 +41,7 @@ The targeted DOM element.
4141
- Type: `boolean`
4242
- Readonly
4343

44-
Wether new values should be pushed to an array instead of a single value. This is enabled by adding the `[]` suffix to the [`name` option](#name).
44+
Wether new values should be pushed to an array instead of a single value. This is enabled by adding the `[]` suffix to the [`group` option](#group).
4545

4646
## Methods
4747

‎packages/docs/components/atoms/DataBind/data-model-js-api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ outline: deep
77

88
The `DataModel` component have the same public API as the [`DataBind` component](./data-bind-js-api.html).
99

10-
This component will [dispatch](#dispatch) its current value to all other related instances sharing the same name when the `input` event is triggered on its root element.
10+
This component will [dispatch](#dispatch) its current value to all other related instances within the same group when the `input` event is triggered on its root element.
1111

1212
## Methods
1313

‎packages/docs/components/atoms/DataBind/stories/basic.twig

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<div data-component="DataEffect"
2-
data-option-name="msg"
3-
data-option-effect="target.classList.toggle('bg-red-100', value.length > 15)"
4-
class="flex flex-col gap-4">
2+
data-option-group="msg"
3+
data-option-effect="target.classList.toggle('bg-red-400', value.length > 15)"
4+
class="flex flex-col gap-4 bg-opacity-50">
55
<input
66
data-component="DataModel"
7-
data-option-name="msg"
7+
data-option-group="msg"
88
data-option-main
99
value="Hello world"
1010
class="p-4 bg-transparent ring rounded" />
1111
<h1
1212
data-component="DataBind DataEffect"
13-
data-option-name="msg"
13+
data-option-group="msg"
1414
data-option-effect="target.classList.toggle('text-red-600', value.length > 15)"
1515
class="text-4xl font-bold">
1616
Hello world
1717
</h1>
1818
<p
1919
data-component="DataComputed"
2020
data-option-compute="`Length: ${value.length}`"
21-
data-option-name="msg"
21+
data-option-group="msg"
2222
class="text-xl">
2323
Lengh: 11
2424
</p>

‎packages/docs/components/atoms/DataBind/stories/checkbox.twig

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
<label>
33
<input type="checkbox"
44
data-component="DataModel"
5-
data-option-name="checkbox" />
5+
data-option-group="checkbox" />
66
<span>Foo</span>
77
</label>
88
<label>
99
<input type="checkbox"
1010
data-component="DataModel"
11-
data-option-name="checkbox" />
11+
data-option-group="checkbox" />
1212
<span>Bar</span>
1313
</label>
14-
<p data-component="DataBind" data-option-name="checkbox">
14+
<p data-component="DataBind" data-option-group="checkbox">
1515
false
1616
</p>
1717
<p>
1818
The checkboxes are
1919
<span data-component="DataComputed"
20-
data-option-name="checkbox"
20+
data-option-group="checkbox"
2121
data-option-compute="value ? 'checked' : 'not checked'">
2222
not checked
2323
</span>

‎packages/docs/components/atoms/DataBind/stories/checkboxes.twig

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
<label>
33
<input type="checkbox"
44
data-component="DataModel"
5-
data-option-name="checkbox[]"
5+
data-option-group="checkbox[]"
66
value="foo" />
77
<span>Foo</span>
88
</label>
99
<label>
1010
<input type="checkbox"
1111
data-component="DataModel"
12-
data-option-name="checkbox[]"
12+
data-option-group="checkbox[]"
1313
value="bar" />
1414
<span>Bar</span>
1515
</label>
16-
<p><span data-component="DataBind" data-option-name="checkbox[]"></span>&nbsp;</p>
16+
<p><span data-component="DataBind" data-option-group="checkbox[]"></span>&nbsp;</p>
1717
<pre data-component="DataComputed"
18-
data-option-name="checkbox[]"
18+
data-option-group="checkbox[]"
1919
data-option-compute="JSON.stringify(value)"
2020
class="text-sm">[]</pre>
2121

2222
<label>
2323
<input type="checkbox"
2424
data-component="DataModel"
25-
data-option-name="checkbox[]"
25+
data-option-group="checkbox[]"
2626
value="foo" />
2727
<span>Foo</span>
2828
</label>
2929
<label>
3030
<input type="checkbox"
3131
data-component="DataModel"
32-
data-option-name="checkbox[]"
32+
data-option-group="checkbox[]"
3333
value="bar" />
3434
<span>Bar</span>
3535
</label>

‎packages/docs/components/atoms/DataBind/stories/compute-example.twig

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div class="flex flex-col gap-4">
22
<input
33
data-component="DataModel"
4-
data-option-name="counter"
4+
data-option-group="counter"
55
type="range"
66
value="10"
77
min="0"
88
max="100"
99
step="1" />
1010
<p>
1111
Count:
12-
<span data-component="DataBind" data-option-name="counter">10</span>
12+
<span data-component="DataBind" data-option-group="counter">10</span>
1313
</p>
1414
<p>
1515
Double:
16-
<span data-component="DataComputed" data-option-name="counter" data-option-compute="value * 2">
16+
<span data-component="DataComputed" data-option-group="counter" data-option-compute="value * 2">
1717
20
1818
</span>
1919
</p>

‎packages/docs/components/atoms/DataBind/stories/effect-example.twig

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<div class="flex flex-col gap-4">
22
<input
33
data-component="DataModel"
4-
data-option-name="counter"
4+
data-option-group="counter"
55
type="range"
66
value="50"
77
min="0"
88
max="100"
99
step="1" />
1010
<p
1111
data-component="DataEffect"
12-
data-option-name="counter"
12+
data-option-group="counter"
1313
data-option-effect="target.classList.toggle('text-red-500', value > 50)">
1414
Count:
15-
<span data-component="DataBind" data-option-name="counter">50</span>
15+
<span data-component="DataBind" data-option-group="counter">50</span>
1616
</p>
1717
</div>

‎packages/docs/components/atoms/DataBind/stories/select-multiple.twig

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="flex items-center gap-4">
22
<select data-component="DataModel"
3-
data-option-name="select[]"
3+
data-option-group="select[]"
44
multiple
55
class="p-2 bg-transparent ring-2 rounded">
66
<option>
@@ -13,10 +13,10 @@
1313
Bar
1414
</option>
1515
</select>
16-
<p data-component="DataBind" data-option-name="select[]"></p>
16+
<p data-component="DataBind" data-option-group="select[]"></p>
1717
<pre
1818
data-component="DataComputed"
19-
data-option-name="select[]"
19+
data-option-group="select[]"
2020
data-option-compute="JSON.stringify(value)"
2121
class="text-sm"></pre>
2222
</div>

‎packages/docs/components/atoms/DataBind/stories/select.twig

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="flex items-center gap-4">
2-
<select data-component="DataModel" data-option-name="select" class="p-2 bg-transparent ring-2 rounded">
2+
<select data-component="DataModel" data-option-group="select" class="p-2 bg-transparent ring-2 rounded">
33
<option>-</option>
44
<option value="foo">Foo</option>
55
<option value="bar">Bar</option>
66
</select>
7-
<p data-component="DataBind" data-option-name="select"></p>
7+
<p data-component="DataBind" data-option-group="select"></p>
88
</div>

‎packages/docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/ui-docs",
3-
"version": "1.0.0-alpha.7",
3+
"version": "1.0.0-alpha.8",
44
"private": true,
55
"type": "module",
66
"scripts": {

‎packages/playground/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@studiometa/ui-playground",
3-
"version": "1.0.0-alpha.7",
3+
"version": "1.0.0-alpha.8",
44
"private": true,
55
"type": "module",
66
"scripts": {

‎packages/tests/__utils__/components.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Base } from '@studiometa/js-toolkit';
2+
3+
export class Foo extends Base {
4+
static config = {
5+
name: 'Foo',
6+
};
7+
}
8+
9+
export class Bar extends Base {
10+
static config = {
11+
name: 'Bar',
12+
};
13+
}
14+
15+
export class Baz extends Base {
16+
static config = {
17+
name: 'Baz',
18+
};
19+
}

‎packages/tests/__utils__/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './components.js';
12
export * from './h.js';
23
export * from './lifecycle.js';
34
export * from './mockIntersectionObserver.js';

0 commit comments

Comments
 (0)