@sbc-connect/nuxt-base 0.9.0 → 0.10.0

package/CHANGELOG.md

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

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

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -23,8 +23,8 @@
     "@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"