feat: add x-limited-choices directive

core/static/bundled/alpine-index.js

@@ -1,7 +1,8 @@
+import { limitedChoices } from "#core:alpine/limited-choices";
 import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 
-Alpine.plugin(sort);
+Alpine.plugin([sort, limitedChoices]);
 window.Alpine = Alpine;
 
 window.addEventListener("DOMContentLoaded", () => {

core/static/bundled/alpine/limited-choices.ts

@@ -0,0 +1,69 @@
+import type { Alpine as AlpineType } from "alpinejs";
+
+export function limitedChoices(Alpine: AlpineType) {
+  /**
+   * Directive to limit the number of elements
+   * that can be selected in a group of checkboxes.
+   *
+   * When the max numbers of selectable elements is reached,
+   * new elements will still be inserted, but oldest ones will be deselected.
+   * For example, if checkboxes A, B and C have been selected and the max
+   * number of selections is 3, then selecting D will result in having
+   * B, C and D selected.
+   *
+   * # Example in template
+   * ```html
+   * <div x-data="{nbMax: 2}", x-limited-choices="nbMax">
+   *   <button @click="nbMax += 1">Click me to increase the limit</button>
+   *   <input type="checkbox" value="A" name="foo">
+   *   <input type="checkbox" value="B" name="foo">
+   *   <input type="checkbox" value="C" name="foo">
+   *   <input type="checkbox" value="D" name="foo">
+   * </div>
+   * ```
+   */
+  Alpine.directive(
+    "limited-choices",
+    (el, { expression }, { evaluateLater, effect }) => {
+      const getMaxChoices = evaluateLater(expression);
+      let maxChoices: number;
+      const inputs: HTMLInputElement[] = Array.from(
+        el.querySelectorAll("input[type='checkbox']"),
+      );
+      const checked = [] as HTMLInputElement[];
+
+      const manageDequeue = () => {
+        if (checked.length <= maxChoices) {
+          // There isn't too many checkboxes selected. Nothing to do
+          return;
+        }
+        const popped = checked.splice(0, checked.length - maxChoices);
+        for (const p of popped) {
+          p.checked = false;
+        }
+      };
+
+      for (const input of inputs) {
+        input.addEventListener("change", (_e) => {
+          if (input.checked) {
+            checked.push(input);
+          } else {
+            checked.splice(checked.indexOf(input), 1);
+          }
+          manageDequeue();
+        });
+      }
+      effect(() => {
+        getMaxChoices((value: string) => {
+          const previousValue = maxChoices;
+          maxChoices = Number.parseInt(value);
+          if (maxChoices < previousValue) {
+            // The maximum number of selectable items has been lowered.
+            // Some currently selected elements may need to be removed
+            manageDequeue();
+          }
+        });
+      });
+    },
+  );
+}