@xelqun/forms 0.0.0-stage → 0.1.0

package/resources/js/components/fields/XqCheckboxField.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { LoaderCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { useField } from '../../composables/useField';
+import type { SchemaNode } from '../../schema/types';
+import XqCheckbox from '../../ui/XqCheckbox.vue';
+import XqLabel from '../../ui/XqLabel.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, loading, required, disabled, id } = useField<boolean>(props.node);
+const hasHint = computed(() => !!(props.node.props?.description || props.node.hint));
+const describedBy = computed(() =>
+    error.value ? `${id}-error` : hasHint.value ? `${id}-hint` : undefined,
+);
+</script>
+
+<template>
+    <div class="gap-2 grid" :data-xq-path="node.path" :aria-busy="loading || undefined">
+        <div class="gap-3 flex items-start">
+            <XqCheckbox
+                :id="id"
+                v-model="value"
+                :disabled="disabled"
+                :aria-invalid="error ? true : undefined"
+                :aria-describedby="describedBy"
+                class="mt-0.5"
+            />
+            <div class="gap-1.5 grid">
+                <XqLabel :for="id" class="gap-0.5 leading-snug cursor-pointer">
+                    {{ node.label }}
+                    <span v-if="required" class="text-xq-destructive" aria-hidden="true">*</span>
+                    <span v-if="required" class="sr-only">(required)</span>
+                    <LoaderCircle
+                        v-if="loading"
+                        class="ml-1 size-3 motion-safe:animate-spin text-xq-muted-foreground"
+                        aria-hidden="true"
+                    />
+                </XqLabel>
+                <p v-if="hasHint" :id="`${id}-hint`" class="text-xs text-xq-muted-foreground">
+                    {{ node.props?.description ?? node.hint }}
+                </p>
+            </div>
+        </div>
+        <p v-if="error" :id="`${id}-error`" class="text-xs font-medium text-xq-destructive">
+            {{ error }}
+        </p>
+    </div>
+</template>

package/resources/js/components/fields/XqDatePickerField.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { getLocalTimeZone, parseDate } from '@internationalized/date';
+import type { DateValue } from '@internationalized/date';
+import { CalendarDays, X } from 'lucide-vue-next';
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass, popoverClass } from '../../ui/classes';
+import XqCalendar from '../../ui/XqCalendar.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, describedBy, required, disabled, id, onBlur } = useField<string | null>(
+    props.node,
+);
+const open = ref(false);
+
+function parse(input: unknown): DateValue | undefined {
+    if (typeof input !== 'string' || input === '') {
+        return undefined;
+    }
+
+    try {
+        return parseDate(input.slice(0, 10));
+    } catch {
+        return undefined;
+    }
+}
+
+const date = computed<DateValue | undefined>({
+    get: () => parse(value.value),
+    set: (next) => {
+        value.value = next ? next.toString() : null;
+        open.value = false;
+        onBlur();
+    },
+});
+
+const label = computed(() =>
+    date.value
+        ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(
+              date.value.toDate(getLocalTimeZone()),
+          )
+        : null,
+);
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+        <PopoverRoot v-model:open="open">
+            <div class="relative">
+                <PopoverTrigger as-child>
+                    <button
+                        :id="id"
+                        type="button"
+                        :disabled="disabled"
+                        :aria-invalid="error ? true : undefined"
+                        :aria-describedby="describedBy"
+                        :class="
+                            cn(
+                                controlClass,
+                                'h-9 gap-2 px-3 flex cursor-pointer items-center text-left',
+                                !label && 'text-xq-muted-foreground',
+                            )
+                        "
+                    >
+                        <CalendarDays class="size-4 shrink-0 opacity-60" />
+                        <span class="truncate">{{
+                            label ?? node.placeholder ?? 'Pick a date'
+                        }}</span>
+                    </button>
+                </PopoverTrigger>
+                <button
+                    v-if="label && !required && !disabled"
+                    type="button"
+                    class="right-2 size-6 rounded-sm absolute top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
+                    aria-label="Clear date"
+                    @click="date = undefined"
+                >
+                    <X class="size-3.5" />
+                </button>
+            </div>
+            <PopoverPortal>
+                <PopoverContent align="start" :side-offset="4" :class="cn(popoverClass, 'w-auto')">
+                    <XqCalendar
+                        v-model="date"
+                        :min-value="parse(node.props?.min)"
+                        :max-value="parse(node.props?.max)"
+                    />
+                </PopoverContent>
+            </PopoverPortal>
+        </PopoverRoot>
+    </XqFieldWrapper>
+</template>

package/resources/js/components/fields/XqFileUploadField.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { FileText, LoaderCircle, UploadCloud, X } from 'lucide-vue-next';
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useField } from '../../composables/useField';
+import { HttpError } from '../../core/http';
+import { cn, formatBytes } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import XqButton from '../../ui/XqButton.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { store, path, value, error, describedBy, required, disabled, id } = useField<string | null>(
+    props.node,
+);
+const options = computed(() => props.node.props ?? {});
+
+const input = ref<HTMLInputElement | null>(null);
+const dragging = ref(false);
+const progress = ref<{ name: string; size: number; percent: number } | null>(null);
+const uploadError = ref<string | null>(null);
+const local = ref<{ token: string; name: string; size: number; preview: string | null } | null>(
+    null,
+);
+let controller: AbortController | null = null;
+
+const file = computed(() => {
+    if (!value.value) {
+        return null;
+    }
+
+    if (local.value?.token === value.value) {
+        return {
+            name: local.value.name,
+            size: local.value.size,
+            url: local.value.preview,
+            isNew: true,
+        };
+    }
+
+    const existing = options.value.files?.[value.value];
+
+    return {
+        name: existing?.name ?? value.value.split('/').pop() ?? 'File',
+        size: existing?.size ?? null,
+        url: existing?.url ?? null,
+        isNew: false,
+    };
+});
+
+const isImage = computed(
+    () =>
+        !!file.value?.url &&
+        (options.value.image || /\.(png|jpe?g|gif|webp|avif|svg)$/i.test(file.value.name)),
+);
+
+const inputDescribedBy = computed(() => (uploadError.value ? `${id}-error` : describedBy.value));
+
+function revokePreview(): void {
+    if (local.value?.preview) {
+        URL.revokeObjectURL(local.value.preview);
+    }
+}
+
+async function upload(picked: File): Promise<void> {
+    uploadError.value = null;
+
+    if (options.value.maxSize && picked.size > options.value.maxSize * 1024) {
+        uploadError.value = `The file may not be larger than ${formatBytes(options.value.maxSize * 1024)}.`;
+
+        return;
+    }
+
+    controller?.abort();
+    controller = new AbortController();
+    progress.value = { name: picked.name, size: picked.size, percent: 0 };
+
+    try {
+        const result = await store.upload(
+            path,
+            picked,
+            (percent) => progress.value && (progress.value.percent = percent),
+            controller.signal,
+        );
+
+        revokePreview();
+        local.value = {
+            token: result.token,
+            name: result.name,
+            size: result.size,
+            preview: picked.type.startsWith('image/') ? URL.createObjectURL(picked) : null,
+        };
+        value.value = result.token;
+    } catch (failure) {
+        if (controller?.signal.aborted) {
+            return;
+        }
+
+        uploadError.value =
+            failure instanceof HttpError
+                ? (failure.validationErrors.file?.[0] ?? failure.message)
+                : 'The upload failed. Please try again.';
+    } finally {
+        progress.value = null;
+
+        if (input.value) {
+            input.value.value = '';
+        }
+    }
+}
+
+function onChange(event: Event): void {
+    const picked = (event.target as HTMLInputElement).files?.[0];
+
+    if (picked) {
+        void upload(picked);
+    }
+}
+
+function onDrop(event: DragEvent): void {
+    dragging.value = false;
+    const picked = event.dataTransfer?.files?.[0];
+
+    if (picked && !disabled.value) {
+        void upload(picked);
+    }
+}
+
+function remove(): void {
+    controller?.abort();
+    revokePreview();
+    local.value = null;
+    value.value = null;
+}
+
+onBeforeUnmount(() => {
+    controller?.abort();
+    revokePreview();
+});
+</script>
+
+<template>
+    <XqFieldWrapper
+        :node="node"
+        :id="id"
+        :error="error ?? uploadError"
+        :required="required"
+        :announce-error="!!uploadError"
+    >
+        <div
+            v-if="file && !progress"
+            class="gap-3 p-2 pr-3 flex items-center rounded-xq-md border border-xq-border bg-xq-background"
+        >
+            <img
+                v-if="isImage"
+                :src="file.url!"
+                alt=""
+                class="size-10 shrink-0 rounded-xq-sm object-cover"
+            />
+            <div
+                v-else
+                class="size-10 flex shrink-0 items-center justify-center rounded-xq-sm bg-xq-muted"
+            >
+                <FileText class="size-5 text-xq-muted-foreground" />
+            </div>
+            <div class="min-w-0 flex-1">
+                <a
+                    v-if="file.url && !file.isNew"
+                    :href="file.url"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-sm font-medium block truncate hover:underline"
+                >
+                    {{ file.name }}
+                </a>
+                <p v-else class="text-sm font-medium truncate">{{ file.name }}</p>
+                <p class="text-xs text-xq-muted-foreground">
+                    {{ file.isNew ? 'Uploaded, saved when you submit' : 'Stored'
+                    }}<template v-if="file.size"> · {{ formatBytes(file.size) }}</template>
+                </p>
+            </div>
+            <XqButton
+                v-if="!disabled"
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Remove file"
+                @click="remove"
+            >
+                <X />
+            </XqButton>
+        </div>
+        <label
+            v-else
+            :for="id"
+            :class="
+                cn(
+                    'gap-1.5 px-4 py-5 flex cursor-pointer flex-col items-center justify-center rounded-xq-md border border-dashed border-xq-input bg-xq-background text-center transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-xq-muted/50 has-[input:focus-visible]:border-xq-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-xq-ring/25',
+                    dragging && 'border-xq-primary bg-xq-primary/5',
+                    (error || uploadError) && 'border-xq-destructive',
+                    disabled && 'pointer-events-none opacity-60',
+                )
+            "
+            @dragover.prevent="dragging = true"
+            @dragleave.prevent="dragging = false"
+            @drop.prevent="onDrop"
+        >
+            <template v-if="progress">
+                <LoaderCircle class="size-5 motion-safe:animate-spin text-xq-primary" />
+                <span class="text-sm font-medium max-w-full truncate">{{ progress.name }}</span>
+                <span
+                    role="progressbar"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                    :aria-valuenow="progress.percent"
+                    :aria-label="`Uploading ${progress.name}`"
+                    class="h-1.5 w-40 overflow-hidden rounded-full bg-xq-muted"
+                >
+                    <span
+                        class="block h-full bg-xq-primary transition-[width]"
+                        :style="{ width: `${progress.percent}%` }"
+                    />
+                </span>
+            </template>
+            <template v-else>
+                <UploadCloud class="size-5 text-xq-muted-foreground" />
+                <span class="text-sm"
+                    ><span class="font-medium text-xq-primary">Choose a file</span> or drag it
+                    here</span
+                >
+                <span class="text-xs text-xq-muted-foreground"
+                    >Up to {{ formatBytes((options.maxSize ?? 10240) * 1024) }}</span
+                >
+            </template>
+            <input
+                :id="id"
+                ref="input"
+                type="file"
+                class="sr-only"
+                :accept="options.accept ?? undefined"
+                :disabled="disabled"
+                :aria-invalid="error || uploadError ? true : undefined"
+                :aria-describedby="inputDescribedBy"
+                @change="onChange"
+            />
+        </label>
+    </XqFieldWrapper>
+</template>

package/resources/js/components/fields/XqRadioField.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode, SelectOption } from '../../schema/types';
+import XqLabel from '../../ui/XqLabel.vue';
+import XqRadioGroup from '../../ui/XqRadioGroup.vue';
+import XqRadioGroupItem from '../../ui/XqRadioGroupItem.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, describedBy, required, disabled, id } = useField<string | number | null>(
+    props.node,
+);
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <XqRadioGroup
+            v-model="value"
+            :disabled="disabled"
+            :orientation="node.props?.inline ? 'horizontal' : 'vertical'"
+            :aria-invalid="error ? true : undefined"
+            :aria-required="required || undefined"
+            :aria-describedby="describedBy"
+            :aria-labelledby="node.label ? `${id}-label` : undefined"
+            :class="cn(node.props?.inline && 'gap-x-6 gap-y-2 flex flex-wrap')"
+        >
+            <div
+                v-for="(option, index) in (node.props?.options ?? []) as SelectOption[]"
+                :key="String(option.value)"
+                class="gap-2.5 flex items-start"
+            >
+                <XqRadioGroupItem :id="`${id}-${index}`" :value="option.value" />
+                <div class="gap-1 grid">
+                    <XqLabel :for="`${id}-${index}`" class="leading-4 font-normal cursor-pointer">{{
+                        option.label
+                    }}</XqLabel>
+                    <p v-if="option.description" class="text-xs text-xq-muted-foreground">
+                        {{ option.description }}
+                    </p>
+                </div>
+            </div>
+        </XqRadioGroup>
+    </XqFieldWrapper>
+</template>

package/resources/js/components/fields/XqRepeaterField.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-vue-next';
+import { computed, nextTick, ref } from 'vue';
+import { gridStyle } from '../../composables/layout';
+import { useField } from '../../composables/useField';
+import type { SchemaNode } from '../../schema/types';
+import XqButton from '../../ui/XqButton.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { store, error, required, disabled, id } = useField(props.node);
+const options = computed(() => props.node.props ?? {});
+const keys = computed(() => store.rowKeys(props.node));
+const rows = computed<Record<string, SchemaNode[]>>(() => options.value.rows ?? {});
+const container = ref<HTMLElement | null>(null);
+const canAdd = computed(
+    () =>
+        !disabled.value &&
+        (options.value.maxItems === null ||
+            options.value.maxItems === undefined ||
+            keys.value.length < options.value.maxItems),
+);
+const canRemove = computed(
+    () => !disabled.value && keys.value.length > (options.value.minItems ?? 0),
+);
+
+/**
+ * Keep keyboard users in place: focus the first of these that can take it.
+ */
+function focusFirstEnabled(selectors: string[]): void {
+    for (const selector of selectors) {
+        const button = container.value?.querySelector<HTMLButtonElement>(selector);
+
+        if (button && !button.disabled) {
+            button.focus();
+
+            return;
+        }
+    }
+}
+
+function rowSelector(key: string): string {
+    return `[data-xq-row="${CSS.escape(key)}"]`;
+}
+
+async function remove(key: string, index: number): Promise<void> {
+    store.removeRow(props.node, key);
+
+    await nextTick();
+
+    const next = keys.value[Math.min(index, keys.value.length - 1)];
+
+    focusFirstEnabled([
+        ...(next ? [`${rowSelector(next)} [data-xq-remove]`] : []),
+        '[data-xq-add]',
+    ]);
+}
+
+async function move(key: string, direction: -1 | 1): Promise<void> {
+    store.moveRow(props.node, key, direction);
+
+    await nextTick();
+
+    const row = rowSelector(key);
+
+    focusFirstEnabled([
+        `${row} [data-xq-move="${direction}"]`,
+        `${row} [data-xq-move="${-direction}"]`,
+    ]);
+}
+
+async function add(): Promise<void> {
+    const key = store.addRow(props.node);
+
+    await nextTick();
+    store.root.value
+        ?.querySelector<HTMLElement>(
+            `[data-xq-row="${CSS.escape(key)}"] input:not([type=hidden]), [data-xq-row="${CSS.escape(key)}"] button[role=combobox]`,
+        )
+        ?.focus();
+}
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+        <div ref="container" class="gap-3 grid">
+            <div
+                v-for="(key, index) in keys"
+                :key="key"
+                :data-xq-row="key"
+                role="group"
+                :aria-label="`${options.itemLabel} ${index + 1}`"
+                class="shadow-xs rounded-xq-lg border border-xq-border bg-xq-card"
+            >
+                <div
+                    class="gap-2 px-3 py-1.5 flex items-center justify-between border-b border-xq-border"
+                >
+                    <span class="text-sm font-medium text-xq-muted-foreground"
+                        >{{ options.itemLabel }} {{ index + 1 }}</span
+                    >
+                    <div class="gap-0.5 flex items-center">
+                        <template v-if="options.orderable && keys.length > 1">
+                            <XqButton
+                                type="button"
+                                variant="ghost"
+                                size="icon-sm"
+                                :disabled="disabled || index === 0"
+                                :aria-label="`Move ${options.itemLabel} ${index + 1} up`"
+                                data-xq-move="-1"
+                                @click="move(key, -1)"
+                            >
+                                <ArrowUp />
+                            </XqButton>
+                            <XqButton
+                                type="button"
+                                variant="ghost"
+                                size="icon-sm"
+                                :disabled="disabled || index === keys.length - 1"
+                                :aria-label="`Move ${options.itemLabel} ${index + 1} down`"
+                                data-xq-move="1"
+                                @click="move(key, 1)"
+                            >
+                                <ArrowDown />
+                            </XqButton>
+                        </template>
+                        <XqButton
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            class="text-xq-muted-foreground hover:text-xq-destructive"
+                            :disabled="!canRemove"
+                            :aria-label="`Remove ${options.itemLabel} ${index + 1}`"
+                            data-xq-remove
+                            @click="remove(key, index)"
+                        >
+                            <Trash2 />
+                        </XqButton>
+                    </div>
+                </div>
+                <div class="xq-grid p-3" :style="gridStyle(options.columns)">
+                    <XqNode v-for="child in rows[key] ?? []" :key="child.key" :node="child" />
+                </div>
+            </div>
+            <div
+                v-if="keys.length === 0"
+                class="px-4 py-6 text-sm rounded-xq-lg border border-dashed border-xq-border text-center text-xq-muted-foreground"
+            >
+                No {{ String(options.itemLabel ?? 'item').toLowerCase() }}s yet.
+            </div>
+            <div>
+                <XqButton
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    :disabled="!canAdd"
+                    data-xq-add
+                    @click="add"
+                >
+                    <Plus />
+                    {{ options.addLabel }}
+                </XqButton>
+            </div>
+        </div>
+    </XqFieldWrapper>
+</template>