@sbc-connect/nuxt-base 0.13.3 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 0.15.0
+
+### Minor Changes
+
+- [#206](https://github.com/bcgov/connect-nuxt/pull/206) [`f19c40c`](https://github.com/bcgov/connect-nuxt/commit/f19c40c3702a53ef3a01a22b7068301f5d328122) Thanks [@deetz99](https://github.com/deetz99)! - Update Nuxt, Nuxt UI, JSDom and Pinia Colada to latest. Delete ConnectInputDate, replaced by ConnectInputDatePicker. Resolve theme issues after Nuxt UI update.
+
+## 0.14.0
+
+### Minor Changes
+
+- [#203](https://github.com/bcgov/connect-nuxt/pull/203) [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38) Thanks [@deetz99](https://github.com/deetz99)! - Add NuxtAnnouncer to app.vue. Update ConnectInputMenu hasValue check.
+
+- [#203](https://github.com/bcgov/connect-nuxt/pull/203) [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
 ## 0.13.3
 
 ### Patch Changes

package/app/app.config.ts

@@ -1,4 +1,13 @@
 /* eslint-disable max-len */
+const colors = [
+  'primary',
+  'secondary',
+  'success',
+  'info',
+  'warning',
+  'error'
+]
+
 export default defineAppConfig({
   connect: {
     header: {
@@ -49,6 +58,11 @@ export default defineAppConfig({
           false: {
             link: 'text-secondary underline font-medium'
           }
+        },
+        color: {
+          secondary: {
+            link: 'outline-secondary/100 focus-visible:outline-2 outline-offset-2'
+          }
         }
       },
       compoundVariants: [
@@ -60,25 +74,32 @@ export default defineAppConfig({
             link: 'hover:text-secondary hover:underline transition-colors'
           }
         }
-      ]
+      ],
+      defaultVariants: {
+        color: 'secondary'
+      }
     },
     button: {
       compoundVariants: [
         {
           color: 'primary',
           variant: 'solid',
-          class: 'font-bold text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-(--ui-primary)'
-        },
-        {
-          color: 'primary',
-          variant: 'ghost',
-          class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 active:bg-(--ui-primary)/25 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'
+          class: 'font-bold hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) outline-offset-2'
         },
-        {
-          color: 'primary',
+        ...colors.map(color => ({
+          color,
+          class: `outline-${color}/100`
+        })),
+        ...colors.map(color => ({
+          color,
+          variant: 'solid',
+          class: 'outline-offset-2'
+        })),
+        ...colors.map(color => ({
+          color,
           variant: 'outline',
-          class: 'ring ring-inset ring-primary text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
-        }
+          class: `ring-${color}/100`
+        }))
       ],
       slots: {
         base: 'cursor-pointer'
@@ -232,6 +253,9 @@ export default defineAppConfig({
       },
       variants: {
         size: {
+          bcGov: {
+            root: 'text-sm'
+          },
           xs: {
             root: 'text-xs'
           },
@@ -255,7 +279,7 @@ export default defineAppConfig({
         }
       },
       defaultVariants: {
-        size: 'md'
+        size: 'bcGov'
       }
     },
     icons: {
@@ -332,6 +356,9 @@ export default defineAppConfig({
         variant: 'bcGov'
       }
     },
+    link: {
+      base: 'outline-primary/100 focus-visible:outline-2 outline-offset-2'
+    },
     skeleton: {
       base: 'bg-gray-200'
     },

package/app/app.vue

@@ -11,6 +11,7 @@ useHead({
 
 <template>
   <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtAnnouncer />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

package/app/assets/css/connect-base-tw.css

@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+/* safelist so we can map across colors in the app config */
+@source inline("outline-{primary,secondary,success,info,warning,error}/100");
+@source inline("ring-{primary,secondary,success,info,warning,error}/100");
+
 /* Customize Nuxt UI default tokens */
 /* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {

package/app/components/Connect/Breadcrumb.vue

@@ -23,7 +23,7 @@ const breadcrumbs = computed<ConnectBreadcrumb[]>(() => {
   }
 })
 
-function resolveBackHref() {
+const backHref = computed(() => {
   const bcLength = breadcrumbs.value.length
 
   if (bcLength > 1) {
@@ -32,7 +32,7 @@ function resolveBackHref() {
   } else {
     return ''
   }
-}
+})
 </script>
 
 <template>
@@ -46,14 +46,17 @@ function resolveBackHref() {
       class="app-inner-container flex items-center gap-3"
     >
       <UButton
-        class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"
+        :class="[
+          'size-[28px] rounded-full px-1 bg-secondary',
+          'hover:bg-secondary/75 disabled:bg-secondary outline-secondary/100'
+        ]"
         :disabled="breadcrumbs.length < 2"
         color="secondary"
         icon="i-mdi-arrow-left"
         :aria-label="$t('connect.label.goBack')"
-        :to="resolveBackHref()"
+        :to="backHref"
         :ui="{
-          leadingIcon: 'text-primary',
+          leadingIcon: 'text-primary'
         }"
       />
       <div class="w-[1px] bg-shade h-[24px]" />
@@ -62,6 +65,7 @@ function resolveBackHref() {
         aria-label=""
         :items="breadcrumbs"
         separator-icon="i-mdi-chevron-right"
+        color="secondary"
       />
     </nav>
   </div>

package/app/components/Connect/FloatingLabel.vue

@@ -57,7 +57,7 @@ const variantClass: Record<VariantOption, string[]> = {
         'motion-reduce:transition-none duration-200',
         'group-focus-within:text-xs',
         'group-focus-within:text-primary',
-        'w-fit',
+        'w-fit'
       ]"
     >
       {{ label }}

package/app/components/Connect/Footer.vue

@@ -61,7 +61,7 @@ const appVersions = computed<string[]>(() => {
             :class="[
               'flex-col gap-2 border-r-0 pr-2 last:mr-0',
               'last:border-r-0 sm:mr-2 sm:inline-block sm:flex-none',
-              'sm:border-r sm:first:ml-2 border-line-muted',
+              'sm:border-r sm:first:ml-2 border-line-muted'
             ]"
           >
             <NuxtLink
@@ -70,7 +70,7 @@ const appVersions = computed<string[]>(() => {
               :class="[
                 'rounded p-1 text-sm text-secondary',
                 'hover:underline focus:outline-none',
-                'focus-visible:ring-2 focus-visible:ring-secondary',
+                'focus-visible:ring-2 focus-visible:ring-secondary'
               ]"
             >
               {{ $t(link.label) }}

package/app/components/Connect/Header/LogoHomeLink.vue

@@ -10,7 +10,7 @@ const localePath = useLocalePath()
       'flex items-center gap-4 rounded-md',
       'px-2 transition-colors duration-300',
       'ease-in-out hover:bg-secondary/[0.1]',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary'
     ]"
     :aria-label="$t('connect.header.homeLink')"
   >

package/app/components/Connect/Header/WhatsNew.vue

@@ -21,7 +21,7 @@ function open() {
     position="top-left"
     inset
     :ui="{
-      base: 'ring-(--ui-error)',
+      base: 'ring-(--ui-error)'
     }"
   >
     <UButton

package/app/components/Connect/Input/DatePicker.vue

@@ -312,7 +312,7 @@ function clearDate() {
           :color="error ? 'error' : 'neutral'"
           variant="ghost"
           class="date-action-button"
-          :aria-label="$t('label.clearDate')"
+          :aria-label="$t('connect.label.clearDate')"
           @keydown.enter.prevent.stop="clearDate"
           @click="clearDate"
         />
@@ -326,7 +326,7 @@ function clearDate() {
             onOpenAutoFocus,
             onCloseAutoFocus,
             onFocusOutside: ignoreInputInteraction,
-            onInteractOutside: ignoreInputInteraction,
+            onInteractOutside: ignoreInputInteraction
           }"
         >
           <UButton
@@ -337,13 +337,13 @@ function clearDate() {
             :color="error && !dateInput ? 'error' : 'neutral'"
             variant="ghost"
             class="date-action-button"
-            :aria-label="$t('label.openCalendar')"
+            :aria-label="$t('connect.label.openCalendar')"
             @keydown.enter.prevent.stop="isCalendarOpen = !isCalendarOpen"
           />
           <template #content>
             <div ref="calendarContentRef">
               <UCalendar
-                :aria-label="$t('label.chooseDate')"
+                :aria-label="$t('connect.label.chooseDate')"
                 :model-value="calendarValue"
                 :min-value="calendarMinValue"
                 :max-value="calendarMaxValue"

package/app/components/Connect/Input/Menu.vue

@@ -9,23 +9,39 @@ const props = defineProps<{
 const labelId = props.id + '-label'
 const model = defineModel<InputMenuProps['modelValue']>()
 
-const hasValue = computed(() => {
-  const val = model.value
-
+function isPopulated(val: unknown): boolean {
   if (val === null || val === undefined) {
     return false
   }
 
+  if (typeof val === 'string') {
+    return val.trim().length > 0
+  }
+
+  if (typeof val === 'number') {
+    return !Number.isNaN(val)
+  }
+
+  if (typeof val === 'boolean' || typeof val === 'bigint') {
+    return true
+  }
+
+  if (val instanceof Date) {
+    return !Number.isNaN(val.getTime())
+  }
+
   if (Array.isArray(val)) {
-    return val.length > 0
+    return val.some(isPopulated)
   }
 
   if (typeof val === 'object') {
-    return Object.keys(val).length > 0
+    return Object.values(val).some(isPopulated)
   }
 
-  return val === 0 || !!val
-})
+  return false
+}
+
+const hasValue = computed(() => isPopulated(model.value))
 
 defineOptions({ inheritAttrs: false })
 </script>
@@ -35,11 +51,11 @@ defineOptions({ inheritAttrs: false })
     <span
       :id="labelId"
       :class="[
-        'absolute left-0 z-10 px-2.5 pointer-events-none text-neutral transition-all duration-200 w-fit line-clamp-1',
-        'top-1/2 -translate-y-1/2',
-        'group-focus-within:top-3 group-focus-within:text-xs group-focus-within:text-primary',
+        'absolute text-neutral transition-transform duration-200 ease-out origin-left text-base line-clamp-1',
+        'top-1/2 left-2.5 z-10 pointer-events-none -translate-y-1/2',
+        'group-focus-within:translate-y-[-115%] group-focus-within:scale-75 group-focus-within:text-primary',
         'group-has-aria-invalid:text-error',
-        hasValue ? 'top-3 text-xs' : '',
+        hasValue ? 'translate-y-[-115%] scale-75' : ''
       ]"
     >
       {{ label }}

package/app/components/Connect/Input/index.vue

@@ -40,7 +40,7 @@ defineExpose({ input: inputRef })
       id,
       disabled,
       autofocus: autoFocus,
-      ...injectedProps, // injected props will default when provided
+      ...injectedProps // injected props will default when provided
     }"
     v-model.trim="model"
     v-maska="mask"

package/app/components/Connect/Layout/Sidebar.vue

@@ -14,7 +14,7 @@ const showSideMenu = ref(true)
       size="xs"
       :icon="showSideMenu ? 'i-mdi-minus' : 'i-mdi-plus'"
       data-testid="connect-sidebar-toggle-btn"
-      @click="showSideMenu = !showSideMenu"
+      @click="() => { showSideMenu = !showSideMenu }"
     />
     <ConnectTransitionCollapse>
       <div v-if="showSideMenu">
@@ -28,7 +28,7 @@ const showSideMenu = ref(true)
             label: 'text-base',
             link: 'cursor-pointer',
             linkLabel: 'text-neutral-highlighted',
-            root: 'bg-white rounded p-3',
+            root: 'bg-white rounded p-3'
           }"
         />
       </div>

package/app/components/Connect/PageSection.vue

@@ -23,7 +23,7 @@ defineProps<{
     :ui="{
       header: heading?.ui ?? 'bg-shade-secondary px-4 py-4 sm:px-4 rounded-t-md',
       body: uiBody ?? 'p-0 sm:p-0',
-      footer: 'p-0 sm:p-0',
+      footer: 'p-0 sm:p-0'
     }"
   >
     <template v-if="heading?.label || $slots.header" #header>

package/app/components/Connect/Slideover/WhatsNew.vue

@@ -14,13 +14,13 @@ defineProps<{
     :close="{
       color: 'neutral',
       variant: 'ghost',
-      class: 'cursor-pointer hover:bg-shade/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
+      class: 'cursor-pointer hover:bg-shade/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full'
     }"
     :ui="{
       header: 'bg-brand-inverted',
       title: 'text-brand',
       body: 'flex-1 overflow-y-auto p-0 sm:p-0',
-      description: 'sr-only',
+      description: 'sr-only'
     }"
   >
     <template #body>

package/app/components/Connect/SystemBanner.vue

@@ -28,7 +28,7 @@ onMounted(async () => {
       :ui="{
         root: 'rounded-none bg-brand-inverted px-0 sm:px-0 app-inner-container',
         wrapper: 'bg-brand-inverted',
-        close: 'mt-2 text-neutral-highlighted',
+        close: 'mt-2 text-neutral-highlighted'
       }"
       @update:open="close = true"
     >

package/app/components/Connect/Tombstone/index.vue

@@ -85,7 +85,10 @@ async function handleButtonAction(button: ButtonProps, event: MouseEvent) {
                 v-if="tombstone.bottomButtons.length"
                 class="flex flex-wrap gap-2"
               >
-                <template v-for="btn in tombstone.bottomButtons" :key="btn.button?.label || btn.vNode?.key">
+                <template
+                  v-for="btn in tombstone.bottomButtons"
+                  :key="btn.button?.label || btn.vNode?.key || undefined"
+                >
                   <component :is="btn.vNode" v-if="btn.vNode" />
                   <UButton
                     v-else-if="btn.button"
@@ -93,7 +96,7 @@ async function handleButtonAction(button: ButtonProps, event: MouseEvent) {
                       ...btn.button,
                       onClick(event) {
                         handleButtonAction(btn.button!, event)
-                      },
+                      }
                     }"
                   />
                 </template>

package/app/types/base-app-config.d.ts

@@ -10,6 +10,18 @@ declare module 'nuxt/schema' {
       }
     }
   }
+
+  interface AppConfig {
+    connect: {
+      header: {
+        localeSelect: boolean
+        whatsNew: boolean
+      }
+      footer: {
+        versions: string[]
+      }
+    }
+  }
 }
 
 export {}

package/i18n/locales/en-CA.ts

@@ -22,6 +22,8 @@ export default {
       bcApp: 'A BC Online Application',
       bcGovLogo: 'Government of British Columbia Logo',
       cancel: 'Cancel',
+      chooseDate: 'Choose Date',
+      clearDate: 'Clear Date',
       close: 'Close',
       contactInformation: 'Contact Information',
       copyright: 'Copyright',
@@ -32,6 +34,7 @@ export default {
       home: 'Home',
       hoursOfOperation: 'Hours of Operation',
       localeSelect: 'Select a Language, current language: English',
+      openCalendar: 'Open Calendar',
       privacy: 'Privacy',
       whatsNew: "What's New",
       whatsNewAria: "What's New, {count} unread",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.13.3",
+  "version": "0.15.0",
   "repository": {
     "type": "git",
     "url": "github:bcgov/connect-nuxt"
@@ -10,27 +10,27 @@
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "1.2.3",
-    "@launchdarkly/js-client-sdk": "4.6.5",
-    "@nuxt/ui": "4.7.1",
-    "@nuxtjs/i18n": "10.3.0",
-    "@vueuse/core": "14.3.0",
-    "@vueuse/nuxt": "14.3.0",
-    "dompurify": "3.4.5",
-    "es-toolkit": "1.46.1",
+    "@launchdarkly/js-client-sdk": "4.10.3",
+    "@nuxt/ui": "4.11.3",
+    "@nuxtjs/i18n": "10.6.0",
+    "@vueuse/core": "15.0.0",
+    "@vueuse/nuxt": "15.0.0",
+    "dompurify": "3.4.16",
+    "es-toolkit": "1.52.0",
     "luxon": "3.7.2",
-    "maska": "3.2.0",
-    "zod": "4.4.3"
+    "maska": "3.2.1",
+    "zod": "4.6.5"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.11.3",
-    "@types/luxon": "3.7.1",
-    "dotenv": "^17.4.2",
-    "nuxt": "4.4.8",
+    "@axe-core/playwright": "4.13.0",
+    "@types/luxon": "3.7.6",
+    "dotenv": "18.0.7",
+    "nuxt": "4.6.1",
     "typescript": "6.0.3",
-    "vue-tsc": "3.3.1",
-    "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.2.1",
-    "@sbc-connect/vitest-config": "0.2.0"
+    "vue-router": "5.4.0",
+    "vue-tsc": "3.3.13",
+    "@sbc-connect/vitest-config": "0.2.0",
+    "@sbc-connect/playwright-config": "0.2.1"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/app/components/Connect/Input/Date.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
-// https://whatsock.com/Templates/Datepickers/Basic,%20Auto%20Open/index.htm
-import type { ConnectInput, UCalendar } from '#components'
-import { CalendarDate } from '@internationalized/date'
-import { DateTime } from 'luxon'
-
-// FUTURE: update props as needed (min/max/disabled days)
-defineProps<{
-  label: string
-  id: string
-}>()
-
-const emit = defineEmits<{
-  blur: []
-}>()
-
-const externalModel = defineModel<string | null | undefined>({ required: true })
-
-const localModel = computed({
-  get() {
-    if (externalModel.value) {
-      const dt = DateTime.fromISO(externalModel.value, { zone: 'America/Vancouver' })
-      if (dt.isValid) {
-        return new CalendarDate(dt.year, dt.month, dt.day)
-      }
-    }
-    return undefined
-  },
-  set(v) {
-    if (v) {
-      externalModel.value = DateTime.fromObject({
-        year: v.year,
-        month: v.month,
-        day: v.day
-      }).toISODate()
-    } else {
-      externalModel.value = null
-    }
-  }
-})
-
-const open = ref(false)
-const calendarRef = useTemplateRef('calendar-ref')
-const inputRef = useTemplateRef<InstanceType<typeof ConnectInput>>('input-ref')
-
-function focusCalendar() {
-  const button = (calendarRef.value as any)?.$el?.querySelector('button')
-  if (button) {
-    (button as HTMLButtonElement).focus()
-  }
-}
-
-function focusInput() {
-  inputRef.value?.input?.inputRef?.focus()
-  open.value = false
-  emit('blur')
-}
-</script>
-
-<template>
-  <UPopover
-    v-model:open="open"
-    :content="{
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      onEscapeKeyDown: () => {
-        focusInput()
-      },
-      side: 'bottom',
-      align: 'start',
-    }"
-    @update:open="(v) => {
-      if (!v) {
-        $emit('blur')
-      }
-    }"
-  >
-    <template #default>
-      <div class="w-full group">
-        <ConnectInput
-          :id
-          ref="input-ref"
-          v-model="externalModel"
-          :label
-          mask="####-##-##"
-          trailing-icon="i-mdi-calendar"
-          @focus="open = true"
-          @click.stop="open = true"
-          @keydown.down.prevent="focusCalendar"
-        />
-      </div>
-    </template>
-
-    <template #content>
-      <UCalendar
-        ref="calendar-ref"
-        v-model="localModel"
-        class="p-2"
-        @update:model-value="focusInput"
-      />
-    </template>
-  </UPopover>
-</template>