@xelqun/forms 0.1.1 → 0.2.0

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import {
+    ColorAreaArea,
+    ColorAreaRoot,
+    ColorAreaThumb,
+    ColorSliderRoot,
+    ColorSliderThumb,
+    ColorSliderTrack,
+    colorToString,
+    convertToHsb,
+    isValidColor,
+    parseColor,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+} from 'reka-ui';
+import type { Color } from 'reka-ui';
+import { computed, ref, watch } from 'vue';
+import { useField } from '../../composables/useField';
+import { cn } from '../../lib/utils';
+import type { SchemaNode } from '../../schema/types';
+import { controlClass, popoverClass } from '../../ui/classes';
+import XqInput from '../../ui/XqInput.vue';
+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 | null
+>(props.node);
+const format = computed<string>(() => props.node.props?.format ?? 'hex');
+
+function toHsb(input: string | null | undefined): Color {
+    return convertToHsb(parseColor(input && isValidColor(input) ? input : '#000000'));
+}
+
+function toText(color: Color): string {
+    if (format.value === 'rgba') {
+        return colorToString({ ...color, alpha: Math.min(color.alpha, 0.999) }, 'rgb').replace(
+            /, 0\.999\)$/,
+            ', 1)',
+        );
+    }
+
+    const opaque = { ...color, alpha: 1 };
+
+    return colorToString(opaque, format.value === 'hex' ? 'hex' : (format.value as 'rgb' | 'hsl'));
+}
+
+/** Kept as HSB, because hex and rgb forget the hue of a black or grey color. */
+const color = ref<Color>(toHsb(value.value));
+
+watch(value, (next) => {
+    if (next !== toText(color.value)) {
+        color.value = toHsb(next);
+    }
+});
+
+function pick(next: Color): void {
+    color.value = next;
+    value.value = toText(next);
+}
+
+function type(text: string | number | null | undefined): void {
+    value.value = text ? String(text) : null;
+}
+</script>
+
+<template>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
+        <PopoverRoot @update:open="(open) => !open && onBlur()">
+            <div class="gap-2 flex items-center">
+                <PopoverTrigger as-child>
+                    <button
+                        type="button"
+                        :disabled="disabled"
+                        :aria-label="
+                            t('Choose a color, currently :value', { value: value ?? t('none') })
+                        "
+                        :class="
+                            cn(
+                                controlClass,
+                                'size-9 shrink-0 cursor-pointer',
+                                error && 'border-xq-destructive',
+                            )
+                        "
+                        :style="{ backgroundColor: value ?? undefined }"
+                    />
+                </PopoverTrigger>
+                <XqInput
+                    :id="id"
+                    :model-value="value"
+                    :placeholder="placeholder ?? undefined"
+                    :disabled="disabled"
+                    :aria-invalid="error ? true : undefined"
+                    :aria-describedby="describedBy"
+                    class="font-mono"
+                    @update:model-value="type"
+                    @blur="onBlur"
+                />
+            </div>
+            <PopoverPortal>
+                <PopoverContent
+                    align="start"
+                    :side-offset="4"
+                    :class="cn(popoverClass, 'w-60 gap-3 p-3 grid')"
+                >
+                    <ColorAreaRoot
+                        v-slot="{ style }"
+                        :model-value="color"
+                        color-space="hsb"
+                        x-channel="saturation"
+                        y-channel="brightness"
+                        @update:color="pick"
+                    >
+                        <ColorAreaArea
+                            :style="style"
+                            class="h-36 relative w-full touch-none rounded-xq-md"
+                        >
+                            <ColorAreaThumb
+                                class="size-4 border-white shadow-md rounded-full border-2 outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40"
+                            />
+                        </ColorAreaArea>
+                    </ColorAreaRoot>
+                    <ColorSliderRoot
+                        :model-value="color"
+                        color-space="hsb"
+                        channel="hue"
+                        class="h-4 relative flex w-full touch-none items-center"
+                        @update:color="pick"
+                    >
+                        <ColorSliderTrack class="h-2.5 relative w-full rounded-full" />
+                        <ColorSliderThumb
+                            class="size-4 border-white shadow-md block rounded-full border-2 outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40"
+                        />
+                    </ColorSliderRoot>
+                    <ColorSliderRoot
+                        v-if="format === 'rgba'"
+                        :model-value="color"
+                        color-space="hsb"
+                        channel="alpha"
+                        class="h-4 relative flex w-full touch-none items-center"
+                        @update:color="pick"
+                    >
+                        <ColorSliderTrack class="h-2.5 relative w-full rounded-full" />
+                        <ColorSliderThumb
+                            class="size-4 border-white shadow-md block rounded-full border-2 outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/40"
+                        />
+                    </ColorSliderRoot>
+                </PopoverContent>
+            </PopoverPortal>
+        </PopoverRoot>
+    </XqFieldWrapper>
+</template>

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

@@ -1,21 +1,69 @@
 <script setup lang="ts">
 import { getLocalTimeZone, parseDate } from '@internationalized/date';
 import type { DateValue } from '@internationalized/date';
-import { CalendarDays, X } from 'lucide-vue-next';
+import { CalendarDays, LoaderCircle, X } from 'lucide-vue-next';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
 import { computed, ref } from 'vue';
 import { useField } from '../../composables/useField';
+import { formatPhpDate } from '../../core/dates';
 import { cn } from '../../lib/utils';
 import type { SchemaNode } from '../../schema/types';
-import { controlClass, popoverClass } from '../../ui/classes';
+import { controlClass, popoverClass, spinnerClass } from '../../ui/classes';
 import XqCalendar from '../../ui/XqCalendar.vue';
+import XqTimeField from '../../ui/XqTimeField.vue';
 import XqFieldWrapper from '../XqFieldWrapper.vue';
+import { useTranslator } from '../../composables/context';
 
+const t = useTranslator();
 const props = defineProps<{ node: SchemaNode }>();
-const { value, error, describedBy, required, disabled, id, onBlur } = useField<string | null>(
-    props.node,
-);
+const {
+    store,
+    value,
+    error,
+    label: fieldLabel,
+    placeholder,
+    describedBy,
+    showLoading,
+    required,
+    disabled,
+    id,
+    onBlur,
+} = useField<string | null>(props.node);
 const open = ref(false);
+const options = computed(() => props.node.props ?? {});
+const hasTime = computed(() => !!options.value.time);
+const hasDate = computed(() => !options.value.timeOnly);
+
+/** A time picked before its date has nowhere to go yet, so it waits here. */
+const pendingTime = ref<string | null>(null);
+
+const timeText = computed<string | null>({
+    get() {
+        if (!value.value) {
+            return pendingTime.value;
+        }
+
+        return hasDate.value ? value.value.slice(11) || null : value.value;
+    },
+    set(next) {
+        if (!hasDate.value) {
+            value.value = next;
+        } else if (value.value) {
+            // A half-typed time comes through as null, and the value should wait for the rest.
+            if (next) {
+                value.value = `${value.value.slice(0, 10)} ${next}`;
+            }
+        } else {
+            pendingTime.value = next;
+        }
+
+        onBlur();
+    },
+});
+
+function midnight(): string {
+    return options.value.seconds ? '00:00:00' : '00:00';
+}
 
 function parse(input: unknown): DateValue | undefined {
     if (typeof input !== 'string' || input === '') {
@@ -32,65 +80,113 @@ function parse(input: unknown): DateValue | undefined {
 const date = computed<DateValue | undefined>({
     get: () => parse(value.value),
     set: (next) => {
-        value.value = next ? next.toString() : null;
+        if (next) {
+            value.value = hasTime.value
+                ? `${next.toString()} ${timeText.value ?? midnight()}`
+                : next.toString();
+        } else {
+            value.value = null;
+        }
+
         open.value = false;
         onBlur();
     },
 });
 
-const label = computed(() =>
-    date.value
-        ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(
-              date.value.toDate(getLocalTimeZone()),
-          )
-        : null,
-);
+const disabledDates = computed(() => new Set<string>(options.value.disabledDates ?? []));
+
+const label = computed(() => {
+    if (!date.value) {
+        return null;
+    }
+
+    const shown = date.value.toDate(getLocalTimeZone());
+
+    if (!options.value.displayFormat) {
+        return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(shown);
+    }
+
+    const [hours = 0, minutes = 0, seconds = 0] = (timeText.value ?? '').split(':').map(Number);
+
+    shown.setHours(hours, minutes, seconds);
+
+    return formatPhpDate(shown, options.value.displayFormat, store.locale);
+});
 </script>
 
 <template>
-    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required">
-        <PopoverRoot v-model:open="open">
-            <div class="relative">
-                <PopoverTrigger as-child>
+    <XqFieldWrapper :node="node" :id="id" :error="error" :required="required" control-shows-loading>
+        <div :class="cn('gap-2 grid', hasDate && hasTime && 'sm:grid-cols-[2fr_1fr]')">
+            <PopoverRoot v-if="hasDate" v-model:open="open">
+                <div class="relative">
+                    <PopoverTrigger as-child>
+                        <button
+                            :id="id"
+                            type="button"
+                            :disabled="disabled"
+                            :aria-invalid="error ? true : undefined"
+                            :aria-describedby="describedBy"
+                            :class="
+                                cn(
+                                    controlClass,
+                                    'h-9 gap-2 px-3 flex cursor-pointer items-center text-left',
+                                    !label && 'text-xq-muted-foreground',
+                                )
+                            "
+                        >
+                            <LoaderCircle
+                                v-if="showLoading"
+                                :class="spinnerClass"
+                                aria-hidden="true"
+                            />
+                            <CalendarDays v-else class="size-4 shrink-0 opacity-60" />
+                            <span class="truncate">{{
+                                label ?? placeholder ?? t('Pick a date')
+                            }}</span>
+                        </button>
+                    </PopoverTrigger>
                     <button
-                        :id="id"
+                        v-if="label && !required && !disabled"
                         type="button"
-                        :disabled="disabled"
-                        :aria-invalid="error ? true : undefined"
-                        :aria-describedby="describedBy"
-                        :class="
-                            cn(
-                                controlClass,
-                                'h-9 gap-2 px-3 flex cursor-pointer items-center text-left',
-                                !label && 'text-xq-muted-foreground',
-                            )
-                        "
+                        class="right-2 size-6 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="t('Clear date')"
+                        @click="date = undefined"
                     >
-                        <CalendarDays class="size-4 shrink-0 opacity-60" />
-                        <span class="truncate">{{
-                            label ?? node.placeholder ?? 'Pick a date'
-                        }}</span>
+                        <X class="size-3.5" />
                     </button>
-                </PopoverTrigger>
-                <button
-                    v-if="label && !required && !disabled"
-                    type="button"
-                    class="right-2 size-6 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 date"
-                    @click="date = undefined"
-                >
-                    <X class="size-3.5" />
-                </button>
-            </div>
-            <PopoverPortal>
-                <PopoverContent align="start" :side-offset="4" :class="cn(popoverClass, 'w-auto')">
-                    <XqCalendar
-                        v-model="date"
-                        :min-value="parse(node.props?.min)"
-                        :max-value="parse(node.props?.max)"
-                    />
-                </PopoverContent>
-            </PopoverPortal>
-        </PopoverRoot>
+                </div>
+                <PopoverPortal>
+                    <PopoverContent
+                        align="start"
+                        :side-offset="4"
+                        :class="cn(popoverClass, 'w-auto')"
+                    >
+                        <XqCalendar
+                            :locale="store.locale"
+                            v-model="date"
+                            :min-value="parse(node.props?.min)"
+                            :max-value="parse(node.props?.max)"
+                            :is-date-unavailable="
+                                disabledDates.size
+                                    ? (day) => disabledDates.has(day.toString())
+                                    : undefined
+                            "
+                        />
+                    </PopoverContent>
+                </PopoverPortal>
+            </PopoverRoot>
+            <XqTimeField
+                v-if="hasTime"
+                :id="hasDate ? `${id}-time` : id"
+                v-model="timeText"
+                :locale="store.locale"
+                :seconds="!!options.seconds"
+                :steps="options.steps"
+                :disabled="disabled"
+                :invalid="!!error"
+                :described-by="describedBy"
+                :label="fieldLabel"
+            />
+        </div>
     </XqFieldWrapper>
 </template>