@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/Modal.vue

@@ -1,76 +1,78 @@
-<script setup lang="ts">
-import CloseButton from "./CloseButton.vue";
-import { computed, ref, useId, useSlots } from "vue";
-import { useDialogFocus } from "./useDialogFocus";
-
-interface Props {
-  open: boolean;
-  title?: string | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-  closeOnBackdrop?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
-
-const emit = defineEmits<{
-  (e: "update:open", v: boolean): 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() {
-  emit("update:open", false);
-}
-
-function onBackdrop() {
-  if (props.closeOnBackdrop) close();
-}
-
-useDialogFocus(dialog, () => props.open, {
-  onEscape: close,
-  // The first control in the body, else the dialog itself (the close button
-  // would make Enter close it).
-  initial: (root, els) => {
-    const body = root.querySelector(".wp-modal__body");
-    return els.find((el) => body?.contains(el)) ?? root;
-  },
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <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>
-      </div>
-    </div>
-  </Teleport>
-</template>
+<script setup lang="ts">
+import CloseButton from "./CloseButton.vue";
+import { computed, ref, useId, useSlots } from "vue";
+import { useDialogFocus } from "./useDialogFocus";
+
+interface Props {
+  open: boolean;
+  title?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  closeOnBackdrop?: boolean | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
+
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): 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() {
+  emit("update:open", false);
+}
+
+function onBackdrop() {
+  if (props.closeOnBackdrop) close();
+}
+
+useDialogFocus(dialog, () => props.open, {
+  onEscape: close,
+  // The first control in the body, else the dialog itself (the close button
+  // would make Enter close it).
+  initial: (root, els) => {
+    const body = root.querySelector(".wp-modal__body");
+    return els.find((el) => body?.contains(el)) ?? root;
+  },
+});
+</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>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/ModalShell.vue

@@ -1,107 +1,109 @@
-<template>
-  <Teleport to="body">
-    <Transition name="wp-modal" appear>
-      <div v-if="visible" ref="overlayEl" class="wp-modal-overlay" @click="$emit('close')">
-        <div
-          class="wp-modal-wrapper"
-          role="dialog"
-          aria-modal="true"
-          :aria-label="label"
-          :aria-labelledby="labelledby"
-          @click.stop
-        >
-          <slot></slot>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onBeforeUnmount } from "vue";
-import { useModalKeyShield } from "./useModalKeyShield";
-
-const props = defineProps<{
-  visible: boolean;
-  /** The dialog's name when it has no visible title. */
-  label?: string | undefined;
-  /** Id of the element that names the dialog (its title). */
-  labelledby?: string | undefined;
-}>();
-const emit = defineEmits<{
-  (e: "close"): 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. */
-  (e: "keydown", ev: KeyboardEvent): void;
-}>();
-
-const overlayEl = ref<HTMLElement | null>(null);
-
-function closeOnEscape(event: KeyboardEvent): void {
-  if (!props.visible || event.key !== "Escape") return;
-  event.preventDefault();
-  emit("close");
-}
-
-// Keys pressed INSIDE the modal are handled here and stop at the overlay, so
-// they never reach ComfyUI's global shortcuts (see useModalKeyShield).
-useModalKeyShield(overlayEl, {
-  onKey: (ev) => {
-    emit("keydown", ev);
-    closeOnEscape(ev);
-  },
-});
-
-// The window listener still covers the case where focus is OUTSIDE the modal
-// — clicking the canvas leaves the modal open but unfocused, and Escape should
-// still close it. Events from inside never get here; the shield stops them.
-function onKeydown(event: KeyboardEvent) {
-  closeOnEscape(event);
-}
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) window.addEventListener("keydown", onKeydown);
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
-</script>
-
-<style>
-@import "./_modal-motion.css";
-</style>
-
-<style scoped>
-.wp-modal-overlay,
-.wp-modal-overlay * {
-  box-sizing: border-box;
-}
-.wp-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: var(--wp-overlay-bg, rgba(0, 0, 0, 0.62));
-  font-family: var(--wp-font-sans, sans-serif);
-  cursor: default;
-}
-.wp-modal-wrapper {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  max-height: 100%;
-}
-
-/* `wp-modal` open/close transition lives in
- * src/components/shared/_modal-motion.css (imported globally via
- * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
- * InjectorBindingModal — animates with the same rules. */
-</style>
+<template>
+  <Teleport to="body">
+    <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
+          class="wp-modal-wrapper"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="label"
+          :aria-labelledby="labelledby"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount } from "vue";
+import { useModalKeyShield } from "./useModalKeyShield";
+
+const props = defineProps<{
+  visible: boolean;
+  /** The dialog's name when it has no visible title. */
+  label?: string | undefined;
+  /** Id of the element that names the dialog (its title). */
+  labelledby?: string | undefined;
+}>();
+const emit = defineEmits<{
+  (e: "close"): 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. */
+  (e: "keydown", ev: KeyboardEvent): void;
+}>();
+
+const overlayEl = ref<HTMLElement | null>(null);
+
+function closeOnEscape(event: KeyboardEvent): void {
+  if (!props.visible || event.key !== "Escape") return;
+  event.preventDefault();
+  emit("close");
+}
+
+// Keys pressed INSIDE the modal are handled here and stop at the overlay, so
+// they never reach ComfyUI's global shortcuts (see useModalKeyShield).
+useModalKeyShield(overlayEl, {
+  onKey: (ev) => {
+    emit("keydown", ev);
+    closeOnEscape(ev);
+  },
+});
+
+// The window listener still covers the case where focus is OUTSIDE the modal
+// — clicking the canvas leaves the modal open but unfocused, and Escape should
+// still close it. Events from inside never get here; the shield stops them.
+function onKeydown(event: KeyboardEvent) {
+  closeOnEscape(event);
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) window.addEventListener("keydown", onKeydown);
+    else window.removeEventListener("keydown", onKeydown);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<style>
+@import "./_modal-motion.css";
+</style>
+
+<style scoped>
+.wp-modal-overlay,
+.wp-modal-overlay * {
+  box-sizing: border-box;
+}
+.wp-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--wp-overlay-bg, rgba(0, 0, 0, 0.62));
+  font-family: var(--wp-font-sans, sans-serif);
+  cursor: default;
+}
+.wp-modal-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-height: 100%;
+}
+
+/* `wp-modal` open/close transition lives in
+ * src/components/shared/_modal-motion.css (imported globally via
+ * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * InjectorBindingModal — animates with the same rules. */
+</style>

package/src/Pagination.vue

@@ -1,106 +1,106 @@
-<script setup lang="ts">
-/**
- * Pagination: move through a long list a page at a time, or load more at
- * its end. Works on the canvas and in the manager.
- *
- *   <Pagination v-model:page="page" :total="rows.length" :page-size="50" />
- *   <Pagination mode="more" :shown="shown.length" :total="230" :loading="busy" @more="loadMore" />
- *
- * Pages: a `nav` with Previous / Next and the page numbers (first, last, the
- * current page with `siblings` either side, "…" between), the current one
- * marked `aria-current="page"`. More: one "Load more" button under a
- * "Showing 50 of 230" line. Nothing is drawn when everything fits on one page.
- */
-import { computed } from "vue";
-import { pageItems } from "./pagination";
-import WpButton from "./WpButton.vue";
-
-const props = withDefaults(defineProps<{
-  /** pages: numbered pages. more: a Load more button. */
-  mode?: "pages" | "more" | undefined;
-  /** The current page, from 1. */
-  page?: number | undefined;
-  /** How many items there are in all. */
-  total: number;
-  pageSize?: number | undefined;
-  /** Pages shown either side of the current one. */
-  siblings?: number | undefined;
-  /** In "more" mode: how many items are on screen. */
-  shown?: number | undefined;
-  loading?: boolean | undefined;
-  disabled?: boolean | undefined;
-  size?: "sm" | "md" | undefined;
-  /** The item's name in "Showing 50 of 230 modules". */
-  noun?: string | undefined;
-  ariaLabel?: string | undefined;
-}>(), { mode: "pages", page: 1, pageSize: 25, siblings: 1, shown: 0, size: "md", noun: undefined, ariaLabel: "Pages" });
-
-const emit = defineEmits<{ (e: "update:page", v: number): void; (e: "more"): void }>();
-
-const pages = computed(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
-const items = computed(() => pageItems(props.page, pages.value, props.siblings));
-const from = computed(() => Math.min(props.total, (props.page - 1) * props.pageSize + 1));
-const to = computed(() => Math.min(props.total, props.page * props.pageSize));
-
-function go(p: number): void {
-  const next = Math.min(Math.max(1, p), pages.value);
-  if (next !== props.page && !props.disabled) emit("update:page", next);
-}
-const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
-</script>
-
-<template>
-  <nav v-if="mode === 'pages' && pages > 1" class="wp-paging" :data-size="size" :aria-label="ariaLabel">
-    <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)" />
-      </li>
-      <li v-for="it in items" :key="it">
-        <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
-        <button
-          v-else
-          type="button"
-          class="wp-paging__page"
-          :data-size="size"
-          :aria-current="it === page ? 'page' : undefined"
-          :aria-label="`Page ${it}`"
-          :disabled="disabled"
-          @click="go(it)"
-        >{{ 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)" />
-      </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>
-  </div>
-</template>
-
-<style scoped>
-.wp-paging {
-  display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap;
-  min-width: 0; color: var(--wp-text-muted); font: 400 var(--wp-text-sm)/1.2 var(--wp-font-sans);
-}
-.wp-paging[data-size="sm"] { font-size: var(--wp-text-xs); gap: var(--wp-space-3); }
-.wp-paging--more { flex-direction: column; justify-content: center; }
-.wp-paging__range { font-variant-numeric: tabular-nums; }
-.wp-paging__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
-.wp-paging__gap { display: inline-grid; place-items: center; min-width: 20px; color: var(--wp-text-dim); }
-.wp-paging__page {
-  display: inline-grid; place-items: center; box-sizing: border-box;
-  min-width: var(--wp-control-h-md); height: var(--wp-control-h-md); margin: 0; padding: 0 var(--wp-space-2);
-  border: 1px solid transparent; border-radius: var(--wp-radius);
-  background: transparent; color: var(--wp-text-muted); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
-  font-variant-numeric: tabular-nums; cursor: pointer;
-  transition: background var(--wp-motion-hover), color var(--wp-motion-hover);
-}
-.wp-paging__page[data-size="sm"] { min-width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); }
-.wp-paging__page:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
-.wp-paging__page[aria-current="page"] { border-color: var(--wp-border-strong); background: var(--wp-bg-3); color: var(--wp-text); font-weight: 600; }
-.wp-paging__page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
-.wp-paging__page:disabled { opacity: 0.45; cursor: not-allowed; }
-</style>
+<script setup lang="ts">
+/**
+ * Pagination: move through a long list a page at a time, or load more at
+ * its end. Works on the canvas and in the manager.
+ *
+ *   <Pagination v-model:page="page" :total="rows.length" :page-size="50" />
+ *   <Pagination mode="more" :shown="shown.length" :total="230" :loading="busy" @more="loadMore" />
+ *
+ * Pages: a `nav` with Previous / Next and the page numbers (first, last, the
+ * current page with `siblings` either side, "…" between), the current one
+ * marked `aria-current="page"`. More: one "Load more" button under a
+ * "Showing 50 of 230" line. Nothing is drawn when everything fits on one page.
+ */
+import { computed } from "vue";
+import { pageItems } from "./pagination";
+import WpButton from "./WpButton.vue";
+
+const props = withDefaults(defineProps<{
+  /** pages: numbered pages. more: a Load more button. */
+  mode?: "pages" | "more" | undefined;
+  /** The current page, from 1. */
+  page?: number | undefined;
+  /** How many items there are in all. */
+  total: number;
+  pageSize?: number | undefined;
+  /** Pages shown either side of the current one. */
+  siblings?: number | undefined;
+  /** In "more" mode: how many items are on screen. */
+  shown?: number | undefined;
+  loading?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+  /** The item's name in "Showing 50 of 230 modules". */
+  noun?: string | undefined;
+  ariaLabel?: string | undefined;
+}>(), { mode: "pages", page: 1, pageSize: 25, siblings: 1, shown: 0, size: "md", noun: undefined, ariaLabel: "Pages" });
+
+const emit = defineEmits<{ (e: "update:page", v: number): void; (e: "more"): void }>();
+
+const pages = computed(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
+const items = computed(() => pageItems(props.page, pages.value, props.siblings));
+const from = computed(() => Math.min(props.total, (props.page - 1) * props.pageSize + 1));
+const to = computed(() => Math.min(props.total, props.page * props.pageSize));
+
+function go(p: number): void {
+  const next = Math.min(Math.max(1, p), pages.value);
+  if (next !== props.page && !props.disabled) emit("update:page", next);
+}
+const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
+</script>
+
+<template>
+  <nav v-if="mode === 'pages' && pages > 1" class="wp-paging" :data-size="size" :aria-label="ariaLabel">
+    <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)" />
+      </li>
+      <li v-for="it in items" :key="it">
+        <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
+        <button
+          v-else
+          type="button"
+          class="wp-paging__page"
+          :data-size="size"
+          :aria-current="it === page ? 'page' : undefined"
+          :aria-label="`Page ${it}`"
+          :disabled="disabled"
+          @click="go(it)"
+        >{{ 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)" />
+      </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>
+  </div>
+</template>
+
+<style scoped>
+.wp-paging {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap;
+  min-width: 0; color: var(--wp-text-muted); font: 400 var(--wp-text-sm)/1.2 var(--wp-font-sans);
+}
+.wp-paging[data-size="sm"] { font-size: var(--wp-text-xs); gap: var(--wp-space-3); }
+.wp-paging--more { flex-direction: column; justify-content: center; }
+.wp-paging__range { font-variant-numeric: tabular-nums; }
+.wp-paging__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.wp-paging__gap { display: inline-grid; place-items: center; min-width: 20px; color: var(--wp-text-dim); }
+.wp-paging__page {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: var(--wp-control-h-md); height: var(--wp-control-h-md); margin: 0; padding: 0 var(--wp-space-2);
+  border: 1px solid transparent; border-radius: var(--wp-radius);
+  background: transparent; color: var(--wp-text-muted); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover);
+}
+.wp-paging__page[data-size="sm"] { min-width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); }
+.wp-paging__page:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-paging__page[aria-current="page"] { border-color: var(--wp-border-strong); background: var(--wp-bg-3); color: var(--wp-text); font-weight: 600; }
+.wp-paging__page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-paging__page:disabled { opacity: 0.45; cursor: not-allowed; }
+</style>