mirrors/maska
2
0
Fork 0
mirror of https://github.com/tenrok/maska.git synced 2026-06-20 20:00:34 +03:00
Code Activity

feat: svelte plugin

Browse Source
This commit is contained in:
Alexander Shabunevich
2024-04-27 20:15:16 +03:00
parent cb0b13a498
commit 89dbf2460a
16 changed files with 880 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Taskfile.yml
+1 -1
View File
@@ -8,10 +8,10 @@ tasks:
dev:alpine: npm run dev --workspace=packages/alpine dev:alpine: npm run dev --workspace=packages/alpine
dev:maska: npm run dev --workspace=packages/maska dev:maska: npm run dev --workspace=packages/maska
dev:maska-build-watch: npm run build:watch --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 dev:vue: npm run dev --workspace=packages/vue
code:test: npm run test --workspaces code:test: npm run test --workspaces
code:test-alpine: npm run test --workspace=packages/alpine
code:coverage: npm run test:coverage --workspaces code:coverage: npm run test:coverage --workspaces
code:lint: npm run lint --workspaces code:lint: npm run lint --workspaces
code:format: npm run lint:fix --workspaces code:format: npm run lint:fix --workspaces
package-lock.json
Generated
+596 -228
View File
File diff suppressed because it is too large Load Diff
packages/svelte/index.html
+20
View File
@@ -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>
packages/svelte/package.json
+58
View File
@@ -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"
}
}
packages/svelte/src/index.ts
+14
View File
@@ -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 }
packages/svelte/src/svelte.ts
+26
View File
@@ -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()
}
}
}
packages/svelte/svelte.config.mjs
+7
View File
@@ -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(),
}
packages/svelte/test/components/BindValue.svelte
+9
View File
@@ -0,0 +1,9 @@
<script lang="ts">
import { maska } from '../../src'
let value = '123'
</script>
<main>
<input use:maska data-maska="#-#" bind:value />
</main>
packages/svelte/test/components/Demo.svelte
+29
View File
@@ -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>
packages/svelte/test/components/InitialValue.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
import { maska } from '../../src'
</script>
<main>
<input use:maska data-maska="#-#" value="123" />
</main>
packages/svelte/test/components/Options.svelte
+13
View File
@@ -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>
packages/svelte/test/components/Simple.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
import { maska } from '../../src'
</script>
<main>
<input use:maska data-maska="#-#" />
</main>
packages/svelte/test/setup.ts
+1
View File
@@ -0,0 +1 @@
import '@testing-library/jest-dom/vitest'
packages/svelte/test/svelte.test.ts
+52
View File
@@ -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')
})
packages/svelte/tsconfig.json
+4
View File
@@ -0,0 +1,4 @@
{
"extends": "../../tsconfig.json",
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.svelte"]
}
packages/svelte/vite.config.mts
+36
View File
@@ -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']
}
}
})