@sbc-connect/nuxt-base 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.6
+
+### Patch Changes
+
+- [#26](https://github.com/bcgov/connect-nuxt/pull/26) [`65ae301`](https://github.com/bcgov/connect-nuxt/commit/65ae301972b39cfed8550e49c1209133674528a4) Thanks [@deetz99](https://github.com/deetz99)! - Update CSS variables to match Nuxt UI naming convention. Issue: bcgov/entity#29335
+
+- [#27](https://github.com/bcgov/connect-nuxt/pull/27) [`09fa4f1`](https://github.com/bcgov/connect-nuxt/commit/09fa4f1b4b2c65d189a6477c9c5f2d44607b543d) Thanks [@deetz99](https://github.com/deetz99)! - - ConnectModal component
+
+  - ConnectAddressDisplay component
+  - logFetchError util
+  - tests
+  - switch lodash for es-toolkit
+
+  issue: bcgov/entity#29335
+
+- [#25](https://github.com/bcgov/connect-nuxt/pull/25) [`aba11d1`](https://github.com/bcgov/connect-nuxt/commit/aba11d1303ab1b19b3a51c27959766c4ee0cd5d8) Thanks [@deetz99](https://github.com/deetz99)! - - create auth header components
+
+  - connect-auth layout
+
+  issue: bcgov/entity#29335
+
+## 0.1.5
+
+### Patch Changes
+
+- [#19](https://github.com/bcgov/connect-nuxt/pull/19) [`4231254`](https://github.com/bcgov/connect-nuxt/commit/42312540f5eec65f5d3979d5492bdfaa9bb0b079) Thanks [@deetz99](https://github.com/deetz99)! - Several components and utils
+
+  - ConnectInput
+  - ConnectTextarea
+  - ConnectI18nHelper
+  - ConnectSpinner
+  - ConnectPageSection
+  - parseSpecialCharacters util
+  - setBreadcrumbs util
+  - set nuxt ui default icons to use mdi instead of lucide icons
+
+  issue: bcgov/entity#29334
+
 ## 0.1.4
 
 ### Patch Changes

package/README.md

@@ -48,7 +48,7 @@ For local development, the following variables are required. The default values
 
 ```
 # .env
-NUXT_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
 ```
 
 #### Production Environments

package/app/app.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
   connect: {
     header: {
@@ -37,12 +38,176 @@ export default defineAppConfig({
     button: {
       slots: {
         base: 'cursor-pointer'
+      },
+      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'
+        },
+        {
+          color: 'primary',
+          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'
+        }
+      ],
+      variants: {
+        size: {
+          sm: {
+            base: 'px-7 py-0.5 text-sm gap-2.5',
+            leadingIcon: 'size-4',
+            leadingAvatarSize: '3xs',
+            trailingIcon: 'size-4'
+          },
+          md: {
+            base: 'px-7 py-1.5 text-sm gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          },
+          lg: {
+            base: 'px-7 py-2.25 text-sm gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          },
+          xl: {
+            base: 'px-7 py-2.5 text-base gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        }
+      },
+      defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'lg'
+      }
+    },
+    card: {
+      slots: {
+        root: 'rounded-md'
       }
     },
     dropdownMenu: {
       slots: {
-        content: 'bg-secondary ring-0',
-        group: 'p-0'
+        content: 'min-w-32 max-h-[75dvh] shadow-lg rounded-sm',
+        group: 'p-0 isolate',
+        item: 'group relative w-full flex items-center select-none outline-none before:inset-px before:rounded-none cursor-pointer',
+        separator: '-mx-0 my-0 h-px bg-(--ui-border)'
+      },
+      variants: {
+        active: {
+          true: {
+            item: 'text-primary before:bg-shade',
+            itemLeadingIcon: 'text-(--ui-text)'
+          },
+          false: {
+            item: 'text-(--ui-text) data-highlighted:text-primary data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-shade data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors',
+            itemLeadingIcon: 'text-neutral group-data-highlighted:text-primary group-data-[state=open]:text-(--ui-text) transition-colors'
+          }
+        },
+        size: {
+          md: {
+            label: 'px-4 py-3 text-sm gap-1.5',
+            item: 'px-4 py-3 text-sm gap-1.5',
+            itemLeadingIcon: 'size-5',
+            itemLeadingAvatarSize: '2xs',
+            itemTrailingIcon: 'size-5',
+            itemTrailingKbds: 'gap-0.5',
+            itemTrailingKbdsSize: 'md'
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          color: 'primary',
+          active: false,
+          class: {
+            item: 'text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10',
+            itemLeadingIcon: 'text-(--ui-primary) group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
+          }
+        },
+        {
+          color: 'primary',
+          active: true,
+          class: {
+            item: 'text-(--ui-primary) before:bg-(--ui-primary)/10',
+            itemLeadingIcon: 'text-(--ui-primary)'
+          }
+        }
+      ]
+    },
+    icons: {
+      arrowLeft: 'i-mdi-arrow-left',
+      arrowRight: 'i-mdi-arrow-right',
+      check: 'i-mdi-check',
+      chevronDoubleLeft: 'i-mdi-chevron-double-left',
+      chevronDoubleRight: 'i-mdi-chevron-double-right',
+      chevronDown: 'i-mdi-menu-down',
+      chevronLeft: 'i-mdi-menu-left',
+      chevronRight: 'i-mdi-menu-right',
+      chevronUp: 'i-mdi-menu-up',
+      close: 'i-mdi-close',
+      ellipsis: 'i-mdi-dots-horizontal',
+      external: 'i-mdi-open-in-new',
+      file: 'i-mdi-file',
+      folder: 'i-mdi-folder',
+      folderOpen: 'i-mdi-folder-open',
+      loading: 'i-mdi-loading',
+      minus: 'i-mdi-minus',
+      plus: 'i-mdi-plus',
+      search: 'i-mdi-magnify',
+      upload: 'i-mdi-upload'
+    },
+    input: {
+      variants: {
+        size: {
+          bcGovLg: {
+            base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'ring-0 ring-transparent peer rounded-t-sm rounded-b-none bg-shade shadow-input focus:ring-0 focus:outline-none focus:shadow-input-focus text-neutral-highlighted'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGovLg',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
+    textarea: {
+      variants: {
+        size: {
+          bcGovLg: {
+            base: 'px-2.5 pb-1.5 pt-5 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'peer rounded-t-sm rounded-b-none bg-shade focus:ring-0 focus:outline-none shadow-input focus:shadow-input-focus text-neutral-highlighted'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGovLg',
+        color: 'primary',
+        variant: 'bcGov'
       }
     },
     tooltip: {
@@ -53,17 +218,3 @@ export default defineAppConfig({
     }
   }
 })
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    connect?: {
-      header?: {
-        localeSelect?: boolean
-        whatsNew?: boolean
-      }
-      footer?: {
-        versions?: string[]
-      }
-    }
-  }
-}

package/app/components/Connect/Address/Display.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+  address: Partial<ConnectAddress>
+  omitCountry?: boolean
+}>()
+
+const getAddressDisplayParts = (
+  address: Partial<ConnectAddress>,
+  separateCity = false,
+  addTextDecor = false,
+  omitCountry = false
+): string[] => {
+  const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
+  const textDecor = addTextDecor ? ',' : ''
+
+  const getLine1 = () => {
+    return (
+      address.street || [
+        [address.unitNumber, address.streetNumber].filter(val => !!val).join('-'),
+        address.streetName
+      ].filter(val => !!val).join(' ') || ''
+    ) + textDecor
+  }
+
+  const getLine2 = () => {
+    return (address.streetAdditional || '') + textDecor
+  }
+
+  const getCity = () => {
+    return (address.city || '') + textDecor
+  }
+
+  const getRegion = () => {
+    return address.region
+      ? address.region + (addTextDecor ? '\u00A0' : '')
+      : ''
+  }
+
+  const getCountry = () => {
+    return address.country && !omitCountry ? (regionNamesInEnglish.of(address.country) || address.country) : ''
+  }
+
+  return [
+    getLine1(),
+    getLine2(),
+    separateCity ? getCity() : '',
+    [!separateCity ? getCity() : '', getRegion(), address.postalCode].filter(val => !!val).join(' ') || '',
+    getCountry()
+  ].filter(val => !!val && val !== ',')
+}
+
+const addressDisplay = getAddressDisplayParts(props.address, false, true, props.omitCountry)
+</script>
+
+<template>
+  <div
+    data-testid="address-display"
+    class="flex flex-col gap-2"
+  >
+    <div>
+      <div
+        v-for="addressLine, i in addressDisplay"
+        :key="addressLine + i"
+        data-testid="address-line"
+      >
+        {{ addressLine }}
+      </div>
+    </div>
+    <span
+      v-if="address.locationDescription"
+      data-testid="location-description"
+      class="italic"
+    >
+      {{ address.locationDescription }}
+    </span>
+  </div>
+</template>

package/app/components/Connect/Breadcrumb.vue

@@ -38,7 +38,7 @@ function resolveBackHref() {
     v-if="$route.meta.hideBreadcrumbs !== true"
     class="bg-blue-350"
   >
-    <div class="app-inner-container flex items-center px-4 py-2 gap-3">
+    <div class="app-inner-container flex items-center p-2 sm:px-4 py-2 gap-3">
       <UButton
         class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"
         :disabled="breadcrumbs.length < 2"
@@ -50,7 +50,7 @@ function resolveBackHref() {
           leadingIcon: 'text-blue-500',
         }"
       />
-      <div class="w-[1px] bg-shadePrimary h-[24px]" />
+      <div class="w-[1px] bg-shade h-[24px]" />
       <UBreadcrumb
         :items="breadcrumbs"
         :aria-label="$t('connect.breadcrumb.arialabel')"

package/app/components/Connect/Footer.vue

@@ -54,7 +54,7 @@ const appVersions = computed<string[]>(() => {
   <footer
     id="connect-main-footer"
     data-testid="connect-main-footer"
-    class="border-t-2 border-brandLight bg-brandDark"
+    class="border-t-2 border-brand-inverted bg-brand"
   >
     <div class="app-inner-container flex items-center justify-between p-2">
       <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
@@ -65,7 +65,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-lineLight',
+              'sm:border-r sm:first:ml-2 border-line',
             ]"
           >
             <NuxtLink
@@ -83,7 +83,7 @@ const appVersions = computed<string[]>(() => {
         </ul>
       </nav>
       <div class="-mb-1 flex items-center">
-        <span class="italic text-brandLight">{{ $t('connect.label.bcApp') }}</span>
+        <span class="italic text-brand-inverted">{{ $t('connect.label.bcApp') }}</span>
         <UTooltip arrow :delay-duration="200">
           <UButton
             :aria-label="$t('connect.label.appVersion')"

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

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

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

@@ -6,13 +6,12 @@ const headerConfig = useAppConfig().connect.header
   <ConnectHeaderWrapper>
     <div class="flex items-center justify-between">
       <ConnectHeaderLogoHomeLink />
-      <ClientOnly>
-        <div class="flex gap-4">
-          <slot />
+      <div class="flex gap-4">
+        <slot>
           <ConnectHeaderWhatsNew v-if="headerConfig.whatsNew" />
           <ConnectLocaleSelect v-if="headerConfig.localeSelect" />
-        </div>
-      </ClientOnly>
+        </slot>
+      </div>
     </div>
   </ConnectHeaderWrapper>
 </template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps({
+  translationPath: { type: String, required: true }
+})
+
+const attrs = useAttrs()
+const { t } = useI18n()
+
+const textToDisplay = computed(() => {
+  const translationProps = {
+    ...attrs,
+    boldStart: '<strong>',
+    boldEnd: '</strong>',
+    italicStart: '<em>',
+    italicEnd: '</em>'
+  }
+  return t(props.translationPath, translationProps)
+})
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <span v-html="textToDisplay" />
+</template>

package/app/components/Connect/Input.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const model = defineModel<string>({ required: true })
+
+defineProps<{
+  id: string
+  label: string
+  mask?: string
+  invalid?: boolean
+}>()
+</script>
+
+<template>
+  <UInput
+    :id
+    v-model.trim="model"
+    v-maska="mask"
+    :data-testid="id"
+    placeholder="&nbsp;"
+    class="w-full grow"
+    :ui="{
+      base: invalid ? 'ring-0 shadow-input-error focus:shadow-input-error' : '',
+    }"
+  >
+    <label
+      :for="id"
+      class="floating-label-input"
+      :class="invalid ? 'text-error' : ''"
+    >
+      {{ label }}
+    </label>
+  </UInput>
+</template>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="app-container">
+    <slot name="header">
+      <ConnectHeader />
+    </slot>
+    <slot name="banner">
+      <ConnectSystemBanner />
+    </slot>
+    <slot name="breadcrumb">
+      <ConnectBreadcrumb />
+    </slot>
+    <div class="app-inner-container app-body">
+      <div class="flex flex-col lg:flex-row lg:gap-6 grow">
+        <div class="grow max-w-full overflow-hidden">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <slot name="footer">
+      <ConnectFooter />
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+
+defineProps<{
+  title: string
+  description: string
+  dismissible: boolean
+  buttons?: ConnectModalButton[]
+}>()
+defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <UModal
+    overlay
+    :title
+    :description
+    :dismissible
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <div class="flex flex-col gap-6 text-left">
+          <h2>
+            {{ title }}
+          </h2>
+          <p class="-mt-2">
+            {{ description }}
+          </p>
+        </div>
+        <div v-if="buttons && buttons.length" 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"
+              :block="isSmallScreen"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              :block="isSmallScreen"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/Connect/PageSection.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { ButtonProps } from '#ui/types'
+
+defineProps<{
+  heading?: {
+    label?: string
+    labelClass?: string
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    icon?: string
+    iconClass?: string
+    ui?: string
+  }
+  uiBody?: string
+  actions?: ButtonProps[]
+}>()
+</script>
+
+<template>
+  <UCard
+    as="section"
+    class="w-full"
+    variant="outline"
+    :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',
+    }"
+  >
+    <template v-if="heading?.label || $slots.header" #header>
+      <slot name="header">
+        <div class="flex items-center justify-between gap-2.5">
+          <component :is="heading?.level || 'h2'">
+            <div class="flex items-center gap-2.5">
+              <UIcon
+                v-if="heading?.icon"
+                :name="heading.icon"
+                :class="heading?.iconClass || 'size-6 shrink-0 text-primary'"
+              />
+              <span :class="heading?.labelClass || 'font-semibold text-neutral-highlighted text-base'">
+                {{ heading?.label }}
+              </span>
+            </div>
+          </component>
+
+          <div class="flex items-center gap-2.5">
+            <UButton
+              v-for="(action, i) in actions"
+              :key="i"
+              v-bind="action"
+            />
+          </div>
+        </div>
+      </slot>
+    </template>
+    <slot />
+  </UCard>
+</template>

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

@@ -14,11 +14,11 @@ defineProps<{
     :close="{
       color: 'neutral',
       variant: 'ghost',
-      class: 'cursor-pointer hover:bg-gray-100/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-brandLight',
-      title: 'text-brandDark',
+      header: 'bg-brand-inverted',
+      title: 'text-brand',
       body: 'flex-1 overflow-y-auto p-0 sm:p-0',
       description: 'sr-only',
     }"
@@ -55,7 +55,7 @@ defineProps<{
 <!-- must style globally for vhtml style to work  -->
 <style>
 .vhtml a {
-  color: var(--ui-markBlue);
+  color: var(--ui-mark);
   text-decoration: underline;
 }
 </style>