Merge branch 'hotfix/0.2.54' into support/0.2.x

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v0.2.54](https://github.com/studiometa/ui/compare/0.2.53..0.2.54) (2024-07-31)
+
+### Fixed
+
+- Fix tracking values for multiple checkboxes ([#275](https://github.com/studiometa/ui/issues/275), [#277](https://github.com/studiometa/ui/pull/277), [4cde6ad](https://github.com/studiometa/ui/commit/4cde6ad))
+
 ## [v0.2.53](https://github.com/studiometa/ui/compare/0.2.52..0.2.53) (2024-07-16)
 
 ### Added

composer.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "private": true,
   "workspaces": [
     "packages/*"

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "private": true,
   "type": "module",
   "scripts": {

packages/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-playground",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/atoms/DataModel.spec.ts

@@ -1,8 +1,12 @@
 import { it, describe, expect } from '@jest/globals';
-import { Base } from '@studiometa/js-toolkit';
 import { DataModel } from '@studiometa/ui';
 import { h } from '#test-utils';
 
+function check(input: HTMLInputElement, checked = true) {
+  input.checked = checked;
+  input.dispatchEvent(new Event('input'));
+}
+
 describe('The DataModel component', () => {
   it('should sync values on input', () => {
     const value = 'foo';
@@ -22,4 +26,47 @@ describe('The DataModel component', () => {
     expect(instanceA.get()).toBe(newValue);
     expect(instanceB.get()).toBe(newValue);
   });
+
+  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 instanceA1 = new DataModel(checkboxA1);
+    const instanceA2 = new DataModel(checkboxA2);
+    const instanceB1 = new DataModel(checkboxB1);
+    const instanceB2 = new DataModel(checkboxB2);
+
+    instanceA1.$mount();
+    instanceA2.$mount();
+    instanceB1.$mount();
+    instanceB2.$mount();
+
+    expect(instanceA1.multiple).toBe(true);
+
+    check(checkboxA1, true);
+    expect(instanceA1.get()).toEqual(['a']);
+    expect(instanceA2.get()).toEqual(['a']);
+    expect(instanceB1.get()).toEqual(['a']);
+    expect(instanceB2.get()).toEqual(['a']);
+
+    check(checkboxA1, false);
+    expect(instanceA1.get()).toEqual([]);
+    expect(instanceA2.get()).toEqual([]);
+    expect(instanceB1.get()).toEqual([]);
+    expect(instanceB2.get()).toEqual([]);
+
+    check(checkboxA1, true);
+    check(checkboxA2, true);
+    expect(instanceA1.get()).toEqual(['a']);
+    expect(instanceA2.get()).toEqual(['a']);
+    expect(instanceB1.get()).toEqual(['a']);
+    expect(instanceB2.get()).toEqual(['a']);
+
+    check(checkboxA1, false);
+    expect(instanceA1.get()).toEqual([]);
+    expect(instanceA2.get()).toEqual([]);
+    expect(instanceB1.get()).toEqual([]);
+    expect(instanceB2.get()).toEqual([]);
+  });
 });

packages/tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-tests",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "private": true,
   "type": "module",
   "scripts": {

packages/ui/atoms/Data/DataBind.ts

@@ -73,13 +73,13 @@ export class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProp
 
     if (isCheckbox(target)) {
       if (multiple) {
-        const values = [];
+        const values = new Set();
         for (const instance of this.relatedInstances) {
           if (isCheckbox(instance.target) && instance.target.checked) {
-            values.push(instance.target.value);
+            values.add(instance.target.value);
           }
         }
-        return values;
+        return Array.from(values);
       } else {
         return target.checked;
       }

packages/ui/atoms/Data/DataModel.ts

@@ -1,6 +1,7 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
 import { DataBind } from './DataBind.js';
 import type { DataBindProps } from './DataBind.js';
+import { isCheckbox } from './utils.js';
 
 export interface DataModelProps extends DataBindProps {}
 
@@ -9,10 +10,22 @@ export class DataModel<T extends BaseProps = BaseProps> extends DataBind<DataMod
     name: 'DataModel',
   };
 
-  onInput() {
-    const value = this.get();
+  dispatch() {
+    const { target, multiple } = this;
+    let value = this.get();
+
+    if (multiple && isCheckbox(target) && !target.checked) {
+      const set = new Set(value);
+      set.delete(target.value);
+      value = Array.from(set);
+    }
+
     for (const instance of this.relatedInstances) {
       instance.set(value);
     }
   }
+
+  onInput() {
+    this.dispatch();
+  }
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"