add input demo

components/input/Input.vue

@@ -1,6 +1,6 @@
 <script>
-// import TextArea from './TextArea';
-
+import TextArea from './TextArea'
+import omit from 'omit.js'
 import inputProps from './inputProps'
 
 function fixControlledValue (value) {
@@ -35,7 +35,7 @@ export default {
   methods: {
     handleKeyDown (e) {
       if (e.keyCode === 13) {
-        this.$emit('press-enter', e)
+        this.$emit('pressEnter', e)
       }
       this.$emit('keydown', e)
     },
@@ -146,17 +146,16 @@ export default {
     },
 
     renderInput () {
-      const { placeholder, type, readOnly = false, name, id, disabled = false } = this.$props
+      const otherProps = omit(this.$props, [
+        'prefixCls',
+      ])
       const { stateValue, getInputClassName, handleKeyDown, handleChange } = this
+      const attrs = {
+        attrs: { ...otherProps, ...this.$attrs, value: stateValue },
+      }
       return this.renderLabeledIcon(
         <input
-          value={stateValue}
-          type={type}
-          readOnly={readOnly}
-          placeholder={placeholder}
-          name={name}
-          id={id}
-          disabled={disabled}
+          {...attrs}
           class={getInputClassName()}
           onKeydown={handleKeyDown}
           onInput={handleChange}
@@ -166,6 +165,22 @@ export default {
     },
   },
   render () {
+    if (this.$props.type === 'textarea') {
+      const self = this
+      const textareaProps = {
+        props: this.$props,
+        attrs: this.$attrs,
+        on: {
+          change (e) {
+            self.handleChange(e)
+          },
+          keydown (e) {
+            self.handleKeyDown(e)
+          },
+        },
+      }
+      return <TextArea {...textareaProps} ref='input' />
+    }
     return this.renderLabeledInput(this.renderInput())
   },
 }

components/input/Search.vue

@@ -19,33 +19,24 @@ export default {
   },
   methods: {
     onSearch (e) {
-      const eventKeyCode = e.keyCode
-      if (eventKeyCode === 13) {
-        // const { onSearch } = this.$props
-        // if (onSearch) {
-        //   onSearch(this.$refs.input.value)
-        // }
-        this.$emit('search', this.$refs.input.value)
-        this.$refs.input.focus()
-      }
+      this.$emit('search', this.$refs.input.stateValue)
+      this.$refs.input.focus()
     },
   },
   render () {
     const { inputPrefixCls, prefixCls, ...others } = this.$props
-    delete others.onSearch
-    // const searchSuffix = (
-    //   <Icon
-    //     class={`${prefixCls}-icon`}
-    //     onClick={this.onSearch}
-    //     type='search'
-    //   />
-    // )
+    const inputProps = {
+      props: {
+        ...others,
+        prefixCls: inputPrefixCls,
+      },
+      attrs: this.$attrs,
+    }
     return (
       <Input
-        onKeyup={this.onSearch}
-        {...others}
+        {...inputProps}
+        onPressEnter={this.onSearch}
         class={prefixCls}
-        prefixCls={inputPrefixCls}
         ref='input'
       >
         <Icon

components/input/TextArea.vue

@@ -0,0 +1,133 @@
+<script>
+import omit from 'omit.js'
+
+import inputProps from './inputProps'
+
+import calculateNodeHeight from './calculateNodeHeight'
+
+function onNextFrame (cb) {
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame(cb)
+  }
+  return window.setTimeout(cb, 1)
+}
+
+function clearNextFrameAction (nextFrameId) {
+  if (window.cancelAnimationFrame) {
+    window.cancelAnimationFrame(nextFrameId)
+  } else {
+    window.clearTimeout(nextFrameId)
+  }
+}
+function fixControlledValue (value) {
+  if (typeof value === 'undefined' || value === null) {
+    return ''
+  }
+  return value
+}
+
+export default {
+  name: 'TextArea',
+  props: {
+    ...inputProps,
+    autosize: [Object, Boolean],
+  },
+  model: {
+    prop: 'value',
+    event: 'change.value',
+  },
+  data () {
+    const { value, defaultValue } = this.$props
+    return {
+      stateValue: fixControlledValue(value === undefined ? defaultValue : value),
+      nextFrameActionId: undefined,
+      textareaStyles: {},
+    }
+  },
+  computed: {
+  },
+  watch: {
+    value (val) {
+      this.stateValue = fixControlledValue(val)
+      if (this.nextFrameActionId) {
+        clearNextFrameAction(this.nextFrameActionId)
+      }
+      this.nextFrameActionId = onNextFrame(this.resizeTextarea)
+    },
+  },
+  mounted () {
+    this.resizeTextarea()
+  },
+  methods: {
+    handleKeyDown (e) {
+      if (e.keyCode === 13) {
+        this.$emit('pressEnter', e)
+      }
+      this.$emit('keydown', e)
+    },
+    resizeTextarea () {
+      const { autosize } = this.$props
+      if (!autosize || !this.$refs.textArea) {
+        return
+      }
+      const minRows = autosize ? autosize.minRows : null
+      const maxRows = autosize ? autosize.maxRows : null
+      const textareaStyles = calculateNodeHeight(this.$refs.textArea, false, minRows, maxRows)
+      this.textareaStyles = textareaStyles
+    },
+
+    getTextAreaClassName () {
+      const { prefixCls, disabled } = this.$props
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-disabled`]: disabled,
+      }
+    },
+
+    handleTextareaChange (e) {
+      const { value } = this.$props
+      if (value === undefined) {
+        this.stateValue = e.target.value
+        this.$nextTick(() => {
+          this.resizeTextarea()
+        })
+      } else {
+        this.$forceUpdate()
+        this.$emit('change.value', e.target.value)
+        this.$emit('change', e)
+      }
+    },
+
+    focus () {
+      this.$refs.textArea.focus()
+    },
+
+    blur () {
+      this.$refs.textArea.blur()
+    },
+
+  },
+  render () {
+    const { stateValue, getTextAreaClassName, handleKeyDown, handleTextareaChange, textareaStyles } = this
+    const otherProps = omit(this.$props, [
+      'prefixCls',
+      'autosize',
+      'type',
+    ])
+    const attrs = {
+      attrs: { ...otherProps, ...this.$attrs },
+    }
+    return (
+      <textarea
+        {...attrs}
+        value={stateValue}
+        class={getTextAreaClassName()}
+        style={textareaStyles}
+        onKeydown={handleKeyDown}
+        onInput={handleTextareaChange}
+        ref='textArea'
+      />
+    )
+  },
+}
+</script>

components/input/calculateNodeHeight.js

@@ -153,5 +153,5 @@ export default function calculateNodeHeight (
   if (!maxRows) {
     overflowY = 'hidden'
   }
-  return { height, minHeight, maxHeight, overflowY }
+  return { height: `${height}px`, minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px`, overflowY }
 }

components/input/demo/autosize-textarea.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <AntTextArea placeholder="Autosize height based on content lines" autosize />
+    <div style="margin: 24px 0" />
+    <ant-textArea placeholder="Autosize height with minimum and maximum number of lines" :autosize="{ minRows: 2, maxRows: 6 }" />
+  </div>
+</template>
+<script>
+
+import { Input } from 'antd'
+export default {
+  components: {
+    AntTextArea: Input.TextArea,
+  },
+}
+</script>

components/input/demo/basic.vue

@@ -1,25 +1,10 @@
 <template>
-<div>
-  <AntInput placeholder="Basic usage" v-model="value"/>
-  <AntInput placeholder="Basic usage" :value="value" @change="change"/>
-  <AntInput placeholder="Basic usage" defaultValue="mysite"/>
-</div>
-
+  <AntInput placeholder="Basic usage"/>
 </template>
 <script>
 
 import { Input } from 'antd'
 export default {
-  data () {
-    return {
-      value: '12345',
-    }
-  },
-  methods: {
-    change (e) {
-      this.value = e.target.value
-    },
-  },
   components: {
     AntInput: Input,
   },

components/input/demo/search-input.vue

@@ -0,0 +1,21 @@
+<template>
+  <Search
+    placeholder="input search text"
+    style="width: 200px"
+    @search="onSearch"
+  />
+</template>
+<script>
+
+import { Input } from 'antd'
+export default {
+  methods: {
+    onSearch (value) {
+      console.log(value)
+    },
+  },
+  components: {
+    Search: Input.Search,
+  },
+}
+</script>

components/input/demo/size.vue

@@ -0,0 +1,23 @@
+<template>
+<div class="example-input">
+  <AntInput size="large" placeholder="large size" />
+  <AntInput placeholder="default size" />
+  <AntInput size="small" placeholder="small size" />
+</div>
+
+</template>
+<script>
+
+import { Input } from 'antd'
+export default {
+  components: {
+    AntInput: Input,
+  },
+}
+</script>
+<style>
+.example-input .ant-input {
+  width: 200px;
+  margin: 0 8px 8px 0;
+}
+</style>

components/input/demo/textarea.vue

@@ -0,0 +1,12 @@
+<template>
+  <AntTextArea placeholder="Basic usage" :rows="4"/>
+</template>
+<script>
+
+import { Input } from 'antd'
+export default {
+  components: {
+    AntTextArea: Input.TextArea,
+  },
+}
+</script>

components/input/index.js

@@ -1,9 +1,9 @@
 import Input from './Input'
 import Group from './Group'
 import Search from './Search'
-// import TextArea from './TextArea'
+import TextArea from './TextArea'
 
 Input.Group = Group
 Input.Search = Search
-// Input.TextArea = TextArea
+Input.TextArea = TextArea
 export default Input

components/input/inputProps.js

@@ -17,7 +17,6 @@ export default {
       return ['small', 'large', 'default'].includes(value)
     },
   },
-  maxLength: String,
   disabled: {
     default: false,
     type: Boolean,