@sbc-connect/nuxt-base 0.1.24 → 0.1.25

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/app/app.config.ts

@@ -277,7 +277,34 @@ 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',
+            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'
+      }
+    },
+    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',
@@ -291,7 +318,7 @@ export default defineAppConfig({
         }
       },
       defaultVariants: {
-        size: 'bcGovLg',
+        size: 'bcGov',
         color: 'primary',
         variant: 'bcGov'
       }
@@ -300,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',
@@ -326,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: {
@@ -338,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',
@@ -352,7 +417,7 @@ export default defineAppConfig({
         }
       },
       defaultVariants: {
-        size: 'bcGovLg',
+        size: 'bcGov',
         color: 'primary',
         variant: 'bcGov'
       }

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.24",
+  "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",