RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2025-02-16 20:53:13 +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" "build": "cross-env NODE_ENV=production webpack -p"
}, },
"dependencies": { "dependencies": {
"vue": "^2.3.3", "vue": "^2.6.9",
"vue-formulate": "^0.7.4", "vue-formulate": "^0.10.0",
"vuex": "^2.4.0" "vuex": "^2.4.0"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.0", "babel-core": "^6.26.3",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1", "babel-preset-stage-2": "^6.24.1",
"cross-env": "^3.0.0", "cross-env": "^3.0.0",
"css-loader": "^0.25.0", "css-loader": "^0.25.0",
"file-loader": "^0.9.0", "file-loader": "^0.9.0",
"vue-loader": "^13.7.0", "vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.13", "vue-template-compiler": "^2.6.9",
"webpack": "^3.10.0", "webpack": "^3.12.0",
"webpack-dev-server": "^2.4.5" "webpack-dev-server": "^2.11.3"
} }
} }

3
example/webpack.config.js
View File

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

32
src/components/FormulateElement.vue
View File

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