feat: New batch mode for the checkboxes field

config/fields/checkboxes.php

@@ -14,6 +14,13 @@
 		'icon'        => null,
 		'placeholder' => null,
 
+		/**
+		 * Show/hide the batch select toggle
+		 */
+		'batch' => function (bool $batch = false) {
+			return $batch;
+		},
+
 		/**
 		 * Arranges the checkboxes in the given number of columns
 		 */

i18n/translations/en.json

@@ -44,6 +44,9 @@
 	"delete": "Delete",
 	"delete.all": "Delete all",
 
+	"deselect": "Deselect",
+	"deselect.all": "Deselect all",
+
 	"dialog.fields.empty": "This dialog has no fields",
 	"dialog.files.empty": "No files to select",
 	"dialog.pages.empty": "No pages to select",
@@ -664,6 +667,7 @@
 
 	"security": "Security",
 	"select": "Select",
+	"select.all": "Select all",
 	"server": "Server",
 	"settings": "Settings",
 	"show": "Show",

panel/src/components/Forms/Field/CheckboxesField.vue

@@ -6,6 +6,38 @@
 		:input="id + '-0'"
 		:style="$attrs.style"
 	>
+		<template #counter>
+			<k-counter
+				v-if="counterOptions"
+				v-bind="counterOptions"
+				:required="required"
+				class="k-field-counter"
+			/>
+
+			<k-button-group v-if="batch" layout="collapsed">
+				<k-button
+					:disabled="value.length === 0"
+					:responsive="true"
+					icon="deselect-all"
+					size="xs"
+					variant="filled"
+					@click="deselectAll"
+				>
+					{{ $t("deselect.all") }}
+				</k-button>
+				<k-button
+					:disabled="value.length >= options.length"
+					:responsive="true"
+					icon="select-all"
+					size="xs"
+					variant="filled"
+					@click="selectAll"
+				>
+					{{ $t("select.all") }}
+				</k-button>
+			</k-button-group>
+		</template>
+
 		<k-empty
 			v-if="!options?.length"
 			:text="$t('options.none')"
@@ -32,7 +64,16 @@ import counter from "@/mixins/forms/counter.js";
 export default {
 	mixins: [Field, Input, CheckboxesInput, counter],
 	inheritAttrs: false,
+	props: {
+		batch: Boolean
+	},
 	methods: {
+		deselectAll() {
+			this.$refs.input.deselectAll();
+		},
+		selectAll() {
+			this.$refs.input.selectAll();
+		},
 		focus() {
 			this.$refs.input.focus();
 		}

panel/src/components/Forms/Input/CheckboxesInput.vue

@@ -89,6 +89,10 @@ export default {
 		}
 	},
 	methods: {
+		deselectAll() {
+			this.selected = [];
+			this.$emit("input", this.selected);
+		},
 		focus() {
 			this.$el.querySelector("input")?.focus();
 		},
@@ -105,6 +109,10 @@ export default {
 		},
 		select() {
 			this.focus();
+		},
+		selectAll() {
+			this.selected = this.choices.map((choice) => choice.value);
+			this.$emit("input", this.selected);
 		}
 	}
 };

panel/src/styles/reset/choice.css

@@ -58,7 +58,8 @@ input:where([type="checkbox"]):checked {
 }
 
 /** Checked state **/
-input:where([type="checkbox"], [type="radio"]):checked::after {
+input:where([type="checkbox"], [type="radio"]):checked::after,
+input:where([type="checkbox"]):indeterminate::after {
 	background: var(--choice-color-checked);
 	display: grid;
 }
@@ -78,14 +79,33 @@ input:where([type="checkbox"], [type="radio"])[disabled] {
 }
 
 /** Checkbox & Toggle **/
-input[type="checkbox"]:checked::after {
+input[type="checkbox"]:checked::after,
+input[type="checkbox"]:indeterminate::after {
 	content: "✓";
 	inset: 0;
+	place-items: center;
 	font-weight: 700;
 	color: var(--choice-color-icon);
 	line-height: 1;
 }
 
+/** Checkbox indeterminate **/
+input[type="checkbox"]:indeterminate::after {
+	content: "";
+}
+input[type="checkbox"]:indeterminate::before {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	content: "";
+	margin-top: -1px;
+	margin-left: -4px;
+	width: calc(var(--choice-height) - 8px);
+	height: 2px;
+	background: var(--choice-color-icon);
+	z-index: 1;
+}
+
 /** Radio **/
 input[type="radio"] {
 	--choice-rounded: 50%;

tests/Form/Field/CheckboxesFieldTest.php

@@ -136,4 +136,18 @@ public function testRequiredValid(): void
 
 		$this->assertTrue($field->isValid());
 	}
+
+	public function testBatch(): void
+	{
+		$field = $this->field('checkboxes');
+
+		$this->assertFalse($field->batch());
+
+		$field = $this->field('checkboxes', [
+			'batch' => true
+		]);
+
+		$this->assertTrue($field->batch());
+	}
+
 }