UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 5.08 kB
{"version":3,"file":"NavigationMenuSub.cjs","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n /** Event handler called when the value changes. */\n 'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n modelValue?: string\n /**\n * The value of the menu item that should be active when initially rendered.\n *\n * Use when you do not need to control the value state.\n */\n defaultValue?: string\n /** The orientation of the menu. */\n orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport {\n Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\n\ndefineSlots<{\n default: (props: {\n /** Current input values */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: props.defaultValue ?? '',\n passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n if (!modelValue.value)\n return\n\n const items = getItems().map(i => i.ref)\n activeTrigger.value = items.find(item =>\n item.id.includes(modelValue.value),\n )\n})\n\nprovideNavigationMenuContext({\n ...menuContext,\n isRootMenu: false,\n modelValue,\n previousValue,\n activeTrigger,\n orientation: props.orientation,\n rootNavigationMenu: currentElement,\n indicatorTrack,\n onIndicatorTrackChange: (val) => {\n indicatorTrack.value = val\n },\n viewport,\n onViewportChange: (val) => {\n viewport.value = val\n },\n\n onTriggerEnter: (val) => {\n modelValue.value = val\n },\n onTriggerLeave: () => {\n // do nothing for submenu\n },\n onContentEnter: () => {\n // do nothing for submenu\n },\n onContentLeave: () => {\n // do nothing for submenu\n },\n onItemSelect: (val) => {\n modelValue.value = val\n },\n onItemDismiss: () => {\n modelValue.value = ''\n },\n})\n</script>\n\n<template>\n <CollectionSlot>\n <Primitive\n :ref=\"forwardRef\"\n :data-orientation=\"orientation\"\n :as-child=\"props.asChild\"\n :as=\"as\"\n data-reka-navigation-menu\n >\n <slot :model-value=\"modelValue\" />\n </Primitive>\n </CollectionSlot>\n</template>\n"],"names":["useVModel","ref","injectNavigationMenuContext","useForwardExpose","useCollection","watchEffect","provideNavigationMenuContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBC,QAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiBF,OAAiB,EAAA;AACxC,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAAG,mCAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6BC,8DAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}