@sbc-connect/nuxt-forms 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- [#129](https://github.com/bcgov/connect-nuxt/pull/129) [`93c5650`](https://github.com/bcgov/connect-nuxt/commit/93c5650be9a6b48e51d876d522f168d885d006c4) Thanks [@deetz99](https://github.com/deetz99)! - ConnectFieldset and ConnectFormFieldWrapper: Update error styling to be border only, remove title error styling, add padding to body, make orientation horizontal by default.
+
 ## 0.4.1
 
 ### Patch Changes

package/app/components/Connect/Fieldset.vue

@@ -2,17 +2,18 @@
 import type { FormError } from '@nuxt/ui'
 
 const {
-  orientation = 'vertical',
-  bodyVariant = 'none'
+  orientation = 'horizontal',
+  bodyVariant = 'none',
+  paddingClass = 'x-default'
 } = defineProps<{
   label?: string
   description?: string
-  error?: FormError
+  error?: FormError | boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
   bodyVariant?: FieldsetBodyVariant
+  paddingClass?: 'x-default' | 'xy-default' | string
 }>()
-// TODO: figure out why text-error doesnt work on the legend text
 
 const id = useId()
 const legendId = id + '-legend'
@@ -20,17 +21,27 @@ 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="flex"
-      :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
+      :class="[
+        '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',
+      ]"
     >
       <div
         class="flex flex-col gap-1"
@@ -41,14 +52,11 @@ const bodyClass = bodyClassMap[bodyVariant]
           class="text-base text-neutral-highlighted font-bold"
         >
           <slot name="label">
-            <div
-              class="flex flex-wrap gap-4"
-              :class="[{ 'text-red-600': !!error }]"
-            >
+            <div class="flex flex-wrap gap-4">
               <span>{{ label }}</span>
               <span
-                v-if="!!error && showErrorMsg"
-                class="font-normal"
+                v-if="error && typeof error === 'object' && 'message' in error && showErrorMsg"
+                class="font-normal text-error"
               >
                 {{ error.message }}
               </span>

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

@@ -2,34 +2,42 @@
 import type { FormError } from '@nuxt/ui'
 
 const {
-  orientation = 'vertical'
+  orientation = 'horizontal',
+  paddingClass = 'x-default'
 } = defineProps<{
   label: string
-  error?: FormError
+  error?: FormError | boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
+  paddingClass?: 'x-default' | 'xy-default' | string
 }>()
-// TODO: figure out why text-error doesnt work on the legend text
+
+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="flex"
-    :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
+    :class="[
+      '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',
+    ]"
   >
     <span
       aria-hidden="true"
       class="text-base text-neutral-highlighted font-bold"
       :class="{ 'w-full sm:basis-1/4': orientation === 'horizontal' }"
     >
-      <div
-        class="flex flex-wrap gap-4"
-        :class="{ 'text-red-600': !!error }"
-      >
+      <div class="flex gap-2.5" :class="orientation === 'horizontal' ? 'flex-col' : 'flex-wrap'">
         <span>{{ label }}</span>
         <span
-          v-if="!!error && showErrorMsg"
-          class="font-normal"
+          v-if="error && typeof error === 'object' && 'message' in error && showErrorMsg"
+          class="font-normal text-error"
         >
           {{ error.message }}
         </span>

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.4.1",
+  "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",