@dumiflex/wp-kit 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.8.0](https://github.com/DumiFlex/wp-kit/compare/v0.7.1...v0.8.0) (2026-11-03)
+
+
+### Features
+
+* Chip stat tiles and DataTable rows that unfold ([8c1cade](https://github.com/DumiFlex/wp-kit/commit/8c1cade94cb5bd1900ca8fca948a4b18fa6ba4f5))
+
+
+### Bug Fixes
+
+* Lightbox closes on a click anywhere dark, the bar and around the picture included ([#79](https://github.com/DumiFlex/wp-kit/issues/79)) ([a6eb440](https://github.com/DumiFlex/wp-kit/commit/a6eb44053641342a96f795b2c75af82d5417c334))
+
 ## [0.7.1](https://github.com/DumiFlex/wp-kit/compare/v0.7.0...v0.7.1) (2026-11-03)
 
 

package/package.json

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

package/src/Chip.vue

@@ -18,6 +18,12 @@
  * filters reads at a glance. `count` puts a small number after the label.
  * `size`: `xs` (default, a label in a line of text), `sm` (24px, a filter
  * row) or `md` (32px, next to a md control).
+ *
+ * `variant="stat"` is the same chip as a tile: the `count` big on top, the
+ * label under it and a top edge in `color` (a summary row whose tiles also
+ * filter the list below):
+ *
+ *   <Chip variant="stat" :color="roleColour(r)" :count="n" :pressed="on.has(r)" @click="flip(r)">{{ label }}</Chip>
  */
 import { computed, type Component } from "vue";
 import Icon from "./Icon.vue";
@@ -45,9 +51,11 @@ interface Props {
   /** A status dot before the label, in the chip's colour. */
   dot?: boolean | undefined;
   size?: "xs" | "sm" | "md" | undefined;
+  /** `pill` (default) or `stat`: a tile with the count big on top. */
+  variant?: "pill" | "stat" | undefined;
   disabled?: boolean | undefined;
 }
-const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span", size: "xs", pressed: undefined });
+const props = withDefaults(defineProps<Props>(), { tone: "default", as: "span", size: "xs", variant: "pill", pressed: undefined });
 
 const emit = defineEmits<{
   (e: "remove"): void;
@@ -56,19 +64,21 @@ const emit = defineEmits<{
 const toggle = computed(() => props.pressed !== undefined);
 const tag = computed(() => (toggle.value ? "button" : props.as));
 const pressable = computed(() => tag.value !== "span");
+const stat = computed(() => props.variant === "stat");
 const classes = computed(() => [
   "wp-chip",
   `wp-chip--${props.size}`,
+  stat.value && "wp-chip--stat",
   pressable.value && "wp-chip--action",
   toggle.value && "wp-chip--toggle",
   toggle.value && props.color && "wp-chip--tinted",
-  !toggle.value && (props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`),
+  !toggle.value && !stat.value && (props.color ? "wp-chip--color" : props.tone !== "default" && `wp-chip--${props.tone}`),
 ]);
 
 const colorStyle = computed(() => {
   if (!props.color) return undefined;
   const c = props.color;
-  if (toggle.value) return { "--wp-chip-c": c };
+  if (toggle.value || stat.value) return { "--wp-chip-c": c };
   return {
     color: `color-mix(in oklab, ${c} 65%, var(--wp-text))`,
     background: `color-mix(in oklab, ${c} 18%, transparent)`,
@@ -94,9 +104,15 @@ function onRemove(e: MouseEvent) {
     <span v-if="dot" class="wp-chip__dot" aria-hidden="true" />
     <!-- 10px sub-ICON_SM: the chip font is 10.5px and a 12px icon read
          oversized next to it. Larger chips get a larger icon. -->
-    <Icon v-if="icon" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 12" />
-    <slot />
-    <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
+    <Icon v-if="icon && !stat" class="wp-chip__icon" :name="icon" :size="size === 'xs' ? 10 : 12" />
+    <template v-if="stat">
+      <span v-if="count !== undefined" class="wp-chip__stat-n">{{ count }}</span>
+      <span class="wp-chip__stat-label"><slot /></span>
+    </template>
+    <template v-else>
+      <slot />
+      <span v-if="count !== undefined" class="wp-chip__count">{{ count }}</span>
+    </template>
     <button
       v-if="removable && !pressable"
       type="button"
@@ -163,4 +179,37 @@ function onRemove(e: MouseEvent) {
   background: color-mix(in oklab, var(--wp-chip-c) 22%, transparent);
   color: inherit;
 }
+
+/* A stat tile: the count big on top, the label under it, a top edge in its
+   colour. Pressed, it fills with a little of that colour. */
+.wp-chip--stat {
+  --wp-chip-c: var(--wp-border-strong);
+  box-sizing: border-box;
+  height: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--wp-space-1);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border: 1px solid var(--wp-border);
+  border-top: 3px solid var(--wp-chip-c);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  font-size: var(--wp-text-xs);
+  line-height: 1.3;
+  text-align: left;
+  white-space: normal;
+}
+.wp-chip--stat.wp-chip--toggle[aria-pressed="true"] {
+  border-color: var(--wp-chip-c);
+  background: color-mix(in oklab, var(--wp-chip-c) 12%, var(--wp-bg-2));
+  color: var(--wp-text);
+}
+.wp-chip__stat-n {
+  font-size: var(--wp-text-xl);
+  font-weight: var(--wp-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+.wp-chip__stat-label { color: var(--wp-text-muted); }
 </style>

package/src/DataTable.vue

@@ -20,9 +20,11 @@
  *
  * `row-clickable` makes each row open something (a trace, a detail panel):
  * rows take focus, and a click or Enter emits `row-click`. `active-key`
- * marks the row that is open.
+ * marks the row that is open. With a `#detail` slot the open row unfolds:
+ * the slot is drawn full width under it and each row says `aria-expanded`
+ * (toggle `active-key` in `row-click` to open and close it).
  */
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import Checkbox from "./Checkbox.vue";
 import Skeleton from "./Skeleton.vue";
 
@@ -146,6 +148,10 @@ function toggleRow(row: T, on: boolean): void {
   emit("update:selected", on ? [...props.selected.filter((x) => x !== k), k] : props.selected.filter((x) => x !== k));
 }
 
+const slots = useSlots();
+const hasDetail = computed(() => Boolean(slots.detail));
+const isActive = (row: T): boolean => props.activeKey !== null && keyOf(row) === props.activeKey;
+
 const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
 </script>
 
@@ -212,13 +218,13 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
           </td>
         </tr>
         <template v-else>
+          <template v-for="(row, index) in shown" :key="keyOf(row)">
           <tr
-            v-for="(row, index) in shown"
-            :key="keyOf(row)"
             v-bind="rowAttrs ? rowAttrs(row) : {}"
             :aria-selected="selectable ? picked.has(keyOf(row)) : undefined"
             :data-selected="selectable && picked.has(keyOf(row)) ? 'true' : undefined"
-            :data-active="activeKey !== null && keyOf(row) === activeKey ? 'true' : undefined"
+            :data-active="isActive(row) ? 'true' : undefined"
+            :aria-expanded="rowClickable && hasDetail ? isActive(row) : undefined"
             :data-clickable="rowClickable || undefined"
             :tabindex="rowClickable ? 0 : undefined"
             @click="rowClickable && emit('row-click', row)"
@@ -240,6 +246,10 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
               <slot :name="`cell-${c.key}`" :row="row" :value="cell(row, c.key)" :index="index">{{ cell(row, c.key) ?? "" }}</slot>
             </td>
           </tr>
+          <tr v-if="hasDetail && isActive(row)" class="wp-data-table__detail">
+            <td :colspan="span"><slot name="detail" :row="row" :index="index" /></td>
+          </tr>
+          </template>
         </template>
       </tbody>
     </table>
@@ -248,6 +258,7 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
 
 <style scoped>
 .wp-data-table { overflow: auto; }
+.wp-data-table__detail > td { background: var(--wp-bg-2); }
 .wp-data-table th[data-align="right"], .wp-data-table td[data-align="right"] { text-align: right; }
 .wp-data-table th[data-align="center"], .wp-data-table td[data-align="center"] { text-align: center; }
 .wp-data-table th[data-align="right"] .wp-data-table__sort { flex-direction: row-reverse; }

package/src/Lightbox.vue

@@ -102,11 +102,15 @@ watch(() => props.open, async (v, was) => {
       :aria-label="image ? `${image.alt}, ${at + 1} of ${count}` : 'Image viewer'"
       @click.self="close"
     >
-      <div class="wp-lightbox__bar">
+      <!-- The bar spans the width: its empty part is dark area too, so it closes. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <div class="wp-lightbox__bar" @click.self="close">
         <span v-if="count > 1" class="wp-lightbox__count" aria-hidden="true">{{ at + 1 }} / {{ count }}</span>
         <Button variant="ghost" icon="times" aria-label="Close" class="wp-lightbox__close" kbd="Esc" @click="close" />
       </div>
-      <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
+      <!-- Space around a small picture is dark area too; the picture and its zoom keep their clicks. -->
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+      <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined" @click.self="close">
         <!-- An image with no src yet (still rendering): its shape, not an empty frame. -->
         <Skeleton v-if="!image.src" class="wp-lightbox__loading" shape="block" width="min(70vw, 640px)" height="min(60vh, 480px)" label="Still loading" />
         <WpImageZoom v-else-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />