@antelopejs/dms 0.4.1 → 0.4.3

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { FormProps } from "../../composables/form/types";
 import type { FormFieldValue } from "../../composables/form/types/value";
-import { cloneFormValue } from "../../composables/form/useForm";
+import {
+  cloneFormValue,
+  isFieldMarkedRequired,
+} from "../../composables/form/useForm";
 import {
   FORM_VALIDATOR_KEY,
   type FormValidator,
@@ -38,6 +41,7 @@ const {
   allFields,
   disabledFields,
   hiddenFields,
+  requiredFields,
   isFieldGroup,
   submitSucceeded,
   resolvedFetchUrl,
@@ -200,6 +204,23 @@ function isGroupVisible(group: { fields: FormField[] }): boolean {
   return group.fields.some((field) => !isFieldHidden(field));
 }
 
+function isFieldRequired(field: FormField): boolean {
+  return isFieldMarkedRequired(
+    field,
+    disabledFields.value,
+    hiddenFields.value,
+    requiredFields.value,
+  );
+}
+
+function isGroupRequired(group: { fields: FormField[] }): boolean {
+  return group.fields.some(isFieldRequired);
+}
+
+const hasRequiredFields = computed(() =>
+  toValue(allFields).some(isFieldRequired),
+);
+
 function shouldShowDisplay(field: FormField): boolean {
   return isFieldDisabled(field) && !!field.type;
 }
@@ -379,6 +400,13 @@ onUnmounted(async () => {
                   class="text-default block text-base font-semibold sm:text-sm"
                 >
                   {{ processI18n(item.label || "") }}
+                  <span
+                    v-if="isGroupRequired(item)"
+                    class="text-error ms-0.5"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <p v-if="item.description" class="text-dimmed text-xs">
                   {{ processI18n(item.description || "") }}
@@ -453,6 +481,13 @@ onUnmounted(async () => {
                   class="text-default block text-base font-semibold sm:text-sm"
                 >
                   {{ processI18n(item.label || "") }}
+                  <span
+                    v-if="isFieldRequired(item)"
+                    class="text-error ms-0.5"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <p v-if="item.description" class="text-dimmed text-xs">
                   {{ processI18n(item.description || "") }}
@@ -509,6 +544,11 @@ onUnmounted(async () => {
         </template>
       </div>
 
+      <p v-if="hasRequiredFields" class="text-dimmed mt-6 text-xs">
+        <span class="text-error" aria-hidden="true">*</span>
+        {{ $t("dms.form.required_legend") }}
+      </p>
+
       <template v-if="showActions">
         <section class="mt-6 flex justify-end gap-2">
           <UButton

package/frontend-vue/layers/dms-ui/app/components/form/components/Calendar.vue

@@ -11,27 +11,39 @@ import {
   type CalendarDate,
 } from "@internationalized/date";
 
+// Mid-selection, the range calendar emits a range whose end is still unset.
 interface StrictDateRange {
-  start: CalendarDate;
-  end: CalendarDate;
+  start: CalendarDate | undefined;
+  end: CalendarDate | undefined;
 }
 
 interface StringDateRange {
-  start: string;
-  end: string;
+  start: string | undefined;
+  end: string | undefined;
 }
 
 interface NativeDateRange {
-  start: Date;
-  end: Date;
+  start: Date | undefined;
+  end: Date | undefined;
 }
 
-type DateValue = CalendarDate | StrictDateRange | string | null | undefined;
+type DateValue =
+  | CalendarDate
+  | StrictDateRange
+  | string
+  | (string | Date | CalendarDate)[]
+  | null
+  | undefined;
 
 const props = defineProps<CalendarProps<R, M>>();
 const emits = defineEmits<{
   "update:modelValue": [
-    value: string | { start: string; end: string } | null | undefined,
+    value:
+      | string
+      | { start: string | undefined; end: string | undefined }
+      | string[]
+      | null
+      | undefined,
   ];
   "update:placeholder": [date: CalendarDate];
   "update:startValue": [date: CalendarDate | undefined];
@@ -42,22 +54,25 @@ function convertIsoStringToCalendarDate(value: string): CalendarDate {
   return parseDate(value.split("T")[0]!);
 }
 
-function convertDateRangeValue(
-  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
-): StrictDateRange | undefined {
-  if (isString(rangeValue.start) && isString(rangeValue.end)) {
-    return {
-      start: convertIsoStringToCalendarDate(rangeValue.start),
-      end: convertIsoStringToCalendarDate(rangeValue.end),
-    };
+function convertToCalendarDate(
+  value: string | Date | CalendarDate | undefined,
+): CalendarDate | undefined {
+  if (isString(value)) {
+    return convertIsoStringToCalendarDate(value);
   }
-  if (rangeValue.start instanceof Date && rangeValue.end instanceof Date) {
-    return {
-      start: toCalendarDate(fromDate(rangeValue.start, "UTC")),
-      end: toCalendarDate(fromDate(rangeValue.end, "UTC")),
-    };
+  if (value instanceof Date) {
+    return toCalendarDate(fromDate(value, "UTC"));
   }
-  return undefined;
+  return value;
+}
+
+function convertDateRangeValue(
+  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
+): StrictDateRange {
+  return {
+    start: convertToCalendarDate(rangeValue.start),
+    end: convertToCalendarDate(rangeValue.end),
+  };
 }
 
 function isDateRangeValue(
@@ -73,7 +88,10 @@ function convertModelValue(value: DateValue): DateValue {
     return convertIsoStringToCalendarDate(value);
   }
   if (isDateRangeValue(value)) {
-    return convertDateRangeValue(value) ?? value;
+    return convertDateRangeValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(convertToCalendarDate) as CalendarDate[];
   }
   return value;
 }
@@ -88,7 +106,12 @@ type EmitValue = unknown;
 
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && value) {
-    if (
+    if (Array.isArray(value)) {
+      const isoStrings = (value as CalendarDate[]).map((date) =>
+        date.toString(),
+      );
+      emits("update:modelValue", isoStrings);
+    } else if (
       isObject(value) &&
       "year" in value &&
       "month" in value &&
@@ -98,8 +121,8 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
       emits("update:modelValue", isoString);
     } else if (isObject(value) && "start" in value && "end" in value) {
       const dateRange = value as unknown as StrictDateRange;
-      const startIso = dateRange.start.toString();
-      const endIso = dateRange.end.toString();
+      const startIso = dateRange.start?.toString();
+      const endIso = dateRange.end?.toString();
       emits("update:modelValue", { start: startIso, end: endIso });
     } else {
       emits("update:modelValue", value as string | null | undefined);

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePicker.vue

@@ -13,29 +13,41 @@ import {
 } from "@internationalized/date";
 import { reactivePick } from "@vueuse/core";
 
+// Mid-selection, the range calendar emits a range whose end is still unset.
 interface StrictDateRange {
-  start: CalendarDate;
-  end: CalendarDate;
+  start: CalendarDate | undefined;
+  end: CalendarDate | undefined;
 }
 
 interface StringDateRange {
-  start: string;
-  end: string;
+  start: string | undefined;
+  end: string | undefined;
 }
 
 interface NativeDateRange {
-  start: Date;
-  end: Date;
+  start: Date | undefined;
+  end: Date | undefined;
 }
 
-type DateValue = CalendarDate | StrictDateRange | string | null | undefined;
+type DateValue =
+  | CalendarDate
+  | StrictDateRange
+  | string
+  | (string | Date | CalendarDate)[]
+  | null
+  | undefined;
 
 type DatePickerProps = Omit<CalendarProps<R, M>, "modelValue">;
 
 const props = defineProps<DatePickerProps>();
 const emits = defineEmits<{
   "update:modelValue": [
-    value: string | { start: string; end: string } | null | undefined,
+    value:
+      | string
+      | { start: string | undefined; end: string | undefined }
+      | string[]
+      | null
+      | undefined,
   ];
   "update:placeholder": [date: CalendarDate];
   "update:startValue": [date: CalendarDate | undefined];
@@ -50,22 +62,25 @@ function convertIsoStringToCalendarDate(value: string): CalendarDate {
   return parseDate(value.split("T")[0]!);
 }
 
-function convertDateRangeValue(
-  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
-): StrictDateRange | undefined {
-  if (isString(rangeValue.start) && isString(rangeValue.end)) {
-    return {
-      start: convertIsoStringToCalendarDate(rangeValue.start),
-      end: convertIsoStringToCalendarDate(rangeValue.end),
-    };
+function convertToCalendarDate(
+  value: string | Date | CalendarDate | undefined,
+): CalendarDate | undefined {
+  if (isString(value)) {
+    return convertIsoStringToCalendarDate(value);
   }
-  if (rangeValue.start instanceof Date && rangeValue.end instanceof Date) {
-    return {
-      start: toCalendarDate(fromDate(rangeValue.start, "UTC")),
-      end: toCalendarDate(fromDate(rangeValue.end, "UTC")),
-    };
+  if (value instanceof Date) {
+    return toCalendarDate(fromDate(value, "UTC"));
   }
-  return undefined;
+  return value;
+}
+
+function convertDateRangeValue(
+  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
+): StrictDateRange {
+  return {
+    start: convertToCalendarDate(rangeValue.start),
+    end: convertToCalendarDate(rangeValue.end),
+  };
 }
 
 function isDateRangeValue(
@@ -81,7 +96,10 @@ function convertModelValue(value: DateValue): DateValue {
     return convertIsoStringToCalendarDate(value);
   }
   if (isDateRangeValue(value)) {
-    return convertDateRangeValue(value) ?? value;
+    return convertDateRangeValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(convertToCalendarDate) as CalendarDate[];
   }
   return value;
 }
@@ -96,7 +114,12 @@ type EmitValue = unknown;
 
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && value) {
-    if (
+    if (Array.isArray(value)) {
+      const isoStrings = (value as CalendarDate[]).map((date) =>
+        date.toString(),
+      );
+      emits("update:modelValue", isoStrings);
+    } else if (
       isObject(value) &&
       "year" in value &&
       "month" in value &&
@@ -106,8 +129,8 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
       emits("update:modelValue", isoString);
     } else if (isObject(value) && "start" in value && "end" in value) {
       const dateRange = value as unknown as StrictDateRange;
-      const startIso = dateRange.start.toString();
-      const endIso = dateRange.end.toString();
+      const startIso = dateRange.start?.toString();
+      const endIso = dateRange.end?.toString();
       emits("update:modelValue", { start: startIso, end: endIso });
     } else {
       emits("update:modelValue", value as string | null | undefined);
@@ -123,18 +146,40 @@ const forwarded = useForwardPropsEmits(
   wrappedEmits as typeof emits,
 );
 const buttonProps = reactivePick(props, "disabled");
+
+function formatDateLabel(value: unknown): string | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  // A CalendarDate stringifies to its ISO date.
+  const date = value instanceof Date ? value : String(value);
+  return formatDate(date, locale.value) ?? undefined;
+}
+
+// Range mode holds a { start, end } object and multiple mode an array, which
+// formatDate cannot read as a single date.
+const label = computed(() => {
+  const value: unknown = modelValue.value;
+  if (Array.isArray(value)) {
+    return value.map(formatDateLabel).filter(Boolean).join(", ") || undefined;
+  }
+  if (isDateRangeValue(value)) {
+    return (
+      [formatDateLabel(value.start), formatDateLabel(value.end)]
+        .filter(Boolean)
+        .join(" – ") || undefined
+    );
+  }
+  return formatDateLabel(value);
+});
 </script>
 
 <template>
   <UPopover>
     <UButton
-      :label="
-        modelValue
-          ? (formatDate(modelValue, locale) ?? undefined)
-          : t('dms.form.select_date')
-      "
+      :label="label ?? t('dms.form.select_date')"
       :ui="{
-        label: modelValue ? 'text-default' : 'text-dimmed',
+        label: label ? 'text-default' : 'text-dimmed',
       }"
       v-bind="buttonProps"
       variant="outline"

package/frontend-vue/layers/dms-ui/app/composables/chart/useThemeRevision.ts

@@ -1,29 +1,8 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
 import { clearChartColorCache } from "./useChartTheme";
 
-interface ColorModeLike {
-  preference?: string;
-  value?: string;
-  $subscribe?: (cb: () => void) => () => void;
-}
-
-type ColorModeFactory = () => ColorModeLike;
-
 const THEME_OBSERVED_ATTRIBUTES = ["class", "data-theme", "style"];
 
-function getColorModeFactory(): ColorModeFactory | undefined {
-  const fn = (globalThis as unknown as { useColorMode?: ColorModeFactory })
-    .useColorMode;
-  return typeof fn === "function" ? fn : undefined;
-}
-
-function trySubscribeColorMode(bump: () => void) {
-  const factory = getColorModeFactory();
-  if (!factory) return;
-  const mode = factory();
-  mode?.$subscribe?.(bump);
-}
-
 function createThemeObserver(bump: () => void): MutationObserver {
   const observer = new MutationObserver(bump);
   observer.observe(document.documentElement, {
@@ -47,7 +26,6 @@ export function useThemeRevision(): Ref<number> {
 
   onMounted(() => {
     observer = createThemeObserver(bump);
-    trySubscribeColorMode(bump);
   });
 
   onBeforeUnmount(() => {

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -258,6 +258,28 @@ export function buildValidationSchema(
   return z.object(newShape).passthrough();
 }
 
+// A switch always holds a value (off is `false`): it can never be left
+// missing, so marking it required would only suggest an action that does not
+// exist.
+const ALWAYS_FILLED_FIELD_TYPES = new Set(["boolean"]);
+
+/**
+ * Whether the form marks a field as required: declared so, or made so by a
+ * watch action, and neither disabled nor hidden, since `buildValidationSchema`
+ * does not validate inactive fields, nor a type that always holds a value.
+ */
+export function isFieldMarkedRequired(
+  field: Pick<FormField, "id" | "required" | "disabled" | "type">,
+  disabled: Set<string> | undefined,
+  hidden: Set<string> | undefined,
+  required: Set<string> | undefined,
+): boolean {
+  if (field.disabled || disabled?.has(field.id) || hidden?.has(field.id))
+    return false;
+  if (field.type && ALWAYS_FILLED_FIELD_TYPES.has(field.type)) return false;
+  return !!field.required || (required?.has(field.id) ?? false);
+}
+
 function watchFieldChanges(
   state: Ref<Record<string, unknown>>,
   componentId: string | undefined,
@@ -546,6 +568,7 @@ export const useForm = (props: FormProps) => {
     allFields,
     disabledFields,
     hiddenFields,
+    requiredFields,
     isFieldGroup,
     submitSucceeded,
     resolvedFetchUrl,

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -169,6 +169,7 @@
       "row_added_success": "The item has been successfully added",
       "error_missing_fields": "Missing required fields",
       "error_fill_all_fields": "Please fill in all required fields",
+      "required_legend": "Required fields",
       "fetch_error_title": "Failed to fetch data",
       "fetch_error_unknown": "An unexpected error occurred. Please try again later.",
       "select_date": "Select date",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -169,6 +169,7 @@
       "row_added_success": "L'élément a été ajouté avec succès",
       "error_missing_fields": "Champs requis manquants",
       "error_fill_all_fields": "Veuillez remplir tous les champs requis",
+      "required_legend": "Champs requis",
       "error_not_submitted": "Le formulaire n'a pas été soumis",
       "fetch_error_title": "Échec de la récupération des données",
       "fetch_error_unknown": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard.",

package/frontend-vue/package.json

@@ -39,7 +39,7 @@
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
-    "@vueuse/core": "^13.0.0",
+    "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.1.0",
     "apexcharts": "^4.4.0",
     "defu": "^6.1.4",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@antelopejs/core": ">=1.9.1 <2",
-    "@antelopejs/dms-frontend": ">=0.2.6 <1.0.0",
+    "@antelopejs/dms-frontend": ">=0.2.8 <1.0.0",
     "@eslint/js": "^8.57.0",
     "@inertiajs/vue3": "^3.7.0",
     "@nuxt/ui": "4.10.0",

package/frontend-vue/pnpm-lock.yaml

@@ -66,8 +66,8 @@ importers:
         specifier: ^1.5.4
         version: 1.5.4(@vue-flow/core@1.48.2(vue@3.5.25(typescript@5.9.3)))(vue@3.5.25(typescript@5.9.3))
       '@vueuse/core':
-        specifier: ^13.0.0
-        version: 13.9.0(vue@3.5.25(typescript@5.9.3))
+        specifier: ^14.3.0
+        version: 14.4.0(vue@3.5.25(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: ^14.1.0
         version: 14.1.0(focus-trap@7.8.0)(fuse.js@7.5.0)(sortablejs@1.14.0)(vue@3.5.25(typescript@5.9.3))
@@ -124,8 +124,8 @@ importers:
         specifier: '>=1.9.1 <2'
         version: 1.9.1(@types/node@24.8.1)
       '@antelopejs/dms-frontend':
-        specifier: '>=0.2.6 <1.0.0'
-        version: 0.2.6(@antelopejs/core@1.9.1(@types/node@24.8.1))
+        specifier: '>=0.2.8 <1.0.0'
+        version: 0.2.8(@antelopejs/core@1.9.1(@types/node@24.8.1))
       '@eslint/js':
         specifier: ^8.57.0
         version: 8.57.0
@@ -200,8 +200,8 @@ packages:
     resolution: {integrity: sha512-MPLJak0rPluV4lgsdsO5ba03sgTxIGSncajBcoaoppuppQmksdpaemojIHiVLJ4LiG0iiH21Roaed8XXy1XkYQ==}
     hasBin: true
 
-  '@antelopejs/dms-frontend@0.2.6':
-    resolution: {integrity: sha512-dCR9EWkpW4CekV5M87igyCZyRNXt9fVr5M2t9neATj1JqN/r6MltYJd4ShKnilSN4zQZ4ykkuFL/b9b0k79rDw==}
+  '@antelopejs/dms-frontend@0.2.8':
+    resolution: {integrity: sha512-7qrlf2M3J26DZxGZVvM/3qjPDeDfoRMrE7HEPFxWav8Pe1QFct7LtgY7NmKup9XdrRyUw4nqckxvW8UZDSjpeg==}
     engines: {node: '>=20.12.0'}
     hasBin: true
     peerDependencies:
@@ -1753,11 +1753,6 @@ packages:
   '@vueuse/core@12.8.2':
     resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
 
-  '@vueuse/core@13.9.0':
-    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
-    peerDependencies:
-      vue: ^3.5.0
-
   '@vueuse/core@14.1.0':
     resolution: {integrity: sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==}
     peerDependencies:
@@ -1858,9 +1853,6 @@ packages:
   '@vueuse/metadata@12.8.2':
     resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
 
-  '@vueuse/metadata@13.9.0':
-    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
-
   '@vueuse/metadata@14.1.0':
     resolution: {integrity: sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==}
 
@@ -1873,11 +1865,6 @@ packages:
   '@vueuse/shared@12.8.2':
     resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
 
-  '@vueuse/shared@13.9.0':
-    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
-    peerDependencies:
-      vue: ^3.5.0
-
   '@vueuse/shared@14.1.0':
     resolution: {integrity: sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==}
     peerDependencies:
@@ -4344,7 +4331,7 @@ snapshots:
     transitivePeerDependencies:
       - '@types/node'
 
-  '@antelopejs/dms-frontend@0.2.6(@antelopejs/core@1.9.1(@types/node@24.8.1))':
+  '@antelopejs/dms-frontend@0.2.8(@antelopejs/core@1.9.1(@types/node@24.8.1))':
     dependencies:
       boxen: 5.1.2
       chalk: 4.1.2
@@ -5944,13 +5931,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/core@13.9.0(vue@3.5.25(typescript@5.9.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 13.9.0
-      '@vueuse/shared': 13.9.0(vue@3.5.25(typescript@5.9.3))
-      vue: 3.5.25(typescript@5.9.3)
-
   '@vueuse/core@14.1.0(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -5989,8 +5969,6 @@ snapshots:
 
   '@vueuse/metadata@12.8.2': {}
 
-  '@vueuse/metadata@13.9.0': {}
-
   '@vueuse/metadata@14.1.0': {}
 
   '@vueuse/metadata@14.4.0': {}
@@ -6008,10 +5986,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/shared@13.9.0(vue@3.5.25(typescript@5.9.3))':
-    dependencies:
-      vue: 3.5.25(typescript@5.9.3)
-
   '@vueuse/shared@14.1.0(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       vue: 3.5.25(typescript@5.9.3)

package/frontend-vue/tests/color-mode-server-render.test.ts

@@ -0,0 +1,84 @@
+/**
+ * The color-mode plugin as the server runs it: the `<html>` tag of the rendered
+ * document already carries an explicit preference, so the first paint is right
+ * without waiting for JavaScript, and `system` is left to the pre-paint script.
+ */
+import { useHead } from "@unhead/vue";
+import { createHead, renderSSRHead } from "@unhead/vue/server";
+import { createSSRApp, ref } from "vue";
+import { beforeEach, expect, it, vi } from "vitest";
+
+interface CookieOptions {
+  default: () => unknown;
+  maxAge?: number;
+}
+
+const COLOR_MODE_COOKIE = "dms-color-mode";
+const ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365;
+const requestCookies = new Map<string, unknown>();
+const cookieReads = vi.fn();
+
+vi.stubGlobal("defineDmsPlugin", (setup: unknown) => setup);
+vi.stubGlobal("useHead", useHead);
+vi.stubGlobal("useDmsCookie", (name: string, options: CookieOptions) => {
+  cookieReads(name, options);
+  return ref(
+    requestCookies.has(name) ? requestCookies.get(name) : options.default(),
+  );
+});
+
+const { default: colorModePlugin } = await import(
+  "../layers/dms-layout/app/plugins/color-mode"
+);
+
+async function renderHead(preference?: string) {
+  if (preference !== undefined)
+    requestCookies.set(COLOR_MODE_COOKIE, preference);
+  const app = createSSRApp({ render: () => null });
+  const head = createHead();
+  app.use(head);
+  await app.runWithContext(() => colorModePlugin({} as never));
+  return renderSSRHead(head);
+}
+
+beforeEach(() => {
+  requestCookies.clear();
+  cookieReads.mockClear();
+});
+
+it.each(["light", "dark"])(
+  "renders the %s class on <html> for an explicit preference",
+  async (preference) => {
+    const { htmlAttrs } = await renderHead(preference);
+
+    expect(htmlAttrs).toContain(` class="${preference}"`);
+  },
+);
+
+it.each([undefined, "system", "sepia"])(
+  "leaves the class to the browser for a %s preference",
+  async (preference) => {
+    const { htmlAttrs } = await renderHead(preference);
+
+    expect(htmlAttrs).not.toContain("class");
+  },
+);
+
+it("reads the dms-color-mode cookie, kept a year and defaulting to system", async () => {
+  await renderHead();
+
+  expect(cookieReads).toHaveBeenCalledOnce();
+  const [name, options] = cookieReads.mock.calls[0] as [string, CookieOptions];
+  expect(name).toBe(COLOR_MODE_COOKIE);
+  expect(options.maxAge).toBe(ONE_YEAR_IN_SECONDS);
+  expect(options.default()).toBe("system");
+});
+
+it("ships the pre-paint script as a classic inline script in <head>", async () => {
+  // No src, type, defer or async: the browser runs it while it parses <head>,
+  // before the deferred entry module that installs Nuxt UI.
+  const { headTags, bodyTags, bodyTagsOpen } = await renderHead("dark");
+
+  expect(headTags).toMatch(/<script id="dms-color-mode">\(\(\) => \{/);
+  expect(bodyTags + bodyTagsOpen).toBe("");
+});