@xelqun/forms 0.1.1 → 0.2.0

package/resources/js/components/XqForm.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { CircleAlert } from 'lucide-vue-next';
 import { computed, inject, onMounted, provide, ref } from 'vue';
-import { HEADING_LEVEL, provideFormStore } from '../composables/context';
+import { FUSED_GROUP, HEADING_LEVEL, provideFormStore } from '../composables/context';
 import { REGISTRY } from '../composables/registry';
+import { useUnsavedChangesAlert } from '../composables/useUnsavedChangesAlert';
 import { useXqForm } from '../composables/useXqForm';
 import type { FormStore } from '../core/store';
 import { cn } from '../lib/utils';
@@ -22,7 +23,7 @@ const props = withDefaults(
         headingLevel?: 2 | 3 | 4 | 5 | 6;
         class?: string;
     }>(),
-    { method: 'post', submitLabel: 'Save', headingLevel: 2, preserveState: 'errors' },
+    { method: 'post', headingLevel: 2, preserveState: 'errors' },
 );
 const emit = defineEmits<{
     submit: [store: FormStore];
@@ -41,15 +42,36 @@ const errorCount = computed(() => Object.keys(store.errors).length);
 
 provideFormStore(store);
 provide(HEADING_LEVEL, props.headingLevel);
+// A modal opened from inside a fused group shows its fields' errors as usual.
+provide(FUSED_GROUP, false);
 provide(REGISTRY, inject(REGISTRY, null) ?? createRegistry());
 
+useUnsavedChangesAlert(store);
+
 const root = ref<HTMLFormElement | null>(null);
 
 onMounted(() => {
     store.root.value = root.value;
+
+    const first = [...store.nodes.values()].find(
+        (node) => node.autofocus && node.path && store.isVisible(node),
+    );
+
+    if (first) {
+        void store.focusPath(first.path!);
+    }
 });
 
+const unfinishedStepper = computed(() => [...store.steppers].find((item) => item.hasNext()));
+
 function submit(): void {
+    // Enter in a field of an unfinished wizard means "next", not "save".
+    if (unfinishedStepper.value) {
+        void unfinishedStepper.value.next();
+
+        return;
+    }
+
     if (!props.action) {
         emit('submit', store);
 
@@ -78,7 +100,11 @@ function submit(): void {
         </div>
         <p role="status" class="sr-only">
             <template v-if="errorCount">
-                {{ errorCount }} {{ errorCount === 1 ? 'field needs' : 'fields need' }} attention.
+                {{
+                    errorCount === 1
+                        ? store.t('1 field needs attention.')
+                        : store.t(':count fields need attention.', { count: errorCount })
+                }}
             </template>
         </p>
         <div
@@ -105,7 +131,7 @@ function submit(): void {
                 :disabled="syncing"
                 @click="store.queue.retry()"
             >
-                Try again
+                {{ store.t('Try again') }}
             </XqButton>
         </div>
         <slot
@@ -114,13 +140,14 @@ function submit(): void {
             :processing="processing"
             :uploading="uploading"
             :submit="submit"
+            :has-next-step="!!unfinishedStepper"
         >
-            <div v-if="action" class="gap-3 flex items-center justify-end">
-                <span v-if="uploading" class="text-xs text-xq-muted-foreground"
-                    >Waiting for uploads…</span
-                >
+            <div v-if="action && !unfinishedStepper" class="gap-3 flex items-center justify-end">
+                <span v-if="uploading" class="text-xs text-xq-muted-foreground">{{
+                    store.t('Waiting for uploads…')
+                }}</span>
                 <XqButton type="submit" :disabled="processing">
-                    {{ processing ? 'Saving…' : submitLabel }}
+                    {{ processing ? store.t('Saving…') : (submitLabel ?? store.t('Save')) }}
                 </XqButton>
             </div>
         </slot>

package/resources/js/components/XqNode.vue

@@ -15,7 +15,14 @@ const component = computed(() => registry?.get(props.node.type) ?? null);
 </script>
 
 <template>
-    <div v-if="visible" class="xq-cell" :style="spanStyle(node.span)" :data-xq-key="node.key">
+    <div
+        v-if="visible"
+        v-bind="node.extraAttributes"
+        class="xq-cell"
+        :style="spanStyle(node.span)"
+        :data-xq-key="node.key"
+        :data-xq-grow="node.grow === false ? 'false' : undefined"
+    >
         <component :is="component" v-if="component" :node="node" />
         <XqUnknownNode v-else :node="node" />
     </div>

package/resources/js/components/XqUnknownNode.vue

@@ -10,6 +10,7 @@ defineProps<{ node: SchemaNode }>();
     >
         No component is registered for type
         <code class="font-mono font-semibold">{{ node.type }}</code> ({{ node.key }}). Register one
-        with <code class="font-mono">createXelqunForms({ components })</code>.
+        with <code class="font-mono">createXelqunForms({ components })</code>, or install the plugin
+        that provides it.
     </div>
 </template>

package/resources/js/components/defaults.ts

@@ -1,5 +1,6 @@
 import { toComponent } from '../composables/registry';
 import type { ComponentRegistry, ComponentResolver } from '../composables/registry';
+import XqAction from './XqAction.vue';
 import XqCheckboxField from './fields/XqCheckboxField.vue';
 import XqRadioField from './fields/XqRadioField.vue';
 import XqRepeaterField from './fields/XqRepeaterField.vue';
@@ -7,10 +8,21 @@ import XqSelectField from './fields/XqSelectField.vue';
 import XqTextareaField from './fields/XqTextareaField.vue';
 import XqTextInputField from './fields/XqTextInputField.vue';
 import XqToggleField from './fields/XqToggleField.vue';
+import XqActions from './layouts/XqActions.vue';
+import XqBlock from './layouts/XqBlock.vue';
+import XqCallout from './layouts/XqCallout.vue';
+import XqEmptyState from './layouts/XqEmptyState.vue';
 import XqFieldset from './layouts/XqFieldset.vue';
+import XqFlex from './layouts/XqFlex.vue';
+import XqFusedGroup from './layouts/XqFusedGroup.vue';
 import XqGrid from './layouts/XqGrid.vue';
+import XqIconNode from './layouts/XqIconNode.vue';
+import XqImageNode from './layouts/XqImageNode.vue';
 import XqSection from './layouts/XqSection.vue';
 import XqTabsLayout from './layouts/XqTabsLayout.vue';
+import XqTextNode from './layouts/XqTextNode.vue';
+import XqUnorderedList from './layouts/XqUnorderedList.vue';
+import XqWizard from './layouts/XqWizard.vue';
 
 /**
  * Built-in renderers keyed by schema node type. Heavier fields are code-split.
@@ -24,12 +36,36 @@ export function defaultComponents(): Record<string, ComponentResolver> {
         toggle: XqToggleField,
         radio: XqRadioField,
         'date-picker': () => import('./fields/XqDatePickerField.vue'),
+        'date-time-picker': () => import('./fields/XqDatePickerField.vue'),
+        'time-picker': () => import('./fields/XqDatePickerField.vue'),
         'file-upload': () => import('./fields/XqFileUploadField.vue'),
+        'checkbox-list': () => import('./fields/XqCheckboxListField.vue'),
+        'toggle-buttons': () => import('./fields/XqToggleButtonsField.vue'),
+        'tags-input': () => import('./fields/XqTagsInputField.vue'),
+        slider: () => import('./fields/XqSliderField.vue'),
+        'key-value': () => import('./fields/XqKeyValueField.vue'),
+        'color-picker': () => import('./fields/XqColorPickerField.vue'),
+        'rich-editor': () => import('./fields/XqRichEditorField.vue'),
+        'markdown-editor': () => import('./fields/XqMarkdownEditorField.vue'),
+        'code-editor': () => import('./fields/XqCodeEditorField.vue'),
         repeater: XqRepeaterField,
+        builder: XqRepeaterField,
         section: XqSection,
         grid: XqGrid,
         fieldset: XqFieldset,
         tabs: XqTabsLayout,
+        action: XqAction,
+        actions: XqActions,
+        wizard: XqWizard,
+        block: XqBlock,
+        flex: XqFlex,
+        'fused-group': XqFusedGroup,
+        callout: XqCallout,
+        'empty-state': XqEmptyState,
+        text: XqTextNode,
+        icon: XqIconNode,
+        image: XqImageNode,
+        'unordered-list': XqUnorderedList,
     };
 }
 

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Plus } from 'lucide-vue-next';
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../lib/utils';
+import type { BlockOption } from '../../schema/types';
+import { groupLabelClass, popoverClass } from '../../ui/classes';
+import XqButton from '../../ui/XqButton.vue';
+import XqIcon from '../../ui/XqIcon.vue';
+
+const props = defineProps<{
+    blocks: BlockOption[];
+    label: string;
+    disabled?: boolean;
+    used: Record<string, number>;
+}>();
+const emit = defineEmits<{ pick: [block: string] }>();
+const open = ref(false);
+
+const groups = computed(() => {
+    const found = new Map<string | null, BlockOption[]>();
+
+    for (const block of props.blocks) {
+        found.set(block.group, [...(found.get(block.group) ?? []), block]);
+    }
+
+    return [...found.entries()].sort(([a], [b]) => Number(a !== null) - Number(b !== null));
+});
+
+function isFull(block: BlockOption): boolean {
+    return block.maxItems !== null && (props.used[block.name] ?? 0) >= block.maxItems;
+}
+
+function pick(block: BlockOption): void {
+    open.value = false;
+    emit('pick', block.name);
+}
+</script>
+
+<template>
+    <PopoverRoot v-model:open="open">
+        <PopoverTrigger as-child>
+            <XqButton type="button" variant="outline" size="sm" :disabled="disabled" data-xq-add>
+                <Plus />
+                {{ label }}
+            </XqButton>
+        </PopoverTrigger>
+        <PopoverPortal>
+            <PopoverContent align="start" :side-offset="4" :class="cn(popoverClass, 'w-56 p-1')">
+                <div v-for="[group, items] in groups" :key="group ?? ''">
+                    <p v-if="group" :class="groupLabelClass">{{ group }}</p>
+                    <button
+                        v-for="block in items"
+                        :key="block.name"
+                        type="button"
+                        class="gap-2 px-2 py-1.5 text-sm flex w-full cursor-pointer items-center rounded-xq-sm hover:bg-xq-accent disabled:cursor-not-allowed disabled:opacity-50"
+                        :disabled="isFull(block)"
+                        :data-xq-block="block.name"
+                        @click="pick(block)"
+                    >
+                        <XqIcon v-if="block.icon" :name="block.icon" />
+                        {{ block.label }}
+                    </button>
+                </div>
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>

package/resources/js/components/fields/XqCheckboxField.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 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 { 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" />
             <XqCheckbox
                 :id="id"
                 v-model="value"
@@ -26,23 +34,41 @@ const describedBy = computed(() =>
                 class="mt-0.5"
             />
             <div class="gap-1.5 grid">
-                <XqLabel :for="id" class="gap-0.5 leading-snug cursor-pointer">
-                    {{ node.label }}
+                <XqFieldSlot :node="node" name="aboveLabel" />
+                <XqFieldSlot :node="node" name="beforeLabel" />
+                <XqLabel
+                    :for="id"
+                    :class="
+                        cn('gap-0.5 leading-snug 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/fields/XqCheckboxListField.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { gridStyle } from '../../composables/layout';
+import { useField } from '../../composables/useField';
+import type { SchemaNode, SelectOption } from '../../schema/types';
+import XqButton from '../../ui/XqButton.vue';
+import XqCheckbox from '../../ui/XqCheckbox.vue';
+import XqInput from '../../ui/XqInput.vue';
+import XqLabel from '../../ui/XqLabel.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
+
+const t = useTranslator();
+type Value = string | number;
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, label, describedBy, required, disabled, id } = useField<Value[]>(props.node);
+const options = computed<SelectOption[]>(() => props.node.props?.options ?? []);
+const search = ref('');
+const shown = computed(() => {
+    const needle = search.value.trim().toLowerCase();
+
+    return needle
+        ? options.value.filter((option) => option.label.toLowerCase().includes(needle))
+        : options.value;
+});
+const selected = computed(() => new Set((value.value ?? []).map(String)));
+
+function isChecked(option: SelectOption): boolean {
+    return selected.value.has(String(option.value));
+}
+
+function toggle(option: SelectOption, checked: boolean): void {
+    const others = (value.value ?? []).filter((item) => String(item) !== String(option.value));
+
+    value.value = checked ? [...others, option.value] : others;
+}
+
+function setAll(checked: boolean): void {
+    const enabled = options.value.filter((option) => !option.disabled);
+    const others = (value.value ?? []).filter(
+        (item) => !enabled.some((option) => String(option.value) === String(item)),
+    );
+
+    value.value = checked ? [...others, ...enabled.map((option) => option.value)] : others;
+}
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <div class="gap-3 grid">
+            <div v-if="node.props?.searchable || node.props?.bulkToggleable" class="gap-2 flex">
+                <XqInput
+                    v-if="node.props?.searchable"
+                    v-model="search"
+                    type="search"
+                    placeholder="Search…"
+                    :aria-label="t('Search :label', { label: label ?? '' })"
+                />
+                <template v-if="node.props?.bulkToggleable">
+                    <XqButton
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        :disabled="disabled"
+                        @click="setAll(true)"
+                    >
+                        {{ t('Select all') }}
+                    </XqButton>
+                    <XqButton
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        :disabled="disabled"
+                        @click="setAll(false)"
+                    >
+                        {{ t('Deselect all') }}
+                    </XqButton>
+                </template>
+            </div>
+            <div
+                role="group"
+                class="xq-grid gap-2"
+                :style="gridStyle(node.props?.columns)"
+                :aria-labelledby="label ? `${id}-label` : undefined"
+                :aria-describedby="describedBy"
+            >
+                <div
+                    v-for="(option, index) in shown"
+                    :key="String(option.value)"
+                    class="gap-2.5 flex items-start"
+                >
+                    <XqCheckbox
+                        :id="`${id}-${index}`"
+                        :model-value="isChecked(option)"
+                        :disabled="disabled || option.disabled"
+                        class="mt-0.5"
+                        @update:model-value="toggle(option, !!$event)"
+                    />
+                    <div class="gap-1 grid">
+                        <XqLabel
+                            :for="`${id}-${index}`"
+                            class="leading-snug font-normal cursor-pointer"
+                            >{{ option.label }}</XqLabel
+                        >
+                        <p v-if="option.description" class="text-xs text-xq-muted-foreground">
+                            {{ option.description }}
+                        </p>
+                    </div>
+                </div>
+                <p v-if="shown.length === 0" class="text-sm text-xq-muted-foreground">No results</p>
+            </div>
+        </div>
+    </XqFieldWrapper>
+</template>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { EditorState } from '@codemirror/state';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass } from '../../ui/classes';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, label, error, describedBy, required, disabled, id, onBlur } = useField<
+    string | null
+>(props.node);
+const options = computed(() => props.node.props ?? {});
+const host = ref<HTMLElement | null>(null);
+let view: EditorView | null = null;
+
+/** Each language is its own chunk, so a form only downloads the one it shows. */
+const languages: Record<string, () => Promise<Extension>> = {
+    cpp: async () => (await import('@codemirror/lang-cpp')).cpp(),
+    css: async () => (await import('@codemirror/lang-css')).css(),
+    go: async () => (await import('@codemirror/lang-go')).go(),
+    html: async () => (await import('@codemirror/lang-html')).html(),
+    java: async () => (await import('@codemirror/lang-java')).java(),
+    javascript: async () => (await import('@codemirror/lang-javascript')).javascript(),
+    json: async () => (await import('@codemirror/lang-json')).json(),
+    markdown: async () => (await import('@codemirror/lang-markdown')).markdown(),
+    php: async () => (await import('@codemirror/lang-php')).php(),
+    python: async () => (await import('@codemirror/lang-python')).python(),
+    sql: async () => (await import('@codemirror/lang-sql')).sql(),
+    xml: async () => (await import('@codemirror/lang-xml')).xml(),
+    yaml: async () => (await import('@codemirror/lang-yaml')).yaml(),
+};
+
+onMounted(async () => {
+    const language = await languages[options.value.language]?.();
+
+    if (!host.value) {
+        return;
+    }
+
+    view = new EditorView({
+        parent: host.value,
+        state: EditorState.create({
+            doc: value.value ?? '',
+            extensions: [
+                basicSetup,
+                language ?? [],
+                options.value.wrap ? EditorView.lineWrapping : [],
+                EditorState.readOnly.of(disabled.value),
+                EditorView.editable.of(!disabled.value),
+                EditorView.contentAttributes.of({
+                    'aria-label': label.value ?? '',
+                    'aria-describedby': describedBy.value ?? '',
+                    id,
+                }),
+                EditorView.domEventHandlers({ blur: () => onBlur() }),
+                EditorView.updateListener.of((update) => {
+                    if (update.docChanged) {
+                        const text = update.state.doc.toString();
+
+                        value.value = text === '' ? null : text;
+                    }
+                }),
+            ],
+        }),
+    });
+});
+
+watch(value, (next) => {
+    const text = next ?? '';
+
+    if (view && view.state.doc.toString() !== text) {
+        view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } });
+    }
+});
+
+onBeforeUnmount(() => view?.destroy());
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <div
+            ref="host"
+            :class="cn(controlClass, 'overflow-hidden', disabled && 'opacity-60')"
+            :style="{ minHeight: options.minHeight ?? undefined }"
+        />
+    </XqFieldWrapper>
+</template>