UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 4.35 kB
{"version":3,"file":"TabsRoot.cjs","sources":["../../src/Tabs/TabsRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { DataOrientation, Direction, StringOrNumber } from '../shared/types'\nimport { createContext, useDirection, useForwardExpose, useId } from '@/shared'\nimport { useVModel } from '@vueuse/core'\n\nexport interface TabsRootContext {\n modelValue: Ref<StringOrNumber | undefined>\n changeModelValue: (value: StringOrNumber) => void\n orientation: Ref<DataOrientation>\n dir: Ref<Direction>\n unmountOnHide: Ref<boolean>\n activationMode: 'automatic' | 'manual'\n baseId: string\n tabsList: Ref<HTMLElement | undefined>\n}\n\nexport interface TabsRootProps<T extends StringOrNumber = StringOrNumber> extends PrimitiveProps {\n /**\n * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs\n */\n defaultValue?: T\n /**\n * The orientation the tabs are laid out.\n * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n * @defaultValue horizontal\n */\n orientation?: DataOrientation\n /**\n * The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.\n */\n dir?: Direction\n /**\n * Whether a tab is activated automatically (on focus) or manually (on click).\n * @defaultValue automatic\n */\n activationMode?: 'automatic' | 'manual'\n /** The controlled value of the tab to activate. Can be bind as `v-model`. */\n modelValue?: T\n /**\n * When `true`, the element will be unmounted on closed state.\n *\n * @defaultValue `true`\n */\n unmountOnHide?: boolean\n}\nexport type TabsRootEmits<T extends StringOrNumber = StringOrNumber> = {\n /** Event handler called when the value changes */\n 'update:modelValue': [payload: T]\n}\n\nexport const [injectTabsRootContext, provideTabsRootContext]\n = createContext<TabsRootContext>('TabsRoot')\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends StringOrNumber = StringOrNumber\">\nimport { ref, toRefs } from 'vue'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<TabsRootProps<T>>(), {\n orientation: 'horizontal',\n activationMode: 'automatic',\n unmountOnHide: true,\n})\nconst emits = defineEmits<TabsRootEmits<T>>()\n\ndefineSlots<{\n default: (props: {\n /** Current input values */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst { orientation, unmountOnHide, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nuseForwardExpose()\n\nconst modelValue = useVModel<TabsRootProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, {\n defaultValue: props.defaultValue,\n passive: (props.modelValue === undefined) as false,\n})\n\nconst tabsList = ref<HTMLElement>()\n\nprovideTabsRootContext({\n modelValue,\n changeModelValue: (value: StringOrNumber) => {\n modelValue.value = value as T\n },\n orientation,\n dir,\n unmountOnHide,\n activationMode: props.activationMode,\n baseId: useId(undefined, 'reka-tabs'),\n tabsList,\n})\n</script>\n\n<template>\n <Primitive\n :dir=\"dir\"\n :data-orientation=\"orientation\"\n :as-child=\"asChild\"\n :as=\"as\"\n >\n <slot :model-value=\"modelValue\" />\n </Primitive>\n</template>\n"],"names":["createContext","toRefs","useDirection","useForwardExpose","useVModel","ref","useId"],"mappings":";;;;;;;;;;AAoDO,MAAM,CAAC,qBAAA,EAAuB,sBAAsB,CAAA,GACvDA,mCAA+B,UAAU;;;;;;;;;;;;;;;AAO7C,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,EAAE,WAAa,EAAA,aAAA,EAAe,KAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AACjE,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAChC,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,UAAa,GAAAC,cAAA,CAA+D,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MAC5G,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,WAAWC,OAAiB,EAAA;AAElC,IAAuB,sBAAA,CAAA;AAAA,MACrB,UAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,KAA0B,KAAA;AAC3C,QAAA,UAAA,CAAW,KAAQ,GAAA,KAAA;AAAA,OACrB;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,aAAA;AAAA,MACA,gBAAgB,KAAM,CAAA,cAAA;AAAA,MACtB,MAAA,EAAQC,kBAAM,CAAA,MAAA,EAAW,WAAW,CAAA;AAAA,MACpC;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}