Merge pull request #29 from deetz99/updates

Core Layer: Updates

nuxt/layers/core/.playground/app/pages/index.vue

@@ -2,6 +2,19 @@
 const { isAuthenticated, login, logout } = useKeycloak()
 const ldStore = useConnectLaunchdarklyStore()
 
+const actions = [
+  {
+    label: 'test 1',
+    variant: 'outline',
+    click: () => console.log('clicked 1')
+  },
+  {
+    label: 'test 2',
+    to: 'https://ui.nuxt.com/components/button#props',
+    external: true
+  }
+]
+
 setBreadcrumbs([
   { label: 'test', to: useRuntimeConfig().public.registryHomeURL },
   { label: 'test 2', to: useRuntimeConfig().public.registryHomeURL },
@@ -29,9 +42,12 @@ onMounted(() => {
     </ClientOnly>
 
     <ConnectPageSection
-      :heading="{ label: 'Hello World', icon: 'i-mdi-account-multiple' }"
+      :heading="{ label: 'Hello World', icon: 'i-mdi-account-multiple', bgColor: 'bg-red-200' }"
+      :actions="actions"
     >
       some stuff
     </ConnectPageSection>
+
+    <ConnectI18nBold translation-path="test.i18nBold.italic" />
   </div>
 </template>

nuxt/layers/core/.playground/app/pages/test-2.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+setBreadcrumbs([
+  { label: 'test 2nd page', to: useRuntimeConfig().public.registryHomeURL }
+])
+</script>
+<template>
+  <div class="flex flex-col gap-8 border border-black px-2 py-8">
+    <h1>
+      Testing 2 page
+    </h1>
+  </div>
+</template>

nuxt/layers/core/app/components/Connect/I18n/Bold.vue

@@ -5,15 +5,16 @@ const props = defineProps({
 
 const attrs = useAttrs()
 const { t } = useI18n()
-const { $sanitize } = useNuxtApp()
 
 const textToDisplay = computed(() => {
   const translationProps = {
     ...attrs,
     boldStart: '<strong>',
-    boldEnd: '</strong>'
+    boldEnd: '</strong>',
+    italicStart: '<em>',
+    italicEnd: '</em>'
   }
-  return $sanitize(t(props.translationPath, translationProps))
+  return t(props.translationPath, translationProps)
 })
 </script>
 <template>

nuxt/layers/core/app/components/Connect/PageSection.vue

@@ -1,12 +1,23 @@
 <script setup lang="ts">
+// TODO: test all props and prop types are passed correctly
+import type { Button, ButtonVariant } from '#ui/types'
+
+interface HeaderAction extends Omit<Button, 'variant'> {
+  click?: (...args: any[]) => void
+  variant?: ButtonVariant | string // force variant type
+}
+
 defineProps<{
   heading?: {
     label?: string
     labelClass?: string
     level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
     icon?: string
     iconClass?: string
-  }
+    bgColor?: string
+    padding?: string
+  },
+  actions?: HeaderAction[]
 }>()
 </script>
 <template>
@@ -17,8 +28,8 @@ defineProps<{
       rounded: 'rounded',
       header: {
         base: 'rounded-t',
-        background: 'bg-bcGovColor-gray2',
-        padding: 'px-4 py-4 sm:px-4',
+        background: heading?.bgColor ?? 'bg-bcGovColor-gray2',
+        padding: heading?.padding ?? 'px-4 py-4 sm:px-4',
       },
       body: {
         padding: 'px-0 py-0 sm:p-0',
@@ -29,14 +40,28 @@ defineProps<{
       <slot name="header">
         <component
           :is="heading?.level || 'h2'"
-          class="flex items-center gap-2"
+          class="flex justify-between gap-2.5"
         >
-          <UIcon
-            v-if="heading?.icon"
-            :name="heading.icon"
-            :class="heading?.iconClass || 'size-6 shrink-0 text-bcGovColor-activeBlue'"
-          />
-          <span :class="heading?.labelClass || 'font-semibold text-bcGovColor-darkGray text-base'">{{ heading?.label }}</span>
+          <div class="flex items-center gap-2.5">
+            <UIcon
+              v-if="heading?.icon"
+              :name="heading.icon"
+              :class="heading?.iconClass || 'size-6 shrink-0 text-bcGovColor-activeBlue'"
+            />
+            <span :class="heading?.labelClass || 'font-semibold text-bcGovColor-darkGray text-base'">{{ heading?.label }}</span>
+          </div>
+
+          <div class="flex items-center gap-2.5">
+            <UButton
+              v-for="(action, i) in actions"
+              :key="i"
+              v-bind="{
+                ...action,
+                variant: action.variant as ButtonVariant // force cast of button type
+              }"
+              @click="action.click && action.click()"
+            />
+          </div>
         </component>
       </slot>
     </template>

nuxt/layers/core/app/composables/useKeycloak.ts

@@ -1,5 +1,5 @@
 export const useKeycloak = () => {
-  const { $keycloak, $i18n } = useNuxtApp()
+  const { $keycloak } = useNuxtApp()
 
   /**
    * Logs the user in using the idpHint 'bcsc', 'idir' or 'bceid' and an optional redirect URL.
@@ -9,7 +9,7 @@ export const useKeycloak = () => {
    */
   function login (idpHint: IdpHint, redirect?: string): Promise<void> {
     const loginRedirectUrl = sessionStorage.getItem(ConnectStorageKeys.LOGIN_REDIRECT_URL)
-    const redirectUri = redirect ?? loginRedirectUrl ?? `${location.origin}/${$i18n.locale.value}`
+    const redirectUri = redirect ?? loginRedirectUrl ?? window.location.href
 
     return $keycloak.login(
       {
@@ -26,7 +26,7 @@ export const useKeycloak = () => {
    */
   function logout (redirect?: string): Promise<void> {
     const logoutRedirectUrl = sessionStorage.getItem(ConnectStorageKeys.LOGOUT_REDIRECT_URL)
-    const redirectUri = redirect ?? logoutRedirectUrl ?? `${location.origin}/${$i18n.locale.value}`
+    const redirectUri = redirect ?? logoutRedirectUrl ?? window.location.href
 
     resetPiniaStores()
     return $keycloak.logout({

nuxt/layers/core/app/locales/en-CA.ts

@@ -64,7 +64,8 @@ export default {
   test: {
     i18nBold: {
       strong: 'This should have {boldStart} bold {boldEnd} text',
-      strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}'
+      strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}',
+      italic: 'Italic test {italicStart} goes here {italicEnd}.'
     }
   }
 }

nuxt/layers/core/app/utils/resetPiniaStores.ts

@@ -4,14 +4,26 @@ import { getActivePinia } from 'pinia'
 interface ExtendedPinia extends Pinia {
   _s: Map<string, Store>;
 }
+
+/**
+ * Resets all Pinia stores that have a `$reset` method.
+*/
 export function resetPiniaStores (): void {
   const pinia = getActivePinia() as ExtendedPinia
+  const env = useRuntimeConfig().public.environment
 
   if (!pinia) {
     console.error('There are no stores')
   }
 
+  // null check still fails so must catch error instead
   pinia._s.forEach((store) => {
-    store.$reset()
+    try {
+      store.$reset()
+    } catch {
+      if (env === 'Development') {
+        console.warn(`Store "${store.$id}" does not implement $reset. Skipping reset.`)
+      }
+    }
   })
 }

nuxt/layers/core/nuxt.config.ts

@@ -72,7 +72,8 @@ export default defineNuxtConfig({
       ldClientId: process.env.NUXT_LD_CLIENT_ID || '',
       appName: process.env.npm_package_name || '',
       registryHomeURL: process.env.NUXT_REGISTRY_HOME_URL,
-      version: `BRD UI v${process.env.npm_package_version || ''}`
+      version: `BRD UI v${process.env.npm_package_version || ''}`,
+      environment: process.env.NUXT_ENVIRONMENT_HEADER || ''
     }
   },
 

nuxt/layers/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@daxiom/nuxt-core-layer-test",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground --port 3000",