@sbc-connect/nuxt-forms 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sbc-connect/nuxt-forms
 
+## 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
+
+- Updated dependencies [[`8cc8cc0`](https://github.com/bcgov/connect-nuxt/commit/8cc8cc09aad741dc841a864998129c6ac5a6af2f)]:
+  - @sbc-connect/nuxt-base@0.6.1
+
 ## 0.4.0
 
 ### Minor Changes

package/app/components/Connect/Fieldset.vue

@@ -2,17 +2,16 @@
 import type { FormError } from '@nuxt/ui'
 
 const {
-  orientation = 'vertical',
+  orientation = 'horizontal',
   bodyVariant = 'none'
 } = defineProps<{
   label?: string
   description?: string
-  error?: FormError
+  error?: FormError | boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
   bodyVariant?: FieldsetBodyVariant
 }>()
-// TODO: figure out why text-error doesnt work on the legend text
 
 const id = useId()
 const legendId = id + '-legend'
@@ -29,8 +28,11 @@ const bodyClass = bodyClassMap[bodyVariant]
 <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="[
+        'py-6 px-4 sm:py-10 sm:px-8 flex gap-4 sm:gap-6',
+        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 +43,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>
@@ -66,7 +65,10 @@ const bodyClass = bodyClassMap[bodyVariant]
 
       <div
         class="flex-1"
-        :class="bodyClass"
+        :class="[
+          bodyClass,
+          (error && bodyVariant === 'card') ? 'border-error border-l-3' : 'border-transparent border-l-3',
+        ]"
       >
         <slot />
       </div>

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

@@ -2,34 +2,33 @@
 import type { FormError } from '@nuxt/ui'
 
 const {
-  orientation = 'vertical'
+  orientation = 'horizontal'
 } = defineProps<{
   label: string
-  error?: FormError
+  error?: FormError | boolean
   showErrorMsg?: boolean
   orientation?: 'vertical' | 'horizontal'
 }>()
-// TODO: figure out why text-error doesnt work on the legend text
 </script>
 
 <template>
   <div
-    class="flex"
-    :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
+    :class="[
+      'py-6 px-4 sm:py-10 sm:px-8 flex gap-4 sm:gap-6',
+      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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -12,13 +12,13 @@
     "typescript": "5.9.3",
     "vue-tsc": "3.2.1",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.1.0",
+    "@sbc-connect/playwright-config": "0.1.1",
     "@sbc-connect/vitest-config": "0.1.0"
   },
   "dependencies": {
     "country-codes-list": "2.0.0",
     "vue-country-flag-next": "2.3.2",
-    "@sbc-connect/nuxt-base": "0.6.0"
+    "@sbc-connect/nuxt-base": "0.6.1"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",