mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-31 14:20:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(dynamic-input): support no item

Browse Source
This commit is contained in:
07akioni 2020-11-06 16:22:05 +08:00
parent 8fa21fe818
commit 2cab8b2efa
11 changed files with 160 additions and 120 deletions

5
demo/documentation/components/dynamic-input/enUS/custom.demo.md

@ -3,7 +3,6 @@
<n-dynamic-input
v-model:value="customValue"
:on-create="onCreate"
:on-clear="onClear"
>
<template v-slot="{ value }">
<div style="width: 100%;">
@ -13,11 +12,11 @@
style="margin-right: 12px;"
/>
<n-input-number
v-model:checked="value.num"
v-model:value="value.num"
style="margin-right: 12px; width: 160px;"
/>
<n-input
v-model:checked="value.string"
v-model:value="value.string"
type="input"
/>
</div>

18
demo/documentation/components/dynamic-input/enUS/form.demo.md

@ -11,7 +11,6 @@
v-model:value="model.dynamicInputValue"
key-field="key"
:on-create="onCreate"
:on-clear="onClear"
>
<template v-slot="{ index, value }">
<div style="display: flex;">
@ -82,23 +81,6 @@ export default {
/** Generate a key to make the verification information will not be misplaced */
key: Math.random().toString(16).slice(2, 10)
}
},
/**
* Since clearing the content of input is an external action, input does not
* emit events, form-item cannot get events emitted from input.
* Therefore, in order to verify the results are synchronized with the
* displayed values, manual verification is required. `$nextTick` is used
* since the empty value will be set after the function is returned.
*/
onClear () {
this.$nextTick().then(
() => this.$refs.form.validate()
)
return {
name: '',
value: '',
key: 0
}
}
}
}

2
demo/documentation/components/dynamic-input/enUS/index.demo-entry.md

@ -17,11 +17,11 @@ form
|Name|Type|Default|Description|
|-|-|-|-|
|key-field|`string`|`undefined`||
|min|`number`|`0`|Min number of items.|
|max|`number`|`undefined`|Max number of items.|
|preset|`'input' \| 'preset'`|`'input'`|The preset of `n-dynamic-input`, it work when `$slots.default` is not set.|
|value|`Array`|-|**required**|
|on-create|`(index: number) => any`|`undefined`|The callback when click at the add button. If set, the return value will be used as the initial value of the new item. `index` is the the new item's corresponding index in the value array, which starts from 1 (the second item).|
|on-clear|`() => any`|`undefined`|The callback when clear the last one item. If set, the return value will be used as the value after the last item is cleared. If item content item is custom and `on-clear` is not set, the last item will not be allowed to be cleared.|
### Dynamic Input Props (Input Preset)
|Name|Type|Default|Description|

12
demo/documentation/components/dynamic-input/zhCN/custom.demo.md

@ -3,7 +3,6 @@
<n-dynamic-input
v-model:value="customValue"
:on-create="onCreate"
:on-clear="onClear"
>
<template v-slot="{ value }">
<div style="width: 100%;">
@ -13,11 +12,11 @@
style="margin-right: 12px;"
/>
<n-input-number
v-model:checked="value.num"
v-model:value="value.num"
style="margin-right: 12px; width: 160px;"
/>
<n-input
v-model:checked="value.string"
v-model:value="value.string"
type="input"
/>
</div>
@ -48,13 +47,6 @@ export default {
num: 1,
string: '一个字符串'
}
},
onClear () {
return {
isCheck: false,
num: 0,
string: ''
}
}
}
}

16
demo/documentation/components/dynamic-input/zhCN/form.demo.md

@ -10,7 +10,6 @@
v-model:value="model.dynamicInputValue"
key-field="key"
:on-create="onCreate"
:on-clear="onClear"
>
<template v-slot="{ index, value }">
<div style="display: flex;">
@ -79,21 +78,6 @@ export default {
/** 生成 key ，目的是让这个值对应的表项的验证信息不错位 */
key: Math.random().toString(16).slice(2, 10)
}
},
/**
* 由于清除 input 的内容是个外部行为，input 不会发出事件，所以 form-item 无法得到从
* input 发出的事件。于是为了验证结果和显示的值同步，需要手动验证。使用 $nextTick 是因
* 为这个函数结束后，新的值才会被设定，需要等下个tick 才能验证新的结果
*/
onClear () {
this.$nextTick().then(
() => this.$refs.form.validate()
)
return {
name: '',
value: '',
key: 0
}
}
}
}

2
demo/documentation/components/dynamic-input/zhCN/index.demo-entry.md

@ -17,11 +17,11 @@ form
|名称|类型|默认值|说明|
|-|-|-|-|
|key-field|`string`|`undefined`||
|min|`number`|`0`|最少有几项内容|
|max|`number`|`undefined`|最多有几项内容|
|preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设，在不设定 `$slots.default` 的时候生效。|
|value|`Array<any>`|required||
|on-create|`(index: number) => any`|`undefined`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算。|
|on-clear|`() => any`|`undefined`|点击清空最后一项时的回调，如果设定则返回值会被用作为最后一项清空后的值, 如果是自定义内容并且没有设定该属性，则最后一项不会被清空。|
|on-remove|`() => any`|`undefined`||
|on-update:value|`(value: any) => any`|`undefined`||

211
src/dynamic-input/src/DynamicInput.vue

@ -1,9 +1,22 @@
<template>
<div class="n-dynamic-input">
<n-button
v-if="!mergedValue || mergedValue.length === 0"
block
ghost
dashed
@click="handleCreateClick"
>
<template #icon>
<add-icon />
</template>
{{ localeNs.create }}
</n-button>
<div
v-for="(_, index) in value"
:key="keyField ? _[keyField] : index"
:data-key="keyField ? _[keyField] : index"
v-else
:key="keyField ? _[keyField] : ensureKey(_, index)"
:data-key="keyField ? _[keyField] : ensureKey(_, index)"
class="n-dynamic-input-item"
>
<slot v-if="$slots.default" :value="value[index]" :index="index" />
@ -26,19 +39,21 @@
<n-button
v-if="!removeDisabled"
circle
@click="remove($event, index)"
@click="remove(index)"
>
{{ index }}
<template #icon>
<md-remove />
<remove-icon />
</template>
</n-button>
<n-button
:disabled="insertionDisabled"
circle
@click="createItem($event, index)"
@click="createItem(index)"
>
{{ index }}
<template #icon>
<md-add />
<add-icon />
</template>
</n-button>
</n-button-group>
@ -48,21 +63,27 @@
</template>
<script>
/* eslint-disable vue/no-mutating-props */
import { ref, toRef, isProxy, toRaw } from 'vue'
import NButton from '../../button'
import NButtonGroup from '../../button-group'
import {
MdAdd,
MdRemove
} from 'vicons/ionicons-v4'
RemoveOutline as RemoveIcon,
AddOutline as AddIcon
} from 'vicons/ionicons-v5'
import NDynamicInputInputPreset from './InputPreset.vue'
import NDynamicInputPairPreset from './PairPreset.vue'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import usecssr from '../../_mixins/usecssr'
import styles from './styles/index'
import { warn } from '../../_utils/naive'
import { call } from '../../_utils/vue'
import {
configurable,
themeable,
usecssr,
asformitem,
locale
} from '../../_mixins'
import styles from './styles'
import { warn, call, createId } from '../../_utils'
import { useMergedState } from 'vooks'
const globalDataKeyMap = new WeakMap()
export default {
name: 'DynamicInput',
@ -71,12 +92,14 @@ export default {
NDynamicInputPairPreset,
NButtonGroup,
NButton,
MdAdd,
MdRemove
AddIcon,
RemoveIcon
},
mixins: [
withapp,
configurable,
themeable,
locale('DynamicInput'),
asformitem(),
usecssr(styles)
],
provide () {
@ -89,11 +112,21 @@ export default {
type: Number,
default: undefined
},
min: {
type: Number,
default: 0
},
value: {
validator (value) {
return Array.isArray(value) && value.length
return Array.isArray(value) || value === null
},
required: true
default: undefined
},
defaultValue: {
validator (value) {
return Array.isArray(value)
},
default: []
},
preset: {
validator (value) {
@ -105,7 +138,7 @@ export default {
type: String,
default: null
},
/** for preset pair */
// for preset pair
keyPlaceholder: {
type: String,
default: ''
@ -114,7 +147,7 @@ export default {
type: String,
default: ''
},
/** for preset input */
// for preset input
placeholder: {
type: String,
default: ''
@ -127,16 +160,19 @@ export default {
type: Function,
default: undefined
},
onClear: {
type: Function,
default: undefined
},
// eslint-disable-next-line vue/prop-name-casing
'onUpdate:value': {
type: [Function, Array],
default: undefined
},
// deprecated
onClear: {
validator () {
warn('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.')
return true
},
default: undefined
},
onInput: {
validator () {
if (__DEV__) warn('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.')
@ -145,78 +181,113 @@ export default {
default: undefined
}
},
data () {
setup (props) {
const uncontrolledValueRef = ref(props.value)
const controlledValueRef = toRef(props, 'value')
return {
NFormItem: null // useless code, for debug
uncontrolledValue: uncontrolledValueRef,
mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
dataKeyMap: globalDataKeyMap
}
},
computed: {
insertionDisabled () {
return this.max !== null && this.value.length >= this.max
const { mergedValue } = this
if (Array.isArray(mergedValue)) {
const { max } = this
return max !== undefined && mergedValue.length >= max
}
return false
},
removeDisabled (index) {
return this.value.length === 1 && !this.onClear
removeDisabled () {
const { mergedValue } = this
if (Array.isArray(mergedValue)) return mergedValue.length <= this.min
return true
}
},
methods: {
doInput (value) {
doUpdateValue (value) {
const {
onInput,
'onUpdate:value': onUpdateValue
} = this
if (onInput) call(onInput, value)
if (onUpdateValue) call(onUpdateValue, value)
this.uncontrolledValue = value
},
ensureKey (value, index) {
if (value === undefined || value === null) return index
if (typeof value !== 'object') return index
const {
dataKeyMap
} = this
const rawValue = isProxy(value) ? toRaw(value) : value
let key = dataKeyMap.get(rawValue)
if (key === undefined) {
dataKeyMap.set(rawValue, key = createId())
}
return key
},
handleValueChange (index, value) {
this.value[index] = value
const {
mergedValue
} = this
const newValue = Array.from(mergedValue ?? [])
const originalItem = newValue[index]
newValue[index] = value
const {
dataKeyMap
} = this
// update dataKeyMap
if (
originalItem && value && typeof originalItem === 'object' && typeof value === 'object'
) {
const rawOriginal = isProxy(originalItem) ? toRaw(originalItem) : originalItem
const rawNew = isProxy(value) ? toRaw(value) : value
// inherit key is value position is not change
const originalKey = dataKeyMap.get(rawOriginal)
if (originalKey !== undefined) {
dataKeyMap.set(rawNew, originalKey)
}
}
this.doUpdateValue(newValue)
},
createItem (e, index) {
const { onCreate } = this
handleCreateClick () {
this.createItem(0)
},
createItem (index) {
const { onCreate, mergedValue } = this
const newValue = Array.from(mergedValue ?? [])
if (onCreate) {
this.value.splice(index + 1, 0, onCreate(index + 1))
newValue.splice(index + 1, 0, onCreate(index + 1))
this.doUpdateValue(newValue)
} else if (this.$slots.default) {
this.value.splice(index + 1, 0, null)
newValue.splice(index + 1, 0, null)
this.doUpdateValue(newValue)
} else {
switch (this.preset) {
case 'input':
this.value.splice(index + 1, 0, null)
newValue.splice(index + 1, 0, '')
this.doUpdateValue(newValue)
break
case 'pair':
this.value.splice(index + 1, 0, { key: null, value: null })
newValue.splice(index + 1, 0, { key: '', value: '' })
this.doUpdateValue(newValue)
break
}
}
},
remove (e, index) {
if (this.value.length === 1) {
const onClear = this.onClear
if (onClear) {
const keyField = this.keyField
if (keyField) {
const memorizedKeyField = this.value[0][keyField]
this.doInput([Object.assign(onClear(), {
[keyField]: memorizedKeyField
})])
} else {
this.doInput([onClear()])
}
} else {
switch (this.preset) {
case 'input':
this.doInput([null])
break
case 'pair':
this.doInput([{ key: null, value: null }])
break
}
}
} else {
const changedValue = Array.from(this.value)
changedValue.splice(index, 1)
this.doInput(changedValue)
const { onRemove } = this
if (onRemove) onRemove(index)
}
remove (index) {
const { mergedValue } = this
if (!Array.isArray(mergedValue)) return
const { min } = this
if (mergedValue.length <= min) return
const newValue = Array.from(mergedValue)
newValue.splice(index, 1)
this.doUpdateValue(newValue)
const { onRemove } = this
if (onRemove) onRemove(index)
}
}
}

2
src/dynamic-input/src/styles/themed-base.cssr.js

@ -66,7 +66,7 @@ export default c([
}, [
cB('form-item-blank', {
raw: `
padding: 0 !important;
padding-top: 0 !important;
`
})
])

3
src/locale/enUS.js

@ -82,5 +82,8 @@ export default {
},
InputNumber: {
placeholder: 'Please Input'
},
DynamicInput: {
create: 'Create'
}
}

3
src/locale/zhCN.js

@ -82,5 +82,8 @@ export default {
},
InputNumber: {
placeholder: '请输入'
},
DynamicInput: {
create: '添加'
}
}

6
vue3.md

@ -126,8 +126,11 @@
- [x] dynamic-input
- break
- `v-model` => `v-model:value`
- `on-clear` is removed
- deprecate
- `on-input` => `on-update:value`
- new
- `min`
- [x] dynamic-tags
- break
- `v-model` => `v-model:value`
@ -314,7 +317,10 @@
- [x] log scrollTo 有点问题
- [x] remove hollowoutable
- [ ] styleScheme
- [ ] use-global-style
- [ ] dynamic-input, no value
## Info
https://github.com/vuejs/vue-next/issues/2549
last cherry-picked commit: 6560ae34d71b81d584af79f810cb9dfa87119d1a