@sidekick-coder/zenith-kit 0.3.7 → 0.3.9

package/src/client/components/FormSwitch.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '#client/components/ui/form/index.ts'
+import Switch from '#client/components/ui/switch/Switch.vue'
+
+defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+    hint: {
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+</script>
+
+<template>
+    <FormField
+        v-slot="{ value, handleChange }"
+        :name
+        :validate-on-blur="false"
+    >
+        <FormItem class="rounded-lg border p-4 flex items-center justify-between gap-x-4">
+            <div class="space-y-2">
+                <FormLabel>{{ label }}</FormLabel>
+                <FormDescription v-if="hint">
+                    {{ hint }}
+                </FormDescription>
+                <FormMessage />
+            </div>
+            <FormControl>
+                <Switch
+                    :disabled
+                    :model-value="value"
+                    @update:model-value="handleChange"
+                />
+            </FormControl>
+        </FormItem>
+    </FormField>
+</template>

package/src/client/components/FormTextField.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import Icon from './Icon.vue'
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '#client/components/ui/form/index.ts'
+
+import { Input } from '#client/components/ui/input/index.ts'
+import { Button } from '#client/components/ui/button/index.ts'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#client/components/ui/dropdown-menu/index.ts'
+
+defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        default: 'text',
+    },
+    step: {
+        type: [String, Number],
+        default: null,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+    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,
+    },
+    presets: {
+        type: Array as () => Array<{ label: string; value: string }>,
+        default: () => [],
+    },
+})
+</script>
+<template>
+    <FormField
+        v-slot="{ componentField }"
+        :name
+        :validate-on-blur="false"
+    >
+        <FormItem>
+            <FormLabel>{{ label }}</FormLabel>
+            <FormControl>
+                <div class="flex gap-2">
+                    <Input
+                        :type
+                        :placeholder
+                        :disabled
+                        :autocomplete
+                        :readonly
+                        :autofocus
+                        :step
+                        class="h-10 flex-1"
+                        v-bind="componentField"
+                    />
+                    
+                    <DropdownMenu v-if="presets.length > 0">
+                        <DropdownMenuTrigger as-child>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                type="button"
+                                class="h-10"
+                            >
+                                <Icon
+                                    name="chevron-down"
+                                    class="w-4 h-4"
+                                />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                                v-for="preset in presets"
+                                :key="preset.value"
+                                @click="componentField.onChange(preset.value)"
+                            >
+                                {{ preset.label }}
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    
+                    <slot name="append" />
+                </div>
+            </FormControl>
+            <FormDescription v-if="hint">
+                {{ hint }}
+            </FormDescription>
+            <FormMessage />
+        </FormItem>
+    </FormField>
+</template>

package/src/client/components/FormTextarea.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '#client/components/ui/form'
+import Textarea from '#client/components/ui/textarea/Textarea.vue'
+
+defineProps({
+    name: {
+        type: String,
+        required: true,
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+    hint: {
+        type: String,
+        default: '',
+    },
+    rows: {
+        type: Number,
+        default: 3,
+    },
+})
+</script>
+<template>
+    <FormField
+        v-slot="{ componentField }"
+        :name
+    >
+        <FormItem>
+            <FormLabel>{{ label }}</FormLabel>
+            <FormControl>
+                <Textarea
+                    class="min-h-20"
+                    :rows="rows"
+                    v-bind="{...$attrs, ...componentField}"
+                />
+            </FormControl>
+            <FormDescription v-if="hint">
+                {{ hint }}
+            </FormDescription>
+            <FormMessage />
+        </FormItem>
+    </FormField>
+</template>

package/src/client/components/Head.vue

@@ -0,0 +1,5 @@
+<script lang="ts">
+import { Head as UnheadHeadComponent } from '@unhead/vue/components';
+
+export default UnheadHeadComponent
+</script>

package/src/client/components/Icon.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { kebabCase } from 'lodash-es'
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: null
+    },
+})
+
+const iconName = computed(() => {
+    if (props.name?.includes(':')) {
+        return props.name
+    }
+
+    return `lucide:${kebabCase(props.name)}`
+})
+</script>
+
+<template>
+    <iconify-icon
+        :icon="iconName"
+        class="flex"
+    />
+</template>

package/src/client/components/Image.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import DialogTitle from './ui/dialog/DialogTitle.vue'
+import DialogDescription from './ui/dialog/DialogDescription.vue'
+import {
+    Dialog,
+    DialogContent,
+    DialogTrigger,
+} from '#client/components/ui/dialog'
+
+defineProps({
+    src: {
+        type: String,
+        required: true,
+    },
+    alt: {
+        type: String,
+        default: null,
+    },
+})
+
+</script>
+
+<template>
+    <Dialog>
+        <DialogTrigger as-child>
+            <img
+                :src="src"
+                :alt="alt"
+                v-bind="$attrs"
+            >
+        </DialogTrigger>
+            
+        <DialogContent 
+            class="sm:max-w-auto w-auto p-0 h-auto bg-transparent border-0 shadow-none focus:outline-none"
+            hide-close
+        >
+            <DialogTitle class="hidden">
+                {{ alt || $t('Image preview') }}
+            </DialogTitle>
+            <DialogDescription class="hidden">
+                {{ alt || $t('Image preview') }}
+            </DialogDescription>
+            <img
+                :src="src"
+                :alt="alt"
+                class="block h-[100dvw] max-h-[80dvh] rounded-lg object-contain"
+            >
+        </DialogContent>
+    </Dialog>
+</template>

package/src/client/components/JsonInput.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import Textarea from '#client/components/ui/textarea/Textarea.vue'
+
+const model = defineModel<string | object>()
+
+const props = defineProps({
+    mode: {
+        type: String as () => 'text' | 'object',
+        required: true,
+    },
+    label: {
+        type: String,
+        default: null
+    },
+    hint: {
+        type: String,
+        default: null
+    },
+    rows: {
+        type: Number,
+        default: null
+    },
+    textareaClass: {
+        type: String,
+        default: null
+    }
+})
+
+const emit = defineEmits<{
+    (e: 'blur'): void
+}>()
+
+const textValue = computed({
+    get() {
+        if (props.mode === 'object' && typeof model.value === 'object') {
+            return JSON.stringify(model.value, null, 2)
+        }
+        
+        return model.value as string || ''
+    },
+    set(value: string) {
+        if (props.mode === 'object') {
+            try {
+                const parsed = JSON.parse(value)
+                model.value = parsed
+            } catch {
+                model.value = value
+            }
+            return
+        }
+        model.value = value
+    }
+})
+
+function format(){
+    if (props.mode === 'object' && typeof model.value === 'object') {
+        textValue.value = JSON.stringify(model.value, null, 2)
+        return
+    }
+
+    textValue.value = JSON.stringify(JSON.parse(textValue.value), null, 2)
+}
+
+function onBlur() {
+    format()
+
+    emit('blur')
+}
+
+onMounted(format)
+
+</script>
+<template>
+    <div>
+        <label
+            v-if="label"
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block"
+        >
+            {{ label }}
+        </label>
+        <Textarea
+            v-model="textValue"
+            class="min-h-20 font-mono"
+            :rows="rows || (mode === 'object' ? 6 : 3)"
+            :class="textareaClass"
+            @blur="onBlur"
+        />
+        <p
+            v-if="hint"
+            class="text-sm text-muted-foreground mt-2"
+        >
+            {{ hint }}
+        </p>
+    </div>
+</template>

package/src/client/components/Logo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import LogoIcon from './LogoIcon.vue'
+import config from '#client/facades/config.ts'
+
+const logoFileId = config.get('branding.logoFileId', null)
+</script>
+
+<template>
+    <img
+        v-if="logoFileId"
+        :src="`/api/files/${logoFileId}/stream`"
+        alt="Logo"
+        class="size-8 rounded-md"
+    >
+
+    <div
+        v-else
+        class="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-sidebar-primary-foreground"
+    >
+        <LogoIcon class="size-5 dark:text-black" />
+    </div>
+</template>

package/src/client/components/LogoIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+defineOptions({ inheritAttrs: false, })
+
+interface Props {
+    className?: HTMLAttributes['class'];
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 42"
+        :class="className"
+        v-bind="$attrs"
+    >
+        <path
+            d="M8 9
+                                  L31 9
+                                  L8 33
+                                  L31 33"
+            stroke="currentColor"
+            stroke-width="4"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+</template>

package/src/client/components/ObjectInspect.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import Button from '#client/components/ZButton.vue'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '#client/components/ui/dialog/index.ts'
+import Icon from '#client/components/Icon.vue'
+import { tryCatch } from '#shared/utils/tryCatch.ts'
+import { cn } from '#client/lib/utils.ts'
+
+defineProps({
+    title: {
+        type: String,
+        default: () => $t('Object Inspect')
+    },
+    description: {
+        type: String,
+        default: () => $t('Inspect the object data structure')
+    },
+    contentClass: {
+        type: String,
+        default: ''
+    }
+})
+
+const dialog = defineModel('open', {
+    type: Boolean,
+    default: false
+})
+
+const model = defineModel({
+    type: [Object, String] as PropType<Record<string, any> | string>,
+    required: true
+})
+
+const parsed = computed(() => {
+    if (typeof model.value === 'string') {
+        const [err, obj] = tryCatch.sync(() => JSON.parse(model.value as string))
+
+        if (err) {
+            return model
+        }
+
+        return obj
+    }
+
+    return model
+})
+</script>
+
+<template>
+    <Dialog v-model:open="dialog">
+        <DialogTrigger as-child>
+            <slot>
+                <Button
+                    size="sm"
+                    variant="outline"
+                >
+                    <Icon name="eye" />
+                </Button>
+            </slot>
+        </DialogTrigger>
+        <DialogContent :class="cn(`sm:max-w-[500px] overflow-auto max-h-[80vh]`, contentClass)">
+            <DialogHeader>
+                <DialogTitle>
+                    {{ title }}
+                </DialogTitle>
+                <DialogDescription>
+                    {{ description }}
+                </DialogDescription>
+            </DialogHeader>
+
+            <code class="block whitespace-pre-wrap bg-muted px-4 py-2 rounded-md">
+                <pre>{{ parsed }}</pre>
+            </code>
+        </DialogContent>
+    </Dialog>
+</template>