mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-05-15 11:59:38 +03:00
Code Activity

Merge pull request #204 from IlyaSemenov/replace_binded_bound

Browse Source 
Replace "binded" with "bound"
This commit is contained in:
Alexander Shabunevich
2024-03-30 12:02:34 +03:00
committed by GitHub
parent 18191d23ef a38e8a2512
commit fe2dc8a766
9 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/README.md
+11 -11
View File
@@ -153,15 +153,15 @@ import { reactive, ref } from "vue"
import { vMaska } from "maska"
const maskedValue = ref('')
const bindedObject = reactive({})
const boundObject = reactive({})
</script>
<template>
<input v-maska="bindedObject" v-model="maskedValue">
<input v-maska="boundObject" v-model="maskedValue">
Masked value: {{ maskedValue }} or {{ bindedObject.masked }}
Unmasked value: {{ bindedObject.unmasked }}
<span v-if="bindedObject.completed">✅ Mask completed</span>
Masked value: {{ maskedValue }} or {{ boundObject.masked }}
Unmasked value: {{ boundObject.unmasked }}
<span v-if="boundObject.completed">✅ Mask completed</span>
</template>
```
@@ -175,7 +175,7 @@ export default {
directives: { maska: vMaska },
data: () => ({
maskedValue: "",
bindedObject: {
boundObject: {
masked: "",
unmasked: "",
completed: false
@@ -185,11 +185,11 @@ export default {
</script>
<template>
<input v-maska="bindedObject" v-model="maskedValue">
<input v-maska="boundObject" v-model="maskedValue">
Masked value: {{ maskedValue }} or {{ bindedObject.masked }}
Unmasked value: {{ bindedObject.unmasked }}
<span v-if="bindedObject.completed">✅ Mask completed</span>
Masked value: {{ maskedValue }} or {{ boundObject.masked }}
Unmasked value: {{ boundObject.unmasked }}
<span v-if="boundObject.completed">✅ Mask completed</span>
</template>
```
<!-- tabs:end -->
@@ -245,7 +245,7 @@ export default {
You can set options and bind to an object at the same time:
``` html
<input v-maska:[options]="bindedObject">
<input v-maska:[options]="boundObject">
```
#### Global registration of directive
src/directive.ts
+4 -4
View File
@@ -31,11 +31,11 @@ export const vMaska: MaskaDirective = (el, binding) => {
}
if (binding.value != null) {
const binded = binding.value
const bound = binding.value
const onMaska = (detail: MaskaDetail): void => {
binded.masked = detail.masked
binded.unmasked = detail.unmasked
binded.completed = detail.completed
bound.masked = detail.masked
bound.unmasked = detail.unmasked
bound.completed = detail.completed
}
opts.onMaska =
test/components/BindInitial.vue
+3 -3
View File
@@ -2,10 +2,10 @@
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const binded = reactive<Partial<MaskaDetail>>({})
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="binded" data-maska="#-#" value="123" />
<div>{{ binded.masked }}</div>
<input v-maska="bound" data-maska="#-#" value="123" />
<div>{{ bound.masked }}</div>
</template>
test/components/BindMasked.vue
+3 -3
View File
@@ -2,10 +2,10 @@
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const binded = reactive<Partial<MaskaDetail>>({})
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="binded" data-maska="#-#" />
<div>{{ binded.masked }}</div>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.masked }}</div>
</template>
test/components/BindUnmasked.vue
+3 -3
View File
@@ -2,10 +2,10 @@
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const binded = reactive<Partial<MaskaDetail>>({})
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="binded" data-maska="#-#" />
<div>{{ binded.unmasked }}</div>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.unmasked }}</div>
</template>
test/components/Callbacks.vue
+4 -4
View File
@@ -4,8 +4,8 @@ import { MaskaDetail, vMaska } from '../../src'
const emit = defineEmits(['mask1', 'mask2', 'mask3'])
const binded1 = reactive({})
const binded2 = reactive({})
const bound1 = reactive({})
const bound2 = reactive({})
const options1 = {
onMaska: (detail: MaskaDetail) => emit('mask1', detail)
@@ -19,6 +19,6 @@ const options2 = {
</script>
<template>
<input id="input1" v-maska:[options1]="binded1" data-maska="#-#" />
<input id="input2" v-maska:[options2]="binded2" data-maska="#-#" />
<input id="input1" v-maska:[options1]="bound1" data-maska="#-#" />
<input id="input2" v-maska:[options2]="bound2" data-maska="#-#" />
</template>
test/components/Completed.vue
+3 -3
View File
@@ -2,11 +2,11 @@
import { reactive } from 'vue'
import { MaskaDetail, vMaska } from '../../src'
const binded = reactive<Partial<MaskaDetail>>({})
const bound = reactive<Partial<MaskaDetail>>({})
</script>
<template>
<input v-maska="binded" data-maska="#-#-#" />
<div v-if="binded.completed">Completed</div>
<input v-maska="bound" data-maska="#-#-#" />
<div v-if="bound.completed">Completed</div>
<div v-else>Uncompleted</div>
</template>
test/components/Config.vue
+3 -3
View File
@@ -2,7 +2,7 @@
import { reactive } from 'vue'
import { vMaska, MaskaDetail, MaskInputOptions } from '../../src'
const binded = reactive<Partial<MaskaDetail>>({})
const bound = reactive<Partial<MaskaDetail>>({})
const config = reactive<MaskInputOptions>({
mask: 'A A',
tokens: {
@@ -16,6 +16,6 @@ const config = reactive<MaskInputOptions>({
</script>
<template>
<input v-maska:[config]="binded" />
<div>{{ binded.masked }}</div>
<input v-maska:[config]="bound" />
<div>{{ bound.masked }}</div>
</template>
test/components/Options.vue
+3 -3
View File
@@ -4,7 +4,7 @@ import { vMaska } from '../../src'
export default {
data() {
return {
binded: {
bound: {
masked: ''
}
}
@@ -16,6 +16,6 @@ export default {
</script>
<template>
<input v-maska="binded" data-maska="#-#" />
<div>{{ binded.masked }}</div>
<input v-maska="bound" data-maska="#-#" />
<div>{{ bound.masked }}</div>
</template>