@dumiflex/wp-kit 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Features
+
+* Input and Textarea take mono and an accent / warn tone, and size themselves border-box ([#98](https://github.com/DumiFlex/wp-kit/issues/98)) ([7b1023f](https://github.com/DumiFlex/wp-kit/commit/7b1023f699e7f9b37904abf0200ed805f1db23a7))
+
 ## [0.11.0](https://github.com/DumiFlex/wp-kit/compare/v0.10.0...v0.11.0) (2026-11-03)
 
 

package/package.json

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

package/src/Input.vue

@@ -24,6 +24,10 @@ interface Props {
   suffix?: string | undefined;
   id?: string | undefined;
   ariaLabel?: string | undefined;
+  /** Mono text: variable names, ids, tags. */
+  mono?: boolean | undefined;
+  /** "accent" marks a value changed from its default, "warn" one that needs a look. */
+  tone?: "accent" | "warn" | undefined;
 }
 const props = withDefaults(defineProps<Props>(), {
   type: "text",
@@ -57,7 +61,7 @@ function onInput(e: Event) {
 </script>
 
 <template>
-  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
+  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined" :data-tone="tone">
     <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
       <Icon :name="icon" />
     </span>
@@ -65,6 +69,7 @@ function onInput(e: Event) {
     <input
       :id="id"
       :class="inputClasses"
+      :data-mono="mono || undefined"
       :type="type"
       :value="modelValue"
       :placeholder="placeholder"
@@ -85,6 +90,8 @@ function onInput(e: Event) {
     v-else
     :id="id"
     :class="inputClasses"
+    :data-mono="mono || undefined"
+    :data-tone="tone"
     :type="type"
     :value="modelValue"
     :placeholder="placeholder"

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/Textarea.vue

@@ -10,6 +10,10 @@ interface Props {
   error?: boolean | undefined;
   id?: string | undefined;
   ariaLabel?: string | undefined;
+  /** Mono text: templates, tag lists. */
+  mono?: boolean | undefined;
+  /** "accent" marks a value changed from its default, "warn" one that needs a look. */
+  tone?: "accent" | "warn" | undefined;
 }
 const props = withDefaults(defineProps<Props>(), { rows: 3 });
 
@@ -44,6 +48,8 @@ watch(() => props.modelValue, () => {
     :id="id"
     ref="taRef"
     class="wp-textarea"
+    :data-mono="mono || undefined"
+    :data-tone="tone"
     :rows="rows"
     :value="modelValue"
     :placeholder="placeholder"

package/src/input.css

@@ -3,7 +3,15 @@
  * Scoped into Input.vue and Textarea.vue so a field looks right on the
  * canvas, which never loads theme/tokens.css; the theme imports it too so
  * a page can still write `.wp-input-group` around another field. Shared
- * tokens only. The other field pieces draw field.css' `.wp-field-box`. */
+ * tokens only. The other field pieces draw field.css' `.wp-field-box`.
+ *
+ * `data-mono` sets the text in the mono face (variable names, ids, tags);
+ * `data-tone="accent"` marks a value changed from its default (accent border
+ * and text), `data-tone="warn"` one that needs a look (an empty binding). */
+
+.wp-input,
+.wp-textarea,
+.wp-input-group { box-sizing: border-box; }
 
 .wp-input,
 .wp-textarea {
@@ -111,3 +119,20 @@
   flex: 1;
 }
 .wp-input-group .wp-input:focus { box-shadow: none; }
+
+/* Mono text and tones (see the top of this file). On a prefixed field the
+ * group draws the border, so the tone sits on the group. */
+.wp-input[data-mono],
+.wp-textarea[data-mono] { font-family: var(--wp-font-mono); font-size: 12px; }
+.wp-input--sm[data-mono] { font-size: 11px; }
+.wp-input[data-tone="accent"],
+.wp-textarea[data-tone="accent"],
+.wp-input-group[data-tone="accent"] { border-color: var(--wp-accent-500); }
+.wp-input[data-tone="accent"],
+.wp-textarea[data-tone="accent"],
+.wp-input-group[data-tone="accent"] .wp-input,
+.wp-input-group[data-tone="accent"] .wp-input-group__affix { color: var(--wp-accent-text); }
+.wp-input[data-tone="warn"],
+.wp-textarea[data-tone="warn"],
+.wp-input-group[data-tone="warn"] { border-color: var(--wp-warn); }
+.wp-input-group[data-tone="warn"] .wp-input-group__affix { color: var(--wp-warn); }

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,
+};