fix(primitives): eslint/tsconfig migration, asChild refactor, type fixes
- Migrate to eslint flat config + composite tsconfig. - Complete the asChild→as="template" refactor (remove asChild prop + :as-child bindings across components, matching Primitive's slot model). - Fix test type errors and source type-safety (useGraceArea hull/point math, FocusScope/util ref typing). Note: ~53 vue-tsc errors remain (HTML attr/event passthrough typing on transparent wrapper components + a couple of duplicate-export naming collisions) — not gated by CI (build/lint/test green); pending a component-attribute-typing design decision.
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastActionProps extends PrimitiveProps {
|
||||
/**
|
||||
* Accessible description for screen readers (required).
|
||||
* Describes what happens when the user triggers the action.
|
||||
*/
|
||||
altText: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
|
||||
import { Primitive } from '../primitive';
|
||||
|
||||
const { as = 'button', altText } = defineProps<ToastActionProps>();
|
||||
const { forwardRef } = useForwardExpose();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
:aria-label="altText"
|
||||
data-primitives-toast-action
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastCloseProps extends PrimitiveProps {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
|
||||
import { Primitive } from '../primitive';
|
||||
import { useToastContext } from './context';
|
||||
|
||||
const { as = 'button' } = defineProps<ToastCloseProps>();
|
||||
const { forwardRef } = useForwardExpose();
|
||||
const toastCtx = useToastContext();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
data-primitives-toast-close
|
||||
@click="toastCtx.onClose()"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastDescriptionProps extends PrimitiveProps {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
|
||||
import { Primitive } from '../primitive';
|
||||
|
||||
const { as = 'div' } = defineProps<ToastDescriptionProps>();
|
||||
const { forwardRef } = useForwardExpose();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
data-primitives-toast-description
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import type { SwipeDirection } from './context';
|
||||
|
||||
export interface ToastProviderProps {
|
||||
/** Accessible label for the toast region. @default 'Notifications' */
|
||||
label?: string;
|
||||
/** Auto-dismiss duration in ms. Use `Infinity` to disable auto-dismiss. @default 5000 */
|
||||
duration?: number;
|
||||
/** Swipe direction to dismiss. @default 'right' */
|
||||
swipeDirection?: SwipeDirection;
|
||||
/** Minimum swipe distance before a dismiss gesture is recognised. @default 50 */
|
||||
swipeThreshold?: number;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef, toRef } from 'vue';
|
||||
|
||||
import { provideToastProviderContext } from './context';
|
||||
|
||||
const {
|
||||
label = 'Notifications',
|
||||
duration = 5000,
|
||||
swipeDirection = 'right',
|
||||
swipeThreshold = 50,
|
||||
} = defineProps<ToastProviderProps>();
|
||||
|
||||
const labelRef = toRef(() => label);
|
||||
const durationRef = toRef(() => duration);
|
||||
const swipeDirectionRef = toRef(() => swipeDirection);
|
||||
const swipeThresholdRef = toRef(() => swipeThreshold);
|
||||
|
||||
const toastCount = ref(0);
|
||||
const viewportRef = shallowRef<HTMLElement | undefined>(undefined);
|
||||
const isFocusedToastEscapeKeyDownRef = ref(false);
|
||||
const isClosePausedRef = ref(false);
|
||||
|
||||
provideToastProviderContext({
|
||||
label: labelRef,
|
||||
duration: durationRef,
|
||||
swipeDirection: swipeDirectionRef,
|
||||
swipeThreshold: swipeThresholdRef,
|
||||
toastCount,
|
||||
viewportRef,
|
||||
onViewportChange: (el) => { viewportRef.value = el; },
|
||||
onToastAdd: () => { toastCount.value++; },
|
||||
onToastRemove: () => { toastCount.value--; },
|
||||
isFocusedToastEscapeKeyDownRef,
|
||||
isClosePausedRef,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot />
|
||||
</template>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastRootProps extends PrimitiveProps {
|
||||
/** Override the provider's auto-dismiss duration. Use `Infinity` to disable. */
|
||||
duration?: number;
|
||||
/** Toast type — controls the `aria-live` politeness. @default 'background' */
|
||||
type?: 'foreground' | 'background';
|
||||
}
|
||||
|
||||
export interface ToastRootEmits {
|
||||
'update:open': [open: boolean];
|
||||
escapeKeyDown: [event: KeyboardEvent];
|
||||
pause: [];
|
||||
resume: [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, toRef, watch } from 'vue';
|
||||
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
import { useId } from '../config-provider';
|
||||
import { Presence } from '../presence';
|
||||
import { Primitive } from '../primitive';
|
||||
import { provideToastContext, useToastProviderContext } from './context';
|
||||
import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
|
||||
|
||||
const {
|
||||
as = 'li',
|
||||
duration,
|
||||
type = 'background',
|
||||
} = defineProps<ToastRootProps>();
|
||||
|
||||
const emit = defineEmits<ToastRootEmits>();
|
||||
|
||||
const { forwardRef } = useForwardExpose();
|
||||
const providerCtx = useToastProviderContext();
|
||||
const toastId = useId(undefined, 'toast');
|
||||
const durationRef = toRef(() => duration);
|
||||
|
||||
const open = defineModel<boolean>('open', {
|
||||
default: true,
|
||||
});
|
||||
|
||||
let closeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function clearTimer() {
|
||||
if (closeTimer) {
|
||||
clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function startTimer(ms: number) {
|
||||
clearTimer();
|
||||
if (ms === Infinity || ms <= 0 || !Number.isFinite(ms)) return;
|
||||
closeTimer = setTimeout(() => {
|
||||
open.value = false;
|
||||
emit('update:open', false);
|
||||
}, ms);
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
open.value = false;
|
||||
emit('update:open', false);
|
||||
}
|
||||
|
||||
function pauseTimer() {
|
||||
clearTimer();
|
||||
providerCtx.isClosePausedRef.value = true;
|
||||
emit('pause');
|
||||
}
|
||||
|
||||
function resumeTimer() {
|
||||
providerCtx.isClosePausedRef.value = false;
|
||||
const ms = durationRef.value ?? providerCtx.duration.value;
|
||||
startTimer(ms);
|
||||
emit('resume');
|
||||
}
|
||||
|
||||
// Restart timer when reactive duration changes (and we are not paused).
|
||||
watch(
|
||||
[durationRef, () => providerCtx.duration.value],
|
||||
() => {
|
||||
if (!open.value) return;
|
||||
if (providerCtx.isClosePausedRef.value) return;
|
||||
const ms = durationRef.value ?? providerCtx.duration.value;
|
||||
startTimer(ms);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
providerCtx.onToastAdd();
|
||||
const ms = durationRef.value ?? providerCtx.duration.value;
|
||||
startTimer(ms);
|
||||
|
||||
const viewport = providerCtx.viewportRef.value;
|
||||
if (viewport) {
|
||||
viewport.addEventListener(VIEWPORT_PAUSE, pauseTimer);
|
||||
viewport.addEventListener(VIEWPORT_RESUME, resumeTimer);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
providerCtx.onToastRemove();
|
||||
clearTimer();
|
||||
|
||||
const viewport = providerCtx.viewportRef.value;
|
||||
if (viewport) {
|
||||
viewport.removeEventListener(VIEWPORT_PAUSE, pauseTimer);
|
||||
viewport.removeEventListener(VIEWPORT_RESUME, resumeTimer);
|
||||
}
|
||||
});
|
||||
|
||||
provideToastContext({
|
||||
onClose: handleClose,
|
||||
duration: durationRef,
|
||||
open,
|
||||
toastId,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Presence :present="open">
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
role="status"
|
||||
:aria-live="type === 'foreground' ? 'assertive' : 'polite'"
|
||||
:aria-atomic="true"
|
||||
:data-state="open ? 'open' : 'closed'"
|
||||
:data-type="type"
|
||||
tabindex="-1"
|
||||
@keydown.escape="emit('escapeKeyDown', $event)"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</Presence>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastTitleProps extends PrimitiveProps {}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
|
||||
import { Primitive } from '../primitive';
|
||||
|
||||
const { as = 'div' } = defineProps<ToastTitleProps>();
|
||||
const { forwardRef } = useForwardExpose();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
data-primitives-toast-title
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
import type { PrimitiveProps } from '../primitive';
|
||||
|
||||
export interface ToastViewportProps extends PrimitiveProps {
|
||||
/** Accessible label for the toast region. Overrides the provider label. */
|
||||
label?: string;
|
||||
/** Keyboard shortcut to focus the viewport. @default ['F8'] */
|
||||
hotkey?: string[];
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, watchPostEffect } from 'vue';
|
||||
|
||||
import { useForwardExpose } from '@robonen/vue';
|
||||
import { Primitive } from '../primitive';
|
||||
import { useToastProviderContext } from './context';
|
||||
import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils';
|
||||
|
||||
const { as = 'ol', hotkey = ['F8'], label } = defineProps<ToastViewportProps>();
|
||||
|
||||
const { forwardRef, currentElement } = useForwardExpose();
|
||||
const providerCtx = useToastProviderContext();
|
||||
|
||||
watchPostEffect(() => providerCtx.onViewportChange(currentElement.value));
|
||||
|
||||
const viewportLabel = computed(() => label ?? providerCtx.label.value);
|
||||
|
||||
function handlePointerEnter() {
|
||||
currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
|
||||
}
|
||||
|
||||
function handlePointerLeave() {
|
||||
currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
|
||||
}
|
||||
|
||||
function handleFocusIn() {
|
||||
currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_PAUSE, { bubbles: true }));
|
||||
}
|
||||
|
||||
function handleFocusOut(event: FocusEvent) {
|
||||
if (currentElement.value?.contains(event.relatedTarget as Node)) return;
|
||||
currentElement.value?.dispatchEvent(new CustomEvent(VIEWPORT_RESUME, { bubbles: true }));
|
||||
}
|
||||
|
||||
function handleGlobalKeyDown(event: KeyboardEvent) {
|
||||
if (!hotkey || hotkey.length === 0) return;
|
||||
const isHotkey = hotkey.every((key) => {
|
||||
if (key === event.key) return true;
|
||||
if (key === 'altKey') return event.altKey;
|
||||
if (key === 'ctrlKey') return event.ctrlKey;
|
||||
if (key === 'shiftKey') return event.shiftKey;
|
||||
if (key === 'metaKey') return event.metaKey;
|
||||
return false;
|
||||
});
|
||||
if (isHotkey) currentElement.value?.focus();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
:ref="forwardRef"
|
||||
:as="as"
|
||||
role="region"
|
||||
:aria-label="viewportLabel"
|
||||
tabindex="-1"
|
||||
style="outline: none"
|
||||
data-primitives-toast-viewport
|
||||
@pointerenter="handlePointerEnter"
|
||||
@pointerleave="handlePointerLeave"
|
||||
@focusin="handleFocusIn"
|
||||
@focusout="handleFocusOut"
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
// Regression tests for confirmed bugs from Phase 1 audit:
|
||||
// 1. ToastRoot tabindex must be -1 (programmatic only), not 0 (conflicts with roving focus).
|
||||
// 2. ToastViewport hotkey must validate against empty array (otherwise vacuous-truth
|
||||
// focuses the viewport on every keystroke).
|
||||
// 3. ToastRoot must restart the auto-dismiss timer when `duration` changes reactively.
|
||||
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { defineComponent, h, nextTick, ref } from 'vue';
|
||||
import { ToastProvider, ToastRoot, ToastViewport } from '../index';
|
||||
|
||||
function createHarness(props: {
|
||||
duration?: number;
|
||||
hotkey?: string[];
|
||||
} = {}) {
|
||||
return defineComponent({
|
||||
components: { ToastProvider, ToastViewport, ToastRoot },
|
||||
setup() {
|
||||
const duration = ref(props.duration);
|
||||
return { duration, hotkey: props.hotkey };
|
||||
},
|
||||
render() {
|
||||
return h(ToastProvider, {}, {
|
||||
default: () => [
|
||||
h(ToastViewport, { hotkey: this.hotkey ?? ['F8'] }),
|
||||
h(ToastRoot, { duration: this.duration }, { default: () => 'Toast body' }),
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe('toast — bug regression', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('ToastRoot has tabindex="-1" (programmatic focus only)', () => {
|
||||
const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
|
||||
const toast = wrapper.find('[role="status"]');
|
||||
expect(toast.exists()).toBe(true);
|
||||
expect(toast.attributes('tabindex')).toBe('-1');
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('ToastViewport ignores empty hotkey array (does not focus on every keypress)', async () => {
|
||||
const wrapper = mount(createHarness({ duration: Infinity, hotkey: [] }), { attachTo: document.body });
|
||||
const viewport = wrapper.find('[role="region"]').element as HTMLElement;
|
||||
const focusSpy = vi.spyOn(viewport, 'focus');
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
|
||||
|
||||
expect(focusSpy).not.toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('ToastViewport responds to F8 when hotkey=["F8"]', () => {
|
||||
const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
|
||||
const viewport = wrapper.find('[role="region"]').element as HTMLElement;
|
||||
const focusSpy = vi.spyOn(viewport, 'focus');
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'F8' }));
|
||||
|
||||
expect(focusSpy).toHaveBeenCalledOnce();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('ToastRoot restarts auto-dismiss timer when duration prop changes reactively', async () => {
|
||||
const Harness = createHarness({ duration: 1000 });
|
||||
const wrapper = mount(Harness, { attachTo: document.body });
|
||||
|
||||
// Bump duration to 5000ms BEFORE original 1000ms elapses.
|
||||
vi.advanceTimersByTime(500);
|
||||
wrapper.vm.duration = 5000;
|
||||
await nextTick();
|
||||
|
||||
// Original 1000ms total would have fired by 1100ms — but the watcher restarted the
|
||||
// timer with the new duration. Toast must still be open.
|
||||
vi.advanceTimersByTime(600); // 1100ms elapsed total
|
||||
await nextTick();
|
||||
expect(wrapper.find('[role="status"]').exists()).toBe(true);
|
||||
|
||||
// Now advance the full new duration (5000ms) — toast should close.
|
||||
vi.advanceTimersByTime(5000);
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
expect(wrapper.find('[role="status"]').exists()).toBe(false);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('ToastRoot timer does not fire when duration=Infinity', () => {
|
||||
const wrapper = mount(createHarness({ duration: Infinity }), { attachTo: document.body });
|
||||
vi.advanceTimersByTime(60_000);
|
||||
expect(wrapper.find('[role="status"]').exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Ref, ShallowRef } from 'vue';
|
||||
|
||||
import { useContextFactory } from '@robonen/vue';
|
||||
|
||||
export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
|
||||
|
||||
export interface ToastProviderContext {
|
||||
label: Ref<string>;
|
||||
duration: Ref<number>;
|
||||
swipeDirection: Ref<SwipeDirection>;
|
||||
swipeThreshold: Ref<number>;
|
||||
toastCount: Ref<number>;
|
||||
viewportRef: ShallowRef<HTMLElement | undefined>;
|
||||
onViewportChange: (el: HTMLElement | undefined) => void;
|
||||
onToastAdd: () => void;
|
||||
onToastRemove: () => void;
|
||||
isFocusedToastEscapeKeyDownRef: Ref<boolean>;
|
||||
isClosePausedRef: Ref<boolean>;
|
||||
}
|
||||
|
||||
export interface ToastContext {
|
||||
onClose: () => void;
|
||||
duration: Ref<number | undefined>;
|
||||
open: Ref<boolean>;
|
||||
toastId: Ref<string>;
|
||||
}
|
||||
|
||||
const {
|
||||
inject: useToastProviderContext,
|
||||
provide: provideToastProviderContext,
|
||||
} = useContextFactory<ToastProviderContext>('ToastProviderContext');
|
||||
|
||||
const {
|
||||
inject: useToastContext,
|
||||
provide: provideToastContext,
|
||||
} = useContextFactory<ToastContext>('ToastContext');
|
||||
|
||||
export {
|
||||
useToastProviderContext,
|
||||
provideToastProviderContext,
|
||||
useToastContext,
|
||||
provideToastContext,
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
export { default as ToastProvider } from './ToastProvider.vue';
|
||||
export { default as ToastRoot } from './ToastRoot.vue';
|
||||
export { default as ToastTitle } from './ToastTitle.vue';
|
||||
export { default as ToastDescription } from './ToastDescription.vue';
|
||||
export { default as ToastAction } from './ToastAction.vue';
|
||||
export { default as ToastClose } from './ToastClose.vue';
|
||||
export { default as ToastViewport } from './ToastViewport.vue';
|
||||
|
||||
export {
|
||||
useToastProviderContext,
|
||||
useToastContext,
|
||||
} from './context';
|
||||
|
||||
export type { SwipeDirection, ToastProviderContext, ToastContext } from './context';
|
||||
export type { ToastProviderProps } from './ToastProvider.vue';
|
||||
export type { ToastRootProps, ToastRootEmits } from './ToastRoot.vue';
|
||||
export type { ToastTitleProps } from './ToastTitle.vue';
|
||||
export type { ToastDescriptionProps } from './ToastDescription.vue';
|
||||
export type { ToastActionProps } from './ToastAction.vue';
|
||||
export type { ToastCloseProps } from './ToastClose.vue';
|
||||
export type { ToastViewportProps } from './ToastViewport.vue';
|
||||
@@ -0,0 +1,2 @@
|
||||
export const VIEWPORT_PAUSE = 'toast.viewportPause';
|
||||
export const VIEWPORT_RESUME = 'toast.viewportResume';
|
||||
Reference in New Issue
Block a user