<template>
  <div id="app" class="p-8 lg:p-0">
    <a
      title="Full Documentation"
      href="https://formvuelar.netlify.com/?ref=formvuelar-demo"
      target="_blank"
      class="absolute right-0 top-0 m-4 mt-5"
      style="margin-right: 105px"
    >
      <svg
        class="h-8 w-8 text-teal-600"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 296.999 296.999"
      >
        <path
          d="M45.432 35.049h-.025a10.474 10.474 0 0 0-7.446 3.085 10.583 10.583 0 0 0-3.128 7.543v159.365c0 5.844 4.773 10.61 10.641 10.625 24.738.059 66.184 5.215 94.776 35.136V84.023c0-1.981-.506-3.842-1.461-5.382-23.467-37.792-68.563-43.534-93.357-43.592zM262.167 205.042V45.676c0-2.852-1.111-5.531-3.128-7.543a10.477 10.477 0 0 0-7.445-3.085h-.026c-24.793.059-69.889 5.801-93.357 43.593-.955 1.54-1.46 3.401-1.46 5.382v166.779c28.592-29.921 70.038-35.077 94.776-35.136 5.867-.015 10.64-4.781 10.64-10.624z"
        ></path>
        <path
          d="M286.373 71.801h-7.706v133.241c0 14.921-12.157 27.088-27.101 27.125-20.983.05-55.581 4.153-80.084 27.344 42.378-10.376 87.052-3.631 112.512 2.171a10.606 10.606 0 0 0 9.011-2.054 10.567 10.567 0 0 0 3.994-8.301v-168.9c.001-5.859-4.767-10.626-10.626-10.626zM18.332 205.042V71.801h-7.706C4.768 71.801 0 76.568 0 82.427v168.897c0 3.25 1.456 6.276 3.994 8.301a10.598 10.598 0 0 0 9.011 2.054c25.46-5.803 70.135-12.547 112.511-2.171-24.502-23.19-59.1-27.292-80.083-27.342-14.943-.036-27.101-12.203-27.101-27.124z"
        ></path>
      </svg>
    </a>
    <a
      rel="no-referer"
      class="absolute right-0 top-0 m-4 mt-6 mr-12"
      href="https://twitter.com/intent/tweet?text=Check%20out%20FormVuelar%21%20Vue%20form%20components%20done%20right%21&hashtags=formVuelar%2Cvue&url=https%3A%2F%2Fjaniskelemen.github.io%2Fformvuelar&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3DCheck%2520out%2520FormVuelar%21%2520Vue%2520form%2520components%2520done%2520right%21%26hashtags%3DformVuelar%2Cvue%26url%3Dhttps%3A%2F%2Fjaniskelemen.github.io%2Fformvuelar"
      title="Share on Twitter"
      target="_blank"
    >
      <svg width="56px" height="22px" viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
        <path
          d="
    M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
    Z"
          style="fill: #3ba9ee"
        ></path>
      </svg>
    </a>
    <a class="absolute right-0 top-0 m-4" href="https://github.com/janiskelemen/formvuelar" title="View on Github">
      <img
        alt="View on Github"
        height="40"
        src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
        width="40"
      />
    </a>
    <h1 class="text-center mb-16">
      <svg alt="FormVuelar" class="h-16 inline" fill="none" viewBox="0 0 340 81" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M215.057 71.6878c.314 0 .524.2072.628.6215.157.3625.236.8027.236 1.3206 0 .4661-.026.7769-.079.9322-.104 1.6055-.758 2.9002-1.962 3.8842-1.151.9322-2.695 1.3983-4.631 1.3983-3.925 0-6.175-1.9939-6.75-5.9816-1.361 1.8126-2.957 3.2886-4.789 4.4279C195.879 79.4303 193.89 80 191.745 80c-2.774 0-4.893-.751-6.358-2.2529-1.413-1.5536-2.119-3.7806-2.119-6.6808 0-.8804.026-1.5536.078-2.0197l3.061-28.1992c.105-1.5019 1.492-2.2528 4.16-2.2528h1.963c2.669 0 3.925.7509 3.768 2.2528l-2.748 26.1794c-.052.259-.078.6215-.078 1.0876 0 2.5376 1.151 3.8065 3.453 3.8065 1.047 0 2.041-.3367 2.983-1.0099.942-.6733 1.779-1.5278 2.512-2.5636l2.904-27.5c.157-1.5019 1.544-2.2528 4.16-2.2528h2.041c2.617 0 3.873.7509 3.768 2.2528l-.942 8.856c-.419 3.9359-.759 6.8879-1.02 8.8559l-.707 6.8361c-.314 2.3823-.471 3.8065-.471 4.2726 0 .8287.105 1.4242.314 1.7868.21.3107.55.4661 1.021.4661.261 0 .523-.0259.785-.0777.261-.1036.523-.1554.784-.1554zM247.744 68.5805c.471 0 .811.2848 1.02.8545.262.5179.393 1.217.393 2.0975 0 1.7608-.393 3.2109-1.178 4.3502-.837 1.2948-2.433 2.3047-4.788 3.0297-2.354.6733-4.552 1.0099-6.593 1.0099-4.867 0-8.661-1.3206-11.382-3.9619-2.668-2.693-4.003-6.7843-4.003-12.274 0-7.4576 1.596-13.5687 4.788-18.3333 3.192-4.7646 7.902-7.1469 14.129-7.1469 3.14 0 5.625.5956 7.457 1.7867 1.831 1.1394 3.087 2.5377 3.768 4.1949.732 1.6573 1.099 3.2886 1.099 4.8941 0 4.4021-1.466 7.8719-4.396 10.4096-2.93 2.5377-6.698 3.8065-11.303 3.8065-2.041 0-3.899-.1295-5.573-.3884 0 3.4181.602 5.8262 1.805 7.2245 1.204 1.3466 2.957 2.0198 5.259 2.0198 1.57 0 2.904-.233 4.003-.6991 1.099-.4661 2.329-1.1135 3.69-1.9421.889-.6215 1.491-.9322 1.805-.9322zm-8.242-22.606c-4.082 0-6.698 3.6512-7.849 10.9534h3.061c2.512 0 4.553-.5438 6.123-1.6313 1.622-1.0876 2.433-2.7707 2.433-5.0495 0-1.3465-.34-2.3823-1.021-3.1073-.68-.7768-1.596-1.1653-2.747-1.1653zM265.962 79.9223c-2.564 0-4.605-.6992-6.122-2.0975-1.518-1.3983-2.276-3.5993-2.276-6.6031 0-.4143.052-1.1393.157-2.1751l4.866-41.673c.157-1.4501 1.622-2.1751 4.396-2.1751h1.491c2.774 0 4.082.725 3.925 2.1751l-4.867 41.5176c-.052.259-.078.5697-.078.9322 0 1.5537.654 2.3305 1.962 2.3305.314 0 .68-.0518 1.099-.1553.419-.1554.733-.2331.942-.2331.366 0 .654.2331.863.6992.21.4661.314 1.0357.314 1.709 0 .4143-.026.725-.078.9322-.157 1.6055-.837 2.8225-2.041 3.6511-1.151.7769-2.669 1.1653-4.553 1.1653zM287.747 80c-3.506 0-6.07-1.5278-7.693-4.5834-1.622-3.0555-2.433-6.9656-2.433-11.7302 0-1.0876.105-2.7707.314-5.0494.733-6.5254 2.433-11.549 5.102-15.0707 2.669-3.5734 5.913-5.3601 9.733-5.3601 1.884 0 3.454.3884 4.71 1.1652 1.256.7769 2.381 1.735 3.375 2.8743.367-1.0358.681-1.7608.942-2.1751.262-.4661.654-.8286 1.178-1.0876.575-.2589 1.386-.3884 2.433-.3884h.785c2.407 0 3.611.6215 3.611 1.8644-.053.7251-.131 1.6055-.236 2.6412-.105.984-.209 1.9421-.314 2.8743l-.392 3.1851-1.256 12.1963c-.157 1.2947-.314 2.693-.471 4.1949-.157 1.4501-.288 2.7966-.393 4.0396-.052 1.6054.393 2.4082 1.335 2.4082.261 0 .523-.0259.785-.0777.261-.1036.523-.1554.785-.1554.314 0 .549.2072.706.6215.157.4143.236.9063.236 1.476 0 1.8644-.602 3.3404-1.806 4.4279-1.151 1.0876-2.799 1.6314-4.945 1.6314-4.029 0-6.279-2.0716-6.75-6.2147C294.942 77.9025 291.829 80 287.747 80zm3.768-8.0014c1.203 0 2.302-.5438 3.296-1.6314 1.047-1.1394 1.884-2.7448 2.512-4.8164l1.334-12.5847c.21-1.7091.471-3.3145.785-4.8164-.575-.6215-1.203-1.1135-1.883-1.476-.681-.4143-1.492-.6215-2.434-.6215-2.093 0-3.715 1.0099-4.866 3.0297-1.152 2.0198-1.963 5.2048-2.434 9.5551-.209 2.2787-.314 3.9618-.314 5.0494 0 5.5414 1.335 8.3122 4.004 8.3122zM319.807 79.5339c-2.773 0-4.081-.7251-3.924-2.1752l2.747-25.7909c.261-2.2788.392-4.3503.392-6.2147 0-.8804-.026-1.7091-.078-2.4859-.053-.8286-.079-1.4242-.079-1.7867.053-.7251.942-1.2689 2.669-1.6314 1.779-.4143 3.323-.6214 4.631-.6214.837 0 1.413.3884 1.727 1.1652.314.725.497 1.5278.55 2.4082.052.8286.104 1.3724.157 1.6313 1.151-1.8126 2.328-3.2368 3.532-4.2726 1.256-1.0357 2.616-1.5536 4.081-1.5536 1.466 0 2.46.3884 2.983 1.1652.576.7251.811 1.5796.707 2.5636-.105 1.0876-.419 2.3564-.942 3.8065-.471 1.4501-.995 2.1751-1.57 2.1751-.314 0-.837-.1035-1.57-.3107-.68-.2589-1.361-.3884-2.041-.3884-1.099 0-2.172.4402-3.218 1.3206-.994.8804-1.701 1.8385-2.119 2.8743l-2.748 25.9463c-.157 1.4501-1.622 2.1752-4.395 2.1752h-1.492zM3.85312 80.154c-2.618 0-3.85-.7187-3.696-2.156l5.159-49.126c.10267-.9754.385-1.6684.847-2.079.462-.462 1.12933-.693 2.002-.693H28.9551c1.1294 0 1.694.7956 1.694 2.387l-.077.924-.231 1.925c-.1026 1.1806-.3593 2.0276-.77 2.541-.3593.5133-.8726.77-1.54.77h-13.167l-1.386 13.552h12.243c1.1294 0 1.694.7956 1.694 2.387l-.077.924-.231 1.925c-.1026 1.1806-.3593 2.0276-.77 2.541-.3593.5133-.8726.77-1.54.77h-12.243l-2.233 21.252c-.154 1.4373-1.53998 2.156-4.15798 2.156h-2.31zM43.4967 80.539c-4.466 0-7.8283-1.3604-10.087-4.081-2.2587-2.772-3.388-6.8017-3.388-12.089 0-1.4374.077-2.926.231-4.466.7187-6.7247 2.541-11.858 5.467-15.4 2.9773-3.542 7.007-5.313 12.089-5.313 4.4147 0 7.7513 1.386 10.01 4.158 2.2587 2.7206 3.388 6.7246 3.388 12.012 0 1.386-.077 2.9003-.231 4.543-.7187 6.7246-2.5667 11.858-5.544 15.4-2.926 3.4906-6.9043 5.236-11.935 5.236zm.77-7.7c1.9507 0 3.465-1.001 4.543-3.003 1.078-2.0534 1.8737-5.39 2.387-10.01.2053-1.7967.308-3.5164.308-5.159 0-2.7207-.385-4.697-1.155-5.929-.7187-1.232-1.848-1.848-3.388-1.848-1.9507 0-3.465 1.001-4.543 3.003-1.078 2.002-1.848 5.313-2.31 9.933-.2053 1.848-.308 3.619-.308 5.313 0 2.7206.3593 4.697 1.078 5.929.7187 1.1806 1.848 1.771 3.388 1.771zM68.488 80.154c-2.7207 0-4.004-.7187-3.85-2.156l2.695-25.564c.2567-2.2587.385-4.312.385-6.16 0-.8727-.0257-1.694-.077-2.464-.0513-.8214-.077-1.4117-.077-1.771.0513-.7187.924-1.2577 2.618-1.617 1.7453-.4107 3.2597-.616 4.543-.616.8213 0 1.386.385 1.694 1.155.308.7186.4877 1.5143.539 2.387.0513.8213.1027 1.3603.154 1.617 1.1293-1.7967 2.2843-3.2084 3.465-4.235 1.232-1.0267 2.5667-1.54 4.004-1.54 1.4373 0 2.4127.385 2.926 1.155.5647.7186.7957 1.5656.693 2.541-.1027 1.078-.4107 2.3356-.924 3.773-.462 1.4373-.9753 2.156-1.54 2.156-.308 0-.8213-.1027-1.54-.308-.6673-.2567-1.3347-.385-2.002-.385-1.078 0-2.1303.4363-3.157 1.309-.9753.8726-1.6683 1.8223-2.079 2.849l-2.695 25.718c-.154 1.4373-1.5913 2.156-4.312 2.156h-1.463zM137.473 72.377c.308 0 .539.2053.693.616.154.3593.231.8213.231 1.386 0 1.8993-.59 3.388-1.771 4.466-1.129 1.078-2.746 1.617-4.851 1.617-2.053 0-3.721-.616-5.005-1.848-1.283-1.232-1.925-3.2597-1.925-6.083 0-.308.257-3.2084.77-8.701l1.155-11.396c.052-.3594.077-.847.077-1.463 0-2.5154-1.052-3.773-3.157-3.773-.975 0-1.925.308-2.849.924-.872.616-1.642 1.386-2.31 2.31l-2.926 27.566c-.102 1.4373-1.463 2.156-4.081 2.156h-1.925c-2.618 0-3.85-.7187-3.696-2.156l2.695-25.564c.052-.308.077-.7444.077-1.309 0-1.2834-.256-2.2587-.77-2.926-.513-.6674-1.36-1.001-2.541-1.001-1.078 0-2.079.385-3.003 1.155-.924.7186-1.668 1.5143-2.233 2.387l-2.8486 27.258c-.154 1.4373-1.5143 2.156-4.081 2.156h-2.002c-2.5667 0-3.7987-.7187-3.696-2.156l2.772-25.564c.2567-2.618.385-4.928.385-6.93 0-.8727-.0257-1.5657-.077-2.079-.0514-.5134-.0514-.924 0-1.232.0513-.8214.9753-1.4117 2.772-1.771 1.848-.4107 3.4137-.616 4.697-.616.8727 0 1.4373.308 1.694.924.2566.616.3846 1.3603.3846 2.233.052.8726.103 1.54.154 2.002 1.284-1.694 2.824-3.08 4.62-4.158 1.797-1.078 3.748-1.617 5.852-1.617 2.002 0 3.645.462 4.928 1.386 1.335.924 2.208 2.31 2.618 4.158 1.335-1.6427 2.926-2.9774 4.774-4.004 1.848-1.0267 3.85-1.54 6.006-1.54 2.464 0 4.364.7443 5.698 2.233 1.386 1.4886 2.079 3.7216 2.079 6.699 0 .462-.051 1.2576-.154 2.387l-1.309 13.09-.693 6.853v.308c0 1.232.411 1.848 1.232 1.848.308 0 .591-.0257.847-.077.257-.1027.488-.154.693-.154z"
          fill="#3C4948"
        ></path>
        <path
          d="M154.098 80c-3.257 0-5.001-.7377-5.234-2.2131l-8.573-42.3515c0-.233-.078-.5048-.233-.8154-.077-.3882-.077-.7376 0-1.0483.078-.6988.62-1.2424 1.628-1.6306 1.086-.4659 2.637-.6989 4.653-.6989h3.373c3.334 0 5.117.9318 5.35 2.7955l3.688 30.1214h.349l28.005-61.36365C187.724.93182 189.701 0 193.036 0h3.256c3.955 0 5.854.77651 5.699 2.32954l-.581 1.98012-34.751 73.47724C166.116 79.2623 164.178 80 160.844 80h-6.746z"
          fill="#38A89D"
        ></path>
      </svg>
    </h1>
    <div class="flex flex-wrap justify-center">
      <div class="w-full text-center md:w-1/5 md:text-left">
        <router-link tag="button" to="/" class="button-link md:border-l-2 md:border-b-0 md:flex"> Basic </router-link>
        <router-link tag="button" to="/prefilled" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Prefilled
        </router-link>
        <router-link tag="button" to="/advancedselects" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Selects
        </router-link>
        <router-link tag="button" to="/tags" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Tags
        </router-link>
        <router-link tag="button" to="/nestedcheckbox" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Multi Checkbox
        </router-link>
        <router-link tag="button" to="/upload" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Upload
        </router-link>
        <router-link tag="button" to="/multiupload" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Multi Upload
        </router-link>
        <router-link tag="button" to="/dropzone" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Dropzone
        </router-link>
        <router-link tag="button" to="/datepicker" class="button-link md:border-l-2 md:border-b-0 md:flex">
          Date Picker
        </router-link>
      </div>
      <div class="w-full md:w-3/5">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
  import VueRouter from 'vue-router'
  import BasicForm from './examples/BasicForm.vue'
  import PrefilledForm from './examples/PrefilledForm.vue'
  import AdvancedSelectsForm from './examples/AdvancedSelects.vue'
  import DateTimePickersForm from './examples/DateTimePickers.vue'
  import UploadForm from './examples/FileUpload.vue'
  import MultiUploadForm from './examples/MultiFileUpload.vue'
  import DropzoneForm from './examples/Dropzone.vue'
  import NestedCheckboxForm from './examples/NestedCheckbox.vue'
  import TagForm from './examples/TagForm.vue'

  const router = new VueRouter({
    routes: [
      {
        path: '/',
        component: BasicForm,
      },
      {
        path: '/prefilled',
        component: PrefilledForm,
        props: {
          initFullname: 'John Doe',
          initBio: 'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
          initPet: 'dog',
        },
      },
      {
        path: '/advancedselects',
        component: AdvancedSelectsForm,
      },
      {
        path: '/tags',
        component: TagForm,
      },
      {
        path: '/nestedcheckbox',
        component: NestedCheckboxForm,
      },
      {
        path: '/upload',
        component: UploadForm,
      },
      {
        path: '/multiupload',
        component: MultiUploadForm,
      },
      {
        path: '/dropzone',
        component: DropzoneForm,
      },
      {
        path: '/datepicker',
        component: DateTimePickersForm,
      },
    ],
  })

  export default {
    router,
    name: 'App',
    components: {},
    data() {
      return {
        showSource: '',
        section: 'basic',
      }
    },
    methods: {
      toggleSource(field) {
        this.showSource = this.showSource == field ? '' : field
      },
    },
  }
</script>

<style lang="postcss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 60px;
    max-width: 1024px;
    margin: 60px auto;
  }
  .button-link {
    @apply border-b-2 border-white p-2 mx-2 mb-2 text-gray-800;
  }
  .button-link:focus {
    @apply outline-none;
  }
  .button-link:hover {
    @apply border-gray-400;
  }
  .router-link-exact-active,
  .router-link-exact-active:hover {
    @apply border-teal-600 font-semibold;
  }
</style>
