style: auto-complete

components/auto-complete/index.en-US.md

@@ -10,7 +10,13 @@ Autocomplete function of input field.
 
 ## When To Use
 
-When there is a need for autocomplete functionality.
+- When you need an input box instead of a selector.
+- When you need input suggestions or helping text.
+
+The differences with Select are:
+
+- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
+- Select is selecting among given choices. The keyword is **select**.
 
 ## API
 
@@ -58,7 +64,7 @@ When there is a need for autocomplete functionality.
 
 ### Part of the api in v2 are not available in v3?
 
-AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v2, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v3 not longer support `label` as the value input.
+AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v3, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v4 not longer support `label` as the value input.
 
 Besides, to unify the API, `dataSource` is replaced with `options`. You can migrate with the following change:
 

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
+import type { App, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, ref } from 'vue';
 import Select, { selectProps } from '../select';
 import PropTypes from '../_util/vue-types';
@@ -44,8 +44,6 @@ const AutoComplete = defineComponent({
   },
   emits: ['change', 'select', 'focus', 'blur'],
   slots: ['option'],
-  Option,
-  OptGroup,
   setup(props, { slots, attrs, expose }) {
     warning(
       !('dataSource' in slots),
@@ -145,15 +143,13 @@ const AutoComplete = defineComponent({
 });
 
 /* istanbul ignore next */
-AutoComplete.install = function (app: App) {
-  app.component(AutoComplete.name, AutoComplete);
-  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
-  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
-  return app;
-};
-
-export default AutoComplete as typeof AutoComplete &
-  Plugin & {
-    readonly Option: typeof Option;
-    readonly OptGroup: typeof OptGroup;
-  };
+export default Object.assign(AutoComplete, {
+  Option,
+  OptGroup,
+  install(app: App) {
+    app.component(AutoComplete.name, AutoComplete);
+    app.component(Option.displayName, Option);
+    app.component(OptGroup.displayName, OptGroup);
+    return app;
+  },
+});

components/auto-complete/style/index.tsx

@@ -3,4 +3,3 @@ import './index.less';
 
 // style dependencies
 import '../../select/style';
-import '../../input/style';