SHARE
TWEET

Untitled

a guest Jul 17th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.       import { onMount, createEventDispatcher, afterUpdate } from "svelte";
  3.  
  4.       import isEmail from "validator/lib/isEmail";
  5.       import isEmpty from "validator/lib/isEmpty";
  6.  
  7.       export let rules = [];
  8.       export let focusInit = false;
  9.       export let type = "text";
  10.       export let label = null;
  11.       export let name = null;
  12.       export let value = null;
  13.       export let disabled = false;
  14.       export let placeholder = "";
  15.       export let autocomplete = null;
  16.       export let emptyClear = false;
  17.       export let adjustClear = false;
  18.       export let valid = false;
  19.       export let showAllError = false;
  20.       export let error= null;
  21.  
  22.       let inputInstance;
  23.       let thisFieldIsValid = "";
  24.       let showError = false;
  25.  
  26.       export let showMask = false;
  27.       let inputInstanceMask;
  28.       let hiddenMask = true;
  29.  
  30.  
  31.     let firstValidate = true;
  32.       const handlerMask = () => {
  33.         if (showMask) {
  34.           hiddenMask = !hiddenMask;
  35.         } else {
  36.           value = "";
  37.           inputInstance.focus();
  38.         }
  39.       };
  40.  
  41.       const dispatch = createEventDispatcher();
  42.  
  43.       onMount(() => {
  44.         setTimeout(() => {
  45.           if (focusInit) inputInstance.focus();
  46.           showError = true;
  47.         }, 200);
  48.         inputInstance.type = type;
  49.         thisFieldIsValid = "";
  50.       });
  51.  
  52.       afterUpdate(async () => {
  53.         if (valid) {
  54.           thisFieldIsValid = handlerValidator(value);
  55.           valid = false;
  56.         }
  57.         if(error){
  58.           thisFieldIsValid = [error]
  59.           error = false
  60.         }
  61.       });
  62.  
  63.       const handlerValidator = val => {
  64.  
  65.         if (!process.browser) {
  66.           return [];
  67.         }
  68.         const errors = [];
  69.         rules.forEach(
  70.           ({ type, required, message, validator, minLength, maxLength }) => {
  71.             if (required) {
  72.               const em = isEmpty(val);
  73.               if (em) {
  74.                 errors.push(message || "The element is required");
  75.               }
  76.             }
  77.             if (minLength) {
  78.               if (val.length < minLength) {
  79.                 errors.push(message || `Must have minimum ${minLength} characters`);
  80.               }
  81.             }
  82.             if (maxLength) {
  83.               if (val.length > maxLength) {
  84.                 errors.push(message || `Must have maximum ${maxLength} characters`);
  85.               }
  86.             }
  87.             if (type === "email") {
  88.               if (!isEmail(val)) {
  89.                 errors.push(message || "Invalid email");
  90.               }
  91.             }
  92.             if (validator) {
  93.               validator(val, s => {
  94.                 if (s) errors.push(s || "An error occurred");
  95.               });
  96.             }
  97.           }
  98.         );
  99.  
  100.         const error =
  101.           (errors.length > 0 && ((!showAllError && [errors[0]]) || errors)) || [];
  102.  
  103.         dispatch("handlerError", errors.length > 0);
  104.  
  105.         return error;
  106.       };
  107.  
  108.       $: thisFieldIsValid = handlerValidator(value);
  109.     </script>
  110.  
  111.     <style>
  112.       input.error {
  113.         border-color: #e02121;
  114.       }
  115.       span.error {
  116.         color: #e02121;
  117.       }
  118.       input.hidden {
  119.         display: none;
  120.       }
  121.       .maskToogle {
  122.         position: absolute;
  123.         right: 2px;
  124.         width: 28px;
  125.         font-size: 14px;
  126.         background: transparent;
  127.         border-radius: 50%;
  128.         color: rgb(0, 0, 0);
  129.         text-align: center;
  130.         text-decoration: none;
  131.         user-select: none;
  132.         display: flex;
  133.         justify-content: center;
  134.         align-items: center;
  135.         height: 38px;
  136.       }
  137.       .maskToogle:hover {
  138.         cursor: pointer;
  139.       }
  140.       .adjustClear {
  141.         top: 8px;
  142.       }
  143.     </style>
  144.  
  145.     <div class="form-group">
  146.       {#if label}
  147.         <label class="label-{name}" for="input-{name}"> {label} </label>
  148.       {/if}
  149.  
  150.       {#if (type === 'password' && showMask) || (emptyClear && !isEmpty(value))}
  151.         <div class="maskToogle" class:adjustClear on:click={handlerMask}>
  152.           {#if emptyClear && !isEmpty(value)}
  153.             <span class="pe-7s-trash" />
  154.           {:else}
  155.             <span class="pe-7s-{hiddenMask ? 'shield' : 'note2'}" />
  156.           {/if}
  157.         </div>
  158.       {/if}
  159.  
  160.       {#if type === 'password' && showMask}
  161.         <input
  162.           bind:this={inputInstanceMask}
  163.           type="text"
  164.           bind:value
  165.           {autocomplete}
  166.           {disabled}
  167.           class="form-control"
  168.           class:error={thisFieldIsValid.length > 0 && showError}
  169.           class:hidden={hiddenMask}
  170.           id="input-{name}-mask"
  171.           {placeholder} />
  172.       {/if}
  173.  
  174.       <input
  175.         bind:this={inputInstance}
  176.         type="text"
  177.         bind:value
  178.         {autocomplete}
  179.         {disabled}
  180.         class="form-control"
  181.         class:error={thisFieldIsValid.length > 0 && showError}
  182.         class:hidden={!hiddenMask}
  183.         id="input-{name}"
  184.         {placeholder} />
  185.  
  186.       {#if showError}
  187.         {#each thisFieldIsValid as someError}
  188.           <span class="error">{someError}</span>
  189.         {/each}
  190.       {/if}
  191.  
  192.     </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top