mirror of
https://github.com/tenrok/maska.git
synced 2026-06-20 20:00:34 +03:00
feat!: separate packages
This commit is contained in:
Alexander Shabunevich
@@ -21,24 +21,24 @@ jobs:
|
|||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- name: Install
|
- name: Install
|
||||||
run: npm i
|
run: npm ci
|
||||||
|
|
||||||
- name: Test and Coverage
|
- name: Test and Coverage
|
||||||
run: npm run test:coverage
|
run: npm run test:coverage --workspace=maska
|
||||||
|
|
||||||
- name: Parse coverage
|
- name: Parse coverage
|
||||||
uses: sergeysova/jq-action@v2
|
uses: sergeysova/jq-action@v2
|
||||||
id: coverage
|
id: coverage
|
||||||
with:
|
with:
|
||||||
cmd: 'jq .total.statements.pct coverage/coverage-summary.json'
|
cmd: 'jq .total.statements.pct packages/maska/coverage/coverage-summary.json'
|
||||||
|
|
||||||
- name: Build demo
|
- name: Build demo
|
||||||
run: npm run build:demo
|
run: npm run build --workspace=docs
|
||||||
|
|
||||||
- name: Upload demo artifact
|
- name: Upload demo artifact
|
||||||
uses: actions/upload-pages-artifact@v1
|
uses: actions/upload-pages-artifact@v1
|
||||||
with:
|
with:
|
||||||
path: ./docs
|
path: ./packages/docs/docs
|
||||||
|
|
||||||
badge:
|
badge:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
# https://taskfile.dev
|
||||||
|
|
||||||
|
version: '3'
|
||||||
|
|
||||||
|
silent: true
|
||||||
|
|
||||||
|
tasks:
|
||||||
|
dev:maska: npm run dev --workspace=packages/maska
|
||||||
|
dev:maska-build-watch: npm run build:watch --workspace=packages/maska
|
||||||
|
dev:vue: npm run dev --workspace=packages/vue
|
||||||
|
|
||||||
|
build: npm run build --workspaces
|
||||||
|
|
||||||
|
test: npm run test --workspaces
|
||||||
|
coverage: npm run test:coverage --workspaces
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
|
|
||||||
import { vMaska } from '..'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
createApp(App)
|
|
||||||
.directive('maska', vMaska)
|
|
||||||
.mount('#demo-app')
|
|
||||||
Generated
+150
-92
@@ -1,32 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "maska",
|
"name": "maska",
|
||||||
"version": "3.0.0",
|
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "maska",
|
"workspaces": [
|
||||||
"version": "3.0.0",
|
"packages/*",
|
||||||
"license": "MIT",
|
"packages/docs"
|
||||||
"devDependencies": {
|
]
|
||||||
"@testing-library/dom": "^10.0.0",
|
|
||||||
"@testing-library/jest-dom": "^6.4.2",
|
|
||||||
"@testing-library/user-event": "^14.5.2",
|
|
||||||
"@types/node": "^20.12.7",
|
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
|
||||||
"@vitest/coverage-v8": "^1.5.0",
|
|
||||||
"@vue/test-utils": "^2.4.5",
|
|
||||||
"happy-dom": "^14.7.1",
|
|
||||||
"ts-standard": "^12.0.2",
|
|
||||||
"typescript": "^5.4.5",
|
|
||||||
"vite": "^5.2.8",
|
|
||||||
"vite-plugin-banner": "^0.7.1",
|
|
||||||
"vite-plugin-dts": "^3.8.2",
|
|
||||||
"vitest": "^1.5.0",
|
|
||||||
"vue": "^3.2.45",
|
|
||||||
"vue-live": "^2.5.4",
|
|
||||||
"vue-tsc": "^2.0.13"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"node_modules/@aashutoshrathi/word-wrap": {
|
"node_modules/@aashutoshrathi/word-wrap": {
|
||||||
"version": "1.2.6",
|
"version": "1.2.6",
|
||||||
@@ -804,6 +785,10 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@maskajs/vue": {
|
||||||
|
"resolved": "packages/vue",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/@microsoft/api-extractor": {
|
"node_modules/@microsoft/api-extractor": {
|
||||||
"version": "7.43.0",
|
"version": "7.43.0",
|
||||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
|
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
|
||||||
@@ -1006,9 +991,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
|
||||||
"integrity": "sha512-ahxSgCkAEk+P/AVO0vYr7DxOD3CwAQrT0Go9BJyGQ9Ef0QxVOfjDZMiF4Y2s3mLyPrjonchIMH/tbWHucJMykQ==",
|
"integrity": "sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
@@ -1019,9 +1004,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-android-arm64": {
|
"node_modules/@rollup/rollup-android-arm64": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.3.tgz",
|
||||||
"integrity": "sha512-lAarIdxZWbFSHFSDao9+I/F5jDaKyCqAPMq5HqnfpBw8dKDiCaaqM0lq5h1pQTLeIqueeay4PieGR5jGZMWprw==",
|
"integrity": "sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -1032,9 +1017,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.3.tgz",
|
||||||
"integrity": "sha512-SWsr8zEUk82KSqquIMgZEg2GE5mCSfr9sE/thDROkX6pb3QQWPp8Vw8zOq2GyxZ2t0XoSIUlvHDkrf5Gmf7x3Q==",
|
"integrity": "sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -1045,9 +1030,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-darwin-x64": {
|
"node_modules/@rollup/rollup-darwin-x64": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.3.tgz",
|
||||||
"integrity": "sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA==",
|
"integrity": "sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -1058,9 +1043,22 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.3.tgz",
|
||||||
"integrity": "sha512-nwlJ65UY9eGq91cBi6VyDfArUJSKOYt5dJQBq8xyLhvS23qO+4Nr/RreibFHjP6t+5ap2ohZrUJcHv5zk5ju/g==",
|
"integrity": "sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||||
|
"version": "4.14.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.14.3.tgz",
|
||||||
|
"integrity": "sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
@@ -1071,9 +1069,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.3.tgz",
|
||||||
"integrity": "sha512-Pg5TxxO2IVlMj79+c/9G0LREC9SY3HM+pfAwX7zj5/cAuwrbfj2Wv9JbMHIdPCfQpYsI4g9mE+2Bw/3aeSs2rQ==",
|
"integrity": "sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -1084,9 +1082,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.3.tgz",
|
||||||
"integrity": "sha512-cAOTjGNm84gc6tS02D1EXtG7tDRsVSDTBVXOLbj31DkwfZwgTPYZ6aafSU7rD/4R2a34JOwlF9fQayuTSkoclA==",
|
"integrity": "sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -1097,9 +1095,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.3.tgz",
|
||||||
"integrity": "sha512-4RyT6v1kXb7C0fn6zV33rvaX05P0zHoNzaXI/5oFHklfKm602j+N4mn2YvoezQViRLPnxP8M1NaY4s/5kXO5cw==",
|
"integrity": "sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ppc64"
|
"ppc64"
|
||||||
],
|
],
|
||||||
@@ -1110,9 +1108,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.3.tgz",
|
||||||
"integrity": "sha512-KNUH6jC/vRGAKSorySTyc/yRYlCwN/5pnMjXylfBniwtJx5O7X17KG/0efj8XM3TZU7raYRXJFFReOzNmL1n1w==",
|
"integrity": "sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"riscv64"
|
"riscv64"
|
||||||
],
|
],
|
||||||
@@ -1123,9 +1121,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.3.tgz",
|
||||||
"integrity": "sha512-xPV4y73IBEXToNPa3h5lbgXOi/v0NcvKxU0xejiFw6DtIYQqOTMhZ2DN18/HrrP0PmiL3rGtRG9gz1QE8vFKXQ==",
|
"integrity": "sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"s390x"
|
"s390x"
|
||||||
],
|
],
|
||||||
@@ -1136,9 +1134,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.3.tgz",
|
||||||
"integrity": "sha512-QBhtr07iFGmF9egrPOWyO5wciwgtzKkYPNLVCFZTmr4TWmY0oY2Dm/bmhHjKRwZoGiaKdNcKhFtUMBKvlchH+Q==",
|
"integrity": "sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -1149,9 +1147,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.3.tgz",
|
||||||
"integrity": "sha512-8zfsQRQGH23O6qazZSFY5jP5gt4cFvRuKTpuBsC1ZnSWxV8ZKQpPqOZIUtdfMOugCcBvFGRa1pDC/tkf19EgBw==",
|
"integrity": "sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -1162,9 +1160,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.3.tgz",
|
||||||
"integrity": "sha512-H4s8UjgkPnlChl6JF5empNvFHp77Jx+Wfy2EtmYPe9G22XV+PMuCinZVHurNe8ggtwoaohxARJZbaH/3xjB/FA==",
|
"integrity": "sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
@@ -1175,9 +1173,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.3.tgz",
|
||||||
"integrity": "sha512-djqpAjm/i8erWYF0K6UY4kRO3X5+T4TypIqw60Q8MTqSBaQNpNXDhxdjpZ3ikgb+wn99svA7jxcXpiyg9MUsdw==",
|
"integrity": "sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"ia32"
|
"ia32"
|
||||||
],
|
],
|
||||||
@@ -1188,9 +1186,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.3.tgz",
|
||||||
"integrity": "sha512-teAqzLT0yTYZa8ZP7zhFKEx4cotS8Tkk5XiqNMJhD4CpaWB1BHARE4Qy+RzwnXvSAYv+Q3jAqCVBS+PS+Yee8Q==",
|
"integrity": "sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==",
|
||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
@@ -2738,6 +2736,10 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/docs": {
|
||||||
|
"resolved": "packages/docs",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/doctrine": {
|
"node_modules/doctrine": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||||
@@ -5025,6 +5027,10 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/maska": {
|
||||||
|
"resolved": "packages/maska",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/merge-stream": {
|
"node_modules/merge-stream": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||||
@@ -5971,9 +5977,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/rollup": {
|
"node_modules/rollup": {
|
||||||
"version": "4.14.2",
|
"version": "4.14.3",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.2.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
|
||||||
"integrity": "sha512-WkeoTWvuBoFjFAhsEOHKRoZ3r9GfTyhh7Vff1zwebEFLEFjT1lG3784xEgKiTa7E+e70vsC81roVL2MP4tgEEQ==",
|
"integrity": "sha512-ag5tTQKYsj1bhrFC9+OEWqb5O6VYgtQDO9hPDBMmIbePwhfSr+ExlcU741t8Dhw5DkPCQf6noz0jb36D6W9/hw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/estree": "1.0.5"
|
"@types/estree": "1.0.5"
|
||||||
@@ -5986,21 +5992,22 @@
|
|||||||
"npm": ">=8.0.0"
|
"npm": ">=8.0.0"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"@rollup/rollup-android-arm-eabi": "4.14.2",
|
"@rollup/rollup-android-arm-eabi": "4.14.3",
|
||||||
"@rollup/rollup-android-arm64": "4.14.2",
|
"@rollup/rollup-android-arm64": "4.14.3",
|
||||||
"@rollup/rollup-darwin-arm64": "4.14.2",
|
"@rollup/rollup-darwin-arm64": "4.14.3",
|
||||||
"@rollup/rollup-darwin-x64": "4.14.2",
|
"@rollup/rollup-darwin-x64": "4.14.3",
|
||||||
"@rollup/rollup-linux-arm-gnueabihf": "4.14.2",
|
"@rollup/rollup-linux-arm-gnueabihf": "4.14.3",
|
||||||
"@rollup/rollup-linux-arm64-gnu": "4.14.2",
|
"@rollup/rollup-linux-arm-musleabihf": "4.14.3",
|
||||||
"@rollup/rollup-linux-arm64-musl": "4.14.2",
|
"@rollup/rollup-linux-arm64-gnu": "4.14.3",
|
||||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.14.2",
|
"@rollup/rollup-linux-arm64-musl": "4.14.3",
|
||||||
"@rollup/rollup-linux-riscv64-gnu": "4.14.2",
|
"@rollup/rollup-linux-powerpc64le-gnu": "4.14.3",
|
||||||
"@rollup/rollup-linux-s390x-gnu": "4.14.2",
|
"@rollup/rollup-linux-riscv64-gnu": "4.14.3",
|
||||||
"@rollup/rollup-linux-x64-gnu": "4.14.2",
|
"@rollup/rollup-linux-s390x-gnu": "4.14.3",
|
||||||
"@rollup/rollup-linux-x64-musl": "4.14.2",
|
"@rollup/rollup-linux-x64-gnu": "4.14.3",
|
||||||
"@rollup/rollup-win32-arm64-msvc": "4.14.2",
|
"@rollup/rollup-linux-x64-musl": "4.14.3",
|
||||||
"@rollup/rollup-win32-ia32-msvc": "4.14.2",
|
"@rollup/rollup-win32-arm64-msvc": "4.14.3",
|
||||||
"@rollup/rollup-win32-x64-msvc": "4.14.2",
|
"@rollup/rollup-win32-ia32-msvc": "4.14.3",
|
||||||
|
"@rollup/rollup-win32-x64-msvc": "4.14.3",
|
||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -6774,9 +6781,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/tinypool": {
|
"node_modules/tinypool": {
|
||||||
"version": "0.8.3",
|
"version": "0.8.4",
|
||||||
"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.3.tgz",
|
"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
|
||||||
"integrity": "sha512-Ud7uepAklqRH1bvwy22ynrliC7Dljz7Tm8M/0RBUW+YRa4YHhZ6e4PpgE+fu1zr/WqB1kbeuVrdfeuyIBpy4tw==",
|
"integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
@@ -7137,9 +7144,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/vite-plugin-dts": {
|
"node_modules/vite-plugin-dts": {
|
||||||
"version": "3.8.2",
|
"version": "3.8.3",
|
||||||
"resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.8.3.tgz",
|
||||||
"integrity": "sha512-GPkLNBUU+ztskHj37nelNsgRLurFuqXxqICSd/IxjRmgee1T6IIYlRCanugc9QtgWjYVPC/HJzSfpXJSy9OLUA==",
|
"integrity": "sha512-yRHiRosQw7MXdOhmcrVI+kRiB8YEShbSxnADNteK4eZGdEoyOkMHihvO5XOAVlOq8ng9sIqu8vVefDK1zcj3qw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/api-extractor": "7.43.0",
|
"@microsoft/api-extractor": "7.43.0",
|
||||||
@@ -7750,6 +7757,57 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": "^12.20.0 || >=14"
|
"node": "^12.20.0 || >=14"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"packages/docs": {
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-live": "^2.5.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"packages/maska": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/dom": "^10.0.0",
|
||||||
|
"@testing-library/jest-dom": "^6.4.2",
|
||||||
|
"@testing-library/user-event": "^14.5.2",
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitest/coverage-v8": "^1.5.0",
|
||||||
|
"happy-dom": "^14.7.1",
|
||||||
|
"ts-standard": "^12.0.2",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vite-plugin-banner": "^0.7.1",
|
||||||
|
"vite-plugin-dts": "^3.8.2",
|
||||||
|
"vitest": "^1.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"packages/vue": {
|
||||||
|
"name": "@maskajs/vue",
|
||||||
|
"version": "3.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/dom": "^10.0.0",
|
||||||
|
"@testing-library/jest-dom": "^6.4.2",
|
||||||
|
"@testing-library/user-event": "^14.5.2",
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"@vitest/coverage-v8": "^1.5.0",
|
||||||
|
"@vue/test-utils": "^2.4.5",
|
||||||
|
"happy-dom": "^14.7.1",
|
||||||
|
"ts-standard": "^12.0.2",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vite-plugin-banner": "^0.7.1",
|
||||||
|
"vite-plugin-dts": "^3.8.2",
|
||||||
|
"vitest": "^1.5.0",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-tsc": "^2.0.13"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-57
@@ -1,59 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "maska",
|
"private": true,
|
||||||
"version": "3.0.0",
|
"workspaces": [
|
||||||
"description": "Simple zero-dependency input mask for Vue or Vanilla JS",
|
"packages/*",
|
||||||
"keywords": [
|
"packages/docs"
|
||||||
"mask",
|
]
|
||||||
"inputmask",
|
|
||||||
"vue"
|
|
||||||
],
|
|
||||||
"author": "Alexander Shabunevich",
|
|
||||||
"homepage": "https://beholdr.github.io/maska/",
|
|
||||||
"repository": {
|
|
||||||
"url": "https://github.com/beholdr/maska",
|
|
||||||
"type": "git"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"files": [
|
|
||||||
"dist"
|
|
||||||
],
|
|
||||||
"main": "./dist/maska.umd.js",
|
|
||||||
"module": "./dist/maska.mjs",
|
|
||||||
"types": "./dist/maska.d.ts",
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"types": "./dist/maska.d.ts",
|
|
||||||
"import": "./dist/maska.mjs",
|
|
||||||
"require": "./dist/maska.umd.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vue-tsc && vite build",
|
|
||||||
"build:demo": "vite build --config vite.config.demo.mts",
|
|
||||||
"test": "vitest run",
|
|
||||||
"test:coverage": "vitest run --coverage",
|
|
||||||
"lint": "ts-standard src",
|
|
||||||
"lint:fix": "ts-standard --fix src",
|
|
||||||
"version": "npm run build && npm test"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@testing-library/dom": "^10.0.0",
|
|
||||||
"@testing-library/jest-dom": "^6.4.2",
|
|
||||||
"@testing-library/user-event": "^14.5.2",
|
|
||||||
"@types/node": "^20.12.7",
|
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
|
||||||
"@vitest/coverage-v8": "^1.5.0",
|
|
||||||
"@vue/test-utils": "^2.4.5",
|
|
||||||
"happy-dom": "^14.7.1",
|
|
||||||
"ts-standard": "^12.0.2",
|
|
||||||
"typescript": "^5.4.5",
|
|
||||||
"vite": "^5.2.8",
|
|
||||||
"vite-plugin-banner": "^0.7.1",
|
|
||||||
"vite-plugin-dts": "^3.8.2",
|
|
||||||
"vitest": "^1.5.0",
|
|
||||||
"vue": "^3.2.45",
|
|
||||||
"vue-live": "^2.5.4",
|
|
||||||
"vue-tsc": "^2.0.13"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<object data="maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
|
<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Support
|
# Maska {{versionLabel}}
|
||||||
|
|
||||||
Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
|
Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
|
||||||
|
|
||||||
@@ -12,7 +12,7 @@ Here are several examples of basic masks that you could create with **Maska**.
|
|||||||
This demo is interactive: feel free to edit the examples.
|
This demo is interactive: feel free to edit the examples.
|
||||||
|
|
||||||
<div id="demo-app"></div>
|
<div id="demo-app"></div>
|
||||||
<script src="dist/demo.js"></script>
|
<script type="module" src="dist/demo.js"></script>
|
||||||
|
|
||||||
# Install
|
# Install
|
||||||
|
|
||||||
@@ -4,14 +4,16 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
|
||||||
<title>maska docs</title>
|
<title>maska v3 docs</title>
|
||||||
|
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
|
||||||
|
|
||||||
<!-- Themes (light + dark) -->
|
<!-- Themes (light + dark) -->
|
||||||
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
|
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
|
||||||
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
|
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
|
||||||
<link rel="stylesheet" href="dist/demo.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="dist/style.css">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -50,13 +52,19 @@
|
|||||||
window.$docsify = {
|
window.$docsify = {
|
||||||
name: 'maska',
|
name: 'maska',
|
||||||
repo: 'beholdr/maska',
|
repo: 'beholdr/maska',
|
||||||
maxLevel: 2
|
maxLevel: 2,
|
||||||
|
versionSelectorLabel: 'Version',
|
||||||
|
versions: [
|
||||||
|
{ folder: '#', label: 'v3.x', default: true },
|
||||||
|
{ folder: 'v2', label: 'v2.x', default: false }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
|
||||||
|
|
||||||
<!-- Recommended -->
|
<!-- Recommended -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,572 @@
|
|||||||
|
<object data="/maska.svg" type="image/svg+xml" style="max-width: 90%"></object>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Maska {{versionLabel}}
|
||||||
|
|
||||||
|
Do you like **Maska**? Please support me via [Boosty](https://boosty.to/beholdr).
|
||||||
|
|
||||||
|
# Live Demo
|
||||||
|
|
||||||
|
Here are several examples of basic masks that you could create with **Maska**.
|
||||||
|
This demo is interactive: feel free to edit the examples.
|
||||||
|
|
||||||
|
<div id="demo-app"></div>
|
||||||
|
<script type="module" src="../dist/demo_v2.js"></script>
|
||||||
|
|
||||||
|
# Install
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
## **Via npm**
|
||||||
|
|
||||||
|
```
|
||||||
|
npm i maska
|
||||||
|
```
|
||||||
|
|
||||||
|
## **CDN / Global build**
|
||||||
|
|
||||||
|
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@2/dist/maska.umd.js"></script>
|
||||||
|
<script>
|
||||||
|
const { Mask, MaskInput, vMaska } = Maska
|
||||||
|
|
||||||
|
new MaskInput("[data-maska]") // for masked input
|
||||||
|
const mask = new Mask({ mask: "#-#" }) // for programmatic use
|
||||||
|
Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## **CDN / ES modules**
|
||||||
|
|
||||||
|
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@2/dist/maska.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="module">
|
||||||
|
import { Mask, MaskInput, vMaska } from 'maska'
|
||||||
|
|
||||||
|
new MaskInput("[data-maska]") // for masked input
|
||||||
|
const mask = new Mask({ mask: "#-#" }) // for programmatic use
|
||||||
|
Vue.createApp({ directives: { maska: vMaska }}).mount('#app') // Vue directive
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
Notice that we are using `<script type="module">` in this case.
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
**Maska** library consists of three main components:
|
||||||
|
|
||||||
|
- `Mask` class to mask string values
|
||||||
|
- `MaskInput` class to apply `Mask` processing to `<input>`
|
||||||
|
- `vMaska` directive to simplify using of library within Vue components
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
## **Vanilla JS**
|
||||||
|
|
||||||
|
Start with simple input element and `data-maska` attribute:
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input data-maska="#-#">
|
||||||
|
```
|
||||||
|
|
||||||
|
Then import and init `MaskInput`, passing input element(s) or `querySelector` expression as first argument:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
import { MaskInput } from "maska"
|
||||||
|
new MaskInput("[data-maska]")
|
||||||
|
```
|
||||||
|
|
||||||
|
Usually you set mask via `data-maska` attribute. But you can pass mask and other [options](#options) via second argument (it will be a default options that can be overriden by `data-maska-` attributes):
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
new MaskInput("input", { mask: "#-#" })
|
||||||
|
```
|
||||||
|
|
||||||
|
To destroy mask use `destroy()` method:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
const mask = new MaskInput(...)
|
||||||
|
mask.destroy()
|
||||||
|
```
|
||||||
|
|
||||||
|
## **Vue**
|
||||||
|
|
||||||
|
Import `vMaska` directive and apply it to the input along with `data-maska` attribite:
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Composition API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script setup>
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska data-maska="#-#">
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Options API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script>
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: { maska: vMaska }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska data-maska="#-#">
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
### Bind value
|
||||||
|
|
||||||
|
To get masked value you can use standard `v-model` directive.
|
||||||
|
But if you want to access an unmasked (raw) value, you can pass a variable as `v-maska` directive value.
|
||||||
|
This variable should be a reactive object that will contains three fields after mask processing:
|
||||||
|
|
||||||
|
- `masked`: string with masked result
|
||||||
|
- `unmasked`: string with unmasked result
|
||||||
|
- `completed`: boolean flag indicating that mask is completed
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Composition API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
const maskedValue = ref('')
|
||||||
|
const boundObject = reactive({})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska="boundObject" v-model="maskedValue">
|
||||||
|
|
||||||
|
Masked value: {{ maskedValue }} or {{ boundObject.masked }}
|
||||||
|
Unmasked value: {{ boundObject.unmasked }}
|
||||||
|
<span v-if="boundObject.completed">✅ Mask completed</span>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Options API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script>
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: { maska: vMaska },
|
||||||
|
data: () => ({
|
||||||
|
maskedValue: "",
|
||||||
|
boundObject: {
|
||||||
|
masked: "",
|
||||||
|
unmasked: "",
|
||||||
|
completed: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska="boundObject" v-model="maskedValue">
|
||||||
|
|
||||||
|
Masked value: {{ maskedValue }} or {{ boundObject.masked }}
|
||||||
|
Unmasked value: {{ boundObject.unmasked }}
|
||||||
|
<span v-if="boundObject.completed">✅ Mask completed</span>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
### Set mask options
|
||||||
|
|
||||||
|
To set default options for the mask you could use directive *argument* (part after `v-maska:`). It can be plain or reactive object and should be wrapped in `[]`:
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Composition API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from "vue"
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
const options = reactive({
|
||||||
|
mask: "#-#",
|
||||||
|
eager: true
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska:[options]>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Options API**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<script>
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: { maska: vMaska },
|
||||||
|
data: () => ({
|
||||||
|
options: {
|
||||||
|
mask: "#-#",
|
||||||
|
eager: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska:[options]>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
?> Please see [issue#149](https://github.com/beholdr/maska/issues/149): options object should be assigned in the current file.
|
||||||
|
|
||||||
|
You can set options and bind to an object at the same time:
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input v-maska:[options]="boundObject">
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Global registration of directive
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Vue 3**
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
import { createApp } from "vue"
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
createApp({}).directive("maska", vMaska)
|
||||||
|
|
||||||
|
// or in case of CDN load
|
||||||
|
Vue.createApp({}).directive("maska", Maska.vMaska)
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Vue 2**
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
import Vue from "vue"
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
Vue.directive("maska", vMaska)
|
||||||
|
|
||||||
|
// or in case of CDN load
|
||||||
|
Vue.directive("maska", Maska.vMaska)
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
## **Nuxt 3**
|
||||||
|
|
||||||
|
To use Maska in Nuxt 3 you can make a simple plugin. Create file `maska.ts` in `plugins` folder:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
import { vMaska } from "maska"
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.directive("maska", vMaska)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Now you can use `v-maska` directive in your app:
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input v-model="value" v-maska data-maska="#-#" />
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
# Options
|
||||||
|
|
||||||
|
## `Mask` options
|
||||||
|
|
||||||
|
Every option of `Mask` class can be set via `data-maska-` attributes or by passing on init.
|
||||||
|
Options passed on init will be used as defaults and could be overriden by `data-maska-` attributes.
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Description**
|
||||||
|
|
||||||
|
- `mask / data-maska` — mask to apply (**string**, **array of strings** or **function**). If you pass empty string or `null` it will disable a mask
|
||||||
|
- `tokens / data-maska-tokens` — custom tokens object
|
||||||
|
- `tokensReplace / data-maska-tokens-replace` — if custom tokens should replace default tokens (if not set, they will merge)
|
||||||
|
- `eager / data-maska-eager` — eager mode will show static characters before you type them, e.g. when you type `1`, eager mask `#-#` will show `1-` and non-eager will show `1`
|
||||||
|
- `reversed / data-maska-reversed` — in reversed mode mask will grow backwards, e.g. for numbers
|
||||||
|
|
||||||
|
### **Types**
|
||||||
|
``` ts
|
||||||
|
interface MaskOptions {
|
||||||
|
mask?: MaskType
|
||||||
|
tokens?: MaskTokens
|
||||||
|
tokensReplace?: boolean
|
||||||
|
eager?: boolean
|
||||||
|
reversed?: boolean
|
||||||
|
}
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input data-maska="A-A" data-maska-tokens="A:[A-Z]" data-maska-eager>
|
||||||
|
```
|
||||||
|
|
||||||
|
## `MaskInput` options
|
||||||
|
|
||||||
|
`MaskInput` options could be set only by passing second argument on init.
|
||||||
|
Along with `MaskInput` options you could pass any `Mask` options as well (or set them via `data-maska-` attributes).
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Description**
|
||||||
|
|
||||||
|
- `onMaska` — [callback](#events) on every mask processing
|
||||||
|
- `preProcess` — [hook](#hooks) before mask processing
|
||||||
|
- `postProcess` — [hook](#hooks) after mask processing
|
||||||
|
|
||||||
|
### **Types**
|
||||||
|
``` ts
|
||||||
|
interface MaskInputOptions extends MaskOptions {
|
||||||
|
onMaska?: (detail: MaskaDetail) => void
|
||||||
|
preProcess?: (value: string) => string
|
||||||
|
postProcess?: (value: string) => string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
new MaskInput("input", {
|
||||||
|
mask: "#-#",
|
||||||
|
reversed: true,
|
||||||
|
onMaska: (detail: MaskaDetail) => console.log(detail.completed)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
# Tokens
|
||||||
|
|
||||||
|
There are 3 tokens defined by default:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
{
|
||||||
|
'#': { pattern: /[0-9]/ }, // digits
|
||||||
|
'@': { pattern: /[a-zA-Z]/ }, // letters
|
||||||
|
'*': { pattern: /[a-zA-Z0-9]/ }, // letters & digits
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
?> Use `!` before token to escape symbol. For example `!#` will render `#` instead of a digit.
|
||||||
|
|
||||||
|
## Custom tokens
|
||||||
|
|
||||||
|
Add custom tokens via `data-maska-tokens` attribute or by `tokens` option:
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **By data-attr**
|
||||||
|
|
||||||
|
When using `data-maska-tokens`, there are two possible formats:
|
||||||
|
|
||||||
|
- **Full form** should be a valid JSON-string (but can use both single and double quotes) with pattern in string format without delimiters
|
||||||
|
- **Simple form** should be a string in format: `T:P:M|T:P:M` where:
|
||||||
|
- `T` is token
|
||||||
|
- `P` is pattern in string form
|
||||||
|
- `M` is optional modifier (see below)
|
||||||
|
- `|` is separator for multiple tokens
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}">
|
||||||
|
<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]">
|
||||||
|
<input data-maska="Z-z" data-maska-tokens="Z:[A-Z]|z:[a-z]:multiple">
|
||||||
|
```
|
||||||
|
|
||||||
|
?> You can’t set `transform` function for token via `data-maska-tokens`.
|
||||||
|
If you need this, use `tokens` option instead.
|
||||||
|
|
||||||
|
### **By option**
|
||||||
|
|
||||||
|
When using `tokens` option, pattern should be a valid regular expression object:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
new MaskInput("[data-maska]", {
|
||||||
|
mask: "A-A",
|
||||||
|
tokens: {
|
||||||
|
A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
## Token modifiers
|
||||||
|
|
||||||
|
Every token can have a modifier, for example:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
{
|
||||||
|
0: { pattern: /[0-9]/, optional: true },
|
||||||
|
9: { pattern: /[0-9]/, repeated: true },
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- `optional` for optional token
|
||||||
|
- `multiple` for token that can match multiple characters till the next token starts
|
||||||
|
- `repeated` for tokens that should be repeated. This token will match only one character, but the token itself (or group of such tokens) can be repeated any number of times
|
||||||
|
|
||||||
|
| Modifier | Example usage | Mask | Tokens
|
||||||
|
| --- | --- | --- | ---
|
||||||
|
| `optional` | IP address | `#00.#00.#00.#00` | `0:[0-9]:optional`
|
||||||
|
| `multiple` | CARDHOLDER NAME | `A A` | `A:[A-Z]:multiple`
|
||||||
|
| `repeated` | Money (1 234,56) | `9 99#,##` <small>reversed</small> | `9:[0-9]:repeated`
|
||||||
|
|
||||||
|
## Transform tokens
|
||||||
|
|
||||||
|
For custom tokens you can define `transform` function, applied to a character before masking.
|
||||||
|
For example, transforming letters to uppercase on input:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
{
|
||||||
|
A: { pattern: /[A-Z]/, transform: (chr: string) => chr.toUpperCase() }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
?> You can also use [hooks](#hooks) for transforming whole value before/after masking.
|
||||||
|
|
||||||
|
# Dynamic masks
|
||||||
|
|
||||||
|
Pass `mask` as **array** or **function** to make it dynamic:
|
||||||
|
|
||||||
|
- With **array** a suitable mask will be chosen by length (smallest first)
|
||||||
|
- With **function** you can select mask with custom logic using value
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
new MaskInput("input", {
|
||||||
|
mask: (value: string) => value.startsWith('1') ? '#-#' : '##-##'
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
# Hooks
|
||||||
|
|
||||||
|
Use hooks for transforming whole value:
|
||||||
|
|
||||||
|
- `preProcess` hook called before mask processing
|
||||||
|
- `postProcess` hook called after mask processing, but before setting input's value
|
||||||
|
|
||||||
|
For example, you can use it to check for a maximum length of masked string:
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
new MaskInput("input", {
|
||||||
|
postProcess: (value: string) => value.slice(0, 5)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
# Events
|
||||||
|
|
||||||
|
There are two events you can subscribe to get the masking result:
|
||||||
|
|
||||||
|
- `maska` event
|
||||||
|
- `input` event
|
||||||
|
|
||||||
|
They are essentially the same, but the `input` event could be fired by any input logic, and the `maska` event is library specific.
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
## **Vanilla JS**
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
document.querySelector("input").addEventListener("maska", onMaska)
|
||||||
|
```
|
||||||
|
|
||||||
|
## **Vue**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<input v-maska data-maska="#-#" @maska="onMaska" />
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
Both events contains `detail` property with given structure:
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Description**
|
||||||
|
|
||||||
|
- `masked`: masked value
|
||||||
|
- `unmasked`: unmasked value
|
||||||
|
- `completed`: flag that current mask is completed
|
||||||
|
|
||||||
|
### **Types**
|
||||||
|
``` ts
|
||||||
|
interface MaskaDetail {
|
||||||
|
masked: string
|
||||||
|
unmasked: string
|
||||||
|
completed: boolean
|
||||||
|
}
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
const onMaska = (event: CustomEvent<MaskaDetail>) => {
|
||||||
|
console.log({
|
||||||
|
masked: event.detail.masked,
|
||||||
|
unmasked: event.detail.unmasked,
|
||||||
|
completed: event.detail.completed
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Alternatively, you can pass callback function directly with `MaskInput` option `onMaska`:
|
||||||
|
|
||||||
|
<!-- tabs:start -->
|
||||||
|
### **Vanilla JS**
|
||||||
|
``` ts
|
||||||
|
new MaskInput("input", {
|
||||||
|
onMaska: (detail: MaskaDetail) => console.log(detail.completed)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Vue**
|
||||||
|
``` html
|
||||||
|
<script setup>
|
||||||
|
const options = {
|
||||||
|
onMaska: (detail: MaskaDetail) => console.log(detail.completed)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-maska:[options]>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
<!-- tabs:end -->
|
||||||
|
|
||||||
|
# Programmatic use
|
||||||
|
|
||||||
|
You can use mask function programmatically by importing `Mask` class.
|
||||||
|
There are three methods available:
|
||||||
|
|
||||||
|
- `masked(value)` returns masked version of given value
|
||||||
|
- `unmasked(value)` returns unmasked version of given value
|
||||||
|
- `completed(value)` returns `true` if given value makes mask complete
|
||||||
|
|
||||||
|
``` ts
|
||||||
|
import { Mask } from "maska"
|
||||||
|
|
||||||
|
const mask = new Mask({ mask: "#-#" })
|
||||||
|
|
||||||
|
mask.masked("12") // = 1-2
|
||||||
|
mask.unmasked("12") // = 12
|
||||||
|
mask.completed("12") // = true
|
||||||
|
```
|
||||||
|
|
||||||
|
# Known issues
|
||||||
|
|
||||||
|
When used on input of type `number`, could have inconsistent behavior in different browsers. Use attribute `inputmode="numeric"` with `type="text"` if you need a numeric keyboard.
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
|
||||||
|
<title>maska v2 docs</title>
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22128%22>*️⃣</text></svg>">
|
||||||
|
|
||||||
|
<!-- Themes (light + dark) -->
|
||||||
|
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
|
||||||
|
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/styles.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../dist/style.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--theme-hue: 281;
|
||||||
|
--heading-h1-font-size: var(--modular-scale-3);
|
||||||
|
--heading-h2-font-size: var(--modular-scale-2);
|
||||||
|
--heading-h3-font-size: var(--modular-scale-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > .app-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sidebar-nav li.active {
|
||||||
|
background: #990bdb;
|
||||||
|
color: #fff;
|
||||||
|
margin-left: -10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.sidebar-nav li.active a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.markdown-section {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.$docsify = {
|
||||||
|
name: 'maska',
|
||||||
|
repo: 'beholdr/maska',
|
||||||
|
maxLevel: 2,
|
||||||
|
versionSelectorLabel: 'Version',
|
||||||
|
versions: [
|
||||||
|
{ folder: '#', label: 'v3.x', default: true },
|
||||||
|
{ folder: 'v2', label: 'v2.x', default: false }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Required -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify-versioned-plugin@0.0.1/index.js"></script>
|
||||||
|
|
||||||
|
<!-- Recommended -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"test": "echo 'No tests, skip'",
|
||||||
|
"test:coverage": "echo 'No tests, skip'",
|
||||||
|
"lint": "echo 'No linting, skip'",
|
||||||
|
"lint:fix": "echo 'No linting, skip'",
|
||||||
|
"version": "echo 'No version, skip'"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-live": "^2.5.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,55 +4,10 @@ import { computed, ref } from 'vue'
|
|||||||
import { VueLive } from 'vue-live'
|
import { VueLive } from 'vue-live'
|
||||||
import 'vue-live/style.css'
|
import 'vue-live/style.css'
|
||||||
|
|
||||||
const examples = [
|
const props = defineProps(['examples'])
|
||||||
{
|
|
||||||
label: 'Simple mask',
|
|
||||||
code: `<input v-maska data-maska="#-#" value="12">`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Phone mask',
|
|
||||||
code: `<input v-maska data-maska="+1 ### ###-##-##">`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'HEX-color',
|
|
||||||
code: `<input\n v-maska\n data-maska="!#HHHHHH"\n data-maska-tokens="H:[0-9a-fA-F]"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'IP address with optional digits',
|
|
||||||
code: `<input\n v-maska\n data-maska="#00.#00.#00.#00"\n data-maska-tokens="0:[0-9]:optional"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Dynamic mask: CPF/CNPJ',
|
|
||||||
code: `<input\n v-maska\n data-maska="[\n '###.###.###-##',\n '##.###.###/####-##'\n ]"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Cardholder name: via hook',
|
|
||||||
code: `const options = {\n preProcess: val => val.toUpperCase()\n}\n\n<input\n v-maska:[options]\n data-maska="A A"\n data-maska-tokens="A:[A-Z]:multiple"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Cardholder name: via token transform',
|
|
||||||
code: `const options = {\n tokens: {\n A: {\n pattern: /[A-Z]/,\n multiple: true,\n transform: chr => chr.toUpperCase()\n }\n }\n}\n\n<input v-maska:[options] data-maska="A A">`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Year: with current year as a limit',
|
|
||||||
code: `const options = {\n postProcess: val => {\n const max = "" + new Date().getFullYear()\n return val > max ? max : val\n }\n}\n\n<input v-maska:[options] data-maska="####">`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Money format: simple',
|
|
||||||
code: `<input\n v-maska\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Money format: full via hooks',
|
|
||||||
code: `const options = {\n preProcess: val => val.replace(/[$,]/g, ''),\n postProcess: val => {\n if (!val) return ''\n\n const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(val)\n .slice(0, sub ? -sub : undefined)\n }\n}\n\n<input\n v-maska:[options]\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reversed number format with thousand separators',
|
|
||||||
code: `<input\n v-maska\n data-maska="9 99#.##"\n data-maska-tokens="9:[0-9]:repeated"\n data-maska-reversed\n>`
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const selectedExample = ref(0)
|
const selectedExample = ref(0)
|
||||||
const code = computed(() => examples[selectedExample.value].code)
|
const code = computed(() => props.examples[selectedExample.value].code)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
import { vMaska } from '../../vue/src'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
const examples = [
|
||||||
|
{
|
||||||
|
label: 'Simple mask',
|
||||||
|
code: `<input v-maska data-maska="#-#" value="12">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Phone mask',
|
||||||
|
code: `<input v-maska data-maska="+1 ### ###-##-##">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'HEX-color',
|
||||||
|
code: `<input\n v-maska\n data-maska="!#HHHHHH"\n data-maska-tokens="H:[0-9a-fA-F]"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'IP address with optional digits',
|
||||||
|
code: `<input\n v-maska\n data-maska="#00.#00.#00.#00"\n data-maska-tokens="0:[0-9]:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Dynamic mask: CPF/CNPJ',
|
||||||
|
code: `<input\n v-maska\n data-maska="[\n '###.###.###-##',\n '##.###.###/####-##'\n ]"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Cardholder name: via hook',
|
||||||
|
code: `const options = {\n preProcess: val => val.toUpperCase()\n}\n\n<input\n v-maska="options"\n data-maska="A A"\n data-maska-tokens="A:[A-Z]:multiple"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Cardholder name: via token transform',
|
||||||
|
code: `const options = {\n tokens: {\n A: {\n pattern: /[A-Z]/,\n multiple: true,\n transform: chr => chr.toUpperCase()\n }\n }\n}\n\n<input v-maska="options" data-maska="A A">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Year: with current year as a limit',
|
||||||
|
code: `const options = {\n postProcess: val => {\n const max = "" + new Date().getFullYear()\n return val > max ? max : val\n }\n}\n\n<input v-maska="options" data-maska="####">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Money format: simple',
|
||||||
|
code: `<input\n v-maska\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Money format: full via hooks',
|
||||||
|
code: `const options = {\n preProcess: val => val.replace(/[$,]/g, ''),\n postProcess: val => {\n if (!val) return ''\n\n const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(val)\n .slice(0, sub ? -sub : undefined)\n }\n}\n\n<input\n v-maska="options"\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Reversed number format with thousand separators',
|
||||||
|
code: `<input\n v-maska\n data-maska="9 99#.##"\n data-maska-tokens="9:[0-9]:repeated"\n data-maska-reversed\n>`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
createApp(App, { examples })
|
||||||
|
.directive('maska', vMaska)
|
||||||
|
.mount('#demo-app')
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
import App from '../App.vue'
|
||||||
|
|
||||||
|
const examples = [
|
||||||
|
{
|
||||||
|
label: 'Simple mask',
|
||||||
|
code: `<input v-maska data-maska="#-#" value="12">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Phone mask',
|
||||||
|
code: `<input v-maska data-maska="+1 ### ###-##-##">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'HEX-color',
|
||||||
|
code: `<input\n v-maska\n data-maska="!#HHHHHH"\n data-maska-tokens="H:[0-9a-fA-F]"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'IP address with optional digits',
|
||||||
|
code: `<input\n v-maska\n data-maska="#00.#00.#00.#00"\n data-maska-tokens="0:[0-9]:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Dynamic mask: CPF/CNPJ',
|
||||||
|
code: `<input\n v-maska\n data-maska="[\n '###.###.###-##',\n '##.###.###/####-##'\n ]"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Cardholder name: via hook',
|
||||||
|
code: `const options = {\n preProcess: val => val.toUpperCase()\n}\n\n<input\n v-maska:[options]\n data-maska="A A"\n data-maska-tokens="A:[A-Z]:multiple"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Cardholder name: via token transform',
|
||||||
|
code: `const options = {\n tokens: {\n A: {\n pattern: /[A-Z]/,\n multiple: true,\n transform: chr => chr.toUpperCase()\n }\n }\n}\n\n<input v-maska:[options] data-maska="A A">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Year: with current year as a limit',
|
||||||
|
code: `const options = {\n postProcess: val => {\n const max = "" + new Date().getFullYear()\n return val > max ? max : val\n }\n}\n\n<input v-maska:[options] data-maska="####">`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Money format: simple',
|
||||||
|
code: `<input\n v-maska\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Money format: full via hooks',
|
||||||
|
code: `const options = {\n preProcess: val => val.replace(/[$,]/g, ''),\n postProcess: val => {\n if (!val) return ''\n\n const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)\n\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(val)\n .slice(0, sub ? -sub : undefined)\n }\n}\n\n<input\n v-maska:[options]\n data-maska="0.99"\n data-maska-tokens="0:\\d:multiple|9:\\d:optional"\n>`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Reversed number format with thousand separators',
|
||||||
|
code: `<input\n v-maska\n data-maska="9 99#.##"\n data-maska-tokens="9:[0-9]:repeated"\n data-maska-reversed\n>`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
createApp(App, { examples })
|
||||||
|
.directive('maska', Maska.vMaska)
|
||||||
|
.mount('#demo-app')
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
@@ -5,9 +5,11 @@ export default defineConfig({
|
|||||||
base: '',
|
base: '',
|
||||||
build: {
|
build: {
|
||||||
outDir: 'docs/dist',
|
outDir: 'docs/dist',
|
||||||
|
cssCodeSplit: false,
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
demo: 'demo/index.ts'
|
demo: 'src/index.ts',
|
||||||
|
demo_v2: 'src/v2/index.ts'
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
entryFileNames: '[name].js',
|
entryFileNames: '[name].js',
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Maska Demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<input data-maska="#-#">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { MaskInput } from './src'
|
||||||
|
|
||||||
|
new MaskInput('[data-maska]')
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "maska",
|
||||||
|
"version": "3.0.0-beta",
|
||||||
|
"description": "Simple zero-dependency input mask for Vanilla JS",
|
||||||
|
"keywords": [
|
||||||
|
"mask",
|
||||||
|
"inputmask",
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
"author": "Alexander Shabunevich",
|
||||||
|
"homepage": "https://beholdr.github.io/maska/",
|
||||||
|
"repository": {
|
||||||
|
"url": "https://github.com/beholdr/maska",
|
||||||
|
"type": "git",
|
||||||
|
"directory": "packages/maska"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"main": "./dist/maska.umd.js",
|
||||||
|
"module": "./dist/maska.mjs",
|
||||||
|
"types": "./dist/maska.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/maska.d.ts",
|
||||||
|
"import": "./dist/maska.mjs",
|
||||||
|
"require": "./dist/maska.umd.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"build:watch": "vite build --watch",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:coverage": "vitest run --coverage",
|
||||||
|
"lint": "ts-standard src",
|
||||||
|
"lint:fix": "ts-standard --fix src",
|
||||||
|
"version": "npm run build && npm test"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/dom": "^10.0.0",
|
||||||
|
"@testing-library/jest-dom": "^6.4.2",
|
||||||
|
"@testing-library/user-event": "^14.5.2",
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitest/coverage-v8": "^1.5.0",
|
||||||
|
"happy-dom": "^14.7.1",
|
||||||
|
"ts-standard": "^12.0.2",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vite-plugin-banner": "^0.7.1",
|
||||||
|
"vite-plugin-dts": "^3.8.2",
|
||||||
|
"vitest": "^1.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import { Mask, MaskType, MaskOptions } from './mask'
|
import { Mask, MaskType, MaskOptions } from './mask'
|
||||||
import { MaskInput, MaskInputOptions, MaskaDetail } from './input'
|
import { MaskInput, MaskInputOptions, MaskaDetail } from './input'
|
||||||
import { vMaska } from './vue'
|
|
||||||
import { tokens, MaskTokens } from './tokens'
|
import { tokens, MaskTokens } from './tokens'
|
||||||
|
|
||||||
export { Mask, MaskInput, tokens, vMaska }
|
export { Mask, MaskInput, tokens }
|
||||||
export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
|
export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { resolve } from 'path'
|
||||||
|
import { defineConfig } from 'vitest/config'
|
||||||
|
|
||||||
|
import banner from 'vite-plugin-banner'
|
||||||
|
import dts from 'vite-plugin-dts'
|
||||||
|
|
||||||
|
import pkg from './package.json'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
lib: {
|
||||||
|
entry: resolve(__dirname, 'src/index.ts'),
|
||||||
|
name: 'Maska',
|
||||||
|
fileName: 'maska'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
dts({ rollupTypes: true }),
|
||||||
|
banner(
|
||||||
|
`/*! ${pkg.name} v${pkg.version} */`
|
||||||
|
)
|
||||||
|
],
|
||||||
|
test: {
|
||||||
|
setupFiles: 'test/setup.ts',
|
||||||
|
environment: 'happy-dom',
|
||||||
|
coverage: {
|
||||||
|
provider: 'v8',
|
||||||
|
reporter: ['text', 'json-summary']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Maska Demo</title>
|
<title>Maska Vue Demo</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
{
|
||||||
|
"name": "@maskajs/vue",
|
||||||
|
"version": "3.0.0-beta",
|
||||||
|
"description": "Simple zero-dependency input mask for Vue 2/3",
|
||||||
|
"keywords": [
|
||||||
|
"mask",
|
||||||
|
"inputmask",
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
"author": "Alexander Shabunevich",
|
||||||
|
"homepage": "https://beholdr.github.io/maska/",
|
||||||
|
"repository": {
|
||||||
|
"url": "https://github.com/beholdr/maska",
|
||||||
|
"type": "git",
|
||||||
|
"directory": "packages/vue"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"main": "./dist/maska.umd.js",
|
||||||
|
"module": "./dist/maska.mjs",
|
||||||
|
"types": "./dist/maska.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/maska.d.ts",
|
||||||
|
"import": "./dist/maska.mjs",
|
||||||
|
"require": "./dist/maska.umd.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:coverage": "vitest run --coverage",
|
||||||
|
"lint": "ts-standard src",
|
||||||
|
"lint:fix": "ts-standard --fix src",
|
||||||
|
"version": "npm run build && npm test"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/dom": "^10.0.0",
|
||||||
|
"@testing-library/jest-dom": "^6.4.2",
|
||||||
|
"@testing-library/user-event": "^14.5.2",
|
||||||
|
"@types/node": "^20.12.7",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"@vitest/coverage-v8": "^1.5.0",
|
||||||
|
"@vue/test-utils": "^2.4.5",
|
||||||
|
"happy-dom": "^14.7.1",
|
||||||
|
"ts-standard": "^12.0.2",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vite-plugin-banner": "^0.7.1",
|
||||||
|
"vite-plugin-dts": "^3.8.2",
|
||||||
|
"vitest": "^1.5.0",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-tsc": "^2.0.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import {
|
||||||
|
Mask,
|
||||||
|
MaskType,
|
||||||
|
MaskOptions,
|
||||||
|
MaskInput,
|
||||||
|
MaskInputOptions,
|
||||||
|
MaskaDetail,
|
||||||
|
tokens,
|
||||||
|
MaskTokens
|
||||||
|
} from 'maska'
|
||||||
|
import { vMaska } from './vue'
|
||||||
|
|
||||||
|
export { Mask, MaskInput, tokens, vMaska }
|
||||||
|
export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Directive, DirectiveBinding } from 'vue'
|
import { Directive, DirectiveBinding } from 'vue'
|
||||||
import { MaskaDetail, MaskInput, MaskInputOptions } from './input'
|
import { MaskaDetail, MaskInput, MaskInputOptions } from '.'
|
||||||
|
|
||||||
type MaskaDirective = Directive<HTMLElement, MaskInputOptions | undefined>
|
type MaskaDirective = Directive<HTMLElement, MaskInputOptions | undefined>
|
||||||
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref, shallowRef } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
import { vMaska } from '../../src'
|
import { vMaska } from '../../src'
|
||||||
|
|
||||||
const mask = ref('+1 (###) ###-####')
|
const mask = ref('+1 (###) ###-####')
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest'
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
@@ -12,14 +12,15 @@ export default defineConfig({
|
|||||||
build: {
|
build: {
|
||||||
lib: {
|
lib: {
|
||||||
entry: resolve(__dirname, 'src/index.ts'),
|
entry: resolve(__dirname, 'src/index.ts'),
|
||||||
name: 'Maska'
|
name: 'Maska',
|
||||||
|
fileName: 'maska'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
dts({ rollupTypes: true }),
|
dts({ rollupTypes: true, bundledPackages: ["maska"] }),
|
||||||
banner(
|
banner(
|
||||||
`/*! ${pkg.name} v${pkg.version} | (c) ${pkg.author} | Released under the ${pkg.license} license */`
|
`/*! ${pkg.name} v${pkg.version} */`
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
test: {
|
test: {
|
||||||
+1
-1
@@ -14,6 +14,6 @@
|
|||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"types": ["vite/client"]
|
"types": ["vite/client"]
|
||||||
},
|
},
|
||||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "demo/**/*.vue"],
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user