chore: demo app

2026-05-15 11:59:38 +03:00 · 2024-04-11 22:41:45 +03:00
parent f01cacb046
commit 9b6f964d59
3 changed files with 140 additions and 0 deletions
@@ -0,0 +1,19 @@
+<!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"></div>
+
+  <script type="module">
+    import { createApp } from 'vue'
+    import Demo from './test/components/Demo.vue'
+
+    createApp(Demo).mount('#app')
+  </script>
+</body>
+</html>
@@ -0,0 +1,61 @@
+<script setup>
+import { shallowRef } from 'vue'
+
+import Sink from './Sink.vue'
+import BindCompleted from './BindCompleted.vue'
+import BindMasked from './BindMasked.vue'
+import BindModel from './BindModel.vue'
+import BindUnmasked from './BindUnmasked.vue'
+import Callbacks from './Callbacks.vue'
+import ChangeValue from './ChangeValue.vue'
+import Config from './Config.vue'
+import Custom from './Custom.vue'
+import DataAttr from './DataAttr.vue'
+import Dynamic from './Dynamic.vue'
+import Events from './Events.vue'
+import Hooks from './Hooks.vue'
+import Initial from './Initial.vue'
+import Model from './Model.vue'
+import Multiple from './Multiple.vue'
+import Options from './Options.vue'
+import Parent from './Parent.vue'
+import Simple from './Simple.vue'
+
+const component = shallowRef(Sink)
+</script>
+
+<template>
+  <select v-model="component">
+    <option :value="Sink">Kitchen sink</option>
+    <option :value="BindCompleted">BindCompleted</option>
+    <option :value="BindMasked">BindMasked</option>
+    <option :value="BindModel">BindModel</option>
+    <option :value="BindUnmasked">BindUnmasked</option>
+    <option :value="Callbacks">Callbacks</option>
+    <option :value="ChangeValue">ChangeValue</option>
+    <option :value="Config">Config</option>
+    <option :value="Custom">Custom</option>
+    <option :value="DataAttr">DataAttr</option>
+    <option :value="Dynamic">Dynamic</option>
+    <option :value="Events">Events</option>
+    <option :value="Hooks">Hooks</option>
+    <option :value="Initial">Initial</option>
+    <option :value="Model">Model</option>
+    <option :value="Multiple">Multiple</option>
+    <option :value="Options">Options</option>
+    <option :value="Parent">Parent</option>
+    <option :value="Simple">Simple</option>
+  </select>
+
+  <div class="comp">
+    <component :is="component"></component>
+  </div>
+</template>
+
+<style scoped>
+.comp {
+  margin-top: 1em;
+  padding: 1em;
+  border: 1px solid #ccc;
+}
+</style>
@@ -0,0 +1,60 @@
+<script setup>
+import { reactive, ref, shallowRef } from 'vue'
+import { vMaska } from '../../src'
+
+const mask = ref('+1 (###) ###-####')
+const show = ref(true)
+const eager = ref(true)
+const valueMasked = ref('1234567')
+const valueunmasked = ref('1')
+
+const onMaska = (e) => console.log(e.detail)
+
+const options = reactive({
+  mask,
+  eager
+})
+
+const options2 = {
+  preProcess: val => val.replace(/[$,]/g, ''),
+  postProcess: val => {
+    if (!val) return ''
+
+    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)
+
+    return Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(val)
+      .slice(0, sub ? -sub : undefined)
+  }
+}
+</script>
+
+<template>
+  <div class="row">
+    <div>
+      show: <input type="checkbox" v-model="show">
+      eager: <input type="checkbox" v-model="eager">
+    </div>
+    <div><input v-model="mask"></div>
+
+    <div v-if="show">
+      <input v-maska:valueunmasked.unmasked="options" v-model="valueMasked" @maska="onMaska">
+      <div>Masked: {{ valueMasked }}</div>
+      <div>Unmasked: {{ valueunmasked }}</div>
+    </div>
+  </div>
+
+  <div class="row"><input type="email" v-maska data-maska="##-##" data-maska-eager value="12"></div>
+
+  <div class="row"><input v-maska data-maska="####" value="1234"></div>
+
+  <div><input v-maska="options2" value="1234567" data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional"></div>
+</template>
+
+<style scoped>
+.row {
+  margin-bottom: 1em;
+}
+</style>