@dumiflex/wp-kit 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.9.0](https://github.com/DumiFlex/wp-kit/compare/v0.8.0...v0.9.0) (2026-11-03)
+
+
+### Features
+
+* named colour swatches with a swatch slot, and a natural-shape ImageGrid ([4184232](https://github.com/DumiFlex/wp-kit/commit/4184232477b87557298c10c1b7d9310664f6c0a2))
+
+
+### Bug Fixes
+
+* draw the switch track in one piece at canvas zooms ([#84](https://github.com/DumiFlex/wp-kit/issues/84)) ([9d38d0d](https://github.com/DumiFlex/wp-kit/commit/9d38d0d71dc2a855f72de8925cd774eb05b35d10))
+
 ## [0.8.0](https://github.com/DumiFlex/wp-kit/compare/v0.7.1...v0.8.0) (2026-11-03)
 
 

package/package.json

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

package/src/ImageGrid.vue

@@ -11,9 +11,15 @@
  * Tiles are buttons in reading order (one Tab stop each). A tile with no
  * `src` yet (a frame still rendering) draws a Skeleton and can't be opened;
  * the Lightbox steps only through the images that are there.
+ *
+ * `aspect="auto"` keeps each picture's own shape, `columns` fixes the column
+ * count and `hint` puts a magnifier on a tile under the pointer, so one
+ * screenshot that opens full size is `<ImageGrid :images="[shot]" aspect="auto"
+ * :columns="1" hint />`. A picture that fails to load emits `error`.
  */
 import { computed, ref } from "vue";
 import Lightbox from "./Lightbox.vue";
+import Icon from "./Icon.vue";
 import Skeleton from "./Skeleton.vue";
 import Checkbox from "./Checkbox.vue";
 
@@ -23,8 +29,12 @@ const props = withDefaults(defineProps<{
   images: GridImage[];
   /** Smallest tile width in px. */
   minSize?: number | undefined;
-  /** Width / height of a tile. */
-  aspect?: number | undefined;
+  /** Width / height of a tile; `"auto"` keeps each picture's own shape (no crop). */
+  aspect?: number | "auto" | undefined;
+  /** A fixed number of columns instead of as many as fit `minSize` (1 = one picture full width). */
+  columns?: number | undefined;
+  /** A magnifier in the corner of each tile on hover and focus. */
+  hint?: boolean | undefined;
   gap?: "sm" | "md" | undefined;
   selectable?: boolean | undefined;
   selected?: string[] | undefined;
@@ -36,6 +46,8 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   (e: "update:selected", v: string[]): void;
   (e: "open", index: number): void;
+  /** A picture failed to load. */
+  (e: "error", index: number): void;
 }>();
 
 const open = ref(false);
@@ -63,7 +75,12 @@ function toggle(id: string, on: boolean): void {
     class="wp-image-grid__list"
     :data-gap="gap"
     :aria-label="ariaLabel"
-    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
+    :data-aspect="aspect === 'auto' ? 'auto' : undefined"
+    :style="{
+      '--_min': `${minSize}px`,
+      '--_aspect': String(aspect),
+      ...(columns ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}),
+    }"
   >
     <li
       v-for="(img, i) in images"
@@ -79,7 +96,8 @@ function toggle(id: string, on: boolean): void {
         :data-loading="!img.src || undefined"
         @click="show(i)"
       >
-        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
+        <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy" @error="emit('error', i)">
+        <span v-if="hint && img.src" class="wp-image-grid__hint" aria-hidden="true"><Icon name="search-plus" :size="12" /></span>
         <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
       </button>
       <Checkbox
@@ -114,6 +132,15 @@ function toggle(id: string, on: boolean): void {
 .wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
 .wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
 .wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.wp-image-grid__list[data-aspect="auto"] .wp-image-grid__open { position: relative; aspect-ratio: auto; }
+.wp-image-grid__list[data-aspect="auto"] .wp-image-grid__img { height: auto; }
+.wp-image-grid__open { position: relative; }
+.wp-image-grid__hint {
+  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px)); background: var(--wp-scrim); color: var(--wp-on-media);
+  opacity: 0; transition: opacity var(--wp-motion-hover);
+}
+.wp-image-grid__open:hover .wp-image-grid__hint, .wp-image-grid__open:focus-visible .wp-image-grid__hint { opacity: 1; }
 .wp-image-grid__open[data-loading] { cursor: progress; }
 .wp-image-grid__empty { width: 100%; height: 100%; }
 .wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
@@ -122,6 +149,6 @@ function toggle(id: string, on: boolean): void {
   text-overflow: ellipsis; white-space: nowrap;
 }
 @media (prefers-reduced-motion: reduce) {
-  .wp-image-grid__open { transition: none; }
+  .wp-image-grid__open, .wp-image-grid__hint { transition: none; }
 }
 </style>

package/src/RadioGroup.vue

@@ -18,7 +18,9 @@
  *
  * `variant="swatch"` draws each option as a round colour swatch (its
  * `color`), in a row, with the label as its name and tooltip: an accent or
- * frame colour picked from a few.
+ * frame colour picked from a few. `named` writes each label under its
+ * swatch, and the `swatch` slot draws a swatch itself (a split "theme's own"
+ * circle, a rainbow for "custom"; the slot gets `{ option, checked }`).
  */
 import { nextTick, ref } from "vue";
 
@@ -45,9 +47,14 @@ const props = withDefaults(defineProps<{
   testPrefix?: string | undefined;
   /** `swatch`: round colour swatches in a row, named by their label. */
   variant?: "default" | "swatch" | undefined;
+  /** With `variant="swatch"`: show each label under its swatch. */
+  named?: boolean | undefined;
 }>(), { orientation: "vertical", size: "md", ariaLabel: undefined, testPrefix: undefined, variant: "default" });
 
-defineSlots<{ label?: (p: { option: RadioOption<T> }) => unknown }>();
+defineSlots<{
+  label?: (p: { option: RadioOption<T> }) => unknown;
+  swatch?: (p: { option: RadioOption<T>; checked: boolean }) => unknown;
+}>();
 
 const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
 const rootEl = ref<HTMLElement | null>(null);
@@ -93,6 +100,7 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
     :data-size="size"
     :data-cards="cards || undefined"
     :data-variant="variant"
+    :data-named="variant === 'swatch' && named ? '' : undefined"
   >
     <!-- Each radio has a tabindex (roving: only the checked one is a Tab stop). -->
     <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -106,18 +114,19 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
       :tabindex="!disabled && o.value === tabStop() ? 0 : -1"
       :data-checked="modelValue === o.value || undefined"
       :data-test="testPrefix ? `${testPrefix}-${o.value}` : undefined"
-      :aria-label="variant === 'swatch' ? o.label : undefined"
-      :title="variant === 'swatch' ? o.label : undefined"
+      :aria-label="variant === 'swatch' && !named ? o.label : undefined"
+      :title="variant === 'swatch' && !named ? o.label : undefined"
       @click="!o.disabled && pick(o.value)"
       @keydown="onKeydown($event, o.value)"
     >
       <span
         v-if="variant === 'swatch'"
         class="wp-radio-group__swatch"
-        :style="{ background: o.color }"
+        :style="$slots.swatch ? undefined : { background: o.color }"
         aria-hidden="true"
-      />
+      ><slot name="swatch" :option="o" :checked="modelValue === o.value" /></span>
       <span v-else class="wp-radio-group__dot" aria-hidden="true" />
+      <span v-if="variant === 'swatch' && named" class="wp-radio-group__name">{{ o.label }}</span>
       <span v-if="variant !== 'swatch'" class="wp-radio-group__text">
         <span class="wp-radio-group__label"><slot name="label" :option="o">{{ o.label }}</slot></span>
         <span v-if="o.hint" class="wp-radio-group__hint">{{ o.hint }}</span>
@@ -169,6 +178,17 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 18%, transparent);
 }
 .wp-radio-group[data-size="sm"] .wp-radio-group__swatch { width: 16px; height: 16px; }
+/* Named swatches: the label under each, the ring drawn round the swatch only. */
+.wp-radio-group[data-named] .wp-radio-group__opt {
+  flex-direction: column; align-items: center; gap: var(--wp-space-2); min-width: 52px;
+  padding: var(--wp-space-2); border-radius: var(--wp-radius-sm);
+}
+.wp-radio-group[data-named] .wp-radio-group__swatch { width: 28px; height: 28px; overflow: hidden; }
+.wp-radio-group__name { color: var(--wp-text-muted); font-size: var(--wp-text-xs); line-height: 1.2; text-align: center; }
+.wp-radio-group[data-named] .wp-radio-group__opt[data-checked] .wp-radio-group__name { color: var(--wp-text); }
+.wp-radio-group[data-variant="swatch"][data-named] .wp-radio-group__opt[data-checked] { box-shadow: none; }
+.wp-radio-group[data-named] .wp-radio-group__opt[data-checked] .wp-radio-group__swatch { box-shadow: 0 0 0 2px var(--wp-bg-1), 0 0 0 4px var(--wp-accent); }
+.wp-radio-group[data-variant="swatch"][data-named] .wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked] { box-shadow: 0 0 0 2px var(--wp-accent); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked]:focus-visible { box-shadow: 0 0 0 2px var(--wp-accent), 0 0 0 4px var(--wp-border-focus); }

package/src/WpSwitch.vue

@@ -92,7 +92,9 @@ function flip(): void {
   height: var(--switch-h);
   box-sizing: border-box;
   border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius-cap, 999px);
+  /* A hair under half the height, not 999px: on the ComfyUI canvas Firefox
+     draws a bordered full pill in pieces that seam at zooms like 0.64 / 0.8. */
+  border-radius: min(calc(var(--switch-h) / 2 - 1px), var(--wp-radius-cap, 999px));
   background: var(--wp-bg-3);
   transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
 }