Ronni Baslund
17ffd95a70
Upgrade both Nuxt apps to Nuxt 4.4.6 (vue-tsc 3, TypeScript 5.6, undici 7) and add a root tsconfig.json to each app. Fix the strict-null / noUncheckedIndexedAccess errors surfaced by Nuxt 4's stricter generated tsconfig and vue-tsc 3. Drop the nuxt-oidc-auth pnpm patch (Nuxt 4 fixes the prepare:types crash natively).
342 lines
10 KiB
Vue
342 lines
10 KiB
Vue
<script setup lang="ts">
|
|
// Reusable country picker. v-model stores ISO 3166-1 alpha-2 codes ('DK',
|
|
// 'GB', ...), displays the full name in the input, and filters on either
|
|
// name or code as the user types. Keyboard nav: ↑/↓ to move, Enter to
|
|
// select, Esc to close.
|
|
//
|
|
// Lives in packages/ui/components and is auto-imported by both Nuxt apps
|
|
// (portal + operator) via their nuxt.config.ts `components.dirs` entry.
|
|
// The docker-compose mount `../../packages:/shared-packages:ro` makes the
|
|
// directory visible inside each dev container.
|
|
//
|
|
// To extend the country list, add { code, name } pairs to COUNTRIES below.
|
|
// Codes must be 2 uppercase letters (matches the platform-api DTO).
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: string
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
/** Limits how many options render at once. Default 60 — enough for the
|
|
* common-case "type a few letters" workflow without dumping all ~250
|
|
* countries into the DOM on focus. */
|
|
maxResults?: number
|
|
}>(),
|
|
{ placeholder: 'Country', disabled: false, maxResults: 60 },
|
|
)
|
|
const emit = defineEmits<{ 'update:modelValue': [string] }>()
|
|
|
|
interface Country { code: string; name: string }
|
|
|
|
// ISO 3166-1 alpha-2 list. Trimmed to the entries we expect Dezky tenants
|
|
// + partners to come from in practice — primarily EU/EEA/Nordic, plus
|
|
// English-speaking + major economies. Add more as customer demand surfaces.
|
|
const COUNTRIES: readonly Country[] = [
|
|
{ code: 'AD', name: 'Andorra' },
|
|
{ code: 'AE', name: 'United Arab Emirates' },
|
|
{ code: 'AR', name: 'Argentina' },
|
|
{ code: 'AT', name: 'Austria' },
|
|
{ code: 'AU', name: 'Australia' },
|
|
{ code: 'BE', name: 'Belgium' },
|
|
{ code: 'BG', name: 'Bulgaria' },
|
|
{ code: 'BR', name: 'Brazil' },
|
|
{ code: 'CA', name: 'Canada' },
|
|
{ code: 'CH', name: 'Switzerland' },
|
|
{ code: 'CL', name: 'Chile' },
|
|
{ code: 'CN', name: 'China' },
|
|
{ code: 'CY', name: 'Cyprus' },
|
|
{ code: 'CZ', name: 'Czechia' },
|
|
{ code: 'DE', name: 'Germany' },
|
|
{ code: 'DK', name: 'Denmark' },
|
|
{ code: 'EE', name: 'Estonia' },
|
|
{ code: 'ES', name: 'Spain' },
|
|
{ code: 'FI', name: 'Finland' },
|
|
{ code: 'FO', name: 'Faroe Islands' },
|
|
{ code: 'FR', name: 'France' },
|
|
{ code: 'GB', name: 'United Kingdom' },
|
|
{ code: 'GL', name: 'Greenland' },
|
|
{ code: 'GR', name: 'Greece' },
|
|
{ code: 'HK', name: 'Hong Kong' },
|
|
{ code: 'HR', name: 'Croatia' },
|
|
{ code: 'HU', name: 'Hungary' },
|
|
{ code: 'ID', name: 'Indonesia' },
|
|
{ code: 'IE', name: 'Ireland' },
|
|
{ code: 'IL', name: 'Israel' },
|
|
{ code: 'IN', name: 'India' },
|
|
{ code: 'IS', name: 'Iceland' },
|
|
{ code: 'IT', name: 'Italy' },
|
|
{ code: 'JP', name: 'Japan' },
|
|
{ code: 'KR', name: 'South Korea' },
|
|
{ code: 'LI', name: 'Liechtenstein' },
|
|
{ code: 'LT', name: 'Lithuania' },
|
|
{ code: 'LU', name: 'Luxembourg' },
|
|
{ code: 'LV', name: 'Latvia' },
|
|
{ code: 'MC', name: 'Monaco' },
|
|
{ code: 'MT', name: 'Malta' },
|
|
{ code: 'MX', name: 'Mexico' },
|
|
{ code: 'MY', name: 'Malaysia' },
|
|
{ code: 'NL', name: 'Netherlands' },
|
|
{ code: 'NO', name: 'Norway' },
|
|
{ code: 'NZ', name: 'New Zealand' },
|
|
{ code: 'PH', name: 'Philippines' },
|
|
{ code: 'PL', name: 'Poland' },
|
|
{ code: 'PT', name: 'Portugal' },
|
|
{ code: 'RO', name: 'Romania' },
|
|
{ code: 'SA', name: 'Saudi Arabia' },
|
|
{ code: 'SE', name: 'Sweden' },
|
|
{ code: 'SG', name: 'Singapore' },
|
|
{ code: 'SI', name: 'Slovenia' },
|
|
{ code: 'SK', name: 'Slovakia' },
|
|
{ code: 'SM', name: 'San Marino' },
|
|
{ code: 'TH', name: 'Thailand' },
|
|
{ code: 'TR', name: 'Türkiye' },
|
|
{ code: 'TW', name: 'Taiwan' },
|
|
{ code: 'UA', name: 'Ukraine' },
|
|
{ code: 'US', name: 'United States' },
|
|
{ code: 'VA', name: 'Vatican City' },
|
|
{ code: 'VN', name: 'Vietnam' },
|
|
{ code: 'ZA', name: 'South Africa' },
|
|
] as const
|
|
|
|
const open = ref(false)
|
|
const query = ref('')
|
|
const activeIndex = ref(-1)
|
|
const inputRef = ref<HTMLInputElement | null>(null)
|
|
const listRef = ref<HTMLUListElement | null>(null)
|
|
|
|
// Fixed-position coordinates for the teleported dropdown. Recomputed on
|
|
// open and on scroll/resize so the dropdown follows the input even when
|
|
// the user scrolls the modal body underneath it.
|
|
const dropdownStyle = ref<{ top: string; left: string; width: string }>({
|
|
top: '0px',
|
|
left: '0px',
|
|
width: '0px',
|
|
})
|
|
|
|
function reposition() {
|
|
const el = inputRef.value
|
|
if (!el) return
|
|
const r = el.getBoundingClientRect()
|
|
dropdownStyle.value = {
|
|
top: `${r.bottom + 4}px`,
|
|
left: `${r.left}px`,
|
|
width: `${r.width}px`,
|
|
}
|
|
}
|
|
|
|
const selected = computed<Country | undefined>(() =>
|
|
COUNTRIES.find((c) => c.code === props.modelValue.toUpperCase()),
|
|
)
|
|
|
|
// What the input shows: the filter query while the dropdown is open (so
|
|
// typing keeps appearing), or the selected country's full name otherwise.
|
|
const displayValue = computed(() =>
|
|
open.value ? query.value : (selected.value?.name ?? ''),
|
|
)
|
|
|
|
const filtered = computed<Country[]>(() => {
|
|
const q = query.value.trim().toLowerCase()
|
|
if (!q) return COUNTRIES.slice(0, props.maxResults)
|
|
return COUNTRIES.filter(
|
|
(c) => c.name.toLowerCase().includes(q) || c.code.toLowerCase() === q,
|
|
).slice(0, props.maxResults)
|
|
})
|
|
|
|
function selectCountry(c: Country) {
|
|
emit('update:modelValue', c.code)
|
|
query.value = ''
|
|
activeIndex.value = -1
|
|
open.value = false
|
|
inputRef.value?.blur()
|
|
}
|
|
|
|
function clear() {
|
|
emit('update:modelValue', '')
|
|
}
|
|
|
|
function onFocus() {
|
|
open.value = true
|
|
reposition()
|
|
// Seed activeIndex to the currently selected entry if visible, so ↓ jumps
|
|
// to the next one rather than restarting from the top.
|
|
if (selected.value) {
|
|
const i = filtered.value.findIndex((c) => c.code === selected.value!.code)
|
|
activeIndex.value = i
|
|
}
|
|
}
|
|
|
|
// Keep the teleported dropdown anchored to the input while it's open. We
|
|
// listen with `capture` + `passive` so scrolls in any ancestor (including
|
|
// the modal body) trigger reposition without intercepting events.
|
|
onMounted(() => {
|
|
const onScrollOrResize = () => {
|
|
if (open.value) reposition()
|
|
}
|
|
window.addEventListener('scroll', onScrollOrResize, { capture: true, passive: true })
|
|
window.addEventListener('resize', onScrollOrResize, { passive: true })
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', onScrollOrResize, { capture: true } as EventListenerOptions)
|
|
window.removeEventListener('resize', onScrollOrResize)
|
|
})
|
|
})
|
|
|
|
function onBlur() {
|
|
// Defer so a click on an option commits before we close the dropdown.
|
|
// (mousedown.prevent on the option avoids the blur-then-close race, but
|
|
// keeping the delay handles edge cases like tab-away.)
|
|
setTimeout(() => {
|
|
open.value = false
|
|
query.value = ''
|
|
activeIndex.value = -1
|
|
}, 150)
|
|
}
|
|
|
|
function onInput(e: Event) {
|
|
query.value = (e.target as HTMLInputElement).value
|
|
open.value = true
|
|
reposition()
|
|
activeIndex.value = filtered.value.length > 0 ? 0 : -1
|
|
}
|
|
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault()
|
|
open.value = true
|
|
activeIndex.value = Math.min(activeIndex.value + 1, filtered.value.length - 1)
|
|
scrollActiveIntoView()
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault()
|
|
activeIndex.value = Math.max(activeIndex.value - 1, 0)
|
|
scrollActiveIntoView()
|
|
} else if (e.key === 'Enter') {
|
|
const sel = filtered.value[activeIndex.value]
|
|
if (activeIndex.value >= 0 && sel) {
|
|
e.preventDefault()
|
|
selectCountry(sel)
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
open.value = false
|
|
activeIndex.value = -1
|
|
inputRef.value?.blur()
|
|
} else if (e.key === 'Backspace' && !query.value && selected.value) {
|
|
// Empty input + Backspace clears the current selection.
|
|
clear()
|
|
}
|
|
}
|
|
|
|
function scrollActiveIntoView() {
|
|
nextTick(() => {
|
|
const el = listRef.value?.querySelector('li.active') as HTMLElement | null
|
|
el?.scrollIntoView({ block: 'nearest' })
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cs">
|
|
<input
|
|
ref="inputRef"
|
|
type="text"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false"
|
|
name="dezky-country-search"
|
|
data-1p-ignore="true"
|
|
data-lpignore="true"
|
|
data-bwignore="true"
|
|
data-form-type="other"
|
|
:value="displayValue"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@focus="onFocus"
|
|
@blur="onBlur"
|
|
@input="onInput"
|
|
@keydown="onKey"
|
|
/>
|
|
<Teleport to="body">
|
|
<ul
|
|
v-if="open && filtered.length > 0"
|
|
ref="listRef"
|
|
class="cs-dropdown"
|
|
role="listbox"
|
|
:style="dropdownStyle"
|
|
>
|
|
<li
|
|
v-for="(c, i) in filtered"
|
|
:key="c.code"
|
|
role="option"
|
|
:aria-selected="c.code === modelValue"
|
|
:class="{ active: i === activeIndex, selected: c.code === modelValue }"
|
|
@mousedown.prevent="selectCountry(c)"
|
|
>
|
|
<span class="name">{{ c.name }}</span>
|
|
<span class="code">{{ c.code }}</span>
|
|
</li>
|
|
</ul>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cs {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
input:focus { outline: none; border-color: var(--border-hi); }
|
|
input:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
/* Dropdown styles must NOT be scoped — the <ul> teleports to body, where
|
|
scoped-component selectors don't match. Top/left/width come from the
|
|
reposition() inline style; everything else lives here. */
|
|
</style>
|
|
|
|
<style>
|
|
.cs-dropdown {
|
|
position: fixed;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
padding: 4px;
|
|
list-style: none;
|
|
background: var(--elevated, var(--surface));
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.cs-dropdown li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 7px 10px;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.cs-dropdown li:hover,
|
|
.cs-dropdown li.active {
|
|
background: var(--surface);
|
|
}
|
|
.cs-dropdown li.selected .name { font-weight: 600; }
|
|
.cs-dropdown li .code {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-mute);
|
|
}
|
|
</style>
|