@sbc-connect/nuxt-base 0.1.23 → 0.1.24

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.24
+
+### 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
+
 ## 0.1.23
 
 ### Patch Changes

package/app/app.config.ts

@@ -63,9 +63,6 @@ export default defineAppConfig({
       ]
     },
     button: {
-      slots: {
-        base: 'cursor-pointer'
-      },
       compoundVariants: [
         {
           color: 'primary',

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{ buttons: ConnectButton[], position: 'left' | 'right' }>()
+
+// remove alertText and removeAlertSpacing from being added to button html attrs
+const removeButtonAttrs = (button: ConnectButton) => {
+  const newButton = { ...button }
+  delete newButton['alertText']
+  delete newButton['removeAlertSpacing']
+  return newButton
+}
+</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="removeButtonAttrs(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,66 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+
+const { buttonControl: meta } = useConnectButtonControl(stateKey)
+const buttonControl = computed(() => meta.value)
+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,18 @@
+<script setup lang="ts">
+const {
+  stateKey = 'default-button-control'
+} = defineProps<{
+  stateKey?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="bg-shade-inverted pb-6 pt-10"
+    data-testid="connect-button-control-wrapper"
+  >
+    <div class="app-inner-container app-body">
+      <ConnectButtonControl :state-key="stateKey" />
+    </div>
+  </div>
+</template>

package/app/composables/useConnectButtonControl.ts

@@ -0,0 +1,146 @@
+const defaultOptions: ConnectButtonControlOptions = {
+  handleLoading: true,
+  clearAlertTextOnClick: true
+}
+
+export const useConnectButtonControl = (
+  stateKey: string = 'default-button-control',
+  opts: Partial<ConnectButtonControlOptions> = {}
+) => {
+  const options = {
+    ...defaultOptions,
+    ...opts
+  }
+
+  const buttonControl = useState<ConnectButtonControl>(stateKey, () => ({
+    leftGroup: { buttons: [] },
+    rightGroup: { buttons: [] }
+  }))
+
+  const forEachButton = (update: (button: ConnectButton, group: 'left' | 'right', index: number) => void) => {
+    buttonControl.value.leftGroup?.buttons?.forEach((btn, index) => update(btn, 'left', index))
+    buttonControl.value.rightGroup?.buttons?.forEach((btn, index) => update(btn, 'right', index))
+  }
+
+  const forEachGroup = (update: (group: ConnectButtonGroup) => void) => {
+    if (buttonControl.value.leftGroup) {
+      update(buttonControl.value.leftGroup)
+    }
+    if (buttonControl.value.rightGroup) {
+      update(buttonControl.value.rightGroup)
+    }
+  }
+
+  async function setAlertText(text?: string, group?: 'left' | 'right', index?: number) {
+    forEachGroup(group => group.alertText = undefined)
+    forEachButton(btn => btn.alertText = undefined)
+
+    if (text && group !== undefined) {
+      await nextTick()
+
+      const buttonGroup = group === 'left' ? buttonControl.value.leftGroup : buttonControl.value.rightGroup
+
+      if (index !== undefined) {
+        const button = buttonGroup.buttons[index]
+        if (button) {
+          button.alertText = text
+        }
+      } else {
+        buttonGroup.alertText = text
+      }
+    }
+  }
+
+  const handleClick = (
+    originalClick: ConnectButton['onClick'],
+    group: 'left' | 'right',
+    index: number
+  ) => {
+    if (!originalClick || typeof originalClick !== 'function') {
+      return undefined
+    }
+
+    return async () => {
+      try {
+        if (options.clearAlertTextOnClick) {
+          await setAlertText(undefined)
+        }
+
+        if (options.handleLoading) {
+          const clickedButton = buttonControl.value[group === 'left' ? 'leftGroup' : 'rightGroup']?.buttons[index]
+          if (!clickedButton) {
+            return
+          }
+
+          clickedButton.loading = true
+          forEachButton((button, btnGroup, btnIndex) => {
+            if (btnGroup !== group || btnIndex !== index) {
+              button.disabled = true
+            }
+          })
+        }
+
+        await (originalClick as () => Promise<void> | void)()
+      } catch (error) {
+        if (import.meta.env.DEV) {
+          console.error(`Error on button click. group: ${group} index: ${index} error: ${error}`)
+        }
+      } finally {
+        if (options.handleLoading) {
+          forEachButton((button) => {
+            button.loading = false
+            button.disabled = false
+          })
+        }
+      }
+    }
+  }
+
+  function setButtonControl(config: ConnectButtonControl) {
+    const updateGroup = (config: { buttons: ConnectButton[] }, group: 'left' | 'right') => {
+      if (!config || !config.buttons.length) {
+        return { ...config, buttons: [] }
+      }
+      return {
+        ...config,
+        buttons: config.buttons.map((button, index) => ({
+          ...button,
+          onClick: handleClick(button.onClick, group, index)
+        }))
+      }
+    }
+
+    buttonControl.value = {
+      leftGroup: updateGroup(config.leftGroup, 'left'),
+      rightGroup: updateGroup(config.rightGroup, 'right')
+    }
+  }
+
+  function handleButtonLoading(
+    loading: boolean,
+    group?: 'left' | 'right',
+    index?: number
+  ) {
+    if (!loading) {
+      forEachButton((button) => {
+        button.loading = false
+        button.disabled = false
+      })
+    } else if (group !== undefined && index !== undefined) {
+      forEachButton((button, btnGroup, btnIndex) => {
+        if (btnGroup === group && btnIndex === index) {
+          button.loading = true
+        } else {
+          button.disabled = true
+        }
+      })
+    }
+  }
+
+  return {
+    setButtonControl,
+    setAlertText,
+    handleButtonLoading,
+    buttonControl
+  }
+}

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

@@ -0,0 +1,22 @@
+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
+}
+
+export interface ConnectButtonControlOptions {
+  handleLoading: boolean
+  clearAlertTextOnClick: boolean
+}

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

@@ -276,14 +276,3 @@ body {
     @apply pointer-events-none absolute left-0 top-1 text-neutral text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary peer-aria-invalid:text-error;
   }
 }
-
-/* TODO: maybe delete this */
-/* Extra Utilities */
-/* This should be working out-of-the-box from Nuxt UI but isnt for some reason */
-/* https://ui.nuxt.com/getting-started/theme#neutral */
-/* .text-highlighted {
-  color: var(--color-gray-900);
-  @variant dark {
-    color: var(--color-gray-900);
-  }
-} */

package/nuxt.config.ts

@@ -120,10 +120,9 @@ export default defineNuxtConfig({
     }
   },
 
-  // removing this for now as its causing more issues
-  // typescript: {
-  //   includeWorkspace: true // fixes auto imports in tests
-  // },
+  typescript: {
+    includeWorkspace: true // allow auto imports in tests
+  },
 
   runtimeConfig: {
     public: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",