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:
2026-06-07 16:29:56 +07:00
parent c7644ade69
commit 626fbc70d8
408 changed files with 27367 additions and 154 deletions
@@ -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>