@sbc-connect/nuxt-forms 0.1.25 → 0.1.26

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.26
+
+### Patch Changes
+
+- [#80](https://github.com/bcgov/connect-nuxt/pull/80) [`0615542`](https://github.com/bcgov/connect-nuxt/commit/06155422d0a8d61ee862bb3483330610b4a9434d) Thanks [@deetz99](https://github.com/deetz99)! - feat: Move button control to base and handle loading state internally
+
+- Updated dependencies [[`0615542`](https://github.com/bcgov/connect-nuxt/commit/06155422d0a8d61ee862bb3483330610b4a9434d)]:
+  - @sbc-connect/nuxt-base@0.1.24
+
 ## 0.1.25
 
 ### Patch Changes

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -13,11 +13,11 @@
     "typescript": "5.9.3",
     "vue-tsc": "3.1.2",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.0.7",
-    "@sbc-connect/vitest-config": "0.0.6"
+    "@sbc-connect/vitest-config": "0.0.6",
+    "@sbc-connect/playwright-config": "0.0.7"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.1.23"
+    "@sbc-connect/nuxt-base": "0.1.24"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

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

@@ -1,19 +0,0 @@
-<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

@@ -1,59 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-<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/composables/useButtonControl.ts

@@ -1,72 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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
-}