elk/components/publish/PublishLanguagePicker.vue

80 lines
2.1 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import Fuse from 'fuse.js'
const modelValue = defineModel<string>({ required: true })
const { t } = useI18n()
const userSettings = useUserSettings()
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.value.trim()
? fuse.search(languageKeyword.value).map(r => r.item)
: [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
.sort(({ code: a }, { code: b }) => {
// Put English on the top
if (a === 'en')
return -1
return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
}),
)
const preferredLanguages = computed(() => {
const result = []
for (const langCode of userSettings.value.disabledTranslationLanguages) {
const completeLang = languagesNameList.find(listEntry => listEntry.code === langCode)
if (completeLang)
result.push(completeLang)
}
return result
},
)
2023-01-04 10:21:18 +00:00
function chooseLanguage(language: string) {
modelValue.value = 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>
<template v-if="!languageKeyword.trim()">
<CommonDropdownItem
v-for="{ code, nativeName, name } in preferredLanguages"
:key="code"
:text="nativeName"
:description="name"
:checked="code === modelValue"
@click="chooseLanguage(code)"
/>
<hr class="border-base ">
</template>
<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>