RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-22 05:16:05 +03:00
Code Issues Projects Releases Wiki Activity

Adds support for focus class on formulate wrapper

Browse Source
This commit is contained in:
Justin Schroeder 2019-03-18 13:48:26 -04:00
parent 5fe64141d3
commit aa367c4bd4
5 changed files with 1973 additions and 2428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

4342
example/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
example/package.json
View File

@ -6,21 +6,21 @@
"build": "cross-env NODE_ENV=production webpack -p"
},
"dependencies": {
"vue": "^2.3.3",
"vue-formulate": "^0.7.4",
"vue": "^2.6.9",
"vue-formulate": "^0.10.0",
"vuex": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^13.7.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.4.5"
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.6.9",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"
}
}

3
example/webpack.config.js
View File

@ -35,7 +35,8 @@ module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
symlinks: false
},
devServer: {
historyApiFallback: true,

32
src/components/FormulateElement.vue
View File

@ -21,7 +21,8 @@
v-model="val"
v-bind="attributes"
v-if="isTextInput"
@blur="errorBlurState = true"
@blur="setBlurState"
@focus="setFocusState"
:disabled="disabled"
:step="step"
>
@ -33,7 +34,8 @@
v-model="val"
v-bind="attributes"
v-if="isTextareaInput"
@blur="errorBlurState = true"
@blur="setBlurState"
@focus="setFocusState"
:disabled="disabled"
/>
<!-- BUTTON INPUTS -->
@ -59,7 +61,8 @@
:class="elementClasses"
:name="name"
v-model="val"
@blur="errorBlurState = true"
@blur="setBlurState"
@focus="setFocusState"
:disabled="disabled"
>
<option
@ -90,7 +93,8 @@
v-bind="attributes"
v-model="val"
v-if="type === 'radio'"
@blur="errorBlurState = true"
@blur="setBlurState"
@focus="setFocusState"
:disabled="disabled"
>
<input
@ -103,7 +107,8 @@
v-bind="attributes"
v-model="val"
v-if="type === 'checkbox'"
@blur="errorBlurState = true"
@blur="setBlurState"
@focus="setFocusState"
:disabled="disabled"
>
<label
@ -116,7 +121,7 @@
<!-- CUSTOM SLOT INPUTS -->
<slot v-if="hasCustomInput" />
<!-- UNSUPORTED INPUT -->
<!-- UNSUPPORTED INPUT -->
<div
style="background-color: red; color: white"
v-if="isUnsupportedInput"
@ -241,7 +246,8 @@ export default {
},
data () {
return {
errorBlurState: false
errorBlurState: false,
focusState: false
}
},
computed: {
@ -314,8 +320,9 @@ export default {
[`formulate-element--type--${this.type}`]: true,
'formulate-element--has-value': !!this.value,
'formulate-element--has-errors': this.localAndValidationErrors.length && this.shouldShowErrors,
'formulate-element--has-prefix': !!this.slots.prefix,
'formulate-element--has-suffix': !!this.slots.suffix
'formulate-element--has-prefix': !!this.$slots.prefix,
'formulate-element--has-suffix': !!this.$slots.suffix,
'formulate-element--has-focus': !!this.focusState
}
},
validationErrors () {
@ -401,6 +408,13 @@ export default {
if (this.initial !== false) {
this.form.setInitial(this.name, this.initial)
}
},
setBlurState () {
this.errorBlurState = true
this.focusState = false
},
setFocusState () {
this.focusState = true
}
}
}