Skip to content

Commit

Permalink
feat: added autocomplete component
Browse files Browse the repository at this point in the history 
feat: added autocomplete component
  • Loading branch information
@baiwusanyu-c
baiwusanyu-c committed Feb 22, 2024
2 parents 33411de + 95d9b44 commit 8d4a963
Show file tree
Hide file tree
Showing 34 changed files with 1,379 additions and 102 deletions.
35 changes: 35 additions & 0 deletions components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Test: KAutoComplete > basic functional testing 1`] = `
"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--prepend k-input--prepend__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-search k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="please select"> </div> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--append k-input--append__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-logo-svelte k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button></div> </div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both, __svelte_1936640108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div slot="contentEl" style="overflow-y: auto; min-width: initial; max-height: 250px;"><div class="k-virtual-list k-scrollbar" style="overflow-y: auto; height: inherit; --k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent;"> <div class="" style="padding: 0px 0px 0px;"><div class="k-virtual-list--item" data-kv-key="vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue
">vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue</option> </div><div class="k-virtual-list--item" data-kv-key="vuex"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vuex
">vuex</option> </div><div class="k-virtual-list--item" data-kv-key="vue-router"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vue-router
">vue-router</option> </div></div> <div class="shepherd" style="width: 100%; height: 0px;"></div></div></div> </div>"
`;

exports[`Test: KAutoComplete > props: cls 1`] = `"<div aria-hidden="true" class="flex k-auto-complete--test" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder=""> </div> </div> </div></div> "`;
exports[`Test: KAutoComplete > props: disabled 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-cur-disabled k-button--disabled k-input--prepend k-input--prepend__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-search k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button> <div class="k-input--base k-input__md k-input__dark k-input__disabled k-input__disabled__dark k-input__hover k-input__focus"> <input class="k-input--inner k-input__disabled k-input__disabled__dark" disabled="" type="text" placeholder="please select"> </div> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-cur-disabled k-button--disabled k-input--append k-input--append__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-logo-svelte k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button></div> </div></div> "`;
exports[`Test: KAutoComplete > props: fitInputWidth 1`] = `
"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--prepend k-input--prepend__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-search k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="please select"> </div> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--append k-input--append__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-logo-svelte k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button></div> </div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div slot="contentEl" style="overflow-y: auto; min-width: initial; max-height: 250px;"><div class="k-virtual-list k-scrollbar" style="overflow-y: auto; height: inherit; --k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent;"> <div class="" style="padding: 0px 0px 0px;"><div class="k-virtual-list--item" data-kv-key="vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue
">vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue</option> </div><div class="k-virtual-list--item" data-kv-key="vuex"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vuex
">vuex</option> </div><div class="k-virtual-list--item" data-kv-key="vue-router"><option class="k-select--option k-select--option__dark k-select--option__hover k-select--option__fit " value="
vue-router
">vue-router</option> </div></div> <div class="shepherd" style="width: 100%; height: 0px;"></div></div></div> </div>"
`;

exports[`Test: KAutoComplete > props: placeholder 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="绣面芙蓉一笑开"> </div> </div> </div></div> "`;
exports[`Test: KAutoComplete > props: size 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__sm k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder=""> </div> </div> </div></div> <div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder=""> </div> </div> </div></div> <div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__lg k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder=""> </div> </div> </div></div> "`;
exports[`Test: KAutoComplete > props: value 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus k-input__rounded"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder=""> </div> </div> </div></div> "`;
exports[`Test: KAutoComplete > slot: default 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--prepend k-input--prepend__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-search k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus"> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="please select"> </div> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--append k-input--append__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-logo-svelte k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button></div> </div></div> <div class="k-popover--base k-popover--base__bottom k-popover--base__bottom__dark k-popover--base__dark px-0 svelte-13arsd0" data-popper-placement="bottom" aria-hidden="true" style="position: fixed; left: 0px; top: 8px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;" data-popper-reference-hidden="" data-popper-escaped=""><div slot="contentEl" style="overflow-y: auto; min-width: initial; max-height: 250px;"><div class="k-virtual-list k-scrollbar" style="overflow-y: auto; height: inherit; --k-scrollbar--thumb__radius: 20px; --k-scrollbar--thumb: var(--ikun-light-800); --k-scrollbar__h: 6px; --k-scrollbar__w: 6px; --k-scrollbar--track__radius: 20px; --k-scrollbar--track: transparent;"> <div class="" style="padding: 0px 0px 0px;"><div class="k-virtual-list--item" data-kv-key="vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue"><div>test vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue</div> </div><div class="k-virtual-list--item" data-kv-key="vuex"><div>test vuex</div> </div><div class="k-virtual-list--item" data-kv-key="vue-router"><div>test vue-router</div> </div></div> <div class="shepherd" style="width: 100%; height: 0px;"></div></div></div> </div>"`;
exports[`Test: KAutoComplete > slot: prefix and suffix 1`] = `"<div aria-hidden="true" class="flex" data-popover-trigger=""><div class="k-auto-complete" slot="triggerEl" aria-hidden="true"><div class="k-input"><button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--prepend k-input--prepend__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-search k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button> <div class="k-input--base k-input__md k-input__dark k-input__hover k-input__focus"><div slot="prefix">🏀</div> <input class="k-input--inner k-input--inner__dark" type="text" placeholder="please select"> <div slot="suffix">🏀</div></div> <button style="border-radius: 4px; font-size: 16px;" class="k-button k-button--base k-button--main__fill k-button--main__hover__fill k-button--main__active k-button--main__focus k-input--append k-input--append__md" aria-hidden="true"><span class="k-icon--base k-icon-transition i-carbon-logo-svelte k-button--main__icon k-button--main__icon__fill" role="" aria-hidden="true" style="width: 16px; height: 16px;"></span> </button></div> </div></div> "`;

0 comments on commit 8d4a963

Please sign in to comment.