@sbc-connect/nuxt-base 0.1.23 → 0.1.25

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.25
+
+### Patch Changes
+
+- [#84](https://github.com/bcgov/connect-nuxt/pull/84) [`f37700a`](https://github.com/bcgov/connect-nuxt/commit/f37700ab568335df724a5e9472a5e0b4198704b5) Thanks [@deetz99](https://github.com/deetz99)! - Add generic Select component with floating label. Update textarea v-model type.
+
+- [#85](https://github.com/bcgov/connect-nuxt/pull/85) [`6b0f70a`](https://github.com/bcgov/connect-nuxt/commit/6b0f70ab895a26c0b049dce84b130d6a04fd911e) Thanks [@kialj876](https://github.com/kialj876)! - Common layout updates, default state key for tombstone, fee store - waive fees, add prioirty, expose cached fees
+
+- [#82](https://github.com/bcgov/connect-nuxt/pull/82) [`ba04c84`](https://github.com/bcgov/connect-nuxt/commit/ba04c8424353b32af0811534d9c3edd31e15d39e) Thanks [@deetz99](https://github.com/deetz99)! - feat: Create floating label wrapper component.
+
+## 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',
@@ -280,7 +277,7 @@ export default defineAppConfig({
     input: {
       variants: {
         size: {
-          bcGovLg: {
+          bcGov: {
             base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
             leading: 'ps-2.5',
             trailing: 'pe-2.5',
@@ -294,7 +291,34 @@ export default defineAppConfig({
         }
       },
       defaultVariants: {
-        size: 'bcGovLg',
+        size: 'bcGov',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
+    inputMenu: {
+      slots: {
+        group: 'p-0',
+        item: 'py-3 px-4 data-highlighted:not-data-disabled:text-primary data-highlighted:not-data-disabled:before:bg-shade my-0.75 before:rounded-none',
+        trailingIcon: 'delay-50 group-data-[state=open]:rotate-180 transition-transform duration-200 text-(--ui-text) group-focus-visible:text-primary group-data-[state=open]:text-primary group-has-[[aria-invalid=true]]:text-error!'
+      },
+      variants: {
+        size: {
+          bcGov: {
+            base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'ring-0 ring-transparent peer rounded-t-sm rounded-b-none bg-shade shadow-input focus:ring-0 focus:outline-none focus:shadow-input-focus text-neutral-highlighted aria-invalid:shadow-input-error aria-invalid:focus:shadow-input-error aria-invalid:ring-0'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGov',
         color: 'primary',
         variant: 'bcGov'
       }
@@ -303,17 +327,55 @@ export default defineAppConfig({
       base: 'bg-gray-200'
     },
     select: {
+      slots: {
+        base: 'ring-0',
+        content: 'rounded-sm',
+        group: 'px-0 py-2',
+        trailingIcon: 'delay-50 group-data-[state=open]:rotate-180 transition-transform duration-200 text-(--ui-text) group-focus-visible:text-primary group-data-[state=open]:text-primary group-has-[[aria-invalid=true]]:text-error!',
+        item: 'my-0.75 text-neutral-highlighted before:rounded-none data-highlighted:not-data-disabled:text-primary data-highlighted:not-data-disabled:before:bg-shade data-[state=checked]:text-primary data-[state=checked]:bg-blue-50',
+        itemLeadingIcon: 'group-data-[state=checked]:text-primary group-data-highlighted:not-data-disabled:text-primary text-neutral-highlighted',
+        itemTrailingIcon: 'hidden'
+      },
+      variants: {
+        size: {
+          bcGov: {
+            base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
+            leading: 'ps-2.5',
+            trailing: 'pe-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5',
+            label: 'p-1.5 text-xs gap-1.5',
+            item: 'py-3 px-4 text-sm gap-3',
+            itemLeadingIcon: 'size-5',
+            itemLeadingAvatarSize: '2xs',
+            itemLeadingChip: 'size-5',
+            itemLeadingChipSize: 'md',
+            itemTrailingIcon: 'size-5'
+          }
+        },
+        variant: {
+          bcGov: 'peer ring-0! rounded-t-sm rounded-b-none bg-shade focus:ring-0 focus:outline-none shadow-input shadow-input focus-visible:shadow-input-focus data-[state=open]:shadow-input-focus text-neutral-highlighted aria-[invalid=true]:shadow-input-error! delay-50'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGov',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
+    selectMenu: {
       slots: {
         content: 'rounded-sm',
         group: 'px-0 py-2',
-        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200 text-(--ui-text) group-data-[state=open]:text-primary group-focus:text-primary',
+        trailingIcon: 'delay-50 group-data-[state=open]:rotate-180 transition-transform duration-200 text-(--ui-text) group-focus-visible:text-primary group-data-[state=open]:text-primary group-has-[[aria-invalid=true]]:text-error!',
         item: 'my-0.75 text-neutral-highlighted before:rounded-none data-highlighted:not-data-disabled:text-primary data-highlighted:not-data-disabled:before:bg-shade data-[state=checked]:text-primary data-[state=checked]:bg-blue-50',
         itemLeadingIcon: 'group-data-[state=checked]:text-primary group-data-highlighted:not-data-disabled:text-primary text-neutral-highlighted'
       },
       variants: {
         size: {
           bcGov: {
-            base: 'px-0 py-0 text-base gap-1.5',
+            base: 'px-2.5 pb-2 pt-6 text-base gap-1.5',
             leading: 'ps-2.5',
             trailing: 'pe-2.5',
             leadingIcon: 'size-5',
@@ -329,7 +391,7 @@ export default defineAppConfig({
           }
         },
         variant: {
-          bcGov: 'peer rounded-t-sm rounded-b-none bg-shade focus:ring-0 focus:outline-none shadow-input data-[state=open]:shadow-input-focus focus:shadow-input-focus text-neutral-highlighted'
+          bcGov: 'peer ring-0! rounded-t-sm rounded-b-none bg-shade focus:ring-0 focus:outline-none shadow-input shadow-input focus-visible:shadow-input-focus data-[state=open]:shadow-input-focus text-neutral-highlighted aria-[invalid=true]:shadow-input-error! delay-50'
         }
       },
       defaultVariants: {
@@ -341,7 +403,7 @@ export default defineAppConfig({
     textarea: {
       variants: {
         size: {
-          bcGovLg: {
+          bcGov: {
             base: 'px-2.5 pb-1.5 pt-5 text-base gap-1.5 resize-none',
             leading: 'ps-2.5',
             trailing: 'pe-2.5',
@@ -355,7 +417,7 @@ export default defineAppConfig({
         }
       },
       defaultVariants: {
-        size: 'bcGovLg',
+        size: 'bcGov',
         color: 'primary',
         variant: 'bcGov'
       }

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/components/Connect/FloatingLabel.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+type VariantOption = 'input' | 'textarea' | 'select' | 'selectmenu'
+
+const {
+  variant = 'input'
+} = defineProps<{
+  label: string
+  variant?: VariantOption
+  id: string
+}>()
+
+const variantClass: Record<VariantOption, string[]> = {
+  input: [
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3 delay-50',
+    'group-has-[div>input:not(:placeholder-shown)]:top-3',
+    'group-has-[div>input:not(:placeholder-shown)]:text-xs',
+    'group-has-[div>input[aria-invalid=true]]:text-error'
+  ],
+  textarea: [
+    'top-1 group-focus-within:top-1 delay-50',
+    'group-has-[div>textarea:not(:placeholder-shown)]:top-1',
+    'group-has-[div>textarea:not(:placeholder-shown)]:text-xs',
+    'group-has-[div>textarea[aria-invalid=true]]:text-error'
+  ],
+  select: [
+    'delay-100',
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3',
+    'group-has-[button[aria-invalid=true]]:text-error',
+    'group-has-[button[data-state=open]]:top-3',
+    'group-has-[button[data-state=open]]:text-xs',
+    'group-has-[button:not([data-placeholder])]:top-3',
+    'group-has-[button:not([data-placeholder])]:text-xs',
+    'group-has-[button[data-state=open]:not([aria-invalid=true])]:text-primary'
+  ],
+  selectmenu: [
+    'delay-100',
+    '-translate-y-1/2 top-1/2 group-focus-within:top-3',
+    'group-has-[button[aria-invalid=true]]:text-error',
+    'group-has-[button[data-state=open]]:top-3',
+    'group-has-[button[data-state=open]]:text-xs',
+    'group-has-[button[data-placeholder=false]]:top-3',
+    'group-has-[button[data-placeholder=false]]:text-xs',
+    'group-has-[button[data-state=open]:not([aria-invalid=true])]:text-primary'
+  ]
+}
+</script>
+
+<template>
+  <div class="relative group">
+    <span
+      :id
+      :class="[
+        variantClass[variant],
+        'line-clamp-1 px-2.5',
+        'absolute z-10 group-focus-within:text-primary',
+        'pointer-events-none text-neutral transition-all',
+        'motion-reduce:transition-none duration-200',
+        'group-focus-within:text-xs',
+        'group-focus-within:text-primary',
+        'w-fit',
+      ]"
+    >
+      {{ label }}
+    </span>
+    <slot />
+  </div>
+</template>

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

@@ -9,6 +9,7 @@
     <slot name="breadcrumb">
       <ConnectBreadcrumb />
     </slot>
+    <slot name="bottomHeaders" />
     <main class="app-body px-2 sm:px-4">
       <slot name="body">
         <div class="app-inner-container grow flex flex-col overflow-hidden">
@@ -16,6 +17,7 @@
         </div>
       </slot>
     </main>
+    <slot name="topFooters" />
     <slot name="footer">
       <ConnectFooter />
     </slot>

package/app/components/Connect/Select.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: string
+  label: string
+}>()
+
+defineEmits<{
+  change: []
+}>()
+
+const labelId = props.id + '-label'
+</script>
+
+<template>
+  <ConnectFloatingLabel
+    :id="labelId"
+    :label
+    variant="select"
+  >
+    <USelect
+      :id
+      :data-testid="id"
+      :aria-labelledby="labelId"
+      v-bind="$attrs"
+      @change="$emit('change')"
+    />
+  </ConnectFloatingLabel>
+</template>

package/app/components/Connect/Textarea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const model = defineModel<string>({ required: true })
+const model = defineModel<null | string | number | undefined>({ required: true })
 
 defineProps<{
   id: string

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/composables/useConnectTombstone.ts

@@ -1,4 +1,7 @@
-export const useConnectTombstone = (stateKey: string, initialState?: Partial<ConnectTombstoneState>) => {
+export const useConnectTombstone = (
+  stateKey: string = 'default-tombstone',
+  initialState?: Partial<ConnectTombstoneState>
+) => {
   function createInitialState(): ConnectTombstoneState {
     const baseState: ConnectTombstoneState = {
       loading: false,

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.25",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -25,8 +25,8 @@
     "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.8"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",