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

feat: simple mode for mask directive

Browse Source 
Allow string passing to set a mask without data-maska attribute
This commit is contained in:
Alexander Shabunevich
2024-06-12 17:52:55 +03:00
parent cb87ea76c0
commit 488a52f760
16 changed files with 150 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/v3/alpine.md
+15 -6
View File
@@ -3,7 +3,7 @@
Maska provides custom Alpine.js directive for use with input:
```html
<input x-maska:argument.modifier="options">
<input x-maska:argument.modifier="value">
```
- `argument` is a name of the bound variable (see example below)
@@ -11,21 +11,24 @@ Maska provides custom Alpine.js directive for use with input:
- `masked` (default): variable will get a masked value (as in v-model)
- `unmasked`: variable will get an unmasked (raw) value
- `completed`: variable will be boolean, showing that mask is completed
- `options` is object with default options
- `value` could be one of:
- `string` for the mask value (should be enclosed in additional quotation marks: `"'#-#'"`)
- `object` with a default options
## Minimal example
Apply `xMaska` directive to the input along with `data-maska` attribite:
Apply `xMaska` directive to the input:
```html
<input x-maska data-maska="#-#">
<input x-maska="'#-#'">
```
?> Please note that the mask value is enclosed in additional quotation marks: `"'#-#'"`.
## Set mask options
To set default [options](/options) for the mask, pass options via **directive value**:
To set a default [options](/options) for the mask, pass options via **directive value**:
```html
<div x-data="{ options: { mask: '#-#', eager: true }}">
@@ -33,6 +36,12 @@ To set default [options](/options) for the mask, pass options via **directive va
</div>
```
Or you can pass an options object directly:
```html
<input x-maska="{ mask: '#-#', eager: true }" data-maska-reversed>
```
You can override default options with `data-maska-` attributes on the input. In the example above we set **eager** mode using options and **reversed** mode using `data-maska-reversed` attribute.
@@ -42,7 +51,7 @@ To get masked value you can use standard `x-model` directive on the input. But i
```html
<div x-data="{ maskedvalue: '', unmaskedvalue: '' }">
<input x-maska:unmaskedvalue.unmasked data-maska="#-#" x-model="maskedvalue">
<input x-maska:unmaskedvalue.unmasked="'#-#'" x-model="maskedvalue">
Masked value: <span x-text="maskedvalue"></span>
Unmasked value: <span x-text="unmaskedvalue"></span>
docs/v3/install.md
+15 -11
View File
@@ -12,7 +12,7 @@ npm install maska
And then import it in your code:
```js
import { Mask, MaskInput } from 'maska'
import { Mask, MaskInput } from "maska"
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
@@ -23,22 +23,26 @@ const mask = new Mask({ mask: "#-#" }) // for programmatic use
And then register it as custom plugin:
```js
import Alpine from 'alpinejs'
import { xMaska } from 'maska/alpine'
import Alpine from "alpinejs"
import { xMaska } from "maska/alpine"
Alpine.plugin(xMaska)
```
```html
<input x-maska="'#-#'">
```
### **Svelte**
And then use it in your `.svelte` component:
```svelte
<script>
import { maska } from 'maska/svelte'
import { maska } from "maska/svelte"
</script>
<input use:maska data-maska="#-#" />
<input use:maska={'#-#'}>
```
### **Vue**
@@ -47,11 +51,11 @@ And then use it in your `.vue` component:
```js
<script setup>
import { vMaska } from 'maska/vue'
import { vMaska } from "maska/vue"
</script>
<template>
<input v-maska data-maska="#-#" />
<input v-maska="'#-#'">
</template>
```
<!-- tabs:end -->
@@ -118,7 +122,7 @@ For modern browsers you can use ES modules build with (optional) [import maps](h
}
</script>
<script type="module">
import { Mask, MaskInput } from 'maska'
import { Mask, MaskInput } from "maska"
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
@@ -136,8 +140,8 @@ For modern browsers you can use ES modules build with (optional) [import maps](h
}
</script>
<script type="module">
import Alpine from 'alpinejs'
import { xMaska } from 'maska/alpine'
import Alpine from "alpinejs"
import { xMaska } from "maska/alpine"
Alpine.plugin(xMaska)
</script>
@@ -154,7 +158,7 @@ For modern browsers you can use ES modules build with (optional) [import maps](h
}
</script>
<script type="module">
import { vMaska } from 'maska/vue'
import { vMaska } from "maska/vue"
Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
docs/v3/svelte.md
+12 -8
View File
@@ -3,34 +3,38 @@
Maska provides simple Svelte action for use with input:
```html
<input use:maska={options}>
<input use:maska={value}>
```
- `options` is object with default options
- `value` could be one of:
- `string` for the mask value (should be enclosed in additional quotation marks: `{'#-#'}`)
- `object` with a default options
## Minimal example
Apply `maska` action to the input along with `data-maska` attribite:
Apply `maska` action to the input:
```svelte
<script>
import { maska } from '@maskajs/svelte'
import { maska } from "maska/svelte"
</script>
<input use:maska data-maska="#-#">
<input use:maska={'#-#'}>
```
?> Please note that the mask value is enclosed in additional quotation marks: `"'#-#'"`.
## Set mask options
To set default [options](/options) for the mask, pass options via **directive value**:
```svelte
<script>
import { maska } from '@maskajs/svelte'
<script lang="ts">
import { maska } from "maska/svelte"
import type { MaskInputOptions } from "maska"
const options = {
const options: MaskInputOptions = {
mask: "#-#",
eager: true
}
docs/v3/upgrade.md
+2 -2
View File
@@ -6,13 +6,13 @@ Maska v3 has different entries for framework-specific exports.
Import of vue directive in v2:
```js
import { vMaska } from 'maska'
import { vMaska } from "maska"
```
Now you should import vue directive from `maska/vue`:
```js
import { vMaska } from 'maska/vue'
import { vMaska } from "maska/vue"
```
!> Filenames have also been changed. Please see the [Installation](install) for more information.
docs/v3/vue.md
+14 -10
View File
@@ -3,7 +3,7 @@
Maska provides custom Vue directive for use with input:
```html
<input v-maska:argument.modifier="options">
<input v-maska:argument.modifier="value">
```
- `argument` is a name of the bound variable (see example below)
@@ -11,11 +11,13 @@ Maska provides custom Vue directive for use with input:
- `masked` (default): variable will get a masked value (as in v-model)
- `unmasked`: variable will get an unmasked (raw) value
- `completed`: variable will be boolean, showing that mask is completed
- `options` is object with default options
- `value` could be one of:
- `string` for the mask value (should be enclosed in additional quotation marks: `"'#-#'"`)
- `object` with a default options
## Minimal example
Import `vMaska` directive and apply it to the input along with `data-maska` attribite:
Import `vMaska` directive and apply it to the input:
<!-- tabs:start -->
### **Composition API**
@@ -26,7 +28,7 @@ Import `vMaska` directive and apply it to the input along with `data-maska` attr
</script>
<template>
<input v-maska data-maska="#-#">
<input v-maska="'#-#'">
</template>
```
@@ -42,11 +44,12 @@ Import `vMaska` directive and apply it to the input along with `data-maska` attr
</script>
<template>
<input v-maska data-maska="#-#">
<input v-maska="'#-#'">
</template>
```
<!-- tabs:end -->
?> Please note that the mask value is enclosed in additional quotation marks: `"'#-#'"`.
## Set mask options
@@ -56,12 +59,13 @@ To set default [options](/options) for the mask, pass options via **directive va
### **Composition API**
```vue
<script setup>
<script setup lang="ts">
import { reactive } from "vue"
import { vMaska } from "maska/vue"
import type { MaskInputOptions } from "maska"
// could be plain object too
const options = reactive({
const options = reactive<MaskInputOptions>({
mask: "#-#",
eager: true
})
@@ -119,7 +123,7 @@ To get masked value you can use standard `v-model` directive on the input. But i
</script>
<template>
<input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
<input v-maska:unmaskedValue.unmasked="'#-#'" v-model="maskedValue">
Masked value: {{ maskedValue }}
Unmasked value: {{ unmaskedValue }}
@@ -144,7 +148,7 @@ To get masked value you can use standard `v-model` directive on the input. But i
</script>
<template>
<input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
<input v-maska:unmaskedValue.unmasked="'#-#'" v-model="maskedValue">
Masked value: {{ maskedValue }}
Unmasked value: {{ unmaskedValue }}
@@ -168,7 +172,7 @@ export default defineNuxtPlugin((nuxtApp) => {
Now you can use v-maska directive in your app:
```html
<input v-model="value" v-maska data-maska="#-#" />
<input v-maska="'#-#'" />
```