@sbc-connect/nuxt-forms 0.1.7 → 0.1.9

package/.env.example

@@ -1 +1,11 @@
+# Web Urls
 NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+
+# API Urls
+# Status API
+NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
+NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
+
+# LaunchDarkly
+NUXT_PUBLIC_LD_CLIENT_ID=""

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.9
+
+### Patch Changes
+
+- [#37](https://github.com/bcgov/connect-nuxt/pull/37) [`216dff5`](https://github.com/bcgov/connect-nuxt/commit/216dff5eea1cf8459fc516dc8a1985f922e84533) Thanks [@kialj876](https://github.com/kialj876)! - Button Control Component and Form Layout bcgov/entity/29338
+
+## 0.1.8
+
+### Patch Changes
+
+- [#32](https://github.com/bcgov/connect-nuxt/pull/32) [`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f) Thanks [@kialj876](https://github.com/kialj876)! - Pay layer cleanup bcgov/entity#29337
+
+- Updated dependencies [[`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f)]:
+  - @sbc-connect/nuxt-base@0.1.8
+
 ## 0.1.7
 
 ### Patch Changes

package/app/components/Connect/ButtonControl/Buttons.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ buttons: ConnectButton[], position: 'left' | 'right' }>()
+</script>
+
+<template>
+  <div
+    v-for="(button, i) in buttons"
+    :key="`${position}-button-` + i"
+    data-testid="button-wrapper"
+  >
+    <UButton
+      class="max-w-fit px-7 py-3 mb-1"
+      v-bind="button"
+    />
+    <p :class="['text-center', !button.removeAlertSpacing ? 'h-[1.25rem]' : '']">
+      <span v-if="button.alertText" class="text-error">{{ button.alertText }}</span>
+    </p>
+  </div>
+</template>

package/app/components/Connect/ButtonControl/Index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const buttonControl = computed(() => useRoute().meta.buttonControl as ConnectButtonControl)
+const leftGroup = computed(() => buttonControl.value?.leftGroup || [])
+const rightGroup = computed(() => buttonControl.value?.rightGroup || [])
+const leftAlertText = computed(() => buttonControl.value?.leftGroup.alertText || undefined)
+const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText || undefined)
+</script>
+
+<template>
+  <div
+    class="@container"
+    data-testid="connect-button-control"
+  >
+    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-2">
+      <div>
+        <div
+          class="flex justify-center @3xl:justify-start"
+          data-testid="left-buttons"
+        >
+          <div
+            class="relative flex flex-col flex-wrap gap-4 justify-center"
+            :class="leftGroup.stacked ? '' : 'flex-row'"
+          >
+            <div
+              v-if="leftAlertText"
+              class="absolute flex flex-wrap justify-start bottom-1/3 right-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ leftAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="leftGroup.buttons" :position="'left'" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="flex justify-center @3xl:justify-end"
+          data-testid="right-buttons"
+        >
+          <div
+            class="relative flex flex-col flex-wrap gap-4 justify-center"
+            :class="rightGroup.stacked ? '' : 'flex-row'"
+          >
+            <div
+              v-if="rightAlertText"
+              class="absolute flex flex-wrap justify-end bottom-1/3 left-[-13rem] w-[12rem]"
+            >
+              <p class="text-error" role="alert">
+                {{ rightAlertText }}
+              </p>
+            </div>
+            <ConnectButtonControlButtons :buttons="rightGroup.buttons" :position="'right'" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Connect/ButtonControl/Wrapper.vue

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="bg-shade-inverted pb-6 pt-10"
+    data-testid="connect-button-control-wrapper"
+  >
+    <div class="app-inner-container app-body">
+      <ConnectButtonControl />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+<template>
+  <ConnectLayout>
+    <template #header>
+      <!-- Exposes the header slot of the base layout -->
+      <slot name="header">
+        <ConnectHeader />
+      </slot>
+    </template>
+    <template #body>
+      <!-- Exposes the body slot of the base layout -->
+      <slot name="body">
+        <div class="grow max-w-full overflow-hidden">
+          <slot />
+        </div>
+      </slot>
+    </template>
+    <template #footer>
+      <ConnectButtonControlWrapper />
+      <ConnectFooter />
+    </template>
+  </ConnectLayout>
+</template>

package/app/components/HelloWorld/Forms.vue

@@ -5,8 +5,8 @@
     <h3 class="text-green-900">
       Forms - should be green-900
     </h3>
-    <p class="text-connect-darkGray">
-      Forms - should be connnect-darkGray
+    <p class="text-neutral-highlighted">
+      Forms - should be neutral-highlighted
     </p>
   </div>
 </template>

package/app/composables/useButtonControl.ts

@@ -0,0 +1,72 @@
+export const useButtonControl = () => {
+  const route = useRoute()
+
+  function setButtonControl(buttonControl: ConnectButtonControl) {
+    // @ts-expect-error; typescript complains about the object type being too large
+    route.meta.buttonControl = buttonControl
+  }
+
+  function getButtonControl(): ConnectButtonControl {
+    return route.meta.buttonControl as ConnectButtonControl
+  }
+
+  function handleButtonLoading(reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
+    // set button control for loading / disabling buttons on submit or save or reset to default
+    const updateButtonGrp = (buttonArray: ConnectButton[], grp: 'left' | 'right') => {
+      for (const [index, element] of buttonArray.entries()) {
+        if (reset) {
+          element.disabled = false
+          element.loading = false
+        } else {
+          element.loading = (grp === buttonGrp) && index === buttonIndex
+          element.disabled = !element.loading
+        }
+      }
+    }
+    const buttonControl = getButtonControl()
+    // update left buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.leftGroup.buttons, 'left')
+    // update right buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.rightGroup.buttons, 'right')
+  }
+
+  async function setAlertText(reset: boolean, grp?: 'left' | 'right', index?: number, text?: string) {
+    const resetButtonGrp = (buttonArray: ConnectButton[]) => {
+      for (const element of buttonArray) {
+        element.alertText = undefined
+      }
+    }
+    // clear existing text
+    if (route.meta.buttonControl) {
+      route.meta.buttonControl.leftGroup.alertText = undefined
+      route.meta.buttonControl.rightGroup.alertText = undefined
+      resetButtonGrp(route.meta.buttonControl.leftGroup.buttons)
+      resetButtonGrp(route.meta.buttonControl.rightGroup.buttons)
+    }
+
+    // only continue if not resetting
+    if (!reset) {
+      // required for dom to clear existing content
+      // allows screenreader alert for the same content if set multiple times
+      await nextTick()
+      // set content
+      if (route.meta.buttonControl) {
+        if (index === undefined) {
+          route.meta.buttonControl.leftGroup.alertText = (grp === 'left') ? text : undefined
+          route.meta.buttonControl.rightGroup.alertText = (grp === 'right') ? text : undefined
+        } else if (grp === 'left' && route.meta.buttonControl.leftGroup.buttons[index]) {
+          route.meta.buttonControl.leftGroup.buttons[index].alertText = text
+        } else if (grp === 'right' && route.meta.buttonControl.rightGroup.buttons[index]) {
+          route.meta.buttonControl.rightGroup.buttons[index].alertText = text
+        }
+      }
+    }
+  }
+
+  return {
+    getButtonControl,
+    setButtonControl,
+    handleButtonLoading,
+    setAlertText
+  }
+}

package/app/interfaces/connect-button-control.ts

@@ -0,0 +1,17 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export interface ConnectButton extends ButtonProps {
+  alertText?: string
+  removeAlertSpacing?: boolean
+}
+
+export interface ConnectButtonGroup {
+  alertText?: string
+  buttons: ConnectButton[]
+  stacked?: boolean
+}
+
+export interface ConnectButtonControl {
+  leftGroup: ConnectButtonGroup
+  rightGroup: ConnectButtonGroup
+}

package/app/layouts/ConnectForm.vue

@@ -0,0 +1,5 @@
+<template>
+  <ConnectLayoutForm>
+    <slot />
+  </ConnectLayoutForm>
+</template>

package/app/types/forms-page-meta.d.ts

@@ -0,0 +1,7 @@
+declare module '#app' {
+  interface PageMeta {
+    buttonControl?: ConnectButtonControl
+  }
+}
+
+export {}

package/i18n/locales/en-CA.ts

@@ -0,0 +1,3 @@
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1,3 @@
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+}

package/modules/form-assets/index.ts

@@ -0,0 +1,15 @@
+import { defineNuxtModule, createResolver } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'form-assets',
+    configKey: 'formAssets'
+  },
+  defaults: {},
+  async setup(_options, _nuxt) {
+    console.info('Setting up **form** assets module')
+    const resolver = createResolver(import.meta.url)
+
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-form-tw.css'))
+  }
+})

package/modules/form-assets/runtime/assets/connect-form-tw.css

@@ -0,0 +1,2 @@
+@import "#connect-theme";
+@source "../../../../app";

package/nuxt.config.ts

@@ -8,7 +8,11 @@ export default defineNuxtConfig({
 
   devtools: { enabled: false },
 
-  compatibilityDate: '2025-06-10',
+  compatibilityDate: '2025-07-10',
+
+  imports: {
+    dirs: ['enums', 'interfaces', 'types']
+  },
 
   extends: ['@sbc-connect/nuxt-base'],
 
@@ -16,5 +20,22 @@ export default defineNuxtConfig({
     '#forms': resolve('./')
   },
 
-  css: [resolve('./app/assets/css/tw-forms.css')]
+  i18n: {
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ]
+  }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -12,12 +12,12 @@
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
-    "@sbc-connect/eslint-config": "0.0.6",
-    "@sbc-connect/playwright-config": "0.0.5",
-    "@sbc-connect/vitest-config": "0.0.6"
+    "@sbc-connect/playwright-config": "0.0.6",
+    "@sbc-connect/vitest-config": "0.0.6",
+    "@sbc-connect/eslint-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.1.7"
+    "@sbc-connect/nuxt-base": "0.1.8"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/app/assets/css/tw-forms.css

@@ -1,2 +0,0 @@
-@import "#connect-theme";
-@source "../../../app/";