diff --git a/README.md b/README.md index 6113df6..f038003 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/v3/README.md b/docs/v3/README.md index aa341f4..4dec31b 100644 --- a/docs/v3/README.md +++ b/docs/v3/README.md @@ -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 diff --git a/docs/v3/_sidebar.md b/docs/v3/_sidebar.md index fcbd699..b55329b 100644 --- a/docs/v3/_sidebar.md +++ b/docs/v3/_sidebar.md @@ -1,5 +1,7 @@ -- [Introduction](/) -- [Upgrade from v2](/upgrade) +- Quickstart + - [Introduction](/) + - [Installation](/install) + - [Upgrade from v2](/upgrade) - Usage - [Vanilla](/vanilla) - [Vue](/vue) diff --git a/docs/v3/alpine.md b/docs/v3/alpine.md index 78de307..796df8f 100644 --- a/docs/v3/alpine.md +++ b/docs/v3/alpine.md @@ -1,41 +1,5 @@ # Usage with Alpine.js -## Installation - - -### **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 - - - - -``` - -This will automatically register Maska plugin inside Alpine. - - - -## Directive signature - Maska provides custom Alpine.js directive for use with input: ```html diff --git a/docs/v3/install.md b/docs/v3/install.md new file mode 100644 index 0000000..2b5177a --- /dev/null +++ b/docs/v3/install.md @@ -0,0 +1,164 @@ +# Installation + +## With bundler + +```sh +npm install maska@3 +``` + + +### **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 + + + +``` + +### **Vue** + +And then use it in your `.vue` component: + +```js + + + +``` + + + +## From CDN + + +### **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 + + +``` + +### **Alpine** + +Include Maska from CDN, just make sure to include it **before** Alpine's core JS file: + +```html + + + + +``` +This will automatically register Maska plugin inside Alpine. + +### **Vue** + +You can use Maska directly from CDN and register directive: + +```html + + +``` + + + +## With importmap + +For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps): + + +### **Vanilla JS** + +```html + + +``` + +### **Alpine** + +```html + + +``` + +### **Vue** + +```html + + +``` + + +?> Notice that we are using ` diff --git a/docs/v3/svelte.md b/docs/v3/svelte.md index 639259c..3491784 100644 --- a/docs/v3/svelte.md +++ b/docs/v3/svelte.md @@ -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' - - -``` - - -## 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 @@ -47,12 +28,12 @@ To set default [options](/options) for the mask, pass options via **directive va ```svelte diff --git a/docs/v3/upgrade.md b/docs/v3/upgrade.md index 831ca83..bf95b83 100644 --- a/docs/v3/upgrade.md +++ b/docs/v3/upgrade.md @@ -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({ ``` + +## 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 +``` diff --git a/docs/v3/vanilla.md b/docs/v3/vanilla.md index 611bc36..25c2156 100644 --- a/docs/v3/vanilla.md +++ b/docs/v3/vanilla.md @@ -1,61 +1,5 @@ # Usage without a framework -## Installation - - -### **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 - - -``` - -### **From CDN / ES** - -For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps): - -```html - - -``` - -?> Notice that we are using ` - -``` - -### **From CDN / ES** - -For modern browsers you can use ES modules build with (optional) [import maps](https://caniuse.com/import-maps): - -```html - - -``` - -?> Notice that we are using `