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 ☕️ ## Support ☕️
> ❤️ [Please support](https://boosty.to/beholdr) Maska future development! > ❤️ [Please support](https://boosty.to/beholdr) Maska development!
## Features ✨ ## Features ✨
- No dependencies and small size: ~3 Kb gziped - 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 - Works with native and custom inputs
- Custom tokens with modifiers, transform functions and hooks - Custom tokens with modifiers, transform functions and hooks
- Number mask mode - 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. 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 ## Main components
docs/v3/_sidebar.md
+4 -2
View File
@@ -1,5 +1,7 @@
- [Introduction](/) - Quickstart
- [Upgrade from v2](/upgrade) - [Introduction](/)
- [Installation](/install)
- [Upgrade from v2](/upgrade)
- Usage - Usage
- [Vanilla](/vanilla) - [Vanilla](/vanilla)
- [Vue](/vue) - [Vue](/vue)
docs/v3/alpine.md
-36
View File
@@ -1,41 +1,5 @@
# Usage with Alpine.js # 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: Maska provides custom Alpine.js directive for use with input:
```html ```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 ```vue
<script setup> <script setup>
const options = { mask: '#-#' } const options = { mask: '#-#' }
</script> </script>
<input v-maska="options"> <input v-maska="options">
docs/v3/svelte.md
+6 -25
View File
@@ -1,24 +1,5 @@
# Usage with Svelte # 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: Maska provides simple Svelte action for use with input:
```html ```html
@@ -34,7 +15,7 @@ Apply `maska` action to the input along with `data-maska` attribite:
```svelte ```svelte
<script> <script>
import { maska } from '@maskajs/svelte' import { maska } from '@maskajs/svelte'
</script> </script>
<input use:maska data-maska="#-#"> <input use:maska data-maska="#-#">
@@ -47,12 +28,12 @@ To set default [options](/options) for the mask, pass options via **directive va
```svelte ```svelte
<script> <script>
import { maska } from '@maskajs/svelte' import { maska } from '@maskajs/svelte'
const options = { const options = {
mask: "#-#", mask: "#-#",
eager: true eager: true
} }
</script> </script>
<input use:maska={options} data-maska-reversed> <input use:maska={options} data-maska-reversed>
docs/v3/upgrade.md
+32 -6
View File
@@ -1,15 +1,21 @@
# Upgrade from v2 # 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 ```js
- package `@maskajs/vue` is for Vue version 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 ## New directive format
@@ -74,3 +80,23 @@ const options = reactive({
<input v-maska="options"> <input v-maska="options">
</template> </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 # 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 ## Minimal example
Add to your input element `data-maska` attribute: Add to your input element `data-maska` attribute:
docs/v3/vue.md
+34 -87
View File
@@ -1,58 +1,5 @@
# Usage with Vue # 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: Maska provides custom Vue directive for use with input:
```html ```html
@@ -75,7 +22,7 @@ Import `vMaska` directive and apply it to the input along with `data-maska` attr
```vue ```vue
<script setup> <script setup>
import { vMaska } from "maska" import { vMaska } from "maska"
</script> </script>
<template> <template>
@@ -87,11 +34,11 @@ import { vMaska } from "maska"
```vue ```vue
<script> <script>
import { vMaska } from "maska" import { vMaska } from "maska"
export default { export default {
directives: { maska: vMaska } directives: { maska: vMaska }
} }
</script> </script>
<template> <template>
@@ -110,14 +57,14 @@ To set default [options](/options) for the mask, pass options via **directive va
```vue ```vue
<script setup> <script setup>
import { reactive } from "vue" import { reactive } from "vue"
import { vMaska } from "maska" import { vMaska } from "maska"
// could be plain object too // could be plain object too
const options = reactive({ const options = reactive({
mask: "#-#", mask: "#-#",
eager: true eager: true
}) })
</script> </script>
<template> <template>
@@ -129,17 +76,17 @@ const options = reactive({
```vue ```vue
<script> <script>
import { vMaska } from "maska" import { vMaska } from "maska"
export default { export default {
directives: { maska: vMaska }, directives: { maska: vMaska },
data: () => ({ data: () => ({
options: { options: {
mask: "#-#", mask: "#-#",
eager: true eager: true
} }
}) })
} }
</script> </script>
<template> <template>
@@ -162,11 +109,11 @@ To get masked value you can use standard `v-model` directive on the input. But i
```vue ```vue
<script setup> <script setup>
import { ref } from "vue" import { ref } from "vue"
import { vMaska } from "maska" import { vMaska } from "maska"
const maskedvalue = ref('') const maskedvalue = ref('')
const unmaskedvalue = ref('') const unmaskedvalue = ref('')
</script> </script>
<template> <template>
@@ -181,15 +128,15 @@ const unmaskedvalue = ref('')
```vue ```vue
<script> <script>
import { vMaska } from "maska" import { vMaska } from "maska"
export default { export default {
directives: { maska: vMaska }, directives: { maska: vMaska },
data: () => ({ data: () => ({
maskedvalue: "", maskedvalue: "",
unmaskedvalue: "" unmaskedvalue: ""
}) })
} }
</script> </script>
<template> <template>
index.html
+1 -1
View File
@@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="refresh" content="0;URL=demo/" /> <meta http-equiv="refresh" content="0;URL=/demo/" />
</head> </head>
</html> </html>