mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-05-21 13:24:06 +03:00
Code Activity

feat!: rework for v3

Browse Source 
- new directive format: pass options as value, bound as argument with modifiers
- update and checkValue methods in MaskInput
This commit is contained in:
Alexander Shabunevich
2024-03-30 12:39:22 +03:00
parent fe2dc8a766
commit cd1e9f3564
15 changed files with 188 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/components/BindCompleted.vue
+12
View File
@@ -0,0 +1,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { vMaska } from '../../src'
const bound = ref(false)
</script>
<template>
<input v-maska:bound.completed data-maska="#-#-#" />
<div v-if="bound === true">Completed</div>
<div v-else>Uncompleted</div>
</template>
test/components/BindInitial.vue
-11
View File
@@ -1,11 +0,0 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="bound" data-maska="#-#" value="123" />
<div>{{ bound.masked }}</div>
</template>
test/components/BindMasked.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
import { ref } from 'vue'
import { vMaska } from '../../src'
const bound = reactive<Partial<MaskaDetail>>({})
const bound = ref('')
</script>
<template>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.masked }}</div>
<input v-maska:bound.masked data-maska="#-#" />
<div>{{ bound }}</div>
</template>
test/components/BindUnmasked.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
import { ref } from 'vue'
import { vMaska } from '../../src'
const bound = reactive<Partial<MaskaDetail>>({})
const bound = ref('')
</script>
<template>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.unmasked }}</div>
<input v-maska:bound.unmasked data-maska="#-#" />
<div>{{ bound }}</div>
</template>
test/components/Callbacks.vue
+8 -12
View File
@@ -1,24 +1,20 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { MaskaDetail, vMaska } from '../../src'
import { MaskInputOptions, vMaska } from '../../src'
const emit = defineEmits(['mask1', 'mask2', 'mask3'])
const bound1 = reactive({})
const bound2 = reactive({})
const options1 = {
onMaska: (detail: MaskaDetail) => emit('mask1', detail)
const options1 = <MaskInputOptions>{
onMaska: (detail) => emit('mask1', detail)
}
const options2 = {
const options2 = <MaskInputOptions>{
onMaska: [
(detail: MaskaDetail) => emit('mask2', detail),
(detail: MaskaDetail) => emit('mask3', detail),
(detail) => emit('mask2', detail),
(detail) => emit('mask3', detail),
]
}
</script>
<template>
<input id="input1" v-maska:[options1]="bound1" data-maska="#-#" />
<input id="input2" v-maska:[options2]="bound2" data-maska="#-#" />
<input id="input1" v-maska="options1" data-maska="#-#" />
<input id="input2" v-maska="options2" data-maska="#-#" />
</template>
test/components/Completed.vue
-12
View File
@@ -1,12 +0,0 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="bound" data-maska="#-#-#" />
<div v-if="bound.completed">Completed</div>
<div v-else>Uncompleted</div>
</template>
test/components/Config.vue
+7 -7
View File
@@ -1,9 +1,9 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { vMaska, MaskaDetail, MaskInputOptions } from '../../src'
import { ref } from 'vue'
import { MaskInputOptions, vMaska } from '../../src'
const bound = reactive<Partial<MaskaDetail>>({})
const config = reactive<MaskInputOptions>({
const bound = ref('')
const config = <MaskInputOptions>{
mask: 'A A',
tokens: {
A: {
@@ -12,10 +12,10 @@ const config = reactive<MaskInputOptions>({
transform: (chr) => chr.toUpperCase()
}
}
})
}
</script>
<template>
<input v-maska:[config]="bound" />
<div>{{ bound.masked }}</div>
<input v-maska:bound="config" />
<div>{{ bound }}</div>
</template>
test/components/Hooks.vue
+3 -4
View File
@@ -1,12 +1,11 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { MaskInputOptions, vMaska } from '../../src'
const config = reactive<MaskInputOptions>({
const config = <MaskInputOptions>{
preProcess: (val) => val.toUpperCase()
})
}
</script>
<template>
<input v-maska:[config] data-maska="A A" data-maska-tokens="A:[A-Z]:multiple" />
<input v-maska="config" data-maska="A A" data-maska-tokens="A:[A-Z]:multiple" />
</template>
test/components/Initial.vue
+11
View File
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import { vMaska } from '../../src'
const initial = ref('345')
</script>
<template>
<input v-maska data-maska="#-#" id="input1" value="123" />
<input v-maska data-maska="#-#" id="input2" v-model="initial" />
</template>
test/components/Multiple.vue
+1 -1
View File
@@ -27,7 +27,7 @@ const onMaska2 = () => {
<input id="checkbox" type="checkbox" v-model="isEager" />
<input
id="input1"
v-maska:[options]
v-maska="options"
data-maska="#-#"
v-model="value1"
@maska="onMaska1"
test/components/Options.vue
+3 -5
View File
@@ -4,9 +4,7 @@ import { vMaska } from '../../src'
export default {
data() {
return {
bound: {
masked: ''
}
bound: ''
}
},
directives: {
@@ -16,6 +14,6 @@ export default {
</script>
<template>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.masked }}</div>
<input v-maska:bound data-maska="#-#" />
<div>{{ bound }}</div>
</template>
test/directive.test.ts
+13 -8
View File
@@ -2,18 +2,18 @@ import { nextTick } from 'vue'
import { expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import BindInitial from './components/BindInitial.vue'
import BindCompleted from './components/BindCompleted.vue'
import BindMasked from './components/BindMasked.vue'
import BindUnmasked from './components/BindUnmasked.vue'
import Callbacks from './components/Callbacks.vue'
import ChangeValue from './components/ChangeValue.vue'
import Completed from './components/Completed.vue'
import Config from './components/Config.vue'
import Custom from './components/Custom.vue'
import DataAttr from './components/DataAttr.vue'
import Dynamic from './components/Dynamic.vue'
import Events from './components/Events.vue'
import Hooks from './components/Hooks.vue'
import Initial from './components/Initial.vue'
import Model from './components/Model.vue'
import Multiple from './components/Multiple.vue'
import Options from './components/Options.vue'
@@ -63,13 +63,14 @@ test('dynamic mask', async () => {
})
test('initial value', async () => {
const wrapper = mount(BindInitial)
const input = wrapper.get('input')
const wrapper = mount(Initial)
const input1 = wrapper.get<HTMLInputElement>('#input1')
const input2 = wrapper.get<HTMLInputElement>('#input2')
await nextTick()
await new Promise((r) => setTimeout(r))
expect(input.element.value).toBe('1-2')
expect(wrapper.get('div').element.textContent).toBe('1-2')
expect(input1.element.value).toBe('1-2')
expect(input2.element.value).toBe('3-4')
})
test('bind masked', async () => {
@@ -77,6 +78,7 @@ test('bind masked', async () => {
const input = wrapper.get('input')
await input.setValue('123')
expect(input.element.value).toBe('1-2')
expect(wrapper.get('div').element.textContent).toBe('1-2')
})
@@ -86,12 +88,13 @@ test('bind unmasked', async () => {
const input = wrapper.get('input')
await input.setValue('123')
expect(input.element.value).toBe('1-2')
expect(wrapper.get('div').element.textContent).toBe('12')
})
test('bind completed', async () => {
const wrapper = mount(Completed)
const wrapper = mount(BindCompleted)
const input = wrapper.get('input')
await input.setValue('12')
@@ -179,6 +182,8 @@ test('multiple inputs', async () => {
await checkbox.setValue()
expect(checkbox.element).toBeChecked()
await new Promise((r) => setTimeout(r))
expect(input.element.value).toBe('1-')
expect(wrapper.emitted('mask1')).toHaveLength(3)
expect(wrapper.emitted('mask2')).toHaveLength(1)
test/mask-input.test.ts
+12 -12
View File
@@ -176,7 +176,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledOnce()
expect(context.onMaska).toHaveBeenCalledWith({
completed: false,
masked: '1',
masked: '$1',
unmasked: '1'
})
})
@@ -191,7 +191,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(3)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: false,
masked: '123',
masked: '$123',
unmasked: '123'
})
})
@@ -206,7 +206,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(4)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234',
masked: '$1,234',
unmasked: '1234'
})
})
@@ -221,7 +221,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(7)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234567',
masked: '$1,234,567',
unmasked: '1234567'
})
})
@@ -236,7 +236,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(5)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '123.4',
masked: '$123.4',
unmasked: '1234'
})
})
@@ -251,7 +251,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(6)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '123.45',
masked: '$123.45',
unmasked: '12345'
})
})
@@ -266,7 +266,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(7)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '123.45',
masked: '$123.45',
unmasked: '12345'
})
})
@@ -281,7 +281,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(8)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234.56',
masked: '$1,234.56',
unmasked: '123456'
})
})
@@ -296,7 +296,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(8)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234.56',
masked: '$1,234.56',
unmasked: '123456'
})
})
@@ -311,7 +311,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(8)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234.5',
masked: '$1,234.5',
unmasked: '12345'
})
})
@@ -326,7 +326,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(9)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234.',
masked: '$1,234.',
unmasked: '1234'
})
})
@@ -341,7 +341,7 @@ describe('test hooks', () => {
expect(context.onMaska).toHaveBeenCalledTimes(10)
expect(context.onMaska).toHaveBeenLastCalledWith({
completed: true,
masked: '1234',
masked: '$1,234',
unmasked: '1234'
})
})