@sbc-connect/nuxt-base 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sbc-connect/nuxt-base
 
+## 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
+
+- [#160](https://github.com/bcgov/connect-nuxt/pull/160) [`80b8318`](https://github.com/bcgov/connect-nuxt/commit/80b8318ab802a14f77e9fe88f96e66aaf23e18ad) Thanks [@deetz99](https://github.com/deetz99)! - Update Nuxt, pinia colada, keycloak, nuxt ui, i18n, vueuse, dompurify, es-toolkit, zod.
+
 ## 0.8.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/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/app/components/HelloWorld/Index.vue

@@ -8,7 +8,7 @@ const { myLayer } = useAppConfig()
     <h1>Hello World!</h1>
     <pre>{{ myLayer }}</pre>
     <p class="text-gray-900">
-      Hello World text base should be gray-900 test
+      Hello World text base should be gray-900 test 3
     </p>
   </div>
 </template>

package/nuxt.config.ts

@@ -143,5 +143,19 @@ export default defineNuxtConfig({
       statusApiUrl: '',
       statusApiVersion: ''
     }
+  },
+
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@launchdarkly/js-client-sdk',
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+        'dompurify',
+        'es-toolkit',
+        'maska/vue',
+        'zod'
+      ]
+    }
   }
 })

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "1.2.3",
-    "@nuxt/ui": "4.6.0",
-    "@nuxtjs/i18n": "10.2.4",
-    "@vueuse/core": "14.2.1",
-    "@vueuse/nuxt": "14.2.1",
-    "dompurify": "3.3.3",
-    "es-toolkit": "1.45.1",
     "@launchdarkly/js-client-sdk": "4.6.5",
+    "@nuxt/ui": "4.7.1",
+    "@nuxtjs/i18n": "10.3.0",
+    "@vueuse/core": "14.3.0",
+    "@vueuse/nuxt": "14.3.0",
+    "dompurify": "3.4.5",
+    "es-toolkit": "1.46.1",
     "luxon": "3.7.2",
     "maska": "3.2.0",
-    "zod": "4.3.6"
+    "zod": "4.4.3"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.11.1",
+    "@axe-core/playwright": "4.11.3",
     "@types/luxon": "3.7.1",
-    "dotenv": "17.3.1",
-    "nuxt": "4.2.2",
-    "typescript": "5.9.3",
-    "vue-tsc": "3.2.5",
-    "@sbc-connect/playwright-config": "0.1.1",
+    "dotenv": "^17.4.2",
+    "nuxt": "4.4.6",
+    "typescript": "6.0.3",
+    "vue-tsc": "3.3.1",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.1.1"
+    "@sbc-connect/playwright-config": "0.2.0",
+    "@sbc-connect/vitest-config": "0.2.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",