@xelqun/forms 0.0.0-stage → 0.1.0

package/resources/js/index.ts

@@ -0,0 +1,24 @@
+export { createXelqunForms } from './plugin';
+export type { XelqunFormsOptions } from './plugin';
+
+export { default as XqForm } from './components/XqForm.vue';
+export { default as XqNode } from './components/XqNode.vue';
+export { default as XqFieldWrapper } from './components/XqFieldWrapper.vue';
+export { createRegistry, defaultComponents } from './components/defaults';
+
+export { useXqForm } from './composables/useXqForm';
+export { useField } from './composables/useField';
+export { useFormStore } from './composables/context';
+export { gridStyle, spanStyle } from './composables/layout';
+export type { ComponentResolver } from './composables/registry';
+
+export { createFormStore, defaultLiveConfig } from './core/store';
+export type { FormStore, FormStoreOptions, SubmitOptions } from './core/store';
+export type { RequestKind, RequestLogEntry } from './core/log';
+export { evaluateCondition } from './core/conditions';
+export { evaluateExpression } from './core/expressions';
+export { getPath, overlaps } from './core/paths';
+
+export * from './schema/types';
+export * from './ui';
+export { cn } from './lib/utils';

package/resources/js/lib/utils.ts

@@ -0,0 +1,18 @@
+import { clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}
+
+export function formatBytes(bytes: number | null | undefined): string {
+    if (!bytes) {
+        return '';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+
+    return `${(bytes / 1024 ** exponent).toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+}

package/resources/js/plugin.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vue';
+import { createRegistry } from './components/defaults';
+import { REGISTRY } from './composables/registry';
+import type { ComponentResolver } from './composables/registry';
+
+export interface XelqunFormsOptions {
+    /** Extra or replacement renderers keyed by schema type, e.g. { rating: () => import('./Rating.vue') }. */
+    components?: Record<string, ComponentResolver>;
+}
+
+export function createXelqunForms(options: XelqunFormsOptions = {}): Plugin {
+    return {
+        install(app) {
+            app.provide(REGISTRY, createRegistry(options.components));
+        },
+    };
+}

package/resources/js/schema/types.ts

@@ -0,0 +1,99 @@
+/**
+ * TypeScript mirror of the JSON schema contract produced by the PHP package.
+ * Bump SUPPORTED_SCHEMA_VERSIONS together with Xelqun\Forms\Schema\SchemaVersion.
+ */
+export const SUPPORTED_SCHEMA_VERSIONS = [1] as const;
+
+export type ConditionNode =
+    | { op: 'and' | 'or' | 'not'; args: ConditionNode[] }
+    | {
+          op: 'eq' | 'neq' | 'in' | 'notIn' | 'gt' | 'gte' | 'lt' | 'lte';
+          path: string;
+          value: unknown;
+      }
+    | { op: 'filled' | 'blank'; path: string };
+
+export type ExpressionNode =
+    | { lit: unknown }
+    | { ref: string }
+    | { op: string; args: ExpressionNode[] }
+    | { fn: string; args: ExpressionNode[] };
+
+export type LiveMode = 'change' | 'blur' | 'debounce';
+
+export interface LiveConfig {
+    mode: LiveMode;
+    ms: number | null;
+}
+
+export type Breakpoint = 'default' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type ColumnSpan = number | 'full' | Partial<Record<Breakpoint, number | 'full'>> | null;
+
+export interface SchemaNode {
+    key: string;
+    type: string;
+    hidden: boolean;
+    path?: string | null;
+    label?: string | null;
+    hint?: string | null;
+    placeholder?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    rules?: {
+        visible?: ConditionNode | null;
+        required?: ConditionNode | null;
+        disabled?: ConditionNode | null;
+    };
+    computed?: { src: string; ast: ExpressionNode } | null;
+    live?: LiveConfig | null;
+    span?: ColumnSpan;
+    props?: Record<string, any>;
+    children?: SchemaNode[];
+    deps?: string[];
+}
+
+export interface FormEndpoints {
+    update: string;
+    upload: string;
+    search: string;
+}
+
+export interface FormSchema {
+    $xq: number;
+    pkg: string;
+    id: string;
+    token: string | null;
+    endpoints: FormEndpoints;
+    state: { data: Record<string, any> };
+    components: SchemaNode[];
+}
+
+export interface UpdateRequest {
+    token: string;
+    seq: number;
+    state: { data: Record<string, any> };
+    changed: string[];
+    deps: Record<string, string[]>;
+}
+
+export interface UpdatePatch {
+    $xq: number;
+    seq: number;
+    set: Record<string, unknown>;
+    schema: Record<string, Partial<SchemaNode>>;
+    errors: Record<string, string | string[]>;
+}
+
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    description?: string | null;
+}
+
+export interface UploadResult {
+    token: string;
+    name: string;
+    size: number;
+    mime: string | null;
+}

package/resources/js/ui/XqBadge.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const badgeVariants = cva(
+    'gap-1 px-2 py-0.5 text-xs font-medium [&>svg]:size-3 inline-flex w-fit shrink-0 items-center rounded-full border whitespace-nowrap',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent bg-xq-primary text-xq-primary-foreground',
+                secondary: 'border-transparent bg-xq-secondary text-xq-secondary-foreground',
+                outline: 'border-xq-border text-xq-foreground',
+                success: 'border-transparent bg-xq-success/15 text-xq-success',
+                destructive: 'border-transparent bg-xq-destructive/15 text-xq-destructive',
+            },
+        },
+        defaultVariants: { variant: 'default' },
+    },
+);
+
+const props = defineProps<{
+    variant?: VariantProps<typeof badgeVariants>['variant'];
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span data-slot="xq-badge" :class="cn(badgeVariants({ variant }), props.class)">
+        <slot />
+    </span>
+</template>

package/resources/js/ui/XqButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { Primitive } from 'reka-ui';
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+    'gap-2 text-sm font-medium [&_svg:not([class*=size-])]:size-4 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-xq-md whitespace-nowrap transition-[color,background-color,box-shadow,opacity] outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default:
+                    'shadow-xs bg-xq-primary text-xq-primary-foreground hover:bg-xq-primary/90',
+                secondary: 'bg-xq-secondary text-xq-secondary-foreground hover:bg-xq-secondary/80',
+                outline:
+                    'shadow-xs border border-xq-border bg-xq-background text-xq-foreground hover:bg-xq-accent hover:text-xq-accent-foreground',
+                ghost: 'text-xq-foreground hover:bg-xq-accent hover:text-xq-accent-foreground',
+                destructive:
+                    'shadow-xs bg-xq-destructive text-xq-destructive-foreground hover:bg-xq-destructive/90',
+                link: 'text-xq-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                sm: 'h-8 gap-1.5 px-3 text-xs',
+                lg: 'h-10 px-6',
+                icon: 'size-9',
+                'icon-sm': 'size-7',
+            },
+        },
+        defaultVariants: { variant: 'default', size: 'default' },
+    },
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            variant?: ButtonVariants['variant'];
+            size?: ButtonVariants['size'];
+            class?: HTMLAttributes['class'];
+        }
+    >(),
+    { as: 'button' },
+);
+</script>
+
+<template>
+    <Primitive
+        data-slot="xq-button"
+        :as="as"
+        :as-child="asChild"
+        :class="cn(buttonVariants({ variant, size }), props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

package/resources/js/ui/XqCalendar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date';
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
+import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNext,
+    CalendarPrev,
+    CalendarRoot,
+} from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    placeholder?: DateValue;
+    class?: HTMLAttributes['class'];
+}>();
+const model = defineModel<DateValue | undefined>();
+
+const navClass =
+    'inline-flex size-7 cursor-pointer items-center justify-center rounded-xq-md border border-xq-border bg-transparent opacity-70 hover:bg-xq-accent hover:opacity-100 disabled:pointer-events-none disabled:opacity-30';
+</script>
+
+<template>
+    <CalendarRoot
+        v-slot="{ grid, weekDays }"
+        v-model="model as any"
+        :min-value="minValue"
+        :max-value="maxValue"
+        :placeholder="placeholder"
+        fixed-weeks
+        weekday-format="short"
+        data-slot="xq-calendar"
+        :class="cn('p-3', props.class)"
+    >
+        <CalendarHeader class="relative flex w-full items-center justify-between">
+            <CalendarPrev :class="navClass"><ChevronLeft class="size-4" /></CalendarPrev>
+            <CalendarHeading class="text-sm font-medium" />
+            <CalendarNext :class="navClass"><ChevronRight class="size-4" /></CalendarNext>
+        </CalendarHeader>
+        <div class="mt-3 gap-y-4 flex flex-col">
+            <CalendarGrid
+                v-for="month in grid"
+                :key="month.value.toString()"
+                class="w-full border-collapse"
+            >
+                <CalendarGridHead>
+                    <CalendarGridRow class="flex">
+                        <CalendarHeadCell
+                            v-for="day in weekDays"
+                            :key="day"
+                            class="w-8 font-normal text-[0.75rem] text-xq-muted-foreground"
+                        >
+                            {{ day.slice(0, 2) }}
+                        </CalendarHeadCell>
+                    </CalendarGridRow>
+                </CalendarGridHead>
+                <CalendarGridBody>
+                    <CalendarGridRow
+                        v-for="(weekDates, index) in month.rows"
+                        :key="index"
+                        class="mt-1 flex w-full"
+                    >
+                        <CalendarCell
+                            v-for="weekDate in weekDates"
+                            :key="weekDate.toString()"
+                            :date="weekDate"
+                            class="p-0 text-sm relative text-center"
+                        >
+                            <CalendarCellTrigger
+                                :day="weekDate"
+                                :month="month.value"
+                                class="size-8 text-sm font-normal data-[today]:font-semibold inline-flex cursor-pointer items-center justify-center rounded-xq-md outline-none hover:bg-xq-accent focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-view]:text-xq-muted-foreground/60 data-[selected]:bg-xq-primary data-[selected]:text-xq-primary-foreground data-[today]:text-xq-primary data-[selected]:data-[today]:text-xq-primary-foreground data-[unavailable]:line-through"
+                            />
+                        </CalendarCell>
+                    </CalendarGridRow>
+                </CalendarGridBody>
+            </CalendarGrid>
+        </div>
+    </CalendarRoot>
+</template>

package/resources/js/ui/XqCard.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div
+        data-slot="xq-card"
+        :class="
+            cn(
+                'shadow-xs rounded-xq-lg border border-xq-border bg-xq-card text-xq-card-foreground',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </div>
+</template>

package/resources/js/ui/XqCheckbox.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next';
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ id?: string; disabled?: boolean; class?: HTMLAttributes['class'] }>();
+const model = defineModel<boolean>({ default: false });
+</script>
+
+<template>
+    <CheckboxRoot
+        :id="id"
+        v-model="model"
+        data-slot="xq-checkbox"
+        :disabled="disabled"
+        :class="
+            cn(
+                'peer size-4 shadow-xs shrink-0 cursor-pointer rounded-[4px] border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-xq-destructive data-[state=checked]:border-xq-primary data-[state=checked]:bg-xq-primary data-[state=checked]:text-xq-primary-foreground',
+                props.class,
+            )
+        "
+    >
+        <CheckboxIndicator class="flex items-center justify-center text-current">
+            <Check class="size-3.5" :stroke-width="3" />
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>

package/resources/js/ui/XqCombobox.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { Check, ChevronsUpDown, LoaderCircle, X } from 'lucide-vue-next';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxPortal,
+    ComboboxRoot,
+    ComboboxTrigger,
+    ComboboxViewport,
+} from 'reka-ui';
+import { computed, reactive, ref, watch } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import type { SelectOption } from '../schema/types';
+import { controlClass, optionClass, popoverClass } from './classes';
+
+type Value = string | number;
+
+const props = defineProps<{
+    id?: string;
+    options: SelectOption[];
+    multiple?: boolean;
+    remote?: boolean;
+    loading?: boolean;
+    placeholder?: string | null;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    searchFailed?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
+const emit = defineEmits<{ search: [term: string]; blur: [] }>();
+const model = defineModel<Value | Value[] | null>();
+const searchTerm = ref('');
+const labels = reactive(new Map<string, string>());
+
+watch(
+    () => props.options,
+    (options) => options.forEach((option) => labels.set(String(option.value), option.label)),
+    { immediate: true, deep: true },
+);
+
+const selectedValues = computed<Value[]>(() => {
+    if (Array.isArray(model.value)) {
+        return model.value;
+    }
+
+    return model.value === null || model.value === undefined || model.value === ''
+        ? []
+        : [model.value];
+});
+
+function labelFor(value: unknown): string {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    return labels.get(String(value)) ?? String(value);
+}
+
+function remove(value: Value): void {
+    model.value = selectedValues.value.filter((item) => item !== value);
+}
+
+function clear(): void {
+    model.value = props.multiple ? [] : null;
+    searchTerm.value = '';
+}
+</script>
+
+<template>
+    <ComboboxRoot
+        v-model="model as any"
+        :multiple="multiple"
+        :disabled="disabled"
+        :ignore-filter="remote"
+        open-on-click
+        :reset-search-term-on-blur="!multiple"
+        @update:open="(open) => !open && emit('blur')"
+    >
+        <ComboboxAnchor
+            data-slot="xq-combobox"
+            :class="
+                cn(
+                    controlClass,
+                    'min-h-9 gap-1 py-0.5 pr-1.5 pl-2 flex flex-wrap items-center has-[input:focus-visible]:border-xq-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-xq-ring/25',
+                    invalid && 'border-xq-destructive',
+                    props.class,
+                )
+            "
+        >
+            <template v-if="multiple">
+                <span
+                    v-for="value in selectedValues"
+                    :key="String(value)"
+                    class="gap-1 py-0.5 pr-1 pl-2 text-xs font-medium inline-flex items-center rounded-xq-sm bg-xq-secondary text-xq-secondary-foreground"
+                >
+                    {{ labelFor(value) }}
+                    <button
+                        type="button"
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="`Remove ${labelFor(value)}`"
+                        :disabled="disabled"
+                        @click.stop="remove(value)"
+                    >
+                        <X class="size-3" />
+                    </button>
+                </span>
+            </template>
+            <ComboboxInput
+                :id="id"
+                v-model="searchTerm"
+                @input="emit('search', ($event.target as HTMLInputElement).value)"
+                :display-value="multiple ? undefined : labelFor"
+                :placeholder="selectedValues.length && multiple ? '' : (placeholder ?? 'Search…')"
+                :aria-invalid="invalid || undefined"
+                :aria-describedby="describedBy"
+                class="h-7 min-w-16 px-1 text-sm flex-1 bg-transparent outline-none placeholder:text-xq-muted-foreground disabled:cursor-not-allowed"
+            />
+            <LoaderCircle
+                v-if="loading"
+                class="size-4 motion-safe:animate-spin shrink-0 text-xq-muted-foreground"
+            />
+            <button
+                v-else-if="selectedValues.length && !disabled"
+                type="button"
+                class="size-6 rounded-sm flex cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
+                aria-label="Clear selection"
+                @click.stop="clear"
+            >
+                <X class="size-3.5" />
+            </button>
+            <ComboboxTrigger
+                class="size-6 flex cursor-pointer items-center justify-center text-xq-muted-foreground"
+            >
+                <ChevronsUpDown class="size-4" />
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+        <ComboboxPortal>
+            <ComboboxContent
+                position="popper"
+                :side-offset="4"
+                :class="cn(popoverClass, 'max-h-72 min-w-40 w-(--reka-combobox-trigger-width)')"
+            >
+                <ComboboxViewport class="p-1">
+                    <p
+                        v-if="searchFailed"
+                        role="status"
+                        class="px-2 py-1.5 text-xs text-xq-destructive"
+                    >
+                        The search failed. Type again to retry.
+                    </p>
+                    <ComboboxEmpty class="px-2 py-6 text-sm text-center text-xq-muted-foreground">
+                        {{
+                            loading
+                                ? 'Searching…'
+                                : searchTerm || !remote
+                                  ? 'No results'
+                                  : 'Type to search'
+                        }}
+                    </ComboboxEmpty>
+                    <ComboboxItem
+                        v-for="option in options"
+                        :key="String(option.value)"
+                        :value="option.value"
+                        :text-value="option.label"
+                        :class="optionClass"
+                    >
+                        <span class="truncate">{{ option.label }}</span>
+                        <ComboboxItemIndicator
+                            class="right-2 size-3.5 absolute flex items-center justify-center"
+                        >
+                            <Check class="size-4" />
+                        </ComboboxItemIndicator>
+                    </ComboboxItem>
+                </ComboboxViewport>
+            </ComboboxContent>
+        </ComboboxPortal>
+    </ComboboxRoot>
+</template>

package/resources/js/ui/XqInput.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import { controlClass } from './classes';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+const model = defineModel<string | number | null>();
+</script>
+
+<template>
+    <input
+        v-model="model"
+        data-slot="xq-input"
+        :class="cn(controlClass, 'h-9 px-3 py-1', props.class)"
+    />
+</template>

package/resources/js/ui/XqLabel.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Label } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ for?: string; class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <Label
+        data-slot="xq-label"
+        :for="props.for"
+        :class="cn('text-sm font-medium leading-none text-xq-foreground select-none', props.class)"
+    >
+        <slot />
+    </Label>
+</template>

package/resources/js/ui/XqRadioGroup.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { RadioGroupRoot } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    class?: HTMLAttributes['class'];
+}>();
+const model = defineModel<string | number | null>();
+</script>
+
+<template>
+    <RadioGroupRoot
+        v-model="model"
+        data-slot="xq-radio-group"
+        :disabled="disabled"
+        :orientation="orientation"
+        :class="cn('gap-2.5 grid', props.class)"
+    >
+        <slot />
+    </RadioGroupRoot>
+</template>

package/resources/js/ui/XqRadioGroupItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{
+    id?: string;
+    value: string | number;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <RadioGroupItem
+        :id="id"
+        data-slot="xq-radio-group-item"
+        :value="value"
+        :disabled="disabled"
+        :class="
+            cn(
+                'size-4 shadow-xs aspect-square shrink-0 cursor-pointer rounded-full border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-xq-primary',
+                props.class,
+            )
+        "
+    >
+        <RadioGroupIndicator class="flex items-center justify-center">
+            <span class="size-2 rounded-full bg-xq-primary" />
+        </RadioGroupIndicator>
+    </RadioGroupItem>
+</template>