@sbc-connect/nuxt-base 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.19
+
+### Patch Changes
+
+- [#65](https://github.com/bcgov/connect-nuxt/pull/65) [`f1145be`](https://github.com/bcgov/connect-nuxt/commit/f1145be1b8b175d9f2e37ae13305d112c6d31cc9) Thanks [@deetz99](https://github.com/deetz99)! - Fix tombstone type import. issue: bcgov/entity#29341
+
+## 0.1.18
+
+### Patch Changes
+
+- [#64](https://github.com/bcgov/connect-nuxt/pull/64) [`291b7dd`](https://github.com/bcgov/connect-nuxt/commit/291b7dd9147dfe465efaabca645ff5cef23d2a66) Thanks [@deetz99](https://github.com/deetz99)! - Create ConnectTombstone component. issue: bcgov/entity#29341
+
+- [#62](https://github.com/bcgov/connect-nuxt/pull/62) [`6ff25af`](https://github.com/bcgov/connect-nuxt/commit/6ff25af994b1099582f632825e1c280a518ff59a) Thanks [@deetz99](https://github.com/deetz99)! - Create ConnectContactDisplay component. issue: bcgov/entity#29341
+
 ## 0.1.17
 
 ### Patch Changes

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ConnectContactItem } from '#imports'
+
+const props = defineProps<{
+  contact: ConnectContactItem | ConnectContactItem[]
+  hours?: string
+}>()
+
+const iconMap = {
+  email: 'i-mdi-email',
+  phone: 'i-mdi-phone',
+  fax: 'i-mdi-fax'
+}
+
+const isMultipleContacts = computed(() => Array.isArray(props.contact))
+const normalizedContact = computed(() => {
+  return isMultipleContacts.value ? props.contact as ConnectContactItem[] : [props.contact as ConnectContactItem]
+})
+</script>
+
+<template>
+  <div class="space-y-5">
+    <ul
+      v-if="isMultipleContacts"
+      class="space-y-1"
+      :aria-label="$t('connect.label.contactInformation')"
+    >
+      <li v-for="item in normalizedContact" :key="item.value">
+        <span class="inline-flex items-center gap-1">
+          <UIcon :name="iconMap[item.type]" class="mr-2 size-4 text-blue-350" />
+          {{ item.title }}
+          <span v-if="item.type === 'fax'">{{ item.value }}</span>
+          <a
+            v-else
+            class="text-primary underline"
+            :href="item.href"
+            :target="item.type === 'email' ? '_blank' : undefined"
+          >
+            {{ item.value }}
+          </a>
+        </span>
+      </li>
+    </ul>
+
+    <div v-else-if="normalizedContact[0]">
+      <span class="inline-flex items-center gap-1">
+        <UIcon :name="iconMap[normalizedContact[0].type]" class="mr-2 size-4 text-blue-350" />
+        {{ normalizedContact[0].title }}
+        <a
+          class="text-primary underline"
+          :href="normalizedContact[0].href"
+          :target="normalizedContact[0].type === 'email' ? '_blank' : undefined"
+        >
+          {{ normalizedContact[0].value }}
+        </a>
+      </span>
+    </div>
+
+    <p v-if="hours">
+      <strong class="text-neutral-highlighted">{{ $t('connect.label.hoursOfOperation') }}</strong>
+      <br>
+      {{ hours }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// must import via alias to be resolved correctly when extending
+import type { ConnectTombstoneItem } from '#base/app/interfaces/connect-tombstone'
+
+defineProps<ConnectTombstoneItem>()
+</script>
+
+<template>
+  <div class="flex space-x-1">
+    <UIcon
+      v-if="icon"
+      v-bind="icon"
+      :class="itemClass || 'mt-1 text-primary'"
+    />
+    <UBadge
+      v-if="badge"
+      v-bind="badge"
+      :class="itemClass || 'px-3'"
+    />
+    <ULink
+      v-else-if="link"
+      v-bind="link"
+      :class="itemClass || 'mt-[2px] text-sm text-primary underline'"
+    >
+      {{ link.label }}
+    </ULink>
+    <component
+      :is="vNode"
+      v-else-if="vNode"
+    />
+    <p
+      v-else-if="text"
+      :class="itemClass || 'mt-[2px] text-sm'"
+    >
+      {{ text }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
+const props = defineProps<{ stateKey: string }>()
+
+const { tombstone } = useConnectTombstone(props.stateKey)
+
+async function handleButtonAction(button: ButtonProps, event: MouseEvent) {
+  button.loading = true
+  if (button.onClick) {
+    if (Array.isArray(button.onClick)) {
+      await Promise.all(button.onClick.map(fn => fn(event)))
+    } else if (button.onClick) {
+      await button.onClick(event)
+    }
+  }
+  button.loading = false
+}
+</script>
+
+<template>
+  <div class="bg-white py-8 px-2 sm:px-4">
+    <div class="app-inner-container">
+      <div
+        v-if="tombstone.loading"
+        class="flex flex-col gap-2 *:space-y-2 sm:flex-row"
+      >
+        <slot name="loading">
+          <div class="grow">
+            <USkeleton class="h-9 w-[400px] rounded" />
+            <USkeleton class="h-5 w-[250px] rounded" />
+            <USkeleton class="h-5 w-[200px] rounded" />
+            <USkeleton class="h-5 w-[150px] rounded" />
+          </div>
+          <div>
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+            <USkeleton class="h-5 w-[300px] rounded" />
+          </div>
+        </slot>
+      </div>
+      <div
+        v-else
+        class="flex flex-col gap-2 sm:flex-row"
+      >
+        <div class="grow space-y-4">
+          <div>
+            <slot name="title">
+              <component
+                :is="tombstone.title.as"
+                class="text-[1.375rem] font-bold text-neutral-highlighted"
+              >
+                {{ tombstone.title.text }}
+              </component>
+            </slot>
+            <slot name="subtitles">
+              <div
+                v-if="tombstone.subtitles.length"
+                class="flex divide-x divide-gray-500"
+              >
+                <ConnectTombstoneItem
+                  v-for="subtitle, i in tombstone.subtitles"
+                  :key="'subtitle-' + i"
+                  v-bind="subtitle"
+                  class="px-2"
+                  :class="i === 0 ? 'pl-0' : ''"
+                />
+              </div>
+            </slot>
+          </div>
+          <div class="space-y-1">
+            <slot name="details">
+              <div class="flex space-x-2">
+                <div
+                  v-for="detail, i in tombstone.details"
+                  :key="'detail-' + i"
+                >
+                  <ConnectTombstoneItem v-bind="detail" />
+                </div>
+              </div>
+            </slot>
+            <slot name="buttons">
+              <div
+                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">
+                  <component :is="btn.vNode" v-if="btn.vNode" />
+                  <UButton
+                    v-else-if="btn.button"
+                    v-bind="{
+                      ...btn.button,
+                      onClick(event) {
+                        handleButtonAction(btn.button!, event)
+                      },
+                    }"
+                  />
+                </template>
+              </div>
+            </slot>
+          </div>
+        </div>
+        <slot name="sideDetails">
+          <dl class="space-y-1 text-sm">
+            <div
+              v-for="detail in tombstone.sideDetails"
+              :key="detail.label"
+              class="flex flex-row flex-wrap gap-2"
+            >
+              <dt class="font-bold text-neutral-highlighted">
+                {{ detail.label }}:
+              </dt>
+              <dd>
+                {{ detail.value }}
+              </dd>
+            </div>
+          </dl>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/app/composables/useConnectTombstone.ts

@@ -0,0 +1,22 @@
+export const useConnectTombstone = (stateKey: string, initialState?: Partial<ConnectTombstoneState>) => {
+  function createInitialState(): ConnectTombstoneState {
+    const baseState: ConnectTombstoneState = {
+      loading: false,
+      title: {} as ConnectTombstoneTitle,
+      subtitles: [],
+      details: [],
+      sideDetails: [],
+      bottomButtons: []
+    }
+
+    return { ...baseState, ...initialState }
+  }
+
+  const tombstone = useState<ConnectTombstoneState>(stateKey, () => createInitialState())
+
+  function $reset() {
+    tombstone.value = createInitialState()
+  }
+
+  return { tombstone, $reset }
+}

package/app/interfaces/connect-contact-item.ts

@@ -0,0 +1,6 @@
+export interface ConnectContactItem {
+  type: 'email' | 'phone' | 'fax'
+  title: string
+  value: string
+  href?: string
+}

package/app/interfaces/connect-tombstone.ts

@@ -0,0 +1,39 @@
+import type { ButtonProps, IconProps, BadgeProps, LinkProps } from '@nuxt/ui'
+import type { VNode } from 'vue'
+
+export interface ConnectTombstoneSideDetail {
+  label: string
+  value: string
+}
+
+export interface ConnectTombstoneTitle {
+  text: string
+  as: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4'
+}
+
+export interface ConnectTombstoneLink extends LinkProps {
+  label?: string
+}
+
+export interface ConnectTombstoneItem {
+  text?: string
+  itemClass?: string
+  icon?: IconProps
+  badge?: BadgeProps
+  link?: ConnectTombstoneLink
+  vNode?: VNode
+}
+
+export type ConnectTombstoneBtn = {
+  button?: ButtonProps
+  vNode?: VNode
+}
+
+export interface ConnectTombstoneState {
+  loading: boolean
+  title: ConnectTombstoneTitle
+  subtitles: ConnectTombstoneItem[]
+  details: ConnectTombstoneItem[]
+  sideDetails: ConnectTombstoneSideDetail[]
+  bottomButtons: ConnectTombstoneBtn[]
+}

package/i18n/locales/en-CA.ts

@@ -21,12 +21,14 @@ export default {
       appVersion: 'App Version',
       bcApp: 'A BC Online Application',
       bcGovLogo: 'Government of British Columbia Logo',
+      contactInformation: 'Contact Information',
       copyright: 'Copyright',
       disclaimer: 'Disclaimer',
       fees: 'Fees',
       goBack: 'Go Back',
       goHome: 'Go Home',
       home: 'Home',
+      hoursOfOperation: 'Hours of Operation',
       localeSelect: 'Select a Language, current language: English',
       privacy: 'Privacy',
       releaseNotes: 'Release Notes',

package/nuxt.config.ts

@@ -120,6 +120,10 @@ export default defineNuxtConfig({
     }
   },
 
+  typescript: {
+    includeWorkspace: true // fixes auto imports in tests
+  },
+
   runtimeConfig: {
     public: {
       // Should in alphabetical order

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -24,8 +24,8 @@
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
     "@sbc-connect/eslint-config": "0.0.7",
-    "@sbc-connect/vitest-config": "0.0.6",
-    "@sbc-connect/playwright-config": "0.0.7"
+    "@sbc-connect/playwright-config": "0.0.7",
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",