@dumiflex/wp-kit 0.6.0 → 0.7.0

package/src/FixedValuesPreview.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/** Fixed values as a searchable variable → value → negative table, paged so
+ *  a long list stays short until asked. */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import { fixedValues, scanText, type FixedValue, type Obj } from "./preview-readers";
+import SearchInput from "./SearchInput.vue";
+import Button from "./Button.vue";
+import Chip from "./Chip.vue";
+
+const props = defineProps<{
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const PAGE = 10;
+const LONG_CHARS = 110;
+
+const rows = computed(() => fixedValues(props.inner));
+const negCount = computed(() => rows.value.filter((r) => r.negative).length);
+const refCount = computed(
+  () =>
+    rows.value.filter((r) => {
+      const s = scanText(r.value);
+      return s.refs || s.picks;
+    }).length,
+);
+
+const search = ref("");
+const onlyNeg = ref(false);
+const filtering = computed(() => search.value.trim() !== "" || onlyNeg.value);
+const visible = computed<FixedValue[]>(() => {
+  const q = search.value.trim().toLowerCase();
+  return rows.value.filter(
+    (r) =>
+      (!onlyNeg.value || r.negative) &&
+      (!q ||
+        r.name.toLowerCase().includes(q) ||
+        r.value.toLowerCase().includes(q) ||
+        r.negative.toLowerCase().includes(q)),
+  );
+});
+const showAll = ref(false);
+const shown = computed(() =>
+  showAll.value || filtering.value ? visible.value : visible.value.slice(0, PAGE),
+);
+const expanded = ref(new Set<number>());
+function toggle(i: number): void {
+  const next = new Set(expanded.value);
+  if (next.has(i)) next.delete(i);
+  else next.add(i);
+  expanded.value = next;
+}
+</script>
+
+<template>
+  <div class="wp-pv">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ rows.length }}</b><span>variable{{ rows.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-if="negCount"
+        class="wp-pv-stat"
+      >
+        <b>{{ negCount }}</b><span>with a negative</span>
+      </div>
+      <div
+        v-if="refCount"
+        class="wp-pv-stat"
+      >
+        <b>{{ refCount }}</b><span>use picks / @refs</span>
+      </div>
+    </div>
+    <div
+      v-if="rows.length > 6 || negCount"
+      class="wp-pv-tool"
+    >
+      <SearchInput
+        v-if="rows.length > 6"
+        v-model="search"
+        :placeholder="`Filter ${rows.length} values…`"
+        data-test="fixed-search"
+        class="wp-pv-search"
+      />
+      <Chip
+        v-if="negCount"
+        size="sm"
+        color="var(--wp-danger)"
+        :pressed="onlyNeg"
+        @click="onlyNeg = !onlyNeg"
+      >Has negative</Chip>
+      <span
+        v-if="filtering"
+        class="wp-pv-count"
+      >{{ visible.length }} of {{ rows.length }}</span>
+    </div>
+    <table class="wp-pv-table">
+      <colgroup>
+        <col class="wp-pv-col-n">
+        <col style="width: 150px">
+        <col>
+        <col
+          v-if="negCount"
+          style="width: 28%"
+        >
+      </colgroup>
+      <thead>
+        <tr>
+          <th />
+          <th>Variable</th>
+          <th>Value</th>
+          <th v-if="negCount">
+            Negative
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(r, i) in shown"
+          :key="i"
+          data-test="fixed-row"
+        >
+          <td class="wp-pv-n">
+            {{ i + 1 }}
+          </td>
+          <td class="wp-pv-var">
+            ${{ r.name }}
+          </td>
+          <td>
+            <div :class="{ 'wp-pv-clamp': r.value.length > LONG_CHARS && !expanded.has(i) }">
+              <TokenizedValue
+                :value="r.value"
+                :uuid-to-name="refMap"
+              />
+            </div>
+            <Button
+              v-if="r.value.length > LONG_CHARS"
+              variant="link"
+              size="sm"
+              @click="toggle(i)"
+            >{{ expanded.has(i) ? "Show less" : "Show all" }}</Button>
+          </td>
+          <td
+            v-if="negCount"
+            class="wp-pv-neg-cell"
+          >
+            <span
+              v-if="r.negative"
+              data-test="fixed-negative"
+            >
+              <span class="wp-pv-negtag">NEG</span>
+              <TokenizedValue
+                :value="r.negative"
+                :uuid-to-name="refMap"
+              />
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p
+      v-if="!visible.length"
+      class="wp-pv-empty"
+    >
+      No values match.
+    </p>
+    <div
+      v-if="!filtering && visible.length > PAGE"
+      class="wp-pv-more"
+    >
+      <Button
+        variant="link"
+        size="sm"
+        data-test="fixed-more"
+        @click="showAll = !showAll"
+      >
+        {{ showAll ? "Show fewer" : `Show ${visible.length - PAGE} more` }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>

package/src/IconPicker.vue

@@ -1,21 +1,27 @@
 <script setup lang="ts">
 /**
- * IconPicker — pick one PrimeIcons glyph, or none.
+ * IconPicker: pick one PrimeIcons glyph, or none.
  *
- * The `icon` column has existed on categories end-to-end (engine column,
- * `wp_api/categories.py` `_UPDATABLE_FIELDS`, `CategoryRow.icon`) with no UI
- * to set it, so every category rendered with the same generic bookmark.
+ *   <IconPicker v-model="cat.icon" />                      curated groups in a popover
+ *   <IconPicker v-model="note.icon" all :color="tint" />   any glyph, with a search box
+ *   <IconPicker :model-value="null" all inline :allow-none="false" @update:model-value="insert" />
  *
- * The offered glyphs live in `./icon-catalog`, which is verified against the
- * installed `primeicons.css` by a test — an unknown name renders as an empty
- * cell rather than failing, so nothing else would catch a typo.
+ * The closed picker shows the glyph and its name (`compact`: the glyph
+ * alone, for a table cell). The list opens in the kit Popover, so it follows
+ * the trigger on scroll, flips to stay on screen and closes on Escape or a
+ * click outside with focus back on the trigger. `inline` draws the list
+ * itself, with no trigger (a panel in an editor). Without `all` the list is
+ * the curated groups in `icon-catalog.ts`; with `all` it is every glyph
+ * (`pi-icons.ts`, both checked against the installed `primeicons.css` by a
+ * test), searchable by name. `color` tints the glyphs; `allow-none` (on by
+ * default) offers "No icon", which sets null.
  *
- * The glyph name is stored WITHOUT the `pi pi-` prefix (e.g. `"user"`), which
- * is what the engine column already holds and what `Icon.vue` expects.
+ * The name is stored WITHOUT the `pi pi-` prefix (`"user"`), which is what
+ * Icon.vue expects.
  */
 import { computed, ref } from "vue";
+import IconPickerPanel from "./IconPickerPanel.vue";
 import Popover from "./Popover.vue";
-import { ICON_GROUPS } from "./icon-catalog";
 
 const props = withDefaults(
   defineProps<{
@@ -25,8 +31,16 @@ const props = withDefaults(
     dataTest?: string | undefined;
     /** Icon only, no name beside it, for a tight table cell. */
     compact?: boolean | undefined;
+    /** Every PrimeIcons glyph, with a search box, instead of the curated groups. */
+    all?: boolean | undefined;
+    /** The list itself, no trigger or popover. */
+    inline?: boolean | undefined;
+    /** Tint the glyphs. */
+    color?: string | undefined;
+    /** Offer "No icon" (null). */
+    allowNone?: boolean | undefined;
   }>(),
-  { ariaLabel: "Pick an icon", dataTest: undefined, compact: false },
+  { ariaLabel: "Pick an icon", dataTest: undefined, compact: false, all: false, inline: false, color: undefined, allowNone: true },
 );
 
 const emit = defineEmits<{ "update:modelValue": [v: string | null] }>();
@@ -49,10 +63,10 @@ function pick(name: string | null): void {
 </script>
 
 <template>
-  <!-- On the kit Popover: it follows the trigger on scroll, flips to stay on
-       screen, and closes on Escape or a click outside with focus back on
-       the trigger. -->
-  <Popover v-model:open="open" :label="ariaLabel" role="listbox">
+  <div v-if="inline" class="wp-iconpick wp-iconpick--inline" :data-test="dataTest">
+    <IconPickerPanel :current="current" :all="all" :color="color" :allow-none="allowNone" @pick="pick" />
+  </div>
+  <Popover v-else v-model:open="open" :label="ariaLabel" role="listbox">
     <template #trigger="{ props: triggerProps }">
       <button
         v-bind="triggerProps"
@@ -66,7 +80,7 @@ function pick(name: string | null): void {
              different intrinsic widths and baselines, so without it the trigger
              resized and the mark shifted the moment an icon was picked. -->
         <span class="wp-iconpick__slot" aria-hidden="true">
-          <i v-if="current" :class="`pi pi-${current}`" />
+          <i v-if="current" :class="`pi pi-${current}`" :style="color ? { color } : undefined" />
           <span v-else class="wp-iconpick__none">—</span>
         </span>
         <span
@@ -78,32 +92,7 @@ function pick(name: string | null): void {
         <i class="pi pi-chevron-down wp-iconpick__caret" aria-hidden="true" />
       </button>
     </template>
-    <div class="wp-iconpick__panel" :data-test="dataTest ? `${dataTest}-panel` : undefined">
-      <button
-        type="button"
-        class="wp-iconpick__clear"
-        data-test="icon-picker-none"
-        @click="pick(null)"
-      >No icon</button>
-      <div v-for="group in ICON_GROUPS" :key="group.label" class="wp-iconpick__group">
-        <div class="wp-iconpick__group-label">{{ group.label }}</div>
-        <div class="wp-iconpick__grid">
-          <button
-            v-for="name in group.icons"
-            :key="name"
-            type="button"
-            class="wp-iconpick__cell"
-            :class="{ 'wp-iconpick__cell--on': name === current }"
-            role="option"
-            :aria-selected="name === current"
-            :title="name"
-            :aria-label="name"
-            :data-test="`icon-picker-${name}`"
-            @click="pick(name)"
-          ><i :class="`pi pi-${name}`" aria-hidden="true" /></button>
-        </div>
-      </div>
-    </div>
+    <IconPickerPanel :current="current" :all="all" :color="color" :allow-none="allowNone" :data-test="dataTest" @pick="pick" />
   </Popover>
 </template>
 
@@ -147,63 +136,3 @@ function pick(name: string | null): void {
 .wp-iconpick__caret { font-size: 10px; color: var(--wp-text-dim); line-height: 1; }
 </style>
 
-<style>
-/* Unscoped: the panel is teleported to <body> by Popover, so a scoped selector's
-   `[data-v-…]` attribute would never match it. Class names are
-   component-specific (`wp-iconpick*`), so global is safe. */
-/* Lives inside the kit Popover's panel, which gives the frame and shadow. */
-.wp-iconpick__panel {
-  width: 212px;
-  max-height: 276px;
-  overflow-y: auto;
-}
-.wp-iconpick__clear {
-  width: 100%;
-  margin-bottom: var(--wp-space-3);
-  padding: var(--wp-space-2);
-  background: transparent;
-  border: 1px dashed var(--wp-border);
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text-muted);
-  font-size: var(--wp-text-xs);
-  cursor: pointer;
-}
-.wp-iconpick__clear:hover { color: var(--wp-text); border-color: var(--wp-accent); }
-.wp-iconpick__group + .wp-iconpick__group { margin-top: var(--wp-space-3); }
-.wp-iconpick__group-label {
-  font-size: 9.5px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--wp-text-dim);
-  margin-bottom: var(--wp-space-2);
-}
-.wp-iconpick__grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 2px;
-}
-.wp-iconpick__cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text-muted);
-  cursor: pointer;
-  font-size: 13px;
-}
-/* Kill the icon font's own line box — it otherwise pushes the glyph off the
- * cell's vertical centre even though the cell is a centred flex container. */
-.wp-iconpick__cell i { line-height: 1; }
-.wp-iconpick__cell:hover {
-  background: color-mix(in oklab, var(--wp-accent) 18%, transparent);
-  color: var(--wp-text);
-}
-.wp-iconpick__cell--on {
-  border-color: var(--wp-accent);
-  color: var(--wp-accent);
-}
-</style>

package/src/IconPickerPanel.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * The grid inside IconPicker (in its Popover, or on its own with `inline`).
+ * Internal: use IconPicker. Without `all` it offers the curated groups in
+ * `icon-catalog.ts`; with `all`, every PrimeIcons glyph (`pi-icons.ts`) and a
+ * search box. Emits the picked name without `pi-`, or null for No icon.
+ */
+import { computed, ref } from "vue";
+import SearchInput from "./SearchInput.vue";
+import { vTooltip } from "./tooltip";
+import { ICON_GROUPS } from "./icon-catalog";
+import { PI_ICONS } from "./pi-icons";
+
+const props = withDefaults(defineProps<{
+  current: string | null;
+  all?: boolean | undefined;
+  /** Tint the glyphs (a note's colour). */
+  color?: string | undefined;
+  allowNone?: boolean | undefined;
+  dataTest?: string | undefined;
+}>(), { all: false, color: undefined, allowNone: true, dataTest: undefined });
+
+const emit = defineEmits<{ pick: [name: string | null] }>();
+
+const query = ref("");
+const words = (name: string): string => name.replace(/-/g, " ");
+/** "arrow right" and "pi-arrow-right" both find arrow-right. */
+const found = computed(() => {
+  const q = query.value.trim().toLowerCase().replace(/^pi-/, "").replace(/\s+/g, "-");
+  return q ? PI_ICONS.filter((n) => n.includes(q)) : PI_ICONS;
+});
+const groups = computed(() => (props.all ? [{ label: "", icons: found.value }] : ICON_GROUPS));
+const tint = computed(() => (props.color ? { color: props.color } : undefined));
+</script>
+
+<template>
+  <div class="wp-iconpick__panel" :data-all="all || undefined" :data-test="dataTest ? `${dataTest}-panel` : undefined">
+    <SearchInput
+      v-if="all"
+      v-model="query"
+      size="sm"
+      placeholder="Search icons…"
+      aria-label="Search icons"
+      test-prefix="icon-picker"
+      class="wp-iconpick__search"
+    />
+    <button
+      v-if="allowNone"
+      type="button"
+      class="wp-iconpick__clear"
+      :aria-pressed="!current"
+      data-test="icon-picker-none"
+      @click="emit('pick', null)"
+    >No icon</button>
+    <div v-for="group in groups" :key="group.label" class="wp-iconpick__group">
+      <div v-if="group.label" class="wp-iconpick__group-label">{{ group.label }}</div>
+      <div class="wp-iconpick__grid" role="listbox" :aria-label="group.label || 'Icons'">
+        <button
+          v-for="name in group.icons"
+          :key="name"
+          v-tooltip="words(name)"
+          type="button"
+          class="wp-iconpick__cell"
+          :class="{ 'wp-iconpick__cell--on': name === current }"
+          role="option"
+          :aria-selected="name === current"
+          :aria-label="words(name)"
+          :data-test="`icon-picker-${name}`"
+          @click="emit('pick', name)"
+        ><i :class="`pi pi-${name}`" :style="tint" aria-hidden="true" /></button>
+        <p v-if="!group.icons.length" class="wp-iconpick__empty">No icon matches "{{ query }}".</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-iconpick__panel {
+  width: 212px;
+  max-height: 276px;
+  overflow-y: auto;
+}
+.wp-iconpick__panel[data-all] { width: 264px; }
+/* Stays at the top while the glyphs scroll under it. */
+.wp-iconpick__search { position: sticky; top: 0; z-index: 1; margin-bottom: var(--wp-space-3); box-shadow: 0 0 0 var(--wp-space-2) var(--wp-bg-2); background: var(--wp-bg-2); }
+.wp-iconpick__clear {
+  width: 100%;
+  margin-bottom: var(--wp-space-3);
+  padding: var(--wp-space-2);
+  background: transparent;
+  border: 1px dashed var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-muted);
+  font: inherit;
+  font-size: var(--wp-text-xs);
+  cursor: pointer;
+}
+.wp-iconpick__clear:hover { color: var(--wp-text); border-color: var(--wp-accent); }
+.wp-iconpick__clear[aria-pressed="true"] { border-style: solid; border-color: var(--wp-accent); color: var(--wp-text); }
+.wp-iconpick__clear:focus-visible, .wp-iconpick__cell:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-iconpick__group + .wp-iconpick__group { margin-top: var(--wp-space-3); }
+.wp-iconpick__group-label {
+  margin-bottom: var(--wp-space-2);
+  font-size: var(--wp-text-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--wp-text-dim);
+}
+.wp-iconpick__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+}
+.wp-iconpick__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-muted);
+  cursor: pointer;
+}
+/* An even size, on whole pixels; the font's own line box would push it off centre. */
+.wp-iconpick__cell .pi { font-size: 14px; line-height: 1; }
+.wp-iconpick__cell:hover { background: color-mix(in oklab, var(--wp-accent) 18%, transparent); color: var(--wp-text); }
+.wp-iconpick__cell--on { border-color: var(--wp-accent); color: var(--wp-accent); }
+.wp-iconpick__empty { grid-column: 1 / -1; margin: var(--wp-space-2) 0; color: var(--wp-text-dim); font-size: var(--wp-text-sm); }
+</style>

package/src/LoadingMark.vue

@@ -21,9 +21,10 @@ let nextId = 0;
  * box, for a panel or page that is loading. `mono` draws it in the text
  * colour, for a host with its own colours (a busy button).
  */
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots } from "vue";
+import { computed, ref, useSlots } from "vue";
 import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
-import { BOX, PAD, animate, drawNow, type Animated, type Look } from "./loading-mark-motion";
+import { canvasBox, useCanvasMotion } from "./canvas-motion";
+import { drawPose, poseAt, type Look } from "./loading-mark-motion";
 
 const props = withDefaults(defineProps<{
   /** Width and height in px. Default 14, or 40 with `block`. */
@@ -56,16 +57,10 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
 
 /* The SVG is the still mark (first paint, reduced motion, a page with no
  * canvas). Once mounted, a canvas over it draws the motion: see
- * `loading-mark-motion.ts` for why it is not CSS. */
+ * `canvas-motion.ts` for why it is not CSS. */
 const root = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLCanvasElement | null>(null);
-const live = ref(false);
-const drawn = ref(false);
-const canvasStyle = computed(() => {
-  const side = (px.value * BOX) / 1024;
-  const off = (px.value * PAD) / 1024;
-  return { width: `${side}px`, height: `${side}px`, top: `${-off}px`, left: `${-off}px` };
-});
+const canvasStyle = computed(() => canvasBox(px.value));
 
 let textColour = "";
 let textColourAt = -Infinity;
@@ -81,57 +76,7 @@ function look(): Look {
   return { variant: drawing.value, colours: [VIOLET.value, INDIGO.value, TEAL.value], flat: false };
 }
 
-let stop: (() => void) | null = null;
-let observer: IntersectionObserver | null = null;
-let motion: MediaQueryList | null = null;
-
-async function start(): Promise<void> {
-  if (stop) return;
-  live.value = true;
-  await nextTick();
-  const el = canvas.value;
-  if (!el || !live.value) return;
-  const mark: Animated = { canvas: el, look, clock: 0, visible: true };
-  if (!drawNow(mark)) {
-    live.value = false;
-    return;
-  }
-  drawn.value = true;
-  stop = animate(mark);
-  if (typeof IntersectionObserver === "function") {
-    observer = new IntersectionObserver((entries) => {
-      for (const e of entries) mark.visible = e.isIntersecting;
-    });
-    observer.observe(el);
-  }
-}
-function halt(): void {
-  stop?.();
-  stop = null;
-  observer?.disconnect();
-  observer = null;
-  live.value = false;
-  drawn.value = false;
-}
-function onMotionChange(): void {
-  if (motion?.matches) halt();
-  else void start();
-}
-
-onMounted(() => {
-  // No matchMedia means no way to honour reduced motion, and a test DOM
-  // (jsdom) has no canvas and logs an error for every attempt: keep the
-  // still SVG in both.
-  if (typeof window.matchMedia !== "function" || typeof requestAnimationFrame !== "function") return;
-  if (navigator.userAgent.includes("jsdom")) return;
-  motion = window.matchMedia("(prefers-reduced-motion: reduce)");
-  motion.addEventListener?.("change", onMotionChange);
-  if (!motion.matches) void start();
-});
-onBeforeUnmount(() => {
-  motion?.removeEventListener?.("change", onMotionChange);
-  halt();
-});
+const { live, drawn } = useCanvasMotion(canvas, (ctx, width, ms) => drawPose(ctx, width, look(), poseAt(ms)));
 </script>
 
 <template>