Merge branch 'release/1.0.0-alpha.8'

CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v1.0.0-alpha.8](https://github.com/studiometa/ui/compare/1.0.0-alpha.7..1.0.0-alpha.8) (2024-09-25)
+
+### Added
+
+- **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))
+
+### Changed
+
+- ⚠️ **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))
+
 ## [v1.0.0-alpha.7](https://github.com/studiometa/ui/compare/1.0.0-alpha.6..1.0.0-alpha.7) (2024-09-10)
 
 ### Fixed

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "private": true,
   "workspaces": [
     "packages/*"

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

@@ -52,3 +52,12 @@ The `Target` component is a companion of the `Action` component that can be used
   :html="() => import('./stories/counter/app.twig')"
   :script="() => import('./stories/counter/app.js?raw')"
   />
+
+### Listening to multiple events
+
+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.
+
+<PreviewPlayground
+  :html="() => import('./stories/multiple-events/app.twig')"
+  :script="() => import('./stories/multiple-events/app.js?raw')"
+  />

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

@@ -159,3 +159,23 @@ This can be useful to destructure the first `ctx` parameter and make a direct re
 ::: warning Advanced pattern
 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.
 :::
+
+### `on:<event>[.<modifier>]`
+
+- Type: `string`
+- Format: `[<name>[(<selector>)] -> ]<effect>`
+
+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.
+
+```html {3}
+<button
+  data-component="Action"
+  data-option-on:click.stop="target.$el.textContent = 'Clicked'"
+  data-option-on:mouseenter="target.$el.textContent = 'Hovered'">
+  Hover and click me
+</button>
+```
+
+::: warning Virtual option
+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.
+:::

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

@@ -0,0 +1,14 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { Action, Transition } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Action,
+      Transition,
+    },
+  };
+}
+
+export default createApp(App, document.body);

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

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

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

@@ -14,12 +14,12 @@ The `DataBind` component can be used to keep a value in sync between multiple DO
 - Type: `string`
 - Default: `'textContent'`
 
-### `name`
+### `group`
 
 - Type: `string`
 - Default: `''`
 
-The `name` option is used to group instances together. All related instances will be updated when the value changes.
+The `group` option is used to group instances together. All related instances will be updated when the value changes.
 
 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.
 
@@ -41,7 +41,7 @@ The targeted DOM element.
 - Type: `boolean`
 - Readonly
 
-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).
+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).
 
 ## Methods
 

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

@@ -7,7 +7,7 @@ outline: deep
 
 The `DataModel` component have the same public API as the [`DataBind` component](./data-bind-js-api.html).
 
-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.
+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.
 
 ## Methods
 

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

@@ -1,24 +1,24 @@
 <div data-component="DataEffect"
-  data-option-name="msg"
-  data-option-effect="target.classList.toggle('bg-red-100', value.length > 15)"
-  class="flex flex-col gap-4">
+  data-option-group="msg"
+  data-option-effect="target.classList.toggle('bg-red-400', value.length > 15)"
+  class="flex flex-col gap-4 bg-opacity-50">
   <input
     data-component="DataModel"
-    data-option-name="msg"
+    data-option-group="msg"
     data-option-main
     value="Hello world"
     class="p-4 bg-transparent ring rounded" />
   <h1
     data-component="DataBind DataEffect"
-    data-option-name="msg"
+    data-option-group="msg"
     data-option-effect="target.classList.toggle('text-red-600', value.length > 15)"
     class="text-4xl font-bold">
     Hello world
   </h1>
   <p
     data-component="DataComputed"
     data-option-compute="`Length: ${value.length}`"
-    data-option-name="msg"
+    data-option-group="msg"
     class="text-xl">
     Lengh: 11
   </p>

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

@@ -2,22 +2,22 @@
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox" />
+      data-option-group="checkbox" />
     <span>Foo</span>
   </label>
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox" />
+      data-option-group="checkbox" />
     <span>Bar</span>
   </label>
-  <p data-component="DataBind" data-option-name="checkbox">
+  <p data-component="DataBind" data-option-group="checkbox">
     false
   </p>
   <p>
     The checkboxes are
     <span data-component="DataComputed"
-      data-option-name="checkbox"
+      data-option-group="checkbox"
       data-option-compute="value ? 'checked' : 'not checked'">
       not checked
     </span>

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

@@ -2,34 +2,34 @@
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox[]"
+      data-option-group="checkbox[]"
       value="foo" />
     <span>Foo</span>
   </label>
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox[]"
+      data-option-group="checkbox[]"
       value="bar" />
     <span>Bar</span>
   </label>
-  <p><span data-component="DataBind" data-option-name="checkbox[]"></span>&nbsp;</p>
+  <p><span data-component="DataBind" data-option-group="checkbox[]"></span>&nbsp;</p>
   <pre data-component="DataComputed"
-    data-option-name="checkbox[]"
+    data-option-group="checkbox[]"
     data-option-compute="JSON.stringify(value)"
     class="text-sm">[]</pre>
 
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox[]"
+      data-option-group="checkbox[]"
       value="foo" />
     <span>Foo</span>
   </label>
   <label>
     <input type="checkbox"
       data-component="DataModel"
-      data-option-name="checkbox[]"
+      data-option-group="checkbox[]"
       value="bar" />
     <span>Bar</span>
   </label>

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

@@ -1,19 +1,19 @@
 <div class="flex flex-col gap-4">
   <input
     data-component="DataModel"
-    data-option-name="counter"
+    data-option-group="counter"
     type="range"
     value="10"
     min="0"
     max="100"
     step="1" />
   <p>
     Count:
-    <span data-component="DataBind" data-option-name="counter">10</span>
+    <span data-component="DataBind" data-option-group="counter">10</span>
   </p>
   <p>
     Double:
-    <span data-component="DataComputed" data-option-name="counter" data-option-compute="value * 2">
+    <span data-component="DataComputed" data-option-group="counter" data-option-compute="value * 2">
       20
     </span>
   </p>

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

@@ -1,17 +1,17 @@
 <div class="flex flex-col gap-4">
   <input
     data-component="DataModel"
-    data-option-name="counter"
+    data-option-group="counter"
     type="range"
     value="50"
     min="0"
     max="100"
     step="1" />
   <p
     data-component="DataEffect"
-    data-option-name="counter"
+    data-option-group="counter"
     data-option-effect="target.classList.toggle('text-red-500', value > 50)">
     Count:
-    <span data-component="DataBind" data-option-name="counter">50</span>
+    <span data-component="DataBind" data-option-group="counter">50</span>
   </p>
 </div>

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

@@ -1,6 +1,6 @@
 <div class="flex items-center gap-4">
   <select data-component="DataModel"
-    data-option-name="select[]"
+    data-option-group="select[]"
     multiple
     class="p-2 bg-transparent ring-2 rounded">
     <option>
@@ -13,10 +13,10 @@
       Bar
     </option>
   </select>
-  <p data-component="DataBind" data-option-name="select[]"></p>
+  <p data-component="DataBind" data-option-group="select[]"></p>
   <pre
     data-component="DataComputed"
-    data-option-name="select[]"
+    data-option-group="select[]"
     data-option-compute="JSON.stringify(value)"
     class="text-sm"></pre>
 </div>

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

@@ -1,8 +1,8 @@
 <div class="flex items-center gap-4">
-  <select data-component="DataModel" data-option-name="select" class="p-2 bg-transparent ring-2 rounded">
+  <select data-component="DataModel" data-option-group="select" class="p-2 bg-transparent ring-2 rounded">
     <option>-</option>
     <option value="foo">Foo</option>
     <option value="bar">Bar</option>
   </select>
-  <p data-component="DataBind" data-option-name="select"></p>
+  <p data-component="DataBind" data-option-group="select"></p>
 </div>

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "private": true,
   "type": "module",
   "scripts": {

packages/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-playground",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/__utils__/components.ts

@@ -0,0 +1,19 @@
+import { Base } from '@studiometa/js-toolkit';
+
+export class Foo extends Base {
+  static config = {
+    name: 'Foo',
+  };
+}
+
+export class Bar extends Base {
+  static config = {
+    name: 'Bar',
+  };
+}
+
+export class Baz extends Base {
+  static config = {
+    name: 'Baz',
+  };
+}

packages/tests/__utils__/index.ts

@@ -1,3 +1,4 @@
+export * from './components.js';
 export * from './h.js';
 export * from './lifecycle.js';
 export * from './mockIntersectionObserver.js';