@nexxtmove/ui 0.1.67 → 0.1.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,7 +24,8 @@
     "@number-flow/vue": "^0.5.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "reka-ui": "^2.9.2"
+    "flag-icons": "^7.5.0",
+    "reka-ui": "^2.9.6"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",
@@ -32,43 +33,43 @@
   },
   "devDependencies": {
     "@awesome.me/kit-37b149f3ef": "^1.0.8",
-    "@eslint/js": "^9.39.2",
-    "@nuxt/kit": "^4.3.1",
-    "@nuxt/schema": "^4.3.1",
-    "@storybook/addon-a11y": "^10.3.5",
+    "@eslint/js": "^10.0.1",
+    "@nuxt/kit": "^4.4.4",
+    "@nuxt/schema": "^4.4.4",
+    "@storybook/addon-a11y": "^10.3.6",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/builder-vite": "^10.3.5",
-    "@storybook/vue3-vite": "^10.3.5",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.8",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/builder-vite": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/coverage-v8": "^4.0.16",
-    "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.9.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.9",
+    "@vue/tsconfig": "^0.9.1",
     "consola": "^3.4.2",
-    "eslint": "^9.39.2",
+    "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.3.5",
-    "eslint-plugin-vue": "^10.6.2",
-    "globals": "^17.0.0",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "eslint-plugin-storybook": "10.3.6",
+    "eslint-plugin-vue": "^10.9.0",
+    "globals": "^17.5.0",
+    "jsdom": "^29.1.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.3.5",
-    "typescript-eslint": "^8.52.0",
-    "vite": "^7.3.1",
+    "storybook": "^10.3.6",
+    "typescript-eslint": "^8.59.1",
+    "vite": "^8.0.10",
     "vite-plugin-dts": "^4.5.4",
-    "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.0.16"
+    "vite-svg-loader": "^5.1.1",
+    "vitest": "^4.1.5"
   },
   "engines": {
     "node": ">=22.18.0"

package/src/components/CountrySelect/CountrySelect.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import { ref, computed, nextTick } from 'vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+import { countries } from './countries'
+
+defineOptions({ name: 'NexxtCountrySelect' })
+
+const generateId = () => 'country-select-' + Math.random().toString(36).slice(2, 10)
+const selectId = generateId()
+
+interface NexxtCountrySelectProps {
+  placeholder?: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+  pinnedCountries?: string[]
+}
+
+const props = withDefaults(defineProps<NexxtCountrySelectProps>(), {
+  placeholder: 'Selecteer een land...',
+  pinnedCountries: () => [],
+})
+
+const model = defineModel<string | null>({ default: null })
+const search = ref('')
+const inputRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+
+const selectedCountry = computed(() => countries.find((c) => c.name === model.value) ?? null)
+
+const sortedCountries = computed(() => {
+  const pinned = props.pinnedCountries
+    .map((code) => countries.find((c) => c.code === code))
+    .filter((c) => c !== undefined)
+  const pinnedCodes = new Set(props.pinnedCountries)
+  const rest = countries
+    .filter((c) => !pinnedCodes.has(c.code))
+    .sort((a, b) => a.name.localeCompare(b.name, 'nl'))
+  return [...pinned, ...rest]
+})
+
+const filteredCountries = computed(() => {
+  const q = search.value.toLowerCase()
+  return q
+    ? sortedCountries.value.filter((c) => c.name.toLowerCase().includes(q))
+    : sortedCountries.value
+})
+
+const select = (name: string, close: () => void) => {
+  model.value = name
+  search.value = ''
+  close()
+}
+
+const onOpen = async () => {
+  await nextTick()
+  inputRef.value?.$el.querySelector('input')?.focus()
+}
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1">
+    <label
+      v-if="label"
+      class="text-color-gray-700 justify-start body-normal text-sm"
+      :for="selectId"
+    >
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <NexxtFloatingPanel placement="bottom" match-width @open="onOpen">
+      <template #trigger="{ isOpen, toggle }">
+        <div
+          :id="selectId"
+          role="combobox"
+          :aria-expanded="isOpen"
+          aria-haspopup="listbox"
+          tabindex="0"
+          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          :class="error ? 'ring-brick-400' : 'ring-gray-200'"
+          @click="toggle"
+          @keydown.enter.prevent="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <span
+            class="flex h-10 w-full min-w-60 items-center gap-2 pl-3 text-sm"
+            :class="selectedCountry ? 'text-gray-900' : 'text-gray-400'"
+          >
+            <span
+              v-if="selectedCountry"
+              :class="`fi fi-${selectedCountry.code}`"
+              class="shrink-0"
+            />
+            {{ selectedCountry?.name ?? placeholder }}
+          </span>
+          <NexxtIcon
+            name="chevron-down"
+            class="shrink-0 text-gray-400 transition-all duration-200 group-hover:text-cornflower-blue-600"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </div>
+      </template>
+
+      <template #content="{ close }">
+        <div class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100">
+          <div class="border-b border-gray-100 p-2">
+            <NexxtInputField
+              ref="inputRef"
+              v-model="search"
+              class="w-full"
+              left-icon="magnifying-glass"
+              placeholder="Zoeken..."
+            />
+          </div>
+          <ul
+            role="listbox"
+            class="max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+          >
+            <li
+              v-for="country in filteredCountries"
+              :key="country.code"
+              role="option"
+              :aria-selected="model === country.name"
+              class="flex cursor-pointer items-center gap-3 px-4 py-3 text-sm text-gray-900 transition-colors duration-150 hover:bg-gray-50 hover:text-purple-600"
+              :class="{ 'font-medium text-cornflower-blue-600': model === country.name }"
+              @click="select(country.name, close)"
+            >
+              <span :class="`fi fi-${country.code}`" class="shrink-0" />
+              {{ country.name }}
+              <NexxtIcon v-if="model === country.name" name="check" class="ml-auto text-xs" />
+            </li>
+            <li v-if="filteredCountries.length === 0" class="px-4 py-3 text-sm text-gray-400">
+              Geen landen gevonden
+            </li>
+          </ul>
+        </div>
+      </template>
+    </NexxtFloatingPanel>
+
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-1"
+    >
+      <p v-if="error && errorMessage" class="text-sm text-brick-400">
+        {{ errorMessage }}
+      </p>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>

package/src/components/CountrySelect/countries.ts

@@ -0,0 +1,196 @@
+export type Country = { code: string; name: string }
+
+export const countries: Country[] = [
+  { code: 'af', name: 'Afghanistan' },
+  { code: 'al', name: 'Albanië' },
+  { code: 'dz', name: 'Algerije' },
+  { code: 'ad', name: 'Andorra' },
+  { code: 'ao', name: 'Angola' },
+  { code: 'ag', name: 'Antigua en Barbuda' },
+  { code: 'ar', name: 'Argentinië' },
+  { code: 'am', name: 'Armenië' },
+  { code: 'au', name: 'Australië' },
+  { code: 'at', name: 'Oostenrijk' },
+  { code: 'az', name: 'Azerbeidzjan' },
+  { code: 'bs', name: "Bahama's" },
+  { code: 'bh', name: 'Bahrein' },
+  { code: 'bd', name: 'Bangladesh' },
+  { code: 'bb', name: 'Barbados' },
+  { code: 'by', name: 'Wit-Rusland' },
+  { code: 'be', name: 'België' },
+  { code: 'bz', name: 'Belize' },
+  { code: 'bj', name: 'Benin' },
+  { code: 'bt', name: 'Bhutan' },
+  { code: 'bo', name: 'Bolivia' },
+  { code: 'ba', name: 'Bosnië en Herzegovina' },
+  { code: 'bw', name: 'Botswana' },
+  { code: 'br', name: 'Brazilië' },
+  { code: 'bn', name: 'Brunei' },
+  { code: 'bg', name: 'Bulgarije' },
+  { code: 'bf', name: 'Burkina Faso' },
+  { code: 'bi', name: 'Burundi' },
+  { code: 'cv', name: 'Kaapverdië' },
+  { code: 'kh', name: 'Cambodja' },
+  { code: 'cm', name: 'Kameroen' },
+  { code: 'ca', name: 'Canada' },
+  { code: 'cf', name: 'Centraal-Afrikaanse Republiek' },
+  { code: 'td', name: 'Tsjaad' },
+  { code: 'cl', name: 'Chili' },
+  { code: 'cn', name: 'China' },
+  { code: 'co', name: 'Colombia' },
+  { code: 'km', name: 'Comoren' },
+  { code: 'cd', name: 'Congo (DRC)' },
+  { code: 'cg', name: 'Congo (Republiek)' },
+  { code: 'cr', name: 'Costa Rica' },
+  { code: 'hr', name: 'Kroatië' },
+  { code: 'cu', name: 'Cuba' },
+  { code: 'cy', name: 'Cyprus' },
+  { code: 'cz', name: 'Tsjechië' },
+  { code: 'dk', name: 'Denemarken' },
+  { code: 'dj', name: 'Djibouti' },
+  { code: 'dm', name: 'Dominica' },
+  { code: 'do', name: 'Dominicaanse Republiek' },
+  { code: 'ec', name: 'Ecuador' },
+  { code: 'eg', name: 'Egypte' },
+  { code: 'sv', name: 'El Salvador' },
+  { code: 'gq', name: 'Equatoriaal-Guinea' },
+  { code: 'er', name: 'Eritrea' },
+  { code: 'ee', name: 'Estland' },
+  { code: 'sz', name: 'Eswatini' },
+  { code: 'et', name: 'Ethiopië' },
+  { code: 'fj', name: 'Fiji' },
+  { code: 'fi', name: 'Finland' },
+  { code: 'fr', name: 'Frankrijk' },
+  { code: 'ga', name: 'Gabon' },
+  { code: 'gm', name: 'Gambia' },
+  { code: 'ge', name: 'Georgië' },
+  { code: 'de', name: 'Duitsland' },
+  { code: 'gh', name: 'Ghana' },
+  { code: 'gr', name: 'Griekenland' },
+  { code: 'gd', name: 'Grenada' },
+  { code: 'gt', name: 'Guatemala' },
+  { code: 'gn', name: 'Guinee' },
+  { code: 'gw', name: 'Guinee-Bissau' },
+  { code: 'gy', name: 'Guyana' },
+  { code: 'ht', name: 'Haïti' },
+  { code: 'hn', name: 'Honduras' },
+  { code: 'hu', name: 'Hongarije' },
+  { code: 'is', name: 'IJsland' },
+  { code: 'in', name: 'India' },
+  { code: 'id', name: 'Indonesië' },
+  { code: 'ir', name: 'Iran' },
+  { code: 'iq', name: 'Irak' },
+  { code: 'ie', name: 'Ierland' },
+  { code: 'il', name: 'Israël' },
+  { code: 'it', name: 'Italië' },
+  { code: 'jm', name: 'Jamaica' },
+  { code: 'jp', name: 'Japan' },
+  { code: 'jo', name: 'Jordanië' },
+  { code: 'kz', name: 'Kazachstan' },
+  { code: 'ke', name: 'Kenia' },
+  { code: 'ki', name: 'Kiribati' },
+  { code: 'kw', name: 'Koeweit' },
+  { code: 'kg', name: 'Kirgizië' },
+  { code: 'la', name: 'Laos' },
+  { code: 'lv', name: 'Letland' },
+  { code: 'lb', name: 'Libanon' },
+  { code: 'ls', name: 'Lesotho' },
+  { code: 'lr', name: 'Liberia' },
+  { code: 'ly', name: 'Libië' },
+  { code: 'li', name: 'Liechtenstein' },
+  { code: 'lt', name: 'Litouwen' },
+  { code: 'lu', name: 'Luxemburg' },
+  { code: 'mg', name: 'Madagaskar' },
+  { code: 'mw', name: 'Malawi' },
+  { code: 'my', name: 'Maleisië' },
+  { code: 'mv', name: 'Malediven' },
+  { code: 'ml', name: 'Mali' },
+  { code: 'mt', name: 'Malta' },
+  { code: 'mh', name: 'Marshalleilanden' },
+  { code: 'mr', name: 'Mauritanië' },
+  { code: 'mu', name: 'Mauritius' },
+  { code: 'mx', name: 'Mexico' },
+  { code: 'fm', name: 'Micronesië' },
+  { code: 'md', name: 'Moldavië' },
+  { code: 'mc', name: 'Monaco' },
+  { code: 'mn', name: 'Mongolië' },
+  { code: 'me', name: 'Montenegro' },
+  { code: 'ma', name: 'Marokko' },
+  { code: 'mz', name: 'Mozambique' },
+  { code: 'mm', name: 'Myanmar' },
+  { code: 'na', name: 'Namibië' },
+  { code: 'nr', name: 'Nauru' },
+  { code: 'np', name: 'Nepal' },
+  { code: 'nl', name: 'Nederland' },
+  { code: 'nz', name: 'Nieuw-Zeeland' },
+  { code: 'ni', name: 'Nicaragua' },
+  { code: 'ne', name: 'Niger' },
+  { code: 'ng', name: 'Nigeria' },
+  { code: 'kp', name: 'Noord-Korea' },
+  { code: 'mk', name: 'Noord-Macedonië' },
+  { code: 'no', name: 'Noorwegen' },
+  { code: 'om', name: 'Oman' },
+  { code: 'pk', name: 'Pakistan' },
+  { code: 'pw', name: 'Palau' },
+  { code: 'pa', name: 'Panama' },
+  { code: 'pg', name: 'Papoea-Nieuw-Guinea' },
+  { code: 'py', name: 'Paraguay' },
+  { code: 'pe', name: 'Peru' },
+  { code: 'ph', name: 'Filipijnen' },
+  { code: 'pl', name: 'Polen' },
+  { code: 'pt', name: 'Portugal' },
+  { code: 'qa', name: 'Qatar' },
+  { code: 'ro', name: 'Roemenië' },
+  { code: 'ru', name: 'Rusland' },
+  { code: 'rw', name: 'Rwanda' },
+  { code: 'kn', name: 'Saint Kitts en Nevis' },
+  { code: 'lc', name: 'Saint Lucia' },
+  { code: 'vc', name: 'Saint Vincent en de Grenadines' },
+  { code: 'ws', name: 'Samoa' },
+  { code: 'sm', name: 'San Marino' },
+  { code: 'st', name: 'Sao Tomé en Principe' },
+  { code: 'sa', name: 'Saoedi-Arabië' },
+  { code: 'sn', name: 'Senegal' },
+  { code: 'rs', name: 'Servië' },
+  { code: 'sc', name: 'Seychellen' },
+  { code: 'sl', name: 'Sierra Leone' },
+  { code: 'sg', name: 'Singapore' },
+  { code: 'sk', name: 'Slowakije' },
+  { code: 'si', name: 'Slovenië' },
+  { code: 'sb', name: 'Salomonseilanden' },
+  { code: 'so', name: 'Somalië' },
+  { code: 'za', name: 'Zuid-Afrika' },
+  { code: 'ss', name: 'Zuid-Sudan' },
+  { code: 'es', name: 'Spanje' },
+  { code: 'lk', name: 'Sri Lanka' },
+  { code: 'sd', name: 'Soedan' },
+  { code: 'sr', name: 'Suriname' },
+  { code: 'se', name: 'Zweden' },
+  { code: 'ch', name: 'Zwitserland' },
+  { code: 'sy', name: 'Syrië' },
+  { code: 'tw', name: 'Taiwan' },
+  { code: 'tj', name: 'Tadzjikistan' },
+  { code: 'tz', name: 'Tanzania' },
+  { code: 'th', name: 'Thailand' },
+  { code: 'tl', name: 'Oost-Timor' },
+  { code: 'tg', name: 'Togo' },
+  { code: 'to', name: 'Tonga' },
+  { code: 'tt', name: 'Trinidad en Tobago' },
+  { code: 'tn', name: 'Tunesië' },
+  { code: 'tr', name: 'Turkije' },
+  { code: 'tm', name: 'Turkmenistan' },
+  { code: 'tv', name: 'Tuvalu' },
+  { code: 'ug', name: 'Oeganda' },
+  { code: 'ua', name: 'Oekraïne' },
+  { code: 'ae', name: 'Verenigde Arabische Emiraten' },
+  { code: 'gb', name: 'Verenigd Koninkrijk' },
+  { code: 'us', name: 'Verenigde Staten' },
+  { code: 'uy', name: 'Uruguay' },
+  { code: 'uz', name: 'Oezbekistan' },
+  { code: 'vu', name: 'Vanuatu' },
+  { code: 've', name: 'Venezuela' },
+  { code: 'vn', name: 'Vietnam' },
+  { code: 'ye', name: 'Jemen' },
+  { code: 'zm', name: 'Zambia' },
+  { code: 'zw', name: 'Zimbabwe' },
+]

package/src/components/Tabs/Tabs.vue

@@ -39,7 +39,7 @@ const updateSlider = async () => {
 }
 
 const onKeydown = (event: KeyboardEvent, index: number) => {
-  let next = index
+  let next: number
   if (event.key === 'ArrowRight') next = (index + 1) % props.tabs.length
   else if (event.key === 'ArrowLeft') next = (index - 1 + props.tabs.length) % props.tabs.length
   else if (event.key === 'Home') next = 0

package/src/components.json

@@ -9,6 +9,7 @@
   "NexxtCombobox": "components/Combobox/Combobox.vue",
   "NexxtComboboxPanel": "components/ComboboxPanel/ComboboxPanel.vue",
   "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
+  "NexxtCountrySelect": "components/CountrySelect/CountrySelect.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",

package/src/index.ts

@@ -9,6 +9,7 @@ export { default as NexxtChip } from './components/Chip/Chip.vue'
 export { default as NexxtCombobox } from './components/Combobox/Combobox.vue'
 export { default as NexxtComboboxPanel } from './components/ComboboxPanel/ComboboxPanel.vue'
 export { default as NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.vue'
+export { default as NexxtCountrySelect } from './components/CountrySelect/CountrySelect.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/DoughnutChart/DoughnutChart.vue'