mirror of
https://github.com/tenrok/maska.git
synced 2026-05-30 15:24:06 +03:00
feat: svelte plugin
This commit is contained in:
Alexander Shabunevich
+1
-1
@@ -8,10 +8,10 @@ tasks:
|
||||
dev:alpine: npm run dev --workspace=packages/alpine
|
||||
dev:maska: npm run dev --workspace=packages/maska
|
||||
dev:maska-build-watch: npm run build:watch --workspace=packages/maska
|
||||
dev:svelte: npm run dev --workspace=packages/svelte
|
||||
dev:vue: npm run dev --workspace=packages/vue
|
||||
|
||||
code:test: npm run test --workspaces
|
||||
code:test-alpine: npm run test --workspace=packages/alpine
|
||||
code:coverage: npm run test:coverage --workspaces
|
||||
code:lint: npm run lint --workspaces
|
||||
code:format: npm run lint:fix --workspaces
|
||||
|
||||
Generated
+596
-228
File diff suppressed because it is too large
Load Diff
@@ -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 Svelte Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script type="module">
|
||||
import Demo from './test/components/Demo.svelte'
|
||||
|
||||
new Demo({
|
||||
target: document.getElementById('app')
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "@maskajs/svelte",
|
||||
"version": "3.0.0-beta",
|
||||
"description": "Simple zero-dependency input mask for Svelte",
|
||||
"keywords": [
|
||||
"mask",
|
||||
"inputmask",
|
||||
"svelte"
|
||||
],
|
||||
"author": "Alexander Shabunevich",
|
||||
"homepage": "https://beholdr.github.io/maska/",
|
||||
"repository": {
|
||||
"url": "https://github.com/beholdr/maska",
|
||||
"type": "git",
|
||||
"directory": "packages/svelte"
|
||||
},
|
||||
"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",
|
||||
"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": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
||||
"@testing-library/dom": "^10.0.0",
|
||||
"@testing-library/jest-dom": "^6.4.2",
|
||||
"@testing-library/svelte": "^5.1.0",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"@tsconfig/svelte": "^5.0.4",
|
||||
"@types/node": "^20.12.7",
|
||||
"@vitest/coverage-v8": "^1.5.0",
|
||||
"happy-dom": "^14.7.1",
|
||||
"svelte": "^4.2.15",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import {
|
||||
Mask,
|
||||
MaskType,
|
||||
MaskOptions,
|
||||
MaskInput,
|
||||
MaskInputOptions,
|
||||
MaskaDetail,
|
||||
tokens,
|
||||
MaskTokens
|
||||
} from 'maska'
|
||||
import { maska } from './svelte'
|
||||
|
||||
export { Mask, MaskInput, tokens, maska }
|
||||
export type { MaskaDetail, MaskInputOptions, MaskOptions, MaskTokens, MaskType }
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Action } from 'svelte/action'
|
||||
import { MaskaDetail, MaskInput, MaskInputOptions } from '.'
|
||||
|
||||
const masks = new WeakMap<HTMLInputElement, MaskInput>()
|
||||
|
||||
type MaskaAction = Action<HTMLElement, MaskInputOptions | undefined, {
|
||||
'on:maska': (detail: CustomEvent<MaskaDetail>) => void
|
||||
}>
|
||||
|
||||
export const maska: MaskaAction = (node, opts = {}) => {
|
||||
const input = node instanceof HTMLInputElement ? node : node.querySelector('input')
|
||||
|
||||
if (input == null || input?.type === 'file') return
|
||||
|
||||
masks.set(input, new MaskInput(input, opts))
|
||||
|
||||
return {
|
||||
update (opts) {
|
||||
masks.get(input)?.update(opts)
|
||||
},
|
||||
|
||||
destroy () {
|
||||
masks.get(input)?.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { maska } from '../../src'
|
||||
|
||||
let value = '123'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<input use:maska data-maska="#-#" bind:value />
|
||||
</main>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import BindValue from './BindValue.svelte'
|
||||
import InitialValue from './InitialValue.svelte'
|
||||
import Options from './Options.svelte'
|
||||
import Simple from './Simple.svelte'
|
||||
|
||||
let component = Simple
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<select bind:value={component}>
|
||||
<option value={BindValue}>BindValue</option>
|
||||
<option value={InitialValue}>InitialValue</option>
|
||||
<option value={Options}>Options</option>
|
||||
<option value={Simple}>Simple</option>
|
||||
</select>
|
||||
|
||||
<div class="comp">
|
||||
<svelte:component this={component} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.comp {
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { maska } from '../../src'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<input use:maska data-maska="#-#" value="123" />
|
||||
</main>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { maska } from '../../src'
|
||||
|
||||
const options = {
|
||||
mask: '#-#',
|
||||
eager: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<input type="checkbox" bind:checked={options.eager} />
|
||||
<input type="text" use:maska={options} />
|
||||
</main>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { maska } from '../../src'
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<input use:maska data-maska="#-#" />
|
||||
</main>
|
||||
@@ -0,0 +1 @@
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
@@ -0,0 +1,52 @@
|
||||
import { expect, test } from 'vitest'
|
||||
import { tick } from 'svelte'
|
||||
import { render } from '@testing-library/svelte'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import BindValue from './components/BindValue.svelte'
|
||||
import InitialValue from './components/InitialValue.svelte'
|
||||
import Options from './components/Options.svelte'
|
||||
import Simple from './components/Simple.svelte'
|
||||
|
||||
const user = userEvent.setup()
|
||||
|
||||
test('simple directive', async () => {
|
||||
const { container } = render(Simple as any)
|
||||
const input = container.querySelector('input')!
|
||||
|
||||
await user.type(input, '123')
|
||||
expect(input).toHaveValue('1-2')
|
||||
})
|
||||
|
||||
test('initial value', async () => {
|
||||
const { container } = render(InitialValue as any)
|
||||
const input = container.querySelector('input')!
|
||||
|
||||
await tick()
|
||||
|
||||
expect(input).toHaveValue('1-2')
|
||||
})
|
||||
|
||||
test('bind value', async () => {
|
||||
const { container } = render(BindValue as any)
|
||||
const input = container.querySelector('input')!
|
||||
|
||||
await tick()
|
||||
|
||||
expect(input).toHaveValue('1-2')
|
||||
})
|
||||
|
||||
test('options', async () => {
|
||||
const { container } = render(Options as any)
|
||||
const input = container.querySelector('input[type="text"]')!
|
||||
const checkbox = container.querySelector('input[type="checkbox"]')!
|
||||
|
||||
await user.type(input, '1')
|
||||
expect(input).toHaveValue('1')
|
||||
|
||||
await user.click(checkbox)
|
||||
expect(input).toHaveValue('1-')
|
||||
|
||||
await user.type(input, '23')
|
||||
expect(input).toHaveValue('1-2')
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.svelte"]
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { svelteTesting } from '@testing-library/svelte/vite'
|
||||
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: [
|
||||
svelte(),
|
||||
svelteTesting(),
|
||||
dts({ rollupTypes: true, bundledPackages: ["maska"] }),
|
||||
banner(
|
||||
`/*! ${pkg.name} v${pkg.version} */`
|
||||
)
|
||||
],
|
||||
test: {
|
||||
setupFiles: 'test/setup.ts',
|
||||
environment: 'happy-dom',
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json-summary']
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user