@sbc-connect/nuxt-base 0.1.21 → 0.1.23

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sbc-connect/nuxt-base
 
+## 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
+
+- [#75](https://github.com/bcgov/connect-nuxt/pull/75) [`3dec6d9`](https://github.com/bcgov/connect-nuxt/commit/3dec6d92101915d2253cb177c38acf2a2e534fc1) Thanks [@deetz99](https://github.com/deetz99)! - Update ConnectInput modelValue type to match UInput
+
 ## 0.1.21
 
 ### Patch Changes

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/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/components/Connect/Input.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const model = defineModel<string>({ required: true })
+const model = defineModel<string | number | bigint | null | undefined>({ required: true })
 
 defineProps<{
   id: string

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/package.json

@@ -1,29 +1,30 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "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"