mirror of
https://github.com/tenrok/maska.git
synced 2026-06-05 16:42:28 +03:00
Directive could be applied to parent of input element
This commit is contained in:
+7
-4
@@ -1,13 +1,16 @@
|
||||
import { Directive } from 'vue'
|
||||
import { MaskaDetail, MaskInput, MaskInputOptions } from './mask-input'
|
||||
|
||||
type MaskaDirective = Directive<HTMLInputElement, MaskaDetail | undefined>
|
||||
type MaskaDirective = Directive<HTMLElement, MaskaDetail | undefined>
|
||||
|
||||
const masks = new WeakMap<HTMLInputElement, MaskInput>()
|
||||
|
||||
export const vMaska: MaskaDirective = (el, binding) => {
|
||||
if (masks.get(el) != null) {
|
||||
masks.get(el)?.destroy()
|
||||
const input = el instanceof HTMLInputElement ? el : el.querySelector('input')
|
||||
if (input == null) return
|
||||
|
||||
if (masks.get(input) != null) {
|
||||
masks.get(input)?.destroy()
|
||||
}
|
||||
|
||||
const opts = { ...(binding.arg as MaskInputOptions) } ?? {}
|
||||
@@ -21,5 +24,5 @@ export const vMaska: MaskaDirective = (el, binding) => {
|
||||
}
|
||||
}
|
||||
|
||||
masks.set(el, new MaskInput(el, opts))
|
||||
masks.set(input, new MaskInput(input, opts))
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { vMaska } from '../../src'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-maska>
|
||||
<input data-maska="#-#" data-maska-eager />
|
||||
</div>
|
||||
|
||||
<div v-maska>
|
||||
<!-- no input here -->
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,6 +12,7 @@ import Dynamic from './components/Dynamic.vue'
|
||||
import Events from './components/Events.vue'
|
||||
import Hooks from './components/Hooks.vue'
|
||||
import Options from './components/Options.vue'
|
||||
import Parent from './components/Parent.vue'
|
||||
import Simple from './components/Simple.vue'
|
||||
|
||||
test('simple directive', async () => {
|
||||
@@ -34,6 +35,17 @@ test('data-attr', async () => {
|
||||
expect(input.element.value).toBe('1-2')
|
||||
})
|
||||
|
||||
test('parent element', async () => {
|
||||
const wrapper = mount(Parent)
|
||||
const input = wrapper.get('input')
|
||||
|
||||
await input.setValue('1')
|
||||
expect(input.element.value).toBe('1-')
|
||||
|
||||
await input.setValue('123')
|
||||
expect(input.element.value).toBe('1-2')
|
||||
})
|
||||
|
||||
test('dynamic mask', async () => {
|
||||
const wrapper = mount(Dynamic)
|
||||
const input = wrapper.get('input')
|
||||
|
||||
Reference in New Issue
Block a user