{"version":3,"sources":["webpack:///./src/midone/views/validation/Main.vue","webpack:///./src/midone/views/validation/Main.vue?476b","webpack:///./src/midone/views/validation/Main.vue?4b11"],"names":["class","id","type","data-target","save","validate","name","$model","$error","placeholder","$errors","error","index","key","$message","email","password","age","url","comment","setup","formData","rules","required","minLength","integer","maxLength","value","$touch","console","log","$invalid","text","duration","newWindow","close","gravity","position","backgroundColor","stopOnFocus","showToast","render"],"mappings":"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","file":"js/chunk-2d2176ed.8d0cfe32.js","sourcesContent":["<template>\n  <div class=\"intro-y flex items-center mt-8\">\n    <h2 class=\"text-lg font-medium mr-auto\">Form Validation</h2>\n  </div>\n  <div class=\"grid grid-cols-12 gap-6 mt-5\">\n    <div class=\"intro-y col-span-12 lg:col-span-6\">\n      <!-- BEGIN: Form Validation -->\n      <div class=\"intro-y box\">\n        <div\n          class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n        >\n          <h2 class=\"font-medium text-base mr-auto\">Implementation</h2>\n          <div\n            class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n          >\n            <div class=\"mr-3\">Show example code</div>\n            <input\n              data-target=\"#form-validation\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"form-validation\" class=\"p-5\">\n          <div class=\"preview\">\n            <form class=\"validate-form\" @submit.prevent=\"save\">\n              <div>\n                <label class=\"flex flex-col sm:flex-row\">\n                  Name\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Required, at least 2 characters</span\n                  >\n                </label>\n                <input\n                  v-model.trim=\"validate.name.$model\"\n                  type=\"text\"\n                  class=\"input w-full border mt-2\"\n                  :class=\"{ 'border-theme-6': validate.name.$error }\"\n                  placeholder=\"John Legend\"\n                />\n                <template v-if=\"validate.name.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.name.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <div class=\"mt-3\">\n                <label class=\"flex flex-col sm:flex-row\">\n                  Email\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Required, email address format</span\n                  >\n                </label>\n                <input\n                  v-model.trim=\"validate.email.$model\"\n                  type=\"email\"\n                  class=\"input w-full border mt-2\"\n                  :class=\"{ 'border-theme-6': validate.email.$error }\"\n                  placeholder=\"example@gmail.com\"\n                />\n                <template v-if=\"validate.email.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.email.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <div class=\"mt-3\">\n                <label class=\"flex flex-col sm:flex-row\">\n                  Password\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Required, at least 6 characters</span\n                  >\n                </label>\n                <input\n                  v-model.trim=\"validate.password.$model\"\n                  type=\"password\"\n                  class=\"input w-full border mt-2\"\n                  :class=\"{ 'border-theme-6': validate.password.$error }\"\n                  placeholder=\"secret\"\n                />\n                <template v-if=\"validate.password.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.password.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <div class=\"mt-3\">\n                <label class=\"flex flex-col sm:flex-row\">\n                  Age\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Required, integer only & maximum 3 characters</span\n                  >\n                </label>\n                <input\n                  v-model.trim=\"validate.age.$model\"\n                  type=\"number\"\n                  class=\"input w-full border mt-2\"\n                  :class=\"{ 'border-theme-6': validate.age.$error }\"\n                  placeholder=\"21\"\n                />\n                <template v-if=\"validate.age.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.age.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <div class=\"mt-3\">\n                <label class=\"flex flex-col sm:flex-row\">\n                  Profile URL\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Optional, URL format</span\n                  >\n                </label>\n                <input\n                  v-model.trim=\"validate.url.$model\"\n                  type=\"url\"\n                  class=\"input w-full border mt-2\"\n                  :class=\"{ 'border-theme-6': validate.url.$error }\"\n                  placeholder=\"https://google.com\"\n                />\n                <template v-if=\"validate.url.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.url.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <div class=\"mt-3\">\n                <label class=\"flex flex-col sm:flex-row\">\n                  Comment\n                  <span class=\"sm:ml-auto mt-1 sm:mt-0 text-xs text-gray-600\"\n                    >Required, at least 10 characters</span\n                  >\n                </label>\n                <textarea\n                  v-model.trim=\"validate.comment.$model\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"Type your comments\"\n                  :class=\"{ 'border-theme-6': validate.comment.$error }\"\n                ></textarea>\n                <template v-if=\"validate.comment.$error\">\n                  <div\n                    v-for=\"(error, index) in validate.comment.$errors\"\n                    :key=\"index\"\n                    class=\"text-theme-6 mt-2\"\n                  >\n                    {{ error.$message }}\n                  </div>\n                </template>\n              </div>\n              <button type=\"submit\" class=\"button bg-theme-1 text-white mt-5\">\n                Register\n              </button>\n            </form>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-form-validation\"\n              class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n            >\n              <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n            </button>\n            <div class=\"overflow-y-auto h-64 mt-3\">\n              <Highlight id=\"copy-form-validation\" class=\"source-preview\">\n                <code\n                  class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                >\n                  <textarea>\n                    const formData = reactive({\n                      name: '',\n                      email: '',\n                      password: '',\n                      age: '',\n                      url: '',\n                      comment: ''\n                    })\n                    const rules = {\n                      name: {\n                        required,\n                        minLength: minLength(2)\n                      },\n                      email: {\n                        required,\n                        email\n                      },\n                      password: {\n                        required,\n                        minLength: minLength(6)\n                      },\n                      age: {\n                        required,\n                        integer,\n                        maxLength: maxLength(3)\n                      },\n                      url: {\n                        url\n                      },\n                      comment: {\n                        required,\n                        minLength: minLength(10)\n                      }\n                    }\n                    const validate = useVuelidate(rules, toRefs(formData))\n                    const save = () => {\n                      validate.value.$touch()\n                      console.log(validate.value)\n                      if (validate.value.$invalid) {\n                        Toastify({\n                          text: 'Registration failed, please check the fileld form.',\n                          duration: 3000,\n                          newWindow: true,\n                          close: true,\n                          gravity: 'bottom',\n                          position: 'left',\n                          backgroundColor: '#D32929',\n                          stopOnFocus: true\n                        }).showToast()\n                      } else {\n                        Toastify({\n                          text: 'Registration success!',\n                          duration: 3000,\n                          newWindow: true,\n                          close: true,\n                          gravity: 'bottom',\n                          position: 'left',\n                          backgroundColor: '#91C714',\n                          stopOnFocus: true\n                        }).showToast()\n                      }\n                    }\n\n                    return {\n                      validate,\n                      formData,\n                      save\n                    }\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Form Validation -->\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport {\n  required,\n  minLength,\n  maxLength,\n  email,\n  url,\n  integer\n} from '@vuelidate/validators'\nimport { useVuelidate } from '@vuelidate/core'\nimport Toastify from 'toastify-js'\n\nexport default defineComponent({\n  setup () {\n    const formData = reactive({\n      name: '',\n      email: '',\n      password: '',\n      age: '',\n      url: '',\n      comment: ''\n    })\n    const rules = {\n      name: {\n        required,\n        minLength: minLength(2)\n      },\n      email: {\n        required,\n        email\n      },\n      password: {\n        required,\n        minLength: minLength(6)\n      },\n      age: {\n        required,\n        integer,\n        maxLength: maxLength(3)\n      },\n      url: {\n        url\n      },\n      comment: {\n        required,\n        minLength: minLength(10)\n      }\n    }\n    const validate = useVuelidate(rules, toRefs(formData))\n    const save = () => {\n      validate.value.$touch()\n      console.log(validate.value)\n      if (validate.value.$invalid) {\n        Toastify({\n          text: 'Registration failed, please check the fileld form.',\n          duration: 3000,\n          newWindow: true,\n          close: true,\n          gravity: 'bottom',\n          position: 'left',\n          backgroundColor: '#D32929',\n          stopOnFocus: true\n        }).showToast()\n      } else {\n        Toastify({\n          text: 'Registration success!',\n          duration: 3000,\n          newWindow: true,\n          close: true,\n          gravity: 'bottom',\n          position: 'left',\n          backgroundColor: '#91C714',\n          stopOnFocus: true\n        }).showToast()\n      }\n    }\n\n    return {\n      validate,\n      formData,\n      save\n    }\n  }\n})\n</script>\n","\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport {\n  required,\n  minLength,\n  maxLength,\n  email,\n  url,\n  integer\n} from '@vuelidate/validators'\nimport { useVuelidate } from '@vuelidate/core'\nimport Toastify from 'toastify-js'\n\nexport default defineComponent({\n  setup () {\n    const formData = reactive({\n      name: '',\n      email: '',\n      password: '',\n      age: '',\n      url: '',\n      comment: ''\n    })\n    const rules = {\n      name: {\n        required,\n        minLength: minLength(2)\n      },\n      email: {\n        required,\n        email\n      },\n      password: {\n        required,\n        minLength: minLength(6)\n      },\n      age: {\n        required,\n        integer,\n        maxLength: maxLength(3)\n      },\n      url: {\n        url\n      },\n      comment: {\n        required,\n        minLength: minLength(10)\n      }\n    }\n    const validate = useVuelidate(rules, toRefs(formData))\n    const save = () => {\n      validate.value.$touch()\n      console.log(validate.value)\n      if (validate.value.$invalid) {\n        Toastify({\n          text: 'Registration failed, please check the fileld form.',\n          duration: 3000,\n          newWindow: true,\n          close: true,\n          gravity: 'bottom',\n          position: 'left',\n          backgroundColor: '#D32929',\n          stopOnFocus: true\n        }).showToast()\n      } else {\n        Toastify({\n          text: 'Registration success!',\n          duration: 3000,\n          newWindow: true,\n          close: true,\n          gravity: 'bottom',\n          position: 'left',\n          backgroundColor: '#91C714',\n          stopOnFocus: true\n        }).showToast()\n      }\n    }\n\n    return {\n      validate,\n      formData,\n      save\n    }\n  }\n})\n","import { render } from \"./Main.vue?vue&type=template&id=5c3a005a\"\nimport script from \"./Main.vue?vue&type=script&lang=ts\"\nexport * from \"./Main.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}