@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/Button.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-/**
- * Button — single source of truth for app buttons.
- *
- * Variants:
- *   primary   — solid accent; main CTA per surface
- *   secondary — subtle filled; default
- *   ghost     — transparent with hover bg; tertiary
- *   danger    — red-tinted; destructive actions
- *   link      — text-only; inline CTAs
- *   outline   — neutral bordered ghost (not accent: an accent outline read as
- *               a second primary)
- *   add       — dashed, quiet: the "Add a row" button at the end of a list
- *
- * `block` stretches it to the full width of its container. `pressed` makes
- * it a toggle (aria-pressed, accent tint while on).
- *
- * Sizes follow the control scale: sm 24 / md 32 (default) / lg 40.
- *
- * States: default · hover · active · focus-visible · disabled · loading.
- * Disabled fades to 45% with a not-allowed cursor and no hover change.
- * Loading keeps the variant's own colours, swaps the lead icon for the
- * sparkle LoadingMark in the label colour, sets aria-busy and ignores clicks.
- *
- * Icon-only mode auto-engages when no slot content is provided (.wp-btn--icon).
- * Pass `aria-label` for screen reader text when using icon-only mode.
- *
- * The styles live in kit/button.css, shared with the canvas
- * Button twin.
- */
-import { computed, useSlots } from "vue";
-import Icon from "./Icon.vue";
-import LoadingMark from "./LoadingMark.vue";
-
-type Variant = "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add";
-type Size = "sm" | "md" | "lg";
-
-interface Props {
-  variant?: Variant | undefined;
-  size?: Size | undefined;
-  icon?: string | undefined;
-  iconRight?: string | undefined;
-  loading?: boolean | undefined;
-  disabled?: boolean | undefined;
-  block?: boolean | undefined;
-  /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
-  pressed?: boolean | undefined;
-  type?: "button" | "submit" | "reset" | undefined;
-  ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  variant: "secondary",
-  size: "md",
-  type: "button",
-  pressed: undefined,
-});
-
-const emit = defineEmits<{
-  (e: "click", evt: MouseEvent): void;
-}>();
-
-const slots = useSlots();
-
-const hasContent = computed(() => Boolean(slots.default));
-
-/** Native hover tooltip for icon-only buttons. Their `aria-label` names them
- *  for screen readers, but a sighted user hovering a bare icon gets nothing —
- *  so mirror the label into `title` when there's no visible text. A button with
- *  text already says what it does, so it stays untitled. */
-const titleAttr = computed(() =>
-  !hasContent.value && props.ariaLabel ? props.ariaLabel : undefined);
-
-const classes = computed(() => [
-  "wp-btn",
-  `wp-btn--${props.variant}`,
-  `wp-btn--${props.size}`,
-  !hasContent.value && "wp-btn--icon",
-  props.block && "wp-btn--block",
-]);
-
-function onClick(e: MouseEvent) {
-  if (props.disabled || props.loading) return;
-  emit("click", e);
-}
-</script>
-
-<template>
-  <button
-    :type="type"
-    :class="classes"
-    :disabled="disabled || loading"
-    :aria-label="ariaLabel"
-    :title="titleAttr"
-    :aria-busy="loading || undefined"
-    :aria-pressed="pressed === undefined ? undefined : pressed"
-    @click="onClick"
-  >
-    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : 14" decorative />
-    <Icon v-else-if="icon" :name="icon" />
-    <span v-if="hasContent" class="wp-btn__label"><slot /></span>
-    <Icon v-if="iconRight" :name="iconRight" />
-  </button>
-</template>
+<script setup lang="ts">
+/**
+ * Button — single source of truth for app buttons.
+ *
+ * Variants:
+ *   primary   — solid accent; main CTA per surface
+ *   secondary — subtle filled; default
+ *   ghost     — transparent with hover bg; tertiary
+ *   danger    — red-tinted; destructive actions
+ *   link      — text-only; inline CTAs
+ *   outline   — neutral bordered ghost (not accent: an accent outline read as
+ *               a second primary)
+ *   add       — dashed, quiet: the "Add a row" button at the end of a list
+ *
+ * `block` stretches it to the full width of its container. `pressed` makes
+ * it a toggle (aria-pressed, accent tint while on).
+ *
+ * Sizes follow the control scale: sm 24 / md 32 (default) / lg 40.
+ *
+ * States: default · hover · active · focus-visible · disabled · loading.
+ * Disabled fades to 45% with a not-allowed cursor and no hover change.
+ * Loading keeps the variant's own colours, swaps the lead icon for the
+ * sparkle LoadingMark in the label colour, sets aria-busy and ignores clicks.
+ *
+ * Icon-only mode auto-engages when no slot content is provided (.wp-btn--icon).
+ * Pass `aria-label` for screen reader text when using icon-only mode.
+ *
+ * The styles live in kit/button.css, shared with the canvas
+ * Button twin.
+ */
+import { computed, useSlots } from "vue";
+import Icon from "./Icon.vue";
+import LoadingMark from "./LoadingMark.vue";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add";
+type Size = "sm" | "md" | "lg";
+
+interface Props {
+  variant?: Variant | undefined;
+  size?: Size | undefined;
+  icon?: string | undefined;
+  iconRight?: string | undefined;
+  loading?: boolean | undefined;
+  disabled?: boolean | undefined;
+  block?: boolean | undefined;
+  /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
+  pressed?: boolean | undefined;
+  type?: "button" | "submit" | "reset" | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: "secondary",
+  size: "md",
+  type: "button",
+  pressed: undefined,
+});
+
+const emit = defineEmits<{
+  (e: "click", evt: MouseEvent): void;
+}>();
+
+const slots = useSlots();
+
+const hasContent = computed(() => Boolean(slots.default));
+
+/** Native hover tooltip for icon-only buttons. Their `aria-label` names them
+ *  for screen readers, but a sighted user hovering a bare icon gets nothing —
+ *  so mirror the label into `title` when there's no visible text. A button with
+ *  text already says what it does, so it stays untitled. */
+const titleAttr = computed(() =>
+  !hasContent.value && props.ariaLabel ? props.ariaLabel : undefined);
+
+const classes = computed(() => [
+  "wp-btn",
+  `wp-btn--${props.variant}`,
+  `wp-btn--${props.size}`,
+  !hasContent.value && "wp-btn--icon",
+  props.block && "wp-btn--block",
+]);
+
+function onClick(e: MouseEvent) {
+  if (props.disabled || props.loading) return;
+  emit("click", e);
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="classes"
+    :disabled="disabled || loading"
+    :aria-label="ariaLabel"
+    :title="titleAttr"
+    :aria-busy="loading || undefined"
+    :aria-pressed="pressed === undefined ? undefined : pressed"
+    @click="onClick"
+  >
+    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : 14" decorative />
+    <Icon v-else-if="icon" :name="icon" />
+    <span v-if="hasContent" class="wp-btn__label"><slot /></span>
+    <Icon v-if="iconRight" :name="iconRight" />
+  </button>
+</template>

package/src/Card.vue

@@ -1,68 +1,68 @@
-<script setup lang="ts">
-import { useSlots, ref, onMounted, onBeforeUnmount } from "vue";
-
-interface Props {
-  title?: string | undefined;
-  subtitle?: string | undefined;
-  padding?: boolean | undefined;
-  /** Stick the card header (and its `subheader` slot, e.g. a bulk-edit
-   *  toolbar) to the top of the nearest scroll container so its actions stay
-   *  reachable when scrolling a long list — new rows always land at the
-   *  bottom, so the toolbar must follow. Publishes the measured height of the
-   *  whole stuck region as `--wp-card-header-h` so a sticky `<thead>` inside
-   *  the body can offset itself right below it (updates as the subheader
-   *  toolbar appears/disappears or density changes). */
-  stickyHeader?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { padding: true, stickyHeader: false });
-
-const slots = useSlots();
-const root = ref<HTMLElement | null>(null);
-const stickyEl = ref<HTMLElement | null>(null);
-let ro: ResizeObserver | null = null;
-/** The stuck region is taller than a third of the window (an AI draft or a
- *  bulk-add box open in the subheader): it would cover the list it belongs
- *  to and the page couldn't scroll past it, so it scrolls with the card. */
-const tooTall = ref(false);
-
-function syncStickyHeight(): void {
-  if (!root.value || !stickyEl.value) return;
-  const h = Math.round(stickyEl.value.getBoundingClientRect().height);
-  tooTall.value = typeof window !== "undefined" && window.innerHeight > 0 && h > window.innerHeight / 3;
-  root.value.style.setProperty("--wp-card-header-h", tooTall.value ? "0px" : `${h}px`);
-}
-
-onMounted(() => {
-  if (!props.stickyHeader || !stickyEl.value) return;
-  syncStickyHeight();
-  if (typeof ResizeObserver !== "undefined") {
-    ro = new ResizeObserver(syncStickyHeight);
-    ro.observe(stickyEl.value);
-  }
-  window.addEventListener("resize", syncStickyHeight);
-});
-onBeforeUnmount(() => {
-  ro?.disconnect();
-  ro = null;
-  window.removeEventListener("resize", syncStickyHeight);
-});
-</script>
-
-<template>
-  <section ref="root" class="wp-card" :class="{ 'wp-card--sticky-header': stickyHeader && !tooTall }">
-    <div ref="stickyEl" class="wp-card__sticky">
-      <header v-if="title || slots.actions" class="wp-card__header">
-        <div class="wp-card__title-wrap">
-          <h2 v-if="title" class="wp-card__title">{{ title }}</h2>
-          <p v-if="subtitle" class="wp-card__subtitle">{{ subtitle }}</p>
-        </div>
-        <span class="wp-spacer" />
-        <slot name="actions" />
-      </header>
-      <slot name="subheader" />
-    </div>
-    <div :class="padding ? 'wp-card__body' : ''">
-      <slot />
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+import { useSlots, ref, onMounted, onBeforeUnmount } from "vue";
+
+interface Props {
+  title?: string | undefined;
+  subtitle?: string | undefined;
+  padding?: boolean | undefined;
+  /** Stick the card header (and its `subheader` slot, e.g. a bulk-edit
+   *  toolbar) to the top of the nearest scroll container so its actions stay
+   *  reachable when scrolling a long list — new rows always land at the
+   *  bottom, so the toolbar must follow. Publishes the measured height of the
+   *  whole stuck region as `--wp-card-header-h` so a sticky `<thead>` inside
+   *  the body can offset itself right below it (updates as the subheader
+   *  toolbar appears/disappears or density changes). */
+  stickyHeader?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { padding: true, stickyHeader: false });
+
+const slots = useSlots();
+const root = ref<HTMLElement | null>(null);
+const stickyEl = ref<HTMLElement | null>(null);
+let ro: ResizeObserver | null = null;
+/** The stuck region is taller than a third of the window (an AI draft or a
+ *  bulk-add box open in the subheader): it would cover the list it belongs
+ *  to and the page couldn't scroll past it, so it scrolls with the card. */
+const tooTall = ref(false);
+
+function syncStickyHeight(): void {
+  if (!root.value || !stickyEl.value) return;
+  const h = Math.round(stickyEl.value.getBoundingClientRect().height);
+  tooTall.value = typeof window !== "undefined" && window.innerHeight > 0 && h > window.innerHeight / 3;
+  root.value.style.setProperty("--wp-card-header-h", tooTall.value ? "0px" : `${h}px`);
+}
+
+onMounted(() => {
+  if (!props.stickyHeader || !stickyEl.value) return;
+  syncStickyHeight();
+  if (typeof ResizeObserver !== "undefined") {
+    ro = new ResizeObserver(syncStickyHeight);
+    ro.observe(stickyEl.value);
+  }
+  window.addEventListener("resize", syncStickyHeight);
+});
+onBeforeUnmount(() => {
+  ro?.disconnect();
+  ro = null;
+  window.removeEventListener("resize", syncStickyHeight);
+});
+</script>
+
+<template>
+  <section ref="root" class="wp-card" :class="{ 'wp-card--sticky-header': stickyHeader && !tooTall }">
+    <div ref="stickyEl" class="wp-card__sticky">
+      <header v-if="title || slots.actions" class="wp-card__header">
+        <div class="wp-card__title-wrap">
+          <h2 v-if="title" class="wp-card__title">{{ title }}</h2>
+          <p v-if="subtitle" class="wp-card__subtitle">{{ subtitle }}</p>
+        </div>
+        <span class="wp-spacer" />
+        <slot name="actions" />
+      </header>
+      <slot name="subheader" />
+    </div>
+    <div :class="padding ? 'wp-card__body' : ''">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/Checkbox.vue

@@ -1,107 +1,109 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-interface Props {
-  modelValue: boolean;
-  label?: string | undefined;
-  disabled?: boolean | undefined;
-  error?: boolean | undefined;
-  id?: string | undefined;
-  ariaLabel?: string | undefined;
-  /**
-   * Tri-state indicator. When true AND `modelValue` is false, the
-   * checkbox renders a horizontal dash instead of a checkmark and
-   * announces `aria-checked="mixed"`. Used by group/select-all
-   * controls where the underlying collection is partially selected.
-   * `modelValue=true` always wins — a fully-checked box never
-   * renders as indeterminate even if the prop is set.
-   */
-  indeterminate?: boolean | undefined;
-  /**
-   * Draw the whole row as an input-height field (border, fill, full width)
-   * whose label fills it, for a yes/no filter that sits in a form grid
-   * beside Selects (the list pages' "Favorites only").
-   */
-  field?: boolean | undefined;
-}
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: boolean): void;
-}>();
-
-const showIndeterminate = computed<boolean>(
-  () => !!props.indeterminate && !props.modelValue,
-);
-
-const ariaChecked = computed<"true" | "false" | "mixed">(() => {
-  if (props.modelValue) return "true";
-  if (showIndeterminate.value) return "mixed";
-  return "false";
-});
-
-function toggle() {
-  if (props.disabled) return;
-  emit("update:modelValue", !props.modelValue);
-}
-</script>
-
-<template>
-  <span class="wp-checkbox" :class="{ 'is-disabled': disabled, 'wp-checkbox--field': field }">
-    <!-- Wrapper is a <span> rather than a <label> on purpose. Native <label>
-         re-dispatches click on its associated form control in some pointer
-         paths (notably when the click target is the SVG inside the button),
-         firing the button's @click twice — which double-toggled and left
-         the underlying model unchanged when a parent also wired a click
-         handler. The span wrapper has no synthetic-dispatch behavior. -->
-    <button
-      type="button"
-      class="wp-check"
-      :data-checked="modelValue ? 'true' : 'false'"
-      :data-indeterminate="showIndeterminate ? 'true' : 'false'"
-      :aria-checked="ariaChecked"
-      :aria-label="ariaLabel ?? label"
-      :aria-invalid="error || undefined"
-      :disabled="disabled"
-      role="checkbox"
-      @click="toggle"
-    >
-      <!-- tokens.css gives `.wp-check svg` pointer-events: none so the entire
-           button area (including the check mark) is a single click target —
-           clicks land on the button itself, not the SVG child. Without this,
-           a click on the SVG centerpoint could route through wrapper-bubble
-           paths in some browsers/automation drivers and double-fire toggle.
-           No inline style here: the TUI look hides the drawn mark (it reads
-           [x] instead), and an inline display would beat it. -->
-      <svg
-        v-if="modelValue"
-        viewBox="0 0 12 12"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M3 6.2l2.2 2.2L9 4.4"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <!-- Indeterminate dash. Same pointer-events rule as the checkmark. -->
-      <svg
-        v-else-if="showIndeterminate"
-        viewBox="0 0 12 12"
-        fill="none"
-        aria-hidden="true"
-      >
-        <path
-          d="M3 6h6"
-          stroke="currentColor"
-          stroke-width="1.8"
-          stroke-linecap="round"
-        />
-      </svg>
-    </button>
-    <span v-if="label" class="wp-checkbox__label" @click="toggle">{{ label }}</span>
-  </span>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  label?: string | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+  /**
+   * Tri-state indicator. When true AND `modelValue` is false, the
+   * checkbox renders a horizontal dash instead of a checkmark and
+   * announces `aria-checked="mixed"`. Used by group/select-all
+   * controls where the underlying collection is partially selected.
+   * `modelValue=true` always wins — a fully-checked box never
+   * renders as indeterminate even if the prop is set.
+   */
+  indeterminate?: boolean | undefined;
+  /**
+   * Draw the whole row as an input-height field (border, fill, full width)
+   * whose label fills it, for a yes/no filter that sits in a form grid
+   * beside Selects (the list pages' "Favorites only").
+   */
+  field?: boolean | undefined;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+}>();
+
+const showIndeterminate = computed<boolean>(
+  () => !!props.indeterminate && !props.modelValue,
+);
+
+const ariaChecked = computed<"true" | "false" | "mixed">(() => {
+  if (props.modelValue) return "true";
+  if (showIndeterminate.value) return "mixed";
+  return "false";
+});
+
+function toggle() {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+}
+</script>
+
+<template>
+  <span class="wp-checkbox" :class="{ 'is-disabled': disabled, 'wp-checkbox--field': field }">
+    <!-- Wrapper is a <span> rather than a <label> on purpose. Native <label>
+         re-dispatches click on its associated form control in some pointer
+         paths (notably when the click target is the SVG inside the button),
+         firing the button's @click twice — which double-toggled and left
+         the underlying model unchanged when a parent also wired a click
+         handler. The span wrapper has no synthetic-dispatch behavior. -->
+    <button
+      type="button"
+      class="wp-check"
+      :data-checked="modelValue ? 'true' : 'false'"
+      :data-indeterminate="showIndeterminate ? 'true' : 'false'"
+      :aria-checked="ariaChecked"
+      :aria-label="ariaLabel ?? label"
+      :aria-invalid="error || undefined"
+      :disabled="disabled"
+      role="checkbox"
+      @click="toggle"
+    >
+      <!-- tokens.css gives `.wp-check svg` pointer-events: none so the entire
+           button area (including the check mark) is a single click target —
+           clicks land on the button itself, not the SVG child. Without this,
+           a click on the SVG centerpoint could route through wrapper-bubble
+           paths in some browsers/automation drivers and double-fire toggle.
+           No inline style here: the TUI look hides the drawn mark (it reads
+           [x] instead), and an inline display would beat it. -->
+      <svg
+        v-if="modelValue"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6.2l2.2 2.2L9 4.4"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <!-- Indeterminate dash. Same pointer-events rule as the checkmark. -->
+      <svg
+        v-else-if="showIndeterminate"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M3 6h6"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+    <!-- A click on the words toggles too, like a <label>; keyboard users use the box itself. -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <span v-if="label" class="wp-checkbox__label" @click="toggle">{{ label }}</span>
+  </span>
+</template>