@sbc-connect/nuxt-forms 0.7.11 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sbc-connect/nuxt-forms
 
+## 0.8.0
+
+### Minor Changes
+
+- [#203](https://github.com/bcgov/connect-nuxt/pull/203) [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
+### Patch Changes
+
+- Updated dependencies [[`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38), [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38)]:
+  - @sbc-connect/nuxt-base@0.14.0
+
+## 0.7.12
+
+### Patch Changes
+
+- [#199](https://github.com/bcgov/connect-nuxt/pull/199) [`bb10de7`](https://github.com/bcgov/connect-nuxt/commit/bb10de7f8fd3b05673cbe38ee30b0bcb9d49d778) Thanks [@eve-git](https://github.com/eve-git)! - Switch the address form's Country field from the custom `ConnectCombobox` to Nuxt UI's `UInputMenu`, with word-start search filtering, Canada/US pinned to the top of the list, and correct label display and Enter-to-select behavior after searching.
+
 ## 0.7.11
 
 ### Patch Changes

package/app/components/Connect/Form/Address/Country.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectItem } from '@nuxt/ui'
 import { isoCountriesListSortedByName as countries } from '#forms/app/utils/isoCountriesList'
+import type { Iso3166_1Country } from '#forms/app/utils/isoCountriesList'
 
 defineProps<{
   parentId: string
@@ -15,12 +15,54 @@ defineEmits<{
 
 const model = defineModel<string | undefined>({ required: true })
 
-const options: SelectItem[] = [
+/**
+ * Matches when `search` appears in `text` starting at a word boundary (the
+ * start of `text`, or right after a non-letter/non-number character).
+ * E.g. matchesWordStart('Pending Review', 're') === true (via 'Review')
+ *      matchesWordStart('Expired', 're') === false ('re' is mid-word, not a word start)
+ *      matchesWordStart('United States', 'united s') === true (matches from the start)
+ */
+function matchesWordStart(text: string, search: string): boolean {
+  const needle = search.trim().toLowerCase().replace(/\s+/g, ' ')
+  if (!needle) {
+    return true
+  }
+  const haystack = text.toLowerCase()
+  for (let index = haystack.indexOf(needle); index !== -1; index = haystack.indexOf(needle, index + 1)) {
+    if (index === 0 || /[^\p{L}\p{N}]/u.test(haystack.charAt(index - 1))) {
+      return true
+    }
+  }
+  return false
+}
+
+// UInputMenu only allows value-key/label-key to be a key that every item type
+// has in common. `{ type: 'separator' }` alone shares no keys with
+// Iso3166_1Country, which would make value-key="alpha_2" a type error. Giving
+// it Iso3166_1Country's keys as optional fixes the type without changing
+// anything at runtime - the separator object itself stays `{ type: 'separator' }`.
+type CountryOption = Iso3166_1Country | (Partial<Iso3166_1Country> & { type: 'separator' })
+
+const options: Array<CountryOption> = [
   countries.find(c => c.alpha_2 === 'CA')!,
   countries.find(c => c.alpha_2 === 'US')!,
   { type: 'separator' },
-  ...countries
+  ...countries.filter(c => c.alpha_2 !== 'CA' && c.alpha_2 !== 'US')
 ]
+
+const searchTerm = ref('')
+
+const filteredItems = computed(() => {
+  if (!searchTerm.value.trim()) {
+    return options
+  }
+  return options.filter((item) => {
+    if ('type' in item) {
+      return false
+    }
+    return matchesWordStart(item.name, searchTerm.value)
+  })
+})
 </script>
 
 <template>
@@ -30,18 +72,30 @@ const options: SelectItem[] = [
     class="grow"
   >
     <template #default="{ error }">
-      <ConnectSelect
-        :id="`${parentId}-input-country`"
-        v-model="model"
+      <ConnectFloatingLabel
+        :id="`${parentId}-input-country-label`"
         :label="$t('connect.label.country')"
-        :items="options"
-        value-key="alpha_2"
-        label-key="name"
-        class="w-full"
-        :disabled
-        :required
-        @change="$emit('change')"
-      />
+        variant="input"
+      >
+        <UInputMenu
+          :id="`${parentId}-input-country`"
+          v-model="model"
+          v-model:search-term="searchTerm"
+          :data-testid="`${parentId}-input-country`"
+          :aria-labelledby="`${parentId}-input-country-label`"
+          ignore-filter
+          open-on-focus
+          :items="filteredItems"
+          value-key="alpha_2"
+          label-key="name"
+          placeholder="&nbsp;"
+          class="w-full"
+          :ui="{ viewport: 'overflow-x-hidden' }"
+          :disabled
+          :required
+          @change="$emit('change')"
+        />
+      </ConnectFloatingLabel>
       <div
         v-if="!$slots.help && !error"
         class="h-4 mt-1"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.7.11",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "github:bcgov/connect-nuxt"
@@ -9,19 +9,19 @@
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
-    "@axe-core/playwright": "4.11.3",
-    "dotenv": "17.4.2",
-    "nuxt": "4.4.8",
+    "@axe-core/playwright": "4.13.0",
+    "dotenv": "18.0.4",
+    "nuxt": "4.5.2",
     "typescript": "6.0.3",
-    "vue-tsc": "3.3.1",
+    "vue-tsc": "3.3.11",
     "@sbc-connect/eslint-config": "0.0.8",
     "@sbc-connect/playwright-config": "0.2.1",
     "@sbc-connect/vitest-config": "0.2.0"
   },
   "dependencies": {
-    "country-codes-list": "2.0.0",
+    "country-codes-list": "3.2.0",
     "vue-country-flag-next": "2.3.2",
-    "@sbc-connect/nuxt-base": "0.13.3"
+    "@sbc-connect/nuxt-base": "0.14.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",