@sbc-connect/nuxt-base 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.9
+
+### Patch Changes
+
+- [#43](https://github.com/bcgov/connect-nuxt/pull/43) [`3b521b7`](https://github.com/bcgov/connect-nuxt/commit/3b521b70bf1a0cc5a0feea63a825ef5544347aa8) Thanks [@deetz99](https://github.com/deetz99)! - Form components and new lint rules
+
+  - Forms layer address components
+  - Lint rules and fixes to prevent rule collision and promote best practices
+
+  issue: bcgov/entity#29338
+
 ## 0.1.8
 
 ### Patch Changes

package/app/app.config.ts

@@ -10,6 +10,23 @@ export default defineAppConfig({
     }
   },
   ui: {
+    alert: {
+      slots: {
+        root: 'rounded'
+      },
+      compoundVariants: [
+        {
+          color: 'warning',
+          variant: 'subtle',
+          class: {
+            root: 'text-highlighted bg-yellow-400/25 ring-2 ring-yellow-400',
+            icon: 'text-warning',
+            title: 'font-bold text-nuetral-highlighted',
+            description: 'text-nuetral-highlighted'
+          }
+        }
+      ]
+    },
     breadcrumb: {
       slots: {
         separatorIcon: 'text-secondary'
@@ -144,6 +161,46 @@ export default defineAppConfig({
         }
       ]
     },
+    formField: {
+      slots: {
+        root: '',
+        wrapper: 'space-y-1',
+        labelWrapper: 'flex content-center items-center justify-between',
+        label: 'block font-bold text-base text-neutral-highlighted',
+        container: 'mt-1 relative',
+        description: 'text-(--ui-text) text-base text-neutral-toned mb-4 whitespace-normal',
+        error: 'pl-4.5 mt-1 text-(--ui-error) text-xs',
+        hint: 'text-(--ui-text)',
+        help: 'pl-4.5 mt-1 text-(--ui-text) text-xs'
+      },
+      variants: {
+        size: {
+          xs: {
+            root: 'text-xs'
+          },
+          sm: {
+            root: 'text-xs'
+          },
+          md: {
+            root: 'text-sm'
+          },
+          lg: {
+            root: 'text-sm'
+          },
+          xl: {
+            root: 'text-base'
+          }
+        },
+        required: {
+          true: {
+            label: 'after:content-[\'*\'] after:ms-0.5 after:text-(--ui-error)'
+          }
+        }
+      },
+      defaultVariants: {
+        size: 'md'
+      }
+    },
     icons: {
       arrowLeft: 'i-mdi-arrow-left',
       arrowRight: 'i-mdi-arrow-right',
@@ -188,6 +245,42 @@ export default defineAppConfig({
         variant: 'bcGov'
       }
     },
+    select: {
+      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',
+        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',
+            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 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'
+        }
+      },
+      defaultVariants: {
+        size: 'bcGov',
+        color: 'primary',
+        variant: 'bcGov'
+      }
+    },
     textarea: {
       variants: {
         size: {

package/app/components/Connect/Breadcrumb.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const props = defineProps({ accountId: { type: String, required: false } })
+const props = defineProps<{
+  accountId?: string
+}>()
 
 const { t } = useI18n()
 

package/app/components/Connect/I18n/Helper.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const props = defineProps({
-  translationPath: { type: String, required: true }
-})
+const props = defineProps<{
+  translationPath: string
+}>()
 
 const attrs = useAttrs()
 const { t } = useI18n()

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

@@ -11,7 +11,7 @@
     </slot>
     <main class="app-inner-container app-body">
       <slot name="body">
-        <div class="grow max-w-full overflow-hidden">
+        <div class="grow max-w-full flex flex-col overflow-hidden">
           <slot />
         </div>
       </slot>

package/app/components/Connect/Spinner.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-const props = defineProps({
-  fullscreen: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: Number,
-    default: 75
-  }
-})
+const {
+  fullscreen = false,
+  size = 75
+} = defineProps<{
+  fullscreen?: boolean
+  size?: number
+}>()
 
 const spinnerStyle = computed(() => ({
-  '--spinner-size': `${props.size}px`,
-  '--spinner-margin': `${props.size / -2}px`
+  '--spinner-size': `${size}px`,
+  '--spinner-margin': `${size / -2}px`
 }))
 </script>
 

package/app/components/Connect/SystemBanner.vue

@@ -2,10 +2,13 @@
 const ld = useConnectLaunchDarkly()
 const { $sanitize } = useNuxtApp()
 
-defineProps({
-  dismissible: { type: Boolean, default: false },
-  icon: { type: String, default: 'i-mdi-information' }
-})
+const {
+  dismissible = false,
+  icon = 'i-mdi-information'
+} = defineProps<{
+  dismissible?: boolean
+  icon?: string
+}>()
 
 const close = ref(false)
 const message = ref('')

package/app/composables/useConnectLaunchDarkly.ts

@@ -148,13 +148,6 @@ export const useConnectLaunchDarkly = () => {
     }))
   }
 
-  // TODO: or do we do this and then everytime the fn is called its required to use await?
-  // TODO: returning the computed means we dont need to add LD to middleware
-  // async function getStoredFlag(name: string): Promise<unknown> {
-  //   await ldClient.value?.waitUntilReady()
-  //   return ldFlagSet.value[name]
-  // }
-
   /**
    * Resets the LaunchDarkly state and closes the client connection.
    */

package/app/error.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* eslint-disable vue/define-props-declaration */
 import type { NuxtError } from '#app'
 
 const { t } = useI18n()
@@ -36,7 +37,7 @@ onMounted(() => {
 <template>
   <UApp :toaster="{ position: 'bottom-center' }">
     <NuxtLayout name="connect-base">
-      <div class="m-auto flex flex-col items-center gap-4 h-full justify-center">
+      <div class="m-auto flex flex-col items-center gap-4">
         <h1>
           {{ $t(`connect.page.error.${errorKey}.h1`) }}
         </h1>

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

@@ -6,6 +6,14 @@
 /* Customize Nuxt UI default tokens */
 /* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
+  /* Default Text Colours */
+  --ui-text-dimmed: var(--ui-color-gray-400);
+  --ui-text-muted: var(--ui-color-gray-500);
+  --ui-text-toned: var(--ui-color-gray-600);
+  --ui-text: var(--ui-color-neutral);
+  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  --ui-text-inverted: var(--color-white);
+  /* Variant Colours */
   --ui-error: var(--color-red-600);
   --ui-primary: var(--color-blue-500);
   --ui-secondary: white;
@@ -34,6 +42,14 @@
 
 /* FUTURE: add dark themed colours (currently set to be the same) */
 .dark {
+  /* Default Text Colours */
+  --ui-text-dimmed: var(--ui-color-gray-400);
+  --ui-text-muted: var(--ui-color-gray-500);
+  --ui-text-toned: var(--ui-color-gray-600);
+  --ui-text: var(--ui-color-neutral);
+  --ui-text-highlighted: var(--ui-color-neutral-highlighted);
+  --ui-text-inverted: var(--color-white);
+  /* Variant Colours */
   --ui-error: var(--color-red-600);
   --ui-primary: var(--color-blue-500);
   --ui-secondary: white;

package/nuxt.config.ts

@@ -114,7 +114,8 @@ export default defineNuxtConfig({
         'mdi:menu',
         'mdi:file-document-outline',
         'mdi:home',
-        'mdi:web'
+        'mdi:web',
+        'mdi:alert'
       ]
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -23,9 +23,9 @@
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
-    "@sbc-connect/eslint-config": "0.0.6",
-    "@sbc-connect/playwright-config": "0.0.6",
-    "@sbc-connect/vitest-config": "0.0.6"
+    "@sbc-connect/eslint-config": "0.0.7",
+    "@sbc-connect/vitest-config": "0.0.6",
+    "@sbc-connect/playwright-config": "0.0.6"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",