feat(publish): support search for language list

zio/stable
三咲智子 2023-01-03 04:56:12 +08:00
parent bb4fd74ce3
commit 296a7b6eae
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
1 changed files with 32 additions and 8 deletions

View File

@ -4,6 +4,7 @@ import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core' import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import Fuse from 'fuse.js'
import type { Draft } from '~/types' import type { Draft } from '~/types'
type FileUploadError = [filename: string, message: string] type FileUploadError = [filename: string, message: string]
@ -185,6 +186,29 @@ async function onDrop(files: File[] | null) {
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop) const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
const languageKeyword = $ref('')
const languageList: {
code: string | null
nativeName: string
name?: string
}[] = [{
code: null,
nativeName: 'None',
}, ...ISO6391.getAllCodes().map(code => ({
code,
nativeName: ISO6391.getNativeName(code),
name: ISO6391.getName(code),
}))]
const fuse = new Fuse(languageList, {
keys: ['code', 'nativeName', 'name'],
shouldSort: true,
})
const languages = $computed(() =>
languageKeyword.trim()
? fuse.search(languageKeyword).map(r => r.item)
: languageList,
)
defineExpose({ defineExpose({
focusEditor: () => { focusEditor: () => {
editor.value?.commands?.focus?.() editor.value?.commands?.focus?.()
@ -336,24 +360,24 @@ defineExpose({
</button> </button>
<template #popper> <template #popper>
<div min-w-80> <div min-w-80 p3>
<!-- TODO search lang --> <input
<!-- <input v-model="languageKeyword"
placeholder="Search" placeholder="Search"
p2 mb2 border-rounded w-full bg-transparent p2 mb2 border-rounded w-full bg-transparent
outline-none border="~ base" outline-none border="~ base"
> --> >
<div max-h-40vh overflow-auto> <div max-h-40vh overflow-auto>
<CommonDropdownItem <CommonDropdownItem
v-for="code in [null, ...ISO6391.getAllCodes()]" v-for="{ code, nativeName, name } in languages"
:key="code" :key="code"
:checked="code === (draft.params.language || null)" :checked="code === (draft.params.language || null)"
@click="chooseLanguage(code)" @click="chooseLanguage(code)"
> >
{{ code ? ISO6391.getNativeName(code) : 'None' }} {{ nativeName }}
<template #description> <template #description>
<template v-if="code"> <template v-if="name">
{{ ISO6391.getName(code) }} {{ name }}
</template> </template>
</template> </template>
</CommonDropdownItem> </CommonDropdownItem>