@pienter/ui 0.3.0 → 0.7.1

package/components/overlay/alert-dialog/AlertDialog.vue

@@ -38,12 +38,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
-import {
-    mountDialog,
-    type DialogControl,
-} from '../../../utils/controllers/dialog.js';
+import { useDialog } from '../../../composables/useDialog.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -72,7 +69,6 @@ const emit = defineEmits<{
 const rootRef = ref<HTMLDialogElement | null>(null);
 const titleId = generateId('alertdialog-title');
 const descriptionId = generateId('alertdialog-desc');
-let control: DialogControl | null = null;
 
 function onConfirm(): void {
     emit('confirm');
@@ -84,31 +80,14 @@ function onCancel(): void {
     emit('update:open', false);
 }
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    control = mountDialog(rootRef.value, {
-        role: 'alertdialog',
-        persistent: true,
-        initialFocus: 'cancel',
-        // No onClose — persistent dialogs suppress Escape and backdrop-click
-        // dismissal at the controller layer. Close happens only through the
-        // explicit confirm/cancel buttons wired in the template.
-    });
-    if (props.open) control.open();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control) return;
-        if (isOpen) control.open();
-        else control.close();
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+useDialog(rootRef, {
+    role: 'alertdialog',
+    persistent: true,
+    initialFocus: 'cancel',
+    open: () => props.open,
+    // No onClose — persistent dialogs suppress Escape and backdrop-click
+    // dismissal at the composable layer. Close happens only through the
+    // explicit confirm/cancel buttons wired in the template.
 });
 </script>
 

package/components/overlay/command/Command.vue

@@ -82,11 +82,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountDialog,
-    type DialogControl,
-} from '../../../utils/controllers/dialog.js';
+import { computed, ref } from 'vue';
+import { useDialog } from '../../../composables/useDialog.js';
 import { generateId } from '../../../utils/a11y/id.js';
 import Icon from '../../display/icon/Icon.vue';
 import type { IconName } from '../../../icons/index.js';
@@ -164,8 +161,6 @@ const listboxRef = ref<HTMLUListElement | null>(null);
 const query = ref('');
 const activeIndex = ref<number | null>(null);
 
-let control: DialogControl | null = null;
-
 // `commandsOpen` mirrors the parent's `open` for the input's
 // `aria-expanded` state — when the dialog is open, the listbox
 // inside is also "open" (visible), so the combobox is expanded.
@@ -317,37 +312,14 @@ function resetState(): void {
     activeIndex.value = firstEnabled >= 0 ? firstEnabled : null;
 }
 
-onMounted(() => {
-    if (!dialogRef.value) return;
-    control = mountDialog(dialogRef.value, {
-        role: 'dialog',
-        onClose: requestClose,
-    });
-    if (props.open) {
-        resetState();
-        control.open();
-    }
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control) return;
-        if (isOpen) {
-            // Reset state on every open so the palette always starts
-            // fresh — the canonical Cmd+K UX. Prior query / cursor
-            // position are not preserved between sessions.
-            resetState();
-            control.open();
-        } else {
-            control.close();
-        }
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+useDialog(dialogRef, {
+    role: 'dialog',
+    open: () => props.open,
+    // Reset state on every open so the palette always starts fresh —
+    // the canonical Cmd+K UX. Prior query / cursor position are not
+    // preserved between sessions.
+    onBeforeOpen: resetState,
+    onClose: requestClose,
 });
 </script>
 

package/components/overlay/command/command.css

@@ -2,7 +2,7 @@
     /* ===== pui-command =====
    *
    * Search palette built on the native `<dialog>` element via
-   * `mountDialog`. Reuses the combobox-pattern input + listbox
+   * `useDialog`. Reuses the combobox-pattern input + listbox
    * inside the dialog chrome (search field at the top, scrollable
    * commands below). The dialog provides top-layer rendering, focus
    * trapping, and Escape dismissal; the controller layers on

package/components/overlay/dropdown-menu/DropdownMenu.vue

@@ -13,13 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountPopover,
-    type PopoverControl,
-    type Placement,
-} from '../../../utils/controllers/popover.js';
-import { mountMenu } from '../../../utils/controllers/menu.js';
+import { ref } from 'vue';
+import { usePopover, type Placement } from '../../../composables/usePopover.js';
+import { useMenu } from '../../../composables/useMenu.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -28,7 +24,7 @@ const props = withDefaults(
         /**
          * Required `id` for the dropdown menu element. The consumer
          * wires their trigger button via the native HTML
-         * `popovertarget="<id>"` attribute, which `mountPopover`
+         * `popovertarget="<id>"` attribute, which `usePopover`
          * auto-detects on mount as the positioning anchor and as the
          * focus-restore target on close.
          */
@@ -78,63 +74,42 @@ const emit = defineEmits<{
 }>();
 
 const menuRef = ref<HTMLElement | null>(null);
-let popoverControl: PopoverControl | null = null;
-let menuTeardown: (() => void) | null = null;
 
-onMounted(() => {
-    if (!menuRef.value) return;
-    popoverControl = mountPopover(menuRef.value, {
-        placement: props.placement,
-        offset: props.offset,
-        // `modal: false` (default) → `popover="auto"` so the browser
-        // handles outside-click / focus-loss / Escape light-dismiss.
-        // The menu is non-modal — page content remains visible and
-        // interactive once the menu closes.
-        onOpen: () => {
-            emit('update:open', true);
-            // Move focus to the first menu item on open per the
-            // WAI-ARIA Menu pattern. The browser does NOT auto-focus
-            // popover content; the controller leaves focus management
-            // to consumers, so we explicitly walk into the menu here.
-            const firstItem = menuRef.value?.querySelector<HTMLElement>(
-                '[role="menuitem"]:not([disabled]):not([aria-disabled="true"]),' +
-                    ' [role="menuitemcheckbox"]:not([disabled]):not([aria-disabled="true"]),' +
-                    ' [role="menuitemradio"]:not([disabled]):not([aria-disabled="true"])',
-            );
-            firstItem?.focus();
-        },
-        onClose: () => emit('update:open', false),
-    });
-    menuTeardown = mountMenu({
-        menuEl: menuRef.value,
-        // Escape closes the menu and lets `popover="auto"`'s
-        // light-dismiss + the controller's `toggle` event handle
-        // focus restoration to the trigger.
-        onEscape: () => popoverControl?.hide(),
-        // Auto-close on item click is the standard menu UX. The
-        // consumer's own `@click` on each `<button role="menuitem">`
-        // runs first (DOM bubble); this callback fires from
-        // `mountMenu`'s container-level click listener and closes
-        // the menu after the action.
-        onItemActivate: () => popoverControl?.hide(),
-    });
-    if (props.open) popoverControl.show();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!popoverControl || isOpen === undefined) return;
-        if (isOpen) popoverControl.show();
-        else popoverControl.hide();
+const popover = usePopover(menuRef, {
+    placement: () => props.placement,
+    offset: () => props.offset,
+    // `modal: false` (default) → `popover="auto"` so the browser
+    // handles outside-click / focus-loss / Escape light-dismiss.
+    // The menu is non-modal — page content remains visible and
+    // interactive once the menu closes.
+    open: () => props.open,
+    onOpen: () => {
+        emit('update:open', true);
+        // Move focus to the first menu item on open per the
+        // WAI-ARIA Menu pattern. The browser does NOT auto-focus
+        // popover content; the composable leaves focus management
+        // to consumers, so we explicitly walk into the menu here.
+        const firstItem = menuRef.value?.querySelector<HTMLElement>(
+            '[role="menuitem"]:not([disabled]):not([aria-disabled="true"]),' +
+                ' [role="menuitemcheckbox"]:not([disabled]):not([aria-disabled="true"]),' +
+                ' [role="menuitemradio"]:not([disabled]):not([aria-disabled="true"])',
+        );
+        firstItem?.focus();
     },
-);
+    onClose: () => emit('update:open', false),
+});
 
-onBeforeUnmount(() => {
-    menuTeardown?.();
-    menuTeardown = null;
-    popoverControl?.teardown();
-    popoverControl = null;
+useMenu(menuRef, {
+    // Escape closes the menu and lets `popover="auto"`'s
+    // light-dismiss + the composable's `toggle` event handle
+    // focus restoration to the trigger.
+    onEscape: () => popover.hide(),
+    // Auto-close on item click is the standard menu UX. The
+    // consumer's own `@click` on each `<button role="menuitem">`
+    // runs first (DOM bubble); this callback fires from
+    // `useMenu`'s container-level click listener and closes
+    // the menu after the action.
+    onItemActivate: () => popover.hide(),
 });
 </script>
 

package/components/overlay/modal/Modal.vue

@@ -19,12 +19,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
-import {
-    mountDialog,
-    type DialogControl,
-} from '../../../utils/controllers/dialog.js';
+import { useDialog } from '../../../composables/useDialog.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -48,35 +45,17 @@ const emit = defineEmits<{
 
 const rootRef = ref<HTMLDialogElement | null>(null);
 const titleId = generateId('modal-title');
-let control: DialogControl | null = null;
 
 function requestClose() {
     emit('update:open', false);
     emit('close');
 }
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    control = mountDialog(rootRef.value, {
-        role: 'dialog',
-        persistent: props.persistent,
-        onClose: requestClose,
-    });
-    if (props.open) control.open();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control) return;
-        if (isOpen) control.open();
-        else control.close();
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+useDialog(rootRef, {
+    role: 'dialog',
+    persistent: () => props.persistent,
+    open: () => props.open,
+    onClose: requestClose,
 });
 </script>
 

package/components/overlay/popover/Popover.vue

@@ -14,12 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountPopover,
-    type PopoverControl,
-    type Placement,
-} from '../../../utils/controllers/popover.js';
+import { ref } from 'vue';
+import { usePopover, type Placement } from '../../../composables/usePopover.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -79,32 +75,14 @@ const emit = defineEmits<{
 }>();
 
 const rootRef = ref<HTMLElement | null>(null);
-let control: PopoverControl | null = null;
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    control = mountPopover(rootRef.value, {
-        placement: props.placement,
-        offset: props.offset,
-        modal: props.modal,
-        onOpen: () => emit('update:open', true),
-        onClose: () => emit('update:open', false),
-    });
-    if (props.open) control.show();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control || isOpen === undefined) return;
-        if (isOpen) control.show();
-        else control.hide();
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+usePopover(rootRef, {
+    placement: () => props.placement,
+    offset: () => props.offset,
+    modal: props.modal,
+    open: () => props.open,
+    onOpen: () => emit('update:open', true),
+    onClose: () => emit('update:open', false),
 });
 </script>
 

package/components/overlay/sheet/Sheet.vue

@@ -20,12 +20,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
-import {
-    mountDialog,
-    type DialogControl,
-} from '../../../utils/controllers/dialog.js';
+import { useDialog } from '../../../composables/useDialog.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -51,35 +48,17 @@ const emit = defineEmits<{
 
 const rootRef = ref<HTMLDialogElement | null>(null);
 const titleId = generateId('sheet-title');
-let control: DialogControl | null = null;
 
 function requestClose(): void {
     emit('update:open', false);
     emit('close');
 }
 
-onMounted(() => {
-    if (!rootRef.value) return;
-    control = mountDialog(rootRef.value, {
-        role: 'dialog',
-        persistent: props.persistent,
-        onClose: requestClose,
-    });
-    if (props.open) control.open();
-});
-
-watch(
-    () => props.open,
-    (isOpen) => {
-        if (!control) return;
-        if (isOpen) control.open();
-        else control.close();
-    },
-);
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
+useDialog(rootRef, {
+    role: 'dialog',
+    persistent: () => props.persistent,
+    open: () => props.open,
+    onClose: requestClose,
 });
 </script>
 

package/components/overlay/tooltip/Tooltip.vue

@@ -13,11 +13,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountPopover,
-    type PopoverControl,
-    type Placement,
-} from '../../../utils/controllers/popover.js';
+import { usePopover, type Placement } from '../../../composables/usePopover.js';
 import { generateId } from '../../../utils/a11y/id.js';
 
 const props = withDefaults(
@@ -64,11 +60,19 @@ const tooltipRef = ref<HTMLElement | null>(null);
 // `generateId` runs at script-setup execution time — safe in SSR/hydration
 // because the same id is produced in the same order on each render path.
 const tooltipId = generateId('tooltip');
-let control: PopoverControl | null = null;
 let openTimer: number | null = null;
 let closeTimer: number | null = null;
 let trigger: HTMLElement | null = null;
 
+// The trigger is resolved from the slot in `onMounted`, after the
+// composable wires itself; the lazy getter hands it over on first open.
+const control = usePopover(tooltipRef, {
+    anchor: () => trigger,
+    placement: () => props.placement,
+    offset: 6,
+    modal: false,
+});
+
 function clearTimers(): void {
     if (openTimer != null) {
         clearTimeout(openTimer);
@@ -83,7 +87,7 @@ function clearTimers(): void {
 function scheduleOpen(): void {
     clearTimers();
     openTimer = window.setTimeout(() => {
-        control?.show();
+        control.show();
         openTimer = null;
     }, props.openDelay);
 }
@@ -91,7 +95,7 @@ function scheduleOpen(): void {
 function scheduleClose(): void {
     clearTimers();
     closeTimer = window.setTimeout(() => {
-        control?.hide();
+        control.hide();
         closeTimer = null;
     }, props.closeDelay);
 }
@@ -110,12 +114,12 @@ function onPointerLeave(): void {
 // are a mouse-only affordance.
 function onFocus(): void {
     clearTimers();
-    control?.show();
+    control.show();
 }
 
 function onBlur(): void {
     clearTimers();
-    control?.hide();
+    control.hide();
 }
 
 function onTooltipPointerEnter(): void {
@@ -154,13 +158,6 @@ onMounted(() => {
         existing ? `${existing} ${tooltipId}` : tooltipId,
     );
 
-    control = mountPopover(tooltipEl, {
-        anchor: trigger,
-        placement: props.placement,
-        offset: 6,
-        modal: false,
-    });
-
     trigger.addEventListener('pointerenter', onPointerEnter);
     trigger.addEventListener('pointerleave', onPointerLeave);
     trigger.addEventListener('focus', onFocus);
@@ -199,8 +196,6 @@ onBeforeUnmount(() => {
             onTooltipPointerLeave,
         );
     }
-    control?.teardown();
-    control = null;
     trigger = null;
 });
 </script>