@sbc-connect/nuxt-base 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 0.11.0
+
+### Minor Changes
+
+- [#178](https://github.com/bcgov/connect-nuxt/pull/178) [`3c8d9bf`](https://github.com/bcgov/connect-nuxt/commit/3c8d9bfdf9147d6fd6ce0dadc4b47f043feb4f4b) Thanks [@deetz99](https://github.com/deetz99)! - Use locale from useI18n instead of $i18n global
+
+## 0.10.0
+
+### Minor Changes
+
+- [#163](https://github.com/bcgov/connect-nuxt/pull/163) [`c0df0d1`](https://github.com/bcgov/connect-nuxt/commit/c0df0d1deb18d2123bc5e562e3c2ba2028de7ce1) Thanks [@vysakh-menon-aot](https://github.com/vysakh-menon-aot)! - floating label input size changed to 16px
+
+- [#165](https://github.com/bcgov/connect-nuxt/pull/165) [`8dedd59`](https://github.com/bcgov/connect-nuxt/commit/8dedd5905ad619d8eaf8fee13a74abbc84019b54) Thanks [@deetz99](https://github.com/deetz99)! - Implement ConnectInputMenu component
+
 ## 0.9.0
 
 ### Minor Changes

package/app/assets/css/connect-base-tw.css

@@ -269,11 +269,11 @@ body {
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-3 text-neutral transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary peer-aria-invalid:text-error;
+    @apply pointer-events-none absolute left-0 top-3 text-neutral transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-base peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary peer-aria-invalid:text-error;
   }
-  
+
   .floating-label-textarea {
-    @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;
+    @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-base peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary peer-aria-invalid:text-error;
   }
 
   /* Standard container padding */

package/app/components/Connect/BCGovLogo.vue

@@ -8,11 +8,13 @@ import frSmallLogo from 'BCGovLogoSmFr'
 import enLargeLogo from 'BCGovLogoLgEn'
 // @ts-expect-error - Cannot find module 'BCGovLogoSmEn' or its corresponding type declarations.ts(2307)
 import enSmallLogo from 'BCGovLogoSmEn'
+
+const { locale } = useI18n()
 </script>
 
 <template>
   <!-- use french logo for french locale, any other locale uses english logo -->
-  <div v-if="$i18n.locale === 'fr-CA'" class="shrink-0">
+  <div v-if="locale === 'fr-CA'" class="shrink-0">
     <!-- Using scale because it will increase the size of the image without affecting the container size -->
     <!-- there is a lot of padding on the images, if only the height gets increased,  -->
     <!-- the padding makes the header too tall -->

package/app/components/Connect/Footer.vue

@@ -4,6 +4,7 @@ const uiVersion = rtc.version
 const feesUrl = `${rtc.registryHomeUrl}product-fees`
 const dependencyVersions: string[] = useAppConfig().connect?.footer?.versions || []
 const localePath = useLocalePath()
+const { locale } = useI18n()
 const links = [
   {
     label: 'connect.label.home',
@@ -64,7 +65,7 @@ const appVersions = computed<string[]>(() => {
             ]"
           >
             <NuxtLink
-              :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
+              :to="link.to === '/' ? `/${locale}` : link.to"
               :target="link.target"
               :class="[
                 'rounded p-1 text-sm text-secondary',

package/app/components/Connect/Input/Menu.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { InputMenuProps } from '@nuxt/ui'
+
+const props = defineProps<{
+  id: string
+  label: string
+}>()
+
+const labelId = props.id + '-label'
+const model = defineModel<InputMenuProps['modelValue']>()
+
+const hasValue = computed(() => {
+  const val = model.value
+
+  if (val === null || val === undefined) {
+    return false
+  }
+
+  if (Array.isArray(val)) {
+    return val.length > 0
+  }
+
+  if (typeof val === 'object') {
+    return Object.keys(val).length > 0
+  }
+
+  return val === 0 || !!val
+})
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <div class="relative group">
+    <span
+      :id="labelId"
+      :class="[
+        'absolute left-0 z-10 px-2.5 pointer-events-none text-neutral transition-all duration-200 w-fit line-clamp-1',
+        'top-1/2 -translate-y-1/2',
+        'group-focus-within:top-3 group-focus-within:text-xs group-focus-within:text-primary',
+        'group-has-aria-invalid:text-error',
+        hasValue ? 'top-3 text-xs' : '',
+      ]"
+    >
+      {{ label }}
+    </span>
+    <UInputMenu
+      v-bind="$attrs"
+      :id
+      v-model="model"
+      :aria-labelledby="labelId"
+    />
+  </div>
+</template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -23,11 +23,11 @@
     "@types/luxon": "3.7.1",
     "dotenv": "^17.4.2",
     "nuxt": "4.4.6",
-    "typescript": "5.9.3",
-    "vue-tsc": "3.2.5",
+    "typescript": "6.0.3",
+    "vue-tsc": "3.3.1",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.2.0",
-    "@sbc-connect/vitest-config": "0.2.0"
+    "@sbc-connect/vitest-config": "0.2.0",
+    "@sbc-connect/playwright-config": "0.2.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",