reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 3.39 kB
Source Map (JSON)
{"version":3,"file":"MenuRoot.cjs","sources":["../../src/Menu/MenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction } from './utils'\nimport { createContext, useDirection } from '@/shared'\nimport { useIsUsingKeyboard } from '@/shared/useIsUsingKeyboard'\n\nexport interface MenuContext {\n open: Ref<boolean>\n onOpenChange: (open: boolean) => void\n content: Ref<HTMLElement | undefined>\n onContentChange: (content: HTMLElement | undefined) => void\n}\n\nexport interface MenuRootContext {\n onClose: () => void\n dir: Ref<Direction>\n isUsingKeyboardRef: Ref<boolean>\n modal: Ref<boolean>\n}\n\nexport interface MenuProps {\n /** The controlled open state of the menu. Can be used as `v-model:open`. */\n open?: boolean\n /**\n * The reading direction of the combobox when applicable.\n *\n * If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.\n */\n dir?: Direction\n /**\n * The modality of the dropdown menu.\n *\n * When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n */\n modal?: boolean\n}\n\nexport type MenuEmits = {\n 'update:open': [payload: boolean]\n}\n\nexport const [injectMenuContext, provideMenuContext]\n = createContext<MenuContext>(['MenuRoot', 'MenuSub'], 'MenuContext')\n\nexport const [injectMenuRootContext, provideMenuRootContext]\n = createContext<MenuRootContext>('MenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n ref,\n toRefs,\n} from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<MenuProps>(), {\n open: false,\n modal: true,\n})\nconst emits = defineEmits<MenuEmits>()\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\n\nconst open = useVModel(props, 'open', emits)\n\nconst content = ref<HTMLElement>()\nconst isUsingKeyboardRef = useIsUsingKeyboard()\n\nprovideMenuContext({\n open,\n onOpenChange: (value) => {\n open.value = value\n },\n content,\n onContentChange: (element) => {\n content.value = element\n },\n})\n\nprovideMenuRootContext({\n onClose: () => {\n open.value = false\n },\n isUsingKeyboardRef,\n dir,\n modal,\n})\n</script>\n\n<template>\n <PopperRoot>\n <slot />\n </PopperRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","ref","useIsUsingKeyboard"],"mappings":";;;;;;;;;AAyCa,MAAA,CAAC,mBAAmB,kBAAkB,CAAA,GAC/CA,mCAA2B,CAAC,UAAA,EAAY,SAAS,CAAA,EAAG,aAAa;AAE9D,MAAM,CAAC,qBAAA,EAAuB,sBAAsB,CAAA,GACvDA,mCAA+B,UAAU;;;;;;;;;;AAW7C,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAK,CAAA;AAE3C,IAAA,MAAM,UAAUC,OAAiB,EAAA;AACjC,IAAA,MAAM,qBAAqBC,4CAAmB,EAAA;AAE9C,IAAmB,kBAAA,CAAA;AAAA,MACjB,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,OAAA;AAAA,MACA,eAAA,EAAiB,CAAC,OAAY,KAAA;AAC5B,QAAA,OAAA,CAAQ,KAAQ,GAAA,OAAA;AAAA;AAClB,KACD,CAAA;AAED,IAAuB,sBAAA,CAAA;AAAA,MACrB,SAAS,MAAM;AACb,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,kBAAA;AAAA,MACA,GAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;"}