@sidekick-coder/zenith-kit 0.3.6 → 0.3.8

package/src/client/components/PageCrud.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { ref  } from 'vue'
+import type { PropType } from 'vue'
+import DataTable from '#client/components/DataTable.vue'
+import ClientOnly from '#client/components/ClientOnly.vue'
+import ZButton from '#client/components/ZButton.vue'
+import Icon from '#client/components/Icon.vue'
+import ZAlertButton from '#client/components/ZAlertButton.vue'
+import DialogForm from '#client/components/DialogForm.vue'
+import PageTitle from '#client/components/PageTitle.vue'
+import PageSubtitle from '#client/components/PageSubtitle.vue'
+
+defineProps({
+    title: {
+        type: String,
+        default: () => $t('Items')
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    serialize: {
+        type: Function as PropType<(row: any) => T>,
+        default: (row: any) => row as T,
+    },
+    fetch: {
+        type: String,
+        default: null
+    },
+    fetchDestroy: {
+        type: String,
+        default: null
+    },
+    fetchUpdateMethod: {
+        type: String,
+        default: 'PUT'
+    },
+    viewTo: {
+        type: String,
+        default: null
+    },
+    actions: {
+        type: Array as PropType<Array<'create' | 'edit' | 'destroy'>> ,
+        default: () => ['create', 'edit', 'destroy'],
+    },
+})
+
+const tableRef = ref()
+
+const fetchQuery = defineModel('fetchQuery', {
+    type: Object as PropType<Record<string, any>>,
+    default: null
+})
+
+const loading = defineModel('loading', {
+    type: Boolean,
+    default: false,
+})
+
+const columns = defineModel('columns', {
+    type: Array as PropType<Array<any>>,
+    default: () => [],
+})
+
+const fields = defineModel('fields', {
+    type: Object,
+    default: () => ({}),
+})
+
+const fieldsEdit = defineModel('fieldsEdit', {
+    type: Object,
+    default: null,
+})
+
+function parse(url: string, row: any): string {
+    return url.replace(/:([a-zA-Z_]+)/g, (_, key) => row[key]) as string
+}
+
+function load(){
+    tableRef.value?.load()
+}
+
+defineExpose({
+    load,
+})
+
+</script>
+
+<template>
+    <div>
+        <div class="flex mb-4 justify-between items-center gap-4">
+            <div class="flex-1">
+                <PageTitle>
+                    {{ title }}
+                </PageTitle>
+                <PageSubtitle v-if="description">
+                    {{ description }}
+                </PageSubtitle>
+            </div>
+            <div class="flex items-center gap-2">
+                <ZButton
+                    variant="outline"
+                    size="icon"
+                    :disabled="loading"
+                    @click="load"
+                >
+                    <Icon
+                        name="RotateCcw"
+                        :class="{ 'animate-spin': loading }"
+                    />
+                </ZButton>
+                <ClientOnly v-if="actions.includes('create')">
+                    <DialogForm 
+                        :fetch
+                        :title="$t('Add new')"
+                        :description="$t('Fill in the details below to add a new repository')"
+                        :fields="fields"
+                        @submit="load"
+                    >
+                        <ZButton>
+                            {{ $t('Add new') }}
+                        </ZButton>
+                    </DialogForm>
+                </ClientOnly>
+            </div>
+        </div>
+
+        <slot name="header-append" />
+
+        <DataTable
+            v-if="fetch"
+            ref="tableRef"
+            v-model:fetch-query="fetchQuery"
+            v-model:loading="loading"
+            v-model:columns="columns"
+            :fetch="fetch"
+        >
+            <template
+                v-for="c in columns.filter((c: any) => c.id !== 'actions')"
+                #[`row-${c.id}`]="slotProps"
+                :key="c.id"
+            >
+                <slot
+                    :name="`row-${c.id}`"
+                    v-bind="slotProps"
+                />
+            </template>
+
+            <template #row-actions="{ row }">
+                <div class="flex items-center gap-2 justify-end">
+                    <slot
+                        name="prepend-actions"
+                        :row="row"
+                    />
+
+                    <ZButton
+                        v-if="viewTo"
+                        size="icon"
+                        variant="ghost"
+                        :to="parse(viewTo, row)"
+                    >
+                        <Icon name="Eye" />
+                    </ZButton>
+
+                    <DialogForm 
+                        v-if="actions.includes('edit')"
+                        :fetch="parse(fetch + '/:id', row)"
+                        :method="fetchUpdateMethod"
+                        :title="$t('Edit')"
+                        :description="$t('Fill in the details below to edit')"
+                        :fields="fieldsEdit || fields"
+                        :values="row"
+                        @submit="load"
+                    >
+                        <ZButton
+                            size="icon"
+                            variant="ghost"
+                        >
+                            <Icon name="Edit" />
+                        </ZButton>
+                    </DialogForm>
+
+                    <ZAlertButton 
+                        v-if="actions.includes('destroy')"
+                        variant="ghost"
+                        size="sm"
+                        :fetch="parse(fetchDestroy || fetch, row)"
+                        fetch-method="DELETE"
+                        @fetched="load"
+                    >
+                        <Icon name="trash" />
+                    </ZAlertButton>
+                </div>
+            </template>
+        </DataTable>
+    </div>
+</template>

package/src/client/components/PageSubtitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps({
+    tag: {
+        type: String as () => keyof HTMLElementTagNameMap,
+        default: 'h2'
+    }
+})
+</script>
+<template>
+    <component
+        :is="tag"
+        class="text-muted-foreground text-base"
+    >
+        <slot />
+    </component>
+</template>

package/src/client/components/PageTable.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { $fetch } from '#client/utils/fetcher.ts'
+import AdminLayout from '#client/layouts/AdminLayout.vue'
+
+const props = defineProps({
+    url: {
+        type: String,
+        required: true,
+    },
+})
+
+const items = ref<any[]>([])
+
+async function load(){
+    const response = await $fetch.get(props.url)
+
+    items.value = response.data
+}
+
+await load()
+</script>
+
+<template>
+    <AdminLayout>
+        <div>items {{ items.length }}</div>
+        <div
+            v-for="item in items"
+            :key="item.id"
+        >
+            {{ item.id }}
+        </div>
+    </AdminLayout>
+</template>

package/src/client/components/PageTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps({
+    tag: {
+        type: String as () => keyof HTMLElementTagNameMap,
+        default: 'h1'
+    }
+})
+</script>
+<template>
+    <component
+        :is="tag"
+        class="text-2xl font-bold"
+    >
+        <slot />
+    </component>
+</template>

package/src/client/components/StringListInput.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { X } from 'lucide-vue-next'
+import Icon from './Icon.vue'
+import { Input } from '#client/components/ui/input'
+import { Button } from '#client/components/ui/button'
+import { cn } from '#client/lib/utils'
+
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const model = defineModel({
+    type: Array as () => string[],
+    default: () => [],
+})
+
+defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: null,
+    },
+})
+
+const inputValue = ref('')
+
+function add() {
+    const v = inputValue.value.trim()
+    
+    if (!v) return
+    
+    model.value = [...model.value, v]
+
+    inputValue.value = ''
+}
+
+function remove(index: number) {
+    model.value = model.value.filter((_, i) => i !== index)
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <!-- Input + Add button -->
+        <div class="flex gap-2">
+            <Input
+                v-model="inputValue"
+                :placeholder="placeholder"
+                class="flex-1 h-10"
+                :disabled
+                @keydown.enter.prevent="add"
+            />
+            <Button 
+                :disabled
+                type="button"
+                class="h-10"
+                @click="add"
+            >
+                <Icon
+                    name="plus"
+                    class="w-4 h-4"
+                />
+            </Button>
+        </div>
+
+        <!-- List -->
+        <div class="space-y-1">
+            <div
+                v-for="(item, i) in model"
+                :key="i"
+                class="flex items-center justify-between rounded border p-2 bg-muted"
+            >
+                <div class="text-sm truncate">
+                    {{ item }}
+                </div>
+
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    :disabled
+                    @click="remove(i)"
+                >
+                    <X class="w-4 h-4" />
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/client/components/TextField.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import Label from './ui/label/Label.vue'
+import { Input } from '#client/components/ui/input'
+
+defineProps({
+    id: {
+        type: String,
+        default: '',
+    },
+    variant: {
+        type: String,
+        default: 'default',
+    },
+    type: {
+        type: String,
+        default: 'text',
+    },
+    label: {
+        type: String,
+        default: null,
+    },
+    hint: {
+        type: String,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: null,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    autocomplete: {
+        type: String,
+        default: 'off',
+    },
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
+    lazy: {
+        type: Boolean,
+        default: false,
+    },
+    labelClass: {
+        type: String,
+        default: 'min-w-[132px]',
+    },
+    inputClass: {
+        type: String,
+        default: '',
+    },
+})
+
+const [model, modifiers] = defineModel<string | number | null>({
+    default: '',
+})
+</script>
+<template>
+    <div>
+        <Label
+            v-if="label && variant !== 'horizontal'"
+            class="mb-4"
+            :class="labelClass"
+        >
+            {{ label }}
+        </Label>
+        <div class="flex">
+            <Label
+                v-if="label && variant === 'horizontal'"
+                class="h-10 flex items-center border px-2 rounded-l bg-secondary text-xs"
+                :class="labelClass"
+            >
+                {{ label }}
+            </Label>
+            
+            <slot name="prepend" />
+
+            <Input
+                :id
+                :model-value="model"
+                :type
+                :placeholder
+                :disabled
+                :autocomplete
+                :readonly
+                :autofocus
+                :class="[label && variant === 'horizontal' ? 'rounded-l-none flex-1' : '', inputClass]"
+                class="h-10"
+                @update:model-value="!modifiers.lazy && (model = $event)"
+                @change="modifiers.lazy && (model = $event.target.value)"
+            />
+
+            <slot name="append" />
+        </div>
+        <p
+            v-if="hint"
+            class="text-sm text-muted-foreground"
+        >
+            {{ hint }}
+        </p>
+    </div>
+</template>

package/src/client/components/UserMenu.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import auth from '#client/facades/auth.ts'
+
+import $fetch from '#client/facades/fetcher.ts'
+import di from '#client/facades/container.ts'
+import {
+    Avatar,
+    AvatarFallback,
+} from '#client/components/ui/avatar/index.ts'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '#client/components/ui/dropdown-menu/index.ts'
+import {
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    useSidebar,
+} from '#client/components/ui/sidebar/index.ts'
+import Icon from '#client/components/Icon.vue'
+import { toast } from 'vue-sonner'
+
+interface Link {
+    label: string
+    to: string
+    icon?: string
+}
+
+defineProps({
+    links: {
+        type: Array as () => Link[],
+        default: () => [],
+    },
+})
+
+const { isMobile } = useSidebar()
+
+const userName = computed(() => auth.user?.name || $t('User'))
+const userEmail = computed(() => auth.user?.email || '')
+const userInitials = computed(() => auth.user?.initials || 'U')
+
+const isDarkMode = ref(false)
+const isTogglingDarkMode = ref(false)
+
+onMounted(() => {
+    const state = di.get<Record<string, any>>('state')
+    const metas = state['user:metas'] || {}
+    isDarkMode.value = metas['admin-ui:dark_mode'] ?? false
+})
+
+async function toggleDarkMode() {
+    if (!auth.user) {
+        return
+    }
+
+    isTogglingDarkMode.value = true
+    isDarkMode.value = !isDarkMode.value
+
+    document.documentElement.classList.toggle('dark', isDarkMode.value)
+    document.documentElement.classList.toggle('light', !isDarkMode.value)
+
+    const [error] = await $fetch.try(`/api/users/${auth.user.id}/metas`, {
+        method: 'PUT',
+        data: [
+            {
+                name: 'admin-ui:dark_mode',
+                value: isDarkMode.value ? 'bool:true' : 'bool:false',
+            },
+        ],
+    })
+
+    if (error) {
+        isDarkMode.value = !isDarkMode.value
+        document.documentElement.classList.toggle('dark', isDarkMode.value)
+        document.documentElement.classList.toggle('light', !isDarkMode.value)
+    }
+
+    isTogglingDarkMode.value = false
+}
+
+async function handleLogout() {
+    const [error] = await $fetch.try('/auth/logout', { method: 'POST' })
+
+    if (error) {
+        return
+    }
+
+    toast.error($t('You have been logged out.'))
+
+    window.location.href = '/'
+}
+</script>
+
+<template>
+    <SidebarMenu>
+        <SidebarMenuItem>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <SidebarMenuButton size="lg"
+                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                        <Avatar class="h-8 w-8 rounded-lg">
+                            <AvatarFallback class="rounded-lg">
+                                {{ userInitials }}
+                            </AvatarFallback>
+                        </Avatar>
+                        <div class="grid flex-1 text-left text-sm leading-tight">
+                            <span class="truncate font-medium">{{ userName }}</span>
+                            <span class="truncate text-xs">{{ userEmail }}</span>
+                        </div>
+                        <Icon name="ChevronsUpDown" class="ml-auto size-4" />
+                    </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                    :side="isMobile ? 'bottom' : 'right'" align="start" :side-offset="4">
+                    <DropdownMenuLabel class="p-0 font-normal">
+                        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                            <Avatar class="h-8 w-8 rounded-lg">
+                                <AvatarFallback class="rounded-lg">
+                                    {{ userInitials }}
+                                </AvatarFallback>
+                            </Avatar>
+                            <div class="grid flex-1 text-left text-sm leading-tight">
+                                <span class="truncate font-medium">{{ userName }}</span>
+                                <span class="truncate text-xs">{{ userEmail }}</span>
+                            </div>
+                        </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                        <DropdownMenuItem @click="toggleDarkMode">
+                            <Icon v-if="isDarkMode" name="Sun" />
+                            <Icon v-else name="Moon" />
+                            <span v-if="isDarkMode">{{ $t('Light mode') }}</span>
+                            <span v-else>{{ $t('Dark mode') }}</span>
+                            <Icon v-if="isTogglingDarkMode" name="Loader2" class="ml-auto animate-spin" />
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuGroup v-for="link in links" :key="link.to">
+                        <DropdownMenuItem as-child>
+                            <RouterLink :to="link.to">
+                                <Icon v-if="link.icon" :name="link.icon" />
+                                {{ $t(link.label) }}
+                            </RouterLink>
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="handleLogout">
+                        <Icon name="LogOut" class="rotate-180" />
+                        {{ $t('Logout') }}
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </SidebarMenuItem>
+    </SidebarMenu>
+
+</template>

package/src/client/components/ZAlert.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '#client/components/ui/alert-dialog'
+
+
+defineProps({
+    title: {
+        type: String,
+        default: () => $t('Are you sure?')
+    },
+    description: {
+        type: String,
+        default: () => $t('This action cannot be undone.')
+    }
+})
+
+const emit = defineEmits<{
+    confirm: []
+}>()
+
+</script>
+
+<template>
+    <AlertDialog>
+        <AlertDialogTrigger>
+            <slot />
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>{{ title }}</AlertDialogTitle>
+                <AlertDialogDescription>
+                    {{ description }}
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>{{ $t('Cancel') }}</AlertDialogCancel>
+                <AlertDialogAction @click="emit('confirm')">
+                    {{ $t('Confirm') }}
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>