diff --git a/examples/model/checkbox/index.html b/examples/model/checkbox/index.html
deleted file mode 100644
index 521d3bd..0000000
--- a/examples/model/checkbox/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
- v-model integration example for checkbox
-
-
-
-
-
-
-
-
-
diff --git a/examples/model/component/index.html b/examples/model/component/index.html
deleted file mode 100644
index b0c2fa6..0000000
--- a/examples/model/component/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-
-
- component validation example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{result.selected}}
-
-
-
-
diff --git a/examples/model/radio/index.html b/examples/model/radio/index.html
deleted file mode 100644
index 3c2326e..0000000
--- a/examples/model/radio/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
-
- v-model integration example for radio
-
-
-
-
-
-
-
-
-
diff --git a/examples/model/select/index.html b/examples/model/select/index.html
deleted file mode 100644
index 12e562a..0000000
--- a/examples/model/select/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
- v-model intergration example for select
-
-
-
-
-
-
-
-
-
-
-
-
Required !!
-
Sorry, The maximum is 3 languages !!
-
-
-
model value: {{langs}}
-
-
-
-
diff --git a/examples/model/text/index.html b/examples/model/text/index.html
deleted file mode 100644
index 64dc1c9..0000000
--- a/examples/model/text/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
- v-model integration example for text
-
-
-
-
-
-
-
-
-
-
-
-
-
model value: {{msg}}
-
-
-
-
diff --git a/src/components/validity/lifecycles.js b/src/components/validity/lifecycles.js
index c5ec236..89b0476 100644
--- a/src/components/validity/lifecycles.js
+++ b/src/components/validity/lifecycles.js
@@ -50,9 +50,6 @@ export default function (Vue: GlobalAPI): Object {
// for event control flags
this._modified = false
- // for v-model integration flag
- this._modelIntegrationMode = 'NONE'
-
// watch validation raw results
this._watchValidationRawResults()
@@ -96,26 +93,10 @@ export default function (Vue: GlobalAPI): Object {
toggleClasses(this.$el, this.classes.pristine, addClass)
}
- function updated () {
- if (this._modelIntegrationMode === 'MODEL_AND_USER') {
- const maybeChangeModel: ?boolean = this._elementable.modelValueEqual(this._vnode)
- if (!this._applyWithUserHandler && maybeChangeModel !== null && !maybeChangeModel) {
- this._elementable.fireInputableEvent()
- }
- delete this._applyWithUserHandler
- } else if (this._modelIntegrationMode === 'MODEL') {
- const maybeChangeModel: ?boolean = this._elementable.modelValueEqual(this._vnode)
- if (maybeChangeModel !== null && !maybeChangeModel) {
- this._elementable.fireInputableEvent()
- }
- }
- }
-
return {
created,
destroyed,
- mounted,
- updated
+ mounted
}
}
diff --git a/src/components/validity/methods-event.js b/src/components/validity/methods-event.js
index 08bed95..7e0d241 100644
--- a/src/components/validity/methods-event.js
+++ b/src/components/validity/methods-event.js
@@ -2,115 +2,12 @@
import { MODEL_NOTIFY_EVENT } from '../../util'
export default function (Vue: GlobalAPI): Object {
- const { toArray } = Vue.util
function _fireEvent (type: string, ...args: Array): void {
this.$emit(type, ...args)
}
- function _interceptEvents (child: VNode, multiple: boolean): void {
- (multiple ? (child.children || []) : [child]).forEach((child: VNode) => { this._wrapEvent(child) })
- }
-
- function _wrapEvent (child: VNode): Object {
- const ret: Object = {}
- if (!child.tag || !child.data) { return ret }
-
- const dir: ?VNodeDirective = getModelDirective(child)
- if (!dir) { return ret }
-
- const { type, orgListeners, listeners } = getEventSources(child)
- const modelHandler: Function = Array.isArray(orgListeners) ? orgListeners[0] : orgListeners
- const userHandler: ?Function = Array.isArray(orgListeners) ? orgListeners[1] : null
-
- let integrationMode = this._modelIntegrationMode
- if (modelHandler && userHandler) {
- integrationMode = this._modelIntegrationMode = 'MODEL_AND_USER'
- } else if (modelHandler && !userHandler) {
- integrationMode = this._modelIntegrationMode = 'MODEL'
- }
-
- const modelApplyer = (args) => {
- return (applicable: ?boolean) => {
- if (userHandler) {
- this._applyWithUserHandler = true
- }
- if (applicable === undefined || applicable === true) {
- modelHandler.apply(child.context, args)
- }
- }
- }
-
- const modifier: ?boolean = (dir.modifiers || {}).validity
-
- const validity = this
- listeners[type] = function () {
- const args: Array = toArray(arguments, 0)
- if (integrationMode === 'MODEL_AND_USER') {
- const event: any = args[0]
- if (event[MODEL_NOTIFY_EVENT] === 'DOM') {
- delete event[MODEL_NOTIFY_EVENT]
- userHandler && userHandler.apply(child.context, args)
- return
- } else if (event[MODEL_NOTIFY_EVENT] === 'COMPONENT') {
- const value: any = event.value
- args[0] = value
- userHandler && userHandler.apply(child.context, args)
- return
- }
-
- if (modifier) {
- const fn = validity._applyer = modelApplyer(args)
- args.push(fn)
- userHandler && userHandler.apply(child.context, args)
- } else {
- userHandler && userHandler.apply(child.context, args)
- modelHandler.apply(child.context, args)
- }
- } else if (integrationMode === 'MODEL') {
- if (modifier) {
- validity._applyer = modelApplyer(args)
- } else {
- modelHandler.apply(child.context, args)
- }
- }
- }
-
- ret.dir = dir
- return ret
- }
-
- function pass (applicable: ?boolean) {
- // TODO: should be implementsed error cases
- if (this._modelIntegrationMode !== 'NONE' && this._applyer) {
- this._applyer(applicable)
- }
- }
-
return {
- _fireEvent,
- _interceptEvents,
- _wrapEvent,
- pass
- }
-}
-
-function getModelDirective (child: VNode): ?VNodeDirective {
- return ((child.data && child.data.directives) || []).find(dir => { return dir.name === 'model' })
-}
-
-function getEventSources (child: VNode): Object {
- const sources: Object = {}
- const listeners = sources.listeners = child.componentOptions
- ? child.componentOptions.listeners
- : (child.data && child.data.on)
- sources.type =
- (child.tag === 'input' && (child.data && child.data.attrs && child.data.attrs.type) === 'text') ||
- (child.tag && child.tag.match(/vue-component/))
- ? 'input'
- : 'change'
- if (listeners) {
- sources.orgListeners = listeners[sources.type]
+ _fireEvent
}
- return sources
}
diff --git a/src/components/validity/render.js b/src/components/validity/render.js
index d327714..2f254e7 100644
--- a/src/components/validity/render.js
+++ b/src/components/validity/render.js
@@ -3,7 +3,6 @@
export default function (Vue: GlobalAPI): Object {
return {
render (h: Function): VNode {
- this._interceptEvents(this.child, this.multiple)
return this.child
}
}
diff --git a/src/elements/component.js b/src/elements/component.js
index 7a1f21a..4b19e9d 100644
--- a/src/elements/component.js
+++ b/src/elements/component.js
@@ -1,10 +1,7 @@
/* @flow */
-import { MODEL_NOTIFY_EVENT } from '../util'
-import Helper from './helper'
export default function (Vue: GlobalAPI): any {
const { looseEqual } = Vue.util
- const { modelValueEqual } = Helper(Vue)
class ComponentElement {
_vm: ValidityComponent
@@ -59,16 +56,6 @@ export default function (Vue: GlobalAPI): any {
this._watchers.forEach(watcher => { watcher() })
this._watchers = []
}
-
- fireInputableEvent (): void {
- const args = { value: this.getValue() }
- args[MODEL_NOTIFY_EVENT] = 'COMPONENT'
- this._vnode.child.$emit('input', args)
- }
-
- modelValueEqual (vnode: VNode): ?boolean {
- return modelValueEqual(vnode)
- }
}
return ComponentElement
diff --git a/src/elements/helper.js b/src/elements/helper.js
deleted file mode 100644
index 84de7fd..0000000
--- a/src/elements/helper.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* @flow */
-import { MODEL_NOTIFY_EVENT } from '../util'
-
-export default function (Vue: GlobalAPI): Object {
- const { looseEqual } = Vue.util
-
- function addEventInfo (e: any) {
- e[MODEL_NOTIFY_EVENT] = 'DOM'
- }
-
- function modelValueEqual (vnode: VNode): ?boolean {
- const directives: Array = (vnode.data && vnode.data.directives) || []
- const directive: ?VNodeDirective = directives.find((dir: VNodeDirective) => {
- return dir.name === 'model'
- })
- return (!directive || directive.oldValue === undefined)
- ? null
- : looseEqual(directive.value, directive.oldValue)
- }
-
- return {
- addEventInfo,
- modelValueEqual
- }
-}
diff --git a/src/elements/multi.js b/src/elements/multi.js
index c40ad48..3a46acf 100644
--- a/src/elements/multi.js
+++ b/src/elements/multi.js
@@ -1,10 +1,7 @@
/* @flow */
-import { triggerEvent } from '../util'
-import Helper from './helper'
export default function (Vue: GlobalAPI): any {
const { looseEqual } = Vue.util
- const { addEventInfo, modelValueEqual } = Helper(Vue)
class MultiElement {
_vm: ValidityComponent
@@ -56,25 +53,6 @@ export default function (Vue: GlobalAPI): any {
})
}
- fireInputableEvent (): void {
- this._eachItems(item => {
- triggerEvent(item, 'change', addEventInfo)
- })
- }
-
- modelValueEqual (vnode: VNode): ?boolean {
- let ret: ?boolean = null
- const children: Array = (this._vm.child && this._vm.child.children) || []
- for (let i = 0; i < children.length; i++) {
- const maybeEqual: ?boolean = modelValueEqual(children[i])
- if (!maybeEqual) {
- ret = maybeEqual
- break
- }
- }
- return ret
- }
-
_getCheckedValue (): Array {
const value: Array = []
this._eachItems(item => {
diff --git a/src/elements/single.js b/src/elements/single.js
index f42b687..f907288 100644
--- a/src/elements/single.js
+++ b/src/elements/single.js
@@ -1,10 +1,7 @@
/* @flow */
-import { triggerEvent } from '../util'
-import Helper from './helper'
export default function (Vue: GlobalAPI): any {
const { looseEqual } = Vue.util
- const { addEventInfo, modelValueEqual } = Helper(Vue)
class SingleElement {
_vm: ValidityComponent
@@ -82,23 +79,6 @@ export default function (Vue: GlobalAPI): any {
}
}
}
-
- fireInputableEvent (): void {
- const el = this._vm.$el
- if (el.tagName === 'SELECT') {
- triggerEvent(el, 'change', addEventInfo)
- } else {
- if (el.type === 'checkbox') {
- triggerEvent(el, 'change', addEventInfo)
- } else {
- triggerEvent(el, 'input', addEventInfo)
- }
- }
- }
-
- modelValueEqual (vnode: VNode): ?boolean {
- return modelValueEqual(vnode)
- }
}
return SingleElement
diff --git a/src/util.js b/src/util.js
index e4b9ab4..765e92a 100644
--- a/src/util.js
+++ b/src/util.js
@@ -6,8 +6,6 @@ const inBrowser =
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
-export const MODEL_NOTIFY_EVENT: string = '__VUE_VALIDATOR_MODEL_NOTIFY_EVENT__'
-
export function getClass (el: any): string {
let classname: string | Object = el.className
if (typeof classname === 'object') {
@@ -65,10 +63,3 @@ export function toggleClasses (el: any, key: string, fn: Function): void {
fn(el, keys[i])
}
}
-
-export function triggerEvent (el: any, event: string, fn: Function): void {
- const e: any = document.createEvent('HTMLEvents')
- e.initEvent(event, true, true)
- fn && fn(e)
- el.dispatchEvent(e)
-}
diff --git a/test/unit/components/validity-functional.test.js b/test/unit/components/validity-functional.test.js
index 90acf76..cc45029 100644
--- a/test/unit/components/validity-functional.test.js
+++ b/test/unit/components/validity-functional.test.js
@@ -1003,562 +1003,4 @@ describe('validity functional component', () => {
})
})
})
-
- describe('v-model integrations', () => {
- const props = {
- field: 'field1',
- validators: { required: { rule: true, message: 'required !!' }}
- }
-
- function createModelDirective (key, value, modifier) {
- const modifiers = modifier ? { validity: true } : {}
- return [{
- expression: key,
- modifiers,
- name: 'model',
- value: value
- }]
- }
-
- function textboxModelHanlder (prop) {
- return function ($event) {
- if ($event.target.composing) { return }
- this[prop] = $event.target.value
- }
- }
-
- function checkboxModelHandler (prop, value) {
- return function ($event) {
- const $$a = this[prop]
- const $$el = $event.target
- const $$c = $$el.checked
- if (Array.isArray($$a)) {
- const $$v = value
- const $$i = this._i($$a, $$v)
- if ($$c) {
- $$i < 0 && (this[prop] = $$a.concat($$v))
- } else {
- $$i > -1 && (this[prop] = $$a.slice(0, $$i).concat($$a.slice($$i + 1)))
- }
- } else {
- this[prop] = $$c
- }
- }
- }
-
- function selectModelHandler (prop, isArray) {
- return function ($event) {
- const values = Array.prototype.filter.call(
- $event.target.options, function (o) { return o.selected }
- ).map(function (o) {
- return '_value' in o ? o._value : o.value
- })
- this[prop] = isArray ? values : values[0]
- }
- }
-
- function componentModelHandler (prop) {
- return function ($event) { this[prop] = $event }
- }
-
- describe('up to model', () => {
- describe('text', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { msg: 'hello' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.msg]),
- h('validity', { props }, [
- h('input', {
- ref: 'input',
- attrs: { type: 'text' },
- directives: createModelDirective('msg', this.msg, true),
- on: {
- input: [
- textboxModelHanlder('msg'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { input } = vm.$refs
- waitForUpdate(() => {
- input.value = 'world'
- triggerEvent(input, 'input')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.msg, 'world')
- }).then(() => {
- // simulate valid value changing
- valid = false
- input.value = ''
- triggerEvent(input, 'input')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.msg, 'world')
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(input, 'input')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.msg, '')
- }).then(done)
- })
- })
-
- describe('checkbox', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { checked: false },
- components,
- render (h) {
- return h('div', [
- h('p', [this.checked]),
- h('validity', { props }, [
- h('input', {
- ref: 'checkbox',
- attrs: { type: 'checkbox' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- checkboxModelHandler('checked'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { checkbox } = vm.$refs
- waitForUpdate(() => {
- checkbox.checked = true
- triggerEvent(checkbox, 'change')
- }).thenWaitFor(1).then(() => {
- assert(vm.checked)
- }).then(() => {
- // simulate valid value changing
- valid = false
- checkbox.checked = false
- triggerEvent(checkbox, 'change')
- }).thenWaitFor(1).then(() => {
- assert(vm.checked)
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(checkbox, 'change')
- }).thenWaitFor(1).then(() => {
- assert(!vm.checked)
- }).then(done)
- })
- })
-
- describe('select', () => {
- describe('single', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { selected: 'one' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.selected]),
- h('validity', { props }, [
- h('select', {
- ref: 'select',
- directives: createModelDirective('selected', this.selected, true),
- on: {
- change: [
- selectModelHandler('selected', false),
- (e, $apply) => { valid && $apply() }
- ]
- }
- }, [
- h('option', { attrs: { value: 'one' }}),
- h('option', { attrs: { value: 'two' }}),
- h('option', { attrs: { value: 'three' }})
- ])
- ])
- ])
- }
- }).$mount(el)
- const { select } = vm.$refs
- waitForUpdate(() => {
- select.selectedIndex = 1
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'two')
- }).then(() => {
- // simulate valid value changing
- valid = false
- select.selectedIndex = 2
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'two')
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'three')
- }).then(done)
- })
- })
-
- describe('multiple', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { items: [] },
- components,
- render (h) {
- return h('div', [
- h('p', [this.items]),
- h('validity', { props }, [
- h('select', {
- ref: 'select',
- attrs: { multiple: true },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- selectModelHandler('items', true),
- (e, $apply) => { valid && $apply() }
- ]
- }
- }, [
- h('option', { ref: 'option1', attrs: { value: 'one' }}),
- h('option', { ref: 'option2', attrs: { value: 'two' }}),
- h('option', { ref: 'option3', attrs: { value: 'three' }})
- ])
- ])
- ])
- }
- }).$mount(el)
- const { select, option1, option2, option3 } = vm.$refs
- waitForUpdate(() => {
- option1.selected = true
- option2.selected = true
- option3.selected = false
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one', 'two'])
- }).then(() => {
- // simulate valid value changing
- valid = false
- option1.selected = false
- option2.selected = false
- option3.selected = false
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one', 'two'])
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, [])
- }).then(done)
- })
- })
- })
-
- describe('component', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: {
- selected: '',
- options: [
- { text: 'One', value: 'one' },
- { text: 'Two', value: 'two' },
- { text: 'Three', value: 'three' }
- ]
- },
- components,
- render (h) {
- return h('div', [
- h('p', [this.selected]),
- h('validity', { props }, [
- h('comp-input', {
- ref: 'comp',
- props: { options: this.options },
- directives: createModelDirective('selected', 'one', true),
- on: {
- input: [
- componentModelHandler('selected'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { comp } = vm.$refs
- const { select } = comp.$refs
- waitForUpdate(() => {
- select.selectedIndex = 1
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'two')
- }).then(() => {
- // simulate valid value changing
- valid = false
- select.selectedIndex = 2
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'two')
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'three')
- }).then(done)
- })
- })
- })
-
- describe('down to validity component', () => {
- describe('text', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { msg: 'hello' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.msg]),
- h('validity', { props }, [
- h('input', {
- ref: 'textbox',
- attrs: { type: 'text' },
- directives: createModelDirective('msg', this.msg, true),
- on: {
- input: [
- textboxModelHanlder('msg'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { textbox } = vm.$refs
- waitForUpdate(() => {
- vm.msg = 'world'
- }).thenWaitFor(1).then(() => {
- /* assert.equal(textbox.value, 'world') */
- assert(callCount === 1)
- }).then(() => {
- textbox.value = ''
- triggerEvent(textbox, 'input')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.msg, '')
- assert(callCount === 2)
- }).then(done)
- })
- })
-
- describe('checkbox', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { checked: false },
- components,
- render (h) {
- return h('div', [
- h('p', [this.checked]),
- h('validity', { props }, [
- h('input', {
- ref: 'checkbox',
- attrs: { type: 'checkbox' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- checkboxModelHandler('checked'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { checkbox } = vm.$refs
- waitForUpdate(() => {
- vm.checked = true
- }).thenWaitFor(1).then(() => {
- assert(callCount === 1)
- }).then(() => {
- checkbox.checked = false
- triggerEvent(checkbox, 'change')
- }).thenWaitFor(1).then(() => {
- assert(callCount === 2)
- assert(vm.checked === false)
- }).then(done)
- })
- })
-
- describe('select', () => {
- describe('single', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { selected: 'one' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.selected]),
- h('validity', { props }, [
- h('select', {
- ref: 'select',
- directives: createModelDirective('selected', this.selected, true),
- on: {
- change: [
- selectModelHandler('selected', false),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- }, [
- h('option', { attrs: { value: 'one' }}),
- h('option', { attrs: { value: 'two' }}),
- h('option', { attrs: { value: 'three' }})
- ])
- ])
- ])
- }
- }).$mount(el)
- const { select } = vm.$refs
- waitForUpdate(() => {
- vm.selected = 'two'
- }).thenWaitFor(1).then(() => {
- assert(callCount === 2) // 1? found strange behavor of select
- }).then(() => {
- select.selectedIndex = 2
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert(callCount === 3) // 2
- assert.equal(vm.selected, 'three')
- }).then(done)
- })
- })
-
- describe('multiple', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { items: [] },
- components,
- render (h) {
- return h('div', [
- h('p', [this.items]),
- h('validity', { props }, [
- h('select', {
- ref: 'select',
- attrs: { multiple: true },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- selectModelHandler('items', true),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- }, [
- h('option', { ref: 'option1', attrs: { value: 'one' }}),
- h('option', { ref: 'option2', attrs: { value: 'two' }}),
- h('option', { ref: 'option3', attrs: { value: 'three' }})
- ])
- ])
- ])
- }
- }).$mount(el)
- const { select, option1, option2, option3 } = vm.$refs
- waitForUpdate(() => {
- vm.items = ['one', 'two']
- }).thenWaitFor(1).then(() => {
- assert(callCount === 2) // 1? found strange behavor of select
- }).then(() => {
- option1.selected = false
- option2.selected = false
- option3.selected = true
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['three'])
- assert(callCount === 3) // 2?
- }).then(done)
- })
- })
- })
-
- describe('component', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: {
- selected: '',
- options: [
- { text: 'One', value: 'one' },
- { text: 'Two', value: 'two' },
- { text: 'Three', value: 'three' }
- ]
- },
- components,
- render (h) {
- return h('div', [
- h('p', [this.selected]),
- h('validity', { props }, [
- h('comp-input', {
- ref: 'comp',
- props: { options: this.options },
- directives: createModelDirective('selected', this.selected, true),
- on: {
- input: [
- componentModelHandler('selected'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { comp } = vm.$refs
- const { select } = comp.$refs
- waitForUpdate(() => {
- vm.selected = 'two'
- }).thenWaitFor(1).then(() => {
- assert(callCount === 1)
- }).then(() => {
- select.selectedIndex = 2
- triggerEvent(select, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.selected, 'three')
- assert(callCount === 2)
- }).then(done)
- })
- })
- })
- })
})
diff --git a/test/unit/components/validity-group-functional.test.js b/test/unit/components/validity-group-functional.test.js
index 5670c47..82910aa 100644
--- a/test/unit/components/validity-group-functional.test.js
+++ b/test/unit/components/validity-group-functional.test.js
@@ -228,280 +228,4 @@ describe('validity-group functional component', () => {
})
})
})
-
- describe('v-model integrations', () => {
- const props = {
- field: 'field1',
- validators: { required: { rule: true, message: 'required !!' }}
- }
-
- function createModelDirective (key, value, modifier) {
- const modifiers = modifier ? { validity: true } : {}
- return [{
- expression: key,
- modifiers,
- name: 'model',
- value: value
- }]
- }
-
- function checkboxModelHandler (prop, value) {
- return function ($event) {
- const $$a = this[prop]
- const $$el = $event.target
- const $$c = $$el.checked
- if (Array.isArray($$a)) {
- const $$v = value
- const $$i = this._i($$a, $$v)
- if ($$c) {
- $$i < 0 && (this[prop] = $$a.concat($$v))
- } else {
- $$i > -1 && (this[prop] = $$a.slice(0, $$i).concat($$a.slice($$i + 1)))
- }
- } else {
- this[prop] = $$c
- }
- }
- }
-
- function radioModelHanlder (prop, value) {
- return function ($event) { this[prop] = value }
- }
-
- describe('up to model', () => {
- describe('checkbox', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { items: [] },
- components,
- render (h) {
- return h('div', [
- h('p', [this.items]),
- h('validity-group', { props }, [
- h('input', {
- ref: 'checkbox1',
- attrs: { type: 'checkbox', value: 'one' },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- checkboxModelHandler('items', 'one'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- }),
- h('input', {
- ref: 'checkbox2',
- attrs: { type: 'checkbox', value: 'two' },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- checkboxModelHandler('items', 'two'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { checkbox1, checkbox2 } = vm.$refs
- waitForUpdate(() => {
- checkbox1.checked = true
- triggerEvent(checkbox1, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one'])
- }).then(() => {
- // simulate valid value changing
- valid = false
- checkbox2.checked = true
- triggerEvent(checkbox2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one'])
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(checkbox2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one', 'two'])
- }).then(done)
- })
- })
-
- describe('radio', () => {
- it('should be work', done => {
- let valid = true
- const vm = new Vue({
- data: { checked: '' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.checked]),
- h('validity-group', { props }, [
- h('input', {
- ref: 'radio1',
- attrs: { type: 'radio', name: 'g1', value: 'one' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- radioModelHanlder('checked', 'one'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- }),
- h('input', {
- ref: 'radio2',
- attrs: { type: 'radio', name: 'g1', value: 'two' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- radioModelHanlder('checked', 'two'),
- (e, $apply) => { valid && $apply() }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { radio1, radio2 } = vm.$refs
- waitForUpdate(() => {
- radio1.checked = true
- triggerEvent(radio1, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.checked, 'one')
- }).then(() => {
- // simulate valid value changing
- valid = false
- radio2.checked = true
- triggerEvent(radio2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.checked, 'one')
- }).then(() => {
- // simulate invalid value changing
- valid = true
- triggerEvent(radio2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.checked, 'two')
- }).then(done)
- })
- })
- })
-
- describe('down to model', () => {
- describe('checkbox', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { items: [] },
- components,
- render (h) {
- return h('div', [
- h('p', [this.items]),
- h('validity-group', { props }, [
- h('input', {
- ref: 'checkbox1',
- attrs: { type: 'checkbox', value: 'one' },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- checkboxModelHandler('items', 'one'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- }),
- h('input', {
- ref: 'checkbox2',
- attrs: { type: 'checkbox', value: 'two' },
- directives: createModelDirective('items', this.items, true),
- on: {
- change: [
- checkboxModelHandler('items', 'two'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { checkbox2 } = vm.$refs
- waitForUpdate(() => {
- vm.items = ['one']
- }).thenWaitFor(1).then(() => {
- assert(callCount === 2) // 1? found strange befaivor...
- }).then(() => {
- checkbox2.checked = true
- triggerEvent(checkbox2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.deepEqual(vm.items, ['one', 'two'])
- assert(callCount === 3)
- }).then(done)
- })
- })
-
- describe('radio', () => {
- it('should be work', done => {
- let callCount = 0
- const vm = new Vue({
- data: { checked: '' },
- components,
- render (h) {
- return h('div', [
- h('p', [this.checked]),
- h('validity-group', { props }, [
- h('input', {
- ref: 'radio1',
- attrs: { type: 'radio', name: 'g1', value: 'one' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- radioModelHanlder('checked', 'one'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- }),
- h('input', {
- ref: 'radio2',
- attrs: { type: 'radio', name: 'g1', value: 'two' },
- directives: createModelDirective('checked', this.checked, true),
- on: {
- change: [
- radioModelHanlder('checked', 'two'),
- (e, $apply) => {
- callCount++
- $apply && $apply()
- }
- ]
- }
- })
- ])
- ])
- }
- }).$mount(el)
- const { radio2 } = vm.$refs
- waitForUpdate(() => {
- vm.checked = 'one'
- }).thenWaitFor(1).then(() => {
- assert(callCount === 2) // 1? strange befaivor...
- }).then(() => {
- radio2.checked = true
- triggerEvent(radio2, 'change')
- }).thenWaitFor(1).then(() => {
- assert.equal(vm.checked, 'two')
- assert(callCount === 3)
- }).then(done)
- })
- })
- })
- })
})