elk/components/publish/PublishLanguagePicker.vue

52 lines
1.2 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import Fuse from 'fuse.js'
let { modelValue } = $defineModel<{
2023-01-04 10:21:18 +00:00
modelValue: string
}>()
const { t } = useI18n()
const languageKeyword = $ref('')
2023-01-30 11:09:04 +00:00
const fuse = new Fuse(languagesNameList, {
keys: ['code', 'nativeName', 'name'],
shouldSort: true,
})
const languages = $computed(() =>
languageKeyword.trim()
? fuse.search(languageKeyword).map(r => r.item)
2023-01-30 11:09:04 +00:00
: [...languagesNameList].sort(({ code: a }, { code: b }) => {
2023-01-04 10:21:18 +00:00
return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
}),
)
2023-01-04 10:21:18 +00:00
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"
2023-01-04 10:21:18 +00:00
:text="nativeName"
:description="name"
:checked="code === modelValue"
@click="chooseLanguage(code)"
2023-01-04 10:21:18 +00:00
/>
</div>
</div>
</template>