2
0
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:
Alexander Shabunevich
2022-12-07 01:00:41 +03:00
parent bccd75ab09
commit 454dddd4dd
3 changed files with 32 additions and 4 deletions
+7 -4
View File
@@ -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))
}
+13
View File
@@ -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
View File
@@ -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')