feat: added autocomplete component

feat: added autocomplete component

Author: baiwusanyu-c

components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap

@@ -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> "`;