@sbc-connect/nuxt-base 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sbc-connect/nuxt-base
 
+## 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/app/app.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 export default defineAppConfig({
   connect: {
     header: {
@@ -39,12 +40,83 @@ export default defineAppConfig({
         base: 'cursor-pointer'
       }
     },
+    card: {
+      slots: {
+        root: 'rounded-md'
+      }
+    },
     dropdownMenu: {
       slots: {
         content: 'bg-secondary ring-0',
         group: 'p-0'
       }
     },
+    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-shadePrimary shadow-input focus:ring-0 focus:outline-none focus:shadow-inputFocus text-neutralDark'
+        }
+      },
+      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-shadePrimary focus:ring-0 focus:outline-none shadow-input focus:shadow-inputFocus text-neutralDark'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGovLg',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
     tooltip: {
       slots: {
         content: 'bg-neutral ring-neutral text-secondary p-4',
@@ -53,17 +125,3 @@ export default defineAppConfig({
     }
   }
 })
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    connect?: {
-      header?: {
-        localeSelect?: boolean
-        whatsNew?: boolean
-      }
-      footer?: {
-        versions?: string[]
-      }
-    }
-  }
-}

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"

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-brandLight bg-brandDark 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/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-inputError focus:shadow-inputError' : '',
+    }"
+  >
+    <label
+      :for="id"
+      class="floating-label-input"
+      :class="invalid ? 'text-error' : ''"
+    >
+      {{ label }}
+    </label>
+  </UInput>
+</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-shadeSecondary 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-neutralDark 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,7 +14,7 @@ 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-shadePrimary/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
     }"
     :ui="{
       header: 'bg-brandLight',
@@ -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>

package/app/components/Connect/Spinner.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const props = defineProps({
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: Number,
+    default: 75
+  }
+})
+
+const spinnerStyle = computed(() => ({
+  '--spinner-size': `${props.size}px`,
+  '--spinner-margin': `${props.size / -2}px`
+}))
+</script>
+
+<template>
+  <!-- eslint-disable tailwindcss/no-custom-classname -->
+  <Teleport v-if="fullscreen" to="body">
+    <div class="fixed inset-0 z-[999] h-screen w-screen bg-gray-100 opacity-50" />
+    <svg
+      class="spinner fixed"
+      viewBox="0 0 50 50"
+      :style="spinnerStyle"
+    >
+      <circle
+        class="path"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  </Teleport>
+  <svg
+    v-else
+    class="spinner absolute"
+    viewBox="0 0 50 50"
+    :style="spinnerStyle"
+  >
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</template>
+
+<style scoped>
+  .spinner {
+    animation: rotate 1.5s linear infinite;
+    z-index: 10000;
+    top: 50%;
+    left: 50%;
+    margin-top: var(--spinner-margin, -37.5px);
+    margin-left: var(--spinner-margin, -37.5px);
+    width: var(--spinner-size, 75px);
+    height: var(--spinner-size, 75px);
+    transform-origin: 50% 50%;
+  }
+
+  .spinner .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>

package/app/components/Connect/SystemBanner.vue

@@ -15,7 +15,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="bg-brandLight px-2">
+  <div class="bg-brandLight">
     <UAlert
       v-show="!!message && !close"
       class="py-0"
@@ -23,7 +23,7 @@ onMounted(async () => {
       :close="dismissible"
       close-icon="i-mdi-close"
       :ui="{
-        root: 'rounded-none bg-brandLight p-0 app-inner-container',
+        root: 'rounded-none bg-brandLight p-2 sm:px-4 app-inner-container',
         wrapper: 'bg-brandLight',
         close: 'mt-2 text-neutralDark',
       }"

package/app/components/Connect/Textarea.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const model = defineModel<string>({ required: true })
+
+defineProps<{
+  id: string
+  label: string
+  invalid?: boolean
+}>()
+</script>
+
+<template>
+  <UTextarea
+    :id
+    v-model.trim="model"
+    :data-testid="id"
+    placeholder="&nbsp;"
+    class="w-full grow"
+    :ui="{
+      base: invalid ? 'ring-0 shadow-inputError focus:shadow-inputError resize-none' : 'resize-none',
+    }"
+  >
+    <label
+      class="floating-label-textarea bg-shadePrimary w-[96%] flex-1 pt-1 -mt-1"
+      :class="invalid ? 'text-error' : ''"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+  </UTextarea>
+</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/spa-loading-template.html

@@ -1,39 +1,61 @@
-<div class="loader"></div>
-<style>
-.loader {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 50px;
-  height: 50px;
-  box-sizing: border-box;
-  border: solid 5px transparent;
-  border-top-color: #1669bb;
-  border-left-color: #1669bb;
-  border-bottom-color: #efefef;
-  border-right-color: #efefef;
-  border-radius: 50%;
-  -webkit-animation: loader 400ms linear infinite;
-  animation: loader 400ms linear infinite;
-}
+<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;
+    }
 
-@-webkit-keyframes loader {
-  0% {
-    -webkit-transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-@keyframes loader {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-</style>
+    .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-page-meta.d.ts

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

package/app/utils/parseSpecialCharacters.ts

@@ -0,0 +1,25 @@
+/**
+ * Parses a string to decode HTML entities and remove HTML tags.
+ *
+ * @param text The string to parse.
+ * @param fallback The fallback text to return if the input is null or undefined.
+ * @returns The sanitized string.
+ */
+export function parseSpecialCharacters(text: string | undefined | null, fallback = 'N/A'): string {
+  // Return fallback text if the input is null or undefined.
+  if (text === null || text === undefined) {
+    return fallback
+  }
+
+  const inputText = String(text)
+
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(inputText, 'text/html')
+
+    return doc.body.textContent || fallback
+  } catch (error) {
+    console.error(`Error parsing special characters in: ${inputText}`, error)
+    return fallback
+  }
+}

package/app/utils/setBreadcrumbs.ts

@@ -0,0 +1,5 @@
+export function setBreadcrumbs(breadcrumbs: ConnectBreadcrumb[]) {
+  const route = useRoute()
+  // @ts-expect-error - Type instantiation is excessively deep and possibly infinite.
+  route.meta.breadcrumbs = breadcrumbs
+}

package/i18n/locales/en-CA.ts

@@ -54,10 +54,11 @@ export default {
     }
   },
   test: {
-    i18nBold: {
+    i18n: {
       strong: 'This should have {boldStart} bold {boldEnd} text',
       strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}',
-      italic: 'Italic test {italicStart} goes here {italicEnd}.'
+      italic: 'Italic test {italicStart} goes here {italicEnd}.',
+      computed: 'This text will be updated. Updated {boldStart}{count}{boldEnd} times.'
     }
   }
 }

package/modules/assets/runtime/assets/core-tw.css

@@ -17,8 +17,8 @@
   --ui-lineDark: #6F7780;
   --ui-lineLight: var(--color-gray-300);
   --ui-lineSpecial: #899EB2;
-  --ui-markBlue: #1A5A96;
-  --ui-markBlueHover: #0000EE;
+  --ui-mark: #1A5A96;
+  --ui-markHover: #0000EE;
   --ui-neutral: var(--color-gray-700);
   --ui-neutralDark: var(--color-gray-900);
   --ui-neutralLight: #757575;
@@ -45,8 +45,8 @@
   --ui-lineDark: #6F7780;
   --ui-lineLight: var(--color-gray-300);
   --ui-lineSpecial: #899EB2;
-  --ui-markBlue: #1A5A96;
-  --ui-markBlueHover: #0000EE;
+  --ui-mark: #1A5A96;
+  --ui-markHover: #0000EE;
   --ui-neutral: var(--color-gray-700);
   --ui-neutralDark: var(--color-gray-900);
   --ui-neutralLight: #757575;
@@ -67,14 +67,16 @@
   /* widths */
   --container-bcGovMd: 1020px;
   --container-bcGovLg: 1360px;
-  --container-bcGovInput: 600px;
+  --container-input: 600px;
 
   /* list style types */
   --marker-alpha: lower-alpha;
   --marker-upper-alpha: upper-alpha;
 
   /* box shadow */
-  --shadow-bcGovInput: inset 0 -2px 0 0px #1669bb;
+  --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
+  --shadow-inputFocus: inset 0 -2px 0 0px var(--ui-primary);
+  --shadow-inputError: inset 0 -2px 0 0px var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -250,10 +252,10 @@ body {
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-3 text-neutralDark transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
   }
 }

package/nuxt.config.ts

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-10',
 
   imports: {
-    dirs: ['interfaces']
+    dirs: ['interfaces', 'types']
   },
 
   modules: [
@@ -85,10 +85,28 @@ export default defineNuxtConfig({
     clientBundle: {
       icons: [
         'mdi:arrow-left',
+        'mdi:arrow-right',
         'mdi:info-outline',
         'mdi:information',
         'mdi:web',
-        'mdi:check'
+        'mdi:check',
+        'mdi:chevron-double-left',
+        'mdi:chevron-double-right',
+        'mdi:menu-down',
+        'mdi:menu-left',
+        'mdi:menu-right',
+        'mdi:menu-up',
+        'mdi:close',
+        'mdi:dots-horizontal',
+        'mdi:open-in-new',
+        'mdi:file',
+        'mdi:folder',
+        'mdi:folder-open',
+        'mdi:loading',
+        'mdi:minus',
+        'mdi:plus',
+        'mdi:magnify',
+        'mdi:upload'
       ]
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -13,19 +13,20 @@
     "launchdarkly-vue-client-sdk": "^2.4.1",
     "@vueuse/nuxt": "^13.5.0",
     "@vueuse/core": "^13.5.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "maska": "^3.1.1"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@vitest/coverage-v8": "^3.2.4",
     "dotenv": "^17.2.0",
-    "nuxt": "4.0.0",
+    "nuxt": "^4.0.0",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.3",
     "@types/lodash-es": "^4.17.12",
-    "@sbc-connect/eslint-config": "0.0.5",
     "@sbc-connect/playwright-config": "0.0.4",
-    "@sbc-connect/vitest-config": "0.0.5"
+    "@sbc-connect/vitest-config": "0.0.5",
+    "@sbc-connect/eslint-config": "0.0.5"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",