type

Sanshain · Sanshain · commit e25458aa0012 · 2022-09-06T18:46:59.000+03:00
diff --git a/build/index.html b/build/index.html
@@ -5,11 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="./css/app.css">
+    <!-- <link rel="stylesheet" href="./css/app.css"> -->
+    <link rel="stylesheet" href="https://unpkg.com/svelte-mask@0.2.6/build/css/app.css">
 </head>
 <body>
     <div id="app"></div>
-    <script src="./bundle.js"></script>
+    <!-- <script src="./bundle.js"></script> -->
+    <script src="https://unpkg.com/svelte-mask@0.2.6/build/bundle.js"></script>
     <script>
         createMaskInput('app', '+7(999)9999999')        
     </script>
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "svelte-mask",
   "private": false,
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "main": "index.js",
   "repository": "https://github.com/Sanshain/svelte-input-mask",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "rollup -c",
     "preview": "vite preview"
   },
   "keywords": [
diff --git a/src/PhoneMaskInput.svelte b/src/PhoneMaskInput.svelte
@@ -16,6 +16,9 @@
   * @param {InputEvent} event
   */
   function onInput(event) {    
+    
+    // console.log(event);
+
 
     const formatHolder = (autoValue) => {
       let len = (autoValue || event.target.value).length;
@@ -30,7 +33,6 @@
 
     if (~['insertText', 'insertFromPaste'].indexOf(event.inputType)) {
       
-      // console.log(event.inputType);
       let autoValue = validate(event.inputType, event);
       if (autoValue === false){
         event.target.value = value;
@@ -117,14 +119,15 @@
 </script>
 
 <div class="container">
-  <input type="text" on:input={onInput} bind:value>
+  <input type="tel" on:input={onInput} bind:value>
   <div class="placeholder" style={`margin-left: ${holderOffset}px;`}>{holderValue}</div>  
   <div class="mask" bind:this={shadowElement}>{value}</div>
 </div>
 
 <style>
   *{
-    font-family: Arial;
+    font-family: Arial !important;
+    font-size: medium !important;
   }
   .container{
     position: relative;
@@ -140,7 +143,7 @@
     top: 0.65em;
     left: 0.6em;
     pointer-events: none;
-    color: gray;
+    color: lightgrey;
   }
   .mask{
     visibility: hidden;
diff --git a/vite.config.js b/vite.config.js
@@ -3,5 +3,6 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()]
+  plugins: [svelte()],
+  target: 'iife'
 })
