@dumiflex/wp-kit 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.13.0](https://github.com/DumiFlex/wp-kit/compare/v0.12.0...v0.13.0) (2026-11-03)
+
+
+### Features
+
+* v-toggle-row, so a row's words flip its one checkbox or switch, and SettingRow rows do it ([#102](https://github.com/DumiFlex/wp-kit/issues/102)) ([1d3309b](https://github.com/DumiFlex/wp-kit/commit/1d3309b6f2a7da6f2dff82a41aed8bc46d1c779a))
+
 ## [0.12.0](https://github.com/DumiFlex/wp-kit/compare/v0.11.0...v0.12.0) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/SettingRow.vue

@@ -14,7 +14,13 @@
  * control column, like a form. `recommended` names the value most people
  * should pick ("On"). `for` makes the label a real `<label for>`. Slots:
  * `#badge` after the label, `#extra` under the hint (a status line).
+ *
+ * A row whose control is one checkbox or switch flips it on a click anywhere
+ * on the row's words (v-toggle-row), like a label; a WpSwitch is a span, so a
+ * `<label for>` alone can't reach it.
  */
+import { vToggleRow } from "./toggle-row";
+
 const props = defineProps<{
   label: string;
   hint?: string | undefined;
@@ -32,6 +38,7 @@ const props = defineProps<{
 <template>
   <div
     :id="settingKey"
+    v-toggle-row
     class="wp-set-row"
     :class="{ 'wp-set-row--stacked': stacked, 'wp-set-row--form': form, 'wp-set-row--target': highlighted }"
     :data-setting="settingKey"

package/src/toggle-row.css

@@ -0,0 +1,7 @@
+/* v-toggle-row (toggle-row.ts): the row's words flip its one toggle, so the
+ * whole row shows the hand and its words don't get picked up as a selection
+ * on a quick double click. Layered, so a host's own cursor rule wins. */
+@layer wp-extension {
+  .wp-toggle-row { cursor: pointer; user-select: none; -webkit-user-select: none; }
+  .wp-toggle-row--disabled { cursor: not-allowed; }
+}

package/src/toggle-row.ts

@@ -0,0 +1,104 @@
+/**
+ * `v-toggle-row`: a click on a row's words flips the row's one checkbox or
+ * switch, the way a `<label>` ticks its input. For a row that lays out its
+ * label and its control itself (a label on the left, a switch on the right)
+ * instead of passing the words to the Checkbox or WpSwitch.
+ *
+ *   <div v-toggle-row class="row">
+ *     <span>Override base seed</span>
+ *     <WpSwitch v-model="override" aria-label="Override base seed" />
+ *   </div>
+ *
+ * It acts only when the row holds exactly one `role="checkbox"` or
+ * `role="switch"` and no other value control (an input, a select, a slider,
+ * radios), so a row with two switches or a switch beside a number field stays
+ * as it is. A click on anything interactive inside the row (the toggle
+ * itself, a button, a link, a native `<label>`, a labelled Checkbox) is left
+ * to that element. The control keeps the keyboard stop and gets the focus.
+ * SettingRow uses it on every row.
+ *
+ * The row gets the `wp-toggle-row` class while it has a single toggle, for
+ * the pointer cursor (toggle-row.css). State lives in a WeakMap (no expando
+ * keys), so the row's own attributes and serialization stay untouched.
+ */
+import type { Directive } from "vue";
+import "./toggle-row.css";
+
+const TOGGLE = '[role="checkbox"], [role="switch"]';
+/** Value controls that make "the row's control" ambiguous. */
+const OTHER_CONTROL =
+  'input:not([type="hidden"]), select, textarea, [role="combobox"], [role="slider"], [role="spinbutton"], [role="radio"], [role="listbox"], [contenteditable=""], [contenteditable="true"]';
+/** A click that lands on one of these belongs to it, not to the row. */
+const INTERACTIVE =
+  'button, a[href], input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="menuitem"], [role="option"], [role="combobox"], [role="slider"], [role="spinbutton"], [contenteditable=""], [contenteditable="true"], .wp-checkbox';
+
+interface State {
+  off: () => void;
+}
+
+const states = new WeakMap<HTMLElement, State>();
+/** One click flips one toggle, even with rows nested in rows. */
+const handled = new WeakSet<Event>();
+
+/** The row's one toggle, or null when it has none, several, or another control beside it. */
+export function rowToggle(row: HTMLElement): HTMLElement | null {
+  const toggles = row.querySelectorAll<HTMLElement>(TOGGLE);
+  if (toggles.length !== 1) return null;
+  if (row.querySelector(OTHER_CONTROL)) return null;
+  return toggles[0] ?? null;
+}
+
+function isDisabled(el: HTMLElement): boolean {
+  return el.getAttribute("aria-disabled") === "true" || (el instanceof HTMLButtonElement && el.disabled);
+}
+
+function sync(row: HTMLElement): void {
+  const toggle = rowToggle(row);
+  row.classList.toggle("wp-toggle-row", !!toggle);
+  row.classList.toggle("wp-toggle-row--disabled", !!toggle && isDisabled(toggle));
+}
+
+/** Flip the row's toggle for a click on the row's words. Exported for tests. */
+export function onRowClick(row: HTMLElement, event: MouseEvent): void {
+  if (handled.has(event) || event.button !== 0) return;
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const hit = target.closest(INTERACTIVE);
+  if (hit && hit !== row && row.contains(hit)) return;
+  // Text the reader was selecting is not a click on the label.
+  const selection = row.ownerDocument.getSelection?.();
+  if (selection && !selection.isCollapsed && row.contains(selection.anchorNode)) return;
+  const toggle = rowToggle(row);
+  if (!toggle || isDisabled(toggle)) return;
+  handled.add(event);
+  toggle.click();
+  toggle.focus({ preventScroll: true });
+}
+
+function attach(el: HTMLElement): void {
+  if (states.has(el)) return;
+  const click = (e: MouseEvent): void => onRowClick(el, e);
+  el.addEventListener("click", click);
+  states.set(el, { off: () => el.removeEventListener("click", click) });
+}
+
+function detach(el: HTMLElement): void {
+  states.get(el)?.off();
+  states.delete(el);
+  el.classList.remove("wp-toggle-row", "wp-toggle-row--disabled");
+}
+
+/** `v-toggle-row="false"` turns it off for one row (a row whose words do something else). */
+export const vToggleRow: Directive<HTMLElement, boolean | undefined> = {
+  mounted(el, binding) {
+    if (binding.value === false) return;
+    attach(el);
+    sync(el);
+  },
+  updated(el, binding) {
+    if (binding.value === false) return detach(el);
+    attach(el);
+    sync(el);
+  },
+  unmounted: detach,
+};