@saasmakers/ui 2.0.83 → 2.1.1

package/app/components/fields/FieldSelect.vue

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
 import type { FieldInput } from '#components'
+import { autoUpdate, flip, size as floatingSize, offset, shift, useFloating } from '@floating-ui/vue'
 import { vOnClickOutside } from '@vueuse/components'
-import type { FieldSelect, FieldSelectOption } from '../../types/fields'
+import { onKeyStroke } from '@vueuse/core'
+import type { FieldSelect, FieldSelectMaxHeight, FieldSelectOption, FieldSize } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   border: 'full',
   caret: true,
   columns: () => [],
   description: '',
-  direction: 'bottom',
+  direction: 'auto',
   disabled: false,
-  hideCaret: false,
   hideError: false,
-  hideLabel: false,
+  iconOnly: false,
   label: '',
   labelIcon: undefined,
   maxHeight: 'xs',
@@ -29,60 +30,76 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
 })
 
 const emit = defineEmits<{
-  change: [event: MouseEvent, value: string]
-  click: [event: MouseEvent, value: string]
-  optionClick: [event: MouseEvent, value: string]
+  change: [event: Event, value: string]
 }>()
 
+const menuLayout = {
+  gap: 4,
+  maxHeight: {
+    lg: 512,
+    md: 448,
+    sm: 384,
+    xs: 320,
+  } satisfies Record<FieldSelectMaxHeight, number>,
+  viewportPadding: 8,
+}
+
+const textSizeByFieldSize = {
+  base: 'sm',
+  lg: 'base',
+  sm: 'xs',
+} satisfies Record<FieldSize, BaseSize>
+
 const { t } = useI18n()
 const id = useId()
+const labelId = `${id}-label`
+const menuId = `${id}-options`
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
-const opened = ref(false)
-const searchRaw = ref('')
-const searchInput = ref<InstanceType<typeof FieldInput>>()
+const isOpen = ref(false)
+const searchQuery = ref('')
+const searchInputRef = ref<InstanceType<typeof FieldInput>>()
+const labelRef = ref<HTMLElement>()
+const triggerRef = ref<HTMLElement>()
+const menuRef = ref<HTMLElement>()
 
-const computedColumns = computed(() => {
+let hoverCloseTimeout: ReturnType<typeof setTimeout> | undefined
+let isClosing = false
+
+const resolvedColumns = computed(() => {
   if (props.columns.length > 0) {
     return props.columns
   }
 
-  return [{ options: computedOptions.value }]
+  return [{ options: props.options }]
 })
 
-const computedOptions = computed(() => {
-  const options: FieldSelectOption[] = []
-
+const allOptions = computed(() => {
   if (props.columns.length > 0) {
-    for (const column of props.columns) {
-      for (const columnOption of column.options) {
-        options.push(columnOption)
-      }
-    }
-  }
-  else {
-    for (const columnOption of props.options) {
-      options.push(columnOption)
-    }
+    return props.columns.flatMap(column => column.options)
   }
 
-  return options
+  return props.options
+})
+
+const isMultiColumn = computed(() => {
+  return resolvedColumns.value.length >= 2
 })
 
-const searchQueryCleaned = computed(() => {
-  return normalizeText(searchRaw.value.trim())
+const normalizedSearchQuery = computed(() => {
+  return normalizeText(searchQuery.value.trim())
 })
 
 const filteredColumns = computed(() => {
-  if (!props.searchable || !searchQueryCleaned.value) {
-    return computedColumns.value
+  if (!props.searchable || !normalizedSearchQuery.value) {
+    return resolvedColumns.value
   }
 
-  return computedColumns.value
+  return resolvedColumns.value
     .map(column => ({
       ...column,
       options: column.options.filter((option) => {
-        return normalizeText(option.text).includes(searchQueryCleaned.value)
-          || normalizeText(option.value).includes(searchQueryCleaned.value)
+        return normalizeText(option.text).includes(normalizedSearchQuery.value)
+          || normalizeText(option.value).includes(normalizedSearchQuery.value)
       }),
     }))
     .filter(column => column.options.length > 0)
@@ -95,252 +112,344 @@ const firstFilteredOption = computed(() => {
 })
 
 const selectedOption = computed(() => {
-  return computedOptions.value.find((option) => {
+  return allOptions.value.find((option) => {
     return option.value === modelValue.value
   })
 })
 
-const textSize = computed<BaseSize>(() => {
-  switch (props.size) {
-    case 'base':
-      return 'sm'
-    case 'lg':
-      return 'base'
-    case 'sm':
-      return 'xs'
-    default:
-      return 'sm'
-  }
+const textSize = computed(() => {
+  return textSizeByFieldSize[props.size]
+})
+
+const placement = computed(() => {
+  return props.direction === 'top' ? 'top-start' : 'bottom-start'
+})
+
+const middleware = computed(() => {
+  return [
+    offset(menuLayout.gap),
+    ...(props.direction === 'auto' ? [flip()] : []),
+    shift({ padding: menuLayout.viewportPadding }),
+    floatingSize({
+      apply({ availableHeight, availableWidth, elements, rects }) {
+        const preferredMaxHeight = menuLayout.maxHeight[props.maxHeight]
+        const maxHeight = Math.max(0, Math.min(preferredMaxHeight, availableHeight))
+
+        elements.floating.style.setProperty('--field-select-menu-max-height', `${maxHeight}px`)
+
+        Object.assign(elements.floating.style, {
+          maxWidth: `${availableWidth}px`,
+          minWidth: `${rects.reference.width}px`,
+        })
+      },
+      padding: menuLayout.viewportPadding,
+    }),
+  ]
+})
+
+const { floatingStyles, isPositioned } = useFloating(triggerRef, menuRef, {
+  middleware,
+  placement,
+  strategy: 'fixed',
+  whileElementsMounted: autoUpdate,
 })
 
-watch(opened, async (isOpened) => {
-  if (isOpened && props.searchable) {
-    await nextTick()
+onKeyStroke('Escape', (event) => {
+  if (!isOpen.value) {
+    return
+  }
+
+  event.preventDefault()
+  close({ restoreFocus: true })
+}, { target: window })
 
-    searchInput.value?.focus()
+watch(isOpen, async (opened) => {
+  if (!opened || !props.searchable) {
+    return
   }
+
+  await nextTick()
+
+  searchInputRef.value?.focus()
 })
 
-function onClose() {
-  reset()
-}
+watch(() => props.disabled, (isDisabled) => {
+  if (isDisabled) {
+    close()
+  }
+})
 
-function onContainerClick(event: MouseEvent) {
-  if (!props.disabled) {
-    opened.value = !opened.value
+onBeforeUnmount(() => {
+  clearHoverCloseTimeout()
+})
 
-    if (selectedOption.value) {
-      emit('click', event, selectedOption.value.value)
-    }
+function clearHoverCloseTimeout() {
+  if (hoverCloseTimeout !== undefined) {
+    clearTimeout(hoverCloseTimeout)
+
+    hoverCloseTimeout = undefined
   }
 }
 
-function onContainerKeypress(event: KeyboardEvent) {
-  if (['Enter', 'Space'].includes(event.code) && !props.disabled) {
-    (event.target as HTMLElement)?.click()
+function close(options?: {
+  restoreFocus?: boolean
+}) {
+  clearHoverCloseTimeout()
+
+  isClosing = true
+  isOpen.value = false
+  searchQuery.value = ''
+
+  if (options?.restoreFocus) {
+    triggerRef.value?.focus()
   }
+
+  isClosing = false
 }
 
-function onLabelClick() {
-  if (!props.disabled) {
-    opened.value = !opened.value
+function isEventTargetInside(event: FocusEvent | MouseEvent) {
+  const nextTarget = event.relatedTarget
+
+  if (!(nextTarget instanceof Node)) {
+    return false
   }
+
+  return menuRef.value?.contains(nextTarget) === true || triggerRef.value?.contains(nextTarget) === true
 }
 
-function onMouseEnterOrFocus() {
-  if (props.openOnHover && !props.disabled) {
-    opened.value = true
+function isSelected(option: FieldSelectOption) {
+  return option.value === selectedOption.value?.value
+}
+
+function onHoverEnd(event: FocusEvent | MouseEvent) {
+  if (isClosing || !props.openOnHover || props.disabled || isEventTargetInside(event)) {
+    return
   }
+
+  clearHoverCloseTimeout()
+
+  hoverCloseTimeout = setTimeout(() => {
+    isOpen.value = false
+    hoverCloseTimeout = undefined
+  }, 100)
 }
 
-function onMouseLeaveOrBlur() {
-  if (props.openOnHover && !props.disabled) {
-    opened.value = false
+function onHoverStart() {
+  if (isClosing || !props.openOnHover || props.disabled) {
+    return
   }
+
+  clearHoverCloseTimeout()
+
+  isOpen.value = true
 }
 
-function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
-  if (!props.disabled) {
-    if (selectedOption.value?.value === option.value) {
-      reset()
-    }
-    else {
-      selectOption(event, option.value)
-    }
+function onLabelClick() {
+  toggle()
 
-    emit('optionClick', event, option.value)
+  if (isOpen.value) {
+    triggerRef.value?.focus()
   }
 }
 
-function onOptionKeyDown(event: KeyboardEvent) {
-  if (!props.disabled) {
-    (event.currentTarget as HTMLElement).click()
+function onOptionClick(event: Event, option: FieldSelectOption) {
+  const restoreFocus = event instanceof KeyboardEvent
+
+  if (isSelected(option)) {
+    close({ restoreFocus })
+
+    return
   }
+
+  selectOption(event, option.value, restoreFocus)
+}
+
+function onOptionKeydown(event: KeyboardEvent, option: FieldSelectOption) {
+  onOptionClick(event, option)
 }
 
 function onSearchKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    reset()
-  }
-  else if (event.key === 'Enter' && !props.disabled && firstFilteredOption.value) {
-    event.preventDefault()
-    onOptionClick(event as unknown as MouseEvent, firstFilteredOption.value)
+  if (event.key !== 'Enter' || !firstFilteredOption.value) {
+    return
   }
+
+  event.preventDefault()
+  onOptionClick(event, firstFilteredOption.value)
+}
+
+function onTriggerClick() {
+  toggle()
 }
 
-function reset() {
-  opened.value = false
-  searchRaw.value = ''
+function onTriggerKeydown() {
+  toggle()
 }
 
-function selectOption(event: MouseEvent, value: string) {
+function selectOption(event: Event, value: string, restoreFocus = false) {
   modelValue.value = value
 
   emit('change', event, value)
-  reset()
+  close({ restoreFocus })
+}
+
+function toggle() {
+  if (props.disabled) {
+    return
+  }
+
+  isOpen.value = props.openOnHover ? true : !isOpen.value
 }
 </script>
 
 <template>
   <div
     class="flex flex-col"
-    :class="{ 'w-fit': hideLabel || square }"
+    :class="{ 'w-fit': iconOnly || square }"
   >
-    <FieldLabel
+    <div
       v-if="label"
-      :disabled="disabled"
-      :for-field="id"
-      has-margin-bottom
-      :icon="labelIcon"
-      :label="label"
-      :required="required"
-      :size="size"
-      @click="onLabelClick"
-    />
+      :id="labelId"
+      ref="labelRef"
+    >
+      <FieldLabel
+        :disabled="disabled"
+        :for-field="id"
+        has-margin-bottom
+        :icon="labelIcon"
+        :label="label"
+        :required="required"
+        :size="size"
+        @click="onLabelClick"
+      />
+    </div>
 
     <div
-      v-on-click-outside="onClose"
+      v-on-click-outside="[() => close(), { ignore: [menuRef, labelRef] }]"
       class="text-left"
       :class="{
         'field-disabled': disabled,
         'cursor-pointer': !disabled,
-        'w-fit': hideLabel || square,
+        'shadow-sm': border === 'full',
+        'w-fit': iconOnly || square,
       }"
     >
       <div
-        class="relative"
+        :id="id"
+        ref="triggerRef"
+        class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
         :class="{
-          'shadow-sm': border === 'full',
-          'w-fit': hideLabel || square,
+          'base-box': border === 'full',
+          'base-border-b': border === 'bottom',
+          'border-0': border === 'none',
+          'base-border-active': isOpen,
+          'base-border-hover': !isOpen && !disabled,
+          'base-border-interactive-focus-visible': !disabled,
+          'text-xs h-sm': size === 'sm' && !square,
+          'text-sm h-base': size === 'base' && !square,
+          'text-base h-lg': size === 'lg' && !square,
+          'text-xs size-sm': size === 'sm' && square,
+          'text-sm size-base': size === 'base' && square,
+          'text-base size-lg': size === 'lg' && square,
+          'px-sm': padding && !iconOnly && !square && size === 'sm',
+          'px-base': padding && !iconOnly && !square && size === 'base',
+          'px-lg': padding && !iconOnly && !square && size === 'lg',
+          'px-2': padding && iconOnly && !square,
+          'inline-flex w-fit gap-1': iconOnly && !square,
+          'justify-center': square,
         }"
+        role="button"
+        :aria-controls="isOpen ? menuId : undefined"
+        :aria-disabled="disabled"
+        :aria-expanded="isOpen"
+        aria-haspopup="listbox"
+        :aria-labelledby="label ? labelId : undefined"
+        tabindex="0"
+        @click="onTriggerClick"
+        @keydown.enter.prevent="onTriggerKeydown"
+        @keydown.space.prevent="onTriggerKeydown"
+        @mouseenter="onHoverStart"
+        @mouseleave="onHoverEnd"
+        @focusin="onHoverStart"
+        @focusout="onHoverEnd"
       >
-        <div
-          class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
-          :class="{
-            'base-box': border === 'full',
-            'base-border-b': border === 'bottom',
-            'border-0': border === 'none',
-            'base-border-active': opened,
-            'base-border-hover': !opened && !disabled,
-            'base-border-interactive-focus-visible': !disabled,
-            'text-xs h-sm': size === 'sm' && !square,
-            'text-sm h-base': size === 'base' && !square,
-            'text-base h-lg': size === 'lg' && !square,
-            'text-xs size-sm': size === 'sm' && square,
-            'text-sm size-base': size === 'base' && square,
-            'text-base size-lg': size === 'lg' && square,
-            'px-sm': padding && !hideLabel && !square && size === 'sm',
-            'px-base': padding && !hideLabel && !square && size === 'base',
-            'px-lg': padding && !hideLabel && !square && size === 'lg',
-            'px-2': padding && hideLabel && !square,
-            'inline-flex w-fit gap-1': hideLabel && !square,
-            'justify-center': square,
-          }"
-          role="button"
-          :aria-disabled="disabled"
-          tabindex="0"
-          @click="onContainerClick"
-          @keypress.prevent="onContainerKeypress"
-          @mouseenter="onMouseEnterOrFocus"
-          @mouseleave="onMouseLeaveOrBlur"
-          @focusin="onMouseEnterOrFocus"
-          @focusout="onMouseLeaveOrBlur"
-        >
-          <template v-if="selectedOption">
-            <BaseEmoji
-              v-if="selectedOption.emoji"
-              class="pointer-events-none shrink-0"
-              :class="{ 'mr-2': !hideLabel && !square }"
-              :clickable="false"
-              :emoji="selectedOption.emoji"
-              size="sm"
-            />
-
-            <BaseIcon
-              v-else-if="selectedOption.icon"
-              class="pointer-events-none"
-              :class="{ 'mr-2': !hideLabel && !square }"
-              :color="selectedOption.iconColor"
-              :icon="selectedOption.icon"
-              :size="textSize"
-            />
-
-            <span
-              v-if="selectedOption.text && !hideLabel && !square"
-              class="flex-1 truncate font-medium"
-            >
-              {{ selectedOption.text }}
-            </span>
-          </template>
+        <template v-if="selectedOption">
+          <BaseEmoji
+            v-if="selectedOption.emoji"
+            class="pointer-events-none shrink-0"
+            :class="{ 'mr-2': !iconOnly && !square }"
+            :clickable="false"
+            :emoji="selectedOption.emoji"
+            size="sm"
+          />
+
+          <BaseIcon
+            v-else-if="selectedOption.icon"
+            class="pointer-events-none"
+            :class="{ 'mr-2': !iconOnly && !square }"
+            :color="selectedOption.iconColor"
+            :icon="selectedOption.icon"
+            :size="textSize"
+          />
 
           <span
-            v-else-if="placeholder"
-            class="flex-1 truncate text-gray-600 font-medium dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+            v-if="selectedOption.text && !iconOnly && !square"
+            class="flex-1 truncate font-medium"
           >
-            {{ placeholder }}
+            {{ selectedOption.text }}
           </span>
+        </template>
 
-          <BaseIcon
-            v-if="caret && !hideCaret && !square"
-            class="flex-initial"
-            :class="{
-              'ml-2': !hideLabel,
-              'rotate-180': opened,
-            }"
-            color="gray"
-            :icon="getLayerIcon('arrowDown')"
-          />
-        </div>
+        <span
+          v-else-if="placeholder"
+          class="flex-1 truncate text-gray-600 font-medium dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100"
+        >
+          {{ placeholder }}
+        </span>
+
+        <BaseIcon
+          v-if="caret && !square"
+          class="flex-initial"
+          :class="{
+            'ml-2': !iconOnly,
+            'rotate-180': isOpen,
+          }"
+          color="gray"
+          :icon="getLayerIcon('arrowDown')"
+        />
+      </div>
+    </div>
 
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        class="z-[70] cursor-default"
+        :style="{
+          ...floatingStyles,
+          visibility: isPositioned ? 'visible' : 'hidden',
+        }"
+        @mouseenter="onHoverStart"
+        @mouseleave="onHoverEnd"
+        @focusin="onHoverStart"
+        @focusout="onHoverEnd"
+      >
         <Motion
-          v-if="opened"
           :animate="fadeIn.animate"
           as="div"
-          class="absolute left-0 right-0 z-10 mt-0.5 cursor-default"
-          :class="{
-            'top-0': direction === 'bottom',
-            'bottom-0': direction === 'top',
-          }"
           :initial="fadeIn.initial"
         >
           <div
-            class="options min-w-xs overflow-y-auto border base-border-active rounded-lg bg-white font-medium dark:bg-gray-900"
+            :id="menuId"
+            class="options min-w-xs overflow-y-auto border base-border-active rounded-lg bg-white text-gray-600 font-medium dark:bg-gray-900 dark:text-gray-400"
             :class="{
-              'text-xs text-gray-600 dark:text-gray-400': size === 'sm',
-              'text-sm text-gray-600 dark:text-gray-400': size === 'base',
-              'text-base text-gray-600 dark:text-gray-400': size === 'lg',
-              'md:min-w-xl p-1 pb-0': computedColumns.length >= 2,
-              'mt-8': size === 'sm' && !padding && direction === 'bottom',
-              'mt-10': ((size === 'sm' && padding) || (size === 'base' && !padding)) && direction === 'bottom',
-              'mt-12': size === 'base' && padding && direction === 'bottom',
-              'mb-8': size === 'sm' && !padding && direction === 'top',
-              'mb-10': ((size === 'sm' && padding) || (size === 'base' && !padding)) && direction === 'top',
-              'mb-12': size === 'base' && padding && direction === 'top',
-              'max-h-xs': maxHeight === 'xs',
-              'max-h-sm': maxHeight === 'sm',
-              'max-h-md': maxHeight === 'md',
-              'max-h-lg': maxHeight === 'lg',
+              'text-xs': size === 'sm',
+              'text-sm': size === 'base',
+              'text-base': size === 'lg',
+              'md:min-w-xl p-1 pb-0': isMultiColumn,
             }"
+            role="listbox"
+            :aria-labelledby="label ? labelId : undefined"
+            :style="{ maxHeight: 'var(--field-select-menu-max-height)' }"
           >
             <div
               v-if="searchable"
@@ -348,8 +457,8 @@ function selectOption(event: MouseEvent, value: string) {
               @click.stop
             >
               <FieldInput
-                ref="searchInput"
-                v-model="searchRaw"
+                ref="searchInputRef"
+                v-model="searchQuery"
                 :autocomplete="false"
                 background="white"
                 border="none"
@@ -365,7 +474,7 @@ function selectOption(event: MouseEvent, value: string) {
             </div>
 
             <div
-              v-if="searchable && searchQueryCleaned && !firstFilteredOption"
+              v-if="searchable && normalizedSearchQuery && !firstFilteredOption"
               class="flex justify-center base-border-b p-3"
             >
               <BaseIcon
@@ -379,7 +488,7 @@ function selectOption(event: MouseEvent, value: string) {
 
             <div
               v-for="(column, columnIndex) in filteredColumns"
-              :key="columnIndex"
+              :key="column.title ?? columnIndex"
             >
               <BaseIcon
                 v-if="column.title"
@@ -392,20 +501,20 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'base-border-b base-bg-hover last:border-b-0': computedColumns.length < 2,
-                  'h-sm px-sm': size === 'sm' && computedColumns.length < 2,
-                  'h-base px-base': size === 'base' && computedColumns.length < 2,
-                  'h-lg px-lg': size === 'lg' && computedColumns.length < 2,
-                  'base-bg-hover px-2 py-1 last:mb-2': computedColumns.length >= 2,
-                  'font-medium underline': option.value === selectedOption?.value,
-                  'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,
-                  'bg-white dark:bg-gray-900': selectedOption && option.value !== selectedOption.value,
+                  'base-border-b base-bg-hover last:border-b-0': !isMultiColumn,
+                  'h-sm px-sm': size === 'sm' && !isMultiColumn,
+                  'h-base px-base': size === 'base' && !isMultiColumn,
+                  'h-lg px-lg': size === 'lg' && !isMultiColumn,
+                  'base-bg-hover px-2 py-1 last:mb-2': isMultiColumn,
+                  'underline': isSelected(option),
+                  'text-gray-900 dark:text-gray-100': isSelected(option),
                 }"
-                role="button"
+                role="option"
+                :aria-selected="isSelected(option)"
                 tabindex="0"
                 @click="onOptionClick($event, option)"
-                @keydown.enter.prevent="onOptionKeyDown"
-                @keydown.space.prevent="onOptionKeyDown"
+                @keydown.enter.prevent="onOptionKeydown($event, option)"
+                @keydown.space.prevent="onOptionKeydown($event, option)"
               >
                 <template v-if="option.emoji">
                   <BaseEmoji
@@ -433,7 +542,7 @@ function selectOption(event: MouseEvent, value: string) {
           </div>
         </Motion>
       </div>
-    </div>
+    </Teleport>
 
     <FieldMessage
       :description="description"

package/app/types/fields.d.ts

@@ -164,9 +164,8 @@ export interface FieldSelect {
   description?: BaseTextText
   direction?: FieldSelectDirection
   disabled?: boolean
-  hideCaret?: boolean
   hideError?: boolean
-  hideLabel?: boolean
+  iconOnly?: boolean
   label?: BaseTextText
   labelIcon?: string
   maxHeight?: FieldSelectMaxHeight
@@ -190,7 +189,7 @@ export interface FieldSelectColumn {
   title?: string
 }
 
-export type FieldSelectDirection = 'bottom' | 'top'
+export type FieldSelectDirection = 'auto' | 'bottom' | 'top'
 
 export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.83",
+  "version": "2.1.1",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@capacitor/core": "8.4.0",
     "@capacitor/preferences": "8.0.1",
     "@capgo/capacitor-social-login": "8.3.22",
+    "@floating-ui/vue": "2.0.1",
     "@nuxt/icon": "2.2.3",
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "3.5.2",