@sbc-connect/nuxt-base 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-base
 
+## 0.7.3
+
+### Patch Changes
+
+- [#155](https://github.com/bcgov/connect-nuxt/pull/155) [`e4ad236`](https://github.com/bcgov/connect-nuxt/commit/e4ad2360c255173e20b7f6d384de2a9313ce747d) Thanks [@deetz99](https://github.com/deetz99)! - Custom CSS classes for x and xy default padding and left error border for container elements.
+
+## 0.7.2
+
+### Patch Changes
+
+- [#149](https://github.com/bcgov/connect-nuxt/pull/149) [`467e679`](https://github.com/bcgov/connect-nuxt/commit/467e679f8bf4b2f3b9ec2294fd28a2a6c5ef3dba) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
 ## 0.7.1
 
 ### Patch Changes

package/app/assets/css/connect-base-tw.css

@@ -90,9 +90,10 @@
   --marker-upper-alpha: upper-alpha;
 
   /* box shadow */
-  --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
-  --shadow-input-focus: inset 0 -2px 0 0px var(--ui-primary);
-  --shadow-input-error: inset 0 -2px 0 0px var(--ui-error);
+  /* bottom neutral/focused/error border for input elements */
+  --shadow-input: inset 0 -1px 0 0 var(--ui-neutral);
+  --shadow-input-focus: inset 0 -2px 0 0 var(--ui-primary);
+  --shadow-input-error: inset 0 -2px 0 0 var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -274,4 +275,29 @@ body {
   .floating-label-textarea {
     @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;
   }
+
+  /* Standard container padding */
+  .padding-x-default {
+    @apply px-4 sm:px-7.5
+  }
+  
+  .padding-xy-default {
+    @apply py-6 px-4 sm:py-10 sm:px-7.5
+  }
+
+  /* left error border for section elements */
+  /* Psuedo element required to be visible so slot content does not cover it */
+  .shadow-section-error {
+    position: relative;
+  }
+
+  .shadow-section-error::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    background-color: var(--ui-error);
+    pointer-events: none;
+    z-index: 1;
+  }
 }

package/app/components/Connect/Input.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { InputProps } from '@nuxt/ui'
 
-const props = defineProps<{
+const {
+  id,
+  autoFocus = false
+} = defineProps<{
   id: string
   label: string
   mask?: string
@@ -9,27 +12,34 @@ const props = defineProps<{
   autoFocus?: boolean
 }>()
 
-const model = defineModel<string | number | bigint | null | undefined>({ required: true })
+const model = defineModel<InputProps['modelValue']>({ required: true })
+const inputRef = useTemplateRef('input-ref')
 
 // Inject props
 const injectedProps = inject<InputProps>(
-  `UInput-props${props.id ? `-${props.id}` : ''}`,
+  `UInput-props${id ? `-${id}` : ''}`,
   {} as InputProps
 )
 
 // Inject slots
 const injectedSlots = inject<{ [key: string]: VNode }>(
-  `UInput-slots${props.id ? `-${props.id}` : ''}`,
+  `UInput-slots${id ? `-${id}` : ''}`,
   {}
 )
+
+defineExpose({ input: inputRef })
+
+// vue ignore reason - type mismatch between model and defaultValue prop caused by strict generics
 </script>
 
 <template>
+  <!-- @vue-ignore -->
   <UInput
+    ref="input-ref"
     v-bind="{
       id,
       disabled,
-      autoFocus,
+      autofocus: autoFocus,
       ...injectedProps, // injected props will default when provided
     }"
     v-model.trim="model"

package/app/components/Connect/InputDate.vue

@@ -46,17 +46,14 @@ const calendarRef = useTemplateRef('calendar-ref')
 const inputRef = useTemplateRef<InstanceType<typeof ConnectInput>>('input-ref')
 
 function focusCalendar() {
-  const button = (calendarRef.value as any).$el.querySelector('button')
+  const button = (calendarRef.value as any)?.$el?.querySelector('button')
   if (button) {
     (button as HTMLButtonElement).focus()
   }
 }
 
 function focusInput() {
-  const input = (inputRef.value as any).$el.querySelector('input')
-  if (input) {
-    (input as HTMLInputElement).focus()
-  }
+  inputRef.value?.input?.inputRef?.focus()
   open.value = false
   emit('blur')
 }

package/app/components/Connect/LocaleSelect.vue

@@ -4,7 +4,7 @@ import type { LocaleObject } from '@nuxtjs/i18n'
 
 const { locale, locales, setLocale } = useI18n()
 
-const items = computed((): DropdownMenuItem[] => {
+const items = computed((): DropdownMenuItem[][] => {
   const options = locales.value.map((loc: LocaleObject) => {
     const isCurrentLocal = loc.code === locale.value
     return {
@@ -12,7 +12,7 @@ const items = computed((): DropdownMenuItem[] => {
       icon: isCurrentLocal ? 'i-mdi-check' : '',
       onSelect: () => setLocale(loc.code),
       class: isCurrentLocal ? 'bg-gray-100' : 'pl-8',
-      color: isCurrentLocal ? 'primary' : 'neutral'
+      color: isCurrentLocal ? 'primary' as const : 'neutral' as const
     }
   })
   return [options]

package/app/components/Connect/Textarea.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const model = defineModel<null | string | number | undefined>({ required: true })
+import type { TextareaProps } from '@nuxt/ui'
+
+const model = defineModel<Exclude<TextareaProps['modelValue'], null>>({ required: true })
 
 defineProps<{
   id: string

package/app/utils/setBreadcrumbs.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 export function setBreadcrumbs(breadcrumbs: ConnectBreadcrumb[]) {
   const route = useRoute()
-  // @ts-expect-error - Type instantiation is excessively deep and possibly infinite.
+  // @ts-ignore - Type instantiation is excessively deep and possibly infinite.
+  // ignore instead of expect error due to local TS vs typecheck variance
   route.meta.breadcrumbs = breadcrumbs
 }

package/i18n/locales/fr-CA.ts

@@ -28,9 +28,15 @@ export default {
       goBack: 'Retour',
       home: 'Accueil',
       localeSelect: 'Sélectionnez une langue, langue courante: Français',
-      privacy: 'Confidentialité'
+      privacy: 'Confidentialité',
+      whatsNew: 'Nouveautés',
+      whatsNewAria: 'Nouveautés, {count} non lues',
+      whatsNewSlideover: 'Nouveautés — Registres de la CB'
     },
-    text: {}
+    text: {
+      whatsNewSlideoverDescription: ' ',
+      whatsNewSlideoverEmpty: 'Aucune nouveauté.'
+    }
   },
   btn: {
     bcRegHome: 'Accueil des Registres de la CB',

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "1.2.3",
-    "@nuxt/ui": "4.3.0",
-    "@nuxtjs/i18n": "10.2.1",
-    "@vueuse/core": "14.1.0",
-    "@vueuse/nuxt": "14.1.0",
-    "dompurify": "3.3.1",
-    "es-toolkit": "1.43.0",
-    "launchdarkly-vue-client-sdk": "2.4.1",
+    "@nuxt/ui": "4.6.0",
+    "@nuxtjs/i18n": "10.2.4",
+    "@vueuse/core": "14.2.1",
+    "@vueuse/nuxt": "14.2.1",
+    "dompurify": "3.3.3",
+    "es-toolkit": "1.45.1",
+    "launchdarkly-vue-client-sdk": "2.5.0",
     "luxon": "3.7.2",
     "maska": "3.2.0",
-    "zod": "4.1.12"
+    "zod": "4.3.6"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.11.0",
+    "@axe-core/playwright": "4.11.1",
     "@types/luxon": "3.7.1",
-    "dotenv": "17.2.3",
+    "dotenv": "17.3.1",
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "vue-tsc": "3.2.1",
-    "@sbc-connect/playwright-config": "0.1.1",
-    "@sbc-connect/vitest-config": "0.1.0",
-    "@sbc-connect/eslint-config": "0.0.8"
+    "vue-tsc": "3.2.5",
+    "@sbc-connect/eslint-config": "0.0.8",
+    "@sbc-connect/vitest-config": "0.1.1",
+    "@sbc-connect/playwright-config": "0.1.1"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",