@xelqun/forms 0.1.0 → 0.2.0

package/resources/js/ui/XqCombobox.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { Check, ChevronsUpDown, LoaderCircle, X } from 'lucide-vue-next';
+import { Check, ChevronLeft, ChevronRight, ChevronsUpDown, LoaderCircle, X } from 'lucide-vue-next';
 import {
     ComboboxAnchor,
     ComboboxContent,
     ComboboxEmpty,
+    ComboboxGroup,
     ComboboxInput,
     ComboboxItem,
     ComboboxItemIndicator,
+    ComboboxLabel,
     ComboboxPortal,
     ComboboxRoot,
     ComboboxTrigger,
@@ -14,10 +16,14 @@ import {
 } from 'reka-ui';
 import { computed, reactive, ref, watch } from 'vue';
 import type { HTMLAttributes } from 'vue';
+import { useSortable } from '../composables/useSortable';
 import { cn } from '../lib/utils';
-import type { SelectOption } from '../schema/types';
-import { controlClass, optionClass, popoverClass } from './classes';
+import type { SelectMessages, SelectOption } from '../schema/types';
+import { controlClass, groupLabelClass, optionClass, popoverClass, spinnerClass } from './classes';
+import { groupOptions, moveItem } from './options';
+import { useTranslator } from '../composables/context';
 
+const t = useTranslator();
 type Value = string | number;
 
 const props = defineProps<{
@@ -26,17 +32,21 @@ const props = defineProps<{
     multiple?: boolean;
     remote?: boolean;
     loading?: boolean;
+    searching?: boolean;
     placeholder?: string | null;
     disabled?: boolean;
     invalid?: boolean;
     describedBy?: string;
     searchFailed?: boolean;
+    messages?: SelectMessages;
+    reorderable?: boolean;
     class?: HTMLAttributes['class'];
 }>();
 const emit = defineEmits<{ search: [term: string]; blur: [] }>();
 const model = defineModel<Value | Value[] | null>();
 const searchTerm = ref('');
 const labels = reactive(new Map<string, string>());
+const groups = computed(() => groupOptions(props.options));
 
 watch(
     () => props.options,
@@ -66,6 +76,18 @@ function remove(value: Value): void {
     model.value = selectedValues.value.filter((item) => item !== value);
 }
 
+function move(value: Value, offset: number): void {
+    model.value = moveItem(selectedValues.value, value, offset);
+}
+
+const chipList = ref<HTMLElement | null>(null);
+
+useSortable(chipList, {
+    draggable: '> [data-xq-chip]',
+    enabled: () => !!props.reorderable && !props.disabled && selectedValues.value.length > 1,
+    onMove: (from, to) => move(selectedValues.value[from], to - from),
+});
+
 function clear(): void {
     model.value = props.multiple ? [] : null;
     searchTerm.value = '';
@@ -93,43 +115,68 @@ function clear(): void {
                 )
             "
         >
-            <template v-if="multiple">
+            <span v-if="multiple" ref="chipList" class="gap-1 flex max-w-full flex-wrap">
                 <span
-                    v-for="value in selectedValues"
+                    v-for="(value, index) in selectedValues"
                     :key="String(value)"
-                    class="gap-1 py-0.5 pr-1 pl-2 text-xs font-medium inline-flex items-center rounded-xq-sm bg-xq-secondary text-xq-secondary-foreground"
+                    data-xq-chip
+                    :class="
+                        cn(
+                            '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',
+                            reorderable && 'cursor-grab touch-none',
+                        )
+                    "
                 >
+                    <button
+                        v-if="reorderable && index > 0"
+                        type="button"
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="t('Move :name earlier', { name: labelFor(value) })"
+                        :disabled="disabled"
+                        @click.stop="move(value, -1)"
+                    >
+                        <ChevronLeft class="size-3" />
+                    </button>
                     {{ labelFor(value) }}
                     <button
+                        v-if="reorderable && index < selectedValues.length - 1"
                         type="button"
                         class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
-                        :aria-label="`Remove ${labelFor(value)}`"
+                        :aria-label="t('Move :name later', { name: labelFor(value) })"
+                        :disabled="disabled"
+                        @click.stop="move(value, 1)"
+                    >
+                        <ChevronRight class="size-3" />
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded-sm cursor-pointer opacity-60 hover:opacity-100"
+                        :aria-label="t('Remove :name', { name: labelFor(value) })"
                         :disabled="disabled"
                         @click.stop="remove(value)"
                     >
                         <X class="size-3" />
                     </button>
                 </span>
-            </template>
+            </span>
             <ComboboxInput
                 :id="id"
                 v-model="searchTerm"
                 @input="emit('search', ($event.target as HTMLInputElement).value)"
                 :display-value="multiple ? undefined : labelFor"
-                :placeholder="selectedValues.length && multiple ? '' : (placeholder ?? 'Search…')"
+                :placeholder="
+                    selectedValues.length && multiple ? '' : (placeholder ?? t('Search…'))
+                "
                 :aria-invalid="invalid || undefined"
                 :aria-describedby="describedBy"
                 class="h-7 min-w-16 px-1 text-sm flex-1 bg-transparent outline-none placeholder:text-xq-muted-foreground disabled:cursor-not-allowed"
             />
-            <LoaderCircle
-                v-if="loading"
-                class="size-4 motion-safe:animate-spin shrink-0 text-xq-muted-foreground"
-            />
+            <LoaderCircle v-if="loading || searching" :class="spinnerClass" aria-hidden="true" />
             <button
                 v-else-if="selectedValues.length && !disabled"
                 type="button"
                 class="size-6 rounded-sm flex cursor-pointer items-center justify-center text-xq-muted-foreground hover:text-xq-foreground"
-                aria-label="Clear selection"
+                :aria-label="t('Clear selection')"
                 @click.stop="clear"
             >
                 <X class="size-3.5" />
@@ -156,27 +203,37 @@ function clear(): void {
                     </p>
                     <ComboboxEmpty class="px-2 py-6 text-sm text-center text-xq-muted-foreground">
                         {{
-                            loading
-                                ? 'Searching…'
-                                : searchTerm || !remote
-                                  ? 'No results'
-                                  : 'Type to search'
+                            searching
+                                ? (messages?.searching ?? t('Searching…'))
+                                : loading
+                                  ? (messages?.loading ?? t('Loading…'))
+                                  : searchTerm
+                                    ? (messages?.noResults ?? t('No results'))
+                                    : remote
+                                      ? (messages?.prompt ?? t('Type to search'))
+                                      : (messages?.noOptions ?? t('No results'))
                         }}
                     </ComboboxEmpty>
-                    <ComboboxItem
-                        v-for="option in options"
-                        :key="String(option.value)"
-                        :value="option.value"
-                        :text-value="option.label"
-                        :class="optionClass"
-                    >
-                        <span class="truncate">{{ option.label }}</span>
-                        <ComboboxItemIndicator
-                            class="right-2 size-3.5 absolute flex items-center justify-center"
+                    <ComboboxGroup v-for="group in groups" :key="group.label ?? ''">
+                        <ComboboxLabel v-if="group.label" :class="groupLabelClass">{{
+                            group.label
+                        }}</ComboboxLabel>
+                        <ComboboxItem
+                            v-for="option in group.options"
+                            :key="String(option.value)"
+                            :value="option.value"
+                            :text-value="option.label"
+                            :disabled="option.disabled"
+                            :class="optionClass"
                         >
-                            <Check class="size-4" />
-                        </ComboboxItemIndicator>
-                    </ComboboxItem>
+                            <span class="truncate">{{ option.label }}</span>
+                            <ComboboxItemIndicator
+                                class="right-2 size-3.5 absolute flex items-center justify-center"
+                            >
+                                <Check class="size-4" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </ComboboxGroup>
                 </ComboboxViewport>
             </ComboboxContent>
         </ComboboxPortal>

package/resources/js/ui/XqConfirmDialog.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import {
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogRoot,
+    AlertDialogTitle,
+} from 'reka-ui';
+import XqButton from './XqButton.vue';
+import { useTranslator } from '../composables/context';
+
+const t = useTranslator();
+defineProps<{
+    title: string;
+    message?: string | null;
+    confirmLabel?: string | null;
+    cancelLabel?: string | null;
+    confirmVariant?: 'default' | 'destructive';
+}>();
+defineEmits<{ confirm: [] }>();
+const open = defineModel<boolean>('open', { default: false });
+</script>
+
+<template>
+    <AlertDialogRoot v-model:open="open">
+        <AlertDialogPortal>
+            <AlertDialogOverlay class="inset-0 bg-black/50 fixed z-50" />
+            <AlertDialogContent
+                class="max-w-sm p-5 shadow-lg gap-3 fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xq-lg border border-xq-border bg-xq-popover text-xq-popover-foreground"
+            >
+                <AlertDialogTitle class="text-sm font-semibold">{{ title }}</AlertDialogTitle>
+                <AlertDialogDescription class="text-sm text-xq-muted-foreground">
+                    {{ message ?? '' }}
+                </AlertDialogDescription>
+                <div class="gap-2 flex justify-end">
+                    <AlertDialogCancel as-child>
+                        <XqButton type="button" variant="outline" size="sm">
+                            {{ cancelLabel ?? t('Cancel') }}
+                        </XqButton>
+                    </AlertDialogCancel>
+                    <AlertDialogAction as-child>
+                        <XqButton
+                            type="button"
+                            :variant="confirmVariant ?? 'destructive'"
+                            size="sm"
+                            @click="$emit('confirm')"
+                        >
+                            {{ confirmLabel ?? t('Delete') }}
+                        </XqButton>
+                    </AlertDialogAction>
+                </div>
+            </AlertDialogContent>
+        </AlertDialogPortal>
+    </AlertDialogRoot>
+</template>

package/resources/js/ui/XqDialog.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {
+    DialogContent,
+    DialogDescription,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+} from 'reka-ui';
+import { cn } from '../lib/utils';
+
+const props = defineProps<{ title: string; description?: string | null; width?: string | null }>();
+const open = defineModel<boolean>('open', { default: false });
+
+const widths: Record<string, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+};
+</script>
+
+<template>
+    <DialogRoot v-model:open="open">
+        <DialogPortal>
+            <DialogOverlay class="inset-0 bg-black/50 fixed z-50" />
+            <DialogContent
+                :class="
+                    cn(
+                        'p-5 shadow-lg gap-4 fixed top-1/2 left-1/2 z-50 grid max-h-[85vh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xq-lg border border-xq-border bg-xq-popover text-xq-popover-foreground',
+                        widths[props.width ?? 'md'],
+                    )
+                "
+            >
+                <div class="gap-1 grid">
+                    <DialogTitle class="text-sm font-semibold">{{ title }}</DialogTitle>
+                    <DialogDescription class="text-sm text-xq-muted-foreground">
+                        {{ description ?? '' }}
+                    </DialogDescription>
+                </div>
+                <slot />
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+</template>

package/resources/js/ui/XqIcon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import { resolveIcon } from './icons';
+
+const props = defineProps<{ name: string; class?: HTMLAttributes['class'] }>();
+const icon = computed(() => {
+    const resolved = resolveIcon(props.name);
+
+    if (!resolved && import.meta.env?.DEV) {
+        console.warn(
+            `[xelqun] No icon is registered as "${props.name}". Add it with the icons option.`,
+        );
+    }
+
+    return resolved;
+});
+</script>
+
+<template>
+    <component
+        :is="icon"
+        v-if="icon"
+        :class="cn('size-4 shrink-0', props.class)"
+        aria-hidden="true"
+    />
+</template>

package/resources/js/ui/XqSelect.vue

@@ -1,31 +1,40 @@
 <script setup lang="ts">
-import { Check, ChevronDown } from 'lucide-vue-next';
+import { Check, ChevronDown, LoaderCircle } from 'lucide-vue-next';
 import {
     SelectContent,
+    SelectGroup,
     SelectItem,
     SelectItemIndicator,
     SelectItemText,
+    SelectLabel,
     SelectPortal,
     SelectRoot,
     SelectTrigger,
     SelectValue,
     SelectViewport,
 } from 'reka-ui';
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../lib/utils';
-import type { SelectOption } from '../schema/types';
-import { controlClass, optionClass, popoverClass } from './classes';
+import type { SelectMessages, SelectOption } from '../schema/types';
+import { controlClass, groupLabelClass, optionClass, popoverClass, spinnerClass } from './classes';
+import { groupOptions } from './options';
+import { useTranslator } from '../composables/context';
 
+const t = useTranslator();
 const props = defineProps<{
     id?: string;
     options: SelectOption[];
+    loading?: boolean;
     placeholder?: string | null;
     disabled?: boolean;
     invalid?: boolean;
     describedBy?: string;
+    messages?: SelectMessages;
     class?: HTMLAttributes['class'];
 }>();
 const model = defineModel<string | number | null>();
+const groups = computed(() => groupOptions(props.options));
 </script>
 
 <template>
@@ -43,8 +52,9 @@ const model = defineModel<string | number | null>();
                 )
             "
         >
-            <SelectValue :placeholder="placeholder ?? 'Select an option'" class="truncate" />
-            <ChevronDown class="size-4 shrink-0 opacity-60" />
+            <SelectValue :placeholder="placeholder ?? t('Select an option')" class="truncate" />
+            <LoaderCircle v-if="loading" :class="spinnerClass" aria-hidden="true" />
+            <ChevronDown v-else class="size-4 shrink-0 opacity-60" />
         </SelectTrigger>
         <SelectPortal>
             <SelectContent
@@ -53,24 +63,34 @@ const model = defineModel<string | number | null>();
                 :class="cn(popoverClass, 'max-h-72 min-w-32 w-(--reka-select-trigger-width)')"
             >
                 <SelectViewport class="p-1">
-                    <SelectItem
-                        v-for="option in options"
-                        :key="String(option.value)"
-                        :value="option.value"
-                        :class="optionClass"
-                    >
-                        <SelectItemText>{{ option.label }}</SelectItemText>
-                        <SelectItemIndicator
-                            class="right-2 size-3.5 absolute flex items-center justify-center"
+                    <SelectGroup v-for="group in groups" :key="group.label ?? ''">
+                        <SelectLabel v-if="group.label" :class="groupLabelClass">{{
+                            group.label
+                        }}</SelectLabel>
+                        <SelectItem
+                            v-for="option in group.options"
+                            :key="String(option.value)"
+                            :value="option.value"
+                            :disabled="option.disabled"
+                            :class="optionClass"
                         >
-                            <Check class="size-4" />
-                        </SelectItemIndicator>
-                    </SelectItem>
+                            <SelectItemText>{{ option.label }}</SelectItemText>
+                            <SelectItemIndicator
+                                class="right-2 size-3.5 absolute flex items-center justify-center"
+                            >
+                                <Check class="size-4" />
+                            </SelectItemIndicator>
+                        </SelectItem>
+                    </SelectGroup>
                     <div
                         v-if="options.length === 0"
                         class="px-2 py-6 text-sm text-center text-xq-muted-foreground"
                     >
-                        No options
+                        {{
+                            loading
+                                ? (messages?.loading ?? t('Loading…'))
+                                : (messages?.noOptions ?? t('No options'))
+                        }}
                     </div>
                 </SelectViewport>
             </SelectContent>

package/resources/js/ui/XqTabs.vue

@@ -11,7 +11,7 @@ const model = defineModel<string | number>();
     <TabsRoot
         v-model="model"
         data-slot="xq-tabs"
-        :unmount-on-hide="unmountOnHide ?? true"
+        :unmount-on-hide="unmountOnHide"
         :class="cn('gap-3 flex flex-col', props.class)"
     >
         <slot />

package/resources/js/ui/XqTimeField.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { parseTime } from '@internationalized/date';
+import type { Time } from '@internationalized/date';
+import { TimeFieldInput, TimeFieldRoot } from 'reka-ui';
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import { controlClass } from './classes';
+
+const props = defineProps<{
+    id?: string;
+    seconds?: boolean;
+    steps?: { hour: number; minute: number; second: number };
+    disabled?: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    label?: string | null;
+    locale?: string;
+    class?: HTMLAttributes['class'];
+}>();
+const model = defineModel<string | null>();
+
+const time = computed<Time | undefined>({
+    get() {
+        try {
+            return model.value ? parseTime(model.value) : undefined;
+        } catch {
+            return undefined;
+        }
+    },
+    set(next) {
+        model.value = next ? next.toString().slice(0, props.seconds ? 8 : 5) : null;
+    },
+});
+</script>
+
+<template>
+    <TimeFieldRoot
+        :id="id"
+        v-slot="{ segments }"
+        v-model="time"
+        :granularity="seconds ? 'second' : 'minute'"
+        :step="steps"
+        :hour-cycle="24"
+        :locale="locale"
+        :disabled="disabled"
+        :aria-invalid="invalid || undefined"
+        :aria-describedby="describedBy"
+        :aria-label="label ?? undefined"
+        data-slot="xq-time-field"
+        :class="cn(controlClass, 'h-9 px-3 flex items-center tabular-nums', props.class)"
+    >
+        <template v-for="segment in segments" :key="segment.part">
+            <TimeFieldInput v-if="segment.part === 'literal'" :part="segment.part">
+                {{ segment.value }}
+            </TimeFieldInput>
+            <TimeFieldInput
+                v-else
+                :part="segment.part"
+                class="px-0.5 rounded-sm outline-none focus:bg-xq-accent focus:text-xq-accent-foreground data-[placeholder]:text-xq-muted-foreground"
+            >
+                {{ segment.value }}
+            </TimeFieldInput>
+        </template>
+    </TimeFieldRoot>
+</template>

package/resources/js/ui/classes.ts

@@ -5,8 +5,41 @@
 export const controlClass =
     'w-full min-w-0 rounded-xq-md border border-xq-input bg-xq-background text-sm text-xq-foreground shadow-xs transition-[color,box-shadow,border-color] outline-none placeholder:text-xq-muted-foreground focus-visible:border-xq-ring focus-visible:ring-[3px] focus-visible:ring-xq-ring/25 disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:border-xq-destructive aria-invalid:ring-xq-destructive/20';
 
+export const spinnerClass = 'size-4 shrink-0 motion-safe:animate-spin text-xq-muted-foreground';
+
 export const popoverClass =
     'z-50 overflow-hidden rounded-xq-md border border-xq-border bg-xq-popover text-xq-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0';
 
+export const groupLabelClass = 'px-2 py-1.5 text-xs font-medium text-xq-muted-foreground';
+
 export const optionClass =
     'relative flex w-full cursor-default items-center gap-2 rounded-xq-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-xq-accent data-[highlighted]:text-xq-accent-foreground';
+
+/** Text colors the PHP side can name. */
+export const toneClasses: Record<string, string> = {
+    neutral: 'text-xq-foreground',
+    primary: 'text-xq-primary',
+    danger: 'text-xq-destructive',
+    info: 'text-xq-info',
+    success: 'text-xq-success',
+    warning: 'text-xq-warning',
+};
+
+export const textSizeClasses: Record<string, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+};
+
+export const iconSizeClasses: Record<string, string> = {
+    xs: 'size-3',
+    sm: 'size-4',
+    md: 'size-5',
+    lg: 'size-6',
+    xl: 'size-8',
+    '2xl': 'size-10',
+};
+
+export const toolbarButtonClass =
+    'size-7 flex cursor-pointer items-center justify-center rounded-xq-sm text-xq-muted-foreground hover:bg-xq-accent aria-pressed:bg-xq-accent aria-pressed:text-xq-accent-foreground disabled:pointer-events-none disabled:opacity-50';

package/resources/js/ui/icons.ts

@@ -0,0 +1,95 @@
+import {
+    AtSign,
+    Building,
+    Calendar,
+    Check,
+    CircleAlert,
+    CircleCheck,
+    Clock,
+    CreditCard,
+    DollarSign,
+    Eye,
+    File,
+    Folder,
+    Globe,
+    Hash,
+    Heart,
+    Image,
+    Inbox,
+    Info,
+    Key,
+    Link,
+    Lock,
+    Mail,
+    MapPin,
+    Pencil,
+    Phone,
+    Plus,
+    Search,
+    Settings,
+    Star,
+    Tag,
+    ThumbsDown,
+    ThumbsUp,
+    Trash,
+    TriangleAlert,
+    User,
+    Users,
+    X,
+} from 'lucide-vue-next';
+import type { Component } from 'vue';
+
+/**
+ * shortcut: a fixed set, because any dynamic import of lucide would pull all of its
+ * icons into the main bundle. Apps add more with the `icons` option.
+ */
+const icons: Record<string, Component> = {
+    'at-sign': AtSign,
+    building: Building,
+    calendar: Calendar,
+    check: Check,
+    'circle-alert': CircleAlert,
+    'circle-check': CircleCheck,
+    clock: Clock,
+    'credit-card': CreditCard,
+    'dollar-sign': DollarSign,
+    eye: Eye,
+    file: File,
+    folder: Folder,
+    globe: Globe,
+    hash: Hash,
+    heart: Heart,
+    image: Image,
+    inbox: Inbox,
+    info: Info,
+    key: Key,
+    link: Link,
+    lock: Lock,
+    mail: Mail,
+    'map-pin': MapPin,
+    pencil: Pencil,
+    phone: Phone,
+    plus: Plus,
+    search: Search,
+    settings: Settings,
+    star: Star,
+    tag: Tag,
+    'thumbs-down': ThumbsDown,
+    'thumbs-up': ThumbsUp,
+    trash: Trash,
+    'triangle-alert': TriangleAlert,
+    user: User,
+    users: Users,
+    x: X,
+};
+
+/**
+ * Add icons that PHP can name, as { name: component }.
+ */
+export function registerIcons(extra: Record<string, Component>): void {
+    Object.assign(icons, extra);
+}
+
+export function resolveIcon(name: string): Component | null {
+    return icons[name] ?? null;
+}