@xelqun/forms 0.1.0 → 0.2.0

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, Undo2 } from 'lucide-vue-next';
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useTranslator } from '../../composables/context';
+import { toolbarButtonClass } from '../../ui/classes';
+import XqButton from '../../ui/XqButton.vue';
+import XqDialog from '../../ui/XqDialog.vue';
+
+const props = defineProps<{
+    src: string;
+    name: string;
+    aspectRatios?: Array<string | null> | null;
+    fillColor?: string | null;
+}>();
+const emit = defineEmits<{ save: [file: File]; cancel: [] }>();
+const t = useTranslator();
+const open = ref(true);
+const failed = ref(false);
+const image = ref<HTMLImageElement | null>(null);
+let cropper: Cropper | null = null;
+let scaleX = 1;
+let scaleY = 1;
+
+const ratios = computed(() => props.aspectRatios ?? []);
+
+function toNumber(ratio: string | null): number {
+    const [width, height] = (ratio ?? '').split(':').map(Number);
+
+    return width > 0 && height > 0 ? width / height : NaN;
+}
+
+function start(): void {
+    cropper = new Cropper(image.value!, {
+        viewMode: 1,
+        autoCropArea: 1,
+        aspectRatio: ratios.value.length ? toNumber(ratios.value[0]) : NaN,
+    });
+}
+
+function flip(axis: 'x' | 'y'): void {
+    if (axis === 'x') {
+        scaleX = -scaleX;
+        cropper?.scaleX(scaleX);
+    } else {
+        scaleY = -scaleY;
+        cropper?.scaleY(scaleY);
+    }
+}
+
+function close(): void {
+    open.value = false;
+    emit('cancel');
+}
+
+function save(): void {
+    // A stored file on another origin taints the canvas, unless that origin allows it.
+    try {
+        cropper
+            ?.getCroppedCanvas({ fillColor: props.fillColor ?? 'transparent' })
+            .toBlob((blob) => {
+                if (blob) {
+                    emit('save', new File([blob], props.name, { type: blob.type }));
+                } else {
+                    failed.value = true;
+                }
+            });
+    } catch {
+        failed.value = true;
+    }
+}
+
+onBeforeUnmount(() => cropper?.destroy());
+</script>
+
+<template>
+    <XqDialog
+        :open="open"
+        :title="t('Edit image')"
+        :description="name"
+        width="2xl"
+        @update:open="$event || close()"
+    >
+        <div class="gap-3 grid">
+            <div class="max-h-[60vh] overflow-hidden">
+                <img
+                    ref="image"
+                    :src="src"
+                    :alt="name"
+                    crossorigin="anonymous"
+                    class="block max-w-full"
+                    @load="start"
+                    @error="failed = true"
+                />
+            </div>
+            <p v-if="failed" role="alert" class="text-xs font-medium text-xq-destructive">
+                {{ t('The image could not be edited.') }}
+            </p>
+            <div class="gap-1 flex flex-wrap items-center">
+                <button
+                    type="button"
+                    :class="toolbarButtonClass"
+                    :aria-label="t('Rotate left')"
+                    @click="cropper?.rotate(-90)"
+                >
+                    <RotateCcw class="size-4" aria-hidden="true" />
+                </button>
+                <button
+                    type="button"
+                    :class="toolbarButtonClass"
+                    :aria-label="t('Rotate right')"
+                    @click="cropper?.rotate(90)"
+                >
+                    <RotateCw class="size-4" aria-hidden="true" />
+                </button>
+                <button
+                    type="button"
+                    :class="toolbarButtonClass"
+                    :aria-label="t('Flip horizontally')"
+                    @click="flip('x')"
+                >
+                    <FlipHorizontal class="size-4" aria-hidden="true" />
+                </button>
+                <button
+                    type="button"
+                    :class="toolbarButtonClass"
+                    :aria-label="t('Flip vertically')"
+                    @click="flip('y')"
+                >
+                    <FlipVertical class="size-4" aria-hidden="true" />
+                </button>
+                <button
+                    type="button"
+                    :class="toolbarButtonClass"
+                    :aria-label="t('Reset')"
+                    @click="cropper?.reset()"
+                >
+                    <Undo2 class="size-4" aria-hidden="true" />
+                </button>
+                <div v-if="ratios.length" class="gap-1 ms-auto flex flex-wrap">
+                    <XqButton
+                        v-for="ratio in ratios"
+                        :key="ratio ?? 'free'"
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        :data-xq-ratio="ratio ?? 'free'"
+                        @click="cropper?.setAspectRatio(toNumber(ratio))"
+                    >
+                        {{ ratio ?? t('Free') }}
+                    </XqButton>
+                </div>
+            </div>
+            <div class="gap-2 flex justify-end">
+                <XqButton type="button" variant="outline" size="sm" @click="close">
+                    {{ t('Cancel') }}
+                </XqButton>
+                <XqButton type="button" size="sm" data-xq-image-save @click="save">
+                    {{ t('Save') }}
+                </XqButton>
+            </div>
+        </div>
+    </XqDialog>
+</template>

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ChevronDown, ChevronUp, GripVertical, Plus, X } from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import { useField } from '../../composables/useField';
+import { useSortable } from '../../composables/useSortable';
+import type { SchemaNode } from '../../schema/types';
+import { moveItem } from '../../ui/options';
+import XqButton from '../../ui/XqButton.vue';
+import XqInput from '../../ui/XqInput.vue';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
+
+const t = useTranslator();
+interface Row {
+    id: number;
+    key: string;
+    value: string;
+}
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, describedBy, required, disabled, id } = useField<Record<string, unknown>>(
+    props.node,
+);
+const options = computed(() => props.node.props ?? {});
+let nextRowId = 0;
+
+function toRows(state: unknown): Row[] {
+    const map = state && !Array.isArray(state) ? (state as Record<string, unknown>) : {};
+
+    return Object.entries(map).map(([key, item]) => ({
+        id: nextRowId++,
+        key,
+        value: item === null || item === undefined ? '' : String(item),
+    }));
+}
+
+function toMap(list: Row[]): Record<string, string> {
+    return Object.fromEntries(
+        list.filter((row) => row.key.trim() !== '').map((row) => [row.key, row.value]),
+    );
+}
+
+/** Rows keep a blank key and a stable id while typing, which the map can't hold. */
+const rows = ref<Row[]>(toRows(value.value));
+
+function commit(): void {
+    value.value = toMap(rows.value);
+}
+
+watch(value, (next) => {
+    if (JSON.stringify(next ?? {}) !== JSON.stringify(toMap(rows.value))) {
+        rows.value = toRows(next);
+    }
+});
+
+function add(): void {
+    rows.value.push({ id: nextRowId++, key: '', value: '' });
+}
+
+function remove(row: Row): void {
+    rows.value = rows.value.filter((item) => item.id !== row.id);
+    commit();
+}
+
+function move(row: Row, offset: number): void {
+    rows.value = moveItem(rows.value, row, offset);
+    commit();
+}
+
+const rowList = ref<HTMLElement | null>(null);
+
+useSortable(rowList, {
+    draggable: '> [data-xq-row]',
+    handle: '[data-xq-drag]',
+    enabled: () => !!options.value.reorderable && !disabled.value && rows.value.length > 1,
+    onMove: (from, to) => move(rows.value[from], to - from),
+});
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <div class="gap-2 grid">
+            <div
+                v-if="rows.length"
+                class="gap-2 text-xs font-medium grid grid-cols-2 text-xq-muted-foreground"
+            >
+                <span>{{ options.keyLabel }}</span>
+                <span>{{ options.valueLabel }}</span>
+            </div>
+            <div ref="rowList" class="gap-2 grid">
+                <div
+                    v-for="(row, index) in rows"
+                    :key="row.id"
+                    data-xq-row
+                    class="gap-2 flex items-center"
+                >
+                    <span
+                        v-if="options.reorderable && rows.length > 1"
+                        aria-hidden="true"
+                        data-xq-drag
+                        class="cursor-grab touch-none text-xq-muted-foreground"
+                    >
+                        <GripVertical class="size-4" />
+                    </span>
+                    <XqInput
+                        v-model="row.key"
+                        :aria-label="`${options.keyLabel} ${index + 1}`"
+                        :aria-describedby="describedBy"
+                        :placeholder="options.keyPlaceholder ?? undefined"
+                        :disabled="disabled || !options.editableKeys"
+                        @update:model-value="commit"
+                    />
+                    <XqInput
+                        v-model="row.value"
+                        :aria-label="`${options.valueLabel} ${index + 1}`"
+                        :placeholder="options.valuePlaceholder ?? undefined"
+                        :disabled="disabled || !options.editableValues"
+                        @update:model-value="commit"
+                    />
+                    <template v-if="options.reorderable">
+                        <XqButton
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            :aria-label="t('Move row :number up', { number: index + 1 })"
+                            :disabled="disabled || index === 0"
+                            @click="move(row, -1)"
+                        >
+                            <ChevronUp />
+                        </XqButton>
+                        <XqButton
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            :aria-label="t('Move row :number down', { number: index + 1 })"
+                            :disabled="disabled || index === rows.length - 1"
+                            @click="move(row, 1)"
+                        >
+                            <ChevronDown />
+                        </XqButton>
+                    </template>
+                    <XqButton
+                        v-if="options.deletable"
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
+                        :aria-label="t('Remove row :number', { number: index + 1 })"
+                        :disabled="disabled"
+                        @click="remove(row)"
+                    >
+                        <X />
+                    </XqButton>
+                </div>
+            </div>
+            <XqButton
+                v-if="options.addable"
+                type="button"
+                variant="outline"
+                size="sm"
+                class="justify-self-start"
+                :disabled="disabled"
+                @click="add"
+            >
+                <Plus />{{ options.addLabel }}
+            </XqButton>
+        </div>
+    </XqFieldWrapper>
+</template>

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

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import {
+    Bold,
+    Code,
+    Heading,
+    ImagePlus,
+    Italic,
+    Link as LinkIcon,
+    List,
+    ListOrdered,
+    LoaderCircle,
+    Quote,
+    Strikethrough,
+    Table,
+} from 'lucide-vue-next';
+import type { Component } from 'vue';
+import { computed, nextTick, ref } from 'vue';
+import { useField } from '../../composables/useField';
+import { insertBlock, prefixLines, wrapSelection } from '../../core/markdown';
+import type { TextEdit } from '../../core/markdown';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass, spinnerClass, toolbarButtonClass } from '../../ui/classes';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { store, path, value, error, describedBy, required, disabled, readOnly, id, onBlur } =
+    useField<string | null>(props.node);
+const { t } = store;
+const options = computed(() => props.node.props ?? {});
+const textarea = ref<HTMLTextAreaElement | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const previewing = ref(false);
+const preview = ref<string | null>(null);
+const loadingPreview = ref(false);
+const previewAction = computed(() =>
+    props.node.children?.find((child) => child.slot === 'markdownPreview'),
+);
+
+type Edit = (text: string, start: number, end: number) => TextEdit;
+
+const table = '| Column | Column |\n| ------ | ------ |\n| Cell   | Cell   |';
+
+const buttons: Record<string, { label: () => string; icon: Component; edit?: Edit }> = {
+    bold: {
+        label: () => t('Bold'),
+        icon: Bold,
+        edit: (text, start, end) => wrapSelection(text, start, end, '**', '**', t('Text')),
+    },
+    italic: {
+        label: () => t('Italic'),
+        icon: Italic,
+        edit: (text, start, end) => wrapSelection(text, start, end, '*', '*', t('Text')),
+    },
+    strike: {
+        label: () => t('Strikethrough'),
+        icon: Strikethrough,
+        edit: (text, start, end) => wrapSelection(text, start, end, '~~', '~~', t('Text')),
+    },
+    link: {
+        label: () => t('Link'),
+        icon: LinkIcon,
+        edit: (text, start, end) => wrapSelection(text, start, end, '[', '](https://)', t('Text')),
+    },
+    heading: {
+        label: () => t('Heading'),
+        icon: Heading,
+        edit: (text, start, end) => prefixLines(text, start, end, '## '),
+    },
+    blockquote: {
+        label: () => t('Quote'),
+        icon: Quote,
+        edit: (text, start, end) => prefixLines(text, start, end, '> '),
+    },
+    codeBlock: {
+        label: () => t('Code block'),
+        icon: Code,
+        edit: (text, start, end) => wrapSelection(text, start, end, '```\n', '\n```'),
+    },
+    bulletList: {
+        label: () => t('Bulleted list'),
+        icon: List,
+        edit: (text, start, end) => prefixLines(text, start, end, '- '),
+    },
+    orderedList: {
+        label: () => t('Numbered list'),
+        icon: ListOrdered,
+        edit: (text, start, end) => prefixLines(text, start, end, '#'),
+    },
+    table: {
+        label: () => t('Table'),
+        icon: Table,
+        edit: (text, _, end) => insertBlock(text, end, table),
+    },
+    attachFiles: { label: () => t('Attach a file'), icon: ImagePlus },
+};
+
+async function apply(edit: Edit): Promise<void> {
+    const element = textarea.value;
+
+    if (!element) {
+        return;
+    }
+
+    const result = edit(value.value ?? '', element.selectionStart, element.selectionEnd);
+
+    value.value = result.text;
+    await nextTick();
+    element.focus();
+    element.setSelectionRange(result.selectionStart, result.selectionEnd);
+}
+
+function press(name: string): void {
+    const edit = buttons[name]?.edit;
+
+    if (edit) {
+        void apply(edit);
+    } else if (name === 'attachFiles') {
+        fileInput.value?.click();
+    }
+}
+
+async function attach(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    input.value = '';
+
+    if (file) {
+        const { token } = await store.upload(path, file, () => {});
+
+        await apply((text, _, end) => insertBlock(text, end, `![${file.name}](${token})`));
+    }
+}
+
+async function showPreview(): Promise<void> {
+    previewing.value = true;
+
+    if (previewAction.value) {
+        loadingPreview.value = true;
+
+        const response = await store.runAction(previewAction.value);
+
+        preview.value = (response?.result as string | undefined) ?? null;
+        loadingPreview.value = false;
+    }
+}
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+        <div
+            :class="
+                cn(
+                    controlClass,
+                    'focus-within:border-xq-ring focus-within:ring-[3px] focus-within:ring-xq-ring/25',
+                )
+            "
+        >
+            <div class="gap-1 p-1 flex flex-wrap items-center border-b border-xq-border">
+                <template v-if="!disabled">
+                    <div
+                        v-for="(group, index) in options.toolbar ?? []"
+                        :key="index"
+                        class="gap-0.5 flex"
+                    >
+                        <template v-for="name in group" :key="name">
+                            <button
+                                v-if="buttons[name]"
+                                type="button"
+                                :class="toolbarButtonClass"
+                                :aria-label="buttons[name].label()"
+                                :title="buttons[name].label()"
+                                :disabled="previewing"
+                                :data-xq-tool="name"
+                                @click="press(name)"
+                            >
+                                <component
+                                    :is="buttons[name].icon"
+                                    class="size-4"
+                                    aria-hidden="true"
+                                />
+                            </button>
+                        </template>
+                    </div>
+                </template>
+                <div v-if="previewAction && !disabled" class="gap-1 ms-auto flex">
+                    <button
+                        type="button"
+                        class="px-2 py-1 text-xs cursor-pointer rounded-xq-sm hover:bg-xq-accent aria-pressed:bg-xq-accent"
+                        :aria-pressed="!previewing"
+                        @click="previewing = false"
+                    >
+                        {{ t('Write') }}
+                    </button>
+                    <button
+                        type="button"
+                        class="px-2 py-1 text-xs cursor-pointer rounded-xq-sm hover:bg-xq-accent aria-pressed:bg-xq-accent"
+                        :aria-pressed="previewing"
+                        data-xq-markdown-preview
+                        @click="showPreview"
+                    >
+                        {{ t('Preview') }}
+                    </button>
+                </div>
+            </div>
+            <textarea
+                v-show="!previewing"
+                :id="id"
+                ref="textarea"
+                :value="value ?? ''"
+                :readonly="readOnly"
+                :disabled="disabled && !readOnly"
+                :aria-invalid="error ? true : undefined"
+                :aria-describedby="describedBy"
+                :placeholder="store.text(node, 'placeholder') ?? undefined"
+                :style="{ minHeight: options.minHeight ?? '10rem', maxHeight: options.maxHeight }"
+                class="px-3 py-2 text-sm font-mono block w-full resize-y bg-transparent outline-none"
+                @input="value = ($event.target as HTMLTextAreaElement).value"
+                @blur="onBlur"
+            />
+            <div
+                v-if="previewing"
+                class="px-3 py-2 text-sm"
+                :style="{ minHeight: options.minHeight ?? '10rem' }"
+            >
+                <LoaderCircle v-if="loadingPreview" :class="spinnerClass" aria-hidden="true" />
+                <!-- MarkdownEditor::render() strips raw HTML and cleans the result on the server. -->
+                <div v-else-if="preview !== null" class="xq-rich-content" v-html="preview" />
+                <p v-else class="text-xq-muted-foreground">
+                    {{ t('Could not load the preview.') }}
+                </p>
+            </div>
+            <input
+                ref="fileInput"
+                type="file"
+                class="sr-only"
+                tabindex="-1"
+                aria-hidden="true"
+                :accept="options.accept"
+                @change="attach"
+            />
+        </div>
+    </XqFieldWrapper>
+</template>

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

@@ -8,9 +8,9 @@ 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,
-);
+const { value, error, label, describedBy, required, disabled, id } = useField<
+    string | number | null
+>(props.node);
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const { value, error, describedBy, required, disabled, id } = useField<string |
             :aria-invalid="error ? true : undefined"
             :aria-required="required || undefined"
             :aria-describedby="describedBy"
-            :aria-labelledby="node.label ? `${id}-label` : undefined"
+            :aria-labelledby="label ? `${id}-label` : undefined"
             :class="cn(node.props?.inline && 'gap-x-6 gap-y-2 flex flex-wrap')"
         >
             <div
@@ -30,7 +30,11 @@ const { value, error, describedBy, required, disabled, id } = useField<string |
                 :key="String(option.value)"
                 class="gap-2.5 flex items-start"
             >
-                <XqRadioGroupItem :id="`${id}-${index}`" :value="option.value" />
+                <XqRadioGroupItem
+                    :id="`${id}-${index}`"
+                    :value="option.value"
+                    :disabled="option.disabled"
+                />
                 <div class="gap-1 grid">
                     <XqLabel :for="`${id}-${index}`" class="leading-4 font-normal cursor-pointer">{{
                         option.label