mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(input-key-value-pairs): custom input

Browse Source
This commit is contained in:
07akioni 2019-10-23 23:08:29 +08:00
parent 7f03c26569
commit b4d8169035
18 changed files with 114 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo/demo.vue
View File

@ -128,6 +128,10 @@ export default {
name: 'Confirm',
path: `/${this.lang}/${this.theme}` + '/n-confirm'
},
{
name: 'CustomInput',
path: `/${this.lang}/${this.theme}` + '/n-custom-input'
},
{
name: 'DatePicker',
path: `/${this.lang}/${this.theme}` + '/n-date-picker'
@ -165,10 +169,6 @@ export default {
name: 'InputNumber',
path: `/${this.lang}/${this.theme}` + '/n-input-number'
},
{
name: 'InputKeyValuePairs',
path: `/${this.lang}/${this.theme}` + '/n-InputKeyValuePairs'
},
{
name: 'LoadingBar',
path: `/${this.lang}/${this.theme}` + '/n-loading-bar'

16
demo/documentation/components/icon/enUS/basic.md Normal file
View File

@ -0,0 +1,16 @@
# Basic
```html
<n-icon
type="ios-contacts"
size="40"
/>
<n-icon
type="md-contacts"
size="40"
/>
<n-icon
type="md-cash"
size="40"
color="#000000"
/>
```

4
demo/documentation/components/icon/enUS/index.md Normal file
View File

@ -0,0 +1,4 @@
# Icon
```demo
basic
```

0
demo/documentation/components/icon/index.entry Normal file
View File

0
demo/documentation/components/icon/zhCN/index.md Normal file
View File

77
demo/documentation/components/iconDemo.vue
View File

@ -1,77 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Icon / n-icon
</n-gradient-text>
</div>
<div class="n-doc-body">
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div class="n-doc-section__view">
<n-icon
type="ios-contacts"
size="40"
/>
<n-icon
type="md-contacts"
size="40"
/>
<n-icon
type="md-cash"
size="40"
color="#000000"
/>
</div>
<div class="n-doc-section__source">
<textarea>
/**
* If you don't specify its size, it will inherit font-size from its parent element
*/
<n-icon
type="ios-contacts"
size="40"
/>
<n-icon
type="md-contacts"
size="40"
/>
<n-icon
type="md-cash"
size="40"
color="#000000"
/>
</textarea>
</div>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Note
</div>
<textarea>
Type of Icon: See "https://ionicons.com/" Ionicons.
If you use ios icon, type will be ios-***.
If you use material icon, type will be md-***</textarea>
</div>
</div>
</template>
<script>
import docCodeEditorMixin from './docCodeEditorMixin'
export default {
mixins: [docCodeEditorMixin],
data () {
return {
}
},
methods: {
}
}
</script>

53
demo/documentation/components/inputKeyValuePairsDemo/customInputKeyValuePairs.demo.vue
View File

@ -1,53 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Custom Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-input-key-value-pairs
v-model="test1"
title="Add CheckBox"
>
<template v-slot="slotProps">
<div style="width:100%">
<n-checkbox
v-model="slotProps.item.isCheck"
style="width: 120px;"
/>
<n-input-number
v-model="slotProps.item.num"
/>
<n-input
v-model="slotProps.item.string"
type="input"
size="small"
/>
</div>
</template>
</n-input-key-value-pairs>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">v-model: {{ test1 }}</pre>
<pre>
<!--SOURCE-->
</pre>
</div>
</template>
<script>
export default {
data () {
return {
test1: [
{
isCheck: true
}
]
}
}
}
</script>

78
demo/documentation/components/inputKeyValuePairsDemo/index.vue
View File

@ -1,78 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
InputKeyValuePairs / n-input-key-value-pairs
</n-gradient-text>
</div>
<div
class="n-doc-body"
>
<input-key-value-pairs />
<custom-input-key-value-pairs />
</div>
</div>
</template>
<script>
import inputKeyValuePairs from './inputKeyValuePairs.demo.vue'
import customInputKeyValuePairs from './customInputKeyValuePairs.demo.vue'
export default {
components: {
inputKeyValuePairs,
customInputKeyValuePairs
},
data () {
return {
selectedValue: null,
selectedArray: [],
items: [
{
label: 'ArtifactoryLabel',
value: 'Artifactory'
},
{
label: 'Registry',
value: 'Registry'
},
{
label: 'Public',
value: 'Public'
},
{
label: 'Custom',
value: 'Custom'
}
],
items2: [
{
label: 'Drive My Car',
children: [
{
label: 'test1',
value: 'test1'
},
{
label: 'test2',
value: 'test2'
}
]
}
]
}
},
methods: {
handleChange (newValue) {
alert(String(newValue))
},
handleChange2 (newValue) {
alert(JSON.stringify(newValue))
}
}
}
</script>

39
demo/documentation/components/inputKeyValuePairsDemo/inputKeyValuePairs.demo.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Default Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-input-key-value-pairs
v-model="test1"
placeholder-key="placeholder1"
placeholder-value="placeholder2"
/>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">v-model: {{ test1 }}</pre>
<pre>
<!--SOURCE-->
</pre>
</div>
</template>
<script>
export default {
data () {
return {
test1: [
{
key: 'key1',
value: 'value1'
},
{}
]
}
}
}
</script>

23
demo/documentation/components/inputPairs/enUS/basic.md Normal file
View File

@ -0,0 +1,23 @@
# Basic
```html
<n-custom-input
v-model="test1"
placeholder-key="placeholder1"
placeholder-value="placeholder2"
/>
```
```js
export default {
data () {
return {
test1: [
{
key: 'key1',
value: 'value1'
},
{}
]
}
}
}
```

37
demo/documentation/components/inputPairs/enUS/custom.md Normal file
View File

@ -0,0 +1,37 @@
# Custom
```html
<n-custom-input
v-model="test1"
title="Add CheckBox"
>
<template v-slot="slotProps">
<div style="width:100%">
<n-checkbox
v-model="slotProps.item.isCheck"
style="width: 120px;"
/>
<n-input-number
v-model="slotProps.item.num"
/>
<n-input
v-model="slotProps.item.string"
type="input"
size="small"
/>
</div>
</template>
</n-custom-input>
```
```js
export default {
data () {
return {
test1: [
{
isCheck: true
}
]
}
}
}
```

5
demo/documentation/components/inputPairs/enUS/index.md Normal file
View File

@ -0,0 +1,5 @@
# Custom Input
```demo
basic
custom
```

0
demo/documentation/components/inputPairs/index.entry Normal file
View File

0
demo/documentation/components/inputPairs/zhCN/index.md Normal file
View File

8
demo/init.js
View File

@ -16,14 +16,14 @@ import status from './documentation/intro/status'
import nimbusServiceLayoutDemo from './documentation/components/nimbusServiceLayoutDemo'
import homeDemo from './documentation/components/homeDemo'
import gradientText from './documentation/components/gradientText'
import iconDemo from './documentation/components/iconDemo'
import icon from './documentation/components/icon'
import checkbox from './documentation/components/checkbox'
import button from './documentation/components/button'
import switchDemo from './documentation/components/switch'
import input from './documentation/components/input'
import select from './documentation/components/select'
import cascader from './documentation/components/cascader'
import inputKeyValuePairsDemo from './documentation/components/inputKeyValuePairsDemo'
import inputPairs from './documentation/components/inputPairs'
import modal from './documentation/components/modal'
import nimbusFormCardDemo from './documentation/components/nimbusFormCardDemo'
import message from './documentation/components/message'
@ -130,7 +130,7 @@ const routes = [
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
{ path: '/n-nimbus-home-layout', component: homeDemo },
{ path: '/n-gradient-text', component: gradientText },
{ path: '/n-icon', component: iconDemo },
{ path: '/n-icon', component: icon },
{ path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button },
{ path: '/n-switch', component: switchDemo },
@ -139,7 +139,7 @@ const routes = [
{ path: '/n-input', component: input },
{ path: '/n-select', component: select },
{ path: '/n-cascader', component: cascader },
{ path: '/n-InputKeyValuePairs', component: inputKeyValuePairsDemo },
{ path: '/n-custom-input', component: inputPairs },
{ path: '/n-modal', component: modal },
{ path: '/n-nimbus-form-card', component: nimbusFormCardDemo },
{ path: '/n-message', component: message },

1
packages/common/InputKeyValuePairs/index.js
View File

@ -3,6 +3,7 @@ import InputKeyValuePairs from './src/main.vue'
InputKeyValuePairs.install = function (Vue) {
Vue.component(InputKeyValuePairs.name, InputKeyValuePairs)
Vue.component('NInputKeyValuePairs', InputKeyValuePairs)
}
export default InputKeyValuePairs

37
packages/common/InputKeyValuePairs/src/main.vue
View File

@ -35,21 +35,18 @@
</div>
<div class="n-input-key-value__item--action">
<!-- <span> -->
<n-icon
class="n-input-key-value__item--action--icon"
type="md-remove-circle"
size="30"
color="#C0818B"
@click="remove(index)"
/>
<n-icon
v-if="index==value.length-1"
class="n-input-key-value__item--action--icon"
type="md-add-circle"
size="30"
color="#4DB199"
@click="add"
/>
<n-button-group>
<n-button
icon="md-remove"
circle
@click="remove(index)"
/>
<n-button
icon="md-add"
circle
@click="add"
/>
</n-button-group>
<!-- </span> -->
</div>
</div>
@ -60,12 +57,14 @@
</template>
<script>
import NButton from '../../Button'
import NButtonGroup from '../../Button/src/ButtonGroup'
export default {
name: 'NInputKeyValuePairs',
model: {
prop: 'value',
event: 'input'
name: 'NCustomInput',
components: {
NButtonGroup,
NButton
},
props: {
value: {

4
styles/Button.scss
View File

@ -245,12 +245,12 @@
position: relative;
@include not-m(vertical) {
@include b(button) {
&:first-child {
&:first-child:not(:last-child) {
margin-right: 0!important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
&:last-child:not(:first-child) {
margin-left: 0!important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;