adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-14 03:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move tabs and TabBar into UI package

Browse Source
This commit is contained in:
Gregor Vostrak
2026-03-23 17:25:26 +01:00
parent 5c6d84dc38
commit c19a0f9acc
35 changed files with 103 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/Components/ui/tabs/Tabs.vue
View File

@@ -1,15 +0,0 @@
<script setup lang="ts">
import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
const props = defineProps<TabsRootProps>();
const emits = defineEmits<TabsRootEmits>();
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<TabsRoot v-bind="forwarded">
<slot />
</TabsRoot>
</template>

26
resources/js/Components/ui/tabs/TabsContent.vue
View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
import { TabsContent, type TabsContentProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
</script>
<template>
<TabsContent
:class="
cn(
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
props.class
)
"
v-bind="delegatedProps">
<slot />
</TabsContent>
</template>

21
resources/js/Components/ui/tabs/TabsList.vue
View File

@@ -1,21 +0,0 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
import { TabsList, type TabsListProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
</script>
<template>
<TabsList
v-bind="delegatedProps"
:class="cn('inline-flex items-center rounded-lg text-muted-foreground', props.class)">
<slot />
</TabsList>
</template>

35
resources/js/Components/ui/tabs/TabsTrigger.vue
View File

@@ -1,35 +0,0 @@
<script setup lang="ts">
import { cn } from '@/lib/utils';
import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes, type Component } from 'vue';
const props = defineProps<
TabsTriggerProps & { class?: HTMLAttributes['class']; icon?: Component }
>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<TabsTrigger
v-bind="forwardedProps"
:class="
cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
props.class
)
">
<div v-if="props.icon" class="mr-2 h-4 w-4">
<props.icon />
</div>
<span class="truncate">
<slot />
</span>
</TabsTrigger>
</template>