@sidekick-coder/zenith-kit 0.3.6 → 0.3.8

package/src/client/components/DatePicker.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { format } from 'date-fns'
+import { fromDate,  getLocalTimeZone } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
+import Icon from './Icon.vue'
+import { Calendar } from '#client/components/ui/calendar/index.ts'
+import { Popover, PopoverContent, PopoverTrigger } from '#client/components/ui/popover/index.ts'
+import { Button } from '#client/components/ui/button/index.ts'
+import { Input } from '#client/components/ui/input/index.ts'
+import { cn } from '#client/lib/utils.ts'
+
+const props = defineProps({
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    class: {
+        type: String,
+        default: undefined
+    },
+    mode: {
+        type: String as () => 'date' | 'datetime',
+        default: 'date'
+    },
+    clearable: {
+        type: Boolean,
+        required: false
+    }
+})
+
+const model = defineModel<any>({
+    type: [Date, String],
+    default: null
+})
+
+const open = ref(false)
+const hours = ref('00')
+const minutes = ref('00')
+
+const displayValue = computed(() => {
+    if (!model.value) {
+        return props.placeholder || $t('Select date')
+    }
+    
+    if (props.mode === 'datetime') {
+        return format(model.value, 'yyyy-MM-dd HH:mm')
+    }
+    
+    return format(model.value, 'yyyy-MM-dd')
+})
+
+function updateDateTime() {
+    if (!model.value) {
+        return
+    }
+
+    const date = new Date(model.value)
+    date.setHours(parseInt(hours.value) || 0)
+    date.setMinutes(parseInt(minutes.value) || 0)
+    date.setSeconds(0)
+    date.setMilliseconds(0)
+    
+    model.value = date
+}
+
+function clearDate(event: Event) {
+    event.stopPropagation()
+    model.value = null
+    hours.value = '00'
+    minutes.value = '00'
+}
+
+const calendarValue = computed({
+    get() {
+        if (!model.value) {
+            return undefined
+        }
+
+        const date = new Date(model.value)
+
+        return fromDate(date, getLocalTimeZone())
+    },
+    set(value: DateValue | undefined) {
+        if (!value) {
+            model.value = null
+            open.value = false
+            return
+        }
+    
+        const date = new Date(value.year, value.month - 1, value.day)
+        
+        if (props.mode === 'datetime') {
+            date.setHours(parseInt(hours.value) || 0)
+            date.setMinutes(parseInt(minutes.value) || 0)
+            date.setSeconds(0)
+            date.setMilliseconds(0)
+            
+            hours.value = date.getHours()
+                .toString()
+                .padStart(2, '0')
+
+            minutes.value = date.getMinutes().toString()
+                .padStart(2, '0')
+            
+        }
+    
+        model.value = date
+
+        if (props.mode === 'date') {
+            open.value = false
+        }
+    }
+})
+</script>
+
+<template>
+    <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+            <Button
+                variant="outline"
+                :class="cn(
+                    'w-full justify-start text-left font-normal !h-10',
+                    !model && 'text-muted-foreground',
+                    props.class
+                )"
+                :disabled="disabled"
+            >
+                <Icon
+                    name="calendar"
+                    class="mr-2 h-4 w-4"
+                />
+                {{ displayValue }}
+                <Icon
+                    v-if="clearable && model"
+                    name="x"
+                    class="ml-auto h-4 w-4 opacity-50 hover:opacity-100"
+                    @click="clearDate"
+                />
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent class="min-w-[320px] w-auto p-0">
+            <Calendar v-model="calendarValue"  />
+            <div
+                v-if="mode === 'datetime'"
+                class="p-3 border-t"
+            >
+                <div class="flex items-center gap-2">
+                    <div class="flex-1">
+                        <label class="text-sm font-medium">{{ $t('Hours') }}</label>
+                        <Input
+                            v-model="hours"
+                            type="number"
+                            min="0"
+                            max="23"
+                            class="mt-1"
+                            @input="updateDateTime"
+                        />
+                    </div>
+                    <div class="flex-1">
+                        <label class="text-sm font-medium">{{ $t('Minutes') }}</label>
+                        <Input
+                            v-model="minutes"
+                            type="number"
+                            min="0"
+                            max="59"
+                            class="mt-1"
+                            @input="updateDateTime"
+                        />
+                    </div>
+                </div>
+                <Button
+                    variant="default"
+                    size="sm"
+                    class="w-full mt-3"
+                    @click="open = false"
+                >
+                    {{ $t('Done') }}
+                </Button>
+            </div>
+        </PopoverContent>
+    </Popover>
+</template>

package/src/client/components/DialogForm.vue

@@ -0,0 +1,202 @@
+<script lang="ts" setup generic="T extends BaseSchema<any, any, any>">
+import { useForm } from 'vee-validate'
+import * as v from 'valibot'
+import { toTypedSchema } from '@vee-validate/valibot'
+import { computed, ref, watch } from 'vue'
+import type { PropType } from 'vue'
+import type { BaseSchema } from 'valibot'
+import { toast } from 'vue-sonner'
+import ClientOnly from './ClientOnly.vue'
+import FormAutoFieldList from './FormAutoFieldList.vue'
+
+import $fetch from '#client/facades/fetcher.ts'
+import Button from '#client/components/ZButton.vue'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '#client/components/ui/dialog/index.ts'
+import { tryCatch } from '#shared/utils/tryCatch.ts'
+import { validator } from '#shared/facades/validator.ts'
+import type { DefineFormField } from '#client/utils/defineFormFields.ts'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: () => $t('Form'),
+    },
+    description: {
+        type: String,
+        default: () => $t('Fill in the details below to create a new item'),
+    },
+    submitText: {
+        type: String,
+        default: () => $t('Save'),
+    },
+    schema: {
+        type: Object as () => T,
+        default: () => validator.create(v => v.record(v.string(), v.any())), // dummy schema to satisfy generic constraint
+    },
+    values: {
+        type: Object as () => Partial<v.InferInput<T>>,
+        default: () => ({}),
+    },
+    fetch: {
+        type: [String, Function] as PropType<string | ((data: any) => Promise<any>)>,
+        default: null,
+    },
+    fetchMethod: {
+        type: String,
+        default: 'POST',
+    },
+    /** @deprecated use fetchMethod instead */
+    method: {
+        type: String,
+        default: null,
+    },
+    handle: {
+        type: Function as PropType<(data: v.InferInput<T>) => Promise<any>>,
+        default: null,
+    },
+    fields: {
+        type: Object as () => Record<keyof v.InferInput<T>, DefineFormField| ((data: any) => DefineFormField)>,
+        default: () => ({}),
+    },
+    toastOnSuccess: {
+        type: String,
+        default: null,
+    },
+})
+
+const emit = defineEmits(['submit'])
+
+const loading = ref(false)
+
+const open = defineModel('open', {
+    type: Boolean,
+    default: false,
+})
+
+const { handleSubmit, errors, values, resetForm, setFieldValue } = useForm({
+    validationSchema: toTypedSchema(props.schema as T),
+    initialValues: props.values as v.InferInput<T>,
+})
+
+const formatedFields = computed(() => {
+    const result: Record<string, DefineFormField> = {}
+
+    for (const [key, field] of Object.entries(props.fields)) {
+        if (typeof field === 'function') {
+            result[key] = field(values)
+        } else {
+            result[key] = field
+        }
+    }
+
+    return result
+})
+
+const errorsWihoutFields = computed(() => {
+    const result: Record<string, any> = {}
+
+    for (const [key, value] of Object.entries(errors.value)) {
+        if (props.fields[key as keyof v.InferInput<T>]) continue
+
+        result[key] = value
+    }
+
+    return result
+})
+
+function doFetch(data: v.InferInput<T>) {
+    if (typeof props.fetch === 'function') {
+        return props.fetch(data)
+    }
+
+    return $fetch.fetch(props.fetch as string, {
+        method: props.method || props.fetchMethod,
+        data,
+    })
+}
+
+const onSubmit = handleSubmit(async (data) => {
+    if (!props.fetch && !props.handle) {
+        open.value = false
+        return
+    }
+
+    loading.value = true
+
+    const [error, response] = await tryCatch(() => {
+        if (props.handle) {
+            return props.handle(data)
+        }
+
+        return doFetch(data)
+    })
+
+    if (error) {
+        loading.value = false
+        console.error(error)
+        return
+    }
+
+    if (props.toastOnSuccess) {
+        toast.success(props.toastOnSuccess)
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 1000)) // wait for animation to finish
+
+    open.value = false
+    loading.value = false
+    resetForm()
+    emit('submit', response)
+})
+
+watch(open, () => {
+    if (!open.value) return
+
+    resetForm({ values: props.values as v.InferInput<T>, })
+})
+
+defineExpose({ setFieldValue, })
+</script>
+<template>
+    <ClientOnly>
+        <template #fallback>
+            <slot />
+        </template>
+
+        <Dialog v-model:open="open">
+            <DialogTrigger v-if="$slots.default">
+                <slot />
+            </DialogTrigger>
+
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{{ title }}</DialogTitle>
+                    <DialogDescription>{{ description }}</DialogDescription>
+                </DialogHeader>
+                <form class="space-y-4 py-2" @submit.prevent="onSubmit">
+                    <FormAutoFieldList :fields="formatedFields" />
+
+                    <div v-if="Object.keys(errorsWihoutFields).length" class="mb-2 text-sm text-red-600">
+                        <div v-for="(message, field) in errorsWihoutFields" :key="field">
+                            {{ message }}
+                        </div>
+                    </div>
+
+                    <DialogFooter>
+                        <Button type="submit" class="w-full" :loading>
+                            {{ submitText }}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    </ClientOnly>
+</template>

package/src/client/components/FileUploader.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { $file } from '#client/utils/file.ts'
+import { tryCatch } from '#shared/utils/tryCatch.ts'
+import Button from '#client/components/ZButton.vue'
+import Icon from '#client/components/Icon.vue'
+import type UploadSession from '#shared/entities/FileUploadSessionEntity.ts'
+import type ServerFile from '#shared/entities/FileEntity.ts'
+import acl from '#client/facades/acl.ts'
+import fetcher from '#client/facades/fetcher.ts'
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: '',
+    },
+    hint: {
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    public: {
+        type: Boolean,
+        default: false,
+    },
+    purpose: {
+        type: String,
+        required: true,
+    },
+    folder: {
+        type: String,
+        default: null,
+    },
+    maxSize: {
+        type: Number,
+        default: 10 * 1024 * 1024, // 10MB default
+    },
+    mimetypes: {
+        type: String,
+        default: '*/*',
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits<{
+    (e: 'uploaded', response: ServerFile | ServerFile[]): void
+}>()
+
+const fileId = defineModel<number | undefined | null>('fileId', { type: Number, })
+
+const fileUrl = defineModel<string | undefined | null>('fileUrl', { type: String, })
+
+const loading = defineModel<boolean>('loading', {
+    type: Boolean,
+    default: false,
+})
+
+const hasPermission = computed(() => {
+    const data = {
+        purpose: props.purpose,
+        folder: props.folder,
+        max_size: props.maxSize,
+        mime_types: props.mimetypes,
+    }
+
+    return acl.can('create', 'FileUploadSession', data)
+})
+
+async function createSession(file: File) {
+    return await fetcher.post<UploadSession>('/api/file-upload-sessions', {
+        method: 'POST',
+        data: {
+            public: props.public,
+            folder: props.folder,
+            client_name: file.name,
+            purpose: props.purpose,
+            mime_types: props.mimetypes,
+            max_size: props.maxSize,
+        },
+    })
+}
+
+async function upload(file: File, url: string) {
+    return await fetcher.put(url, {
+        body: file,
+    })
+}
+
+async function createServerFile(url: string) {
+    return await fetcher.post(url)
+}
+async function executeFromFile(file: File) {
+    const session = await createSession(file)
+
+    await upload(file, session.upload_url!)
+
+    const response = await createServerFile(session.create_file_url!)
+
+    fileId.value = response.id
+    fileUrl.value = response.url
+
+    return response
+}
+
+async function execute() {
+    const file = await $file.pick({
+        multiple: props.multiple,
+        accept: props.mimetypes,
+    })
+
+    if (!file) {
+        return
+    }
+
+    if (props.multiple && Array.isArray(file)) {
+        const results: ServerFile[] = []
+
+        for (const f of file) {
+            const response = await executeFromFile(f)
+            results.push(response)
+        }
+
+        return results
+    }
+
+    if (!Array.isArray(file)) {
+        return await executeFromFile(file)
+    }
+}
+
+async function handle() {
+    loading.value = true
+
+    const [error, response] = await tryCatch(() => execute())
+
+    if (error || !response) {
+        loading.value = false
+        console.error(error)
+        return
+    }
+
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    if (Array.isArray(response)) {
+        emit('uploaded', response)
+
+        loading.value = false
+
+        return
+    }
+
+    emit('uploaded', response)
+
+    loading.value = false
+}
+
+defineExpose({
+    handle,
+    executeFromFile,
+})
+</script>
+
+<template>
+    <slot v-if="hasPermission" :handle="handle" :loading="loading">
+        <Button type="button" variant="outline" :loading="loading" :disabled="disabled" @click="handle">
+            <Icon name="Upload" class="size-4 mr-2" />
+            {{ $t('Upload') }}
+        </Button>
+    </slot>
+    <Button v-else type="button" variant="outline" disabled class="text-xs text-red-600 mt-1 block">
+        {{ $t('Missing permissions for file upload') }}
+    </Button>
+</template>

package/src/client/components/FormAutoFieldList.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup generic="T extends BaseSchema<any, any, any>">
+import * as v from 'valibot'
+import { computed } from 'vue'
+import type { BaseSchema } from 'valibot'
+import FormTextarea from './FormTextarea.vue'
+import FormSelect from './FormSelect.vue'
+import FormAutocomplete from './FormAutocomplete.vue'
+import FormSwitch from './FormSwitch.vue'
+import FormImageUploader from './FormImageUploader.vue'
+import FormColorPicker from './FormColorPicker.vue'
+import FormStringListInput from './FormStringListInput.vue'
+import FormJsonInput from './FormJsonInput.vue'
+import FormDatePicker from './FormDatePicker.vue'
+import FormTextField from '#client/components/FormTextField.vue'
+import FormFileUploader from '#client/components/FormFileUploader.vue'
+import type { DefineFormField } from '#client/utils/defineFormFields.ts'
+
+const props = defineProps({
+    fields: {
+        type: Object as () => Record<keyof v.InferInput<T>, DefineFormField>,
+        default: () => ({}),
+    },
+})
+
+const components = computed(() => {
+    return Object.entries(props.fields).map(([name, field]) => {
+        const { component, ...rest } = field
+
+        return {
+            component,
+            name,
+            props: rest
+        }
+    })
+})
+</script>
+<template>
+    <template v-for="field in components" :key="field.name">
+        <FormTextField v-if="field.component === 'text-field'" :name="field.name" v-bind="field.props" />
+
+        <FormTextarea v-else-if="field.component === 'textarea'" :name="field.name" v-bind="field.props" />
+
+        <FormSelect v-else-if="field.component === 'select'" :name="field.name" v-bind="field.props" />
+
+        <FormAutocomplete v-else-if="field.component === 'autocomplete'" :name="field.name" v-bind="field.props" />
+
+        <FormSwitch v-else-if="field.component === 'switch'" :name="field.name" v-bind="field.props" />
+
+        <FormFileUploader v-else-if="field.component === 'file-upload'" :name="field.name" v-bind="field.props" />
+
+        <FormImageUploader v-else-if="field.component === 'image-upload'" :name="field.name" v-bind="field.props" />
+
+        <FormColorPicker v-else-if="field.component === 'color-picker'" :name="field.name" v-bind="field.props" />
+
+        <FormStringListInput v-else-if="field.component === 'string-list-input'" :name="field.name"
+            v-bind="field.props" />
+
+        <FormJsonInput v-else-if="field.component === 'json-input'" :name="field.name" v-bind="field.props" />
+
+        <FormDatePicker v-else-if="field.component === 'date-picker'" :name="field.name" v-bind="field.props" />
+
+        <input v-else-if="field.component === 'hidden'" class="hidden" :name="field.name">
+
+        <div v-else class="text-destructive">
+            Unknow component {{ field.component }}
+        </div>
+
+        <!-- Add other field types like select, checkbox, radio as needed -->
+    </template>
+</template>