add auto-complete

components/_util/vue-types/index.js

@@ -1,5 +1,5 @@
 import isPlainObject from 'lodash.isplainobject'
-import { noop, toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils'
+import { toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils'
 
 const VuePropTypes = {
 

components/auto-complete/InputElement.vue

@@ -0,0 +1,31 @@
+<script>
+import omit from 'omit.js'
+import { cloneElement } from '../_util/vnode'
+export default {
+  methods: {
+    focus  () {
+      const ele = this.$refs.ele
+      ele.focus ? ele.focus() : this.$el.focus()
+    },
+    blur () {
+      const ele = this.$refs.ele
+      ele.blur ? ele.blur() : this.$el.blur()
+    },
+
+  },
+
+  render () {
+    const { $slots, $listeners, $props, $attrs } = this
+    return cloneElement($slots.default, {
+      domProps: {
+        value: $props.value,
+      },
+      props: omit($props, ['value']),
+      on: $listeners,
+      attrs: { ...$attrs, value: $props.value },
+      ref: 'ele',
+    })
+  },
+}
+
+</script>

components/auto-complete/index.vue

@@ -0,0 +1,124 @@
+<script>
+import { Option, OptGroup } from './vc-select'
+import clonedeep from 'lodash.clonedeep'
+import Select, { AbstractSelectProps, SelectValue } from '../select'
+import Input from '../input'
+import InputElement from './InputElement'
+import PropTypes from '../_util/vue-types'
+import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'
+
+const DataSourceItemObject = PropTypes.shape({
+  value: String,
+  text: String,
+}).loose
+const DataSourceItemType = PropTypes.oneOfType([
+  PropTypes.string,
+  DataSourceItemObject,
+]).isRequired
+
+// export interface AutoCompleteInputProps {
+//   onChange?: React.FormEventHandler<any>;
+//   value: any;
+// }
+
+const AutoCompleteProps = {
+  ...AbstractSelectProps,
+  value: SelectValue,
+  defaultValue: SelectValue,
+  dataSource: DataSourceItemType,
+  optionLabelProp: String,
+  // onChange?: (value: SelectValue) => void;
+  // onSelect?: (value: SelectValue, option: Object) => any;
+}
+
+export default {
+  props: {
+    ...AutoCompleteProps,
+    prefixCls: PropTypes.string.def('ant-select'),
+    showSearch: PropTypes.bool.def(false),
+    transitionName: PropTypes.string.def('slide-up'),
+    choiceTransitionName: PropTypes.string.def('zoom'),
+    optionLabelProp: PropTypes.string.def('children'),
+    filterOption: clonedeep(AbstractSelectProps.filterOption).def(false),
+  },
+  Option,
+  OptGroup,
+  methods: {
+    getInputElement () {
+      const { $slots } = this
+      const children = filterEmpty($slots.default)
+      const element = children.length ? children : <Input />
+      console.log(element)
+      // const elementProps = { ...element.props }
+      return (
+        <InputElement>{element}</InputElement>
+      )
+    },
+
+    focus () {
+      this.$nextTick(() => {
+        if (this.$refs.select) {
+          this.$refs.select.focus()
+        }
+      })
+    },
+
+    blur () {
+      this.$nextTick(() => {
+        if (this.$refs.select) {
+          this.$refs.select.blur()
+        }
+      })
+    },
+  },
+
+  render () {
+    const {
+      size, prefixCls, optionLabelProp, dataSource, $slots, $listeners,
+    } = this
+
+    const cls = {
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+      [`${prefixCls}-show-search`]: true,
+      [`${prefixCls}-auto-complete`]: true,
+    }
+
+    let options
+    const childArray = filterEmpty($slots.dataSource)
+    if (childArray.length) {
+      options = childArray
+    } else {
+      options = dataSource ? dataSource.map((item) => {
+        switch (typeof item) {
+          case 'string':
+            return <Option key={item}>{item}</Option>
+          case 'object':
+            return (
+              <Option key={item.value}>
+                {item.text}
+              </Option>
+            )
+          default:
+            throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.')
+        }
+      }) : []
+    }
+    return (
+      <Select
+        {...getOptionProps(this)}
+        class={cls}
+        mode='combobox'
+        optionLabelProp={optionLabelProp}
+        getInputElement={this.getInputElement}
+        notFoundContent={getComponentFromProp(this, 'notFoundContent')}
+        ref='select'
+        on={$listeners}
+      >
+        {options}
+      </Select>
+    )
+  },
+}
+
+</script>

components/auto-complete/style/index.js

@@ -0,0 +1,4 @@
+import '../../style/index.less'
+import './index.less'
+
+import '../../select/style'

components/auto-complete/style/index.less

@@ -0,0 +1,79 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@input-prefix-cls: ~"@{ant-prefix}-input";
+@select-prefix-cls: ~"@{ant-prefix}-select";
+@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
+
+.@{autocomplete-prefix-cls} {
+  .reset-component;
+
+  &.@{select-prefix-cls} {
+    .@{select-prefix-cls} {
+      &-selection {
+        border: 0;
+        box-shadow: none;
+        &__rendered {
+          margin-left: 0;
+          margin-right: 0;
+          height: 100%;
+          line-height: @input-height-base;
+        }
+        &__placeholder {
+          margin-left: (@input-padding-horizontal-base + 1px);
+          margin-right: (@input-padding-horizontal-base + 1px);
+        }
+
+        &--single {
+          height: auto;
+        }
+      }
+    }
+
+    // Fix https://github.com/ant-design/ant-design/issues/7800
+    .@{select-prefix-cls}-search--inline {
+      position: static;
+      float: left;
+    }
+
+    &-allow-clear {
+      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
+        margin-right: 0 !important;
+      }
+    }
+
+    .@{input-prefix-cls} {
+      background: transparent;
+      border-width: @border-width-base;
+      line-height: @line-height-base;
+      height: @input-height-base;
+      &:focus,
+      &:hover {
+        .hover;
+      }
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__rendered {
+        line-height: @input-height-lg;
+      }
+      .@{input-prefix-cls} {
+        padding-top: @input-padding-vertical-lg;
+        padding-bottom: @input-padding-vertical-lg;
+        height: @input-height-lg;
+      }
+    }
+
+    &-sm {
+      .@{select-prefix-cls}-selection__rendered {
+        line-height: @input-height-sm;
+      }
+      .@{input-prefix-cls} {
+        padding-top: @input-padding-vertical-sm;
+        padding-bottom: @input-padding-vertical-sm;
+        height: @input-height-sm;
+      }
+    }
+  }
+}

components/select/index.vue

@@ -26,12 +26,23 @@ const AbstractSelectProps = {
     PropTypes.func,
   ]),
 }
+const Value = PropTypes.shape({
+  key: String,
+}).loose
 
 const SelectValue = PropTypes.oneOfType([
   PropTypes.string,
-  PropTypes.array,
-  PropTypes.object,
+
+  PropTypes.arrayOf(PropTypes.oneOfType([
+    Value,
+    String,
+  ])),
+  Value,
 ])
+export {
+  AbstractSelectProps,
+  SelectValue,
+}
 
 const SelectProps = {
   ...AbstractSelectProps,

components/vc-select/PropTypes.js

@@ -34,10 +34,7 @@ export const SelectPropTypes = {
   dropdownStyle: PropTypes.object,
   maxTagTextLength: PropTypes.number,
   maxTagCount: PropTypes.number,
-  maxTagPlaceholder: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-  ]),
+  maxTagPlaceholder: PropTypes.any,
   tokenSeparators: PropTypes.arrayOf(PropTypes.string),
   getInputElement: PropTypes.func,
   showAction: PropTypes.arrayOf(PropTypes.string),

contributors.md

@@ -16,25 +16,25 @@ Divider | done
 notification | done
 message | done
 Select | done
-Carousel
-Mention
-Input | done |select完成后补全demo
+Input | done
 InputNumber
 AutoComplete
-Upload
-Form
+Modal
+Alert
 Calendar
 DatePicker
 TimePicker
+Upload
+Form
+Carousel
+Mention
 
 ##万
 Grid
 Col
 Affix
-Alert
 BackTop
 Layout
-Modal
 Anchor
 Tree
 TreeSelect