studiometa · titouanmathis · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### 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

diff --git a/packages/docs/components/atoms/DataBind/data-bind-js-api.md b/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
 

diff --git a/packages/docs/components/atoms/DataBind/data-model-js-api.md b/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
 

diff --git a/packages/docs/components/atoms/DataBind/stories/basic.twig b/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>

diff --git a/packages/docs/components/atoms/DataBind/stories/checkbox.twig b/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>

diff --git a/packages/docs/components/atoms/DataBind/stories/checkboxes.twig b/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>

diff --git a/packages/docs/components/atoms/DataBind/stories/compute-example.twig b/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>

diff --git a/packages/docs/components/atoms/DataBind/stories/effect-example.twig b/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>
diff --git a/packages/docs/components/atoms/DataBind/stories/select-multiple.twig b/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>
diff --git a/packages/docs/components/atoms/DataBind/stories/select.twig b/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>
diff --git a/packages/tests/atoms/DataBind.spec.ts b/packages/tests/atoms/DataBind.spec.ts
@@ -46,8 +46,8 @@ describe('The DataBind component', () => {
   });
 
   it('should set the checked property of multiple checkbox', async () => {
-    const inputA = h('input', { type: 'checkbox', value: 'foo', dataOptionName: 'checkbox[]' });
-    const inputB = h('input', { type: 'checkbox', value: 'bar', dataOptionName: 'checkbox[]' });
+    const inputA = h('input', { type: 'checkbox', value: 'foo', dataOptionGroup: 'checkbox[]' });
+    const inputB = h('input', { type: 'checkbox', value: 'bar', dataOptionGroup: 'checkbox[]' });
     const instanceA = new DataBind(inputA);
     const instanceB = new DataBind(inputB);
 
@@ -80,7 +80,7 @@ describe('The DataBind component', () => {
   it('should select an option of a select', () => {
     const optionA = h('option', { value: 'foo' }, ['Foo']);
     const optionB = h('option', { value: 'bar' }, ['Bar']);
-    const select = h('select', { dataOptionName: 'select' }, [optionA, optionB]);
+    const select = h('select', { dataOptionGroup: 'select' }, [optionA, optionB]);
     const instance = new DataBind(select);
     expect(optionA.selected).toBe(true);
     expect(optionB.selected).toBe(false);
@@ -95,7 +95,7 @@ describe('The DataBind component', () => {
     const optionA = h('option', { value: 'foo', selected: true }, ['Foo']);
     const optionB = h('option', { value: 'bar' }, ['Bar']);
     const optionC = h('option', { value: 'baz' }, ['Baz']);
-    const select = h('select', { multiple: true, dataOptionName: 'select[]' }, [
+    const select = h('select', { multiple: true, dataOptionGroup: 'select[]' }, [
       optionA,
       optionB,
       optionC,
@@ -149,13 +149,13 @@ describe('The DataBind component', () => {
   });
 
   it('should dispatch value to other instances', async () => {
-    const instance1 = new DataBind(h('div', { dataOptionName: 'a' }, ['foo']));
-    const instance2 = new DataBind(h('div', { dataOptionName: 'a' }, ['foo']));
+    const instance1 = new DataBind(h('div', { dataOptionGroup: 'a' }, ['foo']));
+    const instance2 = new DataBind(h('div', { dataOptionGroup: 'a' }, ['foo']));
     const instance3 = new DataComputed(
-      h('div', { dataOptionName: 'a', dataOptionCompute: 'value + value' }, ['foofoo']),
+      h('div', { dataOptionGroup: 'a', dataOptionCompute: 'value + value' }, ['foofoo']),
     );
     const instance4 = new DataEffect(
-      h('div', { dataOptionName: 'a', dataOptionEffect: 'target.id = value', id: 'foo' }),
+      h('div', { dataOptionGroup: 'a', dataOptionEffect: 'target.id = value', id: 'foo' }),
     );
 
     await mount(instance1, instance2, instance3, instance4);
@@ -177,13 +177,13 @@ describe('The DataBind component', () => {
       type: 'checkbox',
       value: 'foo',
       checked: '',
-      dataOptionName: 'checkbox[]',
+      dataOptionGroup: 'checkbox[]',
     });
     const inputB = h('input', {
       type: 'checkbox',
       value: 'bar',
       checked: '',
-      dataOptionName: 'checkbox[]',
+      dataOptionGroup: 'checkbox[]',
     });
     fragment.append(inputA, inputB);
 
@@ -197,7 +197,7 @@ describe('The DataBind component', () => {
     expect(instanceA.value).toEqual(['foo', 'bar']);
 
     inputB.replaceWith(
-      h('input', { type: 'checkbox', value: 'bar', dataOptionName: 'checkbox[]' }),
+      h('input', { type: 'checkbox', value: 'bar', dataOptionGroup: 'checkbox[]' }),
     );
 
     expect(inputA.isConnected).toBe(true);

diff --git a/packages/tests/atoms/DataModel.spec.ts b/packages/tests/atoms/DataModel.spec.ts
@@ -29,10 +29,10 @@ describe('The DataModel component', () => {
   });
 
   it('should set value for multiple checkboxes with the same name', async () => {
-    const checkboxA1 = h('input', { type: 'checkbox', value: 'a', dataOptionName: 'check[]' });
-    const checkboxA2 = h('input', { type: 'checkbox', value: 'a', dataOptionName: 'check[]' });
-    const checkboxB1 = h('input', { type: 'checkbox', value: 'b', dataOptionName: 'check[]' });
-    const checkboxB2 = h('input', { type: 'checkbox', value: 'b', dataOptionName: 'check[]' });
+    const checkboxA1 = h('input', { type: 'checkbox', value: 'a', dataOptionGroup: 'check[]' });
+    const checkboxA2 = h('input', { type: 'checkbox', value: 'a', dataOptionGroup: 'check[]' });
+    const checkboxB1 = h('input', { type: 'checkbox', value: 'b', dataOptionGroup: 'check[]' });
+    const checkboxB2 = h('input', { type: 'checkbox', value: 'b', dataOptionGroup: 'check[]' });
     const instanceA1 = new DataModel(checkboxA1);
     const instanceA2 = new DataModel(checkboxA2);
     const instanceB1 = new DataModel(checkboxB1);

diff --git a/packages/ui/atoms/Data/DataBind.ts b/packages/ui/atoms/Data/DataBind.ts
@@ -8,7 +8,7 @@ const groups = new Map<string, Set<DataBind>>();
 export interface DataBindProps extends BaseProps {
   $options: {
     prop: string;
-    name: string;
+    group: string;
   };
 }
 
@@ -17,14 +17,14 @@ export class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProp
     name: 'DataBind',
     options: {
       prop: String,
-      name: String,
+      group: String,
     },
   };
 
   get relatedInstances() {
-    const { name } = this.$options;
+    const { group } = this.$options;
 
-    const instances = groups.get(name) ?? groups.set(name, new Set()).get(name);
+    const instances = groups.get(group) ?? groups.set(group, new Set()).get(group);
 
     for (const instance of instances) {
       if (!instance.$el.isConnected) {
@@ -36,7 +36,7 @@ export class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProp
   }
 
   get multiple() {
-    return this.$options.name.endsWith('[]');
+    return this.$options.group.endsWith('[]');
   }
 
   get target() {

diff --git a/packages/ui/atoms/Data/DataComputed.ts b/packages/ui/atoms/Data/DataComputed.ts
@@ -21,8 +21,8 @@ export class DataComputed<T extends BaseProps = BaseProps> extends DataBind<Data
   };
 
   get compute() {
-    const { name, compute } = this.$options;
-    return getCallback(name, `return ${compute};`);
+    const { group, compute } = this.$options;
+    return getCallback(group, `return ${compute};`);
   }
 
   set(value: boolean | string | string[]) {

diff --git a/packages/ui/atoms/Data/DataEffect.ts b/packages/ui/atoms/Data/DataEffect.ts
@@ -19,8 +19,8 @@ export class DataEffect<T extends BaseProps = BaseProps> extends DataBind<DataEf
   };
 
   get effect() {
-    const { name, effect } = this.$options;
-    return getCallback(name, effect);
+    const { group, effect } = this.$options;
+    return getCallback(group, effect);
   }
 
   set(value: boolean | string | string[]) {