@sidekick-coder/zenith-kit 0.3.7 → 0.3.8

package/src/client/composables/useFetchPagination.ts

@@ -0,0 +1,149 @@
+import { computed, ref, toRef, watch } from 'vue'
+import type { MaybeRef, Ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { useState } from './useState.ts'
+import type Pagination from '#shared/entities/PaginationEntity.ts'
+import $fetch from '#client/facades/fetcher.ts'
+
+export interface UseFetchPaginationOptions {
+    key?: string
+    query?: MaybeRef<Record<string, any>>
+    page?: MaybeRef<number>
+    serialize?: (item: any) => any
+    refine?: (items: any[]) => any[]
+    limit?: number
+    orderBy?: string | string[] | null
+    orderDirection?: 'asc' | 'desc' | ('asc' | 'desc')[] | null
+    debounce?: number
+    immediate?: boolean
+}
+
+const hydrated = new Set<string>()
+
+export function useFetchPagination<T = any>(url: string, options: UseFetchPaginationOptions = {}) {
+    const key = options.key || url
+
+    const response = useState<Pagination>(key, {
+        default: () => ({
+            items: [],
+            page: 1,
+            total: 0,
+            total_pages: 1,
+        })
+    })
+
+    const loading = ref(false)
+
+    const page = toRef(options.page || 1) as Ref<number>
+    const query = toRef(options.query || {}) as Ref<Record<string, any>>
+    const limit = toRef(options.limit || 10) as Ref<number>
+    const orderBy = toRef(options.orderBy || null) as Ref<string | string[] | null>
+    const orderDirection = toRef(options.orderDirection || null) as Ref<'asc' | 'desc' | ('asc' | 'desc')[] | null>
+
+    const total = computed(() => response.value.total)
+    const totalPages = computed(() => response.value.total_pages)
+    const items = computed(() => {
+        let items = Array.isArray(response.value.items) ? response.value.items : []
+
+        if (options.refine) {
+            items = options.refine(items)
+        }
+
+        if (options.serialize) {
+            return items.map(i => options.serialize!(i)) as T[]
+        }
+
+        return items as T[]
+    })
+
+    async function load() {
+        if (loading.value) return
+
+        loading.value = true
+
+        const params = JSON.parse(JSON.stringify({
+            ...query.value,
+            page: page.value,
+            limit: limit.value,
+            orderBy: orderBy.value ? orderBy.value : undefined,
+            orderDirection: orderDirection.value ? orderDirection.value : undefined,
+        }))
+
+        const [error, result] = await $fetch.try<Pagination>(url, {
+            method: 'GET',
+            query: params
+        })
+
+        if (error) {
+            loading.value = false
+            console.error(error)
+            return
+        }
+
+        response.value = result
+
+        if (import.meta.env.SSR) {
+            loading.value = false
+            return
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 800))
+
+        loading.value = false
+    }
+
+    async function reset() {
+        if (page.value === 1) {
+            await load()
+            return
+        }
+
+        page.value = 1
+    }
+
+    function onQueryChange(newData: Record<string, any>, oldData: Record<string, any>) {
+        const isEqual = JSON.stringify(newData) === JSON.stringify(oldData)
+
+        if (!isEqual) {
+            reset()
+        }
+    }
+
+    watch([page, limit], load)
+    watch([orderBy, orderDirection], reset, { deep: true })
+
+    watchDebounced(
+        () => JSON.parse(JSON.stringify(query.value)),
+        onQueryChange,
+        {
+            debounce: options.debounce || 1000
+        }
+    )
+
+
+    async function hydrate() {
+        if (!hydrated.has(key) && items.value.length) {
+            hydrated.add(key)
+            return
+        }
+
+        hydrated.add(key)
+
+        await load()
+    }
+
+    return {
+        page,
+        limit,
+        orderBy,
+        orderDirection,
+        total,
+        totalPages,
+        items,
+        loading,
+        load,
+        reset,
+        query,
+        hydrate
+    }
+}

package/src/client/composables/useForm.ts

@@ -0,0 +1,24 @@
+import { type ValibotObjectSchema, type ValibotSchema, type ValidatePayload, type ValidatorResult } from '#shared/index.ts';
+import { toTypedSchema as  veeValidateToTypedSchema } from '@vee-validate/valibot';
+import { useForm as useVeeValidateForm, type FormContext, type FormOptions, type GenericObject } from 'vee-validate';
+
+
+
+export interface ValibotFormOptions<T extends ValibotSchema = ValibotSchema> 
+    extends Omit<FormOptions<ValidatePayload<T>, ValidatorResult<T>>, 'validationSchema'> {}
+
+export interface ValibotFormResultObject<T extends ValibotObjectSchema>
+    extends GenericObject,
+    FormContext<ValidatorResult<T>>
+    {}
+
+export const useForm = useValibotForm;
+
+export const toTypedSchema = veeValidateToTypedSchema;
+
+export function useValibotForm<T extends ValibotObjectSchema = ValibotObjectSchema>(schema: T, options: ValibotFormOptions<T> = {}): FormContext<ValidatorResult<T>> {
+    return useVeeValidateForm({
+        ...options,
+        validationSchema: veeValidateToTypedSchema(schema as any),
+    }) as any
+}

package/src/client/composables/useHead.ts

@@ -0,0 +1,13 @@
+import { useHead as unheadUseHead, useSeoMeta as unheadUseSeoMeta } from '@unhead/vue'
+
+const zenithUseHead = (...args: any) => {
+    return unheadUseHead(...args)
+}
+
+const zenithUseSeoMeta = (...args: any) => {
+    return unheadUseSeoMeta(...args)
+}
+
+export const useHead = zenithUseHead as typeof unheadUseHead
+export const useSeoMeta= zenithUseSeoMeta as typeof unheadUseSeoMeta
+

package/src/client/composables/useLayoutOptions.ts

@@ -0,0 +1,16 @@
+import emmitter from "#client/facades/emmitter.ts"
+import layout from "#client/facades/layout.ts"
+import { ref } from "vue"
+
+export function useLayoutOptions() {
+    const options = ref(layout.getOptions())
+
+    const refresh = () => {
+        options.value = layout.getOptions()
+    }
+
+    emmitter.on('layout:change', refresh)
+    emmitter.on('layout:set-options', refresh)
+
+    return options
+}

package/src/client/composables/useLoading.ts

@@ -0,0 +1,38 @@
+import { computed, ref  } from 'vue'
+import type { Ref } from 'vue'
+
+interface Options {
+    timeout?: number
+}
+
+interface LoadingRef extends Ref<boolean> {
+    set: (value: boolean) => void
+}
+
+export function useLoading(defaultValue = false, options?: Options) {
+    const state = ref(defaultValue)
+    const timeout = ref(options?.timeout ?? 500)
+
+    function set(value: boolean) {
+        state.value = value
+    }
+
+    const loading = computed({
+        get() {
+            return state.value
+        },
+        set(value: boolean) {
+            if (value) {
+                state.value = true
+                return
+            } 
+
+            setTimeout(() => set(false), timeout.value)
+        }
+    })
+
+    const loadingRef: LoadingRef = Object.assign(loading, { set })
+
+    return loadingRef
+
+}

package/src/client/composables/useMenu.ts

@@ -0,0 +1,86 @@
+import { computed, ref } from 'vue'
+
+export interface MenuBase {
+    id: string
+    label: string;
+    order?: number;
+}
+
+export interface MenuSingle  extends MenuBase {
+    icon: string;
+    to: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export interface MenuWithChildren extends MenuBase {
+    icon: string;
+    children: Omit<MenuSingle, 'icon'>[];
+}
+
+export interface MenuGroup extends MenuBase {
+    group: boolean;
+    items: MenuItem[];
+}
+
+export interface MenuItem {
+    id: string
+    label: string;
+    to?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    group?: string
+    order?: number;
+    icon?: string
+    parent?: string
+    layout?: string
+}
+
+export type UseMenu = ReturnType<typeof useMenu>
+
+const items = ref<Map<string, MenuItem>>(new Map())
+
+export function useMenu() {
+    function add(...item: MenuItem[]) {
+        item.forEach(i => {
+            if (!i.layout) {
+                i.layout = 'admin'
+            }
+            
+            items.value.set(i.id, i)
+        })
+    }
+
+    function remove(item: MenuItem | MenuItem['id']) {
+
+        if (typeof item === 'string') {
+            items.value.delete(item)
+        }
+    }
+
+    function removeGroup(groupId: string) {
+        Array.from(items.value.values())
+            .filter(i => i.group === groupId || i.parent === groupId)
+            .forEach(i => items.value.delete(i.id))
+    }
+
+    function removeMany(itemIds: string[]) {
+        itemIds.forEach(id => remove(id))
+    }
+
+    function removeManyGroup(groupIds: string[]) {
+        groupIds.forEach(id => removeGroup(id))
+    }
+
+    function clear() {
+        items.value.clear()
+    }
+
+    return {
+        items: computed(() => Array.from(items.value.values())),
+        add,
+        remove,
+        removeGroup,
+        removeMany,
+        removeManyGroup,
+        clear
+    }
+}

package/src/client/composables/useRouteQuery.ts

@@ -0,0 +1,15 @@
+import route from '#client/facades/route.ts'
+import router from '#client/facades/router.ts'
+
+import { useRouteQuery as vueUserRouteQuery } from '@vueuse/router'
+
+const zenithUseRouteQuery= (key: any, defaultValue: any, options: any) => {
+    return vueUserRouteQuery(key, defaultValue, {
+        route,
+        router,
+        ...options
+    })
+}
+
+export const useRouteQuery = zenithUseRouteQuery as typeof vueUserRouteQuery
+

package/src/client/composables/useState.ts

@@ -0,0 +1,44 @@
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import di from '#client/facades/container.ts'
+
+export interface UseStateOptions {
+    default?: () => any
+    transform?: (value: any) => any
+}
+
+export function useState<T>(key: string, options?: UseStateOptions): Ref<T> {
+    const refs = di.get<Record<string, any>>('state')
+
+    let value = refs[key]
+
+    if (!value && options?.default !== undefined) {
+        value = options.default()
+    }
+
+    if (value && options?.transform) {
+        value = options.transform(value)
+    }
+    
+    // Implementation here
+    const state = ref<T>(value)
+
+    const update = (newValue: any) => {
+        refs[key] = newValue
+        
+        di.set('state', refs)
+    }
+    
+    watch(state, update, { deep: true })
+
+    // Logic to initialize and manage state
+    return computed<T>({
+        get: () => state.value,
+        set: (newValue: T) => {
+            state.value = newValue
+            
+            update(newValue)
+        }
+    })
+}

package/src/client/css/styles.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.21 0.006 285.885);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.577 0.245 27.325);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.705 0.015 286.067);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.141 0.005 285.823);
+    --sidebar-primary: oklch(0.21 0.006 285.885);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-border: oklch(0.92 0.004 286.32);
+    --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.141 0.005 285.823);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.141 0.005 285.823);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.396 0.141 25.723);
+    --destructive-foreground: oklch(0.637 0.237 25.331);
+    --border: oklch(0.274 0.006 286.033);
+    --input: oklch(0.274 0.006 286.033);
+    --ring: oklch(0.442 0.017 285.786);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.274 0.006 286.033);
+    --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--reka-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--reka-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+
+* {
+    @apply border-border outline-ring/50;
+}
+
+body {
+    @apply bg-background text-foreground;
+}
+
+button,
+a {
+    @apply cursor-pointer;
+}
+
+iconify-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}

package/src/client/entities/Dashboard.ts

@@ -0,0 +1,115 @@
+import EmmitterService from '#shared/services/EmmitterService.ts'
+import DashboardWidgetData from './DashboardWidgetData'
+import DashboardWidget from './DashboardWidget'
+import type { DashboardSchema } from '#shared/schemas/dashboardSchema.ts'
+
+export interface DashboardOptions {
+    dashboard: DashboardSchema
+    widgets?: DashboardWidgetData[]
+}
+
+export default class Dashboard {
+    public name: DashboardSchema['name'] = ''
+    public description: DashboardSchema['description'] = ''
+    public widgets: DashboardWidget[] = []
+    public emmitter: EmmitterService
+    public containerWidth: number = 0
+
+    constructor() {
+        this.emmitter = new EmmitterService()
+    }
+
+    public setName(name: string) {
+        this.name = name
+        return this
+    }
+
+    public setDescription(description: string) {
+        this.description = description
+        return this
+    }
+
+    public setContainerWidth(width: number) {
+        this.containerWidth = width
+        return this
+    }
+
+    public setWidgets(widgets: DashboardWidgetData[]) {
+
+        this.widgets = []
+
+        for (const w of widgets) {
+            const widget = DashboardWidget.fromData(w)
+
+            widget.setEmmitter(this.emmitter)
+
+            this.widgets.push(widget)
+        }
+
+        return this
+    }
+
+    public findLastRow(): number {
+        let result = 0 
+
+        for (const widget of this.widgets) {
+            const rows = widget.rows?.base ?? 0
+            const y = widget.y?.base ?? 0
+
+            const bottom = y + rows
+
+            if (bottom > result) {
+                result = bottom
+            }
+        }
+        
+        return result
+
+    }
+
+    public addWidget(payload: Partial<DashboardWidgetData> = {}) {
+        if (!payload.columns) {
+            payload.columns = { base: 4, }
+        }
+
+        if (!payload.rows) {
+            payload.rows = { base: 4, }
+        }
+
+        if (!payload.x) {
+            payload.x = { base: 0, }
+        }
+
+        if (!payload.y) {
+            payload.y = { base: this.findLastRow(), }
+        }
+
+        const data = new DashboardWidgetData(payload)
+
+        const widget = DashboardWidget.fromData(data)
+
+        widget.setEmmitter(this.emmitter)
+
+        this.widgets.push(widget)
+    }
+
+    public removeWidget(index: number) {
+        this.widgets = this.widgets.filter((_, i) => i !== index)
+    }
+
+    public removeWidgetById(id: string) {
+        this.widgets = this.widgets.filter((w) => w.id !== id)
+    }
+
+    public updateWidget(index: number, widget: DashboardWidget) {
+        this.widgets = this.widgets.map((w, i) => i === index ? widget : w)
+    }
+
+    public duplicateWidget(index: number) {
+        const copy: DashboardWidget = JSON.parse(JSON.stringify(this.widgets[index]))
+
+        const updated = [...this.widgets]
+
+        updated.splice(index + 1, 0, copy)
+    }
+}