@sidekick-coder/zenith-kit 0.3.7 → 0.3.8

package/src/client/index.ts

@@ -0,0 +1,90 @@
+export * from './services/AuthService.ts'
+export { default as AuthService } from './services/AuthService.ts'
+export * from './services/FetchBrowserService.ts'
+export { default as FetchBrowserService } from './services/FetchBrowserService.ts'
+export * from './services/FetchNodeService.ts'
+export { default as FetchNodeService } from './services/FetchNodeService.ts'
+export * from './services/FetchService.ts'
+export { default as FetchService } from './services/FetchService.ts'
+export * from './services/LayoutService.ts'
+export { default as LayoutService } from './services/LayoutService.ts'
+export * from './services/LifecycleService.ts'
+export { default as LifecycleService } from './services/LifecycleService.ts'
+export * from './services/MenuService.ts'
+export { default as MenuService } from './services/MenuService.ts'
+export * from './services/RouterService.ts'
+export * from './services/ToastService.ts'
+export { default as ToastService } from './services/ToastService.ts'
+export * from './composables/useBreakpoint.ts'
+export * from './composables/useColor.ts'
+export * from './composables/useDashboard.ts'
+export * from './composables/useDashboardWidget.ts'
+export * from './composables/useFetchPagination.ts'
+export * from './composables/useForm.ts'
+export * from './composables/useHead.ts'
+export * from './composables/useLayoutOptions.ts'
+export * from './composables/useLoading.ts'
+export * from './composables/useMenu.ts'
+export * from './composables/useRouteQuery.ts'
+export * from './composables/useState.ts'
+export * from './facades/acl.ts'
+export { default as acl } from './facades/acl.ts'
+export * from './facades/auth.ts'
+export { default as auth } from './facades/auth.ts'
+export * from './facades/config.ts'
+export { default as config } from './facades/config.ts'
+export * from './facades/container.ts'
+export { default as container } from './facades/container.ts'
+export * from './facades/dashboardRegistry.ts'
+export { default as dashboardRegistry } from './facades/dashboardRegistry.ts'
+export * from './facades/emmitter.ts'
+export { default as emmitter } from './facades/emmitter.ts'
+export * from './facades/fetcher.ts'
+export { default as fetcher } from './facades/fetcher.ts'
+export * from './facades/layout.ts'
+export { default as layout } from './facades/layout.ts'
+export * from './facades/lifecycle.ts'
+export { default as lifecycle } from './facades/lifecycle.ts'
+export * from './facades/logger.ts'
+export { default as logger } from './facades/logger.ts'
+export * from './facades/menu.ts'
+export { default as menu } from './facades/menu.ts'
+export * from './facades/route.ts'
+export { default as route } from './facades/route.ts'
+export * from './facades/router.ts'
+export { default as router } from './facades/router.ts'
+export * from './facades/toast.ts'
+export { default as toast } from './facades/toast.ts'
+export * from './entities/Dashboard.ts'
+export { default as Dashboard } from './entities/Dashboard.ts'
+export * from './entities/DashboardWidget.ts'
+export { default as DashboardWidget } from './entities/DashboardWidget.ts'
+export * from './entities/DashboardWidgetData.ts'
+export { default as DashboardWidgetData } from './entities/DashboardWidgetData.ts'
+export * from './entities/DashboardWidgetDefinition.ts'
+export { default as DashboardWidgetDefinition } from './entities/DashboardWidgetDefinition.ts'
+export * from './entities/DashboardWidgetDefinitionChart.ts'
+export { default as DashboardWidgetDefinitionChart } from './entities/DashboardWidgetDefinitionChart.ts'
+export * from './entities/MenuItemEntity.ts'
+export { default as MenuItemEntity } from './entities/MenuItemEntity.ts'
+export * from './entities/ModuleEntity.ts'
+export { default as ModuleEntity } from './entities/ModuleEntity.ts'
+export * from './entities/PluginEntity.ts'
+export { default as PluginEntity } from './entities/PluginEntity.ts'
+export * from './utils/autoPages.ts'
+export * from './utils/createId.ts'
+export * from './utils/defineColumns.ts'
+export * from './utils/defineFormFields.ts'
+export * from './utils/fetcher.ts'
+export * from './utils/file.ts'
+export * from './utils/parseTo.ts'
+export * from './utils/toast.ts'
+export * from './utils/twMerge.ts'
+export * from './guards/authGuard.ts'
+export { default as authGuard } from './guards/authGuard.ts'
+export * from './guards/guestGuard.ts'
+export { default as guestGuard } from './guards/guestGuard.ts'
+export * from './guards/setupGuard.ts'
+export { default as setupGuard } from './guards/setupGuard.ts'
+export * from './registry/DashboardWidgetRegistry.ts'
+export { default as DashboardWidgetRegistry } from './registry/DashboardWidgetRegistry.ts'

package/src/client/layouts/AdminLayout.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { SidebarFooter } from '../components/ui/sidebar'
+import BaseLayout from './BaseLayout.vue'
+import auth from '#client/facades/auth.ts'
+import UserMenu from '#client/components/UserMenu.vue'
+import { useLayoutOptions } from '#client/composables/useLayoutOptions.ts'
+import { ref, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false, })
+
+const options = useLayoutOptions()
+const breadcrumbs = ref([])
+
+const userLinks = [
+    {
+        label: 'Preferences',
+        to: '/admin/menu/items',
+        icon: 'Settings',
+    }
+]
+
+function load(){
+    breadcrumbs.value = options.value.breadcrumbs || []
+}
+
+watch(options, load, { immediate: true, deep: true })
+
+</script>
+
+<template>
+    <BaseLayout layout-id="admin" home-path="/admin" title="Admin" :breadcrumbs="breadcrumbs">
+        <slot />
+
+        <template #sidebar-footer>
+            <SidebarFooter>
+                <UserMenu :links="userLinks" @logout="auth.logout" />
+            </SidebarFooter>
+        </template>
+    </BaseLayout>
+</template>

package/src/client/layouts/AdminLayoutDefaultMenu.vue

@@ -0,0 +1,171 @@
+<script lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import type MenuItem from '#client/entities/MenuItemEntity.ts'
+import { parseTo } from '#client/utils/parseTo.ts'
+
+</script>
+
+<script setup lang="ts">
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton,
+    SidebarMenuSubItem,
+    SidebarMenuSub
+} from '#client/components/ui/sidebar'
+import {
+    Collapsible,
+    CollapsibleTrigger,
+    CollapsibleContent
+} from '#client/components/ui/collapsible'
+import Icon from '#client/components/Icon.vue'
+
+const props = defineProps({
+    items: {
+        type: Array as () => MenuItem[],
+        required: true
+    },
+    open: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const groups = ref<GroupedMenu[]>([])
+
+interface GroupedMenu {
+    id: string
+    label: string
+    open: boolean
+    items: any[]
+}
+
+function load() {
+    const result = [] as GroupedMenu[]
+    const items = props.items
+
+    for (const item of items) {
+        const group = item.group || 'ungrouped'
+
+        let current = result.find(g => g.id === group)
+
+
+        if (!current) {
+            current = {
+                id: group,
+                label: group,
+                items: [],
+                open: true
+            }
+
+            result.push(current)
+        }
+
+        current.items.push(item)
+    }
+
+    groups.value = result
+}
+
+function hasChildren(item: MenuItem) {
+    return props.items.some(i => i.parent === item.id)
+}
+
+load()
+
+onMounted(() => {
+    // Initialize group open states from cache
+    groups.value.forEach(group => {
+        group.open = localStorage.getItem(`sidebar-group-open-${group.id}`) !== 'false'
+    })
+})
+
+watch(groups, (newGroups) => {
+    // Save group open states to cache
+    newGroups.forEach(group => {
+        localStorage.setItem(`sidebar-group-open-${group.id}`, group.open.toString())
+    })
+
+}, { deep: true })
+
+</script>
+
+<template>
+    <Collapsible
+        v-for="group in groups"
+        :key="group.id"
+        v-model:open="group.open"
+        class="group/collapsible"
+    >
+        <SidebarGroup :class="open ? '' : 'py-0'">
+            <CollapsibleTrigger as-child>
+                <SidebarGroupLabel
+                    class="p-0"
+                    :class="open && group.label !== 'ungrouped' ? '' : 'hidden'"
+                >
+                    <div class="cursor-pointer hover:bg-muted px-2 py-1 rounded-md flex items-center gap-2">
+                        {{ group.label }}
+                    </div>
+                </SidebarGroupLabel>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+                <SidebarMenu>
+                    <template
+                        v-for="(item, index) in group.items"
+                        :key="index"
+                    >
+                        <Collapsible
+                            v-if="hasChildren(item) && open"
+                            default-open
+                            class="group/collapsible-2"
+                        >
+                            <SidebarMenuItem>
+                                <CollapsibleTrigger as-child>
+                                    <SidebarMenuButton :tooltip="item.label">
+                                        <Icon :name="item.icon || 'heroicons:cube'" />
+                                        <span>{{ item.label }}</span>
+                                    </SidebarMenuButton>
+                                </CollapsibleTrigger>
+                                <CollapsibleContent>
+                                    <SidebarMenuSub>
+                                        <SidebarMenuSubItem>
+                                            <SidebarMenuButton
+                                                v-for="child in items.filter((i: MenuItem) => i.parent === item.id)"
+                                                :key="child.label"
+                                                as-child
+                                                :is-active="child.to === $route.path"
+                                                :tooltip="child.label"
+                                            >
+                                                <RouterLink :to="parseTo(child.to ?? '#')">
+                                                    {{ child.label }}
+                                                </RouterLink>
+                                            </SidebarMenuButton>
+                                        </SidebarMenuSubItem>
+                                    </SidebarMenuSub>
+                                </CollapsibleContent>
+                            </SidebarMenuItem>
+                        </Collapsible>
+
+                        <SidebarMenuItem v-else>
+                            <SidebarMenuButton
+                                as-child
+                                :is-active="item.to === $route.path"
+                                :tooltip="item.label"
+                            >
+                                <RouterLink
+                                    :to="parseTo(item.to ?? '#')"
+                                    :target="item.target ?? '_self'"
+                                >
+                                    <Icon :name="item.icon || 'heroicons:cube'" />
+                                    <span>{{ item.label }}</span>
+                                </RouterLink>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </template>
+                </SidebarMenu>
+            </CollapsibleContent>
+        </SidebarGroup>
+    </Collapsible>
+</template>

package/src/client/layouts/AdminLayoutPlainMenu.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { computed } from 'vue'
+import type MenuItem from '#client/entities/MenuItemEntity.ts'
+import { parseTo } from '#client/utils/parseTo.ts';
+
+</script>
+
+<script setup lang="ts">
+import {
+    SidebarGroup,
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+    SidebarRail
+} from '#client/components/ui/sidebar'
+
+defineOptions({
+    inheritAttrs: false
+})
+
+const props = defineProps({
+    items: {
+        type: Array as () => MenuItem[],
+        required: true
+    }
+})
+
+interface GroupedMenu {
+    id: string
+    label: string
+    items: MenuItem[]
+}
+
+const groupedItems = computed(() => {
+    const result = [] as GroupedMenu[]
+
+    for (const item of props.items) {
+        const groupName = item.group || $t('General')
+
+        let group = result.find(g => g.id === groupName)
+
+        if (!group) {
+            group = {
+                id: groupName,
+                label: groupName,
+                items: []
+            }
+            result.push(group)
+        }
+
+        group.items.push(item)
+    }
+
+    return result
+})
+</script>
+
+<template>
+    <SidebarGroup>
+        <SidebarMenu>
+            <SidebarMenuItem
+                v-for="group in groupedItems"
+                :key="group.id"
+            >
+                <SidebarMenuButton class="font-medium">
+                    {{ group.label }}
+                </SidebarMenuButton>
+                <SidebarMenuSub v-if="group.items.length">
+                    <SidebarMenuSubItem
+                        v-for="item in group.items"
+                        :key="item.id"
+                    >
+                        <SidebarMenuSubButton
+                            as-child
+                            :is-active="item.to === $route.path"
+                        >
+                            <RouterLink :to="parseTo(item.to ?? '#')">
+                                {{ item.label }}
+                            </RouterLink>
+                        </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                </SidebarMenuSub>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    </SidebarGroup>
+    <SidebarRail />
+</template>

package/src/client/layouts/BaseLayout.vue

@@ -0,0 +1,195 @@
+<script lang="ts">
+export interface LayoutBreadcrumbItem {
+    label: string
+    to?: string
+}
+</script>
+<script setup lang="ts">
+import {
+    ref,
+} from 'vue'
+import type { PropType } from 'vue'
+import { truncate } from 'lodash-es'
+import { useHead } from '@unhead/vue'
+import menu from '#client/facades/menu.ts'
+import route from '#client/facades/route.ts'
+import AdminLayoutDefaultMenu from './AdminLayoutDefaultMenu.vue'
+import AdminLayoutPlainMenu from './AdminLayoutPlainMenu.vue'
+import Logo from '#client/components/Logo.vue'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from '#client/components/ui/breadcrumb/index.ts'
+import {
+    Sidebar,
+    SidebarInset,
+    SidebarTrigger,
+    SidebarProvider,
+    SidebarHeader,
+    SidebarContent,
+    SidebarFooter,
+    SidebarMenu,
+    SidebarMenuItem,
+    SidebarMenuButton
+} from '#client/components/ui/sidebar/index.ts'
+import Icon from '#client/components/Icon.vue'
+import { cn } from '#client/lib/utils.ts'
+import UserMenu from '#client/components/UserMenu.vue'
+import ClientOnly from '#client/components/ClientOnly.vue'
+import { parseTo } from '#client/utils/parseTo.ts'
+
+defineOptions({ inheritAttrs: false, })
+
+useHead({ bodyAttrs: { class: 'admin', }, })
+
+const open = ref(true)
+
+const props = defineProps({
+    layoutId: {
+        type: String,
+        required: true,
+    },
+    padding: {
+        type: Boolean,
+        default: true,
+    },
+    hideBreadcrumbs: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: 'Dashboard',
+    },
+    icon: {
+        type: String,
+        default: null
+    },
+    menuVariant: {
+        type: String as PropType<'default' | 'plain'>,
+        default: 'default',
+    },
+    homePath: {
+        type: String,
+        default: '/',
+    },
+    contentClass: {
+        type: String,
+        default: '',
+    },
+    userMenuLinks: {
+        type: Array as PropType<{ label: string; to: string; icon?: string }[]>,
+        default: () => [],
+    },
+})
+
+const breadcrumbs = defineModel('breadcrumbs', {
+    type: Array as () => LayoutBreadcrumbItem[],
+    default: () => [],
+})
+
+const items = ref<any[]>([])
+
+items.value = menu.list({
+    layout: props.layoutId,
+    allowed: true,
+})
+</script>
+
+<template>
+    <SidebarProvider v-model:open="open">
+        <Sidebar collapsible="icon" variant="inset">
+            <slot name="header">
+                <SidebarHeader>
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton size="lg" as-child>
+                                <router-link :to="parseTo(homePath)">
+                                    <div v-if="icon"
+                                        class="size-8 bg-primary text-primary-foreground flex items-center justify-center rounded-md mr-2">
+                                        <Icon :name="icon" class="text-lg" />
+                                    </div>
+
+                                    <Logo v-else />
+
+                                    <span class="font-medium">
+                                        {{ title }}
+                                    </span>
+                                </router-link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarHeader>
+            </slot>
+
+            <SidebarContent class="gap-0">
+                <div v-if="!items.length">
+                    <p class="p-4 text-sm text-muted-foreground">
+                        {{ $t('No menu items available.') }}
+                    </p>
+                </div>
+
+                <AdminLayoutDefaultMenu v-else-if="menuVariant === 'default'" :items="items" :open="open" />
+
+                <AdminLayoutPlainMenu v-else-if="menuVariant === 'plain'" :items="items" :open="open" />
+            </SidebarContent>
+
+            <slot name="sidebar-footer" :open>
+                <SidebarFooter>
+                    <ClientOnly>
+                        <UserMenu :links="userMenuLinks" />
+                    </ClientOnly>
+                </SidebarFooter>
+            </slot>
+        </Sidebar>
+
+        <SidebarInset variant="sidebar">
+
+            <header v-if="!hideBreadcrumbs && breadcrumbs?.length"
+                class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
+                <div class="flex items-center gap-2">
+                    <SidebarTrigger class="-ml-1" />
+
+                    <Breadcrumb v-if="breadcrumbs?.length">
+                        <BreadcrumbList class="md:hidden!">
+                            <BreadcrumbItem>
+                                <BreadcrumbPage>{{ truncate(breadcrumbs.at(-1)?.label) }}</BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                        <BreadcrumbList class="hidden! md:flex!">
+                            <template v-for="(item, index) in breadcrumbs" :key="index">
+                                <BreadcrumbItem>
+                                    <template v-if="index === breadcrumbs.length - 1">
+                                        <BreadcrumbPage>{{ truncate(item.label) }}</BreadcrumbPage>
+                                    </template>
+                                    <template v-else>
+                                        <BreadcrumbLink as-child>
+                                            <RouterLink :to="parseTo(item.to!)">
+                                                {{ truncate(item.label) }}
+                                            </RouterLink>
+                                        </BreadcrumbLink>
+                                    </template>
+                                </BreadcrumbItem>
+                                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+                            </template>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </div>
+            </header>
+
+            <div>
+                <div :class="cn(
+                    'dashboard-layout-content h-full overflow-auto lg:max-w-[calc(100dvw-8px-var(--sidebar-width))] group-has-data-[collapsible=icon]/sidebar-wrapper:max-w-[calc(100dvw-var(--sidebar-width-icon))]',
+                    padding ? 'p-5' : '',
+                    contentClass
+                )">
+                    <slot />
+                </div>
+            </div>
+        </SidebarInset>
+    </SidebarProvider>
+</template>

package/src/client/layouts/SettingLayout.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { SidebarFooter } from '../components/ui/sidebar'
+import BaseLayout from './BaseLayout.vue'
+import auth from '#client/facades/auth.ts'
+import UserMenu from '#client/components/UserMenu.vue';
+
+const userLinks = [
+    {
+        label: 'Preferences',
+        to: '/admin/menu/items',
+        icon: 'Settings',
+    }
+]
+
+</script>
+
+<template>
+    <BaseLayout
+        layout-id="setting"
+        home-path="/admin"
+        title="Settings"
+        menu-variant="plain"
+    >
+        <slot /> 
+
+        <template #sidebar-footer>
+            <SidebarFooter>
+                <UserMenu
+                    :links="userLinks"
+                    @logout="auth.logout" 
+                />
+            </SidebarFooter>
+        </template>
+    </BaseLayout>>
+</template>

package/src/client/lib/utils.ts

@@ -0,0 +1,7 @@
+import {  clsx } from 'clsx'
+import type { ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

package/src/client/registry/DashboardWidgetRegistry.ts

@@ -0,0 +1,20 @@
+import type DashboardWidgetDefinition from '#client/entities/DashboardWidgetDefinition.ts'
+
+export default class DashboardWidgetRegistry {
+    public static __container_entry_key = 'DashboardWidgetRegistry'
+    private definitions: Map<string, DashboardWidgetDefinition> = new Map()
+
+    public register(...definition: DashboardWidgetDefinition[]) {
+        for (const def of definition) {
+            this.definitions.set(def.id, def)
+        }
+    }
+
+    public get(id: string): DashboardWidgetDefinition | null {
+        return this.definitions.get(id) || null
+    }
+
+    public list(): DashboardWidgetDefinition[] {
+        return Array.from(this.definitions.values())
+    }
+}

package/src/client/services/AuthService.ts

@@ -0,0 +1,25 @@
+import $fetch from '#client/facades/fetcher.ts'
+import User from '#shared/entities/UserEntity.ts'
+
+interface LogoutOptions {
+    redirect?: string
+}
+
+export default class AuthService {
+    public static __container_entry_key = 'AuthService'
+    public user: User | null
+
+    constructor(data: Partial<AuthService> = {}) {
+        this.user = data.user || null
+    }
+
+    public async logout(options?: LogoutOptions): Promise<void> {
+        const [error] = await $fetch.try('/auth/logout', { method: 'POST' })
+
+        if (error) {
+            return
+        }
+
+        window.location.href = options?.redirect || '/'
+    }
+}