feat: add alpine plugin

2026-06-17 19:21:21 +03:00 · 2024-04-17 21:23:41 +03:00
parent c60c26b18b
commit 9accb8e4c4
8 changed files with 370 additions and 74 deletions
@@ -0,0 +1,36 @@
+<!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 Alpine Demo</title>
+</head>
+<body>
+  <div x-data="{
+    maskedvalue: '123',
+    unmaskedvalue: '',
+    options: { eager: true }
+  }">
+    <input
+      x-model="maskedvalue"
+      x-maska:unmaskedvalue.unmasked="options"
+      x-on:maska="console.log($event.detail)"
+      data-maska="#-#"
+    >
+    <div><label><input type="checkbox" x-model="options.eager"> eager?</label></div>
+    <div>masked value: <span x-text="maskedvalue"></span></div>
+    <div>unmasked value: <span x-text="unmaskedvalue"></span></div>
+  </div>
+
+  <script type="module">
+    import Alpine from 'alpinejs'
+    import { xMaska } from './src'
+
+    Alpine.plugin(xMaska)
+
+    window.Alpine = Alpine
+    Alpine.start()
+  </script>
+</body>
+</html>