@sbc-connect/nuxt-forms 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [[`602360a`](https://github.com/bcgov/connect-nuxt/commit/602360a628742ffe8957209bbe38eff1663a0851)]:
+  - @sbc-connect/nuxt-base@0.1.13
+
+## 0.1.13
+
+### Patch Changes
+
+- [#50](https://github.com/bcgov/connect-nuxt/pull/50) [`19e3a00`](https://github.com/bcgov/connect-nuxt/commit/19e3a00a8350f8f02f674d10e1d572c909ad90c5) Thanks [@deetz99](https://github.com/deetz99)! - Minor CSS updates
+
+  - update footer link divider colour
+  - update formfield help/error placeholder spacer
+  - fix fieldset orientation
+
+  issue: bcgov/entity#30434
+
+- Updated dependencies [[`19e3a00`](https://github.com/bcgov/connect-nuxt/commit/19e3a00a8350f8f02f674d10e1d572c909ad90c5)]:
+  - @sbc-connect/nuxt-base@0.1.12
+
 ## 0.1.12
 
 ### Patch Changes

package/README.md

@@ -15,7 +15,7 @@ This package provides a library of reusable form components, integrated validati
 - Pre-built components for common inputs like addresses, postal codes, names, emails and phone numbers.
 - Reusable Zod schemas to manage the input validations.
 
-For detailed usage and API documentation, please see the [Forms Layer Docs](../../../docs/packages/layers/forms/intro.md).
+For detailed usage and API documentation, please see the [Forms Layer Docs](../../../docs/packages/layers/forms/overview.md).
 
 ## Usage
 
@@ -38,7 +38,20 @@ defineNuxtConfig({
 ```
 
 ## Environment Variables
-This layer does not require any specific environment variables to be set.
+This project requires certain environment variables to be set to run correctly.
+
+Create a file named .env in the root of the project.
+
+Copy the contents of the .env.example file into your new .env file.
+
+### Local Development
+Copy the contents of the **.env.example** file into your new .env file.
+
+### Production Environments
+> [!IMPORTANT]
+> The values for staging and production environments are managed securely and should not be stored in this file.
+
+To obtain the correct values for a production build or deployment, please contact the Connect Platform Team.
 
 ## Contributing
-We welcome contributions to this package! Please see the main [suspicious link removed] for information on our branching strategy, commit conventions, and pull request process.
+We welcome contributions to this package! Please see the main [Contribution Guidelines](../../../CONTRIBUTING.md) for information on our branching strategy, commit conventions, and pull request process.

package/app/components/Connect/Fieldset.vue

@@ -10,33 +10,38 @@ const {
   orientation?: 'vertical' | 'horizontal'
 }>()
 // TODO: figure out why text-error doesnt work on the legend text
+
+const legendId = useId()
 </script>
 
 <template>
-  <fieldset
-    class="flex"
-    :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
-  >
-    <legend
-      class="text-base text-neutral-highlighted font-bold pb-6"
-      :class="[
-        { 'text-red-600': !!error },
-        { 'w-full sm:w-1/4 pb-0': orientation === 'horizontal' },
-      ]"
+  <fieldset :aria-labelledby="legendId">
+    <div
+      class="flex"
+      :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
     >
-      <div class="flex flex-wrap gap-4">
-        <span>{{ label }}</span>
-        <span
-          v-if="!!error && showErrorMsg"
-          class="font-normal"
-        >
-          {{ error.message }}
-        </span>
-      </div>
-    </legend>
+      <legend
+        :id="legendId"
+        class="text-base text-neutral-highlighted font-bold"
+        :class="[
+          { 'text-red-600': !!error },
+          { 'w-full sm:w-1/4 pb-0': orientation === 'horizontal' },
+        ]"
+      >
+        <div class="flex flex-wrap gap-4">
+          <span>{{ label }}</span>
+          <span
+            v-if="!!error && showErrorMsg"
+            class="font-normal"
+          >
+            {{ error.message }}
+          </span>
+        </div>
+      </legend>
 
-    <div class="flex-1">
-      <slot />
+      <div class="flex-1">
+        <slot />
+      </div>
     </div>
   </fieldset>
 </template>

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

@@ -7,6 +7,7 @@ defineProps<{
   autofocus?: boolean
   mask?: string
   disabled?: boolean
+  help?: string
 }>()
 
 const model = defineModel<string>({ required: true })
@@ -15,6 +16,7 @@ const model = defineModel<string>({ required: true })
 <template>
   <UFormField
     :name
+    :help
     class="grow flex-1"
   >
     <template #default="{ error }">
@@ -28,7 +30,7 @@ const model = defineModel<string>({ required: true })
         :disabled
       />
       <div
-        v-if="!$slots.help && !error"
+        v-if="!help && !error"
         class="h-4 mt-1"
       />
     </template>

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

@@ -6,6 +6,7 @@ defineProps<{
   required?: boolean
   autofocus?: boolean
   disabled?: boolean
+  help?: string
 }>()
 
 const model = defineModel<string>({ required: true })
@@ -14,6 +15,7 @@ const model = defineModel<string>({ required: true })
 <template>
   <UFormField
     :name
+    :help
     class="grow flex-1"
   >
     <template #default="{ error }">
@@ -27,7 +29,7 @@ const model = defineModel<string>({ required: true })
         :disabled
       />
       <div
-        v-if="!$slots.help && !error"
+        v-if="!help && !error"
         class="h-4 mt-1"
       />
     </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "zod": "^4.0.17",
-    "@sbc-connect/nuxt-base": "0.1.11"
+    "@sbc-connect/nuxt-base": "0.1.13"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",