@sbc-connect/nuxt-forms 0.1.8 → 0.1.10

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  label: string
+  help?: string
+  inputId: string
+  required?: boolean
+  autofocus?: boolean
+  disabled?: boolean
+}>()
+
+const model = defineModel<string>({ required: true })
+</script>
+
+<template>
+  <UFormField
+    :name
+    :help
+    class="grow flex-1"
+  >
+    <template #default="{ error }">
+      <ConnectTextarea
+        :id="inputId"
+        v-model="model"
+        :data-testid="inputId"
+        :required
+        :invalid="!!error"
+        :label
+        :autofocus
+        :disabled
+      />
+      <div
+        v-if="!help && !error"
+        class="h-4 mt-1"
+      />
+    </template>
+  </UFormField>
+</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 {}