52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import Fuse from 'fuse.js'
|
|
|
|
let { modelValue } = $defineModel<{
|
|
modelValue: string
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const languageKeyword = $ref('')
|
|
|
|
const fuse = new Fuse(languagesNameList, {
|
|
keys: ['code', 'nativeName', 'name'],
|
|
shouldSort: true,
|
|
})
|
|
|
|
const languages = $computed(() =>
|
|
languageKeyword.trim()
|
|
? fuse.search(languageKeyword).map(r => r.item)
|
|
: [...languagesNameList].sort(({ code: a }, { code: b }) => {
|
|
return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
|
|
}),
|
|
)
|
|
|
|
function chooseLanguage(language: string) {
|
|
modelValue = language
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div relative of-x-hidden>
|
|
<div p2>
|
|
<input
|
|
v-model="languageKeyword"
|
|
:placeholder="t('language.search')"
|
|
p2 border-rounded w-full bg-transparent
|
|
outline-none border="~ base"
|
|
>
|
|
</div>
|
|
<div max-h-40vh overflow-auto>
|
|
<CommonDropdownItem
|
|
v-for="{ code, nativeName, name } in languages"
|
|
:key="code"
|
|
:text="nativeName"
|
|
:description="name"
|
|
:checked="code === modelValue"
|
|
@click="chooseLanguage(code)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|