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

docs: update for single package

Browse Source
This commit is contained in:
Alexander Shabunevich
2024-06-02 15:43:46 +03:00
parent 9b454e996a
commit 0ef436ca3d
11 changed files with 245 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -21,12 +21,12 @@
## Support ☕️
> ❤️ [Please support](https://boosty.to/beholdr) Maska future development!
> ❤️ [Please support](https://boosty.to/beholdr) Maska development!
## Features ✨
- No dependencies and small size: ~3 Kb gziped
- Vanilla JS version + Vue 2/3, Alpine.js, Svelte integrations
- Vanilla JS version + Vue 2/3, Alpine.js and Svelte integrations
- Works with native and custom inputs
- Custom tokens with modifiers, transform functions and hooks
- Number mask mode
docs/v3/README.md
+1 -1
View File
@@ -6,7 +6,7 @@
You can use it with vanilla javascript or with your favorite framework. Out of the box there is integration with Vue 2/3, Svelte and Alpine.js, but you can integrate it into any framework.
> ❤️ [Please support](https://boosty.to/beholdr) Maska future development!
> ❤️ [Please support](https://boosty.to/beholdr) Maska development!
## Main components
docs/v3/_sidebar.md
+4 -2
View File
@@ -1,5 +1,7 @@
- [Introduction](/)
- [Upgrade from v2](/upgrade)
- Quickstart
- [Introduction](/)
- [Installation](/install)
- [Upgrade from v2](/upgrade)
- Usage
- [Vanilla](/vanilla)
- [Vue](/vue)
docs/v3/alpine.md
-36
View File
@@ -1,41 +1,5 @@
# Usage with Alpine.js
## Installation
<!-- tabs:start -->
### **With NPM**
```sh
npm install @maskajs/alpine@3
```
And then register it:
```js
import Alpine from 'alpinejs'
import { xMaska } from '@maskajs/alpine'
Alpine.plugin(xMaska)
...
```
### **From CDN**
You can use Maska directly from CDN using simple script tag with `data-init` attribute, just make sure to include it BEFORE Alpine's core JS file:
```html
<!-- Maska Plugin -->
<script data-init src="https://cdn.jsdelivr.net/npm/@maskajs/alpine@3/dist/maska.umd.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```
This will automatically register Maska plugin inside Alpine.
<!-- tabs:end -->
## Directive signature
Maska provides custom Alpine.js directive for use with input:
```html
docs/v3/install.md
+164
View File
@@ -0,0 +1,164 @@
# Installation
## With bundler
```sh
npm install maska@3
```
<!-- tabs:start -->
### **Vanilla JS**
And then import it in your code:
```js
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
```
### **Alpine**
And then register it as custom plugin:
```js
import Alpine from 'alpinejs'
import { xMaska } from 'maska/alpine'
Alpine.plugin(xMaska)
```
### **Svelte**
And then use it in your `.svelte` component:
```svelte
<script>
import { maska } from 'maska/svelte'
</script>
<input use:maska data-maska="#-#" />
```
### **Vue**
And then use it in your `.vue` component:
```js
<script setup>
import { vMaska } from 'maska/vue'
</script>
<template>
<input v-maska data-maska="#-#" />
</template>
```
<!-- tabs:end -->
## From CDN
<!-- tabs:start -->
### **Vanilla JS**
You can use Maska directly from CDN with a simple script tag as UMD-build.
Library API will be exposed on the global `Maska` object:
```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/maska.js"></script>
<script>
const { Mask, MaskInput } = Maska
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
### **Alpine**
Include Maska from CDN, just make sure to include it **before** Alpine's core JS file:
```html
<!-- Maska Plugin -->
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/alpine.js"></script>
<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```
This will automatically register Maska plugin inside Alpine.
### **Vue**
You can use Maska directly from CDN and register directive:
```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/cdn/vue.js"></script>
<script>
const { vMaska } = Maska
Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```
<!-- tabs:end -->
## With importmap
For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
<!-- tabs:start -->
### **Vanilla JS**
```html
<script type="importmap">
{
"imports": {
"maska": "https://cdn.jsdelivr.net/npm/maska@3/dist/maska.mjs"
}
}
</script>
<script type="module">
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
### **Alpine**
```html
<script type="importmap">
{
"imports": {
"maska/alpine": "https://cdn.jsdelivr.net/npm/maska@3/dist/alpine.mjs"
}
}
</script>
<script type="module">
import Alpine from 'alpinejs'
import { xMaska } from 'maska/alpine'
Alpine.plugin(xMaska)
</script>
```
### **Vue**
```html
<script type="importmap">
{
"imports": {
"maska/vue": "https://cdn.jsdelivr.net/npm/maska@3/dist/vue.mjs"
}
}
</script>
<script type="module">
import { vMaska } from 'maska/vue'
Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```
<!-- tabs:end -->
?> Notice that we are using `<script type="module">` in this case.
docs/v3/issues.md
+1 -1
View File
@@ -15,7 +15,7 @@ Some frameworks with custom components may not pass `data-` attributes to native
```vue
<script setup>
const options = { mask: '#-#' }
const options = { mask: '#-#' }
</script>
<input v-maska="options">
docs/v3/svelte.md
+6 -25
View File
@@ -1,24 +1,5 @@
# Usage with Svelte
## Installation
You can install Maska with following command:
```sh
npm install @maskajs/svelte@3
```
And then use it in your `.svelte` component:
```svelte
import { maska } from '@maskajs/svelte'
<input use:maska data-maska="#-#" />
```
## Action signature
Maska provides simple Svelte action for use with input:
```html
@@ -34,7 +15,7 @@ Apply `maska` action to the input along with `data-maska` attribite:
```svelte
<script>
import { maska } from '@maskajs/svelte'
import { maska } from '@maskajs/svelte'
</script>
<input use:maska data-maska="#-#">
@@ -47,12 +28,12 @@ To set default [options](/options) for the mask, pass options via **directive va
```svelte
<script>
import { maska } from '@maskajs/svelte'
import { maska } from '@maskajs/svelte'
const options = {
mask: "#-#",
eager: true
}
const options = {
mask: "#-#",
eager: true
}
</script>
<input use:maska={options} data-maska-reversed>
docs/v3/upgrade.md
+32 -6
View File
@@ -1,15 +1,21 @@
# Upgrade from v2
## New package for Vue
## New package structure
Maska v2 was a universal package for both vanilla JS and Vue version. Maska v3 is separated to several different packages:
Maska v3 has different entries for framework-specific exports.
Import of vue directive in v2:
- package `maska` is for vanilla version
- package `@maskajs/vue` is for Vue version
```js
import { vMaska } from 'maska'
```
If you used Maska with Vue you need to delete `maska` package and install `@maskajs/vue` package.
Now you should import vue directive from `maska/vue`:
?> If you used Maska without a framework, just upgrade package to `maska@3` version.
```js
import { vMaska } from 'maska/vue'
```
!> Filenames have also been changed. Please see the [Installation](install) for more information.
## New directive format
@@ -74,3 +80,23 @@ const options = reactive({
<input v-maska="options">
</template>
```
## Changed eager mode
With v2, when using eager mode, entered characters appeared after the static mask characters:
```js
const mask = new Mask({ mask: '1##', eager: true })
mask.masked('1') // -> 11
mask.masked('12') // -> 112
mask.masked('2') // -> 12
```
Now they are taken into account as these static symbols:
```js
const mask = new Mask({ mask: '1##', eager: true })
mask.masked('1') // -> 1
mask.masked('12') // -> 12
mask.masked('2') // -> 12
```
docs/v3/vanilla.md
-56
View File
@@ -1,61 +1,5 @@
# Usage without a framework
## Installation
<!-- tabs:start -->
### **With NPM**
```sh
npm install maska@3
```
And then import it in your code:
```js
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
```
### **From CDN / UMD**
You can use Maska directly from CDN with simple script tag. Library API will be exposed on the global `Maska` object:
```html
<script src="https://cdn.jsdelivr.net/npm/maska@3/dist/maska.umd.js"></script>
<script>
const { Mask, MaskInput } = Maska
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
### **From CDN / ES**
For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
```html
<script type="importmap">
{
"imports": {
"maska": "https://cdn.jsdelivr.net/npm/maska@3/dist/maska.mjs"
}
}
</script>
<script type="module">
import { Mask, MaskInput } from 'maska'
new MaskInput("[data-maska]") // for masked input
const mask = new Mask({ mask: "#-#" }) // for programmatic use
</script>
```
?> Notice that we are using `<script type="module">` in this case.
<!-- tabs:end -->
## Minimal example
Add to your input element `data-maska` attribute:
docs/v3/vue.md
+34 -87
View File
@@ -1,58 +1,5 @@
# Usage with Vue
## Installation
<!-- tabs:start -->
### **With NPM**
```sh
npm install @maskajs/vue@3
```
And then import it in your `.vue` component:
```js
import { vMaska } from '@maskajs/vue'
```
### **From CDN / UMD**
You can use Maska directly from CDN with simple script tag. Library API will be exposed on the global `Maska` object:
```html
<script src="https://cdn.jsdelivr.net/npm/@maskajs/vue@3/dist/maska.umd.js"></script>
<script>
const { vMaska } = Maska
Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```
### **From CDN / ES**
For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps):
```html
<script type="importmap">
{
"imports": {
"maska": "https://cdn.jsdelivr.net/npm/@maskajs/vue@3/dist/maska.mjs"
}
}
</script>
<script type="module">
import { vMaska } from 'maska'
Vue.createApp({ directives: { maska: vMaska }}).mount('#app')
</script>
```
?> Notice that we are using `<script type="module">` in this case.
<!-- tabs:end -->
## Directive signature
Maska provides custom Vue directive for use with input:
```html
@@ -75,7 +22,7 @@ Import `vMaska` directive and apply it to the input along with `data-maska` attr
```vue
<script setup>
import { vMaska } from "maska"
import { vMaska } from "maska"
</script>
<template>
@@ -87,11 +34,11 @@ import { vMaska } from "maska"
```vue
<script>
import { vMaska } from "maska"
import { vMaska } from "maska"
export default {
directives: { maska: vMaska }
}
export default {
directives: { maska: vMaska }
}
</script>
<template>
@@ -110,14 +57,14 @@ To set default [options](/options) for the mask, pass options via **directive va
```vue
<script setup>
import { reactive } from "vue"
import { vMaska } from "maska"
import { reactive } from "vue"
import { vMaska } from "maska"
// could be plain object too
const options = reactive({
mask: "#-#",
eager: true
})
// could be plain object too
const options = reactive({
mask: "#-#",
eager: true
})
</script>
<template>
@@ -129,17 +76,17 @@ const options = reactive({
```vue
<script>
import { vMaska } from "maska"
import { vMaska } from "maska"
export default {
directives: { maska: vMaska },
data: () => ({
options: {
mask: "#-#",
eager: true
}
})
}
export default {
directives: { maska: vMaska },
data: () => ({
options: {
mask: "#-#",
eager: true
}
})
}
</script>
<template>
@@ -162,11 +109,11 @@ To get masked value you can use standard `v-model` directive on the input. But i
```vue
<script setup>
import { ref } from "vue"
import { vMaska } from "maska"
import { ref } from "vue"
import { vMaska } from "maska"
const maskedvalue = ref('')
const unmaskedvalue = ref('')
const maskedvalue = ref('')
const unmaskedvalue = ref('')
</script>
<template>
@@ -181,15 +128,15 @@ const unmaskedvalue = ref('')
```vue
<script>
import { vMaska } from "maska"
import { vMaska } from "maska"
export default {
directives: { maska: vMaska },
data: () => ({
maskedvalue: "",
unmaskedvalue: ""
})
}
export default {
directives: { maska: vMaska },
data: () => ({
maskedvalue: "",
unmaskedvalue: ""
})
}
</script>
<template>
index.html
+1 -1
View File
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="0;URL=demo/" />
<meta http-equiv="refresh" content="0;URL=/demo/" />
</head>
</html>