From d0c6986b1e883bd0b198a2c1238f82fb04968258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Mon, 15 Jan 2024 23:06:59 +0800
Subject: [PATCH 1/8] chore: init commit

---
 .../__test__/auto-complete.spec.ts            |  35 ++
 components/AutoComplete/package.json          |  50 +++
 components/AutoComplete/src/index.svelte      | 101 +++++
 components/AutoComplete/src/index.ts          |   5 +
 components/AutoComplete/src/types.d.ts        |  40 ++
 components/AutoComplete/tsconfig.json         |  12 +
 components/Input/src/types.d.ts               |   1 -
 components/Select/src/index.svelte            |   3 -
 components/index.ts                           |   1 +
 package.json                                  | 397 +++++++++---------
 pnpm-lock.yaml                                | 121 ++++--
 preset/src/shortcuts/index.ts                 |   6 +
 preset/src/shortcuts/src/auto-complete.ts     |   3 +
 13 files changed, 528 insertions(+), 247 deletions(-)
 create mode 100644 components/AutoComplete/__test__/auto-complete.spec.ts
 create mode 100644 components/AutoComplete/package.json
 create mode 100644 components/AutoComplete/src/index.svelte
 create mode 100644 components/AutoComplete/src/index.ts
 create mode 100644 components/AutoComplete/src/types.d.ts
 create mode 100644 components/AutoComplete/tsconfig.json
 create mode 100644 preset/src/shortcuts/src/auto-complete.ts

diff --git a/components/AutoComplete/__test__/auto-complete.spec.ts b/components/AutoComplete/__test__/auto-complete.spec.ts
new file mode 100644
index 00000000..2eadcff5
--- /dev/null
+++ b/components/AutoComplete/__test__/auto-complete.spec.ts
@@ -0,0 +1,35 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import KAutoComplete from '../src';
+
+let host;
+
+const initHost = () => {
+	host = globalThis.document.createElement('div');
+	host.setAttribute('id', 'host');
+	globalThis.document.body.appendChild(host);
+};
+beforeEach(() => {
+	initHost();
+	vi.useFakeTimers();
+});
+afterEach(() => {
+	host.remove();
+	vi.useRealTimers();
+});
+
+describe('Test: KAutoComplete', () => {
+	test('props: cls', async () => {
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				cls: 'k-auto-complete--test'
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(
+			(host)!.innerHTML.includes('k-auto-complete--test')
+		).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+})
+	
\ No newline at end of file
diff --git a/components/AutoComplete/package.json b/components/AutoComplete/package.json
new file mode 100644
index 00000000..2266c1b2
--- /dev/null
+++ b/components/AutoComplete/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@ikun-ui/auto-complete",
+  "version": "0.1.5",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.d.ts",
+  "svelte": "src/index.ts",
+  "keywords": [
+    "svelte",
+    "svelte3",
+    "web component",
+    "component",
+    "react",
+    "vue",
+    "svelte-kit",
+    "dx"
+  ],
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "npm run build:js && npm run build:svelte",
+    "build:js": "tsc -p . --outDir dist/ --rootDir src/",
+    "build:svelte": "svelte-strip strip src/ dist",
+    "publish:pre": "node ../../scripts/pre-publish.js",
+    "publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "svelte": "dist/index.js",
+    "types": "dist/index.d.ts"
+  },
+  "dependencies": {
+    "@ikun-ui/icon": "workspace:*",
+    "@ikun-ui/input": "workspace:*",
+    "@ikun-ui/button": "workspace:*",
+    "@ikun-ui/utils": "workspace:*",
+    "baiwusanyu-utils": "^1.0.18",
+    "clsx": "^2.0.0"
+  },
+  "devDependencies": {
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte-strip": "^2.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
new file mode 100644
index 00000000..081dd89c
--- /dev/null
+++ b/components/AutoComplete/src/index.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import type {AutoCompleteItems, KAutoCompleteProps} from './types';
+    import { createEventDispatcher, tick, getContext } from 'svelte';
+    import { KInput } from '@ikun-ui/input';
+    import { formItemKey, formKey, getPrefixCls } from '@ikun-ui/utils';
+    import clsx from 'clsx';
+    import { isObject } from 'baiwusanyu-utils';
+    import type { CSSObject } from 'unocss';
+    import type { IKunFormInstance } from '@ikun-ui/form';
+
+    export let size: KAutoCompleteProps['size'] = 'md';
+    export let value: KAutoCompleteProps['value'] = '';
+    export let placeholder: KAutoCompleteProps['placeholder'] = '';
+    export let disabled: KAutoCompleteProps['disabled'] = false;
+    export let iconPrefix: KAutoCompleteProps['iconPrefix'] = '';
+    export let iconSuffix: KAutoCompleteProps['iconSuffix'] = '';
+    export let append: KAutoCompleteProps['append'] = '';
+    export let prepend: KAutoCompleteProps['prepend'] = '';
+    export let cls: KAutoCompleteProps['cls'] = undefined;
+    export let attrs: KAutoCompleteProps['attrs'] = {};
+    export let triggerOnFocus: KAutoCompleteProps['triggerOnFocus'] = false
+    export let fetchSuggestions: KAutoCompleteProps['fetchSuggestions'] = undefined
+    export let useCompositionInput: KAutoCompleteProps['useCompositionInput'] = false;
+    /**
+     * @internal
+     */
+    export let isError: KAutoCompleteProps['isError'] = false;
+    /**
+     * @internal
+     */
+    export let center: KAutoCompleteProps['center'] = false;
+    export let clearable: KAutoCompleteProps['clearable'] = false;
+    // class names
+    const prefixCls = getPrefixCls('auto-complete');
+    const cname = clsx(prefixCls, cls)
+
+    const dispatch = createEventDispatcher()
+    let list = [] as AutoCompleteItems[]
+    const handleInput = (e: CustomEvent) => {
+        dispatch('input', e.detail)
+        if(fetchSuggestions){
+            list = fetchSuggestions(e.detail)
+        }
+    }
+    const handleEnter = (e: CustomEvent) => {
+        dispatch('enter', e.detail)
+    }
+    const handleKeydown= (e: CustomEvent) => {
+        dispatch('keydown', e.detail)
+    }
+    const handleChange = (e: CustomEvent) => {
+        dispatch('change', e.detail)
+    }
+    const handleCompositionstart = (e: CustomEvent) => {
+        dispatch('compositionstart', e.detail)
+    }
+
+    const handleCompositionend = (e: CustomEvent) => {
+        dispatch('compositionend', e.detail)
+    }
+
+    const handleCompositionInnput = (e: CustomEvent) => {
+        dispatch('compositionInput', e.detail)
+    }
+
+    const handleTriggerPrepend = (e: CustomEvent) => {
+        dispatch('triggerPrepend', e.detail)
+    }
+
+    const handleTriggerAppend = (e: CustomEvent) => {
+        dispatch('triggerAppend', e.detail)
+    }
+
+</script>
+<div class={cname}
+     {...$$restProps}
+     {...attrs}>
+    <KInput on:input={handleInput}
+            on:enter={handleEnter}
+            on:keydown={handleKeydown}
+            on:change={handleChange}
+            on:compositionstart={handleCompositionstart}
+            on:compositionend={handleCompositionend}
+            on:compositionInput={handleCompositionInnput}
+            on:triggerPrepend={handleTriggerPrepend}
+            on:triggerAppend={handleTriggerAppend}
+            {size}
+            {value}
+            {placeholder}
+            {disabled}
+            {iconPrefix}
+            {iconSuffix}
+            {append}
+            {prepend}
+            {clearable}
+            {useCompositionInput}
+            type="text"
+    />
+    {JSON.stringify(list)}
+</div>
+
diff --git a/components/AutoComplete/src/index.ts b/components/AutoComplete/src/index.ts
new file mode 100644
index 00000000..5115de13
--- /dev/null
+++ b/components/AutoComplete/src/index.ts
@@ -0,0 +1,5 @@
+/// <reference types="./types" />
+import AutoComplete from './index.svelte';
+export { AutoComplete as KAutoComplete };
+
+export default AutoComplete;
\ No newline at end of file
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
new file mode 100644
index 00000000..9c950f86
--- /dev/null
+++ b/components/AutoComplete/src/types.d.ts
@@ -0,0 +1,40 @@
+/// <reference types="svelte" />
+import type { ClassValue } from 'clsx';
+import {IKunSize} from "@ikun-ui/utils";
+export type KAutoCompleteProps = {
+  size: IKunSize;
+  // TODO:
+  value: string;
+  placeholder: string;
+  disabled: boolean;
+  iconPrefix: string;
+  iconSuffix: string;
+  append: string;
+  prepend: string;
+  // TODO:
+  isError: boolean;
+  // TODO:
+  center: boolean;
+  // TODO:输入触发，或聚焦触发
+  triggerOnFocus: boolean;
+  // TODO:
+  fetchSuggestions: undefined | ((params: string | number) => AutoCompleteItems[])
+  cls: ClassValue;
+  attrs: Record<string, string>;
+  useCompositionInput: boolean;
+  clearable: boolean;
+}
+
+export type AutoCompleteItems = {
+  [key: string]: string | number;
+  value: string | number;
+};
+
+// TODO: KAutoComplete events updatedValue
+
+// TODO: KAutoComplete slot prefix
+// TODO: KAutoComplete slot suffix
+// TODO: KAutoComplete slot default
+// TODO: KAutoComplete loading default
+
+// TODO: KForm
diff --git a/components/AutoComplete/tsconfig.json b/components/AutoComplete/tsconfig.json
new file mode 100644
index 00000000..bd4f5280
--- /dev/null
+++ b/components/AutoComplete/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "strict": true,
+    "declaration": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
+  "exclude": ["node_modules/*", "**/*.spec.ts"]
+}
+  
\ No newline at end of file
diff --git a/components/Input/src/types.d.ts b/components/Input/src/types.d.ts
index fc80f3d2..6d9ed35e 100644
--- a/components/Input/src/types.d.ts
+++ b/components/Input/src/types.d.ts
@@ -14,7 +14,6 @@ export type KInputProps = {
 	isError: boolean;
 	center: boolean;
 	search: boolean;
-	errorMsg: string;
 	cls: ClassValue;
 	attrs: Record<string, string>;
 	useCompositionInput: boolean;
diff --git a/components/Select/src/index.svelte b/components/Select/src/index.svelte
index 94242380..23d6f71a 100644
--- a/components/Select/src/index.svelte
+++ b/components/Select/src/index.svelte
@@ -274,10 +274,7 @@
 	// ⭕TODO 选项分组
 	// ⭕TODO 基础多选
 	// ⭕TODO 多选最大显示
-
 	// ⭕TODO 选项筛选
-
-	// ⭕TODO kForm
 </script>
 
 <KPopover
diff --git a/components/index.ts b/components/index.ts
index 736c3499..e2b4e68c 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -61,3 +61,4 @@ export * from '@ikun-ui/image-view';
 export * from '@ikun-ui/flex';
 export * from '@ikun-ui/segmented';
 export * from '@ikun-ui/steps';
+export * from '@ikun-ui/auto-complete';
\ No newline at end of file
diff --git a/package.json b/package.json
index e712f6f2..76054596 100644
--- a/package.json
+++ b/package.json
@@ -1,199 +1,200 @@
 {
-	"name": "@ikun-ui/core",
-	"description": "🐔 A Svelte.js based UnoCSS UI library that allows you to make websites",
-	"packageManager": "pnpm@8.14.0",
-	"type": "module",
-	"version": "0.1.5",
-	"keywords": [
-		"svelte",
-		"svelte3",
-		"web component",
-		"component",
-		"react",
-		"vue",
-		"svelte-kit",
-		"dx"
-	],
-	"license": "MIT",
-	"author": "baiwusanyu-c",
-	"homepage": "https://github.com/ikun-svelte/ikun-ui#readme",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/ikun-svelte/ikun-ui.git"
-	},
-	"bugs": {
-		"url": "https://github.com/ikun-svelte/ikun-ui/issues"
-	},
-	"main": "dist/index.cjs",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"require": "./dist/index.cjs",
-			"import": "./dist/index.js"
-		},
-		"./*": "./*"
-	},
-	"files": [
-		"dist",
-		"*.d.ts"
-	],
-	"engines": {
-		"node": ">=14"
-	},
-	"scripts": {
-		"init": "pnpm i",
-		"dev": "pnpm run build",
-		"dev:docs": "pnpm run --filter @ikun-ui/docs docs:dev",
-		"play": "node scripts/play.js && pnpm run --filter @ikun-ui/play dev",
-		"build": "run-s build:* && run-s build-*",
-		"build-preset": "pnpm run --filter @ikun-ui/preset build",
-		"build-lib": "tsup --config tsup.config.ts",
-		"build:utils": "pnpm run --filter @ikun-ui/utils build",
-		"build:components": "node scripts/build.js",
-		"build#docs": "pnpm run --filter @ikun-ui/docs docs:build",
-		"preview:docs": "pnpm run --filter @ikun-ui/docs docs:preview",
-		"test": "pnpm run test:unit && pnpm run test:e2e",
-		"test:e2e": "pnpm run --filter @ikun-ui/e2e test",
-		"test:unit": "vitest --watch=false",
-		"test:update": "vitest -u --watch=true",
-		"test:coverage": "vitest --coverage --watch=false",
-		"lint": "prettier --check \"./**/*.{svelte,js,ts,jsx,json,md}\" && eslint .",
-		"format": "prettier --write \"./**/*.{svelte,js,ts,jsx,json,md}\"",
-		"release": "bumpp package.json components/*/package.json preset/package.json utils/package.json --commit --push --tag",
-		"publish:script": "node scripts/publish.js && pnpm run publish:npm",
-		"publish:npm": "pnpm publish --no-git-checks --access public",
-		"clean:dist": "rimraf dist && node scripts/clean.js",
-		"clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
-		"prepare": "npx simple-git-hooks",
-		"update:deps": "npx taze -w -r major && pnpm run init",
-		"create:new:comp": "node scripts/new-component.js steps"
-	},
-	"peerDependencies": {
-		"baiwusanyu-utils": "^1.0.18",
-		"svelte": "^4.0.0",
-		"unocss": "^0.57.7"
-	},
-	"dependencies": {
-		"@ikun-ui/affix": "workspace:*",
-		"@ikun-ui/alert": "workspace:*",
-		"@ikun-ui/avatar": "workspace:*",
-		"@ikun-ui/backtop": "workspace:*",
-		"@ikun-ui/badge": "workspace:*",
-		"@ikun-ui/breadcrumb": "workspace:*",
-		"@ikun-ui/breadcrumb-item": "workspace:*",
-		"@ikun-ui/button": "workspace:*",
-		"@ikun-ui/button-group": "workspace:*",
-		"@ikun-ui/card": "workspace:*",
-		"@ikun-ui/carousel": "workspace:*",
-		"@ikun-ui/checkbox": "workspace:*",
-		"@ikun-ui/checkbox-group": "workspace:*",
-		"@ikun-ui/client-only": "workspace:*",
-		"@ikun-ui/collapse": "workspace:*",
-		"@ikun-ui/collapse-wrapper": "workspace:*",
-		"@ikun-ui/contextmenu": "workspace:*",
-		"@ikun-ui/countdown": "workspace:*",
-		"@ikun-ui/descriptions": "workspace:*",
-		"@ikun-ui/descriptions-item": "workspace:*",
-		"@ikun-ui/divider": "workspace:*",
-		"@ikun-ui/drawer": "workspace:*",
-		"@ikun-ui/dropdown": "workspace:*",
-		"@ikun-ui/ellipsis": "workspace:*",
-		"@ikun-ui/empty": "workspace:*",
-		"@ikun-ui/eye-dropper": "workspace:*",
-		"@ikun-ui/flex": "workspace:*",
-		"@ikun-ui/form": "workspace:*",
-		"@ikun-ui/grid": "workspace:*",
-		"@ikun-ui/icon": "workspace:*",
-		"@ikun-ui/image": "workspace:*",
-		"@ikun-ui/image-view": "workspace:*",
-		"@ikun-ui/infinite": "workspace:*",
-		"@ikun-ui/input": "workspace:*",
-		"@ikun-ui/input-number": "workspace:*",
-		"@ikun-ui/layout": "workspace:*",
-		"@ikun-ui/link": "workspace:*",
-		"@ikun-ui/mask": "workspace:*",
-		"@ikun-ui/message": "workspace:*",
-		"@ikun-ui/message-box": "workspace:*",
-		"@ikun-ui/modal": "workspace:*",
-		"@ikun-ui/notify": "workspace:*",
-		"@ikun-ui/page-header": "workspace:*",
-		"@ikun-ui/pagination": "workspace:*",
-		"@ikun-ui/popconfirm": "workspace:*",
-		"@ikun-ui/popover": "workspace:*",
-		"@ikun-ui/preset": "workspace:*",
-		"@ikun-ui/progress": "workspace:*",
-		"@ikun-ui/radio": "workspace:*",
-		"@ikun-ui/radio-group": "workspace:*",
-		"@ikun-ui/rate": "workspace:*",
-		"@ikun-ui/scrollbar": "workspace:*",
-		"@ikun-ui/select": "workspace:*",
-		"@ikun-ui/slider": "workspace:*",
-		"@ikun-ui/spin": "workspace:*",
-		"@ikun-ui/statistic": "workspace:*",
-		"@ikun-ui/switch": "workspace:*",
-		"@ikun-ui/tabs": "workspace:*",
-		"@ikun-ui/tag": "workspace:*",
-		"@ikun-ui/tooltip": "workspace:*",
-		"@ikun-ui/utils": "workspace:*",
-		"@ikun-ui/virtual-list": "workspace:*",
-		"@ikun-ui/watermark": "workspace:*",
-		"baiwusanyu-utils": "^1.0.18",
-		"clsx": "^2.1.0",
-		"dayjs": "^1.11.10",
-		"@ikun-ui/segmented": "workspace:*",
-		"@ikun-ui/steps": "workspace:*"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.1.0",
-		"@sveltejs/kit": "^2.0.6",
-		"@sveltejs/package": "^2.2.5",
-		"@sveltejs/vite-plugin-svelte": "^2.5.3",
-		"@testing-library/svelte": "^4.0.5",
-		"@types/node": "^20.10.6",
-		"@typescript-eslint/eslint-plugin": "^6.17.0",
-		"@typescript-eslint/parser": "^6.17.0",
-		"@unocss/preset-mini": "^0.58.3",
-		"@unocss/preset-uno": "^0.58.3",
-		"@vitest/ui": "^1.1.1",
-		"bumpp": "^9.2.1",
-		"chokidar": "^3.5.3",
-		"del": "^7.1.0",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"fast-glob": "^3.3.2",
-		"fs-extra": "11.1.1",
-		"jsdom": "^23.0.1",
-		"lint-staged": "^15.2.0",
-		"npm-run-all": "^4.1.5",
-		"ora": "^8.0.1",
-		"playwright-chromium": "^1.40.1",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"publint": "^0.2.7",
-		"rimraf": "^5.0.5",
-		"shelljs": "^0.8.5",
-		"simple-git-hooks": "^2.9.0",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
-		"svelte-preprocess": "latest",
-		"tslib": "^2.6.2",
-		"tsup": "^8.0.1",
-		"typescript": "^5.3.3",
-		"unocss": "^0.58.3",
-		"vite": "^5.0.10",
-		"vitest": "^1.1.1"
-	},
-	"lint-staged": {
-		"*.{svelte,js,ts,jsx,json}": [
-			"prettier --write ",
-			"eslint"
-		]
-	},
-	"simple-git-hooks": {
-		"pre-commit": "npx lint-staged",
-		"commit-msg": "node vertify-commit.js"
-	}
-}
+  "name": "@ikun-ui/core",
+  "description": "🐔 A Svelte.js based UnoCSS UI library that allows you to make websites",
+  "packageManager": "pnpm@8.14.0",
+  "type": "module",
+  "version": "0.1.5",
+  "keywords": [
+    "svelte",
+    "svelte3",
+    "web component",
+    "component",
+    "react",
+    "vue",
+    "svelte-kit",
+    "dx"
+  ],
+  "license": "MIT",
+  "author": "baiwusanyu-c",
+  "homepage": "https://github.com/ikun-svelte/ikun-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ikun-svelte/ikun-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ikun-svelte/ikun-ui/issues"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "init": "pnpm i",
+    "dev": "pnpm run build",
+    "dev:docs": "pnpm run --filter @ikun-ui/docs docs:dev",
+    "play": "node scripts/play.js && pnpm run --filter @ikun-ui/play dev",
+    "build": "run-s build:* && run-s build-*",
+    "build-preset": "pnpm run --filter @ikun-ui/preset build",
+    "build-lib": "tsup --config tsup.config.ts",
+    "build:utils": "pnpm run --filter @ikun-ui/utils build",
+    "build:components": "node scripts/build.js",
+    "build#docs": "pnpm run --filter @ikun-ui/docs docs:build",
+    "preview:docs": "pnpm run --filter @ikun-ui/docs docs:preview",
+    "test": "pnpm run test:unit && pnpm run test:e2e",
+    "test:e2e": "pnpm run --filter @ikun-ui/e2e test",
+    "test:unit": "vitest --watch=false",
+    "test:update": "vitest -u --watch=true",
+    "test:coverage": "vitest --coverage --watch=false",
+    "lint": "prettier --check \"./**/*.{svelte,js,ts,jsx,json,md}\" && eslint .",
+    "format": "prettier --write \"./**/*.{svelte,js,ts,jsx,json,md}\"",
+    "release": "bumpp package.json components/*/package.json preset/package.json utils/package.json --commit --push --tag",
+    "publish:script": "node scripts/publish.js && pnpm run publish:npm",
+    "publish:npm": "pnpm publish --no-git-checks --access public",
+    "clean:dist": "rimraf dist && node scripts/clean.js",
+    "clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
+    "prepare": "npx simple-git-hooks",
+    "update:deps": "npx taze -w -r major && pnpm run init",
+    "create:new:comp": "node scripts/new-component.js auto-complete"
+  },
+  "peerDependencies": {
+    "baiwusanyu-utils": "^1.0.18",
+    "svelte": "^4.0.0",
+    "unocss": "^0.57.7"
+  },
+  "dependencies": {
+    "@ikun-ui/affix": "workspace:*",
+    "@ikun-ui/alert": "workspace:*",
+    "@ikun-ui/avatar": "workspace:*",
+    "@ikun-ui/backtop": "workspace:*",
+    "@ikun-ui/badge": "workspace:*",
+    "@ikun-ui/breadcrumb": "workspace:*",
+    "@ikun-ui/breadcrumb-item": "workspace:*",
+    "@ikun-ui/button": "workspace:*",
+    "@ikun-ui/button-group": "workspace:*",
+    "@ikun-ui/card": "workspace:*",
+    "@ikun-ui/carousel": "workspace:*",
+    "@ikun-ui/checkbox": "workspace:*",
+    "@ikun-ui/checkbox-group": "workspace:*",
+    "@ikun-ui/client-only": "workspace:*",
+    "@ikun-ui/collapse": "workspace:*",
+    "@ikun-ui/collapse-wrapper": "workspace:*",
+    "@ikun-ui/contextmenu": "workspace:*",
+    "@ikun-ui/countdown": "workspace:*",
+    "@ikun-ui/descriptions": "workspace:*",
+    "@ikun-ui/descriptions-item": "workspace:*",
+    "@ikun-ui/divider": "workspace:*",
+    "@ikun-ui/drawer": "workspace:*",
+    "@ikun-ui/dropdown": "workspace:*",
+    "@ikun-ui/ellipsis": "workspace:*",
+    "@ikun-ui/empty": "workspace:*",
+    "@ikun-ui/eye-dropper": "workspace:*",
+    "@ikun-ui/flex": "workspace:*",
+    "@ikun-ui/form": "workspace:*",
+    "@ikun-ui/grid": "workspace:*",
+    "@ikun-ui/icon": "workspace:*",
+    "@ikun-ui/image": "workspace:*",
+    "@ikun-ui/image-view": "workspace:*",
+    "@ikun-ui/infinite": "workspace:*",
+    "@ikun-ui/input": "workspace:*",
+    "@ikun-ui/input-number": "workspace:*",
+    "@ikun-ui/layout": "workspace:*",
+    "@ikun-ui/link": "workspace:*",
+    "@ikun-ui/mask": "workspace:*",
+    "@ikun-ui/message": "workspace:*",
+    "@ikun-ui/message-box": "workspace:*",
+    "@ikun-ui/modal": "workspace:*",
+    "@ikun-ui/notify": "workspace:*",
+    "@ikun-ui/page-header": "workspace:*",
+    "@ikun-ui/pagination": "workspace:*",
+    "@ikun-ui/popconfirm": "workspace:*",
+    "@ikun-ui/popover": "workspace:*",
+    "@ikun-ui/preset": "workspace:*",
+    "@ikun-ui/progress": "workspace:*",
+    "@ikun-ui/radio": "workspace:*",
+    "@ikun-ui/radio-group": "workspace:*",
+    "@ikun-ui/rate": "workspace:*",
+    "@ikun-ui/scrollbar": "workspace:*",
+    "@ikun-ui/select": "workspace:*",
+    "@ikun-ui/slider": "workspace:*",
+    "@ikun-ui/spin": "workspace:*",
+    "@ikun-ui/statistic": "workspace:*",
+    "@ikun-ui/switch": "workspace:*",
+    "@ikun-ui/tabs": "workspace:*",
+    "@ikun-ui/tag": "workspace:*",
+    "@ikun-ui/tooltip": "workspace:*",
+    "@ikun-ui/utils": "workspace:*",
+    "@ikun-ui/virtual-list": "workspace:*",
+    "@ikun-ui/watermark": "workspace:*",
+    "baiwusanyu-utils": "^1.0.18",
+    "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "@ikun-ui/segmented": "workspace:*",
+    "@ikun-ui/steps": "workspace:*",
+    "@ikun-ui/auto-complete": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.1.0",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^2.5.3",
+    "@testing-library/svelte": "^4.0.5",
+    "@types/node": "^20.10.6",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "@unocss/preset-mini": "^0.58.3",
+    "@unocss/preset-uno": "^0.58.3",
+    "@vitest/ui": "^1.1.1",
+    "bumpp": "^9.2.1",
+    "chokidar": "^3.5.3",
+    "del": "^7.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "fast-glob": "^3.3.2",
+    "fs-extra": "11.1.1",
+    "jsdom": "^23.0.1",
+    "lint-staged": "^15.2.0",
+    "npm-run-all": "^4.1.5",
+    "ora": "^8.0.1",
+    "playwright-chromium": "^1.40.1",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.2.7",
+    "rimraf": "^5.0.5",
+    "shelljs": "^0.8.5",
+    "simple-git-hooks": "^2.9.0",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "svelte-preprocess": "latest",
+    "tslib": "^2.6.2",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "unocss": "^0.58.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.1"
+  },
+  "lint-staged": {
+    "*.{svelte,js,ts,jsx,json}": [
+      "prettier --write ",
+      "eslint"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged",
+    "commit-msg": "node vertify-commit.js"
+  }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7aee2a2..cb0955fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@ikun-ui/alert':
         specifier: workspace:*
         version: link:components/Alert
+      '@ikun-ui/auto-complete':
+        specifier: workspace:*
+        version: link:components/AutoComplete
       '@ikun-ui/avatar':
         specifier: workspace:*
         version: link:components/Avatar
@@ -387,6 +390,34 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  components/AutoComplete:
+    dependencies:
+      '@ikun-ui/icon':
+        specifier: workspace:*
+        version: link:../Icon
+      '@ikun-ui/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      baiwusanyu-utils:
+        specifier: ^1.0.18
+        version: 1.0.18(ansi-colors@4.1.3)(moment@2.29.4)
+      clsx:
+        specifier: ^2.0.0
+        version: 2.1.0
+    devDependencies:
+      '@tsconfig/svelte':
+        specifier: ^5.0.2
+        version: 5.0.2
+      svelte-strip:
+        specifier: ^2.0.0
+        version: 2.0.0(@babel/core@7.23.7)(postcss@8.4.32)(svelte@3.59.2)
+      tslib:
+        specifier: ^2.6.2
+        version: 2.6.2
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
   components/Avatar:
     dependencies:
       '@ikun-ui/icon':
@@ -3008,7 +3039,7 @@ packages:
     dev: true
 
   /@esbuild/android-arm64@0.19.8:
-    resolution: {integrity: sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz}
+    resolution: {integrity: sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -3017,7 +3048,7 @@ packages:
     optional: true
 
   /@esbuild/android-arm@0.19.8:
-    resolution: {integrity: sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==, tarball: https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz}
+    resolution: {integrity: sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -3026,7 +3057,7 @@ packages:
     optional: true
 
   /@esbuild/android-x64@0.19.8:
-    resolution: {integrity: sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==, tarball: https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -3035,7 +3066,7 @@ packages:
     optional: true
 
   /@esbuild/darwin-arm64@0.19.8:
-    resolution: {integrity: sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==, tarball: https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz}
+    resolution: {integrity: sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -3044,7 +3075,7 @@ packages:
     optional: true
 
   /@esbuild/darwin-x64@0.19.8:
-    resolution: {integrity: sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==, tarball: https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -3053,7 +3084,7 @@ packages:
     optional: true
 
   /@esbuild/freebsd-arm64@0.19.8:
-    resolution: {integrity: sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==, tarball: https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz}
+    resolution: {integrity: sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -3062,7 +3093,7 @@ packages:
     optional: true
 
   /@esbuild/freebsd-x64@0.19.8:
-    resolution: {integrity: sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==, tarball: https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -3071,7 +3102,7 @@ packages:
     optional: true
 
   /@esbuild/linux-arm64@0.19.8:
-    resolution: {integrity: sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==, tarball: https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz}
+    resolution: {integrity: sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -3080,7 +3111,7 @@ packages:
     optional: true
 
   /@esbuild/linux-arm@0.19.8:
-    resolution: {integrity: sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==, tarball: https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz}
+    resolution: {integrity: sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -3089,7 +3120,7 @@ packages:
     optional: true
 
   /@esbuild/linux-ia32@0.19.8:
-    resolution: {integrity: sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==, tarball: https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz}
+    resolution: {integrity: sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -3098,7 +3129,7 @@ packages:
     optional: true
 
   /@esbuild/linux-loong64@0.19.8:
-    resolution: {integrity: sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==, tarball: https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz}
+    resolution: {integrity: sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -3107,7 +3138,7 @@ packages:
     optional: true
 
   /@esbuild/linux-mips64el@0.19.8:
-    resolution: {integrity: sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==, tarball: https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz}
+    resolution: {integrity: sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -3116,7 +3147,7 @@ packages:
     optional: true
 
   /@esbuild/linux-ppc64@0.19.8:
-    resolution: {integrity: sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==, tarball: https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz}
+    resolution: {integrity: sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -3125,7 +3156,7 @@ packages:
     optional: true
 
   /@esbuild/linux-riscv64@0.19.8:
-    resolution: {integrity: sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==, tarball: https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz}
+    resolution: {integrity: sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -3134,7 +3165,7 @@ packages:
     optional: true
 
   /@esbuild/linux-s390x@0.19.8:
-    resolution: {integrity: sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==, tarball: https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz}
+    resolution: {integrity: sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -3143,7 +3174,7 @@ packages:
     optional: true
 
   /@esbuild/linux-x64@0.19.8:
-    resolution: {integrity: sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==, tarball: https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -3152,7 +3183,7 @@ packages:
     optional: true
 
   /@esbuild/netbsd-x64@0.19.8:
-    resolution: {integrity: sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==, tarball: https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -3161,7 +3192,7 @@ packages:
     optional: true
 
   /@esbuild/openbsd-x64@0.19.8:
-    resolution: {integrity: sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==, tarball: https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -3170,7 +3201,7 @@ packages:
     optional: true
 
   /@esbuild/sunos-x64@0.19.8:
-    resolution: {integrity: sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==, tarball: https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -3179,7 +3210,7 @@ packages:
     optional: true
 
   /@esbuild/win32-arm64@0.19.8:
-    resolution: {integrity: sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==, tarball: https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz}
+    resolution: {integrity: sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -3188,7 +3219,7 @@ packages:
     optional: true
 
   /@esbuild/win32-ia32@0.19.8:
-    resolution: {integrity: sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==, tarball: https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz}
+    resolution: {integrity: sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -3197,7 +3228,7 @@ packages:
     optional: true
 
   /@esbuild/win32-x64@0.19.8:
-    resolution: {integrity: sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==, tarball: https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz}
+    resolution: {integrity: sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -3361,7 +3392,7 @@ packages:
     dev: true
 
   /@pkgjs/parseargs@0.11.0:
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==, tarball: https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz}
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
     dev: true
@@ -3376,7 +3407,7 @@ packages:
     dev: true
 
   /@popperjs/core@2.11.8:
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==, tarball: https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz}
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
   /@rollup/pluginutils@5.0.5:
     resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
@@ -3407,7 +3438,7 @@ packages:
     dev: true
 
   /@rollup/rollup-android-arm-eabi@4.6.0:
-    resolution: {integrity: sha512-keHkkWAe7OtdALGoutLY3utvthkGF+Y17ws9LYT8pxMBYXaCoH/8dXS2uzo6e8+sEhY7y/zi5RFo22Dy2lFpDw==, tarball: https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.0.tgz}
+    resolution: {integrity: sha512-keHkkWAe7OtdALGoutLY3utvthkGF+Y17ws9LYT8pxMBYXaCoH/8dXS2uzo6e8+sEhY7y/zi5RFo22Dy2lFpDw==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
@@ -3415,7 +3446,7 @@ packages:
     optional: true
 
   /@rollup/rollup-android-arm64@4.6.0:
-    resolution: {integrity: sha512-y3Kt+34smKQNWilicPbBz/MXEY7QwDzMFNgwEWeYiOhUt9MTWKjHqe3EVkXwT2fR7izOvHpDWZ0o2IyD9SWX7A==, tarball: https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.0.tgz}
+    resolution: {integrity: sha512-y3Kt+34smKQNWilicPbBz/MXEY7QwDzMFNgwEWeYiOhUt9MTWKjHqe3EVkXwT2fR7izOvHpDWZ0o2IyD9SWX7A==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
@@ -3423,7 +3454,7 @@ packages:
     optional: true
 
   /@rollup/rollup-darwin-arm64@4.6.0:
-    resolution: {integrity: sha512-oLzzxcUIHltHxOCmaXl+pkIlU+uhSxef5HfntW7RsLh1eHm+vJzjD9Oo4oUKso4YuP4PpbFJNlZjJuOrxo8dPg==, tarball: https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.0.tgz}
+    resolution: {integrity: sha512-oLzzxcUIHltHxOCmaXl+pkIlU+uhSxef5HfntW7RsLh1eHm+vJzjD9Oo4oUKso4YuP4PpbFJNlZjJuOrxo8dPg==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
@@ -3431,7 +3462,7 @@ packages:
     optional: true
 
   /@rollup/rollup-darwin-x64@4.6.0:
-    resolution: {integrity: sha512-+ANnmjkcOBaV25n0+M0Bere3roeVAnwlKW65qagtuAfIxXF9YxUneRyAn/RDcIdRa7QrjRNJL3jR7T43ObGe8Q==, tarball: https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.0.tgz}
+    resolution: {integrity: sha512-+ANnmjkcOBaV25n0+M0Bere3roeVAnwlKW65qagtuAfIxXF9YxUneRyAn/RDcIdRa7QrjRNJL3jR7T43ObGe8Q==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
@@ -3439,7 +3470,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm-gnueabihf@4.6.0:
-    resolution: {integrity: sha512-tBTSIkjSVUyrekddpkAqKOosnj1Fc0ZY0rJL2bIEWPKqlEQk0paORL9pUIlt7lcGJi3LzMIlUGXvtNi1Z6MOCQ==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.0.tgz}
+    resolution: {integrity: sha512-tBTSIkjSVUyrekddpkAqKOosnj1Fc0ZY0rJL2bIEWPKqlEQk0paORL9pUIlt7lcGJi3LzMIlUGXvtNi1Z6MOCQ==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
@@ -3447,7 +3478,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm64-gnu@4.6.0:
-    resolution: {integrity: sha512-Ed8uJI3kM11de9S0j67wAV07JUNhbAqIrDYhQBrQW42jGopgheyk/cdcshgGO4fW5Wjq97COCY/BHogdGvKVNQ==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.0.tgz}
+    resolution: {integrity: sha512-Ed8uJI3kM11de9S0j67wAV07JUNhbAqIrDYhQBrQW42jGopgheyk/cdcshgGO4fW5Wjq97COCY/BHogdGvKVNQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
@@ -3455,7 +3486,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-arm64-musl@4.6.0:
-    resolution: {integrity: sha512-mZoNQ/qK4D7SSY8v6kEsAAyDgznzLLuSFCA3aBHZTmf3HP/dW4tNLTtWh9+LfyO0Z1aUn+ecpT7IQ3WtIg3ViQ==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.0.tgz}
+    resolution: {integrity: sha512-mZoNQ/qK4D7SSY8v6kEsAAyDgznzLLuSFCA3aBHZTmf3HP/dW4tNLTtWh9+LfyO0Z1aUn+ecpT7IQ3WtIg3ViQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
@@ -3463,7 +3494,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-x64-gnu@4.6.0:
-    resolution: {integrity: sha512-rouezFHpwCqdEXsqAfNsTgSWO0FoZ5hKv5p+TGO5KFhyN/dvYXNMqMolOb8BkyKcPqjYRBeT+Z6V3aM26rPaYg==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.0.tgz}
+    resolution: {integrity: sha512-rouezFHpwCqdEXsqAfNsTgSWO0FoZ5hKv5p+TGO5KFhyN/dvYXNMqMolOb8BkyKcPqjYRBeT+Z6V3aM26rPaYg==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
@@ -3471,7 +3502,7 @@ packages:
     optional: true
 
   /@rollup/rollup-linux-x64-musl@4.6.0:
-    resolution: {integrity: sha512-Bbm+fyn3S6u51urfj3YnqBXg5vI2jQPncRRELaucmhBVyZkbWClQ1fEsRmdnCPpQOQfkpg9gZArvtMVkOMsh1w==, tarball: https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.0.tgz}
+    resolution: {integrity: sha512-Bbm+fyn3S6u51urfj3YnqBXg5vI2jQPncRRELaucmhBVyZkbWClQ1fEsRmdnCPpQOQfkpg9gZArvtMVkOMsh1w==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
@@ -3479,7 +3510,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-arm64-msvc@4.6.0:
-    resolution: {integrity: sha512-+MRMcyx9L2kTrTUzYmR61+XVsliMG4odFb5UmqtiT8xOfEicfYAGEuF/D1Pww1+uZkYhBqAHpvju7VN+GnC3ng==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.0.tgz}
+    resolution: {integrity: sha512-+MRMcyx9L2kTrTUzYmR61+XVsliMG4odFb5UmqtiT8xOfEicfYAGEuF/D1Pww1+uZkYhBqAHpvju7VN+GnC3ng==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
@@ -3487,7 +3518,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-ia32-msvc@4.6.0:
-    resolution: {integrity: sha512-rxfeE6K6s/Xl2HGeK6cO8SiQq3k/3BYpw7cfhW5Bk2euXNEpuzi2cc7llxx1si1QgwfjNtdRNTGqdBzGlFZGFw==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.0.tgz}
+    resolution: {integrity: sha512-rxfeE6K6s/Xl2HGeK6cO8SiQq3k/3BYpw7cfhW5Bk2euXNEpuzi2cc7llxx1si1QgwfjNtdRNTGqdBzGlFZGFw==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
@@ -3495,7 +3526,7 @@ packages:
     optional: true
 
   /@rollup/rollup-win32-x64-msvc@4.6.0:
-    resolution: {integrity: sha512-QqmCsydHS172Y0Kc13bkMXvipbJSvzeglBncJG3LsYJSiPlxYACz7MmJBs4A8l1oU+jfhYEIC/+AUSlvjmiX/g==, tarball: https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.0.tgz}
+    resolution: {integrity: sha512-QqmCsydHS172Y0Kc13bkMXvipbJSvzeglBncJG3LsYJSiPlxYACz7MmJBs4A8l1oU+jfhYEIC/+AUSlvjmiX/g==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -3511,7 +3542,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
+      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@2.5.3)(svelte@4.2.8)(vite@5.0.10)
       import-meta-resolve: 4.0.0
     dev: true
 
@@ -3601,7 +3632,7 @@ packages:
     dev: true
 
   /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10):
-    resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==, tarball: https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.0.0.tgz}
+    resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       '@sveltejs/vite-plugin-svelte': ^3.0.0
@@ -3637,7 +3668,7 @@ packages:
     dev: true
 
   /@sveltejs/vite-plugin-svelte@3.0.1(svelte@4.2.8)(vite@5.0.10):
-    resolution: {integrity: sha512-CGURX6Ps+TkOovK6xV+Y2rn8JKa8ZPUHPZ/NKgCxAmgBrXReavzFl8aOSCj3kQ1xqT7yGJj53hjcV/gqwDAaWA==, tarball: https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.0.1.tgz}
+    resolution: {integrity: sha512-CGURX6Ps+TkOovK6xV+Y2rn8JKa8ZPUHPZ/NKgCxAmgBrXReavzFl8aOSCj3kQ1xqT7yGJj53hjcV/gqwDAaWA==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
@@ -4390,7 +4421,7 @@ packages:
     dev: true
 
   /ansi-colors@4.1.3:
-    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==, tarball: https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz}
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
   /ansi-escapes@6.2.0:
@@ -5567,7 +5598,7 @@ packages:
     dev: true
 
   /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -6698,7 +6729,7 @@ packages:
     dev: true
 
   /minimatch@7.4.6:
-    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==, tarball: https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz}
+    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
     engines: {node: '>=10'}
     dependencies:
       brace-expansion: 2.0.1
@@ -6779,7 +6810,7 @@ packages:
     dev: true
 
   /moment@2.29.4:
-    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==, tarball: https://registry.npmjs.org/moment/-/moment-2.29.4.tgz}
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
 
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
@@ -7557,7 +7588,7 @@ packages:
     dev: true
 
   /search-insights@2.9.0:
-    resolution: {integrity: sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==, tarball: https://registry.npmjs.org/search-insights/-/search-insights-2.9.0.tgz}
+    resolution: {integrity: sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==}
     dev: true
 
   /semver@5.7.2:
@@ -8348,7 +8379,7 @@ packages:
     dev: true
 
   /svelte@3.59.2:
-    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==, tarball: https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz}
+    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
     engines: {node: '>= 8'}
     dev: true
 
diff --git a/preset/src/shortcuts/index.ts b/preset/src/shortcuts/index.ts
index 764d5b4e..7ed41f7f 100644
--- a/preset/src/shortcuts/index.ts
+++ b/preset/src/shortcuts/index.ts
@@ -1,3 +1,4 @@
+import { autoCompleteShortcuts } from './src/auto-complete';
 import { stepsShortcuts } from './src/steps';
 import { segmentedShortcuts } from './src/segmented';
 import { flexShortcuts } from './src/flex';
@@ -64,6 +65,8 @@ export const defaultShortcuts = [
 	commonShortcuts,
 	// don't remove
 	// anchor defaultShortcuts
+	// auto-complete
+	autoCompleteShortcuts,
 	// steps
 	stepsShortcuts,
 	// segmented
@@ -175,6 +178,7 @@ export const defaultShortcuts = [
 export function getSafeList() {
 	// don't remove
 	// anchor shortcuts
+	const autoCompleteList = Object.keys(autoCompleteShortcuts);
 	const stepsList = Object.keys(stepsShortcuts);
 	const segmentedList = Object.keys(segmentedShortcuts);
 	const flexList = Object.keys(flexShortcuts);
@@ -233,6 +237,7 @@ export function getSafeList() {
 	let res = iconList
 		// don't remove
 		// anchor list
+		.concat(autoCompleteList)
 		.concat(stepsList)
 		.concat(segmentedList)
 		.concat(flexList)
@@ -358,3 +363,4 @@ export { imageViewShortcuts } from './src/image-view';
 export { flexShortcuts } from './src/flex';
 export { segmentedShortcuts } from './src/segmented';
 export { stepsShortcuts } from './src/steps';
+export { autoCompleteShortcuts } from './src/auto-complete';
diff --git a/preset/src/shortcuts/src/auto-complete.ts b/preset/src/shortcuts/src/auto-complete.ts
new file mode 100644
index 00000000..6c8e8476
--- /dev/null
+++ b/preset/src/shortcuts/src/auto-complete.ts
@@ -0,0 +1,3 @@
+export const autoCompleteShortcuts: Record<string, string> = {
+  'k-auto-complete': ''
+}

From f387f59b2d1fab004c97cc6de70daf1aa664d035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Tue, 16 Jan 2024 21:49:40 +0800
Subject: [PATCH 2/8] chore: temp commit

---
 .../__test__/auto-complete.spec.ts            |   7 +-
 components/AutoComplete/package.json          |  99 ++---
 components/AutoComplete/src/index.svelte      | 310 ++++++++++----
 components/AutoComplete/src/index.ts          |   2 +-
 components/AutoComplete/src/option.svelte     |  38 ++
 components/AutoComplete/src/types.d.ts        |  57 +--
 components/AutoComplete/tsconfig.json         |  17 +-
 components/index.ts                           |   2 +-
 package.json                                  | 398 +++++++++---------
 pnpm-lock.yaml                                |  17 +-
 preset/src/shortcuts/src/auto-complete.ts     |   4 +-
 11 files changed, 567 insertions(+), 384 deletions(-)
 create mode 100644 components/AutoComplete/src/option.svelte

diff --git a/components/AutoComplete/__test__/auto-complete.spec.ts b/components/AutoComplete/__test__/auto-complete.spec.ts
index 2eadcff5..c8834727 100644
--- a/components/AutoComplete/__test__/auto-complete.spec.ts
+++ b/components/AutoComplete/__test__/auto-complete.spec.ts
@@ -26,10 +26,7 @@ describe('Test: KAutoComplete', () => {
 			}
 		});
 		expect(instance).toBeTruthy();
-		expect(
-			(host)!.innerHTML.includes('k-auto-complete--test')
-		).toBeTruthy();
+		expect(host!.innerHTML.includes('k-auto-complete--test')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
-})
-	
\ No newline at end of file
+});
diff --git a/components/AutoComplete/package.json b/components/AutoComplete/package.json
index 2266c1b2..76616367 100644
--- a/components/AutoComplete/package.json
+++ b/components/AutoComplete/package.json
@@ -1,50 +1,53 @@
 {
-  "name": "@ikun-ui/auto-complete",
-  "version": "0.1.5",
-  "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.d.ts",
-  "svelte": "src/index.ts",
-  "keywords": [
-    "svelte",
-    "svelte3",
-    "web component",
-    "component",
-    "react",
-    "vue",
-    "svelte-kit",
-    "dx"
-  ],
-  "files": [
-    "dist",
-    "package.json"
-  ],
-  "scripts": {
-    "build": "npm run build:js && npm run build:svelte",
-    "build:js": "tsc -p . --outDir dist/ --rootDir src/",
-    "build:svelte": "svelte-strip strip src/ dist",
-    "publish:pre": "node ../../scripts/pre-publish.js",
-    "publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
-  },
-  "publishConfig": {
-    "access": "public",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "svelte": "dist/index.js",
-    "types": "dist/index.d.ts"
-  },
-  "dependencies": {
-    "@ikun-ui/icon": "workspace:*",
-    "@ikun-ui/input": "workspace:*",
-    "@ikun-ui/button": "workspace:*",
-    "@ikun-ui/utils": "workspace:*",
-    "baiwusanyu-utils": "^1.0.18",
-    "clsx": "^2.0.0"
-  },
-  "devDependencies": {
-    "@tsconfig/svelte": "^5.0.2",
-    "svelte-strip": "^2.0.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
-  }
+	"name": "@ikun-ui/auto-complete",
+	"version": "0.1.5",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.d.ts",
+	"svelte": "src/index.ts",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"files": [
+		"dist",
+		"package.json"
+	],
+	"scripts": {
+		"build": "npm run build:js && npm run build:svelte",
+		"build:js": "tsc -p . --outDir dist/ --rootDir src/",
+		"build:svelte": "svelte-strip strip src/ dist",
+		"publish:pre": "node ../../scripts/pre-publish.js",
+		"publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
+	},
+	"publishConfig": {
+		"access": "public",
+		"main": "dist/index.js",
+		"module": "dist/index.js",
+		"svelte": "dist/index.js",
+		"types": "dist/index.d.ts"
+	},
+	"dependencies": {
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/input": "workspace:*",
+		"@ikun-ui/button": "workspace:*",
+		"@ikun-ui/utils": "workspace:*",
+		"@ikun-ui/form": "workspace:*",
+		"@ikun-ui/popover": "workspace:*",
+		"@ikun-ui/virtual-list": "workspace:*",
+		"baiwusanyu-utils": "^1.0.18",
+		"clsx": "^2.0.0"
+	},
+	"devDependencies": {
+		"@tsconfig/svelte": "^5.0.2",
+		"svelte-strip": "^2.0.0",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3"
+	}
 }
diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index 081dd89c..1bd42f7a 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -1,101 +1,229 @@
 <script lang="ts">
-    import type {AutoCompleteItems, KAutoCompleteProps} from './types';
-    import { createEventDispatcher, tick, getContext } from 'svelte';
-    import { KInput } from '@ikun-ui/input';
-    import { formItemKey, formKey, getPrefixCls } from '@ikun-ui/utils';
-    import clsx from 'clsx';
-    import { isObject } from 'baiwusanyu-utils';
-    import type { CSSObject } from 'unocss';
-    import type { IKunFormInstance } from '@ikun-ui/form';
+	import type { AutoCompleteItems, KAutoCompleteProps } from './types';
+	import { createEventDispatcher, tick, getContext, onMount } from 'svelte';
+	import { KInput } from '@ikun-ui/input';
+	import { formItemKey, formKey, getPrefixCls } from '@ikun-ui/utils';
+	import clsx from 'clsx';
+	import { isObject } from 'baiwusanyu-utils';
+	import type { CSSObject } from 'unocss';
+	import type { IKunFormInstance } from '@ikun-ui/form';
+	import { KPopover } from '@ikun-ui/popover';
+	import { KVirtualList } from '@ikun-ui/virtual-list';
+	import KOption from './option.svelte';
 
-    export let size: KAutoCompleteProps['size'] = 'md';
-    export let value: KAutoCompleteProps['value'] = '';
-    export let placeholder: KAutoCompleteProps['placeholder'] = '';
-    export let disabled: KAutoCompleteProps['disabled'] = false;
-    export let iconPrefix: KAutoCompleteProps['iconPrefix'] = '';
-    export let iconSuffix: KAutoCompleteProps['iconSuffix'] = '';
-    export let append: KAutoCompleteProps['append'] = '';
-    export let prepend: KAutoCompleteProps['prepend'] = '';
-    export let cls: KAutoCompleteProps['cls'] = undefined;
-    export let attrs: KAutoCompleteProps['attrs'] = {};
-    export let triggerOnFocus: KAutoCompleteProps['triggerOnFocus'] = false
-    export let fetchSuggestions: KAutoCompleteProps['fetchSuggestions'] = undefined
-    export let useCompositionInput: KAutoCompleteProps['useCompositionInput'] = false;
-    /**
-     * @internal
-     */
-    export let isError: KAutoCompleteProps['isError'] = false;
-    /**
-     * @internal
-     */
-    export let center: KAutoCompleteProps['center'] = false;
-    export let clearable: KAutoCompleteProps['clearable'] = false;
-    // class names
-    const prefixCls = getPrefixCls('auto-complete');
-    const cname = clsx(prefixCls, cls)
+	export let size: KAutoCompleteProps['size'] = 'md';
+	export let value: KAutoCompleteProps['value'] = '';
+	export let placeholder: KAutoCompleteProps['placeholder'] = '';
+	export let disabled: KAutoCompleteProps['disabled'] = false;
+	export let iconPrefix: KAutoCompleteProps['iconPrefix'] = '';
+	export let iconSuffix: KAutoCompleteProps['iconSuffix'] = '';
+	export let append: KAutoCompleteProps['append'] = '';
+	export let prepend: KAutoCompleteProps['prepend'] = '';
+	export let cls: KAutoCompleteProps['cls'] = undefined;
+	export let attrs: KAutoCompleteProps['attrs'] = {};
+	export let triggerOnFocus: KAutoCompleteProps['triggerOnFocus'] = false;
+	export let fetchSuggestions: KAutoCompleteProps['fetchSuggestions'] = undefined;
+	export let useCompositionInput: KAutoCompleteProps['useCompositionInput'] = false;
 
-    const dispatch = createEventDispatcher()
-    let list = [] as AutoCompleteItems[]
-    const handleInput = (e: CustomEvent) => {
-        dispatch('input', e.detail)
-        if(fetchSuggestions){
-            list = fetchSuggestions(e.detail)
-        }
-    }
-    const handleEnter = (e: CustomEvent) => {
-        dispatch('enter', e.detail)
-    }
-    const handleKeydown= (e: CustomEvent) => {
-        dispatch('keydown', e.detail)
-    }
-    const handleChange = (e: CustomEvent) => {
-        dispatch('change', e.detail)
-    }
-    const handleCompositionstart = (e: CustomEvent) => {
-        dispatch('compositionstart', e.detail)
-    }
+	export let maxHeight: KAutoCompleteProps['maxHeight'] = 250;
+	export let fitInputWidth: KAutoCompleteProps['fitInputWidth'] = true;
+	/**
+	 * @internal
+	 */
+	export let isError: KAutoCompleteProps['isError'] = false;
+	/**
+	 * @internal
+	 */
+	export let center: KAutoCompleteProps['center'] = false;
+	export let clearable: KAutoCompleteProps['clearable'] = false;
+	// class names
+	const prefixCls = getPrefixCls('auto-complete');
+	const cname = clsx(prefixCls);
+	const dispatch = createEventDispatcher();
+	const handleEnter = (e: CustomEvent) => {
+		dispatch('enter', e.detail);
+	};
+	const handleKeydown = (e: CustomEvent) => {
+		dispatch('keydown', e.detail);
+	};
+	const handleChange = (e: CustomEvent) => {
+		dispatch('change', e.detail);
+	};
+	const handleCompositionstart = (e: CustomEvent) => {
+		dispatch('compositionstart', e.detail);
+	};
 
-    const handleCompositionend = (e: CustomEvent) => {
-        dispatch('compositionend', e.detail)
-    }
+	const handleCompositionend = (e: CustomEvent) => {
+		dispatch('compositionend', e.detail);
+	};
 
-    const handleCompositionInnput = (e: CustomEvent) => {
-        dispatch('compositionInput', e.detail)
-    }
+	const handleCompositionInnput = (e: CustomEvent) => {
+		dispatch('compositionInput', e.detail);
+	};
 
-    const handleTriggerPrepend = (e: CustomEvent) => {
-        dispatch('triggerPrepend', e.detail)
-    }
+	const handleTriggerPrepend = (e: CustomEvent) => {
+		dispatch('triggerPrepend', e.detail);
+	};
 
-    const handleTriggerAppend = (e: CustomEvent) => {
-        dispatch('triggerAppend', e.detail)
-    }
+	const handleTriggerAppend = (e: CustomEvent) => {
+		dispatch('triggerAppend', e.detail);
+	};
 
+	// set popover's trigger and content dom width
+	let inputSelectRef: HTMLElement | null = null;
+	let popoverWidth: undefined | string = undefined;
+	let triggerWidth: undefined | string = 'initial';
+	let list = [] as Array<Record<string, any>>;
+	const handleInput = (e: CustomEvent) => {
+		// dispatch('input', e.detail)
+		// if(fetchSuggestions){
+		//     list = fetchSuggestions(e.detail)
+		// }
+	};
+	// TODO remote
+	let popoverRef: any = null;
+	const setPopoverW = () => {
+		if (inputSelectRef) {
+			const { width: inputSelectRefWidth } = inputSelectRef.getBoundingClientRect();
+			triggerWidth = `${inputSelectRefWidth}px`;
+			popoverWidth = fitInputWidth ? `${inputSelectRefWidth}px` : undefined;
+		}
+	};
+	onMount(() => {
+		setPopoverW();
+	});
+
+	// TODO
+	let isDisabledPopover = false;
+	$: {
+		isDisabledPopover = false;
+	}
+
+	let popoverModalRef: HTMLElement | null = null;
+	let heightInner = 'initial';
+	let vListRef: any = null;
+	async function setVList() {
+		await tick();
+		if (popoverModalRef) {
+			const container = popoverModalRef.childNodes[0];
+			if (container) {
+				const { height } = (container as HTMLElement).children[0].getBoundingClientRect();
+				if (height > maxHeight) {
+					heightInner = `${maxHeight}px`;
+					await tick();
+					vListRef && locateItem();
+				}
+			}
+		}
+	}
+
+	async function locateItem() {
+		for (let i = 0; i < list.length; i++) {
+			if (isActive(list[i])) {
+				vListRef && vListRef.scrollToIndex(i - 3);
+				break;
+			}
+		}
+	}
+
+	const getLabel = (item: Record<any, string>) => {
+		if (isObject(item)) {
+			const label = item.label || '';
+			return label.toString();
+		}
+	};
+	const isActive = (item: Record<any, string>) => {
+		return item.value === value;
+	};
+
+	const wrapperData = (v: KAutoCompleteProps['value']) => {
+		return {
+			value: v,
+			label: v,
+			id: v
+		};
+	};
+	async function onOpen(e: CustomEvent) {
+		// TODO: isDisabledPopover = true
+		if (fetchSuggestions && triggerOnFocus) {
+			const resolveList = await fetchSuggestions(e.detail);
+			list = resolveList.map((v) => wrapperData(v as KAutoCompleteProps['value']));
+			setVList();
+		}
+	}
+
+	// updateValue
+	const handleSelect = async (data: Record<string, any>) => {
+		// TODO: if (disabledInner) return;
+		dispatch('updateValue', data.value);
+		// TODO: formInstance && formInstance?.updateField(field!, data, !formInstance.__manual_validate);
+		// TODO: //await tick();
+		// TODO: formInstance && (value = data!);
+		popoverRef.updateShow(false);
+	};
 </script>
-<div class={cname}
-     {...$$restProps}
-     {...attrs}>
-    <KInput on:input={handleInput}
-            on:enter={handleEnter}
-            on:keydown={handleKeydown}
-            on:change={handleChange}
-            on:compositionstart={handleCompositionstart}
-            on:compositionend={handleCompositionend}
-            on:compositionInput={handleCompositionInnput}
-            on:triggerPrepend={handleTriggerPrepend}
-            on:triggerAppend={handleTriggerAppend}
-            {size}
-            {value}
-            {placeholder}
-            {disabled}
-            {iconPrefix}
-            {iconSuffix}
-            {append}
-            {prepend}
-            {clearable}
-            {useCompositionInput}
-            type="text"
-    />
-    {JSON.stringify(list)}
-</div>
 
+<KPopover
+	trigger="click"
+	bind:this={popoverRef}
+	disabled={isDisabledPopover}
+	clsTrigger={cls}
+	cls="px-0"
+	arrow={false}
+	on:change={onOpen}
+	width={triggerWidth}
+	placement="bottom"
+>
+	<div class={cname} {...attrs} slot="triggerEl" bind:this={inputSelectRef} aria-hidden="true">
+		<KInput
+			on:input={handleInput}
+			on:enter={handleEnter}
+			on:keydown={handleKeydown}
+			on:change={handleChange}
+			on:compositionstart={handleCompositionstart}
+			on:compositionend={handleCompositionend}
+			on:compositionInput={handleCompositionInnput}
+			on:triggerPrepend={handleTriggerPrepend}
+			on:triggerAppend={handleTriggerAppend}
+			{size}
+			{value}
+			{placeholder}
+			{disabled}
+			{iconPrefix}
+			{iconSuffix}
+			{append}
+			{prepend}
+			{clearable}
+			{useCompositionInput}
+			{...$$restProps}
+			{...attrs}
+			type="text"
+		/>
+	</div>
+	<div
+		slot="contentEl"
+		bind:this={popoverModalRef}
+		style:overflow-y="auto"
+		style:width={popoverWidth}
+		style:min-width={triggerWidth}
+		style:height={heightInner}
+		style:max-height={`${maxHeight}px`}
+	>
+		{#if list.length > 0}
+			<KVirtualList data={list} key="id" bind:this={vListRef} estimateSize={list.length} let:data>
+				{#if !$$slots.default}
+					<KOption
+						{fitInputWidth}
+						label={getLabel(data)}
+						isActive={isActive(data)}
+						on:click={() => handleSelect(data)}
+					></KOption>
+				{:else}
+					<slot {data} onSelect={handleSelect} label={data} isActive={isActive(data)} />
+				{/if}
+			</KVirtualList>
+		{:else}
+			<p>TODO noDataCls text</p>
+		{/if}
+	</div>
+</KPopover>
diff --git a/components/AutoComplete/src/index.ts b/components/AutoComplete/src/index.ts
index 5115de13..132bd3f4 100644
--- a/components/AutoComplete/src/index.ts
+++ b/components/AutoComplete/src/index.ts
@@ -2,4 +2,4 @@
 import AutoComplete from './index.svelte';
 export { AutoComplete as KAutoComplete };
 
-export default AutoComplete;
\ No newline at end of file
+export default AutoComplete;
diff --git a/components/AutoComplete/src/option.svelte b/components/AutoComplete/src/option.svelte
new file mode 100644
index 00000000..2f728450
--- /dev/null
+++ b/components/AutoComplete/src/option.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { clsx } from 'clsx';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import type { KAutoCompleteProps } from './types';
+
+	export let label: KAutoCompleteProps['label'] = '';
+	export let cls: KAutoCompleteProps['cls'] = undefined;
+	export let disabled: KAutoCompleteProps['disabled'] = false;
+	export let isActive: KAutoCompleteProps['isActive'] = false;
+	export let attrs: KAutoCompleteProps['attrs'] = {};
+	export let fitInputWidth: boolean = false;
+	const dispatch = createEventDispatcher();
+	const handleClick = () => {
+		if (disabled) return;
+		dispatch('click');
+	};
+
+	// class names
+	const prefixCls = getPrefixCls('select--option');
+	$: cnames = clsx(
+		`${prefixCls}`,
+		`${prefixCls}__dark`,
+		`${prefixCls}__hover`,
+		{
+			[`${prefixCls}--base__disabled__dark`]: disabled,
+			[`${prefixCls}__fit`]: fitInputWidth
+		},
+		cls
+	);
+	$: activeCls = isActive ? `${prefixCls}__active` : '';
+</script>
+
+<slot>
+	<option class={`${cnames} ${activeCls}`} {...$$restProps} {...attrs} on:click={handleClick}>
+		{label}
+	</option>
+</slot>
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
index 9c950f86..464b516a 100644
--- a/components/AutoComplete/src/types.d.ts
+++ b/components/AutoComplete/src/types.d.ts
@@ -1,35 +1,38 @@
 /// <reference types="svelte" />
 import type { ClassValue } from 'clsx';
-import {IKunSize} from "@ikun-ui/utils";
+import { IKunSize } from '@ikun-ui/utils';
 export type KAutoCompleteProps = {
-  size: IKunSize;
-  // TODO:
-  value: string;
-  placeholder: string;
-  disabled: boolean;
-  iconPrefix: string;
-  iconSuffix: string;
-  append: string;
-  prepend: string;
-  // TODO:
-  isError: boolean;
-  // TODO:
-  center: boolean;
-  // TODO:输入触发，或聚焦触发
-  triggerOnFocus: boolean;
-  // TODO:
-  fetchSuggestions: undefined | ((params: string | number) => AutoCompleteItems[])
-  cls: ClassValue;
-  attrs: Record<string, string>;
-  useCompositionInput: boolean;
-  clearable: boolean;
-}
-
-export type AutoCompleteItems = {
-  [key: string]: string | number;
-  value: string | number;
+	size: IKunSize;
+	// TODO:
+	value: string;
+	placeholder: string;
+	disabled: boolean;
+	iconPrefix: string;
+	iconSuffix: string;
+	append: string;
+	prepend: string;
+	// TODO:
+	isError: boolean;
+	// TODO:
+	center: boolean;
+	// TODO:输入触发，或聚焦触发
+	triggerOnFocus: boolean;
+	// TODO:
+	fetchSuggestions: undefined | ((params: string | number) => AutoCompleteItems[]);
+	cls: ClassValue;
+	attrs: Record<string, string>;
+	useCompositionInput: boolean;
+	clearable: boolean;
+	// option
+	isActive: boolean;
+	label: string;
+	fitInputWidth: boolean;
+	maxHeight: number;
+	key: string;
 };
 
+export type AutoCompleteItems = string | number;
+
 // TODO: KAutoComplete events updatedValue
 
 // TODO: KAutoComplete slot prefix
diff --git a/components/AutoComplete/tsconfig.json b/components/AutoComplete/tsconfig.json
index bd4f5280..fe0d7c4f 100644
--- a/components/AutoComplete/tsconfig.json
+++ b/components/AutoComplete/tsconfig.json
@@ -1,12 +1,11 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+	"extends": "@tsconfig/svelte/tsconfig.json",
 
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "strict": true,
-    "declaration": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
-  "exclude": ["node_modules/*", "**/*.spec.ts"]
+	"compilerOptions": {
+		"noImplicitAny": true,
+		"strict": true,
+		"declaration": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
+	"exclude": ["node_modules/*", "**/*.spec.ts"]
 }
-  
\ No newline at end of file
diff --git a/components/index.ts b/components/index.ts
index e2b4e68c..7e93d85f 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -61,4 +61,4 @@ export * from '@ikun-ui/image-view';
 export * from '@ikun-ui/flex';
 export * from '@ikun-ui/segmented';
 export * from '@ikun-ui/steps';
-export * from '@ikun-ui/auto-complete';
\ No newline at end of file
+export * from '@ikun-ui/auto-complete';
diff --git a/package.json b/package.json
index 76054596..5dbfdf73 100644
--- a/package.json
+++ b/package.json
@@ -1,200 +1,200 @@
 {
-  "name": "@ikun-ui/core",
-  "description": "🐔 A Svelte.js based UnoCSS UI library that allows you to make websites",
-  "packageManager": "pnpm@8.14.0",
-  "type": "module",
-  "version": "0.1.5",
-  "keywords": [
-    "svelte",
-    "svelte3",
-    "web component",
-    "component",
-    "react",
-    "vue",
-    "svelte-kit",
-    "dx"
-  ],
-  "license": "MIT",
-  "author": "baiwusanyu-c",
-  "homepage": "https://github.com/ikun-svelte/ikun-ui#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ikun-svelte/ikun-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/ikun-svelte/ikun-ui/issues"
-  },
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
-    },
-    "./*": "./*"
-  },
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
-  "engines": {
-    "node": ">=14"
-  },
-  "scripts": {
-    "init": "pnpm i",
-    "dev": "pnpm run build",
-    "dev:docs": "pnpm run --filter @ikun-ui/docs docs:dev",
-    "play": "node scripts/play.js && pnpm run --filter @ikun-ui/play dev",
-    "build": "run-s build:* && run-s build-*",
-    "build-preset": "pnpm run --filter @ikun-ui/preset build",
-    "build-lib": "tsup --config tsup.config.ts",
-    "build:utils": "pnpm run --filter @ikun-ui/utils build",
-    "build:components": "node scripts/build.js",
-    "build#docs": "pnpm run --filter @ikun-ui/docs docs:build",
-    "preview:docs": "pnpm run --filter @ikun-ui/docs docs:preview",
-    "test": "pnpm run test:unit && pnpm run test:e2e",
-    "test:e2e": "pnpm run --filter @ikun-ui/e2e test",
-    "test:unit": "vitest --watch=false",
-    "test:update": "vitest -u --watch=true",
-    "test:coverage": "vitest --coverage --watch=false",
-    "lint": "prettier --check \"./**/*.{svelte,js,ts,jsx,json,md}\" && eslint .",
-    "format": "prettier --write \"./**/*.{svelte,js,ts,jsx,json,md}\"",
-    "release": "bumpp package.json components/*/package.json preset/package.json utils/package.json --commit --push --tag",
-    "publish:script": "node scripts/publish.js && pnpm run publish:npm",
-    "publish:npm": "pnpm publish --no-git-checks --access public",
-    "clean:dist": "rimraf dist && node scripts/clean.js",
-    "clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
-    "prepare": "npx simple-git-hooks",
-    "update:deps": "npx taze -w -r major && pnpm run init",
-    "create:new:comp": "node scripts/new-component.js auto-complete"
-  },
-  "peerDependencies": {
-    "baiwusanyu-utils": "^1.0.18",
-    "svelte": "^4.0.0",
-    "unocss": "^0.57.7"
-  },
-  "dependencies": {
-    "@ikun-ui/affix": "workspace:*",
-    "@ikun-ui/alert": "workspace:*",
-    "@ikun-ui/avatar": "workspace:*",
-    "@ikun-ui/backtop": "workspace:*",
-    "@ikun-ui/badge": "workspace:*",
-    "@ikun-ui/breadcrumb": "workspace:*",
-    "@ikun-ui/breadcrumb-item": "workspace:*",
-    "@ikun-ui/button": "workspace:*",
-    "@ikun-ui/button-group": "workspace:*",
-    "@ikun-ui/card": "workspace:*",
-    "@ikun-ui/carousel": "workspace:*",
-    "@ikun-ui/checkbox": "workspace:*",
-    "@ikun-ui/checkbox-group": "workspace:*",
-    "@ikun-ui/client-only": "workspace:*",
-    "@ikun-ui/collapse": "workspace:*",
-    "@ikun-ui/collapse-wrapper": "workspace:*",
-    "@ikun-ui/contextmenu": "workspace:*",
-    "@ikun-ui/countdown": "workspace:*",
-    "@ikun-ui/descriptions": "workspace:*",
-    "@ikun-ui/descriptions-item": "workspace:*",
-    "@ikun-ui/divider": "workspace:*",
-    "@ikun-ui/drawer": "workspace:*",
-    "@ikun-ui/dropdown": "workspace:*",
-    "@ikun-ui/ellipsis": "workspace:*",
-    "@ikun-ui/empty": "workspace:*",
-    "@ikun-ui/eye-dropper": "workspace:*",
-    "@ikun-ui/flex": "workspace:*",
-    "@ikun-ui/form": "workspace:*",
-    "@ikun-ui/grid": "workspace:*",
-    "@ikun-ui/icon": "workspace:*",
-    "@ikun-ui/image": "workspace:*",
-    "@ikun-ui/image-view": "workspace:*",
-    "@ikun-ui/infinite": "workspace:*",
-    "@ikun-ui/input": "workspace:*",
-    "@ikun-ui/input-number": "workspace:*",
-    "@ikun-ui/layout": "workspace:*",
-    "@ikun-ui/link": "workspace:*",
-    "@ikun-ui/mask": "workspace:*",
-    "@ikun-ui/message": "workspace:*",
-    "@ikun-ui/message-box": "workspace:*",
-    "@ikun-ui/modal": "workspace:*",
-    "@ikun-ui/notify": "workspace:*",
-    "@ikun-ui/page-header": "workspace:*",
-    "@ikun-ui/pagination": "workspace:*",
-    "@ikun-ui/popconfirm": "workspace:*",
-    "@ikun-ui/popover": "workspace:*",
-    "@ikun-ui/preset": "workspace:*",
-    "@ikun-ui/progress": "workspace:*",
-    "@ikun-ui/radio": "workspace:*",
-    "@ikun-ui/radio-group": "workspace:*",
-    "@ikun-ui/rate": "workspace:*",
-    "@ikun-ui/scrollbar": "workspace:*",
-    "@ikun-ui/select": "workspace:*",
-    "@ikun-ui/slider": "workspace:*",
-    "@ikun-ui/spin": "workspace:*",
-    "@ikun-ui/statistic": "workspace:*",
-    "@ikun-ui/switch": "workspace:*",
-    "@ikun-ui/tabs": "workspace:*",
-    "@ikun-ui/tag": "workspace:*",
-    "@ikun-ui/tooltip": "workspace:*",
-    "@ikun-ui/utils": "workspace:*",
-    "@ikun-ui/virtual-list": "workspace:*",
-    "@ikun-ui/watermark": "workspace:*",
-    "baiwusanyu-utils": "^1.0.18",
-    "clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
-    "@ikun-ui/segmented": "workspace:*",
-    "@ikun-ui/steps": "workspace:*",
-    "@ikun-ui/auto-complete": "workspace:*"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.0.6",
-    "@sveltejs/package": "^2.2.5",
-    "@sveltejs/vite-plugin-svelte": "^2.5.3",
-    "@testing-library/svelte": "^4.0.5",
-    "@types/node": "^20.10.6",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
-    "@unocss/preset-mini": "^0.58.3",
-    "@unocss/preset-uno": "^0.58.3",
-    "@vitest/ui": "^1.1.1",
-    "bumpp": "^9.2.1",
-    "chokidar": "^3.5.3",
-    "del": "^7.1.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "fast-glob": "^3.3.2",
-    "fs-extra": "11.1.1",
-    "jsdom": "^23.0.1",
-    "lint-staged": "^15.2.0",
-    "npm-run-all": "^4.1.5",
-    "ora": "^8.0.1",
-    "playwright-chromium": "^1.40.1",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "publint": "^0.2.7",
-    "rimraf": "^5.0.5",
-    "shelljs": "^0.8.5",
-    "simple-git-hooks": "^2.9.0",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "svelte-preprocess": "latest",
-    "tslib": "^2.6.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "unocss": "^0.58.3",
-    "vite": "^5.0.10",
-    "vitest": "^1.1.1"
-  },
-  "lint-staged": {
-    "*.{svelte,js,ts,jsx,json}": [
-      "prettier --write ",
-      "eslint"
-    ]
-  },
-  "simple-git-hooks": {
-    "pre-commit": "npx lint-staged",
-    "commit-msg": "node vertify-commit.js"
-  }
-}
\ No newline at end of file
+	"name": "@ikun-ui/core",
+	"description": "🐔 A Svelte.js based UnoCSS UI library that allows you to make websites",
+	"packageManager": "pnpm@8.14.0",
+	"type": "module",
+	"version": "0.1.5",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"license": "MIT",
+	"author": "baiwusanyu-c",
+	"homepage": "https://github.com/ikun-svelte/ikun-ui#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ikun-svelte/ikun-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/ikun-svelte/ikun-ui/issues"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.cjs",
+			"import": "./dist/index.js"
+		},
+		"./*": "./*"
+	},
+	"files": [
+		"dist",
+		"*.d.ts"
+	],
+	"engines": {
+		"node": ">=14"
+	},
+	"scripts": {
+		"init": "pnpm i",
+		"dev": "pnpm run build",
+		"dev:docs": "pnpm run --filter @ikun-ui/docs docs:dev",
+		"play": "node scripts/play.js && pnpm run --filter @ikun-ui/play dev",
+		"build": "run-s build:* && run-s build-*",
+		"build-preset": "pnpm run --filter @ikun-ui/preset build",
+		"build-lib": "tsup --config tsup.config.ts",
+		"build:utils": "pnpm run --filter @ikun-ui/utils build",
+		"build:components": "node scripts/build.js",
+		"build#docs": "pnpm run --filter @ikun-ui/docs docs:build",
+		"preview:docs": "pnpm run --filter @ikun-ui/docs docs:preview",
+		"test": "pnpm run test:unit && pnpm run test:e2e",
+		"test:e2e": "pnpm run --filter @ikun-ui/e2e test",
+		"test:unit": "vitest --watch=false",
+		"test:update": "vitest -u --watch=true",
+		"test:coverage": "vitest --coverage --watch=false",
+		"lint": "prettier --check \"./**/*.{svelte,js,ts,jsx,json,md}\" && eslint .",
+		"format": "prettier --write \"./**/*.{svelte,js,ts,jsx,json,md}\"",
+		"release": "bumpp package.json components/*/package.json preset/package.json utils/package.json --commit --push --tag",
+		"publish:script": "node scripts/publish.js && pnpm run publish:npm",
+		"publish:npm": "pnpm publish --no-git-checks --access public",
+		"clean:dist": "rimraf dist && node scripts/clean.js",
+		"clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
+		"prepare": "npx simple-git-hooks",
+		"update:deps": "npx taze -w -r major && pnpm run init",
+		"create:new:comp": "node scripts/new-component.js auto-complete"
+	},
+	"peerDependencies": {
+		"baiwusanyu-utils": "^1.0.18",
+		"svelte": "^4.0.0",
+		"unocss": "^0.57.7"
+	},
+	"dependencies": {
+		"@ikun-ui/affix": "workspace:*",
+		"@ikun-ui/alert": "workspace:*",
+		"@ikun-ui/avatar": "workspace:*",
+		"@ikun-ui/backtop": "workspace:*",
+		"@ikun-ui/badge": "workspace:*",
+		"@ikun-ui/breadcrumb": "workspace:*",
+		"@ikun-ui/breadcrumb-item": "workspace:*",
+		"@ikun-ui/button": "workspace:*",
+		"@ikun-ui/button-group": "workspace:*",
+		"@ikun-ui/card": "workspace:*",
+		"@ikun-ui/carousel": "workspace:*",
+		"@ikun-ui/checkbox": "workspace:*",
+		"@ikun-ui/checkbox-group": "workspace:*",
+		"@ikun-ui/client-only": "workspace:*",
+		"@ikun-ui/collapse": "workspace:*",
+		"@ikun-ui/collapse-wrapper": "workspace:*",
+		"@ikun-ui/contextmenu": "workspace:*",
+		"@ikun-ui/countdown": "workspace:*",
+		"@ikun-ui/descriptions": "workspace:*",
+		"@ikun-ui/descriptions-item": "workspace:*",
+		"@ikun-ui/divider": "workspace:*",
+		"@ikun-ui/drawer": "workspace:*",
+		"@ikun-ui/dropdown": "workspace:*",
+		"@ikun-ui/ellipsis": "workspace:*",
+		"@ikun-ui/empty": "workspace:*",
+		"@ikun-ui/eye-dropper": "workspace:*",
+		"@ikun-ui/flex": "workspace:*",
+		"@ikun-ui/form": "workspace:*",
+		"@ikun-ui/grid": "workspace:*",
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/image": "workspace:*",
+		"@ikun-ui/image-view": "workspace:*",
+		"@ikun-ui/infinite": "workspace:*",
+		"@ikun-ui/input": "workspace:*",
+		"@ikun-ui/input-number": "workspace:*",
+		"@ikun-ui/layout": "workspace:*",
+		"@ikun-ui/link": "workspace:*",
+		"@ikun-ui/mask": "workspace:*",
+		"@ikun-ui/message": "workspace:*",
+		"@ikun-ui/message-box": "workspace:*",
+		"@ikun-ui/modal": "workspace:*",
+		"@ikun-ui/notify": "workspace:*",
+		"@ikun-ui/page-header": "workspace:*",
+		"@ikun-ui/pagination": "workspace:*",
+		"@ikun-ui/popconfirm": "workspace:*",
+		"@ikun-ui/popover": "workspace:*",
+		"@ikun-ui/preset": "workspace:*",
+		"@ikun-ui/progress": "workspace:*",
+		"@ikun-ui/radio": "workspace:*",
+		"@ikun-ui/radio-group": "workspace:*",
+		"@ikun-ui/rate": "workspace:*",
+		"@ikun-ui/scrollbar": "workspace:*",
+		"@ikun-ui/select": "workspace:*",
+		"@ikun-ui/slider": "workspace:*",
+		"@ikun-ui/spin": "workspace:*",
+		"@ikun-ui/statistic": "workspace:*",
+		"@ikun-ui/switch": "workspace:*",
+		"@ikun-ui/tabs": "workspace:*",
+		"@ikun-ui/tag": "workspace:*",
+		"@ikun-ui/tooltip": "workspace:*",
+		"@ikun-ui/utils": "workspace:*",
+		"@ikun-ui/virtual-list": "workspace:*",
+		"@ikun-ui/watermark": "workspace:*",
+		"baiwusanyu-utils": "^1.0.18",
+		"clsx": "^2.1.0",
+		"dayjs": "^1.11.10",
+		"@ikun-ui/segmented": "workspace:*",
+		"@ikun-ui/steps": "workspace:*",
+		"@ikun-ui/auto-complete": "workspace:*"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.1.0",
+		"@sveltejs/kit": "^2.0.6",
+		"@sveltejs/package": "^2.2.5",
+		"@sveltejs/vite-plugin-svelte": "^2.5.3",
+		"@testing-library/svelte": "^4.0.5",
+		"@types/node": "^20.10.6",
+		"@typescript-eslint/eslint-plugin": "^6.17.0",
+		"@typescript-eslint/parser": "^6.17.0",
+		"@unocss/preset-mini": "^0.58.3",
+		"@unocss/preset-uno": "^0.58.3",
+		"@vitest/ui": "^1.1.1",
+		"bumpp": "^9.2.1",
+		"chokidar": "^3.5.3",
+		"del": "^7.1.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"fast-glob": "^3.3.2",
+		"fs-extra": "11.1.1",
+		"jsdom": "^23.0.1",
+		"lint-staged": "^15.2.0",
+		"npm-run-all": "^4.1.5",
+		"ora": "^8.0.1",
+		"playwright-chromium": "^1.40.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.2.7",
+		"rimraf": "^5.0.5",
+		"shelljs": "^0.8.5",
+		"simple-git-hooks": "^2.9.0",
+		"svelte": "^4.2.8",
+		"svelte-check": "^3.6.2",
+		"svelte-preprocess": "latest",
+		"tslib": "^2.6.2",
+		"tsup": "^8.0.1",
+		"typescript": "^5.3.3",
+		"unocss": "^0.58.3",
+		"vite": "^5.0.10",
+		"vitest": "^1.1.1"
+	},
+	"lint-staged": {
+		"*.{svelte,js,ts,jsx,json}": [
+			"prettier --write ",
+			"eslint"
+		]
+	},
+	"simple-git-hooks": {
+		"pre-commit": "npx lint-staged",
+		"commit-msg": "node vertify-commit.js"
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb0955fe..d03750a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -392,12 +392,27 @@ importers:
 
   components/AutoComplete:
     dependencies:
+      '@ikun-ui/button':
+        specifier: workspace:*
+        version: link:../Button
+      '@ikun-ui/form':
+        specifier: workspace:*
+        version: link:../Form
       '@ikun-ui/icon':
         specifier: workspace:*
         version: link:../Icon
+      '@ikun-ui/input':
+        specifier: workspace:*
+        version: link:../Input
+      '@ikun-ui/popover':
+        specifier: workspace:*
+        version: link:../Popover
       '@ikun-ui/utils':
         specifier: workspace:*
         version: link:../../utils
+      '@ikun-ui/virtual-list':
+        specifier: workspace:*
+        version: link:../VirtualList
       baiwusanyu-utils:
         specifier: ^1.0.18
         version: 1.0.18(ansi-colors@4.1.3)(moment@2.29.4)
@@ -3542,7 +3557,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@2.5.3)(svelte@4.2.8)(vite@5.0.10)
+      '@sveltejs/kit': 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
       import-meta-resolve: 4.0.0
     dev: true
 
diff --git a/preset/src/shortcuts/src/auto-complete.ts b/preset/src/shortcuts/src/auto-complete.ts
index 6c8e8476..ade1ff8d 100644
--- a/preset/src/shortcuts/src/auto-complete.ts
+++ b/preset/src/shortcuts/src/auto-complete.ts
@@ -1,3 +1,3 @@
 export const autoCompleteShortcuts: Record<string, string> = {
-  'k-auto-complete': ''
-}
+	'k-auto-complete': ''
+};

From 28c5fdb4328ec151d302b0a25fad86d5296d3da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 17 Jan 2024 22:45:49 +0800
Subject: [PATCH 3/8] chore: complete basic interactive functions

---
 components/AutoComplete/src/index.svelte | 81 ++++++++++++++----------
 components/AutoComplete/src/types.d.ts   | 21 +++---
 components/Popover/src/index.svelte      | 13 +++-
 3 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index 1bd42f7a..17df6b6a 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -74,13 +74,25 @@
 	let popoverWidth: undefined | string = undefined;
 	let triggerWidth: undefined | string = 'initial';
 	let list = [] as Array<Record<string, any>>;
-	const handleInput = (e: CustomEvent) => {
-		// dispatch('input', e.detail)
-		// if(fetchSuggestions){
-		//     list = fetchSuggestions(e.detail)
-		// }
+	let text = 'no data';
+	const handleInput = async (e: CustomEvent) => {
+		curValue = e.detail
+		// 根据输入值重新触发 list 更新
+		if(isOpen && fetchSuggestions){
+			curValue = e.detail
+			text = 'loading';
+			fetchSuggestions(curValue, (res) => {
+				list = res.map((v) => wrapperData(v.value as KAutoCompleteProps['value']));
+				setVList();
+			});
+		}
+
+		if (!triggerOnFocus) {
+			isDisabledPopover = false
+			await tick()
+			popoverRef.updateShow(true);
+		}
 	};
-	// TODO remote
 	let popoverRef: any = null;
 	const setPopoverW = () => {
 		if (inputSelectRef) {
@@ -94,15 +106,18 @@
 	});
 
 	// TODO
-	let isDisabledPopover = false;
+	let isDisabledPopover = disabled || !triggerOnFocus;
 	$: {
-		isDisabledPopover = false;
+		isDisabledPopover = disabled  || !triggerOnFocus;
 	}
 
 	let popoverModalRef: HTMLElement | null = null;
 	let heightInner = 'initial';
-	let vListRef: any = null;
 	async function setVList() {
+		if(!list.length) {
+			text = 'no data';
+			return
+		}
 		await tick();
 		if (popoverModalRef) {
 			const container = popoverModalRef.childNodes[0];
@@ -110,31 +125,17 @@
 				const { height } = (container as HTMLElement).children[0].getBoundingClientRect();
 				if (height > maxHeight) {
 					heightInner = `${maxHeight}px`;
-					await tick();
-					vListRef && locateItem();
 				}
 			}
 		}
 	}
 
-	async function locateItem() {
-		for (let i = 0; i < list.length; i++) {
-			if (isActive(list[i])) {
-				vListRef && vListRef.scrollToIndex(i - 3);
-				break;
-			}
-		}
-	}
-
 	const getLabel = (item: Record<any, string>) => {
 		if (isObject(item)) {
 			const label = item.label || '';
 			return label.toString();
 		}
 	};
-	const isActive = (item: Record<any, string>) => {
-		return item.value === value;
-	};
 
 	const wrapperData = (v: KAutoCompleteProps['value']) => {
 		return {
@@ -143,12 +144,18 @@
 			id: v
 		};
 	};
+
+	$: curValue = value
+	let isOpen = false
 	async function onOpen(e: CustomEvent) {
+		isOpen = e.detail
 		// TODO: isDisabledPopover = true
-		if (fetchSuggestions && triggerOnFocus) {
-			const resolveList = await fetchSuggestions(e.detail);
-			list = resolveList.map((v) => wrapperData(v as KAutoCompleteProps['value']));
-			setVList();
+		if (fetchSuggestions &&
+				(triggerOnFocus || !triggerOnFocus && !isDisabledPopover)) {
+			fetchSuggestions(curValue, (res) => {
+				list = res.map((v) => wrapperData(v.value as KAutoCompleteProps['value']));
+				setVList();
+			});
 		}
 	}
 
@@ -156,11 +163,14 @@
 	const handleSelect = async (data: Record<string, any>) => {
 		// TODO: if (disabledInner) return;
 		dispatch('updateValue', data.value);
+		curValue = data.value
 		// TODO: formInstance && formInstance?.updateField(field!, data, !formInstance.__manual_validate);
 		// TODO: //await tick();
 		// TODO: formInstance && (value = data!);
 		popoverRef.updateShow(false);
 	};
+
+	const noDataCls = clsx(`k-select--tx__empty`);
 </script>
 
 <KPopover
@@ -174,7 +184,10 @@
 	width={triggerWidth}
 	placement="bottom"
 >
-	<div class={cname} {...attrs} slot="triggerEl" bind:this={inputSelectRef} aria-hidden="true">
+	<div class={cname} {...attrs}
+		 slot="triggerEl"
+		 bind:this={inputSelectRef}
+		 aria-hidden="true">
 		<KInput
 			on:input={handleInput}
 			on:enter={handleEnter}
@@ -186,7 +199,7 @@
 			on:triggerPrepend={handleTriggerPrepend}
 			on:triggerAppend={handleTriggerAppend}
 			{size}
-			{value}
+			value={curValue}
 			{placeholder}
 			{disabled}
 			{iconPrefix}
@@ -210,20 +223,22 @@
 		style:max-height={`${maxHeight}px`}
 	>
 		{#if list.length > 0}
-			<KVirtualList data={list} key="id" bind:this={vListRef} estimateSize={list.length} let:data>
+			<KVirtualList data={list}
+						  key="id"
+						  estimateSize={list.length}
+						  let:data>
 				{#if !$$slots.default}
 					<KOption
 						{fitInputWidth}
 						label={getLabel(data)}
-						isActive={isActive(data)}
 						on:click={() => handleSelect(data)}
 					></KOption>
 				{:else}
-					<slot {data} onSelect={handleSelect} label={data} isActive={isActive(data)} />
+					<slot {data} onSelect={handleSelect} label={data} />
 				{/if}
 			</KVirtualList>
 		{:else}
-			<p>TODO noDataCls text</p>
+			<p class={noDataCls}>{text}</p>
 		{/if}
 	</div>
 </KPopover>
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
index 464b516a..fc79fb12 100644
--- a/components/AutoComplete/src/types.d.ts
+++ b/components/AutoComplete/src/types.d.ts
@@ -1,12 +1,15 @@
 /// <reference types="svelte" />
 import type { ClassValue } from 'clsx';
 import { IKunSize } from '@ikun-ui/utils';
+import {string} from "fast-glob/out/utils";
 export type KAutoCompleteProps = {
+	// TODO: KForm
 	size: IKunSize;
-	// TODO:
+	// TODO: KForm
 	value: string;
-	placeholder: string;
+	// TODO: KForm、disabled
 	disabled: boolean;
+	placeholder: string;
 	iconPrefix: string;
 	iconSuffix: string;
 	append: string;
@@ -15,10 +18,11 @@ export type KAutoCompleteProps = {
 	isError: boolean;
 	// TODO:
 	center: boolean;
-	// TODO:输入触发，或聚焦触发
 	triggerOnFocus: boolean;
-	// TODO:
-	fetchSuggestions: undefined | ((params: string | number) => AutoCompleteItems[]);
+	fetchSuggestions: undefined | ((
+		params: string | number,
+		cb: (res: AutoCompleteItems[]) => void
+	) => void);
 	cls: ClassValue;
 	attrs: Record<string, string>;
 	useCompositionInput: boolean;
@@ -31,13 +35,14 @@ export type KAutoCompleteProps = {
 	key: string;
 };
 
-export type AutoCompleteItems = string | number;
+export type AutoCompleteItems = {
+	[string]: any
+	value: string | number
+}
 
-// TODO: KAutoComplete events updatedValue
 
 // TODO: KAutoComplete slot prefix
 // TODO: KAutoComplete slot suffix
 // TODO: KAutoComplete slot default
-// TODO: KAutoComplete loading default
 
 // TODO: KForm
diff --git a/components/Popover/src/index.svelte b/components/Popover/src/index.svelte
index e7760d1e..abd1778e 100644
--- a/components/Popover/src/index.svelte
+++ b/components/Popover/src/index.svelte
@@ -115,12 +115,22 @@
 		arrowRef && arrowRef.removeAttribute(`data-popper-arrow-right`);
 		arrowRef && arrowRef.setAttribute(`data-popper-arrow-${curPlacement}`, '');
 	}
+
+	let popoverContainerRef: HTMLDivElement | null = null
 	function clickOutside(node: HTMLElement) {
 		function handleClickOutside(e: MouseEvent) {
 			const target = e.target as HTMLElement;
 			const container = node;
 			if (target && container && !container.contains(target)) {
-				doUpdateShow(false);
+				if(popoverContainerRef){
+					const triggerEl = popoverContainerRef.querySelector('[slot="triggerEl"]')
+					if(!triggerEl || !triggerEl.contains(target)){
+						doUpdateShow(false);
+					}
+				} else {
+					doUpdateShow(false);
+				}
+
 			}
 		}
 		trigger === 'click' && window.addEventListener('click', handleClickOutside);
@@ -153,6 +163,7 @@
 <div
 	aria-hidden="true"
 	use:popperRef
+	bind:this={popoverContainerRef}
 	on:click={handleClick}
 	class={triggerCls}
 	style:width

From b556229881db44d7eca89f7ff1ed69da30003968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:34:18 +0800
Subject: [PATCH 4/8] chore: complete prefix and suffix slot

---
 components/AutoComplete/src/index.svelte | 6 +++++-
 components/AutoComplete/src/types.d.ts   | 3 ---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index 17df6b6a..0001d035 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -211,7 +211,11 @@
 			{...$$restProps}
 			{...attrs}
 			type="text"
-		/>
+		>
+			<slot name="prefix" slot="prefix"></slot>
+			<slot name="suffix" slot="suffix"></slot>
+		</KInput>
+
 	</div>
 	<div
 		slot="contentEl"
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
index fc79fb12..fb0a3b6d 100644
--- a/components/AutoComplete/src/types.d.ts
+++ b/components/AutoComplete/src/types.d.ts
@@ -40,9 +40,6 @@ export type AutoCompleteItems = {
 	value: string | number
 }
 
-
-// TODO: KAutoComplete slot prefix
-// TODO: KAutoComplete slot suffix
 // TODO: KAutoComplete slot default
 
 // TODO: KForm

From f87b4558fc0e69bac5d0f302cb293d0e05728bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:40:23 +0800
Subject: [PATCH 5/8] chore: complete form function

---
 components/AutoComplete/src/index.svelte | 74 +++++++++---------------
 components/AutoComplete/src/types.d.ts   | 26 ++-------
 components/Input/src/index.svelte        | 17 +++---
 3 files changed, 42 insertions(+), 75 deletions(-)

diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index 0001d035..46b3df8c 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import type { AutoCompleteItems, KAutoCompleteProps } from './types';
-	import { createEventDispatcher, tick, getContext, onMount } from 'svelte';
+	import type { KAutoCompleteProps } from './types';
+	import { createEventDispatcher, tick, onMount } from 'svelte';
 	import { KInput } from '@ikun-ui/input';
-	import { formItemKey, formKey, getPrefixCls } from '@ikun-ui/utils';
+	import { getPrefixCls } from '@ikun-ui/utils';
 	import clsx from 'clsx';
 	import { isObject } from 'baiwusanyu-utils';
-	import type { CSSObject } from 'unocss';
-	import type { IKunFormInstance } from '@ikun-ui/form';
 	import { KPopover } from '@ikun-ui/popover';
 	import { KVirtualList } from '@ikun-ui/virtual-list';
 	import KOption from './option.svelte';
@@ -27,14 +25,6 @@
 
 	export let maxHeight: KAutoCompleteProps['maxHeight'] = 250;
 	export let fitInputWidth: KAutoCompleteProps['fitInputWidth'] = true;
-	/**
-	 * @internal
-	 */
-	export let isError: KAutoCompleteProps['isError'] = false;
-	/**
-	 * @internal
-	 */
-	export let center: KAutoCompleteProps['center'] = false;
 	export let clearable: KAutoCompleteProps['clearable'] = false;
 	// class names
 	const prefixCls = getPrefixCls('auto-complete');
@@ -76,10 +66,10 @@
 	let list = [] as Array<Record<string, any>>;
 	let text = 'no data';
 	const handleInput = async (e: CustomEvent) => {
-		curValue = e.detail
+		curValue = e.detail;
 		// 根据输入值重新触发 list 更新
-		if(isOpen && fetchSuggestions){
-			curValue = e.detail
+		if (isOpen && fetchSuggestions) {
+			curValue = e.detail;
 			text = 'loading';
 			fetchSuggestions(curValue, (res) => {
 				list = res.map((v) => wrapperData(v.value as KAutoCompleteProps['value']));
@@ -88,8 +78,8 @@
 		}
 
 		if (!triggerOnFocus) {
-			isDisabledPopover = false
-			await tick()
+			isDisabledPopover = false;
+			await tick();
 			popoverRef.updateShow(true);
 		}
 	};
@@ -105,18 +95,17 @@
 		setPopoverW();
 	});
 
-	// TODO
 	let isDisabledPopover = disabled || !triggerOnFocus;
 	$: {
-		isDisabledPopover = disabled  || !triggerOnFocus;
+		isDisabledPopover = disabled || !triggerOnFocus;
 	}
 
 	let popoverModalRef: HTMLElement | null = null;
 	let heightInner = 'initial';
 	async function setVList() {
-		if(!list.length) {
+		if (!list.length) {
 			text = 'no data';
-			return
+			return;
 		}
 		await tick();
 		if (popoverModalRef) {
@@ -145,13 +134,11 @@
 		};
 	};
 
-	$: curValue = value
-	let isOpen = false
+	$: curValue = value;
+	let isOpen = false;
 	async function onOpen(e: CustomEvent) {
-		isOpen = e.detail
-		// TODO: isDisabledPopover = true
-		if (fetchSuggestions &&
-				(triggerOnFocus || !triggerOnFocus && !isDisabledPopover)) {
+		isOpen = e.detail;
+		if (fetchSuggestions && (triggerOnFocus || (!triggerOnFocus && !isDisabledPopover))) {
 			fetchSuggestions(curValue, (res) => {
 				list = res.map((v) => wrapperData(v.value as KAutoCompleteProps['value']));
 				setVList();
@@ -159,14 +146,14 @@
 		}
 	}
 
+	let inputRef = null;
 	// updateValue
 	const handleSelect = async (data: Record<string, any>) => {
-		// TODO: if (disabledInner) return;
 		dispatch('updateValue', data.value);
-		curValue = data.value
-		// TODO: formInstance && formInstance?.updateField(field!, data, !formInstance.__manual_validate);
-		// TODO: //await tick();
-		// TODO: formInstance && (value = data!);
+		curValue = data.value;
+		if (inputRef) {
+			inputRef.doUpdateFormField(curValue);
+		}
 		popoverRef.updateShow(false);
 	};
 
@@ -184,11 +171,9 @@
 	width={triggerWidth}
 	placement="bottom"
 >
-	<div class={cname} {...attrs}
-		 slot="triggerEl"
-		 bind:this={inputSelectRef}
-		 aria-hidden="true">
+	<div class={cname} {...attrs} slot="triggerEl" bind:this={inputSelectRef} aria-hidden="true">
 		<KInput
+			bind:this={inputRef}
 			on:input={handleInput}
 			on:enter={handleEnter}
 			on:keydown={handleKeydown}
@@ -212,10 +197,9 @@
 			{...attrs}
 			type="text"
 		>
-			<slot name="prefix" slot="prefix"></slot>
-			<slot name="suffix" slot="suffix"></slot>
+			<slot name="prefix" slot="prefix" />
+			<slot name="suffix" slot="suffix" />
 		</KInput>
-
 	</div>
 	<div
 		slot="contentEl"
@@ -227,15 +211,9 @@
 		style:max-height={`${maxHeight}px`}
 	>
 		{#if list.length > 0}
-			<KVirtualList data={list}
-						  key="id"
-						  estimateSize={list.length}
-						  let:data>
+			<KVirtualList data={list} key="id" estimateSize={list.length} let:data>
 				{#if !$$slots.default}
-					<KOption
-						{fitInputWidth}
-						label={getLabel(data)}
-						on:click={() => handleSelect(data)}
+					<KOption {fitInputWidth} label={getLabel(data)} on:click={() => handleSelect(data)}
 					></KOption>
 				{:else}
 					<slot {data} onSelect={handleSelect} label={data} />
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
index fb0a3b6d..035dd9fb 100644
--- a/components/AutoComplete/src/types.d.ts
+++ b/components/AutoComplete/src/types.d.ts
@@ -1,28 +1,20 @@
 /// <reference types="svelte" />
 import type { ClassValue } from 'clsx';
 import { IKunSize } from '@ikun-ui/utils';
-import {string} from "fast-glob/out/utils";
+
 export type KAutoCompleteProps = {
-	// TODO: KForm
 	size: IKunSize;
-	// TODO: KForm
 	value: string;
-	// TODO: KForm、disabled
 	disabled: boolean;
 	placeholder: string;
 	iconPrefix: string;
 	iconSuffix: string;
 	append: string;
 	prepend: string;
-	// TODO:
-	isError: boolean;
-	// TODO:
-	center: boolean;
 	triggerOnFocus: boolean;
-	fetchSuggestions: undefined | ((
-		params: string | number,
-		cb: (res: AutoCompleteItems[]) => void
-	) => void);
+	fetchSuggestions:
+		| undefined
+		| ((params: string | number, cb: (res: AutoCompleteItems[]) => void) => void);
 	cls: ClassValue;
 	attrs: Record<string, string>;
 	useCompositionInput: boolean;
@@ -35,11 +27,5 @@ export type KAutoCompleteProps = {
 	key: string;
 };
 
-export type AutoCompleteItems = {
-	[string]: any
-	value: string | number
-}
-
-// TODO: KAutoComplete slot default
-
-// TODO: KForm
+// TODO: unit test
+// TODO: document
diff --git a/components/Input/src/index.svelte b/components/Input/src/index.svelte
index c234aca2..09626a68 100644
--- a/components/Input/src/index.svelte
+++ b/components/Input/src/index.svelte
@@ -80,7 +80,7 @@
 		if (disabledInner) return;
 		const { value: inputValue } = e.target as HTMLInputElement;
 		dispatch('input', inputValue, e);
-		formInstance && formInstance?.updateField(field!, inputValue, !formInstance.__manual_validate);
+		doUpdateFormField(inputValue);
 		if (!useCompositionInput || !isComposing) {
 			value = inputValue;
 			if (useCompositionInput && !isComposing) {
@@ -92,14 +92,17 @@
 	const onChange = (e: Event) => {
 		if (disabledInner) return;
 		dispatch('change', e);
-		formInstance &&
-			formInstance?.updateField(
-				field!,
-				(e?.target as HTMLInputElement)?.value,
-				!formInstance.__manual_validate
-			);
+		doUpdateFormField((e?.target as HTMLInputElement)?.value);
 	};
 
+	/**
+	 * @internal
+	 * @param value
+	 */
+	export function doUpdateFormField(value) {
+		formInstance && formInstance?.updateField(field!, value, !formInstance.__manual_validate);
+	}
+
 	const onClear = () => {
 		if (disabledInner) return;
 		value = '';

From 98555bd86fd0f5daa1f3e982774a803208d25aac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:04:38 +0800
Subject: [PATCH 6/8] test:  added autocomplete unit test

---
 .../__snapshots__/auto-complete.spec.ts.snap  |  35 ++
 .../__test__/auto-complete.spec.ts            | 304 +++++++++++++++++-
 .../fixture/autocomplete.basic.svelte         |  39 +++
 .../fixture/autocomplete.clear.svelte         |  39 +++
 .../fixture/autocomplete.default.svelte       |  41 +++
 .../fixture/autocomplete.disabled.svelte      |  39 +++
 .../__test__/fixture/autocomplete.fit.svelte  |  39 +++
 .../__test__/fixture/autocomplete.slot.svelte |  41 +++
 components/AutoComplete/src/index.svelte      |  11 +-
 components/AutoComplete/src/option.svelte     |   2 +-
 components/AutoComplete/src/types.d.ts        |   5 +-
 11 files changed, 583 insertions(+), 12 deletions(-)
 create mode 100644 components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.default.svelte
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
 create mode 100644 components/AutoComplete/__test__/fixture/autocomplete.slot.svelte

diff --git a/components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap b/components/AutoComplete/__test__/__snapshots__/auto-complete.spec.ts.snap
new file mode 100644
index 00000000..99bd2dee
--- /dev/null
+++ b/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> "`;
diff --git a/components/AutoComplete/__test__/auto-complete.spec.ts b/components/AutoComplete/__test__/auto-complete.spec.ts
index c8834727..85eaa956 100644
--- a/components/AutoComplete/__test__/auto-complete.spec.ts
+++ b/components/AutoComplete/__test__/auto-complete.spec.ts
@@ -1,6 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import KAutoComplete from '../src';
-
+import {tick} from "svelte";
+import KAutoCompleteFit from "./fixture/autocomplete.fit.svelte";
+import KAutoCompleteBasic from "./fixture/autocomplete.basic.svelte";
+import KAutoCompleteClear from "./fixture/autocomplete.clear.svelte";
+import KAutoCompleteDisabled from "./fixture/autocomplete.disabled.svelte";
+import KAutoCompleteSlot from "./fixture/autocomplete.slot.svelte";
+import KAutoCompleteDefault from "./fixture/autocomplete.default.svelte";
 let host;
 
 const initHost = () => {
@@ -29,4 +35,300 @@ describe('Test: KAutoComplete', () => {
 		expect(host!.innerHTML.includes('k-auto-complete--test')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
+	test('props: value', async () => {
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				value: 'svelte'
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		const selectElm = host.getElementsByTagName('input')[0] as HTMLInputElement;
+		expect(selectElm).not.toBeNull();
+		expect(selectElm.value).toBe('svelte');
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('props: placeholder', async () => {
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				placeholder: '绣面芙蓉一笑开'
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		expect(host.innerHTML.includes('placeholder="绣面芙蓉一笑开"')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('props: size', async () => {
+		const instanceSm = new KAutoComplete({
+			target: host,
+			props: {
+				size: 'sm'
+			}
+		});
+		const instanceMd = new KAutoComplete({
+			target: host,
+			props: {
+				size: 'md'
+			}
+		});
+		const instanceLg = new KAutoComplete({
+			target: host,
+			props: {
+				size: 'lg'
+			}
+		});
+		expect(instanceSm).toBeTruthy();
+		expect(instanceMd).toBeTruthy();
+		expect(instanceLg).toBeTruthy();
+		await tick();
+		const selectElms = document.querySelectorAll('.k-input--base');
+		expect(selectElms[0].className.includes('k-input__sm')).toBeTruthy();
+		expect(selectElms[1].className.includes('k-input__md')).toBeTruthy();
+		expect(selectElms[2].className.includes('k-input__lg')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('props: fitInputWidth', async () => {
+		const instance = new KAutoCompleteFit({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+
+		const triggerEl = host.querySelector('.k-input--inner');
+		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input'));
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		expect(host.innerHTML.includes('k-select--option__fit')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('props: clearable', async () => {
+		const instance = new KAutoCompleteClear({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		const triggerEl = host.querySelector('.k-input--inner');
+		expect(triggerEl.value === 'vue').toBeTruthy();
+		const clearEl = host.querySelector('.k-input--clear-icon');
+		(clearEl as HTMLElement)?.click();
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		expect(triggerEl.value === 'vue').not.toBeTruthy();
+	});
+
+	test('basic functional testing', async () => {
+		const instance = new KAutoCompleteBasic({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+
+		const triggerEl = host.querySelector('.k-input--inner');
+		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input', { cancelable: true }));
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		const options = host.querySelector('[data-kv-key="vue-router"]').children[0]
+		options.click()
+		await tick();
+		await vi.advanceTimersByTimeAsync(400);
+		expect(triggerEl.value === 'vue-router').toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('props: disabled', async () => {
+		const instance = new KAutoCompleteDisabled({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+
+		const triggerEl = host.querySelector('.k-input--inner');
+		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input', { cancelable: true }));
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		const options = host.querySelector('[data-kv-key="vue-router"]')
+		expect(options).not.toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('slot: prefix and suffix', async () => {
+		const instance = new KAutoCompleteSlot({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+	test('slot: default', async () => {
+		const instance = new KAutoCompleteDefault({
+			target: host
+		});
+		expect(instance).toBeTruthy();
+		const triggerEl = host.querySelector('.k-input--inner');
+		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input', { cancelable: true }));
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		expect(host.innerHTML).matchSnapshot();
+	});
+
+
+	test('event: should trigger composition input event', async () => {
+		let value = '';
+		const mockCompositionInputFn = vi.fn();
+		const mockCompositionStart = vi.fn();
+		const mockCompositionEnd = vi.fn();
+		// @ts-ignore
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				value,
+				useCompositionInput: true
+			}
+		});
+		await tick();
+		// @ts-ignore
+		instance.$on('compositionstart', () => {
+			mockCompositionStart();
+		});
+		// @ts-ignore
+		instance.$on('compositionend', () => {
+			mockCompositionEnd();
+		});
+		// @ts-ignore
+		instance.$on('compositionInput', (v) => {
+			value = v.detail;
+			mockCompositionInputFn();
+		});
+
+		const inputElm = host.getElementsByTagName('input')[0];
+		inputElm.value = 'ikun';
+		inputElm.dispatchEvent(new Event('compositionstart'));
+		inputElm.dispatchEvent(new Event('input'));
+		await tick();
+		expect(instance).toBeTruthy();
+		expect(mockCompositionStart).toBeCalled();
+		expect(mockCompositionInputFn.mock.calls.length).toBe(0);
+		expect(value).toBe('');
+
+		inputElm.value = 'ikun ikun';
+		inputElm.dispatchEvent(new Event('compositionend'));
+		await tick();
+		expect(mockCompositionEnd).toBeCalled();
+		expect(mockCompositionInputFn.mock.calls.length).toBe(1);
+		expect(value).toBe('ikun ikun');
+	});
+
+	test('event: should trigger enter event when pressing enter', async () => {
+		const mockFn = vi.fn();
+		// @ts-ignore
+		const instance = new KAutoComplete({
+			target: host
+		});
+		await tick();
+		// @ts-ignore
+		instance.$on('enter', mockFn);
+		const inputElm = host.getElementsByTagName('input')[0];
+		inputElm.dispatchEvent(
+			// @ts-ignore
+			new KeyboardEvent('keydown', {
+				bubbles: true,
+				cancelable: true,
+				key: 'Enter',
+				code: 'Enter'
+			})
+		);
+		await tick();
+		expect(mockFn).toBeCalled();
+	});
+
+	test('event: should trigger keydown event when not pressing enter', async () => {
+		const mockFn = vi.fn();
+		// @ts-ignore
+		const instance = new KAutoComplete({
+			target: host
+		});
+		await tick();
+		// @ts-ignore
+		instance.$on('enter', mockFn);
+		const inputElm = host.getElementsByTagName('input')[0];
+		inputElm.dispatchEvent(
+			// @ts-ignore
+			new KeyboardEvent('keydown', {
+				bubbles: true,
+				cancelable: true,
+				key: 'A',
+				code: 'KeyA'
+			})
+		);
+		await tick();
+		expect(mockFn).not.toBeCalled();
+	});
+
+	test('event: should trigger change event', async () => {
+		let value = '';
+		const mockFn = vi.fn();
+		// @ts-ignore
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				value
+			}
+		});
+		await tick();
+		// @ts-ignore
+		instance.$on('change', (v) => {
+			value = v.detail.target.value;
+			mockFn();
+		});
+		const inputElm = host.getElementsByTagName('input')[0];
+		inputElm.value = 'ikun';
+		inputElm.dispatchEvent(new Event('change'));
+		await tick();
+		expect(instance).toBeTruthy();
+		expect(mockFn).toBeCalled();
+		expect(inputElm).toBeTruthy();
+		expect(value).toEqual('ikun');
+	});
+
+	test('event: should not trigger event when disabled', async () => {
+		const mockFn = vi.fn();
+		// @ts-ignore
+		const instance = new KAutoComplete({
+			target: host,
+			props: {
+				disabled: true
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		// @ts-ignore
+		instance.$on('change', mockFn);
+		// @ts-ignore
+		instance.$on('enter', mockFn);
+		const inputElm = host.getElementsByTagName('input')[0];
+		inputElm.dispatchEvent(new Event('input'));
+		inputElm.dispatchEvent(
+			// @ts-ignore
+			new KeyboardEvent('keydown', {
+				bubbles: true,
+				cancelable: true,
+				key: 'Enter',
+				code: 'KeyEnter'
+			})
+		);
+		inputElm.value = 'ikun';
+
+		inputElm.dispatchEvent(new Event('change'));
+		await tick();
+		expect(mockFn).not.toBeCalled();
+	});
+
 });
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte b/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
new file mode 100644
index 00000000..95c9f7a6
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
@@ -0,0 +1,39 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               fitInputWidth
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+</KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte b/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
new file mode 100644
index 00000000..c25d169a
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
@@ -0,0 +1,39 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               clearable
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+</KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.default.svelte b/components/AutoComplete/__test__/fixture/autocomplete.default.svelte
new file mode 100644
index 00000000..8b44c31c
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.default.svelte
@@ -0,0 +1,41 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               let:data
+               fitInputWidth
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+    <div>test {data.label}</div>
+</KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte b/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
new file mode 100644
index 00000000..84bea6ec
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
@@ -0,0 +1,39 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               disabled
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+</KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte b/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
new file mode 100644
index 00000000..95c9f7a6
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
@@ -0,0 +1,39 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               fitInputWidth
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+</KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte b/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte
new file mode 100644
index 00000000..0f77c2fe
--- /dev/null
+++ b/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte
@@ -0,0 +1,41 @@
+<script>
+import {KAutoComplete} from "../../src/index";
+const handleInput = (event) => {
+    value = event.detail;
+};
+
+let value = 'vue'
+const restaurants = [
+    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+]
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        )
+    }
+}
+const fetchFn = (queryString, cb) => {
+    const results = queryString
+        ? restaurants.filter(createFilter(queryString))
+        : restaurants
+    cb(results)
+}
+</script>
+
+<KAutoComplete {value}
+               append='i-carbon-logo-svelte'
+               prepend='i-carbon-search'
+               placeholder="please select"
+               fitInputWidth
+               on:updateValue={handleInput}
+               fetchSuggestions={fetchFn}>
+    <div slot="suffix">🏀</div>
+    <div slot="prefix">🏀</div>
+</KAutoComplete>
diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index 46b3df8c..b8bfe040 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -13,8 +13,6 @@
 	export let value: KAutoCompleteProps['value'] = '';
 	export let placeholder: KAutoCompleteProps['placeholder'] = '';
 	export let disabled: KAutoCompleteProps['disabled'] = false;
-	export let iconPrefix: KAutoCompleteProps['iconPrefix'] = '';
-	export let iconSuffix: KAutoCompleteProps['iconSuffix'] = '';
 	export let append: KAutoCompleteProps['append'] = '';
 	export let prepend: KAutoCompleteProps['prepend'] = '';
 	export let cls: KAutoCompleteProps['cls'] = undefined;
@@ -187,16 +185,13 @@
 			value={curValue}
 			{placeholder}
 			{disabled}
-			{iconPrefix}
-			{iconSuffix}
 			{append}
 			{prepend}
 			{clearable}
 			{useCompositionInput}
 			{...$$restProps}
 			{...attrs}
-			type="text"
-		>
+			type="text">
 			<slot name="prefix" slot="prefix" />
 			<slot name="suffix" slot="suffix" />
 		</KInput>
@@ -213,7 +208,9 @@
 		{#if list.length > 0}
 			<KVirtualList data={list} key="id" estimateSize={list.length} let:data>
 				{#if !$$slots.default}
-					<KOption {fitInputWidth} label={getLabel(data)} on:click={() => handleSelect(data)}
+					<KOption {fitInputWidth}
+							 label={getLabel(data)}
+							 on:click={() => handleSelect(data)}
 					></KOption>
 				{:else}
 					<slot {data} onSelect={handleSelect} label={data} />
diff --git a/components/AutoComplete/src/option.svelte b/components/AutoComplete/src/option.svelte
index 2f728450..14846423 100644
--- a/components/AutoComplete/src/option.svelte
+++ b/components/AutoComplete/src/option.svelte
@@ -5,7 +5,7 @@
 	import type { KAutoCompleteProps } from './types';
 
 	export let label: KAutoCompleteProps['label'] = '';
-	export let cls: KAutoCompleteProps['cls'] = undefined;
+	export let cls: KAutoCompleteProps['cls'] =  '';
 	export let disabled: KAutoCompleteProps['disabled'] = false;
 	export let isActive: KAutoCompleteProps['isActive'] = false;
 	export let attrs: KAutoCompleteProps['attrs'] = {};
diff --git a/components/AutoComplete/src/types.d.ts b/components/AutoComplete/src/types.d.ts
index 035dd9fb..726487ba 100644
--- a/components/AutoComplete/src/types.d.ts
+++ b/components/AutoComplete/src/types.d.ts
@@ -6,9 +6,9 @@ export type KAutoCompleteProps = {
 	size: IKunSize;
 	value: string;
 	disabled: boolean;
+
+	clearable: boolean;
 	placeholder: string;
-	iconPrefix: string;
-	iconSuffix: string;
 	append: string;
 	prepend: string;
 	triggerOnFocus: boolean;
@@ -18,7 +18,6 @@ export type KAutoCompleteProps = {
 	cls: ClassValue;
 	attrs: Record<string, string>;
 	useCompositionInput: boolean;
-	clearable: boolean;
 	// option
 	isActive: boolean;
 	label: string;

From 39d8f5715fd8fffedee3578d52bec0fe1912bfc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:15:56 +0800
Subject: [PATCH 7/8] chore: format code

---
 .../__test__/auto-complete.spec.ts            | 22 +++---
 .../fixture/autocomplete.basic.svelte         | 70 +++++++++---------
 .../fixture/autocomplete.clear.svelte         | 70 +++++++++---------
 .../fixture/autocomplete.default.svelte       | 73 ++++++++++---------
 .../fixture/autocomplete.disabled.svelte      | 70 +++++++++---------
 .../__test__/fixture/autocomplete.fit.svelte  | 70 +++++++++---------
 .../__test__/fixture/autocomplete.slot.svelte | 73 ++++++++++---------
 components/AutoComplete/src/index.svelte      |  7 +-
 components/AutoComplete/src/option.svelte     |  2 +-
 components/Dropdown/__test__/dropdown.spec.ts |  2 +-
 components/Popover/src/index.svelte           |  9 +--
 11 files changed, 233 insertions(+), 235 deletions(-)

diff --git a/components/AutoComplete/__test__/auto-complete.spec.ts b/components/AutoComplete/__test__/auto-complete.spec.ts
index 85eaa956..7919bb8d 100644
--- a/components/AutoComplete/__test__/auto-complete.spec.ts
+++ b/components/AutoComplete/__test__/auto-complete.spec.ts
@@ -1,12 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import KAutoComplete from '../src';
-import {tick} from "svelte";
-import KAutoCompleteFit from "./fixture/autocomplete.fit.svelte";
-import KAutoCompleteBasic from "./fixture/autocomplete.basic.svelte";
-import KAutoCompleteClear from "./fixture/autocomplete.clear.svelte";
-import KAutoCompleteDisabled from "./fixture/autocomplete.disabled.svelte";
-import KAutoCompleteSlot from "./fixture/autocomplete.slot.svelte";
-import KAutoCompleteDefault from "./fixture/autocomplete.default.svelte";
+import { tick } from 'svelte';
+import KAutoCompleteFit from './fixture/autocomplete.fit.svelte';
+import KAutoCompleteBasic from './fixture/autocomplete.basic.svelte';
+import KAutoCompleteClear from './fixture/autocomplete.clear.svelte';
+import KAutoCompleteDisabled from './fixture/autocomplete.disabled.svelte';
+import KAutoCompleteSlot from './fixture/autocomplete.slot.svelte';
+import KAutoCompleteDefault from './fixture/autocomplete.default.svelte';
 let host;
 
 const initHost = () => {
@@ -134,8 +134,8 @@ describe('Test: KAutoComplete', () => {
 		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input', { cancelable: true }));
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
-		const options = host.querySelector('[data-kv-key="vue-router"]').children[0]
-		options.click()
+		const options = host.querySelector('[data-kv-key="vue-router"]').children[0];
+		options.click();
 		await tick();
 		await vi.advanceTimersByTimeAsync(400);
 		expect(triggerEl.value === 'vue-router').toBeTruthy();
@@ -153,7 +153,7 @@ describe('Test: KAutoComplete', () => {
 		(triggerEl as HTMLElement)?.dispatchEvent(new Event('input', { cancelable: true }));
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
-		const options = host.querySelector('[data-kv-key="vue-router"]')
+		const options = host.querySelector('[data-kv-key="vue-router"]');
 		expect(options).not.toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
@@ -179,7 +179,6 @@ describe('Test: KAutoComplete', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
-
 	test('event: should trigger composition input event', async () => {
 		let value = '';
 		const mockCompositionInputFn = vi.fn();
@@ -330,5 +329,4 @@ describe('Test: KAutoComplete', () => {
 		await tick();
 		expect(mockFn).not.toBeCalled();
 	});
-
 });
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte b/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
index 95c9f7a6..e0aeb358 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.basic.svelte
@@ -1,39 +1,39 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               fitInputWidth
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-</KAutoComplete>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	fitInputWidth
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+></KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte b/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
index c25d169a..7c3ff25d 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.clear.svelte
@@ -1,39 +1,39 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               clearable
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-</KAutoComplete>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	clearable
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+></KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.default.svelte b/components/AutoComplete/__test__/fixture/autocomplete.default.svelte
index 8b44c31c..20a29930 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.default.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.default.svelte
@@ -1,41 +1,42 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               let:data
-               fitInputWidth
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-    <div>test {data.label}</div>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	let:data
+	fitInputWidth
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+>
+	<div>test {data.label}</div>
 </KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte b/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
index 84bea6ec..271e4619 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.disabled.svelte
@@ -1,39 +1,39 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               disabled
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-</KAutoComplete>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	disabled
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+></KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte b/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
index 95c9f7a6..e0aeb358 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.fit.svelte
@@ -1,39 +1,39 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               fitInputWidth
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-</KAutoComplete>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	fitInputWidth
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+></KAutoComplete>
diff --git a/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte b/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte
index 0f77c2fe..6ee435d5 100644
--- a/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte
+++ b/components/AutoComplete/__test__/fixture/autocomplete.slot.svelte
@@ -1,41 +1,42 @@
 <script>
-import {KAutoComplete} from "../../src/index";
-const handleInput = (event) => {
-    value = event.detail;
-};
+	import { KAutoComplete } from '../../src/index';
+	const handleInput = (event) => {
+		value = event.detail;
+	};
 
-let value = 'vue'
-const restaurants = [
-    { value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue', link: 'https://github.com/vuejs/vue' },
-    { value: 'element', link: 'https://github.com/ElemeFE/element' },
-    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-    { value: 'babel', link: 'https://github.com/babel/babel' },
-]
-const createFilter = (queryString) => {
-    return (restaurant) => {
-        return (
-            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
-    }
-}
-const fetchFn = (queryString, cb) => {
-    const results = queryString
-        ? restaurants.filter(createFilter(queryString))
-        : restaurants
-    cb(results)
-}
+	let value = 'vue';
+	const restaurants = [
+		{
+			value: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue',
+			link: 'https://github.com/vuejs/vue'
+		},
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
-<KAutoComplete {value}
-               append='i-carbon-logo-svelte'
-               prepend='i-carbon-search'
-               placeholder="please select"
-               fitInputWidth
-               on:updateValue={handleInput}
-               fetchSuggestions={fetchFn}>
-    <div slot="suffix">🏀</div>
-    <div slot="prefix">🏀</div>
+<KAutoComplete
+	{value}
+	append="i-carbon-logo-svelte"
+	prepend="i-carbon-search"
+	placeholder="please select"
+	fitInputWidth
+	on:updateValue={handleInput}
+	fetchSuggestions={fetchFn}
+>
+	<div slot="suffix">🏀</div>
+	<div slot="prefix">🏀</div>
 </KAutoComplete>
diff --git a/components/AutoComplete/src/index.svelte b/components/AutoComplete/src/index.svelte
index b8bfe040..47ed9aea 100644
--- a/components/AutoComplete/src/index.svelte
+++ b/components/AutoComplete/src/index.svelte
@@ -191,7 +191,8 @@
 			{useCompositionInput}
 			{...$$restProps}
 			{...attrs}
-			type="text">
+			type="text"
+		>
 			<slot name="prefix" slot="prefix" />
 			<slot name="suffix" slot="suffix" />
 		</KInput>
@@ -208,9 +209,7 @@
 		{#if list.length > 0}
 			<KVirtualList data={list} key="id" estimateSize={list.length} let:data>
 				{#if !$$slots.default}
-					<KOption {fitInputWidth}
-							 label={getLabel(data)}
-							 on:click={() => handleSelect(data)}
+					<KOption {fitInputWidth} label={getLabel(data)} on:click={() => handleSelect(data)}
 					></KOption>
 				{:else}
 					<slot {data} onSelect={handleSelect} label={data} />
diff --git a/components/AutoComplete/src/option.svelte b/components/AutoComplete/src/option.svelte
index 14846423..62cdc088 100644
--- a/components/AutoComplete/src/option.svelte
+++ b/components/AutoComplete/src/option.svelte
@@ -5,7 +5,7 @@
 	import type { KAutoCompleteProps } from './types';
 
 	export let label: KAutoCompleteProps['label'] = '';
-	export let cls: KAutoCompleteProps['cls'] =  '';
+	export let cls: KAutoCompleteProps['cls'] = '';
 	export let disabled: KAutoCompleteProps['disabled'] = false;
 	export let isActive: KAutoCompleteProps['isActive'] = false;
 	export let attrs: KAutoCompleteProps['attrs'] = {};
diff --git a/components/Dropdown/__test__/dropdown.spec.ts b/components/Dropdown/__test__/dropdown.spec.ts
index 2269d20f..b13e6989 100644
--- a/components/Dropdown/__test__/dropdown.spec.ts
+++ b/components/Dropdown/__test__/dropdown.spec.ts
@@ -92,7 +92,7 @@ describe('Test: KDropdown', () => {
 		await vi.advanceTimersByTimeAsync(300);
 		expect(show).toBeTruthy();
 		expect(mockFn).toBeCalledTimes(1);
-		await fireEvent.click(btn);
+		await fireEvent.click(host);
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
 		expect(show).not.toBeTruthy();
diff --git a/components/Popover/src/index.svelte b/components/Popover/src/index.svelte
index abd1778e..21781f02 100644
--- a/components/Popover/src/index.svelte
+++ b/components/Popover/src/index.svelte
@@ -116,21 +116,20 @@
 		arrowRef && arrowRef.setAttribute(`data-popper-arrow-${curPlacement}`, '');
 	}
 
-	let popoverContainerRef: HTMLDivElement | null = null
+	let popoverContainerRef: HTMLDivElement | null = null;
 	function clickOutside(node: HTMLElement) {
 		function handleClickOutside(e: MouseEvent) {
 			const target = e.target as HTMLElement;
 			const container = node;
 			if (target && container && !container.contains(target)) {
-				if(popoverContainerRef){
-					const triggerEl = popoverContainerRef.querySelector('[slot="triggerEl"]')
-					if(!triggerEl || !triggerEl.contains(target)){
+				if (popoverContainerRef) {
+					const triggerEl = popoverContainerRef.querySelector('[slot="triggerEl"]');
+					if (!triggerEl || !triggerEl.contains(target)) {
 						doUpdateShow(false);
 					}
 				} else {
 					doUpdateShow(false);
 				}
-
 			}
 		}
 		trigger === 'click' && window.addEventListener('click', handleClickOutside);

From a7d1083407b578208c702c32e90bf634d6d0a398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:53:05 +0800
Subject: [PATCH 8/8] test: updated KForm unit test about KAutoComplete
 component part

---
 .../__test__/__snapshots__/form.spec.ts.snap  | 16 ++-
 .../Form/__test__/fixture/disabled.svelte     | 26 ++++-
 .../Form/__test__/fixture/getForm.svelte      | 23 +++++
 components/Form/__test__/fixture/init.svelte  | 26 ++++-
 .../Form/__test__/fixture/resetForm.svelte    | 24 +++++
 .../Form/__test__/fixture/setForm.svelte      | 29 +++++-
 components/Form/__test__/fixture/size.svelte  | 26 ++++-
 .../__test__/fixture/validateEvent.svelte     | 32 +++++-
 .../Form/__test__/fixture/validateForm.svelte | 32 +++++-
 components/Form/__test__/form.spec.ts         | 97 ++++++++++++-------
 10 files changed, 288 insertions(+), 43 deletions(-)

diff --git a/components/Form/__test__/__snapshots__/form.spec.ts.snap b/components/Form/__test__/__snapshots__/form.spec.ts.snap
index e47bedb8..7456ec46 100644
--- a/components/Form/__test__/__snapshots__/form.spec.ts.snap
+++ b/components/Form/__test__/__snapshots__/form.spec.ts.snap
@@ -48,9 +48,10 @@ exports[`Test: KForm > api: KForm clearValidateField 3`] = `
 }
 `;
 
-exports[`Test: KForm > api: KForm validateForm > {"data":{"KInput":"KInput","KSwitch":true,"KInputNumber":2,"KRate":null,"KRadio":"","KCheckbox":[],"KSelect":null,"KSelectString":""},"isValid":false,"invalidFields":[{"message":"KInput 3 ~5","fieldValue":"KInput","field":"KInput"},{"message":"KInputNumber 3 ~5","fieldValue":2,"field":"KInputNumber"},{"message":"KRate error","fieldValue":null,"field":"KRate"},{"message":"KRadio error","fieldValue":"","field":"KRadio"},{"message":"KRadio error","fieldValue":[],"field":"KCheckbox"},{"message":"KSelect error","fieldValue":null,"field":"KSelect"},{"message":"KSelectString custom error","fieldValue":"","field":"KSelectString"}]} 1`] = `
+exports[`Test: KForm > api: KForm validateForm > {"data":{"KInput":"KInput","KSwitch":true,"KInputNumber":2,"KRate":null,"KRadio":"","KCheckbox":[],"KSelect":null,"KSelectString":"","KAutoComplete":""},"isValid":false,"invalidFields":[{"message":"KInput 3 ~5","fieldValue":"KInput","field":"KInput"},{"message":"KInputNumber 3 ~5","fieldValue":2,"field":"KInputNumber"},{"message":"KRate error","fieldValue":null,"field":"KRate"},{"message":"KRadio error","fieldValue":"","field":"KRadio"},{"message":"KRadio error","fieldValue":[],"field":"KCheckbox"},{"message":"KSelect error","fieldValue":null,"field":"KSelect"},{"message":"KSelectString custom error","fieldValue":"","field":"KSelectString"},{"message":"KAutoComplete required","fieldValue":"","field":"KAutoComplete"}]} 1`] = `
 {
   "data": {
+    "KAutoComplete": "",
     "KCheckbox": [],
     "KInput": "KInput",
     "KInputNumber": 2,
@@ -96,6 +97,11 @@ exports[`Test: KForm > api: KForm validateForm > {"data":{"KInput":"KInput","KSw
       "fieldValue": "",
       "message": "KSelectString custom error",
     },
+    {
+      "field": "KAutoComplete",
+      "fieldValue": "",
+      "message": "KAutoComplete required",
+    },
   ],
   "isValid": false,
 }
@@ -155,7 +161,13 @@ CustomEvent {
 }
 `;
 
-exports[`Test: KForm > props: KForm initValue 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInput</label> <div class="k-form-item-content"><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="Please input value">    </div> </div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSwitch</label> <div class="k-form-item-content"><div class="k-switch k-switch--base k-switch--md k-switch__checked k-switch-tra" aria-hidden="true"> <span class="k-switch-circle k-switch-circle--md" style="right: 1px;"></span> <span class="k-switch-tx__checked k-switch-tx__checked--md"></span></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRate</label> <div class="k-form-item-content"><div class="k-rate k-rate--md"><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--void-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInputNumber</label> <div class="k-form-item-content"><div class="k-input svelte-1ibt20v"> <div class="k-input--base k-input-number__md k-input__dark k-input__hover k-input__focus k-input__rounded svelte-1ibt20v"><input type="number" class="k-input--inner k-input--inner__dark svelte-1ibt20v" min="-Infinity" max="Infinity" placeholder="" name="" id=""> <div class="k-input-number--controls svelte-1ibt20v"><div class="k-input-number--up k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="decrease number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-up k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-input-number--down k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="increase number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div></div></div> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRadio</label> <div class="k-form-item-content"><div class="k-radio-group k-radio-group--base"><label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 1</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 2</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="true" hidden=""> <div class="k-radio--box k-radio__selected animate-ikun-checking"><span class="k-icon--base k-icon-transition i-carbon:radio-button-checked !text-white" role="" aria-hidden="true"></span></div> KRadio 3</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md k-cur-disabled"><input disabled="" type="radio" value="false" hidden=""> <div class="k-radio--box k-radio--box__disabled animate-ikun-checking"></div> KRadio 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KCheckbox</label> <div class="k-form-item-content"><div class="k-checkbox-group k-checkbox-group--base"><label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 1</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="true" hidden=""> <div class="k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking"><div style="animation: __svelte_185617033_0 200ms linear 0ms 1 both;"><span class="k-icon--base k-icon-transition i-carbon-checkmark !text-white" role="" aria-hidden="true"></span></div> </div> KCheckbox 2</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 3</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md k-cur-disabled"><input disabled="" type="checkbox" value="false" hidden=""> <div class="k-checkbox--box k-checkbox--box__disabled animate-ikun-checking"> </div> KCheckbox 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelect</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelectString</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> slider</label> <div class="k-form-item-content"><div class="k-slider k-slider--base k-slider--md w-300px"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 43%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 43%; left: 0%"></div></div></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> </label> <div class="k-form-item-content"><span id="form_value">{"KInput":"KInput","KSwitch":true,"KRate":4,"KInputNumber":4,"KRadio":"3","KCheckbox":["2"],"KSelect":{"label":"不知明镜里","value":"不知","id":"3"},"KSelectString":"Huge","slider":43}</span> </div></div></form>"`;
+exports[`Test: KForm > events: KForm validate & input interaction 8`] = `
+CustomEvent {
+  "isTrusted": false,
+}
+`;
+
+exports[`Test: KForm > props: KForm initValue 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInput</label> <div class="k-form-item-content"><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="Please input value">    </div> </div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSwitch</label> <div class="k-form-item-content"><div class="k-switch k-switch--base k-switch--md k-switch__checked k-switch-tra" aria-hidden="true"> <span class="k-switch-circle k-switch-circle--md" style="right: 1px;"></span> <span class="k-switch-tx__checked k-switch-tx__checked--md"></span></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRate</label> <div class="k-form-item-content"><div class="k-rate k-rate--md"><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--active-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span><span class="k-rate--item k-rate--item--md k-rate--item__not-readonly" aria-hidden="true"><span class="k-icon--base k-icon--base__dark k-icon-transition k-rate--void-icon" role="" aria-hidden="true" style="width: 100%; height: 100%;"></span></span> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KInputNumber</label> <div class="k-form-item-content"><div class="k-input svelte-1ibt20v"> <div class="k-input--base k-input-number__md k-input__dark k-input__hover k-input__focus k-input__rounded svelte-1ibt20v"><input type="number" class="k-input--inner k-input--inner__dark svelte-1ibt20v" min="-Infinity" max="Infinity" placeholder="" name="" id=""> <div class="k-input-number--controls svelte-1ibt20v"><div class="k-input-number--up k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="decrease number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-up k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div> <div class="k-input-number--down k-input-number--controls__dark svelte-1ibt20v" aria-hidden="true" role="button" aria-label="increase number"><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down k-input-number--icon k-input--icon__md" role="" aria-hidden="true" style="width: 24px; height: 24px;"></span></div></div></div> </div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KRadio</label> <div class="k-form-item-content"><div class="k-radio-group k-radio-group--base"><label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 1</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="false" hidden=""> <div class="k-radio--box animate-ikun-checking"></div> KRadio 2</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md"><input type="radio" value="true" hidden=""> <div class="k-radio--box k-radio__selected animate-ikun-checking"><span class="k-icon--base k-icon-transition i-carbon:radio-button-checked !text-white" role="" aria-hidden="true"></span></div> KRadio 3</label> <label class="k-radio k-radio--base k-radio--base__dark k-radio--md k-cur-disabled"><input disabled="" type="radio" value="false" hidden=""> <div class="k-radio--box k-radio--box__disabled animate-ikun-checking"></div> KRadio 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KCheckbox</label> <div class="k-form-item-content"><div class="k-checkbox-group k-checkbox-group--base"><label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 1</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="true" hidden=""> <div class="k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking"><div style="animation: __svelte_185617033_0 200ms linear 0ms 1 both;"><span class="k-icon--base k-icon-transition i-carbon-checkmark !text-white" role="" aria-hidden="true"></span></div> </div> KCheckbox 2</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md"><input type="checkbox" value="false" hidden=""> <div class="k-checkbox--box animate-ikun-checking"> </div> KCheckbox 3</label> <label class="k-checkbox--base k-checkbox--base__dark k-checkbox--md k-cur-disabled"><input disabled="" type="checkbox" value="false" hidden=""> <div class="k-checkbox--box k-checkbox--box__disabled animate-ikun-checking"> </div> KCheckbox 4</label></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelect</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KSelectString</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex" data-popover-trigger="" style="width: 0px;"><div class="k-select--base k-select__md k-select--base__dark k-select__hover k-select__focus" slot="triggerEl" aria-hidden="true"> <input class="k-select--inner k-select--inner__md k-select--inner__dark" readonly="" placeholder="Please select value">  <i><span class="k-icon--base k-icon--base__dark k-icon-transition i-carbon-chevron-down  k-select--icon k-select--icon__md" role="" aria-hidden="true"></span></i></div></div>  </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> slider</label> <div class="k-form-item-content"><div class="k-slider k-slider--base k-slider--md w-300px"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 43%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 43%; left: 0%"></div></div></div> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> </label> <div class="k-form-item-content"><span id="form_value">{"KInput":"KInput","KSwitch":true,"KRate":4,"KInputNumber":4,"KRadio":"3","KCheckbox":["2"],"KSelect":{"label":"不知明镜里","value":"不知","id":"3"},"KSelectString":"Huge","slider":43,"KAutoComplete":"vue"}</span> </div></div> <div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px;"> KAutoComplete</label> <div class="k-form-item-content"><div aria-hidden="true" class="flex w-300px" data-popover-trigger="" style="width: 0px;"><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></div></form>"`;
 
 exports[`Test: KForm > props: KForm labelWidth 1`] = `"<form class="k-form"><div class="k-form-item k-form-item__horizontal"><label class="k-form-item-label k-form-item-label__ml k-form-item-label__dark k-form-item-label__right k-form-item-label__horizontal k-form-item-label__md" style="min-width: 80px; width: 100px;"> KInput</label> <div class="k-form-item-content"><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="Please input value">    </div> </div>  </div></div></form> <button></button>"`;
 
diff --git a/components/Form/__test__/fixture/disabled.svelte b/components/Form/__test__/fixture/disabled.svelte
index 97f93501..a9b4fcab 100644
--- a/components/Form/__test__/fixture/disabled.svelte
+++ b/components/Form/__test__/fixture/disabled.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { KSlider } from '@ikun-ui/slider';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	const initValue = {
 		KInput: 'KInput',
 		KSwitch: true,
@@ -19,7 +20,8 @@
 		KCheckbox: ['2'],
 		KSelect: { label: '不知明镜里', value: '不知', id: '3' },
 		KSelectString: 'Huge',
-		slider: 43
+		slider: 43,
+		KAutoComplete: 'vue'
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -30,6 +32,25 @@
 	];
 
 	let disabled = true;
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {disabled} bind:this={KFormInst}>
@@ -71,6 +92,9 @@
 	<KFormItem field="slider" label="slider">
 		<KSlider cls="w-300px"></KSlider>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 
 <button on:click={() => (disabled = !disabled)}></button>
diff --git a/components/Form/__test__/fixture/getForm.svelte b/components/Form/__test__/fixture/getForm.svelte
index 9e057c1a..0e923cb6 100644
--- a/components/Form/__test__/fixture/getForm.svelte
+++ b/components/Form/__test__/fixture/getForm.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { createEventDispatcher } from 'svelte';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	export let initValue = {};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -77,6 +78,25 @@
 			dispatch('getRes', KFormInst.getForm());
 		}
 	};
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {rules} labelWidth="120" bind:this={KFormInst}>
@@ -115,5 +135,8 @@
 	<KFormItem field="KSelectString" label="KSelectString">
 		<KSelect dataList={['Tiny', 'Small', 'Normal', 'Large', 'Huge']}></KSelect>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 <button id="getForm" on:click={handleGetForm}>getForm</button>
diff --git a/components/Form/__test__/fixture/init.svelte b/components/Form/__test__/fixture/init.svelte
index 98e1375f..54b80626 100644
--- a/components/Form/__test__/fixture/init.svelte
+++ b/components/Form/__test__/fixture/init.svelte
@@ -11,6 +11,7 @@
 	import { onMount } from 'svelte';
 	import { KSlider } from '@ikun-ui/slider';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	const initValue = {
 		KInput: 'KInput',
 		KSwitch: true,
@@ -20,7 +21,8 @@
 		KCheckbox: ['2'],
 		KSelect: { label: '不知明镜里', value: '不知', id: '3' },
 		KSelectString: 'Huge',
-		slider: 43
+		slider: 43,
+		KAutoComplete: 'vue'
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -36,6 +38,25 @@
 			currentValue = KFormInst.getForm();
 		}
 	});
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} bind:this={KFormInst}>
@@ -80,4 +101,7 @@
 	<KFormItem>
 		<span id="form_value">{JSON.stringify(currentValue)}</span>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
diff --git a/components/Form/__test__/fixture/resetForm.svelte b/components/Form/__test__/fixture/resetForm.svelte
index 62c35fcf..d66a8a0f 100644
--- a/components/Form/__test__/fixture/resetForm.svelte
+++ b/components/Form/__test__/fixture/resetForm.svelte
@@ -11,6 +11,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { KSlider } from '@ikun-ui/slider';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	export let initValue = {};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -90,6 +91,25 @@
 			KFormInst.resetForm();
 		}
 	};
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {rules} labelWidth="120" bind:this={KFormInst}>
@@ -131,6 +151,10 @@
 	<KFormItem field="slider" label="slider">
 		<KSlider cls="w-300px"></KSlider>
 	</KFormItem>
+
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 <button id="validate" on:click={handleValidate}>validate</button>
 <button id="reset" on:click={handleReset}>reset</button>
diff --git a/components/Form/__test__/fixture/setForm.svelte b/components/Form/__test__/fixture/setForm.svelte
index a2711b33..72e9faaa 100644
--- a/components/Form/__test__/fixture/setForm.svelte
+++ b/components/Form/__test__/fixture/setForm.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { createEventDispatcher } from 'svelte';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	export let isValidate = true;
 	export let initValue = {
 		KInput: 'KInput',
@@ -19,7 +20,8 @@
 		KRadio: '',
 		KCheckbox: [],
 		KSelect: null,
-		KSelectString: ''
+		KSelectString: '',
+		KAutoComplete: '白雾三语'
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -105,7 +107,8 @@
 						value: '白发',
 						id: '1'
 					},
-					KSelectString: 'Huge'
+					KSelectString: 'Huge',
+					KAutoComplete: 'baiwusanyu'
 				},
 				isValidate
 			);
@@ -117,6 +120,25 @@
 			dispatch('getRes', KFormInst.getForm());
 		}
 	};
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {rules} labelWidth="120" bind:this={KFormInst}>
@@ -155,6 +177,9 @@
 	<KFormItem field="KSelectString" label="KSelectString">
 		<KSelect dataList={['Tiny', 'Small', 'Normal', 'Large', 'Huge']}></KSelect>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 <button id="setForm" on:click={handleSetForm}>setForm</button>
 <button id="getForm" on:click={handleGetForm}>getForm</button>
diff --git a/components/Form/__test__/fixture/size.svelte b/components/Form/__test__/fixture/size.svelte
index cc827c95..f0cf0fa2 100644
--- a/components/Form/__test__/fixture/size.svelte
+++ b/components/Form/__test__/fixture/size.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { KSlider } from '@ikun-ui/slider';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	const initValue = {
 		KInput: 'KInput',
 		KSwitch: true,
@@ -19,7 +20,8 @@
 		KCheckbox: ['2'],
 		KSelect: { label: '不知明镜里', value: '不知', id: '3' },
 		KSelectString: 'Huge',
-		slider: 43
+		slider: 43,
+		KAutoComplete: '白雾三语'
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -30,6 +32,25 @@
 	];
 
 	let size = 'sm';
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {size} bind:this={KFormInst}>
@@ -71,6 +92,9 @@
 	<KFormItem field="slider" label="slider">
 		<KSlider cls="w-300px"></KSlider>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 
 <button id="size_lg" on:click={() => (size = 'lg')}></button>
diff --git a/components/Form/__test__/fixture/validateEvent.svelte b/components/Form/__test__/fixture/validateEvent.svelte
index 18c177fd..1a901a60 100644
--- a/components/Form/__test__/fixture/validateEvent.svelte
+++ b/components/Form/__test__/fixture/validateEvent.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { createEventDispatcher } from 'svelte';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	const initValue = {
 		KInput: 'KInput',
 		KSwitch: true,
@@ -18,7 +19,8 @@
 		KRadio: '',
 		KCheckbox: [],
 		KSelect: null,
-		KSelectString: ''
+		KSelectString: '',
+		KAutoComplete: 'vue'
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -77,6 +79,12 @@
 					}
 				}
 			}
+		],
+		KAutoComplete: [
+			{
+				required: true,
+				msg: 'KAutoComplete required'
+			}
 		]
 	};
 
@@ -84,6 +92,25 @@
 	const handleValidate = (data: any) => {
 		dispatch('getRes', data);
 	};
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {rules} labelWidth={120} on:validate={handleValidate} bind:this={KFormInst}>
@@ -122,5 +149,8 @@
 	<KFormItem field="KSelectString" label="KSelectString">
 		<KSelect clearable dataList={['Tiny', 'Small', 'Normal', 'Large', 'Huge']}></KSelect>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 <button id="validate" on:click={handleValidate}>validate</button>
diff --git a/components/Form/__test__/fixture/validateForm.svelte b/components/Form/__test__/fixture/validateForm.svelte
index 69733c15..8cd6bd2a 100644
--- a/components/Form/__test__/fixture/validateForm.svelte
+++ b/components/Form/__test__/fixture/validateForm.svelte
@@ -10,6 +10,7 @@
 	import { KSelect } from '@ikun-ui/select';
 	import { createEventDispatcher } from 'svelte';
 	import { KInputNumber } from '@ikun-ui/input-number';
+	import { KAutoComplete } from '@ikun-ui/auto-complete';
 	const initValue = {
 		KInput: 'KInput',
 		KSwitch: true,
@@ -18,7 +19,8 @@
 		KRadio: '',
 		KCheckbox: [],
 		KSelect: null,
-		KSelectString: ''
+		KSelectString: '',
+		KAutoComplete: ''
 	};
 	let KFormInst: KForm | undefined = undefined;
 	const dataList = [
@@ -77,6 +79,12 @@
 					}
 				}
 			}
+		],
+		KAutoComplete: [
+			{
+				required: true,
+				msg: 'KAutoComplete required'
+			}
 		]
 	};
 
@@ -92,6 +100,25 @@
 			});
 		}
 	};
+
+	const restaurants = [
+		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
+		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
+		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+		{ value: 'babel', link: 'https://github.com/babel/babel' }
+	];
+	const createFilter = (queryString) => {
+		return (restaurant) => {
+			return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+		};
+	};
+	const fetchFn = (queryString, cb) => {
+		const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
+		cb(results);
+	};
 </script>
 
 <KForm {initValue} {rules} labelWidth={120} bind:this={KFormInst}>
@@ -130,5 +157,8 @@
 	<KFormItem field="KSelectString" label="KSelectString">
 		<KSelect dataList={['Tiny', 'Small', 'Normal', 'Large', 'Huge']}></KSelect>
 	</KFormItem>
+	<KFormItem field="KAutoComplete" label="KAutoComplete">
+		<KAutoComplete cls="w-300px" fetchSuggestions={fetchFn}></KAutoComplete>
+	</KFormItem>
 </KForm>
 <button id="validate" on:click={handleValidate}>validate</button>
diff --git a/components/Form/__test__/form.spec.ts b/components/Form/__test__/form.spec.ts
index 37fd8cbf..77eaeec7 100644
--- a/components/Form/__test__/form.spec.ts
+++ b/components/Form/__test__/form.spec.ts
@@ -57,8 +57,10 @@ describe('Test: KForm', () => {
 		});
 		expect(instance).toBeTruthy();
 
-		const input = host.querySelector('.k-input--inner');
-		expect(input.value).toBe('KInput');
+		const input = host.querySelectorAll('.k-input--inner');
+		expect(input[0].value).toBe('KInput');
+
+		expect(input[2].value).toBe('vue');
 
 		expect(host.innerHTML.includes(`k-form-item-label__right`)).toBeTruthy();
 
@@ -98,7 +100,8 @@ describe('Test: KForm', () => {
 				id: '3'
 			},
 			KSelectString: 'Huge',
-			slider: 43
+			slider: 43,
+			KAutoComplete: 'vue'
 		});
 		expect(host.innerHTML).matchSnapshot();
 	});
@@ -170,9 +173,9 @@ describe('Test: KForm', () => {
 		expect(instance).toBeTruthy();
 		await tick();
 
-		expect(host.querySelectorAll('.k-form-item-label__disabled').length).toBe(9);
+		expect(host.querySelectorAll('.k-form-item-label__disabled').length).toBe(10);
 		expect(host.querySelector('.k-input__disabled')).toBeTruthy();
-		expect(host.querySelectorAll('.k-input__disabled').length).toBe(4);
+		expect(host.querySelectorAll('.k-input__disabled').length).toBe(6);
 		expect(host.querySelector('.k-switch__disabled')).toBeTruthy();
 		expect(host.querySelector('.k-rate--item__disabled')).toBeTruthy();
 		expect(host.querySelectorAll('.k-radio--box__disabled').length).toBe(4);
@@ -195,9 +198,9 @@ describe('Test: KForm', () => {
 
 		btnEl?.click();
 		await tick();
-		expect(host.querySelectorAll('.k-form-item-label__disabled').length).toBe(9);
+		expect(host.querySelectorAll('.k-form-item-label__disabled').length).toBe(10);
 		expect(host.querySelector('.k-input__disabled')).toBeTruthy();
-		expect(host.querySelectorAll('.k-input__disabled').length).toBe(4);
+		expect(host.querySelectorAll('.k-input__disabled').length).toBe(6);
 		expect(host.querySelector('.k-switch__disabled')).toBeTruthy();
 		expect(host.querySelector('.k-rate--item__disabled')).toBeTruthy();
 		expect(host.querySelectorAll('.k-radio--box__disabled').length).toBe(4);
@@ -214,8 +217,8 @@ describe('Test: KForm', () => {
 		expect(instance).toBeTruthy();
 		await tick();
 
-		expect(host.querySelectorAll('.k-form-item-label__sm').length).toBe(9);
-		expect(host.querySelector('.k-input__sm')).toBeTruthy();
+		expect(host.querySelectorAll('.k-form-item-label__sm').length).toBe(10);
+		expect(host.querySelectorAll('.k-input__sm').length).toBe(2);
 		expect(host.querySelector('.k-input-number__sm')).toBeTruthy();
 		expect(host.querySelector('.k-switch--sm')).toBeTruthy();
 		expect(host.querySelector('.k-rate--sm')).toBeTruthy();
@@ -229,8 +232,8 @@ describe('Test: KForm', () => {
 		let btnEl = host.querySelector('#size_lg');
 		btnEl?.click();
 		await tick();
-		expect(host.querySelectorAll('.k-form-item-label__lg').length).toBe(9);
-		expect(host.querySelector('.k-input__lg')).toBeTruthy();
+		expect(host.querySelectorAll('.k-form-item-label__lg').length).toBe(10);
+		expect(host.querySelectorAll('.k-input__lg').length).toBe(2);
 		expect(host.querySelector('.k-input-number__lg')).toBeTruthy();
 		expect(host.querySelector('.k-switch--lg')).toBeTruthy();
 		expect(host.querySelector('.k-rate--lg')).toBeTruthy();
@@ -244,8 +247,8 @@ describe('Test: KForm', () => {
 		btnEl = host.querySelector('#size_md');
 		btnEl?.click();
 		await tick();
-		expect(host.querySelectorAll('.k-form-item-label__md').length).toBe(9);
-		expect(host.querySelector('.k-input__md')).toBeTruthy();
+		expect(host.querySelectorAll('.k-form-item-label__md').length).toBe(10);
+		expect(host.querySelectorAll('.k-input__md').length).toBe(2);
 		expect(host.querySelector('.k-input-number__md')).toBeTruthy();
 		expect(host.querySelector('.k-switch--md')).toBeTruthy();
 		expect(host.querySelector('.k-rate--md')).toBeTruthy();
@@ -259,8 +262,8 @@ describe('Test: KForm', () => {
 		btnEl = host.querySelector('#size_sm');
 		btnEl?.click();
 		await tick();
-		expect(host.querySelectorAll('.k-form-item-label__sm').length).toBe(9);
-		expect(host.querySelector('.k-input__sm')).toBeTruthy();
+		expect(host.querySelectorAll('.k-form-item-label__sm').length).toBe(10);
+		expect(host.querySelectorAll('.k-input__sm').length).toBe(2);
 		expect(host.querySelector('.k-input-number__sm')).toBeTruthy();
 		expect(host.querySelector('.k-switch--sm')).toBeTruthy();
 		expect(host.querySelector('.k-rate--sm')).toBeTruthy();
@@ -399,9 +402,15 @@ describe('Test: KForm', () => {
 		expect(mockFn).toBeCalledTimes(3);
 		expect(value).matchSnapshot();
 
+		const autoEl = host.querySelectorAll('.k-input--inner')[2];
+		await fireEvent.input(autoEl, { target: { value: '' } });
+		expect(host.innerHTML.includes('KAutoComplete required')).toBeTruthy();
+		expect(mockFn).toBeCalledTimes(4);
+		expect(value).matchSnapshot();
+
 		await fireEvent.input(inputNumEl, { target: { value: 2 } });
 		expect(host.innerHTML.includes('KInputNumber 3 ~5')).toBeTruthy();
-		expect(mockFn).toBeCalledTimes(4);
+		expect(mockFn).toBeCalledTimes(5);
 		expect(value).matchSnapshot();
 
 		const checkboxEl = host.querySelectorAll('[type="checkbox"]')[0];
@@ -412,7 +421,7 @@ describe('Test: KForm', () => {
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
 		expect(host.innerHTML.includes('KCheckbox error')).toBeTruthy();
-		expect(mockFn).toBeCalledTimes(5);
+		expect(mockFn).toBeCalledTimes(6);
 		expect(value).matchSnapshot();
 
 		const selectInput = host.querySelectorAll('.k-select--inner');
@@ -435,7 +444,7 @@ describe('Test: KForm', () => {
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
 		expect(host.innerHTML.includes('KSelect error')).toBeTruthy();
-		expect(mockFn).toBeCalledTimes(6);
+		expect(mockFn).toBeCalledTimes(7);
 		expect(value).matchSnapshot();
 
 		const selectInput2 = host.querySelectorAll('.k-select--inner');
@@ -458,7 +467,7 @@ describe('Test: KForm', () => {
 		await tick();
 		await vi.advanceTimersByTimeAsync(300);
 		expect(host.innerHTML.includes('KSelect error')).toBeTruthy();
-		expect(mockFn).toBeCalledTimes(7);
+		expect(mockFn).toBeCalledTimes(8);
 		expect(value).matchSnapshot();
 	});
 
@@ -477,8 +486,8 @@ describe('Test: KForm', () => {
 		const btn = host.querySelector('#validate');
 		btn?.click();
 		await tick();
-		expect(host.querySelectorAll('.k-form-item-star').length).toBe(8);
-		expect(host.querySelectorAll('.k-form-item-msg_error').length).toBe(7);
+		expect(host.querySelectorAll('.k-form-item-star').length).toBe(9);
+		expect(host.querySelectorAll('.k-form-item-msg_error').length).toBe(8);
 		expect(host.innerHTML.includes('KSelectString custom error')).toBeTruthy();
 		expect(value).toMatchSnapshot(JSON.stringify(value));
 	});
@@ -494,7 +503,8 @@ describe('Test: KForm', () => {
 			KCheckbox: [],
 			KSelect: null,
 			KSelectString: '',
-			slider: 0
+			slider: 0,
+			KAutoComplete: 'vue'
 		};
 		// @ts-ignore
 		const instance = new KFormResetForm({
@@ -514,8 +524,8 @@ describe('Test: KForm', () => {
 		await tick();
 		expect(value.data).toMatchObject(initValue);
 
-		const inputEl = host.querySelectorAll('.k-input--inner')[0];
-		await fireEvent.input(inputEl, { target: { value: 'test' } });
+		const inputEl = host.querySelectorAll('.k-input--inner');
+		await fireEvent.input(inputEl[0], { target: { value: 'test' } });
 
 		const inputNumEl = host.querySelector('.k-input-number--up');
 		await fireEvent.click(inputNumEl);
@@ -546,6 +556,12 @@ describe('Test: KForm', () => {
 		const itemEl2 = host.querySelector('[data-kv-key="Huge"]')?.children[0];
 		itemEl2?.click();
 
+		await fireEvent.input(inputEl[2], { target: { value: 'el' } });
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		const autoOption = host.querySelector('[data-kv-key="element"]')?.children[0];
+		autoOption?.click();
+
 		btn?.click();
 		await tick();
 
@@ -562,7 +578,8 @@ describe('Test: KForm', () => {
 				id: '1'
 			},
 			KSelectString: 'Huge',
-			slider: 0
+			slider: 0,
+			KAutoComplete: 'element'
 		});
 
 		const btnReset = host.querySelector('#reset');
@@ -584,7 +601,8 @@ describe('Test: KForm', () => {
 			KRadio: '',
 			KCheckbox: [],
 			KSelect: null,
-			KSelectString: ''
+			KSelectString: '',
+			KAutoComplete: 'vue'
 		};
 		// @ts-ignore
 		const instance = new KFormGetForm({
@@ -604,8 +622,8 @@ describe('Test: KForm', () => {
 		await tick();
 		expect(value).toMatchObject(initValue);
 
-		const inputEl = host.querySelector('.k-input--inner');
-		await fireEvent.input(inputEl, { target: { value: 'test' } });
+		const inputEl = host.querySelectorAll('.k-input--inner');
+		await fireEvent.input(inputEl[0], { target: { value: 'test' } });
 
 		const inputNumEl = host.querySelector('.k-input-number--up');
 		await fireEvent.click(inputNumEl);
@@ -636,6 +654,12 @@ describe('Test: KForm', () => {
 		const itemEl2 = host.querySelector('[data-kv-key="Huge"]')?.children[0];
 		itemEl2?.click();
 
+		await fireEvent.input(inputEl[2], { target: { value: 'el' } });
+		await tick();
+		await vi.advanceTimersByTimeAsync(300);
+		const autoOption = host.querySelector('[data-kv-key="element"]')?.children[0];
+		autoOption?.click();
+
 		btn?.click();
 		await tick();
 
@@ -651,7 +675,8 @@ describe('Test: KForm', () => {
 				value: '白发',
 				id: '1'
 			},
-			KSelectString: 'Huge'
+			KSelectString: 'Huge',
+			KAutoComplete: 'element'
 		});
 	});
 
@@ -665,7 +690,8 @@ describe('Test: KForm', () => {
 			KRadio: '',
 			KCheckbox: [],
 			KSelect: null,
-			KSelectString: ''
+			KSelectString: '',
+			KAutoComplete: '白雾三语'
 		};
 		// @ts-ignore
 		const instance = new KFormSetForm({
@@ -691,10 +717,12 @@ describe('Test: KForm', () => {
 		await tick();
 		expect(host.innerHTML.includes('KInput 3 ~5')).toBeTruthy();
 
-		const input = host.querySelector('.k-input--inner');
-		expect(input.value).toBe('KInput change');
+		const input = host.querySelectorAll('.k-input--inner');
+		expect(input[0].value).toBe('KInput change');
 
-		expect(host.querySelectorAll('.k-input--inner')[1].value === '4').toBeTruthy();
+		expect(input[1].value === '4').toBeTruthy();
+
+		expect(input[1].value === '4').toBeTruthy();
 
 		expect(host.querySelectorAll('.k-rate--active-icon').length === 1).toBeTruthy();
 
@@ -730,7 +758,8 @@ describe('Test: KForm', () => {
 				value: '白发',
 				id: '1'
 			},
-			KSelectString: 'Huge'
+			KSelectString: 'Huge',
+			KAutoComplete: 'baiwusanyu'
 		});
 	});