update to 3.4.0
tjz
parent
89bd5afa6e
commit
116cc6a251
|
|
@ -13,7 +13,7 @@ Search and select options directly.
|
|||
|
||||
```html
|
||||
<template>
|
||||
<a-cascader :options="options" :showSearch="true" @change="onChange" placeholder="Please select" />
|
||||
<a-cascader :options="options" :showSearch="{filter}" @change="onChange" placeholder="Please select" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -51,7 +51,10 @@ export default {
|
|||
methods: {
|
||||
onChange(value, selectedOptions) {
|
||||
console.log(value, selectedOptions);
|
||||
}
|
||||
},
|
||||
filter(inputValue, path) {
|
||||
return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import RangeCalendar from '../vc-calendar/src/RangeCalendar'
|
|||
import VcDatePicker from '../vc-calendar/src/Picker'
|
||||
import classNames from 'classnames'
|
||||
import Icon from '../icon'
|
||||
import callMoment from '../_util/callMoment'
|
||||
import interopDefault from '../_util/interopDefault'
|
||||
import { RangePickerProps } from './interface'
|
||||
import { hasProp, getOptionProps, initDefaultProps, mergeProps } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
|
|
@ -67,8 +67,8 @@ export default {
|
|||
data () {
|
||||
const value = this.value || this.defaultValue || []
|
||||
if (
|
||||
value[0] && !moment.isMoment(value[0]) ||
|
||||
value[1] && !moment.isMoment(value[1])
|
||||
value[0] && !interopDefault(moment).isMoment(value[0]) ||
|
||||
value[1] && !interopDefault(moment).isMoment(value[1])
|
||||
) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' +
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
const pickerValue = !value || isEmptyArray(value) ? this.defaultPickerValue : value
|
||||
return {
|
||||
sValue: value,
|
||||
sShowDate: pickerValueAdapter(pickerValue || callMoment(moment)),
|
||||
sShowDate: pickerValueAdapter(pickerValue || interopDefault(moment)()),
|
||||
sOpen: this.open,
|
||||
sHoverValue: [],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import VcDatePicker from '../vc-calendar/src/Picker'
|
|||
import Icon from '../icon'
|
||||
import { hasProp, getOptionProps, initDefaultProps } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { WeexPickerProps } from './interface'
|
||||
import { WeekPickerProps } from './interface'
|
||||
import interopDefault from '../_util/interopDefault'
|
||||
|
||||
function formatValue (value, format) {
|
||||
return (value && value.format(format)) || ''
|
||||
|
|
@ -19,15 +20,15 @@ export default {
|
|||
// };
|
||||
|
||||
// private input: any;
|
||||
props: initDefaultProps(WeexPickerProps(), {
|
||||
format: 'YYYY-wo',
|
||||
props: initDefaultProps(WeekPickerProps(), {
|
||||
format: 'gggg-wo',
|
||||
allowClear: true,
|
||||
}),
|
||||
name: 'WeekPicker',
|
||||
mixins: [BaseMixin],
|
||||
data () {
|
||||
const value = this.value || this.defaultValue
|
||||
if (value && !moment.isMoment(value)) {
|
||||
if (value && !interopDefault(moment).isMoment(value)) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of DatePicker or MonthPicker must be ' +
|
||||
'a moment object',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import MonthCalendar from '../vc-calendar/src/MonthCalendar'
|
|||
import VcDatePicker from '../vc-calendar/src/Picker'
|
||||
import classNames from 'classnames'
|
||||
import Icon from '../icon'
|
||||
import callMoment from '../_util/callMoment'
|
||||
import interopDefault from '../_util/interopDefault'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { hasProp, getOptionProps, initDefaultProps, mergeProps } from '../_util/props-util'
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export default function createPicker (TheCalendar, props) {
|
|||
mixins: [BaseMixin],
|
||||
data () {
|
||||
const value = this.value || this.defaultValue
|
||||
if (value && !moment.isMoment(value)) {
|
||||
if (value && !interopDefault(moment).isMoment(value)) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of DatePicker or MonthPicker must be ' +
|
||||
'a moment object',
|
||||
|
|
@ -127,7 +127,7 @@ export default function createPicker (TheCalendar, props) {
|
|||
disabledTime,
|
||||
locale: locale.lang,
|
||||
timePicker: props.timePicker,
|
||||
defaultValue: props.defaultPickerValue || callMoment(moment),
|
||||
defaultValue: props.defaultPickerValue || interopDefault(moment)(),
|
||||
dateInputPlaceholder: placeholder,
|
||||
prefixCls,
|
||||
dateRender,
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
| open | open state of picker | boolean | - |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} |
|
||||
| dropdownClassName | to customize the className of the popup calendar | string | - |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
|
||||
|
||||
### Common Events
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import createPicker from './createPicker'
|
|||
import wrapPicker from './wrapPicker'
|
||||
import RangePicker from './RangePicker'
|
||||
import WeekPicker from './WeekPicker'
|
||||
import { DatePickerProps, MonthPickerProps, WeexPickerProps, RangePickerProps } from './interface'
|
||||
import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface'
|
||||
|
||||
const DatePicker = wrapPicker(createPicker(VcCalendar, DatePickerProps()), DatePickerProps())
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ const MonthPicker = wrapPicker(createPicker(MonthCalendar, MonthPickerProps()),
|
|||
Object.assign(DatePicker, {
|
||||
RangePicker: wrapPicker(RangePicker, RangePickerProps()),
|
||||
MonthPicker,
|
||||
WeekPicker: wrapPicker(WeekPicker, WeexPickerProps(), 'YYYY-wo'),
|
||||
WeekPicker: wrapPicker(WeekPicker, WeekPickerProps(), 'gggg-wo'),
|
||||
})
|
||||
|
||||
export default DatePicker
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| open | 控制弹层是否展开 | boolean | - |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
|
||||
| popupStyle | 格外的弹出日历样式 | object | {} |
|
||||
| popupStyle | 额外的弹出日历样式 | object | {} |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |
|
||||
|
||||
### 共有的事件
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const PickerProps = () => ({
|
|||
disabled: PropTypes.bool,
|
||||
allowClear: PropTypes.bool,
|
||||
popupStyle: PropTypes.object,
|
||||
dropdownClassName: PropTypes.string,
|
||||
locale: PropTypes.any,
|
||||
localeCode: PropTypes.string,
|
||||
size: PropTypes.oneOf(['large', 'small', 'default']),
|
||||
|
|
@ -81,7 +82,7 @@ export const RangePickerProps = () => ({
|
|||
// onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
|
||||
})
|
||||
|
||||
export const WeexPickerProps = () => ({
|
||||
export const WeekPickerProps = () => ({
|
||||
...PickerProps(), ...SinglePickerProps(),
|
||||
placeholder: PropTypes.string,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import TimePickerLocale from '../../time-picker/locale/sl_SI'
|
||||
|
||||
// Merge into a locale object
|
||||
const locale = {
|
||||
lang: {
|
||||
placeholder: 'Izberite datum',
|
||||
rangePlaceholder: ['Začetni datum', 'Končni datum'],
|
||||
today: 'Danes',
|
||||
now: 'Trenutno',
|
||||
backToToday: 'Nazaj na trenutni datum',
|
||||
ok: 'Ok',
|
||||
clear: 'Počisti',
|
||||
month: 'Mesec',
|
||||
year: 'Leto',
|
||||
timeSelect: 'Izberi čas',
|
||||
dateSelect: 'Izberi datum',
|
||||
monthSelect: 'Izberite mesec',
|
||||
yearSelect: 'Izberite leto',
|
||||
decadeSelect: 'Izberite desetletje',
|
||||
yearFormat: 'YYYY',
|
||||
dateFormat: 'D.M.YYYY',
|
||||
dayFormat: 'D',
|
||||
dateTimeFormat: 'D.M.YYYY HH:mm:ss',
|
||||
monthFormat: 'MMMM',
|
||||
monthBeforeYear: true,
|
||||
previousMonth: 'Prejšnji mesec (PageUp)',
|
||||
nextMonth: 'Naslednji mesec (PageDown)',
|
||||
previousYear: 'Lansko leto (Control + left)',
|
||||
nextYear: 'Naslednje leto (Control + right)',
|
||||
previousDecade: 'Prejšnje desetletje',
|
||||
nextDecade: 'Naslednje desetletje',
|
||||
previousCentury: 'Zadnje stoletje',
|
||||
nextCentury: 'Naslednje stoletje',
|
||||
},
|
||||
timePickerLocale: {
|
||||
...TimePickerLocale,
|
||||
},
|
||||
}
|
||||
|
||||
// All settings at:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
|
||||
|
||||
export default locale
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import Horizontal from './horizontal'
|
||||
import Vertical from './vertical'
|
||||
import Orientation from './orientation'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
const md = {
|
||||
|
|
@ -30,6 +31,7 @@ export default {
|
|||
<md cn={md.cn} us={md.us}/>
|
||||
<Vertical />
|
||||
<Horizontal />
|
||||
<Orientation />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<cn>
|
||||
#### 标题位置
|
||||
修改分割线标题的位置。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Orientation of title
|
||||
Set orientation of divider to left or right.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-divider orientation="left">Left Text</a-divider>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
|
||||
<a-divider orientation="right">Right Text</a-divider>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -4,5 +4,6 @@
|
|||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| dashed | whether line is dasded | Boolean | false |
|
||||
| dashed | whether line is dashed | Boolean | false |
|
||||
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
|
||||
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
|
||||
|
|
|
|||
|
|
@ -5,13 +5,16 @@ export default {
|
|||
prefixCls: PropTypes.string.def('ant'),
|
||||
type: PropTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
|
||||
dashed: PropTypes.bool,
|
||||
orientation: PropTypes.oneOf(['left', 'right']),
|
||||
},
|
||||
computed: {
|
||||
classString () {
|
||||
const { prefixCls, type, $slots, dashed } = this
|
||||
const { prefixCls, type, $slots, dashed, orientation = '' } = this
|
||||
const orientationPrefix = (orientation.length > 0) ? '-' + orientation : orientation
|
||||
|
||||
return {
|
||||
[`${prefixCls}-divider`]: true, [`${prefixCls}-divider-${type}`]: true,
|
||||
[`${prefixCls}-divider-with-text`]: $slots.default,
|
||||
[`${prefixCls}-divider-with-text${orientationPrefix}`]: $slots.default,
|
||||
[`${prefixCls}-divider-dashed`]: !!dashed,
|
||||
}
|
||||
},
|
||||
|
|
@ -20,7 +23,7 @@ export default {
|
|||
const { classString, prefixCls, $slots } = this
|
||||
return (
|
||||
<div class={classString}>
|
||||
{$slots.default && <span className={`${prefixCls}-divider-inner-text`}>{$slots.default}</span>}
|
||||
{$slots.default && <span class={`${prefixCls}-divider-inner-text`}>{$slots.default}</span>}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,3 +4,5 @@
|
|||
| --- | --- | --- | --- |
|
||||
| dashed | 是否虚线 | Boolean | false |
|
||||
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
|
||||
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
|
||||
|
||||
|
|
|
|||
|
|
@ -44,17 +44,81 @@
|
|||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 24px;
|
||||
}
|
||||
&-horizontal&-with-text-left {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-base;
|
||||
margin: 16px 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
border-top: 1px solid @border-color-split;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
border-top: 1px solid @border-color-split;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-right {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
font-weight: 500;
|
||||
color: @heading-color;
|
||||
font-size: @font-size-base;
|
||||
margin: 16px 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 95%;
|
||||
border-top: 1px solid @border-color-split;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 5%;
|
||||
border-top: 1px solid @border-color-split;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
&-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
&-dashed {
|
||||
background: none;
|
||||
border-top: 1px dashed @border-color-split;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
border-top: 0;
|
||||
&:before,
|
||||
|
|
|
|||
|
|
@ -151,6 +151,10 @@ export default {
|
|||
renderInput () {
|
||||
const otherProps = omit(this.$props, [
|
||||
'prefixCls',
|
||||
'addonBefore',
|
||||
'addonAfter',
|
||||
'prefix',
|
||||
'suffix',
|
||||
])
|
||||
const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this
|
||||
const inputProps = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
|
||||
import classNames from 'classnames'
|
||||
import Input from './Input'
|
||||
import Icon from '../icon'
|
||||
import inputProps from './inputProps'
|
||||
import Button from '../button'
|
||||
import { cloneElement } from '../_util/vnode'
|
||||
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
|
||||
import PropsType from '../_util/vue-types'
|
||||
|
||||
export default {
|
||||
name: 'InputSearch',
|
||||
|
|
@ -15,6 +20,7 @@ export default {
|
|||
default: 'ant-input',
|
||||
type: String,
|
||||
},
|
||||
enterButton: PropsType.oneOfType([PropsType.bool, PropsType.string, PropsType.object]),
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
|
|
@ -23,29 +29,76 @@ export default {
|
|||
this.$emit('search', this.$refs.input.stateValue)
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
getButtonOrIcon () {
|
||||
const { prefixCls, size } = this
|
||||
const enterButton = getComponentFromProp(this, 'enterButton')
|
||||
if (!enterButton) {
|
||||
return <Icon class={`${prefixCls}-icon`} type='search' key='searchIcon' />
|
||||
}
|
||||
const enterButtonAsElement = Array.isArray(enterButton) ? enterButton[0] : enterButton
|
||||
if (enterButtonAsElement.componentOptions && enterButtonAsElement.componentOptions.Ctor.extendOptions.__ANT_BUTTON) {
|
||||
return cloneElement(enterButtonAsElement, {
|
||||
class: `${prefixCls}-button`,
|
||||
props: { size },
|
||||
on: {
|
||||
click: this.onSearch,
|
||||
},
|
||||
})
|
||||
} else if (enterButtonAsElement.tag === 'button') {
|
||||
return cloneElement(enterButtonAsElement[0], {
|
||||
on: {
|
||||
click: this.onSearch,
|
||||
},
|
||||
})
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
class={`${prefixCls}-button`}
|
||||
type='primary'
|
||||
size={size}
|
||||
onClick={this.onSearch}
|
||||
key='enterButton'
|
||||
>
|
||||
{enterButton === true ? <Icon type='search' /> : enterButton}
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { inputPrefixCls, prefixCls, ...others } = this.$props
|
||||
const { prefixCls, inputPrefixCls, size,
|
||||
suffix, ...others
|
||||
} = getOptionProps(this)
|
||||
const enterButton = getComponentFromProp(this, 'enterButton')
|
||||
const buttonOrIcon = this.getButtonOrIcon()
|
||||
const searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon
|
||||
const inputClassName = classNames(prefixCls, {
|
||||
[`${prefixCls}-enter-button`]: !!enterButton,
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
})
|
||||
const inputProps = {
|
||||
props: {
|
||||
...others,
|
||||
prefixCls: inputPrefixCls,
|
||||
size,
|
||||
suffix: searchSuffix,
|
||||
},
|
||||
attrs: this.$attrs,
|
||||
on: {
|
||||
pressEnter: this.onSearch,
|
||||
},
|
||||
}
|
||||
return (
|
||||
<Input
|
||||
{...inputProps}
|
||||
onPressEnter={this.onSearch}
|
||||
class={prefixCls}
|
||||
class={inputClassName}
|
||||
ref='input'
|
||||
>
|
||||
<Icon
|
||||
{/* <Icon
|
||||
slot='suffix'
|
||||
class={`${prefixCls}-icon`}
|
||||
onClick={this.onSearch}
|
||||
type='search'
|
||||
/>
|
||||
/> */}
|
||||
</Input>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
|
|||
<template>
|
||||
<div>
|
||||
<a-input-group size="large">
|
||||
<a-col :span="4">
|
||||
<a-col :span="5">
|
||||
<a-input defaultValue="0571" />
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
|
|
|
|||
|
|
@ -10,11 +10,25 @@ Example of creating a search box by grouping a standard input with a search butt
|
|||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
placeholder="input search text"
|
||||
style="width: 200px"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<br /><br />
|
||||
<a-input-search
|
||||
placeholder="input search text"
|
||||
@search="onSearch"
|
||||
enterButton
|
||||
/>
|
||||
<br /><br />
|
||||
<a-input-search placeholder="input search text" @search="onSearch" enterButton="Search" size="large" />
|
||||
<br /><br />
|
||||
<a-input-search placeholder="input search text" @search="onSearch" size="large">
|
||||
<a-button slot="enterButton">Custom</a-button>
|
||||
</a-input-search>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -327,6 +327,9 @@
|
|||
z-index: 2;
|
||||
line-height: 0;
|
||||
color: @input-color;
|
||||
:not(.anticon) {
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{inputClass}-prefix {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import * as moment from 'moment'
|
||||
import interopDefault from '../_util/interopDefault'
|
||||
import { changeConfirmLocale } from '../modal/locale'
|
||||
|
||||
// export interface Locale {
|
||||
|
|
@ -19,9 +20,9 @@ import { changeConfirmLocale } from '../modal/locale'
|
|||
|
||||
function setMomentLocale (locale) {
|
||||
if (locale && locale.locale) {
|
||||
moment.locale(locale.locale)
|
||||
interopDefault(moment).locale(locale.locale)
|
||||
} else {
|
||||
moment.locale('en')
|
||||
interopDefault(moment).locale('en')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import Pagination from '../vc-pagination/locale/sl_SI'
|
||||
import DatePicker from '../date-picker/locale/sl_SI'
|
||||
import TimePicker from '../time-picker/locale/sl_SI'
|
||||
import Calendar from '../calendar/locale/sl_SI'
|
||||
|
||||
export default {
|
||||
locale: 'sl',
|
||||
Pagination,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Calendar,
|
||||
Table: {
|
||||
filterTitle: 'Filter',
|
||||
filterConfirm: 'Filtriraj',
|
||||
filterReset: 'Pobriši filter',
|
||||
emptyText: 'Ni podatkov',
|
||||
selectAll: 'Izberi vse na trenutni strani',
|
||||
selectInvert: 'Obrni izbor na trenutni strani',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'V redu',
|
||||
cancelText: 'Prekliči',
|
||||
justOkText: 'V redu',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'v redu',
|
||||
cancelText: 'Prekliči',
|
||||
},
|
||||
Transfer: {
|
||||
notFoundContent: 'Ni rezultatov iskanja',
|
||||
searchPlaceholder: 'Išči tukaj',
|
||||
itemUnit: 'Objekt',
|
||||
itemsUnit: 'Objektov',
|
||||
},
|
||||
Select: {
|
||||
notFoundContent: 'Ni bilo mogoče najti',
|
||||
},
|
||||
Upload: {
|
||||
uploading: 'Nalaganje...',
|
||||
removeFile: 'Odstrani datoteko',
|
||||
uploadError: 'Napaka pri nalaganju',
|
||||
previewFile: 'Predogled datoteke',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Pagination from '../vc-pagination/locale/en_US';
|
||||
import DatePicker from '../date-picker/locale/tr_TR';
|
||||
import TimePicker from '../time-picker/locale/tr_TR';
|
||||
import Calendar from '../calendar/locale/tr_TR';
|
||||
import Pagination from '../vc-pagination/locale/tr_TR'
|
||||
import DatePicker from '../date-picker/locale/tr_TR'
|
||||
import TimePicker from '../time-picker/locale/tr_TR'
|
||||
import Calendar from '../calendar/locale/tr_TR'
|
||||
|
||||
export default {
|
||||
locale: 'tr',
|
||||
|
|
@ -15,30 +15,30 @@ export default {
|
|||
filterReset: 'Sıfırla',
|
||||
emptyText: 'Veri Yok',
|
||||
selectAll: 'Hepsini Seç',
|
||||
selectInvert: 'Tersini Seç'
|
||||
selectInvert: 'Tersini Seç',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'Tamam',
|
||||
cancelText: 'İptal',
|
||||
justOkText: 'Tamam'
|
||||
justOkText: 'Tamam',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'Tamam',
|
||||
cancelText: 'İptal'
|
||||
cancelText: 'İptal',
|
||||
},
|
||||
Transfer: {
|
||||
notFoundContent: 'Bulunamadı',
|
||||
searchPlaceholder: 'Arama',
|
||||
itemUnit: 'Öğe',
|
||||
itemsUnit: 'Öğeler'
|
||||
itemsUnit: 'Öğeler',
|
||||
},
|
||||
Select: {
|
||||
notFoundContent: 'Bulunamadı'
|
||||
notFoundContent: 'Bulunamadı',
|
||||
},
|
||||
Upload: {
|
||||
uploading: 'Yükleniyor...',
|
||||
removeFile: `Dosyayı kaldır`,
|
||||
uploadError: 'Yükleme Hatası',
|
||||
previewFile: `Dosyayı Önizle`
|
||||
previewFile: `Dosyayı Önizle`,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import omit from 'omit.js'
|
||||
import RcMenu, { Divider, ItemGroup, SubMenu } from '../vc-menu'
|
||||
import VcMenu, { Divider, ItemGroup, SubMenu } from '../vc-menu'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import animation from '../_util/openAnimation'
|
||||
import warning from '../_util/warning'
|
||||
|
|
@ -247,7 +247,7 @@ export default {
|
|||
return null
|
||||
}
|
||||
|
||||
return <RcMenu {...menuProps} class={menuClassName}>{$slots.default}</RcMenu>
|
||||
return <VcMenu {...menuProps} class={menuClassName}>{$slots.default}</VcMenu>
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,8 +63,6 @@
|
|||
&:before {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -286,6 +284,9 @@
|
|||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
&:before {
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ This components provides some static methods, with usage and arguments as follow
|
|||
| Argument | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| content | content of the message | string\|vueNode \|function(h) | - |
|
||||
| duration | time before auto-dismiss, in seconds | number | 1.5 |
|
||||
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
|
||||
| onClose | Specify a function that will be called when the message is closed | Function | - |
|
||||
|
||||
Methods for global configuration and destruction are also provided:
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ let defaultTop = null
|
|||
let messageInstance = null
|
||||
let key = 1
|
||||
let prefixCls = 'ant-message'
|
||||
let transitionName = 'move-up'
|
||||
let getContainer = () => document.body
|
||||
|
||||
function getMessageInstance (callback) {
|
||||
|
|
@ -15,7 +16,7 @@ function getMessageInstance (callback) {
|
|||
}
|
||||
Notification.newInstance({
|
||||
prefixCls,
|
||||
transitionName: 'move-up',
|
||||
transitionName,
|
||||
style: { top: defaultTop }, // 覆盖原来的样式
|
||||
getContainer,
|
||||
}, (instance) => {
|
||||
|
|
@ -80,6 +81,7 @@ function notice (
|
|||
// duration?: number;
|
||||
// prefixCls?: string;
|
||||
// getContainer?: () => HTMLElement;
|
||||
// transitionName?: string;
|
||||
// }
|
||||
|
||||
export default {
|
||||
|
|
@ -116,6 +118,10 @@ export default {
|
|||
if (options.getContainer !== undefined) {
|
||||
getContainer = options.getContainer
|
||||
}
|
||||
if (options.transitionName !== undefined) {
|
||||
transitionName = options.transitionName
|
||||
messageInstance = null // delete messageInstance for new transitionName
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
if (messageInstance) {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | 提示内容 | string\|vueNode \|function(h) | - |
|
||||
| duration | 自动关闭的延时，单位秒 | number | 3 |
|
||||
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | - |
|
||||
|
||||
还提供了全局配置和全局销毁方法：
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default {
|
|||
functional: true,
|
||||
render (h, context) {
|
||||
const { props } = context
|
||||
const { onCancel, onOk, close, zIndex, afterClose, visible } = props
|
||||
const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard } = props
|
||||
const iconType = props.iconType || 'question-circle'
|
||||
const okType = props.okType || 'primary'
|
||||
const prefixCls = props.prefixCls || 'ant-confirm'
|
||||
|
|
@ -50,6 +50,7 @@ export default {
|
|||
width={width}
|
||||
zIndex={zIndex}
|
||||
afterClose={afterClose}
|
||||
keyboard={keyboard}
|
||||
>
|
||||
<div class={`${prefixCls}-body-wrapper`}>
|
||||
<div class={`${prefixCls}-body`}>
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const modalProps = (defaultProps = {}) => {
|
|||
bodyStyle: PropTypes.object,
|
||||
maskStyle: PropTypes.object,
|
||||
mask: PropTypes.bool,
|
||||
keyboard: PropTypes.bool,
|
||||
}
|
||||
return initDefaultProps(props, defaultProps)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@
|
|||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
// create BFC to avoid
|
||||
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.@{confirm-prefix-cls}-content {
|
||||
|
|
@ -38,7 +42,6 @@
|
|||
font-size: 22px;
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@
|
|||
padding: 24px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
&-active {
|
||||
border-color: @primary-color;
|
||||
font-weight: 500;
|
||||
font-weight: @pagination-font-weight-active;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
|
|
|
|||
|
|
@ -42,12 +42,13 @@ export default {
|
|||
}),
|
||||
|
||||
render () {
|
||||
const props = getOptionProps(this)
|
||||
const {
|
||||
prefixCls, percent = 0, status, format, trailColor, size, successPercent,
|
||||
type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition,
|
||||
} = getOptionProps(this)
|
||||
const progressStatus = parseInt(percent.toString(), 10) >= 100 && !(status)
|
||||
? 'success' : (status || 'normal')
|
||||
} = props
|
||||
const progressStatus = parseInt((successPercent ? successPercent.toString() : percent.toString()), 10) >= 100 &&
|
||||
!('status' in props) ? 'success' : (status || 'normal')
|
||||
let progressInfo
|
||||
let progress
|
||||
const textFormatter = format || (percentNumber => `${percentNumber}%`)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
outline: none;
|
||||
|
||||
&-disabled &-star {
|
||||
cursor: not-allowed;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false |
|
||||
| maxTagCount | Max tag count to show | number | - |
|
||||
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - |
|
||||
| mode | Set mode of Select | 'multiple' \| 'tags' \| 'combobox' | - |
|
||||
| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' \| 'combobox' | 'default' |
|
||||
| notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' |
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
|
||||
| placeholder | Placeholder of select | string\|slot | - |
|
||||
| showSearch | Whether show search input in single mode. | boolean | false |
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true |
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false |
|
||||
| maxTagCount | 最多显示多少个 tag | number | - |
|
||||
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - |
|
||||
| mode | 设置 Select 的模式 | 'multiple' \| 'tags' \| 'combobox' | - |
|
||||
| mode | 设置 Select 的模式 | 'default' \| 'multiple' \| 'tags' \| 'combobox' | - |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' |
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
|
||||
|
|
|
|||
|
|
@ -489,6 +489,14 @@
|
|||
background-color: @item-hover-bg;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
font-family: anticon;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
text-align: center;
|
||||
background: transprent;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
&:before,
|
||||
&:after {
|
||||
left: 100%;
|
||||
margin-left: -12.5px;
|
||||
margin-left: @switch-sm-checked-margin-left;
|
||||
}
|
||||
|
||||
.@{switch-prefix-cls}-inner {
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
setSelectedRowKeys (selectedRowKeys, { selectWay, record, checked, changeRowKeys }) {
|
||||
setSelectedRowKeys (selectedRowKeys, { selectWay, record, checked, changeRowKeys, nativeEvent }) {
|
||||
const { rowSelection = {}} = this
|
||||
if (rowSelection && !('selectedRowKeys' in rowSelection)) {
|
||||
this.store.setState({ selectedRowKeys })
|
||||
|
|
@ -209,7 +209,7 @@ export default {
|
|||
rowSelection.onChange(selectedRowKeys, selectedRows)
|
||||
}
|
||||
if (selectWay === 'onSelect' && rowSelection.onSelect) {
|
||||
rowSelection.onSelect(record, checked, selectedRows)
|
||||
rowSelection.onSelect(record, checked, selectedRows, nativeEvent)
|
||||
} else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) {
|
||||
const changeRows = data.filter(
|
||||
(row, i) => changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0,
|
||||
|
|
@ -404,6 +404,7 @@ export default {
|
|||
|
||||
handleSelect (record, rowIndex, e) {
|
||||
const checked = e.target.checked
|
||||
const nativeEvent = e.nativeEvent
|
||||
const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection()
|
||||
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection)
|
||||
const key = this.getRecordKey(record, rowIndex)
|
||||
|
|
@ -419,11 +420,14 @@ export default {
|
|||
selectWay: 'onSelect',
|
||||
record,
|
||||
checked,
|
||||
changeRowKeys: void (0),
|
||||
nativeEvent,
|
||||
})
|
||||
},
|
||||
|
||||
handleRadioSelect (record, rowIndex, e) {
|
||||
const checked = e.target.checked
|
||||
const nativeEvent = e.nativeEvent
|
||||
const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection()
|
||||
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection)
|
||||
const key = this.getRecordKey(record, rowIndex)
|
||||
|
|
@ -435,6 +439,8 @@ export default {
|
|||
selectWay: 'onSelect',
|
||||
record,
|
||||
checked,
|
||||
changeRowKeys: void (0),
|
||||
nativeEvent,
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -601,6 +607,7 @@ export default {
|
|||
customRender: this.renderSelectionBox(rowSelection.type),
|
||||
className: selectionColumnClass,
|
||||
fixed: rowSelection.fixed,
|
||||
width: rowSelection.columnWidth,
|
||||
}
|
||||
if (rowSelection.type !== 'radio') {
|
||||
const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled)
|
||||
|
|
@ -705,7 +712,7 @@ export default {
|
|||
)
|
||||
}
|
||||
column.title = (
|
||||
<span>
|
||||
<span key={key}>
|
||||
{column.title}
|
||||
{sortButton}
|
||||
{filterDropdown}
|
||||
|
|
@ -735,7 +742,7 @@ export default {
|
|||
}))
|
||||
},
|
||||
|
||||
renderPagination () {
|
||||
renderPagination (paginationPosition) {
|
||||
// 强制不需要分页
|
||||
if (!this.hasPagination()) {
|
||||
return null
|
||||
|
|
@ -747,10 +754,11 @@ export default {
|
|||
} else if (this.size === 'middle' || this.size === 'small') {
|
||||
size = 'small'
|
||||
}
|
||||
const position = pagination.position || 'bottom'
|
||||
const total = pagination.total || this.getLocalData().length
|
||||
const { class: cls, style, onChange, onShowSizeChange, ...restProps } = pagination // eslint-disable-line
|
||||
const paginationProps = mergeProps({
|
||||
key: 'pagination',
|
||||
key: `pagination-${paginationPosition}`,
|
||||
class: classNames(cls, `${this.prefixCls}-pagination`),
|
||||
props: {
|
||||
...restProps,
|
||||
|
|
@ -764,7 +772,7 @@ export default {
|
|||
showSizeChange: this.handleShowSizeChange,
|
||||
},
|
||||
})
|
||||
return (total > 0) ? (
|
||||
return (total > 0 && (position === paginationPosition || position === 'both')) ? (
|
||||
<Pagination
|
||||
{...paginationProps}
|
||||
/>
|
||||
|
|
@ -966,8 +974,9 @@ export default {
|
|||
<Spin
|
||||
{...spinProps}
|
||||
>
|
||||
{this.renderPagination('top')}
|
||||
{table}
|
||||
{this.renderPagination()}
|
||||
{this.renderPagination('bottom')}
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<us>
|
||||
#### Fixed Columns
|
||||
To fix some columns and scroll inside other columns, and you must set `scoll.x` meanwhile.
|
||||
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
|
||||
> Specify the width of columns if header and cell do not align properly.
|
||||
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
|
||||
</us>
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ const columns = [{
|
|||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
| loading | Loading status of table | boolean\|[object](https://vuecomponent.github.io/ant-design/#/us/components/spin) | `false` |
|
||||
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' |
|
||||
| pagination | Pagination [config](https://vuecomponent.github.io/ant-design/#/us/components/pagination), hide it by setting it to `false` | object | |
|
||||
| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object | |
|
||||
| rowClassName | Row's className | Function(record, index):string | - |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | null |
|
||||
| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - |
|
||||
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for `x`, if you want to set it to `true`, you need to add style `.ant-table td { white-space: nowrap; }`. | { x: number \| true, y: number } | - |
|
||||
| showHeader | Whether to show table header | boolean | `true` |
|
||||
| size | Size of table | `default` \| `middle` \| `small` | `default` |
|
||||
| title | Table title renderer | Function(currentPageData)\|slot-scope | |
|
||||
|
|
@ -115,6 +115,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
|||
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
|
||||
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
|
||||
| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function(text, record, index) {}\|slot-scope | - |
|
||||
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
|
||||
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
|
||||
| title | Title of this column | string\|slot | - |
|
||||
|
|
@ -134,6 +135,17 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
|||
| title | Title of the column group | string\|slot | - |
|
||||
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - |
|
||||
|
||||
|
||||
### pagination
|
||||
|
||||
Properties for pagination.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
|
||||
|
||||
More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
|
||||
### rowSelection
|
||||
|
||||
Properties for row selection.
|
||||
|
|
@ -144,10 +156,11 @@ Properties for row selection.
|
|||
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
|
||||
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
|
||||
| selectedRowKeys | Controlled selected row keys | string\[] | \[] |
|
||||
| columnWidth | Set the width of the selection column | string\|number | - |
|
||||
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
|
||||
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
|
||||
| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
|
||||
| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows) | - |
|
||||
| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - |
|
||||
| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |
|
||||
| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |
|
||||
|
||||
|
|
|
|||
|
|
@ -49,11 +49,11 @@ const columns = [{
|
|||
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
|
||||
| loading | 页面是否加载中 | boolean\|[object](https://vuecomponent.github.io/ant-design/#/cn/components/spin) | false |
|
||||
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' |
|
||||
| pagination | 分页器，配置项参考 [pagination](https://vuecomponent.github.io/ant-design/#/cn/components/pagination)，设为 false 时不展示和进行分页 | object | |
|
||||
| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | |
|
||||
| rowClassName | 表格行的类名 | Function(record, index):string | - |
|
||||
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' |
|
||||
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - |
|
||||
| scroll | 设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 `x` 设置一个数字，如果要设置为 `true`，需要配合样式 `.ant-table td { white-space: nowrap; }` | { x: number \| true, y: number } | - |
|
||||
| showHeader | 是否显示表头 | boolean | true |
|
||||
| size | 正常或迷你类型，`default` or `small` | string | default |
|
||||
| title | 表格标题 | Function(currentPageData)\|slot-scope | |
|
||||
|
|
@ -116,6 +116,7 @@ const columns = [{
|
|||
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
|
||||
| key | Vue 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
|
||||
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {}\|slot-scope | - |
|
||||
| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
|
||||
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
|
||||
| title | 列头显示文字 | string\|slot | - |
|
||||
|
|
@ -134,6 +135,16 @@ const columns = [{
|
|||
| title | 列头显示文字 | string\|slot | - |
|
||||
| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { title: 'XXX'}` | object | - |
|
||||
|
||||
### pagination
|
||||
|
||||
分页的配置项。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
|
||||
|
||||
更多配置项，请查看 [`Pagination`](/components/pagination/)。
|
||||
|
||||
### rowSelection
|
||||
|
||||
选择功能的配置。
|
||||
|
|
@ -144,10 +155,11 @@ const columns = [{
|
|||
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
|
||||
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
|
||||
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
|
||||
| columnWidth | 自定义列表选择框宽度 | string\|number | - |
|
||||
| selections | 自定义选择项, 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
|
||||
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
|
||||
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
|
||||
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
|
||||
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows, nativeEvent) | - |
|
||||
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
|
||||
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export const ColumnProps = {
|
|||
customRender: PropTypes.func,
|
||||
customCell: PropTypes.func,
|
||||
customHeaderCell: PropTypes.func,
|
||||
align: PropTypes.oneOf(['left', 'right', 'center']),
|
||||
filters: PropTypes.arrayOf(ColumnFilterItem),
|
||||
// onFilter: (value: any, record: T) => PropTypes.bool,
|
||||
filterMultiple: PropTypes.bool,
|
||||
|
|
@ -78,13 +79,20 @@ export const TableRowSelection = {
|
|||
selections: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
|
||||
hideDefaultSelections: PropTypes.bool,
|
||||
fixed: PropTypes.bool,
|
||||
columnWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
}
|
||||
|
||||
export const TableProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
dropdownPrefixCls: PropTypes.string,
|
||||
rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, null]),
|
||||
pagination: PropTypes.oneOfType([PropTypes.shape(PaginationProps).loose, PropTypes.bool]),
|
||||
pagination: PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
...PaginationProps,
|
||||
position: PropTypes.oneOf(['top', 'bottom', 'both']),
|
||||
}).loose,
|
||||
PropTypes.bool,
|
||||
]),
|
||||
size: PropTypes.oneOf(['default', 'middle', 'small', 'large']),
|
||||
dataSource: PropTypes.array,
|
||||
components: PropTypes.object,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.@{table-prefix-cls} {
|
||||
.reset-component;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
clear: both;
|
||||
|
||||
&-body {
|
||||
transition: opacity .3s;
|
||||
|
|
@ -69,6 +69,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-thead > tr:first-child > th {
|
||||
&:first-child {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-tbody > tr > td {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
transition: all .3s;
|
||||
|
|
@ -129,7 +139,8 @@
|
|||
overflow: hidden;
|
||||
.@{table-prefix-cls}-bordered & {
|
||||
&,
|
||||
table {
|
||||
table,
|
||||
.@{table-prefix-cls}-thead > tr:first-child > th {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -247,11 +258,11 @@
|
|||
}
|
||||
|
||||
&-up:after {
|
||||
bottom: -2px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&-down:after {
|
||||
top: 2px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-caret-up,
|
||||
|
|
@ -260,6 +271,15 @@
|
|||
line-height: 4px;
|
||||
height: 4px;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-down {
|
||||
margin-top: 1.5px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-caret-down {
|
||||
top: -1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -467,7 +487,7 @@
|
|||
tr&-expanded-row {
|
||||
&,
|
||||
&:hover {
|
||||
background: #fbfbfb;
|
||||
background: @table-expanded-row-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -479,7 +499,6 @@
|
|||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
table {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -539,6 +558,9 @@
|
|||
table {
|
||||
border-radius: @border-radius-base 0 0 0;
|
||||
}
|
||||
.ant-table-thead > tr > th:last-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-fixed-right {
|
||||
|
|
@ -554,6 +576,9 @@
|
|||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ant-table-thead > tr > th:first-child {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&&-scroll-position-left &-fixed-left {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
|
||||
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
|
||||
| hourStep | interval between hours in picker | number | 1 |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |
|
||||
| minuteStep | interval between minutes in picker | number | 1 |
|
||||
| open(.sync) | whether to popup panel | boolean | false |
|
||||
| placeholder | display when there's no value | string | "Select a time" |
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'
|
|||
import defaultLocale from './locale/en_US'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import interopDefault from '../_util/interopDefault'
|
||||
import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
|
||||
|
||||
export function generateShowHourMinuteSecond (format) {
|
||||
|
|
@ -47,6 +48,7 @@ export const TimePickerProps = () => ({
|
|||
minuteStep: PropTypes.number,
|
||||
secondStep: PropTypes.number,
|
||||
allowEmpty: PropTypes.bool,
|
||||
inputReadOnly: PropTypes.bool,
|
||||
clearText: PropTypes.string,
|
||||
defaultOpenValue: PropTypes.object,
|
||||
popupClassName: PropTypes.string,
|
||||
|
|
@ -77,7 +79,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
const value = this.value || this.defaultValue
|
||||
if (value && !moment.isMoment(value)) {
|
||||
if (value && !interopDefault(moment).isMoment(value)) {
|
||||
throw new Error(
|
||||
'The value/defaultValue of TimePicker must be a moment object, ',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
|
||||
| hourStep | 小时选项间隔 | number | 1 |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘）| boolean | false |
|
||||
| minuteStep | 分钟选项间隔 | number | 1 |
|
||||
| open(.sync) | 面板是否打开 | boolean | false |
|
||||
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
const locale = {
|
||||
placeholder: 'Izberite čas',
|
||||
}
|
||||
|
||||
export default locale
|
||||
|
|
@ -7,9 +7,9 @@ import Icon from '../icon'
|
|||
|
||||
export const TimelineProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
/** 指定最后一个幽灵节点是否存在或内容 */
|
||||
pending: PropTypes.any,
|
||||
pendingDot: PropTypes.string,
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -19,6 +19,7 @@ export default {
|
|||
}),
|
||||
render () {
|
||||
const { prefixCls, ...restProps } = getOptionProps(this)
|
||||
const pendingDot = getComponentFromProp(this, 'pendingDot')
|
||||
const pending = getComponentFromProp(this, 'pending')
|
||||
const pendingNode = typeof pending === 'boolean' ? null : pending
|
||||
const classString = classNames(prefixCls, {
|
||||
|
|
@ -37,6 +38,9 @@ export default {
|
|||
<TimelineItem
|
||||
pending={!!pending}
|
||||
>
|
||||
<template slot='dot'>
|
||||
{pendingDot || <Icon type='loading' />}
|
||||
</template>
|
||||
<Icon slot='dot' type='loading' />
|
||||
{pendingNode}
|
||||
</TimelineItem>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<cn>
|
||||
#### 最后一个
|
||||
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点。（用于时间正序排列）
|
||||
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点（用于时间正序排列）。当 pending 值为 false ，可用定制元件替换默认时间图点。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Last node
|
||||
When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`. Used in ascend chronological order.
|
||||
When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a VNode Element}` or `slot="pending"`. Used in ascend chronological order. When `pending` is not false, set `pendingDot={a VNode Element}` or `slot="pendingDot"` to replace the default pending dot.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ Timeline
|
|||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` |
|
||||
| pendingDot | Set the dot of the last ghost node when pending is true | \|string\|slot | `<Icon type="loading" />` |
|
||||
|
||||
### Timeline.Item
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false |
|
||||
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|slot | `<Icon type="loading" />` |
|
||||
|
||||
### Timeline.Item
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
border: 0;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
padding: 3px 0;
|
||||
padding: 3px 1px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import PropTypes from '../_util/vue-types'
|
||||
const triggerType = PropTypes.oneOf(['hover', 'focus', 'click'])
|
||||
const triggerType = PropTypes.oneOf(['hover', 'focus', 'click', 'contextmenu'])
|
||||
export default () => ({
|
||||
trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]).def('hover'),
|
||||
visible: PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
|||
| overlayClassName | Class name of the tooltip card | string | - |
|
||||
| overlayStyle | Style of the tooltip card | object | - |
|
||||
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
|
||||
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` | `hover` |
|
||||
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextmenu` | `hover` |
|
||||
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
|
||||
|
||||
### events
|
||||
|
|
|
|||
|
|
@ -19,9 +19,8 @@
|
|||
| overlayClassName | 卡片类名 | string | 无 |
|
||||
| overlayStyle | 卡片样式 | object | 无 |
|
||||
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
|
||||
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
|
||||
| trigger | 触发行为，可选 `hover/focus/click/contextmenu` | string | hover |
|
||||
| visible | 用于手动控制浮层显隐 | boolean | false |
|
||||
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -53,9 +53,11 @@ export default {
|
|||
`not have usTitle`,
|
||||
)
|
||||
}
|
||||
const id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
|
||||
let id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
|
||||
|
||||
if (this._store.store) {
|
||||
const { currentSubMenu } = this._store.store.getState()
|
||||
id = `${id}-${currentSubMenu.length + 1}`
|
||||
this._store.store.setState({ currentSubMenu: [...currentSubMenu, { cnTitle, usTitle, id }] })
|
||||
}
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue