{"version":3,"sources":["webpack:///./src/midone/views/profile-overview-2/Main.vue","webpack:///./src/midone/views/profile-overview-2/Main.vue?4694","webpack:///./src/midone/views/profile-overview-2/Main.vue?2f73"],"names":["class","data-toggle","data-target","href","id","alt","src","$f","photos","users","name","jobs","email","prevNewProducts","nextNewProducts","refKey","$_","take","faker","fakerKey","key","images","products","news","shortContent","totals","dates","prevNewAuthors","nextNewAuthors","setup","newProductsRef","newAuthorsRef","el","value","tns","goTo","render"],"mappings":"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","file":"js/chunk-2d0d6561.2c967e14.js","sourcesContent":["<template>\n  <div>\n    <div class=\"intro-y flex items-center mt-8\">\n      <h2 class=\"text-lg font-medium mr-auto\">Profile Layout</h2>\n    </div>\n    <!-- BEGIN: Profile Info -->\n    <div class=\"intro-y box px-5 pt-5 mt-5\">\n      <div\n        class=\"flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5\"\n      >\n        <div\n          class=\"flex flex-1 px-5 items-center justify-center lg:justify-start\"\n        >\n          <div\n            class=\"w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative\"\n          >\n            <img\n              alt=\"Midone Tailwind HTML Admin Template\"\n              class=\"rounded-full\"\n              :src=\"require(`@/midone/assets/images/${$f()[0].photos[0]}`)\"\n            />\n          </div>\n          <div class=\"ml-5\">\n            <div\n              class=\"w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg\"\n            >\n              {{ $f()[0].users[0].name }}\n            </div>\n            <div class=\"text-gray-600\">{{ $f()[0].jobs[0] }}</div>\n          </div>\n        </div>\n        <div\n          class=\"mt-6 lg:mt-0 flex-1 dark:text-gray-300 px-5 border-l border-r border-gray-200 dark:border-dark-5 border-t lg:border-t-0 pt-5 lg:pt-0\"\n        >\n          <div class=\"font-medium text-center lg:text-left lg:mt-5\">\n            Contact Details\n          </div>\n          <div\n            class=\"flex flex-col justify-center items-center lg:items-start mt-4\"\n          >\n            <div class=\"truncate sm:whitespace-normal flex items-center\">\n              <MailIcon class=\"w-4 h-4 mr-2\" />\n              {{ $f()[0].users[0].email }}\n            </div>\n            <div class=\"truncate sm:whitespace-normal flex items-center mt-3\">\n              <InstagramIcon class=\"w-4 h-4 mr-2\" />\n              {{ $f()[0].users[0].name }}\n            </div>\n            <div class=\"truncate sm:whitespace-normal flex items-center mt-3\">\n              <TwitterIcon class=\"w-4 h-4 mr-2\" />\n              {{ $f()[0].users[0].name }}\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"mt-6 lg:mt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-0 border-gray-200 dark:border-dark-5 pt-5 lg:pt-0\"\n        >\n          <div class=\"text-center rounded-md w-20 py-3\">\n            <div class=\"font-medium text-theme-1 dark:text-theme-10 text-xl\">\n              201\n            </div>\n            <div class=\"text-gray-600\">Orders</div>\n          </div>\n          <div class=\"text-center rounded-md w-20 py-3\">\n            <div class=\"font-medium text-theme-1 dark:text-theme-10 text-xl\">\n              1k\n            </div>\n            <div class=\"text-gray-600\">Purchases</div>\n          </div>\n          <div class=\"text-center rounded-md w-20 py-3\">\n            <div class=\"font-medium text-theme-1 dark:text-theme-10 text-xl\">\n              492\n            </div>\n            <div class=\"text-gray-600\">Reviews</div>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"nav-tabs flex flex-col sm:flex-row justify-center lg:justify-start\"\n      >\n        <a\n          data-toggle=\"tab\"\n          data-target=\"#profile\"\n          href=\"javascript:;\"\n          class=\"py-4 sm:mr-8 flex items-center active\"\n        >\n          <UserIcon class=\"w-4 h-4 mr-2\" /> Profile\n        </a>\n        <a\n          data-toggle=\"tab\"\n          data-target=\"#account\"\n          href=\"javascript:;\"\n          class=\"py-4 sm:mr-8 flex items-center\"\n        >\n          <ShieldIcon class=\"w-4 h-4 mr-2\" /> Account\n        </a>\n        <a\n          data-toggle=\"tab\"\n          data-target=\"#change-password\"\n          href=\"javascript:;\"\n          class=\"py-4 sm:mr-8 flex items-center\"\n        >\n          <LockIcon class=\"w-4 h-4 mr-2\" /> Change Password\n        </a>\n        <a\n          data-toggle=\"tab\"\n          data-target=\"#settings\"\n          href=\"javascript:;\"\n          class=\"py-4 sm:mr-8 flex items-center\"\n        >\n          <SettingsIcon class=\"w-4 h-4 mr-2\" /> Settings\n        </a>\n      </div>\n    </div>\n    <!-- END: Profile Info -->\n    <div class=\"tab-content mt-5\">\n      <div id=\"profile\" class=\"tab-content__pane active\">\n        <div class=\"grid grid-cols-12 gap-6\">\n          <!-- BEGIN: Latest Uploads -->\n          <div class=\"intro-y box col-span-12 lg:col-span-6\">\n            <div\n              class=\"flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">Latest Uploads</h2>\n              <div class=\"dropdown ml-auto sm:hidden\">\n                <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                  <MoreHorizontalIcon\n                    class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                  />\n                </a>\n                <div class=\"dropdown-box w-40\">\n                  <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                    <a\n                      href=\"javascript:;\"\n                      class=\"block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >All Files</a\n                    >\n                  </div>\n                </div>\n              </div>\n              <button\n                class=\"button border text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex\"\n              >\n                All Files\n              </button>\n            </div>\n            <div class=\"p-5\">\n              <div class=\"flex items-center\">\n                <div class=\"file\">\n                  <a href=\"\" class=\"w-12 file__icon file__icon--directory\"></a>\n                </div>\n                <div class=\"ml-4\">\n                  <a class=\"font-medium\" href=\"\">Documentation</a>\n                  <div class=\"text-gray-600 text-xs mt-0.5\">40 KB</div>\n                </div>\n                <div class=\"dropdown ml-auto\">\n                  <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                    <MoreHorizontalIcon\n                      class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                    />\n                  </a>\n                  <div class=\"dropdown-box w-40\">\n                    <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <UsersIcon class=\"w-4 h-4 mr-2\" /> Share File\n                      </a>\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <TrashIcon class=\"w-4 h-4 mr-2\" /> Delete\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex items-center mt-5\">\n                <div class=\"file\">\n                  <a href=\"\" class=\"w-12 file__icon file__icon--file\">\n                    <div class=\"file__icon__file-name text-xs\">MP3</div>\n                  </a>\n                </div>\n                <div class=\"ml-4\">\n                  <a class=\"font-medium\" href=\"\">Celine Dion - Ashes</a>\n                  <div class=\"text-gray-600 text-xs mt-0.5\">40 KB</div>\n                </div>\n                <div class=\"dropdown ml-auto\">\n                  <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                    <MoreHorizontalIcon\n                      class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                    />\n                  </a>\n                  <div class=\"dropdown-box w-40\">\n                    <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <UsersIcon class=\"w-4 h-4 mr-2\" /> Share File\n                      </a>\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <TrashIcon class=\"w-4 h-4 mr-2\" /> Delete\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"flex items-center mt-5\">\n                <div class=\"file\">\n                  <a\n                    href=\"\"\n                    class=\"w-12 file__icon file__icon--empty-directory\"\n                  ></a>\n                </div>\n                <div class=\"ml-4\">\n                  <a class=\"font-medium\" href=\"\">Resources</a>\n                  <div class=\"text-gray-600 text-xs mt-0.5\">0 KB</div>\n                </div>\n                <div class=\"dropdown ml-auto\">\n                  <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                    <MoreHorizontalIcon\n                      class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                    />\n                  </a>\n                  <div class=\"dropdown-box w-40\">\n                    <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <UsersIcon class=\"w-4 h-4 mr-2\" /> Share File\n                      </a>\n                      <a\n                        href=\"\"\n                        class=\"flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >\n                        <TrashIcon class=\"w-4 h-4 mr-2\" /> Delete\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- END: Latest Uploads -->\n          <!-- BEGIN: Work In Progress -->\n          <div class=\"intro-y box col-span-12 lg:col-span-6\">\n            <div\n              class=\"flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">Work In Progress</h2>\n              <div class=\"dropdown ml-auto sm:hidden\">\n                <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                  <MoreHorizontalIcon\n                    class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                  />\n                </a>\n                <div class=\"nav-tabs dropdown-box w-40\">\n                  <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                    <a\n                      href=\"javascript:;\"\n                      data-toggle=\"tab\"\n                      data-target=\"#new\"\n                      class=\"block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >New</a\n                    >\n                    <a\n                      href=\"javascript:;\"\n                      data-toggle=\"tab\"\n                      data-target=\"#last-week\"\n                      class=\"block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >Last Week</a\n                    >\n                  </div>\n                </div>\n              </div>\n              <div class=\"nav-tabs ml-auto hidden sm:flex\">\n                <a\n                  data-toggle=\"tab\"\n                  data-target=\"#work-in-progress-new\"\n                  href=\"javascript:;\"\n                  class=\"py-5 ml-6 active\"\n                  >New</a\n                >\n                <a\n                  data-toggle=\"tab\"\n                  data-target=\"#work-in-progress-last-week\"\n                  href=\"javascript:;\"\n                  class=\"py-5 ml-6\"\n                  >Last Week</a\n                >\n              </div>\n            </div>\n            <div class=\"p-5\">\n              <div class=\"tab-content\">\n                <div id=\"work-in-progress-new\" class=\"tab-content__pane active\">\n                  <div>\n                    <div class=\"flex\">\n                      <div class=\"mr-auto\">Pending Tasks</div>\n                      <div>20%</div>\n                    </div>\n                    <div\n                      class=\"w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full\"\n                    >\n                      <div class=\"w-1/2 h-full bg-theme-1 rounded-full\"></div>\n                    </div>\n                  </div>\n                  <div class=\"mt-5\">\n                    <div class=\"flex\">\n                      <div class=\"mr-auto\">Completed Tasks</div>\n                      <div>2 / 20</div>\n                    </div>\n                    <div\n                      class=\"w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full\"\n                    >\n                      <div class=\"w-1/4 h-full bg-theme-1 rounded-full\"></div>\n                    </div>\n                  </div>\n                  <div class=\"mt-5\">\n                    <div class=\"flex\">\n                      <div class=\"mr-auto\">Tasks In Progress</div>\n                      <div>42</div>\n                    </div>\n                    <div\n                      class=\"w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full\"\n                    >\n                      <div class=\"w-3/4 h-full bg-theme-1 rounded-full\"></div>\n                    </div>\n                  </div>\n                  <a\n                    href=\"\"\n                    class=\"button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5\"\n                    >View More Details</a\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- END: Work In Progress -->\n          <!-- BEGIN: Daily Sales -->\n          <div class=\"intro-y box col-span-12 lg:col-span-6\">\n            <div\n              class=\"flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">Daily Sales</h2>\n              <div class=\"dropdown ml-auto sm:hidden\">\n                <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                  <MoreHorizontalIcon\n                    class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                  />\n                </a>\n                <div class=\"dropdown-box w-40\">\n                  <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                    <a\n                      href=\"javascript:;\"\n                      class=\"flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md\"\n                    >\n                      <FileIcon class=\"w-4 h-4 mr-2\" /> Download Excel\n                    </a>\n                  </div>\n                </div>\n              </div>\n              <button\n                class=\"button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Download Excel\n              </button>\n            </div>\n            <div class=\"p-5\">\n              <div class=\"relative flex items-center\">\n                <div class=\"w-12 h-12 flex-none image-fit\">\n                  <img\n                    alt=\"Midone Tailwind HTML Admin Template\"\n                    class=\"rounded-full\"\n                    :src=\"require(`@/midone/assets/images/${$f()[0].photos[0]}`)\"\n                  />\n                </div>\n                <div class=\"ml-4 mr-auto\">\n                  <a href=\"\" class=\"font-medium\">{{ $f()[0].users[0].name }}</a>\n                  <div class=\"text-gray-600 mr-5 sm:mr-5\">\n                    Bootstrap 4 HTML Admin Template\n                  </div>\n                </div>\n                <div class=\"font-medium text-gray-700 dark:text-gray-600\">\n                  +$19\n                </div>\n              </div>\n              <div class=\"relative flex items-center mt-5\">\n                <div class=\"w-12 h-12 flex-none image-fit\">\n                  <img\n                    alt=\"Midone Tailwind HTML Admin Template\"\n                    class=\"rounded-full\"\n                    :src=\"require(`@/midone/assets/images/${$f()[1].photos[0]}`)\"\n                  />\n                </div>\n                <div class=\"ml-4 mr-auto\">\n                  <a href=\"\" class=\"font-medium\">{{ $f()[1].users[0].name }}</a>\n                  <div class=\"text-gray-600 mr-5 sm:mr-5\">\n                    Tailwind HTML Admin Template\n                  </div>\n                </div>\n                <div class=\"font-medium text-gray-700 dark:text-gray-600\">\n                  +$25\n                </div>\n              </div>\n              <div class=\"relative flex items-center mt-5\">\n                <div class=\"w-12 h-12 flex-none image-fit\">\n                  <img\n                    alt=\"Midone Tailwind HTML Admin Template\"\n                    class=\"rounded-full\"\n                    :src=\"require(`@/midone/assets/images/${$f()[2].photos[0]}`)\"\n                  />\n                </div>\n                <div class=\"ml-4 mr-auto\">\n                  <a href=\"\" class=\"font-medium\">{{ $f()[2].users[0].name }}</a>\n                  <div class=\"text-gray-600 mr-5 sm:mr-5\">\n                    Vuejs HTML Admin Template\n                  </div>\n                </div>\n                <div class=\"font-medium text-gray-700 dark:text-gray-600\">\n                  +$21\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- END: Daily Sales -->\n          <!-- BEGIN: Latest Tasks -->\n          <div class=\"intro-y box col-span-12 lg:col-span-6\">\n            <div\n              class=\"flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">Latest Tasks</h2>\n              <div class=\"dropdown ml-auto sm:hidden\">\n                <a class=\"dropdown-toggle w-5 h-5 block\" href=\"javascript:;\">\n                  <MoreHorizontalIcon\n                    class=\"w-5 h-5 text-gray-600 dark:text-gray-300\"\n                  />\n                </a>\n                <div class=\"nav-tabs dropdown-box w-40\">\n                  <div class=\"dropdown-box__content box dark:bg-dark-1 p-2\">\n                    <a\n                      href=\"javascript:;\"\n                      data-toggle=\"tab\"\n                      data-target=\"#new\"\n                      class=\"block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >New</a\n                    >\n                    <a\n                      href=\"javascript:;\"\n                      data-toggle=\"tab\"\n                      data-target=\"#last-week\"\n                      class=\"block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                      >Last Week</a\n                    >\n                  </div>\n                </div>\n              </div>\n              <div class=\"nav-tabs ml-auto hidden sm:flex\">\n                <a\n                  data-toggle=\"tab\"\n                  data-target=\"#latest-tasks-new\"\n                  href=\"javascript:;\"\n                  class=\"py-5 ml-6 active\"\n                  >New</a\n                >\n                <a\n                  data-toggle=\"tab\"\n                  data-target=\"#latest-tasks-last-week\"\n                  href=\"javascript:;\"\n                  class=\"py-5 ml-6\"\n                  >Last Week</a\n                >\n              </div>\n            </div>\n            <div class=\"p-5\">\n              <div class=\"tab-content\">\n                <div id=\"latest-tasks-new\" class=\"tab-content__pane active\">\n                  <div class=\"flex items-center\">\n                    <div class=\"border-l-2 border-theme-1 pl-4\">\n                      <a href=\"\" class=\"font-medium\">Create New Campaign</a>\n                      <div class=\"text-gray-600\">10:00 AM</div>\n                    </div>\n                    <input\n                      class=\"input input--switch ml-auto border\"\n                      type=\"checkbox\"\n                    />\n                  </div>\n                  <div class=\"flex items-center mt-5\">\n                    <div class=\"border-l-2 border-theme-1 pl-4\">\n                      <a href=\"\" class=\"font-medium\">Meeting With Client</a>\n                      <div class=\"text-gray-600\">02:00 PM</div>\n                    </div>\n                    <input\n                      class=\"input input--switch ml-auto border\"\n                      type=\"checkbox\"\n                    />\n                  </div>\n                  <div class=\"flex items-center mt-5\">\n                    <div class=\"border-l-2 border-theme-1 pl-4\">\n                      <a href=\"\" class=\"font-medium\">Create New Repository</a>\n                      <div class=\"text-gray-600\">04:00 PM</div>\n                    </div>\n                    <input\n                      class=\"input input--switch ml-auto border\"\n                      type=\"checkbox\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- END: Latest Tasks -->\n          <!-- BEGIN: New Products -->\n          <div class=\"intro-y box col-span-12\">\n            <div\n              class=\"flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">New Products</h2>\n              <button\n                class=\"button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2\"\n                @click=\"prevNewProducts\"\n              >\n                <ChevronLeftIcon class=\"w-4 h-4\" />\n              </button>\n              <button\n                class=\"button px-2 border relative flex items-center text-gray-700 dark:text-gray-300\"\n                @click=\"nextNewProducts\"\n              >\n                <ChevronRightIcon class=\"w-4 h-4\" />\n              </button>\n            </div>\n            <TinySlider refKey=\"newProductsRef\" class=\"py-5\">\n              <div\n                v-for=\"(faker, fakerKey) in $_.take($f(), 5)\"\n                :key=\"fakerKey\"\n                class=\"px-5\"\n              >\n                <div class=\"flex flex-col lg:flex-row items-center pb-5\">\n                  <div\n                    class=\"flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200 dark:border-dark-5\"\n                  >\n                    <div class=\"sm:mr-5\">\n                      <div class=\"w-20 h-20 image-fit\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          class=\"rounded-full\"\n                          :src=\"require(`@/midone/assets/images/${faker.images[0]}`)\"\n                        />\n                      </div>\n                    </div>\n                    <div class=\"mr-auto text-center sm:text-left mt-3 sm:mt-0\">\n                      <a href=\"\" class=\"font-medium text-lg\">{{\n                        faker.products[0].name\n                      }}</a>\n                      <div class=\"text-gray-600 mt-1 sm:mt-0\">\n                        {{ faker.news[0].shortContent }}\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-t-0 border-gray-200 dark:border-dark-5\"\n                  >\n                    <div class=\"text-center rounded-md w-20 py-3\">\n                      <div\n                        class=\"font-semibold text-theme-1 dark:text-theme-10 text-lg\"\n                      >\n                        {{ faker.totals[0] }}\n                      </div>\n                      <div class=\"text-gray-600\">Orders</div>\n                    </div>\n                    <div class=\"text-center rounded-md w-20 py-3\">\n                      <div\n                        class=\"font-semibold text-theme-1 dark:text-theme-10 text-lg\"\n                      >\n                        {{ faker.totals[1] }}k\n                      </div>\n                      <div class=\"text-gray-600\">Purchases</div>\n                    </div>\n                    <div class=\"text-center rounded-md w-20 py-3\">\n                      <div\n                        class=\"font-semibold text-theme-1 dark:text-theme-10 text-lg\"\n                      >\n                        {{ faker.totals[0] }}\n                      </div>\n                      <div class=\"text-gray-600\">Reviews</div>\n                    </div>\n                  </div>\n                </div>\n                <div\n                  class=\"flex flex-col sm:flex-row items-center border-t border-gray-200 dark:border-dark-5 pt-5\"\n                >\n                  <div\n                    class=\"w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 dark:border-dark-5 pb-5 sm:pb-0\"\n                  >\n                    <div\n                      class=\"px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium mr-3\"\n                    >\n                      {{ faker.dates[0] }}\n                    </div>\n                    <div class=\"text-gray-600\">Date of Release</div>\n                  </div>\n                  <div class=\"flex sm:ml-auto mt-5 sm:mt-0\">\n                    <button\n                      class=\"button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto\"\n                    >\n                      Preview\n                    </button>\n                    <button\n                      class=\"button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-2\"\n                    >\n                      Details\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </TinySlider>\n          </div>\n          <!-- END: New Products -->\n          <!-- BEGIN: New Authors -->\n          <div class=\"intro-y box col-span-12\">\n            <div\n              class=\"flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5\"\n            >\n              <h2 class=\"font-medium text-base mr-auto\">New Authors</h2>\n              <button\n                class=\"button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2\"\n                @click=\"prevNewAuthors\"\n              >\n                <ChevronLeftIcon class=\"w-4 h-4\" />\n              </button>\n              <button\n                class=\"button px-2 border relative flex items-center text-gray-700 dark:text-gray-300\"\n                @click=\"nextNewAuthors\"\n              >\n                <ChevronRightIcon class=\"w-4 h-4\" />\n              </button>\n            </div>\n            <TinySlider refKey=\"newAuthorsRef\" class=\"py-5\">\n              <div\n                v-for=\"(faker, fakerKey) in $_.take($f(), 5)\"\n                :key=\"fakerKey\"\n                class=\"px-5\"\n              >\n                <div class=\"flex flex-col lg:flex-row items-center pb-5\">\n                  <div\n                    class=\"flex-1 flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200 dark:border-dark-5\"\n                  >\n                    <div class=\"sm:mr-5\">\n                      <div class=\"w-20 h-20 image-fit\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          class=\"rounded-full\"\n                          :src=\"require(`@/midone/assets/images/${faker.photos[0]}`)\"\n                        />\n                      </div>\n                    </div>\n                    <div class=\"mr-auto text-center sm:text-left mt-3 sm:mt-0\">\n                      <a href=\"\" class=\"font-medium text-lg\">{{\n                        faker.users[0].name\n                      }}</a>\n                      <div class=\"text-gray-600 mt-1 sm:mt-0\">\n                        {{ faker.jobs[0] }}\n                      </div>\n                    </div>\n                  </div>\n                  <div\n                    class=\"w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex flex-col justify-center items-center lg:items-start px-5 border-t lg:border-t-0 border-gray-200 dark:border-dark-5\"\n                  >\n                    <div class=\"flex items-center\">\n                      <a\n                        href=\"\"\n                        class=\"w-8 h-8 rounded-full flex items-center justify-center border mr-2 text-gray-500\"\n                      >\n                        <FacebookIcon class=\"w-3 h-3 fill-current\" />\n                      </a>\n                      {{ faker.users[0].email }}\n                    </div>\n                    <div class=\"flex items-center mt-2\">\n                      <a\n                        href=\"\"\n                        class=\"w-8 h-8 rounded-full flex items-center justify-center border mr-2 text-gray-500\"\n                      >\n                        <TwitterIcon class=\"w-3 h-3 fill-current\" />\n                      </a>\n                      {{ faker.users[0].name }}\n                    </div>\n                  </div>\n                </div>\n                <div\n                  class=\"flex flex-col sm:flex-row items-center border-t border-gray-200 dark:border-dark-5 pt-5\"\n                >\n                  <div\n                    class=\"w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 dark:border-dark-5 pb-5 sm:pb-0\"\n                  >\n                    <div\n                      class=\"px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium mr-3\"\n                    >\n                      {{ faker.dates[0] }}\n                    </div>\n                    <div class=\"text-gray-600\">Joined Date</div>\n                  </div>\n                  <div class=\"flex sm:ml-auto mt-5 sm:mt-0\">\n                    <button\n                      class=\"button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto\"\n                    >\n                      Message\n                    </button>\n                    <button\n                      class=\"button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-2\"\n                    >\n                      Profile\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </TinySlider>\n          </div>\n          <!-- END: New Authors -->\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, provide } from 'vue'\n\nexport default defineComponent({\n  setup () {\n    const newProductsRef = ref<HTMLElement>()\n    const newAuthorsRef = ref<HTMLElement>()\n\n    provide('bind[newProductsRef]', (el: HTMLElement) => {\n      newProductsRef.value = el\n    })\n\n    provide('bind[newAuthorsRef]', (el: HTMLElement) => {\n      newAuthorsRef.value = el\n    })\n\n    const prevNewProducts = () => {\n      const el: any = newProductsRef.value\n      el.tns.goTo('prev')\n    }\n    const nextNewProducts = () => {\n      const el: any = newProductsRef.value\n      el.tns.goTo('next')\n    }\n    const prevNewAuthors = () => {\n      const el: any = newAuthorsRef.value\n      el.tns.goTo('prev')\n    }\n    const nextNewAuthors = () => {\n      const el: any = newAuthorsRef.value\n      el.tns.goTo('next')\n    }\n\n    return {\n      prevNewProducts,\n      nextNewProducts,\n      prevNewAuthors,\n      nextNewAuthors\n    }\n  }\n})\n</script>\n","\nimport { defineComponent, ref, provide } from 'vue'\n\nexport default defineComponent({\n  setup () {\n    const newProductsRef = ref<HTMLElement>()\n    const newAuthorsRef = ref<HTMLElement>()\n\n    provide('bind[newProductsRef]', (el: HTMLElement) => {\n      newProductsRef.value = el\n    })\n\n    provide('bind[newAuthorsRef]', (el: HTMLElement) => {\n      newAuthorsRef.value = el\n    })\n\n    const prevNewProducts = () => {\n      const el: any = newProductsRef.value\n      el.tns.goTo('prev')\n    }\n    const nextNewProducts = () => {\n      const el: any = newProductsRef.value\n      el.tns.goTo('next')\n    }\n    const prevNewAuthors = () => {\n      const el: any = newAuthorsRef.value\n      el.tns.goTo('prev')\n    }\n    const nextNewAuthors = () => {\n      const el: any = newAuthorsRef.value\n      el.tns.goTo('next')\n    }\n\n    return {\n      prevNewProducts,\n      nextNewProducts,\n      prevNewAuthors,\n      nextNewAuthors\n    }\n  }\n})\n","import { render } from \"./Main.vue?vue&type=template&id=60b552f4\"\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":""}