@sbc-connect/nuxt-base 0.1.24 → 0.1.26

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.26
+
+### Patch Changes
+
+- [#86](https://github.com/bcgov/connect-nuxt/pull/86) [`c1fb4f2`](https://github.com/bcgov/connect-nuxt/commit/c1fb4f2a217b3d57e7ea7aed8b9773e215a21978) Thanks [@deetz99](https://github.com/deetz99)! - feat: v-sanitize directive.
+
+## 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/I18n/Helper.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-/* eslint-disable vue/no-v-html */
-/* eslint-disable vue/no-v-text-v-html-on-component */
-
 const {
   translationPath,
   as = 'span'
@@ -39,5 +36,5 @@ const textToDisplay = computed(() => {
 </script>
 
 <template>
-  <component :is="as" v-html="$sanitize(textToDisplay)" />
+  <component :is="as" v-sanitize="textToDisplay" />
 </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/app/plugins/sanitize.client.ts

@@ -3,7 +3,16 @@ import DOMPurify from 'dompurify'
 export default defineNuxtPlugin({
   name: 'connect-sanitize-plugin',
   parallel: true,
-  setup() {
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive('sanitize', {
+      beforeMount(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value)
+      },
+      updated(el, binding) {
+        el.innerHTML = DOMPurify.sanitize(binding.value)
+      }
+    })
+
     return {
       provide: {
         sanitize: DOMPurify.sanitize

package/app/types/base-directives.d.ts

@@ -0,0 +1,7 @@
+declare module 'vue' {
+  interface GlobalDirectives {
+    vSanitize: Directive<HTMLElement, string>
+  }
+}
+
+export {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -25,7 +25,7 @@
     "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/playwright-config": "0.0.8",
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "scripts": {