@dumiflex/wp-kit 0.5.0 → 0.6.0

package/src/Modal.vue

@@ -1,36 +1,58 @@
 <script setup lang="ts">
-import CloseButton from "./CloseButton.vue";
-import { computed, ref, useId, useSlots } from "vue";
+/**
+ * Modal: the one dialog, in the manager, on the canvas and on the community
+ * site. A titled panel (header with ×, body, optional footer) on ModalShell,
+ * so it gets the shared overlay, open/close motion and the key shield that
+ * keeps typing away from ComfyUI's shortcuts; useDialogFocus adds the focus
+ * trap and focus return.
+ *
+ *   <Modal v-model:open="open" title="Rename module">…<template #footer>…</template></Modal>
+ *
+ * Escape, the × and the backdrop close it (`close-on-backdrop="false"` keeps
+ * a backdrop click from closing a form that would lose work). A custom
+ * `#header` puts `:id="titleId"` on its own heading. `keydown` gives every key
+ * pressed inside (the shield stops them before `window`), so a dialog's own
+ * keys go there, not on a window listener. ConfirmModal is built on it.
+ *
+ * The panel styles are scoped and read only shared tokens, so it wears the
+ * colours of whichever side it is on.
+ */
+import { ref, useId, useSlots } from "vue";
+import Button from "./Button.vue";
+import ModalShell from "./ModalShell.vue";
 import { useDialogFocus } from "./useDialogFocus";
 
-interface Props {
+const props = withDefaults(defineProps<{
   open: boolean;
   title?: string | undefined;
   size?: "sm" | "md" | "lg" | undefined;
   closeOnBackdrop?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
+}>(), { size: "md", closeOnBackdrop: true, title: undefined });
 
 const emit = defineEmits<{
   (e: "update:open", v: boolean): void;
+  /** Every keydown inside the dialog. */
+  (e: "keydown", ev: KeyboardEvent): void;
 }>();
 
 const slots = useSlots();
-
-const modalClasses = computed(() => ["wp-modal", `wp-modal--${props.size}`]);
 const dialog = ref<HTMLElement | null>(null);
 const titleId = `wp-modal-title-${useId()}`;
 
-function close() {
+function close(): void {
   emit("update:open", false);
 }
 
-function onBackdrop() {
-  if (props.closeOnBackdrop) close();
+function onShellClose(reason: "escape" | "backdrop"): void {
+  if (reason === "backdrop" && !props.closeOnBackdrop) return;
+  close();
 }
 
-useDialogFocus(dialog, () => props.open, {
-  onEscape: close,
+const focus = useDialogFocus(dialog, () => props.open, {
+  // ModalShell closes on Escape; the shield stops keys before window, so the
+  // trap runs from the shell's keydown (below), not a window listener.
+  onEscape: () => undefined,
+  window: false,
   // The first control in the body, else the dialog itself (the close button
   // would make Enter close it).
   initial: (root, els) => {
@@ -38,41 +60,84 @@ useDialogFocus(dialog, () => props.open, {
     return els.find((el) => body?.contains(el)) ?? root;
   },
 });
+
+function onKeydown(ev: KeyboardEvent): void {
+  focus.onKeydown(ev);
+  emit("keydown", ev);
+}
 </script>
 
 <template>
-  <Teleport to="body">
-    <!-- The backdrop is a click target only; keyboard users close with Escape. -->
-    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-    <div
-      v-if="open"
-      class="wp-modal__backdrop"
-      data-test="modal-backdrop"
-      @mousedown.self="onBackdrop"
-    >
-      <div
-        ref="dialog"
-        :class="modalClasses"
-        role="dialog"
-        aria-modal="true"
-        :aria-labelledby="title || slots.header ? titleId : undefined"
-        tabindex="-1"
-        @mousedown.stop
-      >
-        <header v-if="title || slots.header" class="wp-modal__head">
-          <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
-          <!-- A custom header puts :id="titleId" on its own heading. -->
-          <slot name="header" :title-id="titleId" />
-          <span class="wp-spacer" />
-          <CloseButton kbd="Esc" @click="close" />
-        </header>
-        <div class="wp-modal__body">
-          <slot />
-        </div>
-        <footer v-if="slots.footer" class="wp-modal__foot">
-          <slot name="footer" />
-        </footer>
+  <ModalShell
+    :visible="open"
+    :labelledby="title || slots.header ? titleId : undefined"
+    @close="onShellClose"
+    @keydown="onKeydown"
+  >
+    <div ref="dialog" class="wp-modal" :class="`wp-modal--${size}`" tabindex="-1" data-test="modal">
+      <header v-if="title || slots.header" class="wp-modal__head">
+        <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
+        <slot name="header" :title-id="titleId" />
+        <span class="wp-modal__spacer" />
+        <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" data-test="modal-close" @click="close" />
+      </header>
+      <div class="wp-modal__body">
+        <slot />
       </div>
+      <footer v-if="slots.footer" class="wp-modal__foot">
+        <slot name="footer" />
+      </footer>
     </div>
-  </Teleport>
+  </ModalShell>
 </template>
+
+<style scoped>
+.wp-modal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  box-shadow: var(--wp-shadow-xl);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-base);
+}
+/* The dialog takes focus only when nothing in it can. */
+.wp-modal:focus { outline: none; }
+.wp-modal--sm { max-width: 380px; }
+.wp-modal--md { max-width: 560px; }
+.wp-modal--lg { max-width: 880px; }
+.wp-modal__head {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+.wp-modal__title { flex: 1; margin: 0; font-size: var(--wp-text-md); font-weight: 600; color: var(--wp-text); }
+.wp-modal__spacer { flex: 1; }
+.wp-modal__title + .wp-modal__spacer { display: none; }
+.wp-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--wp-space-5);
+}
+.wp-modal__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-top: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+@media (max-width: 640px) {
+  .wp-modal__head, .wp-modal__body, .wp-modal__foot { padding-left: var(--wp-space-5); padding-right: var(--wp-space-5); }
+}
+</style>

package/src/ModalShell.vue

@@ -3,14 +3,21 @@
     <Transition name="wp-modal" appear>
       <!-- The overlay is a click target only; keyboard users close with Escape. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-      <div v-if="visible" ref="overlayEl" class="wp-modal-overlay" @click="$emit('close')">
+      <div
+        v-if="visible"
+        ref="overlayEl"
+        class="wp-modal-overlay"
+        data-test="modal-backdrop"
+        @mousedown="downOnBackdrop = isBackdrop($event)"
+        @click="onBackdropClick"
+      >
         <div
+          ref="wrapperEl"
           class="wp-modal-wrapper"
           role="dialog"
           aria-modal="true"
           :aria-label="label"
           :aria-labelledby="labelledby"
-          @click.stop
         >
           <slot></slot>
         </div>
@@ -31,7 +38,8 @@ const props = defineProps<{
   labelledby?: string | undefined;
 }>();
 const emit = defineEmits<{
-  (e: "close"): void;
+  /** `escape` or `backdrop`, so a dialog can ignore backdrop clicks. */
+  (e: "close", reason: "escape" | "backdrop"): void;
   /** Every keydown inside the modal. Consumers MUST use this instead of a
    *  window listener: the shield stops inside-modal keys at the overlay, so a
    *  window listener would never see them. */
@@ -39,11 +47,24 @@ const emit = defineEmits<{
 }>();
 
 const overlayEl = ref<HTMLElement | null>(null);
+const wrapperEl = ref<HTMLElement | null>(null);
+
+/** The overlay or the wrapper around the panel, never the panel's own content. */
+function isBackdrop(ev: MouseEvent): boolean {
+  return ev.target === overlayEl.value || ev.target === wrapperEl.value;
+}
+/** Only a press that also STARTED on the backdrop closes: a text selection
+ *  dragged out of the dialog ends with a click on the overlay. */
+const downOnBackdrop = ref(false);
+function onBackdropClick(ev: MouseEvent): void {
+  if (downOnBackdrop.value && isBackdrop(ev)) emit("close", "backdrop");
+  downOnBackdrop.value = false;
+}
 
 function closeOnEscape(event: KeyboardEvent): void {
   if (!props.visible || event.key !== "Escape") return;
   event.preventDefault();
-  emit("close");
+  emit("close", "escape");
 }
 
 // Keys pressed INSIDE the modal are handled here and stop at the overlay, so
@@ -104,6 +125,6 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
 
 /* `wp-modal` open/close transition lives in
  * src/components/shared/_modal-motion.css (imported globally via
- * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * ContextWidget) so every modal — ModalShell consumers (Modal, ConfirmModal),
  * InjectorBindingModal — animates with the same rules. */
 </style>

package/src/Pagination.vue

@@ -13,7 +13,7 @@
  */
 import { computed } from "vue";
 import { pageItems } from "./pagination";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 
 const props = withDefaults(defineProps<{
   /** pages: numbered pages. more: a Load more button. */
@@ -54,7 +54,7 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
     <span class="wp-paging__range" aria-live="polite">{{ from }}–{{ to }} of {{ total }}</span>
     <ul class="wp-paging__list">
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
       </li>
       <li v-for="it in items" :key="it">
         <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
@@ -70,13 +70,13 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
         >{{ it }}</button>
       </li>
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
       </li>
     </ul>
   </nav>
   <div v-else-if="mode === 'more' && total > 0" class="wp-paging wp-paging--more" :data-size="size">
     <span class="wp-paging__range" aria-live="polite">Showing {{ Math.min(props.shown, total) }} of {{ total }}{{ noun ? ` ${noun}` : "" }}</span>
-    <WpButton v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</WpButton>
+    <Button v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</Button>
   </div>
 </template>
 

package/src/Popover.vue

@@ -16,9 +16,15 @@
  * element don't count as outside, so it can toggle the panel itself.
  *
  *   <Popover :open="!!cell" :anchor="cell?.el" label="Cell rule" @update:open="cell = null">…</Popover>
+ *
+ * `variant="menu"` draws the panel as a menu (`menu.css`, the look Select's
+ * list, ContextMenu and Combobox share): tighter padding, 4px from the
+ * trigger, above modals, and it closes once its trigger scrolls out of view.
+ * Every panel is capped at `maxHeight` and at the room on its side, and
+ * scrolls past that instead of covering its trigger.
  */
 import { computed, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
-import { placeFloating, viewportSize, type Placement, type Side } from "./floating";
+import { placeFloating, roomOn, viewportSize, type Placement, type Side } from "./floating";
 import { provideFloatingLayer, useFloatingChild } from "./floating-layer";
 
 const props = withDefaults(defineProps<{
@@ -34,14 +40,21 @@ const props = withDefaults(defineProps<{
   role?: "dialog" | "menu" | "listbox" | "group" | undefined;
   /** Place the panel against this element instead of the trigger slot. */
   anchor?: HTMLElement | null | undefined;
-}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null });
+  /** "menu" for a list of choices (Select, Combobox): the shared menu look. */
+  variant?: "panel" | "menu" | undefined;
+  /** Tallest the panel grows, in px, before it scrolls. */
+  maxHeight?: number | undefined;
+}>(), { placement: "bottom-start", autofocus: true, role: "dialog", anchor: null, variant: "panel" });
 
 const emit = defineEmits<{ (e: "update:open", v: boolean): void }>();
 
 const id = `wp-popover-${useId()}`;
 const anchorEl = ref<HTMLElement | null>(null);
 const panelEl = ref<HTMLElement | null>(null);
-const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const pos = ref<{ x: number; y: number; side: Side; minWidth?: number | undefined; maxHeight?: number | undefined }>({ x: -9999, y: -9999, side: "bottom" });
+const isMenu = computed(() => props.variant === "menu");
+/** A short panel still shows a few rows when the room on both sides is tight. */
+const MIN_HEIGHT = 80;
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), '
   + 'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -68,10 +81,39 @@ function place(): void {
   const p = panelEl.value;
   if (!t || !p) return;
   const r = t.getBoundingClientRect();
-  const at = placeFloating(r, { width: Math.max(p.offsetWidth, props.matchWidth ? r.width : 0), height: p.offsetHeight }, viewportSize(), {
-    placement: props.placement,
-  });
-  pos.value = { ...at, minWidth: props.matchWidth ? r.width : undefined };
+  const view = viewportSize();
+  const opts = { placement: props.placement, gap: isMenu.value ? 4 : 6 };
+  const width = Math.max(p.offsetWidth, props.matchWidth ? r.width : 0);
+  // The content's own height (scrollHeight ignores the cap set last time),
+  // so a panel that was squeezed can grow back when there is room again.
+  const borders = p.offsetHeight - p.clientHeight;
+  const natural = Math.min(p.scrollHeight + borders, props.maxHeight ?? Infinity);
+  const first = placeFloating(r, { width, height: natural }, view, opts);
+  const fits = Math.max(MIN_HEIGHT, roomOn(first.side, r, view, opts));
+  const height = Math.min(natural, fits);
+  const at = height < natural ? placeFloating(r, { width, height }, view, opts) : first;
+  pos.value = {
+    ...at,
+    minWidth: props.matchWidth ? r.width : undefined,
+    maxHeight: Math.min(props.maxHeight ?? Infinity, fits),
+  };
+}
+
+/** True once no part of the trigger is on screen. */
+function triggerGone(): boolean {
+  const t = trigger();
+  if (!t) return false;
+  const r = t.getBoundingClientRect();
+  const view = viewportSize();
+  return r.bottom < 0 || r.top > view.height || r.right < 0 || r.left > view.width;
+}
+
+function onScroll(ev: Event): void {
+  // The panel's own scrolling changes nothing about where it sits.
+  if (ev.target instanceof Node && panelEl.value?.contains(ev.target)) return;
+  // A menu whose trigger has scrolled away has nothing left to follow.
+  if (isMenu.value && triggerGone()) { setOpen(false); return; }
+  place();
 }
 
 // A Select list, menu or Popover opened from inside this panel is part of it.
@@ -103,7 +145,7 @@ function listen(on: boolean): void {
   window[m]("pointerdown", onPointerDown as EventListener, true);
   window[m]("keydown", onKeydown as EventListener, true);
   window[m]("resize", place);
-  window[m]("scroll", place, true);
+  window[m]("scroll", onScroll, true);
 }
 
 watch(() => props.open, async (v) => {
@@ -135,17 +177,26 @@ defineExpose({ place });
       :id="id"
       ref="panelEl"
       class="wp-popover"
+      :class="{ 'wp-menu': isMenu }"
       :data-side="pos.side"
+      :data-variant="variant"
       :role="role"
       :aria-label="label"
       tabindex="-1"
-      :style="{ left: `${pos.x}px`, top: `${pos.y}px`, minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined }"
+      :style="{
+        left: `${pos.x}px`,
+        top: `${pos.y}px`,
+        minWidth: pos.minWidth ? `${pos.minWidth}px` : undefined,
+        maxHeight: pos.maxHeight !== undefined && Number.isFinite(pos.maxHeight) ? `${pos.maxHeight}px` : undefined,
+      }"
     >
       <slot :close="() => setOpen(false)" />
     </div>
   </Teleport>
 </template>
 
+<style scoped src="./menu.css"></style>
+
 <style>
 @layer wp-extension {
   .wp-popover-anchor { display: inline-flex; }
@@ -155,12 +206,15 @@ defineExpose({ place });
     max-width: min(420px, calc(100vw - 16px));
     max-height: calc(100vh - 16px);
     overflow: auto;
-    padding: var(--wp-space-3);
+    padding: calc(var(--wp-space-3) + 1px); /* plus the 1px the ring stands in for */
     background: var(--wp-bg-2);
     color: var(--wp-text);
-    border: 1px solid var(--wp-border-strong);
+    /* The outline is an inset ring, not a border: these rules are layered, and
+       a host's unlayered reset (Tailwind 3's preflight sets border-width: 0
+       on every element) would beat a border. Nothing resets box-shadow. */
+    border: 0;
     border-radius: var(--wp-radius);
-    box-shadow: var(--wp-shadow-md);
+    box-shadow: inset 0 0 0 1px var(--wp-border-strong), var(--wp-shadow-md);
     font-family: var(--wp-font-sans);
     font-size: var(--wp-text-sm);
     outline: none;
@@ -169,6 +223,8 @@ defineExpose({ place });
   @keyframes wp-popover-in {
     from { opacity: 0; transform: translateY(-2px); }
   }
+  /* A menu is as wide as its longest row (up to 620px), not a 420px panel. */
+  .wp-popover[data-variant="menu"] { max-width: min(620px, calc(100vw - 16px)); }
   .wp-popover[data-side="top"] { animation-name: wp-popover-in-up; }
   @keyframes wp-popover-in-up {
     from { opacity: 0; transform: translateY(2px); }

package/src/RadioGroup.vue

@@ -143,16 +143,17 @@ function onKeydown(ev: KeyboardEvent, at: T): void {
 .wp-radio-group__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
 .wp-radio-group__dot {
   position: relative; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 1px;
-  border: 1.5px solid var(--wp-border-strong); border-radius: 50%; /* round: a radio is round in every look */ background: var(--wp-bg-1);
+  /* Whole-pixel border and inset, so the dot sits dead centre (a square look shows any half pixel). */
+  border: 2px solid var(--wp-border-strong); border-radius: min(50%, var(--wp-radius-cap, 999px)); background: var(--wp-bg-1);
   transition: border-color var(--wp-motion-hover);
 }
-.wp-radio-group[data-size="sm"] .wp-radio-group__dot { width: 13px; height: 13px; }
+.wp-radio-group[data-size="sm"] .wp-radio-group__dot { width: 12px; height: 12px; border-width: 1px; }
 .wp-radio-group__opt:hover:not([aria-disabled="true"]) .wp-radio-group__dot { border-color: var(--wp-accent); }
 .wp-radio-group__opt[data-checked] .wp-radio-group__dot { border-color: var(--wp-accent); }
 .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after {
-  content: ""; position: absolute; inset: 3px; border-radius: 50%; /* round: radio dot */ background: var(--wp-accent);
+  content: ""; position: absolute; inset: 3px; border-radius: min(50%, var(--wp-radius-cap, 999px)); background: var(--wp-accent);
 }
-.wp-radio-group[data-size="sm"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { inset: 2.5px; }
+.wp-radio-group[data-size="sm"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { inset: 2px; }
 /* A picked option that is disabled turns grey, so it can't pass for a live one. */
 .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot { border-color: var(--wp-text-dim); }
 .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::after { background: var(--wp-text-dim); }

package/src/SearchInput.vue

@@ -186,7 +186,7 @@ defineExpose({
   color: var(--wp-text-dim);
   cursor: pointer;
 }
-.wp-search__clear .pi { font-size: 9px; line-height: 1; }
+.wp-search__clear .pi { font-size: 10px; line-height: 1; }
 .wp-search__clear:hover { color: var(--wp-text); background: var(--wp-bg-3); }
 .wp-search__clear:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
 </style>