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

package/app/coverage/sorter.js

@@ -0,0 +1,210 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+
+        // Try to create a RegExp from the searchValue. If it fails (invalid regex),
+        // it will be treated as a plain text search
+        let searchRegex;
+        try {
+            searchRegex = new RegExp(searchValue, 'i'); // 'i' for case-insensitive
+        } catch (error) {
+            searchRegex = null;
+        }
+
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            let isMatch = false;
+
+            if (searchRegex) {
+                // If a valid regex was created, use it for matching
+                isMatch = searchRegex.test(row.textContent);
+            } else {
+                // Otherwise, fall back to the original plain text search
+                isMatch = row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase());
+            }
+
+            row.style.display = isMatch ? '' : 'none';
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSearchBox();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/app/error.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/* eslint-disable vue/define-props-declaration */
+import type { NuxtError } from '#app'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const props = defineProps({
+  error: { type: Object as () => NuxtError, default: undefined }
+})
+
+// TODO: update with other error codes?
+const errorKey: string | number = props.error?.statusCode === 404 ? 404 : 'unknown'
+
+// cant use definePageMeta in error.vue
+useRoute().meta.hideBreadcrumbs = true
+
+useHead({
+  title: errorKey === 404 ? t('connect.page.error.404.title') : t('connect.page.error.unknown.title')
+})
+
+const errorObj = {
+  name: props.error?.name || '',
+  cause: props.error?.cause || '',
+  message: props.error?.message || '',
+  statusCode: props.error?.statusCode || '',
+  statusMessage: props.error?.statusMessage || '',
+  stack: props.error?.stack || '',
+  data: props.error?.data || ''
+}
+
+onMounted(() => {
+  console.error('Application Error: ', errorObj)
+})
+</script>
+
+<template>
+  <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtLayout name="connect-base">
+      <div class="m-auto flex flex-col items-center gap-4">
+        <h1>
+          {{ $t(`connect.page.error.${errorKey}.h1`) }}
+        </h1>
+        <p>{{ $t(`connect.page.error.${errorKey}.content`) }}</p>
+        <UButton
+          :label="$t('connect.label.goHome')"
+          icon="i-mdi-home"
+          size="xl"
+          :to="localePath('/')"
+        />
+      </div>
+    </NuxtLayout>
+  </UApp>
+</template>

package/app/interfaces/connect-address.ts

@@ -0,0 +1,12 @@
+export interface ConnectAddress {
+  street: string
+  streetAdditional: string
+  city: string
+  region: string
+  postalCode: string
+  country: string
+  locationDescription: string
+  streetName?: string
+  streetNumber?: string
+  unitNumber?: string
+}

package/app/interfaces/connect-breadcrumb.ts

@@ -0,0 +1,5 @@
+import type { BreadcrumbItem } from '#ui/types'
+
+export interface ConnectBreadcrumb extends BreadcrumbItem {
+  appendAccountId?: boolean
+}

package/app/interfaces/connect-button-control.ts

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export interface ConnectButton extends ButtonProps {
+  alertText?: string
+  removeAlertSpacing?: boolean
+}
+
+export interface ConnectButtonGroup {
+  alertText?: string
+  buttons: ConnectButton[]
+  class?: string
+  stacked?: boolean
+}
+
+export interface ConnectButtonControl {
+  leftGroup: ConnectButtonGroup
+  rightGroup: ConnectButtonGroup
+}
+
+export interface ConnectButtonControlOptions {
+  handleLoading: boolean
+  clearAlertTextOnClick: boolean
+}

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-modal.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export interface ConnectModalButton extends ButtonProps {
+  shouldClose?: boolean
+}

package/app/interfaces/connect-tombstone.ts

@@ -0,0 +1,41 @@
+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'
+}
+
+// must also update ConnectTombstoneItem props if updating this type
+export interface ConnectTombstoneLink extends LinkProps {
+  label?: string
+}
+
+// must also update ConnectTombstoneItem props if updating this type
+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/app/interfaces/connect-whatsnew.ts

@@ -0,0 +1,14 @@
+export interface ConnectWhatsNewItem {
+  app: string
+  date: string
+  description: string
+  id: number
+  priority: boolean
+  read: boolean
+  title: string
+}
+
+export interface ConnectWhatsNewState {
+  viewed: boolean
+  items: ConnectWhatsNewItem[]
+}

package/app/layouts/ConnectBase.vue

@@ -0,0 +1,5 @@
+<template>
+  <ConnectLayout>
+    <slot />
+  </ConnectLayout>
+</template>

package/app/plugins/maska.client.ts

@@ -0,0 +1,10 @@
+// https://beholdr.github.io/maska/v3/#/vue
+import { vMaska } from 'maska/vue'
+
+export default defineNuxtPlugin({
+  name: 'core-maska-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive('maska', vMaska)
+  }
+})

package/app/plugins/sanitize.client.ts

@@ -0,0 +1,22 @@
+import DOMPurify from 'dompurify'
+
+export default defineNuxtPlugin({
+  name: 'connect-sanitize-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive('sanitize', {
+      beforeMount(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value)
+      },
+      updated(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value)
+      }
+    })
+
+    return {
+      provide: {
+        sanitize: DOMPurify.sanitize
+      }
+    }
+  }
+})

package/app/plugins/whats-new.client.ts

@@ -0,0 +1,45 @@
+import { useStorage } from '@vueuse/core'
+import { isEqual } from 'es-toolkit'
+
+export default defineNuxtPlugin({
+  name: 'connect-whats-new-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    // exit early if whats new === false
+    const whatsNew = useAppConfig().connect.header.whatsNew
+    if (!whatsNew) {
+      return
+    }
+    const rtc = useRuntimeConfig().public
+    const url = rtc.statusApiUrl + rtc.statusApiVersion
+
+    // load whats new only once when app mounts
+    nuxtApp.hook('app:mounted', async () => {
+    // set default localStorage state
+      const state = useStorage<ConnectWhatsNewState>(
+        'connect-whats-new', // storage key
+        { viewed: false, items: [] }, // default value
+        localStorage, // could change this to sessionStorage
+        { mergeDefaults: true } // merge anything already in localStorage with default value
+      )
+
+      try {
+        // fetch items
+        const res = await $fetch<ConnectWhatsNewItem[]>(`${url}/whatsnew`, {
+          parseResponse: JSON.parse, // required to parse JSON correctly
+          headers: {
+            'App-Name': rtc.appName
+          }
+        })
+
+        // only update value if new items exist
+        if (!isEqual(state.value.items, res) && res.length > 0) {
+          state.value.items = res
+          state.value.viewed = false
+        }
+      } catch {
+      // silently handle errors
+      }
+    })
+  }
+})

package/app/spa-loading-template.html

@@ -0,0 +1,61 @@
+<head>
+  <title>Loading...</title>
+  <style>
+    .loading-container {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      background-color: rgba(241, 243, 245, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loader {
+      display: block;
+      width: 75px;
+      height: 75px;
+      animation: rotate 1.5s linear infinite;
+      transform-origin: 50% 50%;
+    }
+
+    .loader .path {
+      stroke: #1669bb;
+      stroke-linecap: round;
+      animation: dash 1.25s ease-in-out infinite;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  </style>
+</head>
+<div class="loading-container">
+  <svg class="loader" viewBox="0 0 50 50">
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</div>

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

@@ -0,0 +1,15 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    connect?: {
+      header?: {
+        localeSelect?: boolean
+        whatsNew?: boolean
+      }
+      footer?: {
+        versions?: string[]
+      }
+    }
+  }
+}
+
+export {}

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

@@ -0,0 +1,7 @@
+declare module 'vue' {
+  interface GlobalDirectives {
+    vSanitize: Directive<HTMLElement, string>
+  }
+}
+
+export {}

package/app/types/base-page-meta.d.ts

@@ -0,0 +1,8 @@
+declare module '#app' {
+  interface PageMeta {
+    breadcrumbs?: ConnectBreadcrumb[]
+    hideBreadcrumbs?: boolean
+  }
+}
+
+export {}

package/app/types/dates.ts

@@ -0,0 +1,17 @@
+/**
+ * ISO date string (YYYY-MM-DD), assumed to be in Pacific timezone.
+ * @example "2021-12-31"
+ */
+export type IsoDatePacific = string
+
+/**
+  * API date-time string (YYYY-MM-DDTHH:MM:SS[.MMMMMM]+00.00), assumed to be in UTC.
+  * @example "2022-05-09T16:26:14.839032+00:00"
+  */
+export type ApiDateTimeUtc = string
+
+/**
+  * Formatted date-time string with explicit GMT timezone (ie, UTC).
+  * @example "Tue, 19 Apr 2022 16:40:18 GMT"
+  */
+export type FormattedDateTimeGmt = string

package/app/utils/appendUrlParam.ts

@@ -0,0 +1,4 @@
+export function appendUrlParam(url: string, key: string, value: string | number) {
+  const separator = url.includes('?') ? '&' : '?'
+  return `${url}${separator}${key}=${value}`
+}

package/app/utils/getErrorMessage.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Safely extracts an error message from an unknown error object.
+ *
+ * The search order (Highest Priority to Lowest) is:
+ * 1. Current object's 'message' (must be a non-empty string).
+ * 2. Current object's 'detail' (must be a non-empty string).
+ * 3. Recursively searches the 'error.data.rootCause' object.
+ * 4. Recursively searches the 'error.data' object.
+ *
+ * This function will return the first valid, non-empty string message found.
+ *
+ * @param error - The error object (unknown).
+ * @returns The error message if found, else 'undefined'.
+*/
+export function getErrorMessage(error: unknown): string | undefined {
+  if (error && typeof error === 'object') {
+    const errorObject = error as Record<string, any>
+
+    const message = errorObject.message
+    if (message && typeof message === 'string' && message.length > 0) {
+      return message
+    }
+    const detail = errorObject.detail
+    if (detail && typeof detail === 'string' && detail.length > 0) {
+      return detail
+    }
+
+    const rootCauseMessage = getErrorMessage(errorObject?.data?.rootCause)
+    if (rootCauseMessage) {
+      return rootCauseMessage
+    }
+
+    const dataMessage = getErrorMessage(errorObject?.data)
+    if (dataMessage) {
+      return dataMessage
+    }
+  }
+
+  return undefined
+}

package/app/utils/getErrorStatus.ts

@@ -0,0 +1,37 @@
+/**
+ * Safely extracts the HTTP status code from a thrown error.
+ *
+ * This provides a reliable way to get a status code from an `unknown` error type.
+ *
+ * @param error - The error object to inspect. It can be of any type.
+ * @returns The numeric HTTP status code if found, otherwise `undefined`.
+ *
+ * @example
+ * getErrorStatus({ response: { status: 404 } }); // returns 404
+ *
+ * @example
+ * getErrorStatus({ statusCode: 403 }); // returns 403
+ *
+ * @example
+ * getErrorStatus(new Error("Network failed")); // returns undefined
+*/
+export function getErrorStatus(error: unknown): number | undefined {
+  // check if error is valid object
+  if (
+    error
+    && typeof error === 'object'
+    && ('statusCode' in error || 'response' in error)
+  ) {
+    // handle case where error.response.status
+    if ('response' in error && error.response && typeof error.response === 'object' && 'status' in error.response) {
+      return error.response.status as number
+    }
+    // handle case where no error.response.status, fallback to error.statusCode
+    if ('statusCode' in error) {
+      return error.statusCode as number
+    }
+  }
+
+  // return undefined if no status or statusCode
+  return undefined
+}