@sbc-connect/nuxt-base 0.1.22 → 0.1.24

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.24
+
+### Patch Changes
+
+- [#80](https://github.com/bcgov/connect-nuxt/pull/80) [`0615542`](https://github.com/bcgov/connect-nuxt/commit/06155422d0a8d61ee862bb3483330610b4a9434d) Thanks [@deetz99](https://github.com/deetz99)! - feat: Move button control to base and handle loading state internally
+
+## 0.1.23
+
+### Patch Changes
+
+- [#77](https://github.com/bcgov/connect-nuxt/pull/77) [`86ec3d0`](https://github.com/bcgov/connect-nuxt/commit/86ec3d03baa7dae3137f6c4c96a328f13eb46ce5) Thanks [@deetz99](https://github.com/deetz99)! - feat: Allow different element in ConnectI18nHelper and sanitize html.
+
+- [#77](https://github.com/bcgov/connect-nuxt/pull/77) [`86ec3d0`](https://github.com/bcgov/connect-nuxt/commit/86ec3d03baa7dae3137f6c4c96a328f13eb46ce5) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
+- [#77](https://github.com/bcgov/connect-nuxt/pull/77) [`86ec3d0`](https://github.com/bcgov/connect-nuxt/commit/86ec3d03baa7dae3137f6c4c96a328f13eb46ce5) Thanks [@deetz99](https://github.com/deetz99)! - fix: reactivity issue in ConnectAddressDisplay component.
+
 ## 0.1.22
 
 ### Patch Changes

package/app/app.config.ts

@@ -63,9 +63,6 @@ export default defineAppConfig({
       ]
     },
     button: {
-      slots: {
-        base: 'cursor-pointer'
-      },
       compoundVariants: [
         {
           color: 'primary',

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

@@ -54,7 +54,9 @@ const getAddressDisplayParts = (
   ].filter(val => !!val && val !== ',')
 }
 
-const addressDisplay = getAddressDisplayParts(props.address, props.separateCity, props.textDecor, props.omitCountry)
+const addressDisplay = computed<string[]>(() =>
+  getAddressDisplayParts(props.address, props.separateCity, props.textDecor, props.omitCountry)
+)
 </script>
 
 <template>

package/app/components/Connect/ButtonControl/Buttons.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{ buttons: ConnectButton[], position: 'left' | 'right' }>()
+
+// remove alertText and removeAlertSpacing from being added to button html attrs
+const removeButtonAttrs = (button: ConnectButton) => {
+  const newButton = { ...button }
+  delete newButton['alertText']
+  delete newButton['removeAlertSpacing']
+  return newButton
+}
+</script>
+
+<template>
+  <div
+    v-for="(button, i) in buttons"
+    :key="`${position}-button-${i}`"
+    data-testid="button-wrapper"
+  >
+    <UButton
+      class="max-w-fit px-7 py-3 mb-1"
+      v-bind="removeButtonAttrs(button)"
+    />
+    <p :class="['text-center', !button.removeAlertSpacing ? 'h-[1.25rem]' : '']">
+      <span v-if="button.alertText" class="text-error">{{ button.alertText }}</span>
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+
+const { buttonControl: meta } = useConnectButtonControl(stateKey)
+const buttonControl = computed(() => meta.value)
+const leftGroup = computed(() => buttonControl.value?.leftGroup || [])
+const rightGroup = computed(() => buttonControl.value?.rightGroup || [])
+const leftAlertText = computed(() => buttonControl.value?.leftGroup.alertText || undefined)
+const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText || undefined)
+</script>
+
+<template>
+  <div
+    class="@container"
+    data-testid="connect-button-control"
+  >
+    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-2">
+      <div>
+        <div
+          class="flex justify-center @3xl:justify-start"
+          data-testid="left-buttons"
+        >
+          <div
+            class="relative flex flex-col flex-wrap gap-4 justify-center"
+            :class="leftGroup.stacked ? '' : 'flex-row'"
+          >
+            <div
+              v-if="leftAlertText"
+              class="absolute flex flex-wrap justify-start bottom-1/3 right-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ leftAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="leftGroup.buttons" position="left" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="flex justify-center @3xl:justify-end"
+          data-testid="right-buttons"
+        >
+          <div
+            class="relative flex flex-col flex-wrap gap-4 justify-center"
+            :class="rightGroup.stacked ? '' : 'flex-row'"
+          >
+            <div
+              v-if="rightAlertText"
+              class="absolute flex flex-wrap justify-end bottom-1/3 left-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ rightAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="rightGroup.buttons" position="right" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="bg-shade-inverted pb-6 pt-10"
+    data-testid="connect-button-control-wrapper"
+  >
+    <div class="app-inner-container app-body">
+      <ConnectButtonControl :state-key="stateKey" />
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,26 @@
 <script setup lang="ts">
-const props = defineProps<{
+/* eslint-disable vue/no-v-html */
+/* eslint-disable vue/no-v-text-v-html-on-component */
+
+const {
+  translationPath,
+  as = 'span'
+} = defineProps<{
   translationPath: string
+  as?: 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'label'
+    | 'span'
+    | 'p'
+    | 'div'
+    | 'li'
+    | 'legend'
+    | 'strong'
+    | 'em'
 }>()
 
 const attrs = useAttrs()
@@ -14,11 +34,10 @@ const textToDisplay = computed(() => {
     italicStart: '<em>',
     italicEnd: '</em>'
   }
-  return t(props.translationPath, translationProps)
+  return t(translationPath, translationProps)
 })
 </script>
 
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <span v-html="textToDisplay" />
+  <component :is="as" v-html="$sanitize(textToDisplay)" />
 </template>

package/app/composables/useConnectButtonControl.ts

@@ -0,0 +1,146 @@
+const defaultOptions: ConnectButtonControlOptions = {
+  handleLoading: true,
+  clearAlertTextOnClick: true
+}
+
+export const useConnectButtonControl = (
+  stateKey: string = 'default-button-control',
+  opts: Partial<ConnectButtonControlOptions> = {}
+) => {
+  const options = {
+    ...defaultOptions,
+    ...opts
+  }
+
+  const buttonControl = useState<ConnectButtonControl>(stateKey, () => ({
+    leftGroup: { buttons: [] },
+    rightGroup: { buttons: [] }
+  }))
+
+  const forEachButton = (update: (button: ConnectButton, group: 'left' | 'right', index: number) => void) => {
+    buttonControl.value.leftGroup?.buttons?.forEach((btn, index) => update(btn, 'left', index))
+    buttonControl.value.rightGroup?.buttons?.forEach((btn, index) => update(btn, 'right', index))
+  }
+
+  const forEachGroup = (update: (group: ConnectButtonGroup) => void) => {
+    if (buttonControl.value.leftGroup) {
+      update(buttonControl.value.leftGroup)
+    }
+    if (buttonControl.value.rightGroup) {
+      update(buttonControl.value.rightGroup)
+    }
+  }
+
+  async function setAlertText(text?: string, group?: 'left' | 'right', index?: number) {
+    forEachGroup(group => group.alertText = undefined)
+    forEachButton(btn => btn.alertText = undefined)
+
+    if (text && group !== undefined) {
+      await nextTick()
+
+      const buttonGroup = group === 'left' ? buttonControl.value.leftGroup : buttonControl.value.rightGroup
+
+      if (index !== undefined) {
+        const button = buttonGroup.buttons[index]
+        if (button) {
+          button.alertText = text
+        }
+      } else {
+        buttonGroup.alertText = text
+      }
+    }
+  }
+
+  const handleClick = (
+    originalClick: ConnectButton['onClick'],
+    group: 'left' | 'right',
+    index: number
+  ) => {
+    if (!originalClick || typeof originalClick !== 'function') {
+      return undefined
+    }
+
+    return async () => {
+      try {
+        if (options.clearAlertTextOnClick) {
+          await setAlertText(undefined)
+        }
+
+        if (options.handleLoading) {
+          const clickedButton = buttonControl.value[group === 'left' ? 'leftGroup' : 'rightGroup']?.buttons[index]
+          if (!clickedButton) {
+            return
+          }
+
+          clickedButton.loading = true
+          forEachButton((button, btnGroup, btnIndex) => {
+            if (btnGroup !== group || btnIndex !== index) {
+              button.disabled = true
+            }
+          })
+        }
+
+        await (originalClick as () => Promise<void> | void)()
+      } catch (error) {
+        if (import.meta.env.DEV) {
+          console.error(`Error on button click. group: ${group} index: ${index} error: ${error}`)
+        }
+      } finally {
+        if (options.handleLoading) {
+          forEachButton((button) => {
+            button.loading = false
+            button.disabled = false
+          })
+        }
+      }
+    }
+  }
+
+  function setButtonControl(config: ConnectButtonControl) {
+    const updateGroup = (config: { buttons: ConnectButton[] }, group: 'left' | 'right') => {
+      if (!config || !config.buttons.length) {
+        return { ...config, buttons: [] }
+      }
+      return {
+        ...config,
+        buttons: config.buttons.map((button, index) => ({
+          ...button,
+          onClick: handleClick(button.onClick, group, index)
+        }))
+      }
+    }
+
+    buttonControl.value = {
+      leftGroup: updateGroup(config.leftGroup, 'left'),
+      rightGroup: updateGroup(config.rightGroup, 'right')
+    }
+  }
+
+  function handleButtonLoading(
+    loading: boolean,
+    group?: 'left' | 'right',
+    index?: number
+  ) {
+    if (!loading) {
+      forEachButton((button) => {
+        button.loading = false
+        button.disabled = false
+      })
+    } else if (group !== undefined && index !== undefined) {
+      forEachButton((button, btnGroup, btnIndex) => {
+        if (btnGroup === group && btnIndex === index) {
+          button.loading = true
+        } else {
+          button.disabled = true
+        }
+      })
+    }
+  }
+
+  return {
+    setButtonControl,
+    setAlertText,
+    handleButtonLoading,
+    buttonControl
+  }
+}

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

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

package/i18n/locales/en-CA.ts

@@ -60,7 +60,10 @@ export default {
       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}.',
-      computed: 'This text will be updated. Updated {boldStart}{count}{boldEnd} times.'
+      computed: 'This text will be updated. Updated {boldStart}{count}{boldEnd} times.',
+      sanitized: () => {
+        return "This is <strong>safe bold text</strong>, with a sanitized <script>alert('XSS')</script> script element."
+      }
     }
   }
 }

package/modules/base-assets/runtime/assets/connect-base-tw.css

@@ -276,14 +276,3 @@ body {
     @apply pointer-events-none absolute left-0 top-1 text-neutral 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 peer-aria-invalid:text-error;
   }
 }
-
-/* TODO: maybe delete this */
-/* Extra Utilities */
-/* This should be working out-of-the-box from Nuxt UI but isnt for some reason */
-/* https://ui.nuxt.com/getting-started/theme#neutral */
-/* .text-highlighted {
-  color: var(--color-gray-900);
-  @variant dark {
-    color: var(--color-gray-900);
-  }
-} */

package/nuxt.config.ts

@@ -120,10 +120,9 @@ export default defineNuxtConfig({
     }
   },
 
-  // removing this for now as its causing more issues
-  // typescript: {
-  //   includeWorkspace: true // fixes auto imports in tests
-  // },
+  typescript: {
+    includeWorkspace: true // allow auto imports in tests
+  },
 
   runtimeConfig: {
     public: {

package/package.json

@@ -1,29 +1,30 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
-    "@nuxt/ui": "^3.3.0",
-    "@nuxtjs/i18n": "^10.0.3",
-    "@vueuse/core": "^13.6.0",
-    "@vueuse/nuxt": "^13.6.0",
-    "dompurify": "^3.2.6",
-    "es-toolkit": "^1.39.8",
+    "@nuxt/ui": "^4.1.0",
+    "@nuxtjs/i18n": "^10.1.2",
+    "@vueuse/core": "14.0.0",
+    "@vueuse/nuxt": "14.0.0",
+    "dompurify": "^3.3.0",
+    "es-toolkit": "^1.41.0",
     "launchdarkly-vue-client-sdk": "^2.4.1",
-    "maska": "^3.2.0"
+    "maska": "^3.2.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@vitest/coverage-v8": "^3.2.4",
-    "dotenv": "^17.2.1",
-    "nuxt": "^4.0.2",
-    "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.4",
-    "@sbc-connect/eslint-config": "0.0.7",
+    "@axe-core/playwright": "4.11.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "dotenv": "17.2.3",
+    "nuxt": "4.1.3",
+    "typescript": "5.9.3",
+    "vue-tsc": "3.1.2",
+    "@sbc-connect/eslint-config": "0.0.8",
     "@sbc-connect/playwright-config": "0.0.7",
     "@sbc-connect/vitest-config": "0.0.6"
   },
@@ -39,6 +40,7 @@
     "test": "pnpm run test:unit; pnpm run test:e2e",
     "test:unit": "vitest run --passWithNoTests",
     "test:unit:watch": "vitest",
+    "test:unit:cov": "vitest --dir tests/unit --coverage",
     "test:e2e": "npx playwright test",
     "test:e2e:ui": "npx playwright test --ui",
     "typecheck": "npx nuxt typecheck"