@sbc-connect/nuxt-forms 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sbc-connect/nuxt-forms
 
+## 0.6.0
+
+### Minor Changes
+
+- [#137](https://github.com/bcgov/connect-nuxt/pull/137) [`9c10812`](https://github.com/bcgov/connect-nuxt/commit/9c10812d8ecde646eb185310376cabd3319a414d) Thanks [@deetz99](https://github.com/deetz99)! - ConnectFieldset and ConnectFormFieldWrapper: update padding to be configurable
+
+- [#136](https://github.com/bcgov/connect-nuxt/pull/136) [`7e3a970`](https://github.com/bcgov/connect-nuxt/commit/7e3a9701ddd5304851c8d55c9fc940b2da656cbf) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Misc typing and e2e test fixes
+
+### Patch Changes
+
+- Updated dependencies [[`7e3a970`](https://github.com/bcgov/connect-nuxt/commit/7e3a9701ddd5304851c8d55c9fc940b2da656cbf)]:
+  - @sbc-connect/nuxt-base@0.7.0
+
 ## 0.5.0
 
 ### Minor Changes

package/app/components/Connect/Fieldset.vue

@@ -3,7 +3,8 @@ import type { FormError } from '@nuxt/ui'
 
 const {
   orientation = 'horizontal',
-  bodyVariant = 'none'
+  bodyVariant = 'none',
+  paddingClass = 'x-default'
 } = defineProps<{
   label?: string
   description?: string
@@ -11,6 +12,7 @@ const {
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
   bodyVariant?: FieldsetBodyVariant
+  paddingClass?: 'x-default' | 'xy-default' | string
 }>()
 
 const id = useId()
@@ -19,17 +21,24 @@ const descriptionId = id + '-description'
 
 const bodyClassMap: Record<FieldsetBodyVariant, string> = {
   none: '',
-  card: 'p-4 sm:p-6 bg-white rounded shadow-xs'
+  card: 'bg-white rounded shadow-xs'
 }
 
 const bodyClass = bodyClassMap[bodyVariant]
+
+const padding = paddingClass === 'x-default'
+  ? 'px-4 sm:px-8'
+  : paddingClass === 'xy-default'
+    ? 'py-6 px-4 sm:py-10 sm:px-8'
+    : paddingClass
 </script>
 
 <template>
   <fieldset :aria-labelledby="legendId" :aria-describedby="descriptionId">
     <div
       :class="[
-        'py-6 px-4 sm:py-10 sm:px-8 flex gap-4 sm:gap-6',
+        'flex gap-4 sm:gap-6',
+        bodyVariant === 'none' ? padding : '',
         orientation === 'horizontal' ? 'flex-col sm:flex-row' : 'flex-col',
         (error && bodyVariant === 'none') ? 'border-error border-l-3' : 'border-transparent border-l-3',
       ]"
@@ -65,10 +74,7 @@ const bodyClass = bodyClassMap[bodyVariant]
 
       <div
         class="flex-1"
-        :class="[
-          bodyClass,
-          (error && bodyVariant === 'card') ? 'border-error border-l-3' : 'border-transparent border-l-3',
-        ]"
+        :class="bodyClass"
       >
         <slot />
       </div>

package/app/components/Connect/Form/FieldWrapper.vue

@@ -2,19 +2,28 @@
 import type { FormError } from '@nuxt/ui'
 
 const {
-  orientation = 'horizontal'
+  orientation = 'horizontal',
+  paddingClass = 'x-default'
 } = defineProps<{
   label: string
   error?: FormError | boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
+  paddingClass?: 'x-default' | 'xy-default' | string
 }>()
+
+const padding = paddingClass === 'x-default'
+  ? 'px-4 sm:px-8'
+  : paddingClass === 'xy-default'
+    ? 'py-6 px-4 sm:py-10 sm:px-8'
+    : paddingClass
 </script>
 
 <template>
   <div
     :class="[
-      'py-6 px-4 sm:py-10 sm:px-8 flex gap-4 sm:gap-6',
+      'flex gap-4 sm:gap-6',
+      padding,
       orientation === 'horizontal' ? 'flex-col sm:flex-row' : 'flex-col',
       error ? 'border-error border-l-3' : 'border-transparent border-l-3',
     ]"

package/app/components/Connect/Form/Phone/CountryCode.vue

@@ -40,13 +40,17 @@ const _countryListOptions = countryList.customList(
   'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
 
 const manualInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
   selectedCountry.value = {
-    callingCode: event.target.value
+    callingCode: target.value
   }
 }
 
 const countryListOptions: Array<PhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
+  const parts = (_countryListOptions[key] ?? '').split(',')
+  const callingCode = parts[0] ?? ''
+  const nameEn = parts[1]
+  const nameLocal = parts[2]
   return {
     iso2: key,
     callingCode,
@@ -90,9 +94,9 @@ onMounted(() => {
   <UInputMenu
     v-model="selectedCountry"
     :items="countryListOptions"
-    :color="selectedCountry?.callingCode ? 'primary' : ''"
+    :color="selectedCountry?.callingCode ? 'primary' : undefined"
     :search="search"
-    :label-key="''"
+    :label-key="undefined"
     :trailing-icon="'i-mdi-chevron-down'"
     class="cursor-pointer"
     :aria-required="true"
@@ -106,18 +110,18 @@ onMounted(() => {
           :tooltip-text="selectedCountry?.nameEn"
           :country-code-iso2letter="selectedCountry?.iso2"
         />
-        <span class="ml-2 mt-2 truncate">{{ modelValue.label }}</span>
+        <span class="ml-2 mt-2 truncate">{{ (modelValue as PhoneCountry)?.label }}</span>
       </div>
     </template>
 
     <template #item="{ item }">
-      <div class="flex items-end cursor-pointer">
+      <div v-if="item" class="flex items-end cursor-pointer">
         <CountryFlag
-          :tooltip-text="item.nameLocal"
-          :country-code-iso2letter="item.iso2"
+          :tooltip-text="(item as PhoneCountry).nameLocal"
+          :country-code-iso2letter="(item as PhoneCountry).iso2 ?? ''"
         />
-        <span class="ml-2 truncate">{{ item.label }}</span>
-        <span class="sr-only">{{ item.nameLocal }}</span>
+        <span class="ml-2 truncate">{{ (item as PhoneCountry).label }}</span>
+        <span class="sr-only">{{ (item as PhoneCountry).nameLocal }}</span>
       </div>
     </template>
   </UInputMenu>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -18,7 +18,7 @@
   "dependencies": {
     "country-codes-list": "2.0.0",
     "vue-country-flag-next": "2.3.2",
-    "@sbc-connect/nuxt-base": "0.6.1"
+    "@sbc-connect/nuxt-base": "0.7.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",