feat(tabs): add tabs component with context, examples, and styles

Author: elonehoo

packages/vue/package.json

@@ -75,6 +75,7 @@
     "@destyler/splitter": "catalog:prod",
     "@destyler/steps": "catalog:prod",
     "@destyler/switch": "catalog:prod",
+    "@destyler/tabs": "catalog:prod",
     "@destyler/utils": "catalog:prod",
     "@destyler/vue": "catalog:prod",
     "@destyler/xstate": "catalog:prod"

packages/vue/src/components/tabs/anatomy.ts

@@ -0,0 +1 @@
+export { anatomy as tabsAnatomy } from '@destyler/tabs'

packages/vue/src/components/tabs/components/Content.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { ContentProps } from '@destyler/tabs'
+import type { PolymorphicProps } from '~/factory'
+
+export interface TabContentProps extends ContentProps, PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { useForwardExpose } from '~/composables'
+import { useRenderStrategyProps } from '~/composables'
+import { useTabsContext } from '../composables/use-tabs-context'
+import { Presence } from '~/components/presence'
+
+defineOptions({
+  name: 'TabContent',
+})
+
+const props = defineProps<TabContentProps>()
+const tabs = useTabsContext()
+const renderStrategy = useRenderStrategyProps()
+
+useForwardExpose()
+</script>
+
+<template>
+  <Presence
+    v-bind="tabs.getContentProps(props)"
+    :present="tabs.value === props.value"
+    :lazy-mount="renderStrategy.lazyMount"
+    :unmount-on-exit="renderStrategy.unmountOnExit"
+    :immediate="true"
+  >
+    <slot />
+  </Presence>
+</template>

packages/vue/src/components/tabs/components/Context.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { SlotsType, UnwrapRef } from 'vue'
+import type { UseTabsContext } from '../composables/use-tabs-context'
+
+export interface TabsContextProps
+  extends SlotsType<{
+    default: UnwrapRef<UseTabsContext>
+  }> {}
+</script>
+
+<script setup lang="ts">
+import { useTabsContext } from '../composables/use-tabs-context'
+
+defineOptions({
+  name: 'TabsContext',
+})
+
+const tabs = useTabsContext()
+
+defineSlots<{
+  default(tabs: UnwrapRef<UseTabsContext>): unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="tabs"></slot>
+</template>

packages/vue/src/components/tabs/components/Indicator.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface TabIndicatorProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useTabsContext } from '../composables/use-tabs-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'TabIndicator',
+})
+
+defineProps<TabIndicatorProps>()
+const tabs = useTabsContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="tabs.getIndicatorProps()" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/tabs/components/List.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { PolymorphicProps } from '~/factory'
+
+export interface TabListProps extends PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useTabsContext } from '../composables/use-tabs-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'TabList',
+})
+
+defineProps<TabListProps>()
+const tabs = useTabsContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="tabs.getListProps()" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/tabs/components/Root.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { BooleanDefaults } from '~/types'
+import type { RenderStrategyProps } from '~/composables'
+import type { PolymorphicProps } from '~/factory'
+import type { RootEmits, RootProps } from '../types'
+
+export interface TabsRootProps extends RootProps, RenderStrategyProps, PolymorphicProps {}
+export interface TabsRootEmits extends RootEmits {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RenderStrategyPropsProvider, useForwardExpose } from '~/composables'
+import { ui } from '~/factory'
+import { useTabs } from '../composables/use-tabs'
+import { TabsProvider } from '../composables/use-tabs-context'
+
+defineOptions({
+  name: 'TabsRoot',
+})
+
+const props = withDefaults(defineProps<TabsRootProps>(), {
+  composite: undefined,
+  deselectable: undefined,
+  loopFocus: undefined,
+} satisfies BooleanDefaults<RootProps>)
+
+const emits = defineEmits<TabsRootEmits>()
+
+const tabs = useTabs(props, emits)
+
+TabsProvider(tabs)
+RenderStrategyPropsProvider(computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })))
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="tabs.getRootProps()" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/tabs/components/RootProvider.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { UnwrapRef } from 'vue'
+import type { RenderStrategyProps } from '~/composables'
+import type { PolymorphicProps } from '~/factory'
+import type { UseTabsReturn } from '../composables/use-tabs'
+
+interface RootProviderProps {
+  value: UnwrapRef<UseTabsReturn>
+}
+
+export interface TabsRootProviderProps extends RootProviderProps, RenderStrategyProps, PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RenderStrategyPropsProvider, useForwardExpose } from '~/composables'
+import { ui } from '~/factory'
+import { TabsProvider } from '../composables/use-tabs-context'
+
+defineOptions({
+  name: 'TabsRootProvider',
+})
+
+const props = defineProps<TabsRootProviderProps>()
+const tabs = computed(() => props.value)
+
+TabsProvider(tabs)
+RenderStrategyPropsProvider(computed(() => ({ lazyMount: props.lazyMount, unmountOnExit: props.unmountOnExit })))
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.div v-bind="tabs.getRootProps()" :as-child="asChild">
+    <slot />
+  </ui.div>
+</template>

packages/vue/src/components/tabs/components/Trigger.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { TriggerProps } from '@destyler/tabs'
+import type { PolymorphicProps } from '~/factory'
+
+export interface TabTriggerProps extends TriggerProps, PolymorphicProps {}
+</script>
+
+<script setup lang="ts">
+import { ui } from '~/factory'
+import { useTabsContext } from '../composables/use-tabs-context'
+import { useForwardExpose } from '~/composables'
+
+defineOptions({
+  name: 'TabTrigger',
+})
+
+const props = defineProps<TabTriggerProps>()
+const tabs = useTabsContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ui.button v-bind="tabs.getTriggerProps(props)" :as-child="asChild">
+    <slot />
+  </ui.button>
+</template>

packages/vue/src/components/tabs/composables/use-tabs-context.ts

@@ -0,0 +1,6 @@
+import type { UseTabsReturn } from './use-tabs'
+import { createContext } from '~/utils'
+
+export interface UseTabsContext extends UseTabsReturn {}
+
+export const [TabsProvider, useTabsContext] = createContext<UseTabsContext>('TabsContext')