@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/ConfirmDialog.vue

@@ -1,163 +1,165 @@
-<script setup lang="ts">
-/**
- * Themed confirmation dialog — replaces `window.confirm()` for any
- * action that needs an in-app prompt (reset overrides, save-to-library,
- * reset-from-library, etc.). Consumers control it via v-model:visible
- * plus title/body/confirm-label slots; the dialog emits `confirm` /
- * `cancel` and closes itself on Esc + overlay click + Cancel button.
- *
- * Variants:
- *   - default: accent-coloured Confirm button (constructive actions)
- *   - danger:  red Confirm button (destructive actions, e.g. discard,
- *              reset overrides)
- */
-import { onBeforeUnmount, watch } from "vue";
-import WpButton from "./WpButton.vue";
-
-const props = withDefaults(
-  defineProps<{
-    visible: boolean;
-    title: string;
-    body?: string | undefined;
-    confirmLabel?: string | undefined;
-    cancelLabel?: string | undefined;
-    variant?: "default" | "danger" | undefined;
-  }>(),
-  {
-    body: "",
-    confirmLabel: "Confirm",
-    cancelLabel: "Cancel",
-    variant: "default",
-  },
-);
-
-const emit = defineEmits<{
-  "confirm": [];
-  "cancel": [];
-}>();
-
-function onConfirm(): void { emit("confirm"); }
-function onCancel(): void { emit("cancel"); }
-
-function onKeydown(ev: KeyboardEvent): void {
-  if (!props.visible) return;
-  if (ev.key === "Escape") {
-    ev.preventDefault();
-    emit("cancel");
-  } else if (ev.key === "Enter" && !ev.shiftKey) {
-    ev.preventDefault();
-    emit("confirm");
-  }
-}
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) window.addEventListener("keydown", onKeydown);
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition name="wp-modal" appear>
-      <div
-        v-if="visible"
-        class="wp-confirm-overlay"
-        data-test="confirm-overlay"
-        @click="onCancel"
-      >
-      <div
-        class="wp-confirm"
-        role="alertdialog"
-        aria-modal="true"
-        :class="`wp-confirm--${variant}`"
-        @click.stop
-      >
-        <div class="wp-confirm__head">
-          <i
-            class="pi"
-            :class="variant === 'danger' ? 'pi-exclamation-triangle' : 'pi-info-circle'"
-            aria-hidden="true"
-          />
-          <h3 class="wp-confirm__title" data-test="confirm-title">{{ title }}</h3>
-        </div>
-        <p v-if="body" class="wp-confirm__body" data-test="confirm-body">{{ body }}</p>
-        <div class="wp-confirm__foot">
-          <WpButton data-test="confirm-cancel" @click="onCancel">{{ cancelLabel }}</WpButton>
-          <WpButton :variant="variant === 'danger' ? 'danger' : 'primary'" data-test="confirm-confirm" @click="onConfirm">{{ confirmLabel }}</WpButton>
-        </div>
-      </div>
-    </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style>
-/* Shared modal open/close transition — overlay fade + panel scale.
- * See `_modal-motion.css` for rules. Imported unscoped so the
- * `wp-modal-*` transition class names match the Vue-emitted classes
- * cleanly (named transitions don't survive Vue's `data-v-...`
- * scoping). */
-@import "./_modal-motion.css";
-</style>
-
-<style scoped>
-.wp-confirm-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  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);
-}
-.wp-confirm {
-  background: var(--wp-bg-2);
-  border: 1px solid var(--wp-border);
-  border-radius: var(--wp-radius);
-  width: 380px;
-  max-width: 100%;
-  color: var(--wp-text);
-  box-shadow: var(--wp-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.5));
-  overflow: hidden;
-}
-.wp-confirm__head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 16px 8px;
-}
-.wp-confirm__head .pi {
-  font-size: 16px;
-  color: var(--wp-accent-text, var(--wp-text));
-}
-.wp-confirm--danger .wp-confirm__head .pi {
-  color: var(--wp-danger, var(--wp-red));
-}
-.wp-confirm__title {
-  font: 600 13px var(--wp-font-sans);
-  color: var(--wp-text);
-  margin: 0;
-}
-.wp-confirm__body {
-  font: 12px/1.5 var(--wp-font-sans);
-  color: var(--wp-text-muted);
-  margin: 0;
-  padding: 0 16px 14px;
-}
-.wp-confirm__foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 10px 14px;
-  background: var(--wp-bg-3);
-  border-top: 1px solid var(--wp-border);
-}
-</style>
+<script setup lang="ts">
+/**
+ * Themed confirmation dialog — replaces `window.confirm()` for any
+ * action that needs an in-app prompt (reset overrides, save-to-library,
+ * reset-from-library, etc.). Consumers control it via v-model:visible
+ * plus title/body/confirm-label slots; the dialog emits `confirm` /
+ * `cancel` and closes itself on Esc + overlay click + Cancel button.
+ *
+ * Variants:
+ *   - default: accent-coloured Confirm button (constructive actions)
+ *   - danger:  red Confirm button (destructive actions, e.g. discard,
+ *              reset overrides)
+ */
+import { onBeforeUnmount, watch } from "vue";
+import WpButton from "./WpButton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    title: string;
+    body?: string | undefined;
+    confirmLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    variant?: "default" | "danger" | undefined;
+  }>(),
+  {
+    body: "",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    variant: "default",
+  },
+);
+
+const emit = defineEmits<{
+  "confirm": [];
+  "cancel": [];
+}>();
+
+function onConfirm(): void { emit("confirm"); }
+function onCancel(): void { emit("cancel"); }
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (!props.visible) return;
+  if (ev.key === "Escape") {
+    ev.preventDefault();
+    emit("cancel");
+  } else if (ev.key === "Enter" && !ev.shiftKey) {
+    ev.preventDefault();
+    emit("confirm");
+  }
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) window.addEventListener("keydown", onKeydown);
+    else window.removeEventListener("keydown", onKeydown);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="wp-modal" appear>
+      <!-- The backdrop 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"
+        class="wp-confirm-overlay"
+        data-test="confirm-overlay"
+        @click="onCancel"
+      >
+      <div
+        class="wp-confirm"
+        role="alertdialog"
+        aria-modal="true"
+        :class="`wp-confirm--${variant}`"
+        @click.stop
+      >
+        <div class="wp-confirm__head">
+          <i
+            class="pi"
+            :class="variant === 'danger' ? 'pi-exclamation-triangle' : 'pi-info-circle'"
+            aria-hidden="true"
+          />
+          <h3 class="wp-confirm__title" data-test="confirm-title">{{ title }}</h3>
+        </div>
+        <p v-if="body" class="wp-confirm__body" data-test="confirm-body">{{ body }}</p>
+        <div class="wp-confirm__foot">
+          <WpButton data-test="confirm-cancel" @click="onCancel">{{ cancelLabel }}</WpButton>
+          <WpButton :variant="variant === 'danger' ? 'danger' : 'primary'" data-test="confirm-confirm" @click="onConfirm">{{ confirmLabel }}</WpButton>
+        </div>
+      </div>
+    </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+/* Shared modal open/close transition — overlay fade + panel scale.
+ * See `_modal-motion.css` for rules. Imported unscoped so the
+ * `wp-modal-*` transition class names match the Vue-emitted classes
+ * cleanly (named transitions don't survive Vue's `data-v-...`
+ * scoping). */
+@import "./_modal-motion.css";
+</style>
+
+<style scoped>
+.wp-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  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);
+}
+.wp-confirm {
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius);
+  width: 380px;
+  max-width: 100%;
+  color: var(--wp-text);
+  box-shadow: var(--wp-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.5));
+  overflow: hidden;
+}
+.wp-confirm__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px 8px;
+}
+.wp-confirm__head .pi {
+  font-size: 16px;
+  color: var(--wp-accent-text, var(--wp-text));
+}
+.wp-confirm--danger .wp-confirm__head .pi {
+  color: var(--wp-danger, var(--wp-red));
+}
+.wp-confirm__title {
+  font: 600 13px var(--wp-font-sans);
+  color: var(--wp-text);
+  margin: 0;
+}
+.wp-confirm__body {
+  font: 12px/1.5 var(--wp-font-sans);
+  color: var(--wp-text-muted);
+  margin: 0;
+  padding: 0 16px 14px;
+}
+.wp-confirm__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--wp-bg-3);
+  border-top: 1px solid var(--wp-border);
+}
+</style>

package/src/ConfirmModal.vue

@@ -1,147 +1,147 @@
-<script setup lang="ts">
-/**
- * Ask before an action, in the manager's own dialog.
- *
- * A thin wrapper on Modal: the same backdrop, focus trap, Escape and focus
- * return as every other manager dialog, with a Cancel button and a confirm
- * button that names the action. The canvas keeps `ConfirmDialog`, which
- * wears the node colours; this one wears the manager's.
- *
- * Escape, the backdrop, the ✕ and Cancel all emit `cancel`. Enter confirms
- * unless focus is on a button or a text box (which then gets the key itself).
- * The `confirm-*` data-test names match ConfirmDialog's, so a test can drive
- * either.
- *
- * `requireType` makes the user type that exact text before Confirm works
- * (deleting an account); `confirmDisabled` holds Confirm off for a gate the
- * page owns (a required reason in the slot). `warn` asks about something
- * that can be undone but matters: an outlined button and an info mark.
- */
-import { computed, onBeforeUnmount, ref, watch } from "vue";
-import Modal from "./Modal.vue";
-import Button from "./Button.vue";
-import Icon from "./Icon.vue";
-import Input from "./Input.vue";
-
-const props = withDefaults(
-  defineProps<{
-    open: boolean;
-    title: string;
-    body?: string | undefined;
-    confirmLabel?: string | undefined;
-    cancelLabel?: string | undefined;
-    /** `danger` for something that can't be undone: red button, warning
-     *  mark. `warn` for something that matters but can be undone. */
-    tone?: "accent" | "warn" | "danger" | undefined;
-    loading?: boolean | undefined;
-    /** The text the user must type before Confirm works. */
-    requireType?: string | undefined;
-    /** Hold Confirm off (a required field in the slot is empty). */
-    confirmDisabled?: boolean | undefined;
-  }>(),
-  { body: "", confirmLabel: "Confirm", cancelLabel: "Cancel", tone: "accent", loading: false, requireType: "", confirmDisabled: false },
-);
-
-const emit = defineEmits<{
-  confirm: [];
-  cancel: [];
-}>();
-
-function onOpen(v: boolean): void {
-  if (!v) emit("cancel");
-}
-
-const typed = ref("");
-const blocked = computed(
-  () => props.loading || props.confirmDisabled || (!!props.requireType && typed.value !== props.requireType),
-);
-const confirmVariant = computed(() => (props.tone === "danger" ? "danger" : props.tone === "warn" ? "outline" : "primary"));
-
-function confirm(): void {
-  if (!blocked.value) emit("confirm");
-}
-
-function onKeydown(ev: KeyboardEvent): void {
-  if (ev.key !== "Enter" || ev.shiftKey || blocked.value) return;
-  // A focused button (Cancel, ✕) or a text box in the slot keeps its Enter.
-  const t = ev.target;
-  if (t instanceof HTMLButtonElement || t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
-  ev.preventDefault();
-  emit("confirm");
-}
-
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      typed.value = "";
-      window.addEventListener("keydown", onKeydown);
-    }
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
-</script>
-
-<template>
-  <Modal :open="open" size="sm" @update:open="onOpen">
-    <template #header="{ titleId }">
-      <span class="wp-confirm-modal__head" :class="`wp-confirm-modal__head--${tone}`">
-        <Icon :name="tone === 'danger' ? 'exclamation-triangle' : 'info-circle'" />
-        <h3 :id="titleId" class="wp-modal__title" data-test="confirm-title">{{ title }}</h3>
-      </span>
-    </template>
-    <div class="wp-confirm-modal__body">
-      <p v-if="body" class="wp-confirm-modal__text" data-test="confirm-body">{{ body }}</p>
-      <slot />
-      <label v-if="requireType" class="wp-confirm-modal__gate">
-        <span>Type <code>{{ requireType }}</code> to confirm:</span>
-        <Input v-model="typed" autocomplete="off" spellcheck="false" data-test="confirm-type" />
-      </label>
-    </div>
-    <template #footer>
-      <Button variant="ghost" :disabled="loading" data-test="confirm-cancel" @click="emit('cancel')">{{ cancelLabel }}</Button>
-      <Button
-        :variant="confirmVariant"
-        :loading="loading"
-        :disabled="blocked && !loading"
-        data-test="confirm-confirm"
-        @click="confirm"
-      >{{ confirmLabel }}</Button>
-    </template>
-  </Modal>
-</template>
-
-<style scoped>
-.wp-confirm-modal__head {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--wp-space-3);
-  min-width: 0;
-  color: var(--wp-accent-text);
-}
-.wp-confirm-modal__head--danger { color: var(--wp-danger); }
-.wp-confirm-modal__head--warn { color: var(--wp-warn); }
-.wp-confirm-modal__head .wp-modal__title { color: var(--wp-text); }
-.wp-confirm-modal__text {
-  margin: 0;
-  color: var(--wp-text-muted);
-  line-height: 1.5;
-}
-.wp-confirm-modal__gate {
-  display: flex;
-  flex-direction: column;
-  gap: var(--wp-space-2);
-  margin-top: var(--wp-space-5);
-  color: var(--wp-text-muted);
-  font-size: var(--wp-text-sm);
-}
-.wp-confirm-modal__gate code {
-  padding: 0 4px;
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  background: var(--wp-bg-3);
-  color: var(--wp-text);
-  font-family: var(--wp-font-mono);
-}
-</style>
+<script setup lang="ts">
+/**
+ * Ask before an action, in the manager's own dialog.
+ *
+ * A thin wrapper on Modal: the same backdrop, focus trap, Escape and focus
+ * return as every other manager dialog, with a Cancel button and a confirm
+ * button that names the action. The canvas keeps `ConfirmDialog`, which
+ * wears the node colours; this one wears the manager's.
+ *
+ * Escape, the backdrop, the ✕ and Cancel all emit `cancel`. Enter confirms
+ * unless focus is on a button or a text box (which then gets the key itself).
+ * The `confirm-*` data-test names match ConfirmDialog's, so a test can drive
+ * either.
+ *
+ * `requireType` makes the user type that exact text before Confirm works
+ * (deleting an account); `confirmDisabled` holds Confirm off for a gate the
+ * page owns (a required reason in the slot). `warn` asks about something
+ * that can be undone but matters: an outlined button and an info mark.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import Modal from "./Modal.vue";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+import Input from "./Input.vue";
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    title: string;
+    body?: string | undefined;
+    confirmLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    /** `danger` for something that can't be undone: red button, warning
+     *  mark. `warn` for something that matters but can be undone. */
+    tone?: "accent" | "warn" | "danger" | undefined;
+    loading?: boolean | undefined;
+    /** The text the user must type before Confirm works. */
+    requireType?: string | undefined;
+    /** Hold Confirm off (a required field in the slot is empty). */
+    confirmDisabled?: boolean | undefined;
+  }>(),
+  { body: "", confirmLabel: "Confirm", cancelLabel: "Cancel", tone: "accent", loading: false, requireType: "", confirmDisabled: false },
+);
+
+const emit = defineEmits<{
+  confirm: [];
+  cancel: [];
+}>();
+
+function onOpen(v: boolean): void {
+  if (!v) emit("cancel");
+}
+
+const typed = ref("");
+const blocked = computed(
+  () => props.loading || props.confirmDisabled || (!!props.requireType && typed.value !== props.requireType),
+);
+const confirmVariant = computed(() => (props.tone === "danger" ? "danger" : props.tone === "warn" ? "outline" : "primary"));
+
+function confirm(): void {
+  if (!blocked.value) emit("confirm");
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key !== "Enter" || ev.shiftKey || blocked.value) return;
+  // A focused button (Cancel, ✕) or a text box in the slot keeps its Enter.
+  const t = ev.target;
+  if (t instanceof HTMLButtonElement || t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
+  ev.preventDefault();
+  emit("confirm");
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      typed.value = "";
+      window.addEventListener("keydown", onKeydown);
+    }
+    else window.removeEventListener("keydown", onKeydown);
+  },
+  { immediate: true },
+);
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <Modal :open="open" size="sm" @update:open="onOpen">
+    <template #header="{ titleId }">
+      <span class="wp-confirm-modal__head" :class="`wp-confirm-modal__head--${tone}`">
+        <Icon :name="tone === 'danger' ? 'exclamation-triangle' : 'info-circle'" />
+        <h3 :id="titleId" class="wp-modal__title" data-test="confirm-title">{{ title }}</h3>
+      </span>
+    </template>
+    <div class="wp-confirm-modal__body">
+      <p v-if="body" class="wp-confirm-modal__text" data-test="confirm-body">{{ body }}</p>
+      <slot />
+      <label v-if="requireType" class="wp-confirm-modal__gate">
+        <span>Type <code>{{ requireType }}</code> to confirm:</span>
+        <Input v-model="typed" autocomplete="off" spellcheck="false" data-test="confirm-type" />
+      </label>
+    </div>
+    <template #footer>
+      <Button variant="ghost" :disabled="loading" data-test="confirm-cancel" @click="emit('cancel')">{{ cancelLabel }}</Button>
+      <Button
+        :variant="confirmVariant"
+        :loading="loading"
+        :disabled="blocked && !loading"
+        data-test="confirm-confirm"
+        @click="confirm"
+      >{{ confirmLabel }}</Button>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+.wp-confirm-modal__head {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wp-space-3);
+  min-width: 0;
+  color: var(--wp-accent-text);
+}
+.wp-confirm-modal__head--danger { color: var(--wp-danger); }
+.wp-confirm-modal__head--warn { color: var(--wp-warn); }
+.wp-confirm-modal__head .wp-modal__title { color: var(--wp-text); }
+.wp-confirm-modal__text {
+  margin: 0;
+  color: var(--wp-text-muted);
+  line-height: 1.5;
+}
+.wp-confirm-modal__gate {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wp-space-2);
+  margin-top: var(--wp-space-5);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-sm);
+}
+.wp-confirm-modal__gate code {
+  padding: 0 4px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  font-family: var(--wp-font-mono);
+}
+</style>