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,80 @@
|
||||
<script lang="ts">
|
||||
export interface NavigationMenuItemProps {
|
||||
/**
|
||||
* Unique value associating this item with the active state. Generated
|
||||
* automatically when omitted.
|
||||
*/
|
||||
value?: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, shallowRef, toValue } from 'vue';
|
||||
|
||||
import { focusFirst, getTabbableCandidates } from '@robonen/platform/browsers';
|
||||
import { useForwardExpose, useId } from '@robonen/vue';
|
||||
import { Primitive } from '../primitive';
|
||||
import { provideNavigationMenuItemContext, useNavigationMenuContext } from './context';
|
||||
import { makeContentId, makeTriggerId, removeFromTabOrder } from './utils';
|
||||
|
||||
const { value: valueProp } = defineProps<NavigationMenuItemProps>();
|
||||
|
||||
useForwardExpose();
|
||||
|
||||
const context = useNavigationMenuContext();
|
||||
|
||||
const autoId = useId(undefined, 'primitives-navigation-menu-item');
|
||||
const value = computed<string>(() => valueProp ?? autoId.value);
|
||||
|
||||
const triggerRef = shallowRef<HTMLElement | undefined>(undefined);
|
||||
const focusProxyRef = shallowRef<HTMLElement | undefined>(undefined);
|
||||
const wasEscapeCloseRef = ref(false);
|
||||
|
||||
const triggerId = computed(() => makeTriggerId(toValue(context.baseId), value.value));
|
||||
const contentId = computed(() => makeContentId(toValue(context.baseId), value.value));
|
||||
|
||||
let restoreContentTabOrder: () => void = () => {};
|
||||
|
||||
function handleContentEntry(side: 'start' | 'end' = 'start') {
|
||||
const el = document.getElementById(contentId.value);
|
||||
if (!el) return;
|
||||
restoreContentTabOrder();
|
||||
const candidates = getTabbableCandidates(el);
|
||||
if (candidates.length) {
|
||||
focusFirst(side === 'start' ? candidates : [...candidates].reverse());
|
||||
}
|
||||
}
|
||||
|
||||
function handleContentExit() {
|
||||
const el = document.getElementById(contentId.value);
|
||||
if (!el) return;
|
||||
const candidates = getTabbableCandidates(el);
|
||||
if (candidates.length) {
|
||||
restoreContentTabOrder = removeFromTabOrder(candidates);
|
||||
}
|
||||
}
|
||||
|
||||
provideNavigationMenuItemContext({
|
||||
get value() { return value.value; },
|
||||
get contentId() { return contentId.value; },
|
||||
get triggerId() { return triggerId.value; },
|
||||
triggerRef,
|
||||
onTriggerChange: (el) => { triggerRef.value = el; },
|
||||
focusProxyRef,
|
||||
onFocusProxyChange: (el) => { focusProxyRef.value = el; },
|
||||
wasEscapeCloseRef,
|
||||
onEntryKeyDown: () => handleContentEntry('start'),
|
||||
onFocusProxyEnter: side => handleContentEntry(side),
|
||||
onContentFocusOutside: handleContentExit,
|
||||
onRootContentClose: handleContentExit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive
|
||||
as="li"
|
||||
data-primitives-navigation-menu-item
|
||||
>
|
||||
<slot />
|
||||
</Primitive>
|
||||
</template>
|
||||
Reference in New Issue
Block a user