@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,61 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/tabs";
+const appConfig = _appConfig;
+const tabs = tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} });
+</script>
+
+<script setup lang="ts" generic="T extends TabsItem">
+import { computed, toRef } from 'vue'
+import { defu } from 'defu'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  content: true,
+  defaultValue: '0',
+  orientation: 'horizontal'
+})
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
+const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
+
+const ui = computed(() => tabs({
+  color: props.color,
+  variant: props.variant,
+  size: props.size,
+  orientation: props.orientation
+}))
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
+        <slot name="leading" :item="item" :index="index">
+          <UAvatar v-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        </slot>
+
+        <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ item.label }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" />
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="!!content">
+      <TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>