@xelqun/forms 0.1.0 → 0.2.0

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

@@ -1,18 +1,38 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { Check, Copy, Eye, EyeOff, LoaderCircle } from 'lucide-vue-next';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useField } from '../../composables/useField';
+import { applyMask } from '../../core/mask';
 import { isNumeric, toNumber } from '../../core/values';
 import { cn } from '../../lib/utils';
 import type { SchemaNode } from '../../schema/types';
-import { controlClass } from '../../ui/classes';
+import { controlClass, spinnerClass } from '../../ui/classes';
+import XqIcon from '../../ui/XqIcon.vue';
 import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
 
+const t = useTranslator();
 const props = defineProps<{ node: SchemaNode }>();
-const { path, value, error, describedBy, required, disabled, id, onBlur } = useField(props.node);
+const {
+    path,
+    value,
+    error,
+    placeholder,
+    describedBy,
+    showLoading,
+    required,
+    disabled,
+    readOnly,
+    id,
+    onBlur,
+} = useField(props.node);
 const options = computed(() => props.node.props ?? {});
+const inputDisabled = computed(() => disabled.value && !readOnly.value);
 
 function format(next: unknown): string {
-    return next === null || next === undefined ? '' : String(next);
+    const value = next === null || next === undefined ? '' : String(next);
+
+    return options.value.mask ? applyMask(value, options.value.mask) : value;
 }
 
 /**
@@ -32,7 +52,20 @@ watch(value, (next) => {
 });
 
 function onInput(event: Event): void {
-    text.value = (event.target as HTMLInputElement).value;
+    const input = event.target as HTMLInputElement;
+
+    if (options.value.mask) {
+        const typed = input.value;
+        const caret = input.selectionStart ?? typed.length;
+
+        input.value = applyMask(typed, options.value.mask);
+
+        const position = Math.max(0, caret + input.value.length - typed.length);
+
+        input.setSelectionRange?.(position, position);
+    }
+
+    text.value = input.value;
 
     if (!options.value.numeric) {
         value.value = text.value;
@@ -44,20 +77,54 @@ function onInput(event: Event): void {
     value.value = trimmed === '' ? null : isNumeric(trimmed) ? toNumber(trimmed) : trimmed;
 }
 
-const inputType = computed(() =>
-    options.value.numeric ? 'text' : (options.value.inputType ?? 'text'),
-);
+const revealed = ref(false);
+const inputType = computed(() => {
+    if (options.value.numeric || (revealed.value && options.value.revealable)) {
+        return 'text';
+    }
+
+    return options.value.inputType ?? 'text';
+});
+
+const copied = ref(false);
+let copiedTimer: ReturnType<typeof setTimeout> | null = null;
+
+async function copy(): Promise<void> {
+    if (!navigator.clipboard) {
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(text.value);
+    } catch {
+        return;
+    }
+
+    copied.value = true;
+
+    if (copiedTimer) {
+        clearTimeout(copiedTimer);
+    }
+
+    copiedTimer = setTimeout(() => (copied.value = false), options.value.copyable?.duration);
+}
+
+onBeforeUnmount(() => {
+    if (copiedTimer) {
+        clearTimeout(copiedTimer);
+    }
+});
 </script>
 
 <template>
-    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required" control-shows-loading>
         <div
             :class="
                 cn(
                     controlClass,
                     'h-9 flex items-center overflow-hidden focus-within:border-xq-ring focus-within:ring-[3px] focus-within:ring-xq-ring/25',
                     error && 'border-xq-destructive',
-                    disabled && 'bg-xq-muted/60',
+                    inputDisabled && 'bg-xq-muted/60',
                 )
             "
         >
@@ -67,17 +134,24 @@ const inputType = computed(() =>
             >
                 {{ options.prefix }}
             </span>
+            <XqIcon
+                v-if="options.prefixIcon"
+                :name="options.prefixIcon"
+                class="ml-3 text-xq-muted-foreground"
+            />
             <input
                 :id="id"
                 :name="path"
                 :value="text"
                 :type="inputType"
                 :inputmode="options.numeric ? 'decimal' : undefined"
-                :placeholder="node.placeholder ?? undefined"
-                :disabled="disabled"
+                :placeholder="placeholder ?? undefined"
+                :disabled="inputDisabled"
+                :readonly="readOnly"
                 :required="required"
                 :maxlength="options.maxLength ?? undefined"
                 :autocomplete="options.autocomplete ?? undefined"
+                :list="options.datalist ? `${id}-list` : undefined"
                 :aria-invalid="error ? true : undefined"
                 :aria-describedby="describedBy"
                 :class="
@@ -89,6 +163,41 @@ const inputType = computed(() =>
                 @input="onInput"
                 @blur="onBlur"
             />
+            <datalist v-if="options.datalist" :id="`${id}-list`">
+                <option
+                    v-for="suggestion in options.datalist"
+                    :key="suggestion"
+                    :value="suggestion"
+                />
+            </datalist>
+            <LoaderCircle v-if="showLoading" :class="cn(spinnerClass, 'mr-3')" aria-hidden="true" />
+            <XqIcon
+                v-if="options.suffixIcon"
+                :name="options.suffixIcon"
+                class="mr-3 text-xq-muted-foreground"
+            />
+            <button
+                v-if="options.revealable"
+                type="button"
+                class="mr-2 size-6 rounded-sm flex cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
+                :aria-label="revealed ? t('Hide password') : t('Show password')"
+                :aria-pressed="revealed"
+                @click="revealed = !revealed"
+            >
+                <component :is="revealed ? EyeOff : Eye" class="size-4" />
+            </button>
+            <button
+                v-if="options.copyable"
+                type="button"
+                class="mr-2 size-6 rounded-sm flex cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
+                :aria-label="t('Copy')"
+                @click="copy"
+            >
+                <component :is="copied ? Check : Copy" class="size-4" />
+            </button>
+            <span v-if="options.copyable" role="status" class="sr-only">{{
+                copied ? options.copyable.message : ''
+            }}</span>
             <span
                 v-if="options.suffix"
                 class="px-3 text-sm flex h-full items-center border-l border-xq-input bg-xq-muted text-xq-muted-foreground"

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

@@ -1,28 +1,51 @@
 <script setup lang="ts">
+import { LoaderCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
 import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
 import type { SchemaNode } from '../../schema/types';
+import { spinnerClass } from '../../ui/classes';
 import XqTextarea from '../../ui/XqTextarea.vue';
 import XqFieldWrapper from '../XqFieldWrapper.vue';
 
 const props = defineProps<{ node: SchemaNode }>();
-const { path, value, error, describedBy, required, disabled, id, onBlur } = useField<string | null>(
-    props.node,
-);
+const {
+    path,
+    value,
+    error,
+    placeholder,
+    describedBy,
+    showLoading,
+    required,
+    disabled,
+    readOnly,
+    id,
+    onBlur,
+} = useField<string | null>(props.node);
+const inputDisabled = computed(() => disabled.value && !readOnly.value);
 </script>
 
 <template>
-    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
-        <XqTextarea
-            :id="id"
-            v-model="value"
-            :name="path"
-            :rows="node.props?.rows ?? 3"
-            :maxlength="node.props?.maxLength ?? undefined"
-            :placeholder="node.placeholder ?? undefined"
-            :disabled="disabled"
-            :aria-invalid="error ? true : undefined"
-            :aria-describedby="describedBy"
-            @blur="onBlur"
-        />
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required" control-shows-loading>
+        <div class="relative">
+            <XqTextarea
+                :id="id"
+                v-model="value"
+                :name="path"
+                :rows="node.props?.rows ?? 3"
+                :maxlength="node.props?.maxLength ?? undefined"
+                :placeholder="placeholder ?? undefined"
+                :disabled="inputDisabled"
+                :readonly="readOnly"
+                :aria-invalid="error ? true : undefined"
+                :aria-describedby="describedBy"
+                @blur="onBlur"
+            />
+            <LoaderCircle
+                v-if="showLoading"
+                :class="cn(spinnerClass, 'top-2.5 right-2.5 absolute')"
+                aria-hidden="true"
+            />
+        </div>
     </XqFieldWrapper>
 </template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui';
+import { computed } from 'vue';
+import { gridStyle } from '../../composables/layout';
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode, SelectOption } from '../../schema/types';
+import XqIcon from '../../ui/XqIcon.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+type Value = string | number;
+type ToggleOption = SelectOption & { color?: string | null; icon?: string | null };
+
+const PRESSED: Record<string, string> = {
+    primary: 'data-[state=on]:bg-xq-primary data-[state=on]:text-xq-primary-foreground',
+    success: 'data-[state=on]:bg-xq-success data-[state=on]:text-white',
+    danger: 'data-[state=on]:bg-xq-destructive data-[state=on]:text-xq-destructive-foreground',
+    warning: 'data-[state=on]:bg-amber-500 data-[state=on]:text-black',
+    info: 'data-[state=on]:bg-sky-600 data-[state=on]:text-white',
+};
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, label, describedBy, required, disabled, id } = useField<
+    Value | Value[] | null
+>(props.node);
+const options = computed<ToggleOption[]>(() => props.node.props?.options ?? []);
+const isMultiple = computed(() => !!props.node.props?.multiple);
+const isGrouped = computed(() => !!props.node.props?.grouped);
+const isInline = computed(() => !!props.node.props?.inline);
+const isGrid = computed(() => !isGrouped.value && !isInline.value);
+
+const model = computed<any>({
+    get: () => value.value ?? undefined,
+    set: (next) => (value.value = next ?? (isMultiple.value ? [] : null)),
+});
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <ToggleGroupRoot
+            v-model="model"
+            :type="isMultiple ? 'multiple' : 'single'"
+            :disabled="disabled"
+            :aria-labelledby="label ? `${id}-label` : undefined"
+            :aria-describedby="describedBy"
+            :style="isGrid ? gridStyle(node.props?.columns) : undefined"
+            :class="
+                cn(
+                    isGrid && 'xq-grid gap-2',
+                    isInline && 'gap-2 flex flex-wrap',
+                    isGrouped && 'shadow-xs inline-flex w-fit rounded-xq-md',
+                )
+            "
+        >
+            <ToggleGroupItem
+                v-for="option in options"
+                :key="String(option.value)"
+                :value="option.value"
+                :disabled="option.disabled"
+                :class="
+                    cn(
+                        'gap-2 h-9 px-3 text-sm font-medium inline-flex cursor-pointer items-center justify-center border border-xq-input bg-xq-background text-xq-foreground transition-colors outline-none hover:bg-xq-accent focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-50',
+                        isGrouped
+                            ? 'first:ml-0 -ml-px first:rounded-l-xq-md last:rounded-r-xq-md'
+                            : 'rounded-xq-md',
+                        PRESSED[option.color ?? 'primary'],
+                    )
+                "
+            >
+                <XqIcon v-if="option.icon" :name="option.icon" />
+                {{ option.label }}
+            </ToggleGroupItem>
+        </ToggleGroupRoot>
+    </XqFieldWrapper>
+</template>

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

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { LoaderCircle } from 'lucide-vue-next';
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
+import XqFieldSlot from '../XqFieldSlot.vue';
+import { FUSED_GROUP } from '../../composables/context';
 import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
 import type { SchemaNode } from '../../schema/types';
 import XqLabel from '../../ui/XqLabel.vue';
 import XqSwitch from '../../ui/XqSwitch.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 { store, value, error, label, hint, loading, showLoading, required, disabled, id } =
+    useField<boolean>(props.node);
+const fused = inject(FUSED_GROUP, false);
+const hasHint = computed(() => !!(props.node.props?.description || hint.value));
 const describedBy = computed(() =>
     error.value ? `${id}-error` : hasHint.value ? `${id}-hint` : undefined,
 );
@@ -16,7 +21,10 @@ const describedBy = computed(() =>
 
 <template>
     <div class="gap-2 grid" :data-xq-path="node.path" :aria-busy="loading || undefined">
+        <XqFieldSlot :node="node" name="aboveContent" />
         <div class="gap-3 flex items-start">
+            <XqFieldSlot :node="node" name="beforeContent" />
+            <XqFieldSlot :node="node" name="prefixAction" />
             <XqSwitch
                 :id="id"
                 v-model="value"
@@ -25,23 +33,39 @@ const describedBy = computed(() =>
                 :aria-describedby="describedBy"
             />
             <div class="gap-1.5 grid">
-                <XqLabel :for="id" class="gap-0.5 leading-5 cursor-pointer">
-                    {{ node.label }}
+                <XqFieldSlot :node="node" name="aboveLabel" />
+                <XqFieldSlot :node="node" name="beforeLabel" />
+                <XqLabel
+                    :for="id"
+                    :class="cn('gap-0.5 leading-5 cursor-pointer', node.hiddenLabel && 'sr-only')"
+                >
+                    {{ label }}
                     <span v-if="required" class="text-xq-destructive" aria-hidden="true">*</span>
-                    <span v-if="required" class="sr-only">(required)</span>
+                    <span v-if="required" class="sr-only">{{ store.t('(required)') }}</span>
                     <LoaderCircle
-                        v-if="loading"
+                        v-if="showLoading"
                         class="ml-1 size-3 motion-safe:animate-spin text-xq-muted-foreground"
                         aria-hidden="true"
                     />
                 </XqLabel>
+                <XqFieldSlot :node="node" name="afterLabel" />
+                <XqFieldSlot :node="node" name="belowLabel" />
                 <p v-if="hasHint" :id="`${id}-hint`" class="text-xs text-xq-muted-foreground">
-                    {{ node.props?.description ?? node.hint }}
+                    {{ node.props?.description ?? hint }}
                 </p>
             </div>
+            <XqFieldSlot class="ms-auto" :node="node" name="suffixAction" />
+            <XqFieldSlot :node="node" name="afterContent" />
         </div>
-        <p v-if="error" :id="`${id}-error`" class="text-xs font-medium text-xq-destructive">
+        <XqFieldSlot :node="node" name="belowContent" />
+        <XqFieldSlot :node="node" name="aboveErrorMessage" />
+        <p
+            v-if="error && !fused"
+            :id="`${id}-error`"
+            class="text-xs font-medium text-xq-destructive"
+        >
             {{ error }}
         </p>
+        <XqFieldSlot :node="node" name="belowErrorMessage" />
     </div>
 </template>

package/resources/js/components/layouts/XqActions.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import XqNode from '../XqNode.vue';
+
+defineProps<{ node: SchemaNode }>();
+
+const alignments: Record<string, string> = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+};
+</script>
+
+<template>
+    <div :class="cn('gap-2 flex flex-wrap items-center', alignments[node.props?.alignment])">
+        <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+    </div>
+</template>

package/resources/js/components/layouts/XqBlock.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useFormStore, useTranslator } from '../../composables/context';
+import { gridStyle } from '../../composables/layout';
+import { eachNode } from '../../core/patch';
+import type { SchemaNode } from '../../schema/types';
+import XqButton from '../../ui/XqButton.vue';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const store = useFormStore();
+const t = useTranslator();
+const editingByHand = ref(false);
+const preview = computed<string | null>(() => props.node.props?.preview ?? null);
+// An error has to be seen, so a block with one always shows its fields.
+const hasError = computed(() => {
+    let found = false;
+
+    eachNode(props.node.children ?? [], (child) => {
+        found ||= !!(child.path && store.errors[child.path]);
+    });
+
+    return found;
+});
+const editing = computed(() => editingByHand.value || hasError.value);
+</script>
+
+<template>
+    <div class="gap-3 grid">
+        <template v-if="preview !== null">
+            <!-- Rendered on the server by the form's author, who escapes what users typed. -->
+            <div v-show="!editing" data-xq-block-preview v-html="preview" />
+            <div>
+                <XqButton
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    @click="editingByHand = !editing"
+                >
+                    {{ editing ? t('Show preview') : t('Edit block') }}
+                </XqButton>
+            </div>
+        </template>
+        <div
+            v-show="preview === null || editing"
+            class="xq-grid"
+            :style="gridStyle(node.props?.columns)"
+        >
+            <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+        </div>
+    </div>
+</template>

package/resources/js/components/layouts/XqCallout.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { toneClasses } from '../../ui/classes';
+import XqIcon from '../../ui/XqIcon.vue';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const options = computed(() => props.node.props ?? {});
+
+const surfaces: Record<string, string> = {
+    danger: 'border-xq-destructive/40 bg-xq-destructive/10',
+    info: 'border-xq-info/40 bg-xq-info/10',
+    success: 'border-xq-success/40 bg-xq-success/10',
+    warning: 'border-xq-warning/40 bg-xq-warning/10',
+};
+</script>
+
+<template>
+    <div
+        :class="
+            cn(
+                'gap-3 p-4 flex items-start rounded-xq-lg border border-xq-border bg-xq-card text-xq-card-foreground',
+                surfaces[options.status],
+            )
+        "
+    >
+        <XqIcon
+            v-if="options.icon"
+            :name="options.icon"
+            :class="cn('mt-0.5 size-5', toneClasses[options.status])"
+        />
+        <div class="gap-3 min-w-0 grid flex-1">
+            <div class="gap-1 grid">
+                <p v-if="node.label" class="text-sm font-semibold">{{ node.label }}</p>
+                <p v-if="options.description" class="text-sm text-xq-muted-foreground">
+                    {{ options.description }}
+                </p>
+            </div>
+            <div v-if="node.children?.length" class="gap-2 flex flex-wrap items-center">
+                <XqNode v-for="child in node.children" :key="child.key" :node="child" />
+            </div>
+        </div>
+    </div>
+</template>

package/resources/js/components/layouts/XqEmptyState.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import XqIcon from '../../ui/XqIcon.vue';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const options = computed(() => props.node.props ?? {});
+</script>
+
+<template>
+    <div
+        :class="
+            cn(
+                'gap-3 p-8 flex flex-col items-center text-center',
+                options.contained && 'rounded-xq-lg border border-dashed border-xq-border',
+            )
+        "
+    >
+        <span
+            v-if="options.icon"
+            class="size-10 flex items-center justify-center rounded-full bg-xq-muted text-xq-muted-foreground"
+        >
+            <XqIcon :name="options.icon" class="size-5" />
+        </span>
+        <div class="gap-1 grid">
+            <p class="text-sm font-semibold">{{ node.label }}</p>
+            <p v-if="options.description" class="text-sm text-xq-muted-foreground">
+                {{ options.description }}
+            </p>
+        </div>
+        <div v-if="node.children?.length" class="gap-2 flex flex-wrap items-center justify-center">
+            <XqNode v-for="child in node.children" :key="child.key" :node="child" />
+        </div>
+    </div>
+</template>

package/resources/js/components/layouts/XqFlex.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+
+const directions: Record<string, string> = {
+    sm: 'flex-col sm:flex-row',
+    md: 'flex-col md:flex-row',
+    lg: 'flex-col lg:flex-row',
+    xl: 'flex-col xl:flex-row',
+    '2xl': 'flex-col 2xl:flex-row',
+};
+const direction = computed(() => directions[props.node.props?.from] ?? 'flex-row');
+</script>
+
+<template>
+    <div :class="cn('xq-flex gap-4 flex', direction)">
+        <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+    </div>
+</template>

package/resources/js/components/layouts/XqFusedGroup.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue';
+import { FUSED_GROUP, useFormStore } from '../../composables/context';
+import { gridStyle } from '../../composables/layout';
+import { fieldId } from '../../composables/useField';
+import { eachNode } from '../../core/patch';
+import type { SchemaNode } from '../../schema/types';
+import XqNode from '../XqNode.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const store = useFormStore();
+const fields = computed(() => {
+    const found: SchemaNode[] = [];
+    eachNode(props.node.children ?? [], (child) => child.path && found.push(child));
+
+    return found;
+});
+const required = computed(() => fields.value.some((field) => store.isRequired(field)));
+const errors = computed(() =>
+    fields.value.flatMap((field) =>
+        store.errors[field.path!]
+            ? [{ id: `${fieldId(store, field.path!)}-error`, message: store.errors[field.path!] }]
+            : [],
+    ),
+);
+
+provide(FUSED_GROUP, true);
+</script>
+
+<template>
+    <div class="gap-2 grid" role="group" :aria-label="node.label ?? undefined">
+        <p v-if="node.label" class="gap-0.5 text-sm font-medium flex leading-none">
+            {{ node.label }}
+            <span v-if="required" class="text-xq-destructive" aria-hidden="true">*</span>
+        </p>
+        <div class="xq-grid xq-fused" :style="gridStyle(node.props?.columns)">
+            <XqNode v-for="child in node.children ?? []" :key="child.key" :node="child" />
+        </div>
+        <p
+            v-for="item in errors"
+            :id="item.id"
+            :key="item.id"
+            class="text-xs font-medium text-xq-destructive"
+        >
+            {{ item.message }}
+        </p>
+    </div>
+</template>