@sbc-connect/nuxt-base 0.0.0-test-ld-20260520212549

package/app/components/Connect/FloatingLabel.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+type VariantOption = 'input' | 'textarea' | 'select' | 'selectmenu'
+
+const {
+  variant = 'input'
+} = defineProps<{
+  label: string
+  variant?: VariantOption
+  id: string
+}>()
+
+const variantClass: Record<VariantOption, string[]> = {
+  input: [
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3 delay-50',
+    'group-has-[div>input:not(:placeholder-shown)]:top-3',
+    'group-has-[div>input:not(:placeholder-shown)]:text-xs',
+    'group-has-[div>input[aria-invalid=true]]:text-error'
+  ],
+  textarea: [
+    'top-1 group-focus-within:top-1 delay-50',
+    'group-has-[div>textarea:not(:placeholder-shown)]:top-1',
+    'group-has-[div>textarea:not(:placeholder-shown)]:text-xs',
+    'group-has-[div>textarea[aria-invalid=true]]:text-error'
+  ],
+  select: [
+    'delay-100',
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3',
+    'group-has-[button[aria-invalid=true]]:text-error',
+    'group-has-[button[data-state=open]]:top-3',
+    'group-has-[button[data-state=open]]:text-xs',
+    'group-has-[button:not([data-placeholder])]:top-3',
+    'group-has-[button:not([data-placeholder])]:text-xs',
+    'group-has-[button[data-state=open]:not([aria-invalid=true])]:text-primary'
+  ],
+  selectmenu: [
+    'delay-100',
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3',
+    'group-has-[button[aria-invalid=true]]:text-error',
+    'group-has-[button[data-state=open]]:top-3',
+    'group-has-[button[data-state=open]]:text-xs',
+    'group-has-[button[data-placeholder=false]]:top-3',
+    'group-has-[button[data-placeholder=false]]:text-xs',
+    'group-has-[button[data-state=open]:not([aria-invalid=true])]:text-primary'
+  ]
+}
+</script>
+
+<template>
+  <div class="relative group">
+    <span
+      :id
+      :class="[
+        variantClass[variant],
+        'line-clamp-1 px-2.5',
+        'absolute z-10 group-focus-within:text-primary',
+        'pointer-events-none text-neutral transition-all',
+        'motion-reduce:transition-none duration-200',
+        'group-focus-within:text-xs',
+        'group-focus-within:text-primary',
+        'w-fit',
+      ]"
+    >
+      {{ label }}
+    </span>
+    <slot />
+  </div>
+</template>

package/app/components/Connect/Footer.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+const rtc = useRuntimeConfig().public
+const uiVersion = rtc.version
+const feesUrl = `${rtc.registryHomeUrl}product-fees`
+const dependencyVersions: string[] = useAppConfig().connect?.footer?.versions || []
+const localePath = useLocalePath()
+const links = [
+  {
+    label: 'connect.label.home',
+    to: localePath('/')
+  },
+  {
+    label: 'connect.label.fees',
+    to: feesUrl,
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.disclaimer',
+    to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.privacy',
+    to: 'https://www2.gov.bc.ca/gov/content/home/privacy',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.accessibility',
+    to: 'https://www2.gov.bc.ca/gov/content/home/accessibility',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.copyright',
+    to: 'https://www2.gov.bc.ca/gov/content/home/copyright',
+    target: '_blank'
+  }
+]
+
+const appVersions = computed<string[]>(() => {
+  const items = [...dependencyVersions]
+  if (uiVersion) {
+    items.unshift(uiVersion)
+  }
+  return items
+})
+</script>
+
+<template>
+  <footer
+    id="connect-main-footer"
+    data-testid="connect-main-footer"
+    class="border-t-2 border-brand-inverted bg-brand p-2 sm:px-4"
+  >
+    <div class="app-inner-container flex items-center justify-between">
+      <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
+        <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
+          <li
+            v-for="link in links"
+            :key="link.to"
+            :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',
+            ]"
+          >
+            <NuxtLink
+              :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
+              :target="link.target"
+              :class="[
+                'rounded p-1 text-sm text-secondary',
+                'hover:underline focus:outline-none',
+                'focus-visible:ring-2 focus-visible:ring-secondary',
+              ]"
+            >
+              {{ $t(link.label) }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="-mb-1 flex items-center">
+        <span class="italic text-brand-inverted">{{ $t('connect.label.bcApp') }}</span>
+        <UTooltip arrow :delay-duration="200">
+          <UButton
+            :aria-label="$t('connect.label.appVersion')"
+            color="secondary"
+            icon="i-mdi-info-outline"
+            variant="ghost"
+          />
+
+          <template #content>
+            <div class="flex flex-col">
+              <span v-for="(item, i) in appVersions" :key="i">{{ item }}</span>
+            </div>
+          </template>
+        </UTooltip>
+      </div>
+    </div>
+  </footer>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <NuxtLink
+    id="header-logo-home-link"
+    :to="localePath('/')"
+    :class="[
+      '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',
+    ]"
+    :aria-label="$t('connect.header.homeLink')"
+  >
+    <ConnectBCGovLogo />
+    <span class="text-base font-semibold text-secondary lg:text-lg"> {{ $t('connect.header.title') }} </span>
+  </NuxtLink>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { ConnectSlideoverWhatsNew } from '#components'
+
+const state = useStorage<ConnectWhatsNewState>('connect-whats-new', { viewed: false, items: [] })
+const overlay = useOverlay()
+const slideover = overlay.create(ConnectSlideoverWhatsNew)
+
+function open() {
+  slideover.open({
+    items: state.value.items
+  })
+  state.value.viewed = true
+}
+</script>
+
+<template>
+  <UChip
+    :show="!state.viewed && state.items.length > 0"
+    color="error"
+    position="top-left"
+    inset
+    :ui="{
+      base: 'ring-(--ui-error)',
+    }"
+  >
+    <UButton
+      variant="ghost"
+      color="secondary"
+      class="px-2 py-1 text-sm"
+      :label="$t('connect.label.whatsNew')"
+      :aria-label="$t('connect.label.whatsNewAria', { count: state.viewed ? 0 : state.items.length })"
+      @click="open"
+    />
+  </UChip>
+</template>

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

@@ -0,0 +1,14 @@
+<template>
+  <header
+    id="connect-header-wrapper"
+    data-testid="connect-header-wrapper"
+    class="relative border-b-2 border-brand-inverted bg-brand p-2 sm:px-4"
+  >
+    <nav
+      class="app-inner-container"
+      :aria-label="$t('connect.header.navLabel')"
+    >
+      <slot />
+    </nav>
+  </header>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const headerConfig = useAppConfig().connect.header
+</script>
+
+<template>
+  <ConnectHeaderWrapper>
+    <div class="flex items-center justify-between">
+      <ConnectHeaderLogoHomeLink />
+      <div class="flex gap-4">
+        <slot>
+          <ConnectHeaderWhatsNew v-if="headerConfig.whatsNew" />
+          <ConnectLocaleSelect v-if="headerConfig.localeSelect" />
+        </slot>
+      </div>
+    </div>
+  </ConnectHeaderWrapper>
+</template>

package/app/components/Connect/I18n/Helper.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const {
+  translationPath,
+  as = 'span'
+} = defineProps<{
+  translationPath: string
+  as?: 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'label'
+    | 'span'
+    | 'p'
+    | 'div'
+    | 'li'
+    | 'legend'
+    | 'strong'
+    | 'em'
+}>()
+
+const attrs = useAttrs()
+const { t } = useI18n()
+
+const textToDisplay = computed(() => {
+  const translationProps = {
+    ...attrs,
+    boldStart: '<strong>',
+    boldEnd: '</strong>',
+    italicStart: '<em>',
+    italicEnd: '</em>'
+  }
+  return t(translationPath, translationProps)
+})
+</script>
+
+<template>
+  <component :is="as" v-sanitize="textToDisplay" />
+</template>

package/app/components/Connect/Input.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { InputProps } from '@nuxt/ui'
+
+const {
+  id,
+  autoFocus = false
+} = defineProps<{
+  id: string
+  label: string
+  mask?: string
+  disabled?: boolean
+  autoFocus?: boolean
+}>()
+
+const model = defineModel<InputProps['modelValue']>({ required: true })
+const inputRef = useTemplateRef('input-ref')
+
+// Inject props
+const injectedProps = inject<InputProps>(
+  `UInput-props${id ? `-${id}` : ''}`,
+  {} as InputProps
+)
+
+// Inject slots
+const injectedSlots = inject<{ [key: string]: VNode }>(
+  `UInput-slots${id ? `-${id}` : ''}`,
+  {}
+)
+
+defineExpose({ input: inputRef })
+
+// vue ignore reason - type mismatch between model and defaultValue prop caused by strict generics
+</script>
+
+<template>
+  <!-- @vue-ignore -->
+  <UInput
+    ref="input-ref"
+    v-bind="{
+      id,
+      disabled,
+      autofocus: autoFocus,
+      ...injectedProps, // injected props will default when provided
+    }"
+    v-model.trim="model"
+    v-maska="mask"
+    class="w-full grow"
+    :data-testid="id"
+    placeholder="&nbsp;"
+  >
+    <label
+      :for="id"
+      class="floating-label-input"
+    >
+      {{ label }}
+    </label>
+
+    <!-- Render injected slots -->
+    <template
+      v-for="(comp, name) in injectedSlots"
+      #[name]
+      :key="name"
+    >
+      <component
+        :is="comp"
+      />
+    </template>
+  </UInput>
+</template>

package/app/components/Connect/InputDate.vue

@@ -0,0 +1,104 @@
+<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>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <slot name="header">
+      <ConnectHeader />
+    </slot>
+    <slot name="banner">
+      <ConnectSystemBanner />
+    </slot>
+    <slot name="breadcrumb">
+      <ConnectBreadcrumb />
+    </slot>
+    <slot name="bottomHeaders" />
+    <main class="app-body px-2 sm:px-4">
+      <slot name="body">
+        <div class="app-inner-container grow flex flex-col overflow-clip">
+          <slot />
+        </div>
+      </slot>
+    </main>
+    <slot name="topFooters" />
+    <slot name="footer">
+      <ConnectFooter />
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+defineProps<{ items: NavigationMenuItem[] }>()
+
+const showSideMenu = ref(true)
+</script>
+
+<template>
+  <div class="flex gap-4 my-10 relative">
+    <UButton
+      class="absolute z-1 -top-8"
+      color="neutral"
+      size="xs"
+      :icon="showSideMenu ? 'i-mdi-minus' : 'i-mdi-plus'"
+      data-testid="connect-sidebar-toggle-btn"
+      @click="showSideMenu = !showSideMenu"
+    />
+    <ConnectTransitionCollapse>
+      <div v-if="showSideMenu">
+        <UNavigationMenu
+          collapsible
+          :items
+          orientation="vertical"
+          class="text-neutral-highlighted"
+          variant="pill"
+          :ui="{
+            label: 'text-base',
+            link: 'cursor-pointer',
+            linkLabel: 'text-neutral-highlighted',
+            root: 'bg-white rounded p-3',
+          }"
+        />
+      </div>
+    </ConnectTransitionCollapse>
+    <slot />
+  </div>
+</template>

package/app/components/Connect/LocaleSelect.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { LocaleObject } from '@nuxtjs/i18n'
+
+const { locale, locales, setLocale } = useI18n()
+
+const items = computed((): DropdownMenuItem[][] => {
+  const options = locales.value.map((loc: LocaleObject) => {
+    const isCurrentLocal = loc.code === locale.value
+    return {
+      label: loc.name || 'N/A',
+      icon: isCurrentLocal ? 'i-mdi-check' : '',
+      onSelect: () => setLocale(loc.code),
+      class: isCurrentLocal ? 'bg-gray-100' : 'pl-8',
+      color: isCurrentLocal ? 'primary' as const : 'neutral' as const
+    }
+  })
+  return [options]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="items[0] && items[0].length > 1"
+    :items
+    color="secondary"
+  >
+    <UButton
+      data-testid="locale-select-dropdown"
+      icon="i-mdi-web"
+      :aria-label="$t('connect.label.localeSelect')"
+      size="lg"
+      variant="ghost"
+      color="secondary"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/Connect/Modal/Error.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+// https://vue-i18n.intlify.dev/api/composition.html#te-key-locale
+const { t, te } = useI18n()
+
+interface ErrorModalProps {
+  error: unknown
+  i18nPrefix: string
+  buttons?: ConnectModalButton[]
+  contactInfo?: VNode
+  preferErrorMessage?: boolean
+}
+
+const {
+  error,
+  i18nPrefix,
+  buttons = [
+    { label: useNuxtApp().$i18n.t('label.close'), shouldClose: true }
+  ],
+  preferErrorMessage = false
+} = defineProps<ErrorModalProps>()
+defineEmits<{ close: [] }>()
+
+const status = getErrorStatus(error)
+const message = getErrorMessage(error)
+
+const titleKey = `${i18nPrefix}.${status}.title`
+const descKey = `${i18nPrefix}.${status}.description`
+
+const title = te(titleKey) ? t(titleKey) : t(`${i18nPrefix}.undefined.title`)
+const i18nDescription = te(descKey) ? t(descKey) : t(`${i18nPrefix}.undefined.description`)
+
+const description = (preferErrorMessage && message)
+  ? message
+  : i18nDescription
+</script>
+
+<template>
+  <UModal
+    id="connect-error-modal"
+    overlay
+    :title
+    :description
+    :dismissible="false"
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <h2 class="text-2xl font-semibold text-neutral-highlighted">
+          {{ title }}
+        </h2>
+        <p>{{ description }}</p>
+        <component :is="contactInfo" v-if="contactInfo" />
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <template
+            v-for="button in buttons"
+            :key="button.label"
+          >
+            <UButton
+              v-if="button.shouldClose"
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>