mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix the code format

Browse Source
This commit is contained in:
mangogan 2019-07-24 16:56:04 +08:00
parent a64a37850a
commit 733a09cc6a
5 changed files with 375 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

496
demo/components/formDemo.vue
View File

@ -1,13 +1,23 @@
<template>
<div ref="doc" class="n-doc">
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">Form / n-form</n-gradient-text>
<n-gradient-text :font-size="20">
Form / n-form
</n-gradient-text>
</div>
<div class="n-doc-body">
<div class="n-doc-section">
<div class="n-doc-section__header">Inline Form</div>
<div class="n-doc-section__header">
Inline Form
</div>
<div class="n-doc-section__view">
<n-form inline :label-width="80">
<n-form
inline
:label-width="80"
>
<n-form-item label="name">
<n-input placeholder="Input your name" />
</n-form-item>
@ -21,7 +31,8 @@
</div>
<div class="n-doc-section__source">
<textarea>
<n-form inline :label-width="80">
<n-form inline
:label-width="80">
<n-form-item :model="form" label="name">
<n-input v-model="form.name" placeholder="Input your name" />
</n-form-item>
@ -42,40 +53,59 @@
phone: ''
}
}
}
}
}
</script>
</textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">Form Item</div>
<div class="n-doc-section__header">
Form Item
</div>
<div class="n-doc-section__view">
<n-form :model="form" disabled>
<n-form-item label="Input">
<n-input v-model="form.input" placeholder="Enter sth" />
</n-form-item>
<n-form-item label="Select">
<n-select size="small" v-model="form.select"
placeholder="Please Select Type" :items="items" />
</n-form-item>
<n-form-item label="Switch">
<n-switch v-model="form.switch" />
</n-form-item>
<n-form-item label="DatePicker">
<n-date-picker v-model="form.dateTimeTimestamp"
type="datetime" />
</n-form-item>
<n-form-item label="Switch">
<n-radio v-model="form.radio" value="Definitely Maybe">
Definitely Maybe</n-radio>
<n-radio v-model="form.radio" value="Be Here Now">
Be Here Now</n-radio>
</n-form-item>
<n-form-item>
<n-button>Submit</n-button>
<n-button>Cancel</n-button>
</n-form-item>
<n-form :model="form">
<n-form-item label="Input">
<n-input
v-model="form.input"
placeholder="Enter sth"
/>
</n-form-item>
<n-form-item label="Select">
<n-select
v-model="form.select"
size="small"
placeholder="Please Select Type"
:items="items"
/>
</n-form-item>
<n-form-item label="Switch">
<n-switch v-model="form.switch" />
</n-form-item>
<n-form-item label="DatePicker">
<n-date-picker
v-model="form.dateTimeTimestamp"
type="datetime"
/>
</n-form-item>
<n-form-item label="Switch">
<n-radio
v-model="form.radio"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model="form.radio"
value="Be Here Now"
>
Be Here Now
</n-radio>
</n-form-item>
<n-form-item>
<n-button>Submit</n-button>
<n-button>Cancel</n-button>
</n-form-item>
</n-form>
</div>
<div class="n-doc-section__source">
@ -85,7 +115,7 @@
<n-input v-model="form.input" placeholder="Enter sth" />
</n-form-item>
<n-form-item label="Select">
<n-select size="small" v-model="form.select"
<n-select size="small" v-model="form.select"
placeholder="Please Select Type" :items="items" />
</n-form-item>
<n-form-item label="Switch">
@ -139,37 +169,51 @@
}
}
</script>
</textarea>
</div>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">Form of Label Position</div>
<div class="n-doc-section__header">
Form of Label Position
</div>
<div class="n-doc-section__view">
<n-form
:label-width="200"
label-position="top"
>
<n-form-item label="Top1">
<n-input/>
<n-input />
</n-form-item>
<n-form-item label="Top2">
<n-input/>
<n-input />
</n-form-item>
<n-form-item label-position="left" label="Left">
<n-input/>
<n-form-item
label-position="left"
label="Left"
>
<n-input />
</n-form-item>
<n-form-item label-position="center" label="Center">
<n-input/>
<n-form-item
label-position="center"
label="Center"
>
<n-input />
</n-form-item>
<n-form-item label-position="right" label="Right">
<n-input/>
<n-form-item
label-position="right"
label="Right"
>
<n-input />
</n-form-item>
<n-form-item>
<n-button>Submit</n-button>
<n-button>Cancel</n-button>
</n-form-item>
<n-form-item label="Action" label-position="right">
<n-form-item
label="Action"
label-position="right"
>
<n-button>Submit</n-button>
<n-button>Cancel</n-button>
</n-form-item>
@ -209,42 +253,85 @@
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">Validate Form</div>
<div class="n-doc-section__header">
Validate Form
</div>
<div class="n-doc-section__view">
<n-form ref="form-validate" :model="validateForm" disabled :rules="validateRules">
<n-form-item label="Warning" labelPosition="top">
The key in form-model does not support the form with ' . '.<br/>
And does not init the value of parameters with 'undefined'.</br>
ResetForm Method: only can reset the item with prop.<br/>
ValidateForm Method: support validate specified items by the second parameter in form of array.<br/>
<n-form
ref="form-validate"
:model="validateForm"
:rules="validateRules"
>
<n-form-item
label="Warning"
label-position="top"
>
The key in form-model does not support the form with ' . '.<br>
And does not init the value of parameters with 'undefined'.<br>
ResetForm Method: only can reset the item with prop.<br>
ValidateForm Method: support validate specified items by the second parameter in form of array.<br>
</n-form-item>
<n-form-item :requiredLogo="false" prop="input" label="Input">
<n-input v-model="validateForm.input" placeholder="Enter string" />
<n-form-item
:required-logo="false"
prop="input"
label="Input"
>
<n-input
v-model="validateForm.input"
placeholder="Enter string"
/>
</n-form-item>
<n-form-item prop="muti.deep.select" label="Select">
<n-form-item
prop="muti.deep.select"
label="Select"
>
<n-select
v-model="validateForm.muti.deep.select"
placeholder="Please Select Type"
:items="items"
/>
</n-form-item>
<n-form-item label="Switch" prop="switch">
<n-form-item
label="Switch"
prop="switch"
>
<n-switch v-model="validateForm.switch" />
</n-form-item>
<n-form-item label="DatePicker" prop="datepicker">
<n-date-picker v-model="validateForm.datepicker" type="date" />
<n-form-item
label="DatePicker"
prop="datepicker"
>
<n-date-picker
v-model="validateForm.datepicker"
type="date"
/>
</n-form-item>
<n-form-item prop="radio" label="Radio">
<n-radio v-model="validateForm.radio" value="Definitely Maybe">Definitely Maybe</n-radio>
<n-radio v-model="validateForm.radio" value="Be Here Now">Be Here Now</n-radio>
<n-form-item
prop="radio"
label="Radio"
>
<n-radio
v-model="validateForm.radio"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model="validateForm.radio"
value="Be Here Now"
>
Be Here Now
</n-radio>
</n-form-item>
<n-form-item>
<n-button @click="formValidate('form-validate')">Submit</n-button>
<n-button @click="formReset('form-validate')">Reset</n-button>
<n-button @click="formValidate('form-validate')">
Submit
</n-button>
<n-button @click="formReset('form-validate')">
Reset
</n-button>
</n-form-item>
</n-form>
</div>
<div class="n-doc-section__source">
<textarea v-pre>
@ -266,13 +353,23 @@
<n-form-item label="DatePicker" prop="datepicker">
<n-date-picker v-model="validateForm.datepicker" type="date" />
</n-form-item>
<n-form-item prop="radio" label="Radio">
<n-radio v-model="validateForm.radio" value="Definitely Maybe">Definitely Maybe</n-radio>
<n-radio v-model="validateForm.radio" value="Be Here Now">Be Here Now</n-radio>
<n-form-item
prop="radio"
label="Radio">
<n-radio v-model="validateForm.radio" value="Definitely Maybe">
Definitely Maybe
</n-radio>
<n-radio v-model="validateForm.radio" value="Be Here Now">
Be Here Now
</n-radio>
</n-form-item>
<n-form-item>
<n-button @click="formValidate('form-validate')">Submit</n-button>
<n-button @click="formReset('form-validate')">Reset</n-button>
<n-button @click="formValidate('form-validate')">
Submit
</n-button>
<n-button @click="formReset('form-validate')">
Reset
</n-button>
</n-form-item>
</n-form>
<script>
@ -351,20 +448,40 @@
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">Form of Custom validate rules</div>
<div class="n-doc-section__header">
Form of Custom validate rules
</div>
<div class="n-doc-section__view">
<n-form ref="custom" :model="custom" :rules="customRules" :label-width="80">
<n-form-item prop="age" label="Age">
<n-input v-model.number="custom.age"></n-input>
<n-form
ref="custom"
:model="custom"
:rules="customRules"
:label-width="80"
>
<n-form-item
prop="age"
label="Age"
>
<n-input v-model.number="custom.age" />
</n-form-item>
<n-form-item prop="pass" label="Password">
<n-input v-model="custom.pass"></n-input>
<n-form-item
prop="pass"
label="Password"
>
<n-input
v-model="custom.pass"
/>
</n-form-item>
<n-form-item prop="checkPass" label="CheckPass">
<n-input v-model="custom.checkPass"></n-input>
<n-form-item
prop="checkPass"
label="CheckPass"
>
<n-input v-model="custom.checkPass" />
</n-form-item>
<n-form-item>
<n-button @click="formValidate('custom')">Commit</n-button>
<n-button @click="formValidate('custom')">
Commit
</n-button>
</n-form-item>
</n-form>
</div>
@ -441,20 +558,31 @@
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">Form of Dynamic</div>
<div class="n-doc-section__header">
Form of Dynamic
</div>
<div class="n-doc-section__view">
<n-form ref="custom" :model="dynamic" :rules="dynamicRules" :label-width="80">
<n-form
ref="custom"
:model="dynamic"
:rules="dynamicRules"
:label-width="80"
>
<n-form-item
v-for="(item, k) in dynamic.email"
:key="k"
:prop="'email.' + k"
:label="k"
v-for="(item, k) in dynamic.email"
>
<n-input v-model="dynamic['email'][k]"></n-input>
<n-input v-model="dynamic['email'][k]" />
</n-form-item>
<n-form-item>
<n-button @click="dynamicAddItem">Add</n-button>
<n-button @click="dynamicPopItem">Delete</n-button>
<n-button @click="dynamicAddItem">
Add
</n-button>
<n-button @click="dynamicPopItem">
Delete
</n-button>
</n-form-item>
</n-form>
</div>
@ -524,45 +652,47 @@
</div>
</template>
<script>
import docCodeEditorMixin from "./docCodeEditorMixin";
import docCodeEditorMixin from './docCodeEditorMixin'
export default {
mixins: [docCodeEditorMixin],
data() {
data () {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("Input age"));
return callback(new Error('Input age'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error("Number required"));
callback(new Error('Number required'))
} else {
if (value < 18) {
callback(new Error("Age should over 18"));
callback(new Error('Age should over 18'))
} else {
callback();
callback()
}
}
}, 1000);
};
}, 1000)
}
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("Input password"));
if (value === '') {
callback(new Error('Input password'))
} else {
if (this.custom.checkPass !== "") {
this.$refs.custom.validate("", ["checkPass"]);
if (this.custom.checkPass !== '') {
this.$refs.custom.validate('', ['checkPass'])
}
callback();
callback()
}
};
}
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("Input password again"));
if (value === '') {
callback(new Error('Input password again'))
} else if (value !== this.custom.pass) {
callback(new Error("ent input password twice!"));
callback(new Error('ent input password twice!'))
} else {
callback();
callback()
}
};
}
return {
form: {
name: '',
@ -577,57 +707,57 @@ export default {
},
items: [
{
label: "ArtifactoryLabel",
value: "Artifactory"
label: 'ArtifactoryLabel',
value: 'Artifactory'
},
{
label: "Registry",
value: "Registry"
label: 'Registry',
value: 'Registry'
},
{
label: "Public",
value: "Public"
label: 'Public',
value: 'Public'
},
{
label: "Custom",
value: "Custom"
label: 'Custom',
value: 'Custom'
}
],
validateForm: {
input: "input",
input: 'input',
muti: {
deep: {
select: "Public"
select: 'Public'
}
},
datepicker: "",
datepicker: '',
switch: false,
radio: ""
radio: ''
},
validateRules: {
input: [
{ required: true, message: "input cannot be empty", trigger: "blur" }
{ required: true, message: 'input cannot be empty', trigger: 'blur' }
],
"muti.deep.select": [
'muti.deep.select': [
{
required: true,
message: "select cannot be empty",
trigger: "change"
message: 'select cannot be empty',
trigger: 'change'
}
],
radio: [
{
required: true,
message: "radio please choose some",
trigger: "change"
message: 'radio please choose some',
trigger: 'change'
}
],
datepicker: [
{
required: true,
type: "date",
message: "Please select the date",
trigger: "change"
type: 'date',
message: 'Please select the date',
trigger: 'change'
}
]
},
@ -635,134 +765,136 @@ export default {
name: [
{
required: true,
message: "The name cannot be empty",
trigger: "blur"
message: 'The name cannot be empty',
trigger: 'blur'
}
],
mail: [
{
required: true,
message: "Mailbox cannot be empty",
trigger: "blur"
message: 'Mailbox cannot be empty',
trigger: 'blur'
},
{ type: "email", message: "Incorrect email format", trigger: "blur" }
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{
required: true,
message: "Please select the city",
trigger: "change"
message: 'Please select the city',
trigger: 'change'
}
],
gender: [
{ required: true, message: "Please select gender", trigger: "change" }
{ required: true, message: 'Please select gender', trigger: 'change' }
],
interest: [
{
required: true,
type: "array",
type: 'array',
min: 1,
message: "Choose at least one hobby",
trigger: "change"
message: 'Choose at least one hobby',
trigger: 'change'
},
{
type: "array",
type: 'array',
max: 2,
message: "Choose two hobbies at best",
trigger: "change"
message: 'Choose two hobbies at best',
trigger: 'change'
}
],
date: [
{
required: true,
type: "date",
message: "Please select the date",
trigger: "change"
type: 'date',
message: 'Please select the date',
trigger: 'change'
}
],
time: [
{
required: true,
type: "string",
message: "Please select time",
trigger: "change"
type: 'string',
message: 'Please select time',
trigger: 'change'
}
],
desc: [
{
required: true,
message: "Please enter a personal introduction",
trigger: "blur"
message: 'Please enter a personal introduction',
trigger: 'blur'
},
{
type: "string",
type: 'string',
min: 20,
message: "Introduce no less than 20 words",
trigger: "blur"
message: 'Introduce no less than 20 words',
trigger: 'blur'
}
]
},
custom: {
pass: "",
checkPass: "",
age: ""
pass: '',
checkPass: '',
age: ''
},
customRules: {
pass: [{ validator: validatePass, trigger: "blur" }],
checkPass: [{ validator: validatePass2, trigger: "blur" }],
age: [{ validator: checkAge, trigger: "blur" }]
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
age: [{ validator: checkAge, trigger: 'blur' }]
},
dynamic: {
name: "",
name: '',
email: {
email0: ""
email0: ''
}
},
dynamicRules: {
"email.email0": [
'email.email0': [
{
required: true,
message: "Mailbox cannot be empty",
trigger: "blur"
message: 'Mailbox cannot be empty',
trigger: 'blur'
},
{ type: "email", message: "Incorrect email format", trigger: "blur" }
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
]
}
};
}
},
methods: {
formValidate(ref) {
this.$refs[ref].validate((flag, res) => {
console.log("validate all result", flag, res);
});
formValidate (ref) {
// this.$refs[ref].validate((flag, res) => {
// console.log('validate all result', flag, res);
// })
new Promise((resolve, reject) => {
this.$refs[ref].validate((valid, filed) => {
if (valid) {
resolve(filed);
resolve(filed)
} else {
reject(filed);
reject(filed)
}
});
})
})
.then(f => {
console.log("pass", f);
console.log('pass', f)
})
.catch(e => {
console.log("unpass", e);
});
console.log('unpass', e)
})
},
formReset (ref) {
this.$refs[ref].resetForm();
this.$refs[ref].resetForm()
},
dynamicAddItem() {
let i = Object.keys(this.dynamic.email).length;
this.$set(this.dynamic.email, "email" + i, "");
dynamicAddItem () {
let i = Object.keys(this.dynamic.email).length
this.$set(this.dynamic.email, 'email' + i, '')
// 依据自己的情况在dynamicRules里去增加验证对象
this.$set(
this.dynamicRules,
"email.email" + i,
this.dynamicRules["email.email0"]
);
'email.email' + i,
this.dynamicRules['email.email0']
)
},
dynamicPopItem () {
let keys = Object.keys(this.dynamic.email)
@ -772,5 +904,5 @@ export default {
}
}
}
};
</script>
}
</script>

63
packages/common/Form/src/form-item.vue
View File

@ -1,11 +1,21 @@
<template>
<div class="n-form-item" :class="getFormClass()">
<label v-if="label !== undefined" :class="`${prefix}__label`" :style="style">{{label}}</label>
<div class="n-form-item__content" :class="
validateFlag ? `${prefix}__content--error` : `${prefix}__content--pass`">
<slot></slot>
<div
:class="getFormClass()"
>
<label
v-if="label !== undefined"
:class="`${prefix}__label`"
:style="style"
>
{{ label }}
</label>
<div
class="n-form-item__content"
:class="validateFlag ? `${prefix}__content--error` : `${prefix}__content--pass`"
>
<slot />
<div :class="`${prefix}__validate`">
{{validateInfo}}
{{ validateInfo }}
</div>
</div>
</div>
@ -13,17 +23,34 @@
<script>
import AsyncValidator from 'async-validator'
import { getObjValue } from '../../../utils/index'
import { debuglog } from 'util';
export default {
name: 'NFormItem',
props: {
label: String,
labelWidth: Number,
labelStyle: String,
labelPosition: String,
prop: String,
required: Boolean,
label: {
type: String,
default: undefined
},
labelWidth: {
type: Number,
default: undefined
},
labelStyle: {
type: String,
default: undefined
},
labelPosition: {
type: String,
default: undefined
},
prop: {
type: String,
default: undefined
},
required: {
type: Boolean,
default: undefined
},
requiredLogo: {
type: Boolean,
default: undefined
@ -45,7 +72,7 @@ export default {
computed: {
style () {
let s = {
width: null,
width: null
}
let lW = this.getValue('labelWidth')
s.width = lW ? lW + 'px' : 'auto'
@ -86,7 +113,7 @@ export default {
return this[key] === undefined ? this.form[key] : this[key]
},
getFormClass () {
let cls = []
let cls = ['n-form-item']
let pre = 'n-form-item__label--'
cls.push(pre + this.getValue('labelPosition'))
console.log(this.getValue('requiredLogo'))
@ -141,8 +168,8 @@ export default {
return i.trigger === trigger
})
if (activeRule.length === 0) return
const asyncValidator = new AsyncValidator({[prop]: activeRule})
asyncValidator.validate({[prop]: value}, (errors, fields) => {
const asyncValidator = new AsyncValidator({ [prop]: activeRule })
asyncValidator.validate({ [prop]: value }, (errors, fields) => {
if (errors) {
this.validateInfo = errors[0].message
this.validateFlag = true
@ -154,7 +181,7 @@ export default {
},
clearValidateClass () {
this.validateInfo = ''
this.validateFlag = false
this.validateFlag = false
},
validateEventListener () {
const rules = this.getRules()

22
packages/common/Form/src/main.vue
View File

@ -1,11 +1,11 @@
<template>
<form
<form
class="n-form"
:class="{
'n-form--inline': inline
}"
>
<slot v-bind:form="this"></slot>
<slot />
</form>
</template>
<script>
@ -32,10 +32,16 @@ export default {
default: 'right' // ['top', 'right', 'left', 'center']
},
model: {
type: Object
type: Object,
default: function () {
return {}
}
},
rules: {
type: Object
type: Object,
default: function () {
return {}
}
},
requiredLogo: {
type: Boolean,
@ -44,7 +50,7 @@ export default {
},
data () {
return {
initialValue: ''
initialValue: ''
}
},
created () {
@ -54,10 +60,10 @@ export default {
getLabelPosClass (labelPosition) {
return 'n-form--lable-' + labelPosition
},
/**
/**
* form validation, validate all prop-elements by default,
* can use specify the scope of validation by param part.
*
*
* @param {Funtion} cb callback
* @param {Array} scope to specify the scope of validation
* @return {Boolean} validation passed or not
@ -115,4 +121,4 @@ export default {
}
}
}
</script>
</script>

2
packages/common/Radio/src/main.vue
View File

@ -24,11 +24,11 @@ import Emitter from '../../../mixins/emitter'
export default {
name: 'NRadio',
mixins: [ Emitter ],
model: {
prop: 'privateValue',
event: 'input'
},
mixins: [ Emitter ],
inject: {
formItem: {
default: null

2
packages/common/Select/src/SingleSelect.vue
View File

@ -75,11 +75,11 @@ import Emitter from '../../../mixins/emitter'
export default {
name: 'NSingleSelect',
mixins: [ Emitter ],
model: {
prop: 'selectedValue',
event: 'input'
},
mixins: [ Emitter ],
inject: {
formItem: {
default: null