@xelqun/forms 0.1.0 → 0.2.0

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

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { Image } from '@tiptap/extension-image';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+import { TableKit } from '@tiptap/extension-table';
+import { TextAlign } from '@tiptap/extension-text-align';
+import StarterKit from '@tiptap/starter-kit';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
+import type { Editor } from '@tiptap/vue-3';
+import {
+    AlignCenter,
+    AlignJustify,
+    AlignLeft,
+    AlignRight,
+    Bold,
+    Code,
+    Heading1,
+    Heading2,
+    Heading3,
+    Heading4,
+    Heading5,
+    Heading6,
+    ImagePlus,
+    Italic,
+    Link as LinkIcon,
+    List,
+    ListOrdered,
+    Minus,
+    Quote,
+    Redo,
+    Strikethrough,
+    Subscript as SubscriptIcon,
+    Superscript as SuperscriptIcon,
+    Table,
+    Underline,
+    Undo,
+} from 'lucide-vue-next';
+import type { Component } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass, toolbarButtonClass } from '../../ui/classes';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { store, path, value, error, label, describedBy, required, disabled, id, onBlur } = useField<
+    string | null
+>(props.node);
+const { t } = store;
+const options = computed(() => props.node.props ?? {});
+const fileInput = ref<HTMLInputElement | null>(null);
+const objectUrls: string[] = [];
+
+/** Holds the upload's token until the server stores it and writes the real address. */
+const UploadedImage = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            upload: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-xq-upload'),
+                renderHTML: (attributes) =>
+                    attributes.upload ? { 'data-xq-upload': attributes.upload } : {},
+            },
+        };
+    },
+});
+
+const editor = useEditor({
+    content: value.value ?? '',
+    editable: !disabled.value,
+    extensions: [
+        StarterKit.configure({ link: { openOnClick: false } }),
+        UploadedImage,
+        Subscript,
+        Superscript,
+        TableKit,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    editorProps: {
+        attributes: {
+            class: 'xq-rich-content px-3 py-2 text-sm',
+            role: 'textbox',
+            'aria-multiline': 'true',
+            'aria-label': label.value ?? '',
+            'aria-describedby': describedBy.value ?? '',
+            style: `min-height: ${options.value.minHeight ?? '10rem'}`,
+        },
+    },
+    onUpdate: ({ editor: current }) => {
+        value.value = current.isEmpty ? null : current.getHTML();
+    },
+    onBlur: () => onBlur(),
+});
+
+watch(value, (next) => {
+    const current = editor.value;
+
+    if (current && (next ?? '') !== (current.isEmpty ? '' : current.getHTML())) {
+        current.commands.setContent(next ?? '', { emitUpdate: false });
+    }
+});
+
+watch(disabled, (isDisabled) => editor.value?.setEditable(!isDisabled));
+
+interface Tool {
+    label: () => string;
+    icon: Component;
+    run: (editor: Editor) => void;
+    active?: (editor: Editor) => boolean;
+}
+
+function chain(editor: Editor) {
+    return editor.chain().focus();
+}
+
+function heading(level: 1 | 2 | 3 | 4 | 5 | 6, icon: Component): Tool {
+    return {
+        label: () => t('Heading :level', { level }),
+        icon,
+        run: (current) => chain(current).toggleHeading({ level }).run(),
+        active: (current) => current.isActive('heading', { level }),
+    };
+}
+
+function mark(name: string, label: () => string, icon: Component, toggle: string): Tool {
+    return {
+        label,
+        icon,
+        run: (current) => (chain(current) as any)[toggle]().run(),
+        active: (current) => current.isActive(name),
+    };
+}
+
+function align(side: string, label: () => string, icon: Component): Tool {
+    return {
+        label,
+        icon,
+        run: (current) => chain(current).setTextAlign(side).run(),
+        active: (current) => current.isActive({ textAlign: side }),
+    };
+}
+
+// shortcut: a browser prompt for the address, swap in a popover when someone asks for one.
+function editLink(current: Editor): void {
+    const url = window.prompt(t('Link address'), current.getAttributes('link').href ?? 'https://');
+
+    if (url === null) {
+        return;
+    }
+
+    if (url === '') {
+        chain(current).unsetLink().run();
+    } else {
+        chain(current).extendMarkRange('link').setLink({ href: url }).run();
+    }
+}
+
+const tools: Record<string, Tool> = {
+    bold: mark('bold', () => t('Bold'), Bold, 'toggleBold'),
+    italic: mark('italic', () => t('Italic'), Italic, 'toggleItalic'),
+    underline: mark('underline', () => t('Underline'), Underline, 'toggleUnderline'),
+    strike: mark('strike', () => t('Strikethrough'), Strikethrough, 'toggleStrike'),
+    subscript: mark('subscript', () => t('Subscript'), SubscriptIcon, 'toggleSubscript'),
+    superscript: mark('superscript', () => t('Superscript'), SuperscriptIcon, 'toggleSuperscript'),
+    link: {
+        label: () => t('Link'),
+        icon: LinkIcon,
+        run: editLink,
+        active: (current) => current.isActive('link'),
+    },
+    h1: heading(1, Heading1),
+    h2: heading(2, Heading2),
+    h3: heading(3, Heading3),
+    h4: heading(4, Heading4),
+    h5: heading(5, Heading5),
+    h6: heading(6, Heading6),
+    alignStart: align('left', () => t('Align left'), AlignLeft),
+    alignCenter: align('center', () => t('Align center'), AlignCenter),
+    alignEnd: align('right', () => t('Align right'), AlignRight),
+    alignJustify: align('justify', () => t('Justify'), AlignJustify),
+    blockquote: mark('blockquote', () => t('Quote'), Quote, 'toggleBlockquote'),
+    codeBlock: mark('codeBlock', () => t('Code block'), Code, 'toggleCodeBlock'),
+    bulletList: mark('bulletList', () => t('Bulleted list'), List, 'toggleBulletList'),
+    orderedList: mark('orderedList', () => t('Numbered list'), ListOrdered, 'toggleOrderedList'),
+    horizontalRule: {
+        label: () => t('Divider'),
+        icon: Minus,
+        run: (current) => chain(current).setHorizontalRule().run(),
+    },
+    table: {
+        label: () => t('Table'),
+        icon: Table,
+        run: (current) =>
+            chain(current).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+    },
+    attachFiles: {
+        label: () => t('Attach a file'),
+        icon: ImagePlus,
+        run: () => fileInput.value?.click(),
+    },
+    undo: { label: () => t('Undo'), icon: Undo, run: (current) => chain(current).undo().run() },
+    redo: { label: () => t('Redo'), icon: Redo, run: (current) => chain(current).redo().run() },
+};
+
+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, () => {});
+        const src = URL.createObjectURL(file);
+
+        objectUrls.push(src);
+        editor.value
+            ?.chain()
+            .focus()
+            .setImage({ src, alt: file.name, upload: token } as any)
+            .run();
+    }
+}
+
+onBeforeUnmount(() => objectUrls.forEach((url) => URL.revokeObjectURL(url)));
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <div
+            :id="id"
+            :class="
+                cn(
+                    controlClass,
+                    'focus-within:border-xq-ring focus-within:ring-[3px] focus-within:ring-xq-ring/25',
+                    disabled && 'opacity-60',
+                )
+            "
+        >
+            <div
+                v-if="editor && !disabled"
+                class="gap-1 p-1 flex flex-wrap items-center border-b border-xq-border"
+                role="toolbar"
+                :aria-label="label ?? undefined"
+            >
+                <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="tools[name]"
+                            type="button"
+                            :class="toolbarButtonClass"
+                            :aria-label="tools[name].label()"
+                            :aria-pressed="tools[name].active?.(editor) ?? undefined"
+                            :title="tools[name].label()"
+                            :data-xq-tool="name"
+                            @click="tools[name].run(editor)"
+                        >
+                            <component :is="tools[name].icon" class="size-4" aria-hidden="true" />
+                        </button>
+                    </template>
+                </div>
+            </div>
+            <EditorContent :editor="editor" />
+            <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/XqSelectField.vue

@@ -6,17 +6,29 @@ import type { SchemaNode, SelectOption } from '../../schema/types';
 import XqCombobox from '../../ui/XqCombobox.vue';
 import XqSelect from '../../ui/XqSelect.vue';
 import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
 
+const t = useTranslator();
 const props = defineProps<{ node: SchemaNode }>();
-const { store, path, value, error, describedBy, required, disabled, id, onBlur } = useField(
-    props.node,
-);
+const {
+    store,
+    path,
+    value,
+    error,
+    placeholder,
+    describedBy,
+    showLoading,
+    required,
+    disabled,
+    id,
+    onBlur,
+} = useField(props.node);
 const options = computed<SelectOption[]>(() => props.node.props?.options ?? []);
 const useCombobox = computed(() => !!(props.node.props?.searchable || props.node.props?.multiple));
 const isRemote = computed(() => !!props.node.props?.async);
 
 const remoteOptions = ref<SelectOption[]>([]);
-const loading = ref(false);
+const searching = ref(false);
 const searchFailed = ref(false);
 const debounce = computed<number>(() => props.node.props?.searchDebounce ?? 250);
 const cache = new Map<string, SelectOption[]>();
@@ -41,7 +53,7 @@ function cancelPendingSearch(): void {
     }
 
     controller?.abort();
-    loading.value = false;
+    searching.value = false;
 }
 
 /**
@@ -82,7 +94,7 @@ function onSearch(input: string): void {
     timer = setTimeout(async () => {
         timer = null;
         controller = new AbortController();
-        loading.value = true;
+        searching.value = true;
 
         try {
             const results = await store.search(path, term, controller.signal);
@@ -96,7 +108,7 @@ function onSearch(input: string): void {
                 console.error('[xelqun] Search failed.', searchError);
             }
         } finally {
-            loading.value = false;
+            searching.value = false;
         }
     }, debounce.value);
 }
@@ -109,7 +121,7 @@ const hasValue = computed(
 </script>
 
 <template>
-    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required" control-shows-loading>
         <XqCombobox
             v-if="useCombobox"
             :id="id"
@@ -117,12 +129,15 @@ const hasValue = computed(
             :options="isRemote ? remoteOptions : options"
             :multiple="!!node.props?.multiple"
             :remote="isRemote"
-            :loading="loading"
-            :placeholder="node.placeholder"
+            :loading="showLoading"
+            :searching="searching"
+            :placeholder="placeholder"
             :disabled="disabled"
             :invalid="!!error"
             :described-by="describedBy"
             :search-failed="searchFailed"
+            :messages="node.props?.messages"
+            :reorderable="node.props?.reorderable"
             @search="onSearch"
             @blur="onBlur"
         />
@@ -131,17 +146,19 @@ const hasValue = computed(
                 :id="id"
                 v-model="value"
                 :options="options"
-                :placeholder="node.placeholder"
+                :loading="showLoading"
+                :placeholder="placeholder"
                 :disabled="disabled"
                 :invalid="!!error"
                 :described-by="describedBy"
+                :messages="node.props?.messages"
                 :class="!required && hasValue ? '[&>span:first-child]:pr-6' : undefined"
             />
             <button
                 v-if="!required && hasValue && !disabled"
                 type="button"
                 class="right-9 size-5 rounded-sm absolute top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
-                aria-label="Clear selection"
+                :aria-label="t('Clear selection')"
                 @click="value = null"
             >
                 <X class="size-3.5" />

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui';
+import { computed } from 'vue';
+import { useField } from '../../composables/useField';
+import type { SchemaNode } from '../../schema/types';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, label, required, disabled, id, onBlur } = useField<number | number[] | null>(
+    props.node,
+);
+const options = computed(() => props.node.props ?? {});
+
+const handles = computed<number[]>({
+    get: () => (Array.isArray(value.value) ? value.value : [value.value ?? options.value.min]),
+    set: (next) => (value.value = Array.isArray(value.value) ? next : next[0]),
+});
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :label-for="null" :error="error" :required="required">
+        <div class="gap-3 flex items-center">
+            <SliderRoot
+                v-model="handles"
+                :min="options.min"
+                :max="options.max"
+                :step="options.step"
+                :disabled="disabled"
+                class="h-5 relative flex flex-1 touch-none items-center select-none data-[disabled]:opacity-50"
+                @value-commit="onBlur"
+            >
+                <SliderTrack class="h-1.5 relative grow rounded-full bg-xq-muted">
+                    <SliderRange class="absolute h-full rounded-full bg-xq-primary" />
+                </SliderTrack>
+                <SliderThumb
+                    v-for="(_, index) in handles"
+                    :key="index"
+                    :aria-label="label ?? undefined"
+                    class="size-4 shadow-xs block cursor-pointer rounded-full border border-xq-primary bg-xq-background outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30"
+                />
+            </SliderRoot>
+            <output v-if="options.tooltips" class="text-sm text-right tabular-nums">
+                {{ handles.join(' – ') }}
+            </output>
+        </div>
+    </XqFieldWrapper>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight, X } from 'lucide-vue-next';
+import {
+    TagsInputInput,
+    TagsInputItem,
+    TagsInputItemDelete,
+    TagsInputItemText,
+    TagsInputRoot,
+} from 'reka-ui';
+import { computed, ref } from 'vue';
+import { useField } from '../../composables/useField';
+import { useSortable } from '../../composables/useSortable';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass } from '../../ui/classes';
+import { moveItem } from '../../ui/options';
+import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
+
+const t = useTranslator();
+const props = defineProps<{ node: SchemaNode }>();
+const { value, error, placeholder, describedBy, required, disabled, id, onBlur } = useField<
+    string[]
+>(props.node);
+const options = computed(() => props.node.props ?? {});
+const suggestions = computed<string[]>(() => options.value.suggestions ?? []);
+const splitKeys = computed<string[]>(() => options.value.splitKeys ?? []);
+
+const tags = computed<string[]>({
+    get: () => value.value ?? [],
+    set: (next) => (value.value = next),
+});
+
+/** Enter always finishes a tag. Reka takes the other keys as one pattern, and a comma without one. */
+const delimiter = computed(() => {
+    const characters = splitKeys.value.filter((key) => key.length === 1);
+
+    return characters.length
+        ? new RegExp(`[${characters.map((key) => `\\${key}`).join('')}]`)
+        : undefined;
+});
+
+function move(tag: string, offset: number): void {
+    tags.value = moveItem(tags.value, tag, offset);
+}
+
+const tagList = ref<HTMLElement | null>(null);
+
+useSortable(tagList, {
+    draggable: '> [data-xq-chip]',
+    enabled: () => !!options.value.reorderable && !disabled.value && tags.value.length > 1,
+    onMove: (from, to) => move(tags.value[from], to - from),
+});
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+        <TagsInputRoot
+            v-model="tags"
+            :disabled="disabled"
+            :delimiter="delimiter ?? ''"
+            :add-on-tab="splitKeys.includes('Tab')"
+            add-on-paste
+            add-on-blur
+            :class="
+                cn(
+                    controlClass,
+                    'min-h-9 gap-1 px-2 py-1 flex flex-wrap items-center focus-within:border-xq-ring focus-within:ring-[3px] focus-within:ring-xq-ring/25',
+                    error && 'border-xq-destructive',
+                )
+            "
+        >
+            <span ref="tagList" class="gap-1 flex max-w-full flex-wrap">
+                <TagsInputItem
+                    data-xq-chip
+                    v-for="(tag, index) in tags"
+                    :key="tag"
+                    :value="tag"
+                    :class="[options.reorderable && 'cursor-grab touch-none']"
+                    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 data-[state=active]:ring-2 data-[state=active]:ring-xq-ring"
+                >
+                    <button
+                        v-if="options.reorderable && index > 0"
+                        type="button"
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="t('Move :name earlier', { name: tag })"
+                        :disabled="disabled"
+                        @click="move(tag, -1)"
+                    >
+                        <ChevronLeft class="size-3" />
+                    </button>
+                    <span v-if="options.tagPrefix">{{ options.tagPrefix }}</span>
+                    <TagsInputItemText />
+                    <span v-if="options.tagSuffix">{{ options.tagSuffix }}</span>
+                    <button
+                        v-if="options.reorderable && index < tags.length - 1"
+                        type="button"
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="t('Move :name later', { name: tag })"
+                        :disabled="disabled"
+                        @click="move(tag, 1)"
+                    >
+                        <ChevronRight class="size-3" />
+                    </button>
+                    <TagsInputItemDelete
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="t('Remove :name', { name: tag })"
+                    >
+                        <X class="size-3" />
+                    </TagsInputItemDelete>
+                </TagsInputItem>
+            </span>
+            <TagsInputInput
+                :id="id"
+                :placeholder="placeholder ?? t('Add a tag…')"
+                :list="suggestions.length ? `${id}-list` : undefined"
+                :aria-invalid="error ? true : undefined"
+                :aria-describedby="describedBy"
+                class="h-7 min-w-24 px-1 text-sm flex-1 bg-transparent outline-none placeholder:text-xq-muted-foreground"
+                @blur="onBlur"
+            />
+            <datalist v-if="suggestions.length" :id="`${id}-list`">
+                <option v-for="suggestion in suggestions" :key="suggestion" :value="suggestion" />
+            </datalist>
+        </TagsInputRoot>
+    </XqFieldWrapper>
+</template>