mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-17 20:52:14 +01:00
refactor to shadcn components, dynamically load extension frontend
add jetstream permissions, add dynamic inertia module loading, add shadcn components, change modals and dropdowns to shadcn dismissable layer,
This commit is contained in:
@@ -1,9 +1,17 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { Tabs, TabsList } from '@/Components/ui/tabs'
|
||||
|
||||
defineProps<{
|
||||
defaultValue?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-0.5 sm:space-x-1">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<Tabs :default-value="defaultValue" class="w-full">
|
||||
<TabsList class="flex items-center space-x-0.5 sm:space-x-1">
|
||||
<slot></slot>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { computed } from 'vue';
|
||||
import { TabsTrigger } from '@/Components/ui/tabs'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
active?: boolean;
|
||||
}>();
|
||||
|
||||
const activeClass = computed(() => {
|
||||
if (props.active) {
|
||||
return 'bg-tab-background border border-tab-border text-text-primary font-semibold';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
value: string
|
||||
class?: string
|
||||
icon?: Component
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
role="tab"
|
||||
:class="
|
||||
twMerge(
|
||||
'rounded-md px-2 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-medium hover:text-text-primary focus-visible:outline-none',
|
||||
activeClass
|
||||
)
|
||||
">
|
||||
<TabsTrigger
|
||||
:value="value"
|
||||
:icon="icon"
|
||||
:class="twMerge('rounded-md px-2 sm:px-3 py-1 border sm:py-1.5 text-xs sm:text-sm font-medium text-text-tertiary hover:text-text-primary focus-visible:outline-none data-[state=active]:bg-tab-background data-[state=active]:border-input-border data-[state=active]:text-text-primary border-tab-border', props.class)">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</TabsTrigger>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user