@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/DropdownMenu.vue

@@ -1,72 +1,72 @@
-<script setup lang="ts">
-/**
- * A list of actions behind a button: the "⋯" menu, "More", "Add…". The
- * trigger toggles it; arrows, Home/End and Enter work; Escape or a pick
- * closes it and focus goes back to the trigger. Items are ContextMenu
- * entries (sections, icons, dividers, danger, subtitles), so a row's
- * right-click menu and its ⋯ menu can share one list.
- *
- *   <DropdownMenu :items="rowActions" label="Hair colour actions">
- *     <template #trigger="{ props }"><Button v-bind="props" variant="ghost" icon="pi-ellipsis-h" aria-label="More" /></template>
- *   </DropdownMenu>
- */
-import { computed, ref } from "vue";
-import ContextMenu, { type ContextMenuEntry, type ContextMenuHeader } from "./ContextMenu.vue";
-import type { Placement } from "./floating";
-
-const props = withDefaults(defineProps<{
-  items: ContextMenuEntry[];
-  header?: ContextMenuHeader | undefined;
-  placement?: Placement | undefined;
-  /** Names the menu for screen readers when the trigger is an icon. */
-  label?: string | undefined;
-}>(), { placement: "bottom-start" });
-
-const open = ref(false);
-const anchorEl = ref<HTMLElement | null>(null);
-
-function trigger(): HTMLElement | null {
-  return (anchorEl.value?.firstElementChild as HTMLElement | null) ?? anchorEl.value;
-}
-
-function close(): void {
-  if (!open.value) return;
-  open.value = false;
-  trigger()?.focus();
-}
-
-const triggerProps = computed(() => ({
-  "aria-haspopup": "menu" as const,
-  "aria-expanded": open.value,
-  "aria-label": props.label,
-  onClick: () => { open.value = !open.value; },
-  onKeydown: (ev: KeyboardEvent) => {
-    if ((ev.key === "ArrowDown" || ev.key === "ArrowUp") && !open.value) {
-      ev.preventDefault();
-      open.value = true;
-    }
-  },
-}));
-</script>
-
-<template>
-  <span ref="anchorEl" class="wp-dropdown-anchor">
-    <slot name="trigger" :props="triggerProps" :open="open" />
-  </span>
-  <ContextMenu
-    :visible="open"
-    :x="0"
-    :y="0"
-    :anchor="trigger()"
-    :placement="placement"
-    :items="items"
-    :header="header"
-    @close="close"
-  />
-</template>
-
-<style>
-@layer wp-extension {
-  .wp-dropdown-anchor { display: inline-flex; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * A list of actions behind a button: the "⋯" menu, "More", "Add…". The
+ * trigger toggles it; arrows, Home/End and Enter work; Escape or a pick
+ * closes it and focus goes back to the trigger. Items are ContextMenu
+ * entries (sections, icons, dividers, danger, subtitles), so a row's
+ * right-click menu and its ⋯ menu can share one list.
+ *
+ *   <DropdownMenu :items="rowActions" label="Hair colour actions">
+ *     <template #trigger="{ props }"><Button v-bind="props" variant="ghost" icon="pi-ellipsis-h" aria-label="More" /></template>
+ *   </DropdownMenu>
+ */
+import { computed, ref } from "vue";
+import ContextMenu, { type ContextMenuEntry, type ContextMenuHeader } from "./ContextMenu.vue";
+import type { Placement } from "./floating";
+
+const props = withDefaults(defineProps<{
+  items: ContextMenuEntry[];
+  header?: ContextMenuHeader | undefined;
+  placement?: Placement | undefined;
+  /** Names the menu for screen readers when the trigger is an icon. */
+  label?: string | undefined;
+}>(), { placement: "bottom-start" });
+
+const open = ref(false);
+const anchorEl = ref<HTMLElement | null>(null);
+
+function trigger(): HTMLElement | null {
+  return (anchorEl.value?.firstElementChild as HTMLElement | null) ?? anchorEl.value;
+}
+
+function close(): void {
+  if (!open.value) return;
+  open.value = false;
+  trigger()?.focus();
+}
+
+const triggerProps = computed(() => ({
+  "aria-haspopup": "menu" as const,
+  "aria-expanded": open.value,
+  "aria-label": props.label,
+  onClick: () => { open.value = !open.value; },
+  onKeydown: (ev: KeyboardEvent) => {
+    if ((ev.key === "ArrowDown" || ev.key === "ArrowUp") && !open.value) {
+      ev.preventDefault();
+      open.value = true;
+    }
+  },
+}));
+</script>
+
+<template>
+  <span ref="anchorEl" class="wp-dropdown-anchor">
+    <slot name="trigger" :props="triggerProps" :open="open" />
+  </span>
+  <ContextMenu
+    :visible="open"
+    :x="0"
+    :y="0"
+    :anchor="trigger()"
+    :placement="placement"
+    :items="items"
+    :header="header"
+    @close="close"
+  />
+</template>
+
+<style>
+@layer wp-extension {
+  .wp-dropdown-anchor { display: inline-flex; }
+}
+</style>

package/src/EmptyState.vue

@@ -1,111 +1,111 @@
-<script setup lang="ts">
-import Icon from "./Icon.vue";
-
-interface Props {
-  icon: string;
-  headline: string;
-  body?: string | undefined;
-  /** "library" = encouraging first-run; "no-results" = corrective for
-   *  filter misses; "error" = network/permission failure with retry. */
-  variant?: "library" | "no-results" | "error" | undefined;
-  /** How much room it takes. `page` fills an empty list page, `panel` (the
-   *  default) sits in a card or panel at its own height, `inline` is one
-   *  compact row for a small box. */
-  size?: "page" | "panel" | "inline" | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
-  variant: "library",
-  size: "panel",
-});
-const ICON_PX = { page: 40, panel: 26, inline: 16 } as const;
-</script>
-
-<template>
-  <div class="wp-empty" :class="[`wp-empty--${variant}`, `wp-empty--${props.size}`]" data-test="empty-state">
-    <div class="wp-empty__icon">
-      <Icon :name="icon" :size="ICON_PX[props.size]" />
-    </div>
-    <h3 class="wp-empty__headline">{{ headline }}</h3>
-    <p v-if="body" class="wp-empty__body">{{ body }}</p>
-    <div v-if="$slots.cta" class="wp-empty__cta">
-      <slot name="cta" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wp-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: var(--wp-space-7) var(--wp-space-6);
-  gap: var(--wp-space-4);
-  box-sizing: border-box;
-}
-/* Page: an empty list page. The message reads as the page's content, not a
- * line floating at the top of a tall area, but stops well short of the old
- * 60vh that also hit cards and panels. `min-height` keeps the layout flat
- * (no 100% chain through the table), so a full list is untouched. */
-.wp-empty--page {
-  min-height: max(40vh, 320px);
-  padding: var(--wp-space-8) var(--wp-space-6);
-  gap: var(--wp-space-5);
-}
-/* Inline: one compact row for a small box or a list section. */
-.wp-empty--inline {
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  text-align: left;
-  padding: var(--wp-space-4);
-  gap: var(--wp-space-3);
-}
-.wp-empty__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 52px;
-  height: 52px;
-  border-radius: var(--wp-radius-lg);
-  background: var(--wp-bg-2);
-  color: var(--wp-text-muted);
-}
-.wp-empty--page .wp-empty__icon { width: 80px; height: 80px; border-radius: var(--wp-radius-xl); }
-.wp-empty--inline .wp-empty__icon { width: 28px; height: 28px; border-radius: var(--wp-radius-sm); }
-.wp-empty--no-results .wp-empty__icon {
-  background: transparent;
-  border: 1px dashed var(--wp-border);
-}
-.wp-empty--error .wp-empty__icon {
-  background: color-mix(in oklab, var(--wp-danger) 12%, transparent);
-  color: var(--wp-danger);
-  border: 1px solid color-mix(in oklab, var(--wp-danger) 30%, transparent);
-}
-.wp-empty__headline {
-  margin: 0;
-  color: var(--wp-text);
-  font-size: var(--wp-text-md);
-  line-height: var(--wp-line-md, 1.4);
-  font-weight: var(--wp-weight-semibold);
-}
-.wp-empty--page .wp-empty__headline {
-  font-size: var(--wp-text-lg);
-  line-height: var(--wp-line-lg);
-}
-.wp-empty--inline .wp-empty__headline { font-size: var(--wp-text-base); }
-.wp-empty__body {
-  margin: 0;
-  font-size: var(--wp-text-sm);
-  line-height: var(--wp-line-sm);
-  color: var(--wp-text-muted);
-  max-width: 360px;
-}
-.wp-empty--inline .wp-empty__body { flex-basis: 100%; max-width: none; padding-left: calc(28px + var(--wp-space-3)); margin-top: calc(var(--wp-space-3) * -1); }
-.wp-empty__cta {
-  margin-top: var(--wp-space-2);
-}
-.wp-empty--inline .wp-empty__cta { margin: 0 0 0 auto; }
-</style>
+<script setup lang="ts">
+import Icon from "./Icon.vue";
+
+interface Props {
+  icon: string;
+  headline: string;
+  body?: string | undefined;
+  /** "library" = encouraging first-run; "no-results" = corrective for
+   *  filter misses; "error" = network/permission failure with retry. */
+  variant?: "library" | "no-results" | "error" | undefined;
+  /** How much room it takes. `page` fills an empty list page, `panel` (the
+   *  default) sits in a card or panel at its own height, `inline` is one
+   *  compact row for a small box. */
+  size?: "page" | "panel" | "inline" | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  variant: "library",
+  size: "panel",
+});
+const ICON_PX = { page: 40, panel: 26, inline: 16 } as const;
+</script>
+
+<template>
+  <div class="wp-empty" :class="[`wp-empty--${variant}`, `wp-empty--${props.size}`]" data-test="empty-state">
+    <div class="wp-empty__icon">
+      <Icon :name="icon" :size="ICON_PX[props.size]" />
+    </div>
+    <h3 class="wp-empty__headline">{{ headline }}</h3>
+    <p v-if="body" class="wp-empty__body">{{ body }}</p>
+    <div v-if="$slots.cta" class="wp-empty__cta">
+      <slot name="cta" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--wp-space-7) var(--wp-space-6);
+  gap: var(--wp-space-4);
+  box-sizing: border-box;
+}
+/* Page: an empty list page. The message reads as the page's content, not a
+ * line floating at the top of a tall area, but stops well short of the old
+ * 60vh that also hit cards and panels. `min-height` keeps the layout flat
+ * (no 100% chain through the table), so a full list is untouched. */
+.wp-empty--page {
+  min-height: max(40vh, 320px);
+  padding: var(--wp-space-8) var(--wp-space-6);
+  gap: var(--wp-space-5);
+}
+/* Inline: one compact row for a small box or a list section. */
+.wp-empty--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  text-align: left;
+  padding: var(--wp-space-4);
+  gap: var(--wp-space-3);
+}
+.wp-empty__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  border-radius: var(--wp-radius-lg);
+  background: var(--wp-bg-2);
+  color: var(--wp-text-muted);
+}
+.wp-empty--page .wp-empty__icon { width: 80px; height: 80px; border-radius: var(--wp-radius-xl); }
+.wp-empty--inline .wp-empty__icon { width: 28px; height: 28px; border-radius: var(--wp-radius-sm); }
+.wp-empty--no-results .wp-empty__icon {
+  background: transparent;
+  border: 1px dashed var(--wp-border);
+}
+.wp-empty--error .wp-empty__icon {
+  background: color-mix(in oklab, var(--wp-danger) 12%, transparent);
+  color: var(--wp-danger);
+  border: 1px solid color-mix(in oklab, var(--wp-danger) 30%, transparent);
+}
+.wp-empty__headline {
+  margin: 0;
+  color: var(--wp-text);
+  font-size: var(--wp-text-md);
+  line-height: var(--wp-line-md, 1.4);
+  font-weight: var(--wp-weight-semibold);
+}
+.wp-empty--page .wp-empty__headline {
+  font-size: var(--wp-text-lg);
+  line-height: var(--wp-line-lg);
+}
+.wp-empty--inline .wp-empty__headline { font-size: var(--wp-text-base); }
+.wp-empty__body {
+  margin: 0;
+  font-size: var(--wp-text-sm);
+  line-height: var(--wp-line-sm);
+  color: var(--wp-text-muted);
+  max-width: 360px;
+}
+.wp-empty--inline .wp-empty__body { flex-basis: 100%; max-width: none; padding-left: calc(28px + var(--wp-space-3)); margin-top: calc(var(--wp-space-3) * -1); }
+.wp-empty__cta {
+  margin-top: var(--wp-space-2);
+}
+.wp-empty--inline .wp-empty__cta { margin: 0 0 0 auto; }
+</style>

package/src/Field.vue

@@ -1,28 +1,28 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-interface Props {
-  label?: string | undefined;
-  hint?: string | undefined;
-  error?: string | undefined;
-  for?: string | undefined;
-  required?: boolean | undefined;
-}
-const props = defineProps<Props>();
-
-const classes = computed(() => [
-  "wp-field",
-  props.error && "wp-field--error",
-]);
-</script>
-
-<template>
-  <div :class="classes">
-    <label v-if="label" :for="props.for" class="wp-field__label">
-      {{ label }}<span v-if="required" aria-hidden="true"> *</span>
-    </label>
-    <slot :ariaInvalid="!!error" />
-    <div v-if="error" class="wp-field__error" role="alert">{{ error }}</div>
-    <div v-else-if="hint" class="wp-field__hint">{{ hint }}</div>
-  </div>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  label?: string | undefined;
+  hint?: string | undefined;
+  error?: string | undefined;
+  for?: string | undefined;
+  required?: boolean | undefined;
+}
+const props = defineProps<Props>();
+
+const classes = computed(() => [
+  "wp-field",
+  props.error && "wp-field--error",
+]);
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" :for="props.for" class="wp-field__label">
+      {{ label }}<span v-if="required" aria-hidden="true"> *</span>
+    </label>
+    <slot :ariaInvalid="!!error" />
+    <div v-if="error" class="wp-field__error" role="alert">{{ error }}</div>
+    <div v-else-if="hint" class="wp-field__hint">{{ hint }}</div>
+  </div>
+</template>