add input
tangjinzhou
parent
fa98dd8086
commit
f82be7e667
|
|
@ -25,3 +25,5 @@ export { default as Avatar } from './avatar'
|
|||
export { default as Badge } from './badge'
|
||||
|
||||
export { default as Tabs } from './tabs'
|
||||
|
||||
export { default as Input } from './input'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<span :class="classes" >
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'InputGruop',
|
||||
props: {
|
||||
prefixCls: {
|
||||
default: 'ant-input-group',
|
||||
type: String,
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return ['small', 'large', 'default'].includes(value)
|
||||
},
|
||||
},
|
||||
compact: Boolean,
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
const { prefixCls, size, compact = false } = this
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-compact`]: compact,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<script>
|
||||
import omit from 'omit.js'
|
||||
// import TextArea from './TextArea';
|
||||
|
||||
import inputProps from './inputProps'
|
||||
|
||||
function fixControlledValue (value) {
|
||||
if (typeof value === 'undefined' || value === null) {
|
||||
return ''
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
let inputKey = 1
|
||||
|
||||
export default {
|
||||
name: 'Input',
|
||||
props: {
|
||||
...inputProps,
|
||||
},
|
||||
data () {
|
||||
const { value, defaultValue } = this.$props
|
||||
return {
|
||||
stateValue: fixControlledValue(value === undefined ? defaultValue : value),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.stateValue = fixControlledValue(val)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleKeyDown (e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.$emit('press-enter', e)
|
||||
}
|
||||
this.$emit('keydown', e)
|
||||
},
|
||||
handleChange (e) {
|
||||
const { value } = this.$props
|
||||
if (value === undefined) {
|
||||
this.stateValue = e.target.value
|
||||
} else {
|
||||
this.$forceUpdate()
|
||||
this.$emit('input', e)
|
||||
this.$emit('change', e.target.value)
|
||||
}
|
||||
},
|
||||
|
||||
focus () {
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
|
||||
blur () {
|
||||
this.$refs.input.blur()
|
||||
},
|
||||
|
||||
getInputClassName () {
|
||||
const { prefixCls, size, disabled } = this.$props
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
}
|
||||
},
|
||||
renderLabeledInput (children) {
|
||||
const props = this.props
|
||||
let { addonBefore, addonAfter } = this.$slots
|
||||
// Not wrap when there is not addons
|
||||
if ((!addonBefore && !addonAfter)) {
|
||||
return children
|
||||
}
|
||||
|
||||
const wrapperClassName = `${props.prefixCls}-group`
|
||||
const addonClassName = `${wrapperClassName}-addon`
|
||||
addonBefore = addonBefore ? (
|
||||
<span class={addonClassName}>
|
||||
{addonBefore}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
addonAfter = addonAfter ? (
|
||||
<span class={addonClassName}>
|
||||
{addonAfter}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
const className = {
|
||||
[`${props.prefixCls}-wrapper`]: true,
|
||||
[wrapperClassName]: (addonBefore || addonAfter),
|
||||
}
|
||||
|
||||
if (addonBefore || addonAfter) {
|
||||
return (
|
||||
<span
|
||||
class={`${props.prefixCls}-group-wrapper`}
|
||||
>
|
||||
<span class={className}>
|
||||
{addonBefore}
|
||||
{children}
|
||||
{addonAfter}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span class={className}>
|
||||
{addonBefore}
|
||||
{children}
|
||||
{addonAfter}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
renderLabeledIcon (children) {
|
||||
const { prefixCls } = this.$props
|
||||
let { prefix, suffix } = this.$slots
|
||||
if (!prefix && !suffix) {
|
||||
return children
|
||||
}
|
||||
|
||||
prefix = prefix ? (
|
||||
<span class={`${prefixCls}-prefix`}>
|
||||
{prefix}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
suffix = suffix ? (
|
||||
<span class={`${prefixCls}-suffix`}>
|
||||
{suffix}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<span
|
||||
class={`${prefixCls}-affix-wrapper`}
|
||||
>
|
||||
{prefix}
|
||||
{children}
|
||||
{suffix}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
getInputKey () {
|
||||
const { value } = this
|
||||
// 模拟受控组件
|
||||
if (value !== undefined) {
|
||||
return inputKey++
|
||||
} else {
|
||||
return inputKey
|
||||
}
|
||||
},
|
||||
|
||||
renderInput () {
|
||||
const { placeholder, type, readOnly = false, name, id, disabled = false } = this.$props
|
||||
const { getInputKey, stateValue, getInputClassName, handleKeyDown, handleChange } = this
|
||||
return this.renderLabeledIcon(
|
||||
<input
|
||||
value={stateValue}
|
||||
type={type}
|
||||
readOnly={readOnly}
|
||||
placeholder={placeholder}
|
||||
name={name}
|
||||
id={id}
|
||||
disabled={disabled}
|
||||
class={getInputClassName()}
|
||||
onKeydown={handleKeyDown}
|
||||
onInput={handleChange}
|
||||
ref='input'
|
||||
key={getInputKey()}
|
||||
/>,
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
return this.renderLabeledInput(this.renderInput())
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<script>
|
||||
import Input, { InputProps } from './Input'
|
||||
import Icon from '../icon'
|
||||
|
||||
export default {
|
||||
name: 'InputSearch',
|
||||
props: {
|
||||
...InputProps,
|
||||
prefixCls: {
|
||||
default: 'ant-input-search',
|
||||
type: String,
|
||||
},
|
||||
inputPrefixCls: {
|
||||
default: 'ant-input',
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { inputPrefixCls, prefixCls, ...others } = this.$props
|
||||
delete others.onSearch
|
||||
// const searchSuffix = (
|
||||
// <Icon
|
||||
// class={`${prefixCls}-icon`}
|
||||
// onClick={this.onSearch}
|
||||
// type='search'
|
||||
// />
|
||||
// )
|
||||
return (
|
||||
<Input
|
||||
onKeyup={this.onSearch}
|
||||
{...others}
|
||||
class={prefixCls}
|
||||
prefixCls={inputPrefixCls}
|
||||
ref='input'
|
||||
>
|
||||
<Icon
|
||||
slot='suffix'
|
||||
class={`${prefixCls}-icon`}
|
||||
onClick={this.onSearch}
|
||||
type='search'
|
||||
/>
|
||||
</Input>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
// Thanks to https://github.com/andreypopp/react-textarea-autosize/
|
||||
|
||||
/**
|
||||
* calculateNodeHeight(uiTextNode, useCache = false)
|
||||
*/
|
||||
|
||||
const HIDDEN_TEXTAREA_STYLE = `
|
||||
min-height:0 !important;
|
||||
max-height:none !important;
|
||||
height:0 !important;
|
||||
visibility:hidden !important;
|
||||
overflow:hidden !important;
|
||||
position:absolute !important;
|
||||
z-index:-1000 !important;
|
||||
top:0 !important;
|
||||
right:0 !important
|
||||
`
|
||||
|
||||
const SIZING_STYLE = [
|
||||
'letter-spacing',
|
||||
'line-height',
|
||||
'padding-top',
|
||||
'padding-bottom',
|
||||
'font-family',
|
||||
'font-weight',
|
||||
'font-size',
|
||||
'text-rendering',
|
||||
'text-transform',
|
||||
'width',
|
||||
'text-indent',
|
||||
'padding-left',
|
||||
'padding-right',
|
||||
'border-width',
|
||||
'box-sizing',
|
||||
]
|
||||
|
||||
const computedStyleCache = {}
|
||||
let hiddenTextarea
|
||||
|
||||
function calculateNodeStyling (node, useCache = false) {
|
||||
const nodeRef = (
|
||||
node.getAttribute('id') ||
|
||||
node.getAttribute('data-reactid') ||
|
||||
node.getAttribute('name')
|
||||
)
|
||||
|
||||
if (useCache && computedStyleCache[nodeRef]) {
|
||||
return computedStyleCache[nodeRef]
|
||||
}
|
||||
|
||||
const style = window.getComputedStyle(node)
|
||||
|
||||
const boxSizing = (
|
||||
style.getPropertyValue('box-sizing') ||
|
||||
style.getPropertyValue('-moz-box-sizing') ||
|
||||
style.getPropertyValue('-webkit-box-sizing')
|
||||
)
|
||||
|
||||
const paddingSize = (
|
||||
parseFloat(style.getPropertyValue('padding-bottom')) +
|
||||
parseFloat(style.getPropertyValue('padding-top'))
|
||||
)
|
||||
|
||||
const borderSize = (
|
||||
parseFloat(style.getPropertyValue('border-bottom-width')) +
|
||||
parseFloat(style.getPropertyValue('border-top-width'))
|
||||
)
|
||||
|
||||
const sizingStyle = SIZING_STYLE
|
||||
.map(name => `${name}:${style.getPropertyValue(name)}`)
|
||||
.join(';')
|
||||
|
||||
const nodeInfo = {
|
||||
sizingStyle,
|
||||
paddingSize,
|
||||
borderSize,
|
||||
boxSizing,
|
||||
}
|
||||
|
||||
if (useCache && nodeRef) {
|
||||
computedStyleCache[nodeRef] = nodeInfo
|
||||
}
|
||||
|
||||
return nodeInfo
|
||||
}
|
||||
|
||||
export default function calculateNodeHeight (
|
||||
uiTextNode,
|
||||
useCache = false,
|
||||
minRows = null,
|
||||
maxRows = null,
|
||||
) {
|
||||
if (!hiddenTextarea) {
|
||||
hiddenTextarea = document.createElement('textarea')
|
||||
document.body.appendChild(hiddenTextarea)
|
||||
}
|
||||
|
||||
// Fix wrap="off" issue
|
||||
// https://github.com/ant-design/ant-design/issues/6577
|
||||
if (uiTextNode.getAttribute('wrap')) {
|
||||
hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'))
|
||||
} else {
|
||||
hiddenTextarea.removeAttribute('wrap')
|
||||
}
|
||||
|
||||
// Copy all CSS properties that have an impact on the height of the content in
|
||||
// the textbox
|
||||
const {
|
||||
paddingSize, borderSize,
|
||||
boxSizing, sizingStyle,
|
||||
} = calculateNodeStyling(uiTextNode, useCache)
|
||||
|
||||
// Need to have the overflow attribute to hide the scrollbar otherwise
|
||||
// text-lines will not calculated properly as the shadow will technically be
|
||||
// narrower for content
|
||||
hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`)
|
||||
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || ''
|
||||
|
||||
let minHeight = -Infinity
|
||||
let maxHeight = Infinity
|
||||
let height = hiddenTextarea.scrollHeight
|
||||
let overflowY
|
||||
|
||||
if (boxSizing === 'border-box') {
|
||||
// border-box: add border, since height = content + padding + border
|
||||
height = height + borderSize
|
||||
} else if (boxSizing === 'content-box') {
|
||||
// remove padding, since height = content
|
||||
height = height - paddingSize
|
||||
}
|
||||
|
||||
if (minRows !== null || maxRows !== null) {
|
||||
// measure height of a textarea with a single row
|
||||
hiddenTextarea.value = ''
|
||||
const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
|
||||
if (minRows !== null) {
|
||||
minHeight = singleRowHeight * minRows
|
||||
if (boxSizing === 'border-box') {
|
||||
minHeight = minHeight + paddingSize + borderSize
|
||||
}
|
||||
height = Math.max(minHeight, height)
|
||||
}
|
||||
if (maxRows !== null) {
|
||||
maxHeight = singleRowHeight * maxRows
|
||||
if (boxSizing === 'border-box') {
|
||||
maxHeight = maxHeight + paddingSize + borderSize
|
||||
}
|
||||
overflowY = height > maxHeight ? '' : 'hidden'
|
||||
height = Math.min(maxHeight, height)
|
||||
}
|
||||
}
|
||||
// Remove scroll bar flash when autosize without maxRows
|
||||
if (!maxRows) {
|
||||
overflowY = 'hidden'
|
||||
}
|
||||
return { height, minHeight, maxHeight, overflowY }
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<AntInput placeholder="Basic usage" value="123"/>
|
||||
<AntInput placeholder="Basic usage" defaultValue="mysite"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { Input } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
AntInput: Input,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Input from './Input'
|
||||
import Group from './Group'
|
||||
import Search from './Search'
|
||||
// import TextArea from './TextArea'
|
||||
|
||||
Input.Group = Group
|
||||
Input.Search = Search
|
||||
// Input.TextArea = TextArea
|
||||
export default Input
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
export default {
|
||||
prefixCls: {
|
||||
default: 'ant-input',
|
||||
type: String,
|
||||
},
|
||||
defaultValue: [String, Number],
|
||||
value: [String, Number],
|
||||
placeholder: [String, Number],
|
||||
type: {
|
||||
default: 'text',
|
||||
type: String,
|
||||
},
|
||||
id: [String, Number],
|
||||
name: String,
|
||||
size: {
|
||||
validator (value) {
|
||||
return ['small', 'large', 'default'].includes(value)
|
||||
},
|
||||
},
|
||||
maxLength: String,
|
||||
disabled: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
readOnly: Boolean,
|
||||
// addonBefore: React.ReactNode,
|
||||
// addonAfter: React.ReactNode,
|
||||
// onPressEnter?: React.FormEventHandler<any>;
|
||||
// onKeyDown?: React.FormEventHandler<any>;
|
||||
// onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
||||
// onClick?: React.FormEventHandler<any>;
|
||||
// onFocus?: React.FormEventHandler<any>;
|
||||
// onBlur?: React.FormEventHandler<any>;
|
||||
// autoComplete: String;
|
||||
// prefix: React.ReactNode,
|
||||
// suffix: React.ReactNode,
|
||||
spellCheck: Boolean,
|
||||
autoFocus: Boolean,
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "./mixin";
|
||||
@import "./search-input";
|
||||
|
||||
// Input styles
|
||||
.@{ant-prefix}-input {
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.@{ant-prefix}-input-group {
|
||||
.input-group(~"@{ant-prefix}-input");
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Input with affix: prefix or suffix
|
||||
.@{ant-prefix}-input-affix-wrapper {
|
||||
.input-affix-wrapper(~"@{ant-prefix}-input");
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/6144
|
||||
.@{ant-prefix}-input {
|
||||
min-height: 100%; // use min-height, assume that no smaller height to override
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@input-affix-width: 17px;
|
||||
|
||||
// size mixins for input
|
||||
.input-lg() {
|
||||
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
|
||||
.input-sm() {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
|
||||
height: @input-height-sm;
|
||||
}
|
||||
|
||||
// input status
|
||||
// == when focus or actived
|
||||
.active(@color: @outline-color) {
|
||||
border-color: ~`colorPalette("@{color}", 5)`;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
|
||||
}
|
||||
|
||||
// == when hoverd
|
||||
.hover(@color: @input-hover-border-color) {
|
||||
border-color: ~`colorPalette("@{color}", 5)`;
|
||||
}
|
||||
|
||||
.disabled() {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
color: @disabled-color;
|
||||
&:hover {
|
||||
.hover(@input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Basic style for input
|
||||
.input() {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
.placeholder(); // Reset placeholder
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.active();
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.disabled();
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
textarea& {
|
||||
max-width: 100%; // prevent textearea resize from coming out of its container
|
||||
height: auto;
|
||||
vertical-align: bottom;
|
||||
transition: all .3s, height 0s;
|
||||
}
|
||||
|
||||
// Size
|
||||
&-lg {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.input-sm();
|
||||
}
|
||||
}
|
||||
|
||||
// label input
|
||||
.input-group(@inputClass) {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> [class*="col-"] {
|
||||
padding-right: 8px;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-wrap,
|
||||
> .@{inputClass} {
|
||||
display: table-cell;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-wrap {
|
||||
width: 1px; // To make addon/wrap as small as possible
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-wrap > * {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
&:focus {
|
||||
z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
|
||||
}
|
||||
}
|
||||
|
||||
&-addon {
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
text-align: center;
|
||||
background-color: @input-addon-bg;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{ant-prefix}-select {
|
||||
margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base); // lesshint spaceAroundOperator: false
|
||||
|
||||
.@{ant-prefix}-select-selection {
|
||||
background-color: inherit;
|
||||
margin: -1px;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-open,
|
||||
&-focused {
|
||||
.@{ant-prefix}-select-selection {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand addon icon click area
|
||||
// https://github.com/ant-design/ant-design/issues/3714
|
||||
> i:only-child:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .@{inputClass}:first-child,
|
||||
&-addon:first-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{inputClass}-affix-wrapper {
|
||||
&:not(:first-child) .@{inputClass} {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) .@{inputClass} {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-addon:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&-addon:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
> .@{inputClass}:last-child,
|
||||
&-addon:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
&-lg .@{inputClass},
|
||||
&-lg > &-addon {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
&-sm .@{inputClass},
|
||||
&-sm > &-addon {
|
||||
.input-sm();
|
||||
}
|
||||
|
||||
// Fix https://github.com/ant-design/ant-design/issues/5754
|
||||
&-lg .@{ant-prefix}-select-selection--single {
|
||||
height: @input-height-lg;
|
||||
}
|
||||
|
||||
&-sm .@{ant-prefix}-select-selection--single {
|
||||
height: @input-height-sm;
|
||||
}
|
||||
|
||||
.@{inputClass}-affix-wrapper {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&&-compact {
|
||||
display: block;
|
||||
.clearfix;
|
||||
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
vertical-align: middle;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
.@{inputClass} {
|
||||
float: none;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
|
||||
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
|
||||
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
& > *:first-child,
|
||||
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
|
||||
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
& > *:last-child,
|
||||
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
|
||||
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-affix-wrapper(@inputClass) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.@{inputClass} {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover .@{inputClass}:not(.@{inputClass}-disabled) {
|
||||
.hover();
|
||||
}
|
||||
|
||||
.@{inputClass}-prefix,
|
||||
.@{inputClass}-suffix {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
line-height: 0;
|
||||
color: @input-color;
|
||||
}
|
||||
|
||||
.@{inputClass}-prefix {
|
||||
left: @input-padding-horizontal-base;
|
||||
}
|
||||
|
||||
.@{inputClass}-suffix {
|
||||
right: @input-padding-horizontal-base;
|
||||
}
|
||||
|
||||
.@{inputClass}:not(:first-child) {
|
||||
padding-left: @input-padding-horizontal-base + @input-affix-width;
|
||||
}
|
||||
|
||||
.@{inputClass}:not(:last-child) {
|
||||
padding-right: @input-padding-horizontal-base + @input-affix-width;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../button/style/mixin";
|
||||
@import "./mixin";
|
||||
|
||||
.@{ant-prefix}-input-search-icon {
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// code blow is keeped for compatibility
|
||||
// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
|
||||
// do not delete until 3.x
|
||||
.@{ant-prefix}-search-input-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-search-input {
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
|
||||
border-radius: @border-radius-base;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-search-btn {
|
||||
.btn-default;
|
||||
border-radius: 0 @border-radius-base - 1px @border-radius-base - 1px 0;
|
||||
left: -1px;
|
||||
position: relative;
|
||||
border-width: 0 0 0 1px;
|
||||
z-index: 2;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
&&-focus .@{ant-prefix}-search-btn-noempty,
|
||||
&:hover .@{ant-prefix}-search-btn-noempty {
|
||||
.btn-primary;
|
||||
}
|
||||
.@{ant-prefix}-select-combobox {
|
||||
.@{ant-prefix}-select-selection__rendered {
|
||||
margin-right: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,3 +9,4 @@ import './pagination/style'
|
|||
import './avatar/style'
|
||||
import './badge/style'
|
||||
import './tabs/style'
|
||||
import './input/style'
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@ Button | done
|
|||
Icon | done
|
||||
Checkbox | done
|
||||
Radio | done
|
||||
AutoComplete
|
||||
Calendar
|
||||
Tabs | done
|
||||
Tag | done
|
||||
Carousel
|
||||
DatePicker
|
||||
Form
|
||||
Mention
|
||||
Input
|
||||
InputNumber
|
||||
AutoComplete
|
||||
Select
|
||||
Tabs
|
||||
Tag
|
||||
Mention
|
||||
TimePicker
|
||||
Upload
|
||||
Form
|
||||
Calendar
|
||||
DatePicker
|
||||
TimePicker
|
||||
|
||||
##万
|
||||
Grid
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
"dependencies": {
|
||||
"add-dom-event-listener": "^1.0.2",
|
||||
"eslint-plugin-vue": "^3.13.0",
|
||||
"lodash.debounce": "^4.0.8"
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"omit.js": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue