{"version":3,"sources":["webpack:///./src/midone/views/modal/Main.vue","webpack:///./src/midone/views/modal/Main.vue?5ea5","webpack:///./src/midone/views/modal/Main.vue?cc23"],"names":["class","id","data-target","href","data-toggle","type","data-dismiss","showProgrammaticallyShowModal","hideProgrammaticallyShowModal","toggleProgrammaticallyShowModal","alt","src","$f","images","render","setup","console","log","cash","modal"],"mappings":"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","file":"js/chunk-125c4d9c.139a4050.js","sourcesContent":["<template>\n  <div class=\"intro-y flex items-center mt-8\">\n    <h2 class=\"text-lg font-medium mr-auto\">Modal</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: Blank Modal -->\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\">Blank Modal</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=\"#blank-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"blank-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#basic-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"basic-modal-preview\" class=\"modal\">\n              <div class=\"modal__content p-10 text-center\">\n                This is totally awesome blank modal!\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-blank-modal\"\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-blank-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#basic-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"basic-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content p-10 text-center\">\n                        This is totally awesome blank modal!\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Blank Modal -->\n      <!-- BEGIN: Modal Size -->\n      <div class=\"intro-y box mt-5\">\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\">Modal Size</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=\"#modal-size\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"modal-size\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center text-sm-left\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#small-modal-size-preview\"\n                class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                >Show Small Modal</a\n              >\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#medium-modal-size-preview\"\n                class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                >Show Medium Modal</a\n              >\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#large-modal-size-preview\"\n                class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                >Show Large Modal</a\n              >\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#superlarge-modal-size-preview\"\n                class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                >Show Superlarge Modal</a\n              >\n            </div>\n            <div id=\"small-modal-size-preview\" class=\"modal\">\n              <div class=\"modal__content modal__content--sm p-10 text-center\">\n                This is totally awesome small modal!\n              </div>\n            </div>\n            <div id=\"medium-modal-size-preview\" class=\"modal\">\n              <div class=\"modal__content p-10 text-center\">\n                This is totally awesome medium modal!\n              </div>\n            </div>\n            <div id=\"large-modal-size-preview\" class=\"modal\">\n              <div class=\"modal__content modal__content--lg p-10 text-center\">\n                This is totally awesome large modal!\n              </div>\n            </div>\n            <div id=\"superlarge-modal-size-preview\" class=\"modal\">\n              <div class=\"modal__content modal__content--xl p-10 text-center\">\n                This is totally awesome superlarge modal!\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-modal-size\"\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-modal-size\" 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                    <div class=\"text-center text-sm-left\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#small-modal-size-preview\"\n                        class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                        >Show Small Modal</a\n                      >\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#medium-modal-size-preview\"\n                        class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                        >Show Medium Modal</a\n                      >\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#large-modal-size-preview\"\n                        class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                        >Show Large Modal</a\n                      >\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#superlarge-modal-size-preview\"\n                        class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                        >Show Superlarge Modal</a\n                      >\n                    </div>\n                    <div id=\"small-modal-size-preview\" class=\"modal\">\n                      <div\n                        class=\"modal__content modal__content--sm p-10 text-center\"\n                      >\n                        This is totally awesome small modal!\n                      </div>\n                    </div>\n                    <div id=\"medium-modal-size-preview\" class=\"modal\">\n                      <div class=\"modal__content p-10 text-center\">\n                        This is totally awesome medium modal!\n                      </div>\n                    </div>\n                    <div id=\"large-modal-size-preview\" class=\"modal\">\n                      <div\n                        class=\"modal__content modal__content--lg p-10 text-center\"\n                      >\n                        This is totally awesome large modal!\n                      </div>\n                    </div>\n                    <div id=\"superlarge-modal-size-preview\" class=\"modal\">\n                      <div\n                        class=\"modal__content modal__content--xl p-10 text-center\"\n                      >\n                        This is totally awesome superlarge modal!\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Modal Size -->\n      <!-- BEGIN: Programmatically Show/Hide Modal -->\n      <div class=\"intro-y box mt-5\">\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\">\n            Programmatically Show/Hide Modal\n          </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=\"#programmatically-show-hide-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"programmatically-show-hide-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center text-sm-left\">\n              <a\n                href=\"javascript:;\"\n                class=\"button mr-1 mb-2 inline-block bg-theme-1 text-white\"\n                @click=\"showProgrammaticallyShowModal()\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"programmatically-modal\" class=\"modal\">\n              <div class=\"modal__content p-10 text-center\">\n                <a\n                  href=\"javascript:;\"\n                  class=\"button mr-1 inline-block bg-theme-1 text-white\"\n                  @click=\"hideProgrammaticallyShowModal()\"\n                  >Hide Modal</a\n                >\n                <a\n                  href=\"javascript:;\"\n                  class=\"button mr-1 inline-block bg-theme-1 text-white\"\n                  @click=\"toggleProgrammaticallyShowModal()\"\n                  >Toggle Modal</a\n                >\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-programmatically-show-hide-modal\"\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\n                id=\"copy-programmatically-show-hide-modal\"\n                class=\"source-preview\"\n              >\n                <code\n                  class=\"javascript cursor-texttext-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                >\n                  <textarea>\n                    // Show modal\n                    cash(\"#programmatically-modal\").modal(\"show\")\n\n                    // Hide modal\n                    cash(\"#programmatically-modal\").modal(\"hide\")\n\n                    // Toggle modal\n                    cash(\"#programmatically-modal\").modal(\"toggle\")\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Programmatically Show/Hide Modal -->\n      <!-- BEGIN: Warning Modal -->\n      <div class=\"intro-y box mt-5\">\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\">Warning Modal</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=\"#warning-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"warning-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#warning-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"warning-modal-preview\" class=\"modal\">\n              <div class=\"modal__content\">\n                <div class=\"p-5 text-center\">\n                  <xCircleIcon class=\"w-16 h-16 text-theme-12 mx-auto mt-3\" />\n                  <div class=\"text-3xl mt-5\">Oops...</div>\n                  <div class=\"text-gray-600 mt-2\">Something went wrong!</div>\n                </div>\n                <div class=\"px-5 pb-8 text-center\">\n                  <button\n                    type=\"button\"\n                    data-dismiss=\"modal\"\n                    class=\"button w-24 bg-theme-1 text-white\"\n                  >\n                    Ok\n                  </button>\n                </div>\n                <div\n                  class=\"p-5 text-center border-t border-gray-200 dark:border-dark-5\"\n                >\n                  <a href=\"\" class=\"text-theme-1 dark:text-theme-10\"\n                    >Why do I have this issue?</a\n                  >\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-warning-modal\"\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-warning-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#warning-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"warning-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content\">\n                        <div class=\"p-5 text-center\">\n                          <xCircleIcon\n                            class=\"w-16 h-16 text-theme-6 mx-auto mt-3\"\n                          />\n                          <div class=\"text-3xl mt-5\">Oops...</div>\n                          <div class=\"text-gray-600 mt-2\">\n                            Something went wrong!\n                          </div>\n                        </div>\n                        <div class=\"px-5 pb-8 text-center\">\n                          <button\n                            type=\"button\"\n                            data-dismiss=\"modal\"\n                            class=\"button w-24 bg-theme-1 text-white\"\n                          >\n                            Ok\n                          </button>\n                        </div>\n                        <div\n                          class=\"p-5 text-center border-t border-gray-200 dark:border-dark-5\"\n                        >\n                          <a href=\"\" class=\"text-theme-1 dark:text-theme-10\"\n                            >Why do I have this issue?</a\n                          >\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Warning Modal -->\n      <!-- BEGIN: Modal With Close Button -->\n      <div class=\"intro-y box mt-5\">\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\">Modal With Close Button</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=\"#button-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"button-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#button-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"button-modal-preview\" class=\"modal\">\n              <div class=\"modal__content relative\">\n                <a\n                  data-dismiss=\"modal\"\n                  href=\"javascript:;\"\n                  class=\"absolute right-0 top-0 mt-3 mr-3\"\n                >\n                  <xIcon class=\"w-8 h-8 text-gray-500\" />\n                </a>\n                <div class=\"p-5 text-center\">\n                  <CheckCircleIcon\n                    class=\"w-16 h-16 text-theme-9 mx-auto mt-3\"\n                  />\n                  <div class=\"text-3xl mt-5\">Modal Example</div>\n                  <div class=\"text-gray-600 mt-2\">Modal with close button</div>\n                </div>\n                <div class=\"px-5 pb-8 text-center\">\n                  <button\n                    type=\"button\"\n                    data-dismiss=\"modal\"\n                    class=\"button w-24 bg-theme-1 text-white\"\n                  >\n                    Ok\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-button-modal\"\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-button-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#button-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"button-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content relative\">\n                        <a\n                          data-dismiss=\"modal\"\n                          href=\"javascript:;\"\n                          class=\"absolute right-0 top-0 mt-3 mr-3\"\n                        >\n                          <xIcon class=\"w-8 h-8 text-gray-500\" />\n                        </a>\n                        <div class=\"p-5 text-center\">\n                          <CheckCircleIcon\n                            class=\"w-16 h-16 text-theme-9 mx-auto mt-3\"\n                          />\n                          <div class=\"text-3xl mt-5\">Modal Example</div>\n                          <div class=\"text-gray-600 mt-2\">\n                            Modal with close button\n                          </div>\n                        </div>\n                        <div class=\"px-5 pb-8 text-center\">\n                          <button\n                            type=\"button\"\n                            data-dismiss=\"modal\"\n                            class=\"button w-24 bg-theme-1 text-white\"\n                          >\n                            Ok\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Modal With Close Button -->\n    </div>\n    <div class=\"intro-y col-span-12 lg:col-span-6\">\n      <!-- BEGIN: Overlapping Modal -->\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\">Overlapping Modal</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=\"#overlapping-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"overlapping-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#overlapping-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"overlapping-modal-preview\" class=\"modal\">\n              <div class=\"modal__content px-5 py-10\">\n                <div class=\"text-center\">\n                  <div class=\"mb-3\">\n                    Click button bellow to show overlapping modal!\n                  </div>\n                  <a\n                    href=\"javascript:;\"\n                    data-toggle=\"modal\"\n                    data-target=\"#next-overlapping-modal-preview\"\n                    class=\"button inline-block bg-theme-1 text-white\"\n                    >Show overlapping modal</a\n                  >\n                </div>\n                <div id=\"next-overlapping-modal-preview\" class=\"modal\">\n                  <div class=\"modal__content p-10 text-center\">\n                    <div class=\"mb-2\">\n                      This is totally awesome overlapping modal!\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-overlapping-modal\"\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-overlapping-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#overlapping-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"overlapping-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content px-5 py-10\">\n                        <div class=\"text-center\">\n                          <div class=\"mb-3\">\n                            Click button bellow to show overlapping modal!\n                          </div>\n                          <a\n                            href=\"javascript:;\"\n                            data-toggle=\"modal\"\n                            data-target=\"#next-overlapping-modal-preview\"\n                            class=\"button inline-block bg-theme-1 text-white\"\n                            >Show overlapping modal</a\n                          >\n                        </div>\n                        <div id=\"next-overlapping-modal-preview\" class=\"modal\">\n                          <div class=\"modal__content p-10 text-center\">\n                            <div class=\"mb-2\">\n                              This is totally awesome overlapping modal!\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Overlapping Modal -->\n      <!-- BEGIN: Header & Footer Modal -->\n      <div class=\"intro-y box mt-5\">\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\">Header & Footer Modal</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=\"#header-footer-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"header-footer-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#header-footer-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"header-footer-modal-preview\" class=\"modal\">\n              <div class=\"modal__content\">\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\">\n                    Broadcast Message\n                  </h2>\n                  <button\n                    class=\"button border 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 Docs\n                  </button>\n                  <div class=\"dropdown sm:hidden\">\n                    <a\n                      class=\"dropdown-toggle w-5 h-5 block\"\n                      href=\"javascript:;\"\n                    >\n                      <MoreHorizontalIcon\n                        class=\"w-5 h-5 text-gray-700 dark:text-gray-600\"\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 dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md\"\n                        >\n                          <FileIcon class=\"w-4 h-4 mr-2\" />\n                          Download Docs\n                        </a>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"p-5 grid grid-cols-12 gap-4 row-gap-3\">\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>From</label>\n                    <input\n                      type=\"text\"\n                      class=\"input w-full border mt-2 flex-1\"\n                      placeholder=\"example@gmail.com\"\n                    />\n                  </div>\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>To</label>\n                    <input\n                      type=\"text\"\n                      class=\"input w-full border mt-2 flex-1\"\n                      placeholder=\"example@gmail.com\"\n                    />\n                  </div>\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>Subject</label>\n                    <input\n                      type=\"text\"\n                      class=\"input w-full border mt-2 flex-1\"\n                      placeholder=\"Important Meeting\"\n                    />\n                  </div>\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>Has the Words</label>\n                    <input\n                      type=\"text\"\n                      class=\"input w-full border mt-2 flex-1\"\n                      placeholder=\"Job, Work, Documentation\"\n                    />\n                  </div>\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>Doesn't Have</label>\n                    <input\n                      type=\"text\"\n                      class=\"input w-full border mt-2 flex-1\"\n                      placeholder=\"Job, Work, Documentation\"\n                    />\n                  </div>\n                  <div class=\"col-span-12 sm:col-span-6\">\n                    <label>Size</label>\n                    <select class=\"input w-full border mt-2 flex-1\">\n                      <option>10</option>\n                      <option>25</option>\n                      <option>35</option>\n                      <option>50</option>\n                    </select>\n                  </div>\n                </div>\n                <div\n                  class=\"px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5\"\n                >\n                  <button\n                    type=\"button\"\n                    data-dismiss=\"modal\"\n                    class=\"button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1\"\n                  >\n                    Cancel\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"button w-20 bg-theme-1 text-white\"\n                  >\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-header-footer-modal\"\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-header-footer-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#header-footer-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"header-footer-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content\">\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\">\n                            Broadcast Message\n                          </h2>\n                          <button\n                            class=\"button border 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\" />\n                            Download Docs\n                          </button>\n                          <div class=\"dropdown sm:hidden\">\n                            <a\n                              class=\"dropdown-toggle w-5 h-5 block\"\n                              href=\"javascript:;\"\n                            >\n                              <MoreHorizontalIcon\n                                class=\"w-5 h-5 text-gray-700 dark:text-gray-600\"\n                              />\n                            </a>\n                            <div\n                              class=\"dropdown-box w-40\"\n                            >\n                              <div\n                                class=\"dropdown-box__content box dark:bg-dark-1 p-2\"\n                              >\n                                <a\n                                  href=\"javascript:;\"\n                                  class=\"flex items-center 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                                  <FileIcon class=\"w-4 h-4 mr-2\" />\n                                  Download Docs\n                                </a>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"p-5 grid grid-cols-12 gap-4 row-gap-3\">\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>From</label>\n                            <input\n                              type=\"text\"\n                              class=\"input w-full border mt-2 flex-1\"\n                              placeholder=\"example@gmail.com\"\n                            />\n                          </div>\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>To</label>\n                            <input\n                              type=\"text\"\n                              class=\"input w-full border mt-2 flex-1\"\n                              placeholder=\"example@gmail.com\"\n                            />\n                          </div>\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>Subject</label>\n                            <input\n                              type=\"text\"\n                              class=\"input w-full border mt-2 flex-1\"\n                              placeholder=\"Important Meeting\"\n                            />\n                          </div>\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>Has the Words</label>\n                            <input\n                              type=\"text\"\n                              class=\"input w-full border mt-2 flex-1\"\n                              placeholder=\"Job, Work, Documentation\"\n                            />\n                          </div>\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>Doesn't Have</label>\n                            <input\n                              type=\"text\"\n                              class=\"input w-full border mt-2 flex-1\"\n                              placeholder=\"Job, Work, Documentation\"\n                            />\n                          </div>\n                          <div class=\"col-span-12 sm:col-span-6\">\n                            <label>Size</label>\n                            <select class=\"input w-full border mt-2 flex-1\">\n                              <option>10</option>\n                              <option>25</option>\n                              <option>35</option>\n                              <option>50</option>\n                            </select>\n                          </div>\n                        </div>\n                        <div\n                          class=\"px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1\"\n                          >\n                            Cancel\n                          </button>\n                          <button\n                            type=\"button\"\n                            class=\"button w-20 bg-theme-1 text-white\"\n                          >\n                            Send\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Header & Footer Modal -->\n      <!-- BEGIN: Delete Modal -->\n      <div class=\"intro-y box mt-5\">\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\">Delete Modal</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=\"#delete-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"delete-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#delete-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"delete-modal-preview\" class=\"modal\">\n              <div class=\"modal__content\">\n                <div class=\"p-5 text-center\">\n                  <xCircleIcon class=\"w-16 h-16 text-theme-6 mx-auto mt-3\" />\n                  <div class=\"text-3xl mt-5\">Are you sure?</div>\n                  <div class=\"text-gray-600 mt-2\">\n                    Do you really want to delete these records? This process\n                    cannot be undone.\n                  </div>\n                </div>\n                <div class=\"px-5 pb-8 text-center\">\n                  <button\n                    type=\"button\"\n                    data-dismiss=\"modal\"\n                    class=\"button w-24 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1\"\n                  >\n                    Cancel\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"button w-24 bg-theme-6 text-white\"\n                  >\n                    Delete\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-delete-modal\"\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-delete-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#delete-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"delete-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content\">\n                        <div class=\"p-5 text-center\">\n                          <xCircleIcon\n                            class=\"w-16 h-16 text-theme-6 mx-auto mt-3\"\n                          />\n                          <div class=\"text-3xl mt-5\">Are you sure?</div>\n                          <div class=\"text-gray-600 mt-2\">\n                            Do you really want to delete these records? This\n                            process cannot be undone.\n                          </div>\n                        </div>\n                        <div class=\"px-5 pb-8 text-center\">\n                          <button\n                            type=\"button\"\n                            data-dismiss=\"modal\"\n                            class=\"button w-24 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1\"\n                          >\n                            Cancel\n                          </button>\n                          <button\n                            type=\"button\"\n                            class=\"button w-24 bg-theme-6 text-white\"\n                          >\n                            Delete\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Delete Modal -->\n      <!-- BEGIN: Success Modal -->\n      <div class=\"intro-y box mt-5\">\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\">Success Modal</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=\"#success-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"success-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#success-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"success-modal-preview\" class=\"modal\">\n              <div class=\"modal__content\">\n                <div class=\"p-5 text-center\">\n                  <CheckCircleIcon\n                    class=\"w-16 h-16 text-theme-9 mx-auto mt-3\"\n                  />\n                  <div class=\"text-3xl mt-5\">Good job!</div>\n                  <div class=\"text-gray-600 mt-2\">You clicked the button!</div>\n                </div>\n                <div class=\"px-5 pb-8 text-center\">\n                  <button\n                    type=\"button\"\n                    data-dismiss=\"modal\"\n                    class=\"button w-24 bg-theme-1 text-white\"\n                  >\n                    Ok\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-success-modal\"\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-success-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#success-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"success-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content\">\n                        <div class=\"p-5 text-center\">\n                          <CheckCircleIcon\n                            class=\"w-16 h-16 text-theme-9 mx-auto mt-3\"\n                          />\n                          <div class=\"text-3xl mt-5\">Good job!</div>\n                          <div class=\"text-gray-600 mt-2\">\n                            You clicked the button!\n                          </div>\n                        </div>\n                        <div class=\"px-5 pb-8 text-center\">\n                          <button\n                            type=\"button\"\n                            data-dismiss=\"modal\"\n                            class=\"button w-24 bg-theme-1 text-white\"\n                          >\n                            Ok\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Success Modal -->\n      <!-- BEGIN: Slick Modal -->\n      <div class=\"intro-y box mt-5\">\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\">Slick Modal</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=\"#slick-modal\"\n              class=\"show-code input input--switch border\"\n              type=\"checkbox\"\n            />\n          </div>\n        </div>\n        <div id=\"slick-modal\" class=\"p-5\">\n          <div class=\"preview\">\n            <div class=\"text-center\">\n              <a\n                href=\"javascript:;\"\n                data-toggle=\"modal\"\n                data-target=\"#slick-modal-preview\"\n                class=\"button inline-block bg-theme-1 text-white\"\n                >Show Modal</a\n              >\n            </div>\n            <div id=\"slick-modal-preview\" class=\"modal\">\n              <div class=\"modal__content\">\n                <div class=\"p-5\">\n                  <TinySlider class=\"mx-6\">\n                    <div class=\"h-56 px-2\">\n                      <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          :src=\"require(`@/midone/assets/images/${$f()[0].images[0]}`)\"\n                        />\n                      </div>\n                    </div>\n                    <div class=\"h-56 px-2\">\n                      <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          :src=\"require(`@/midone/assets/images/${$f()[0].images[1]}`)\"\n                        />\n                      </div>\n                    </div>\n                    <div class=\"h-56 px-2\">\n                      <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          :src=\"require(`@/midone/assets/images/${$f()[0].images[2]}`)\"\n                        />\n                      </div>\n                    </div>\n                    <div class=\"h-56 px-2\">\n                      <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                        <img\n                          alt=\"Midone Tailwind HTML Admin Template\"\n                          :src=\"require(`@/midone/assets/images/${$f()[0].images[3]}`)\"\n                        />\n                      </div>\n                    </div>\n                  </TinySlider>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"source-code hidden\">\n            <button\n              data-target=\"#copy-slick-modal\"\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-slick-modal\" 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                    <div class=\"text-center\">\n                      <a\n                        href=\"javascript:;\"\n                        data-toggle=\"modal\"\n                        data-target=\"#slick-modal-preview\"\n                        class=\"button inline-block bg-theme-1 text-white\"\n                        >Show Modal</a\n                      >\n                    </div>\n                    <div id=\"slick-modal-preview\" class=\"modal\">\n                      <div class=\"modal__content\">\n                        <div class=\"p-5\">\n                          <TinySlider\n                            class=\"mx-6\"\n                          >\n                            <div class=\"h-56 px-2\">\n                              <div\n                                class=\"h-full image-fit rounded-md overflow-hidden\"\n                              >\n                                <img\n                                  alt=\"Midone Tailwind HTML Admin Template\"\n                                  :src=\"\n                                    require(`@/midone/assets/images/${\n                                      $f()[0].images[0]\n                                    }`)\n                                  \"\n                                />\n                              </div>\n                            </div>\n                            <div class=\"h-56 px-2\">\n                              <div\n                                class=\"h-full image-fit rounded-md overflow-hidden\"\n                              >\n                                <img\n                                  alt=\"Midone Tailwind HTML Admin Template\"\n                                  :src=\"\n                                    require(`@/midone/assets/images/${\n                                      $f()[0].images[1]\n                                    }`)\n                                  \"\n                                />\n                              </div>\n                            </div>\n                            <div class=\"h-56 px-2\">\n                              <div\n                                class=\"h-full image-fit rounded-md overflow-hidden\"\n                              >\n                                <img\n                                  alt=\"Midone Tailwind HTML Admin Template\"\n                                  :src=\"\n                                    require(`@/midone/assets/images/${\n                                      $f()[0].images[2]\n                                    }`)\n                                  \"\n                                />\n                              </div>\n                            </div>\n                            <div class=\"h-56 px-2\">\n                              <div\n                                class=\"h-full image-fit rounded-md overflow-hidden\"\n                              >\n                                <img\n                                  alt=\"Midone Tailwind HTML Admin Template\"\n                                  :src=\"\n                                    require(`@/midone/assets/images/${\n                                      $f()[0].images[3]\n                                    }`)\n                                  \"\n                                />\n                              </div>\n                            </div>\n                          </TinySlider>\n                        </div>\n                      </div>\n                    </div>\n                  </textarea>\n                </code>\n              </Highlight>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- END: Slick Modal -->\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  setup () {\n    const showProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('show')\n    }\n    const hideProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('hide')\n    }\n    const toggleProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('toggle')\n    }\n\n    return {\n      showProgrammaticallyShowModal,\n      hideProgrammaticallyShowModal,\n      toggleProgrammaticallyShowModal\n    }\n  }\n})\n</script>\n","import { render } from \"./Main.vue?vue&type=template&id=41ae3da2\"\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","\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  setup () {\n    const showProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('show')\n    }\n    const hideProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('hide')\n    }\n    const toggleProgrammaticallyShowModal = () => {\n      console.log('modal: ', cash('#programmatically-modal').modal)\n      cash('#programmatically-modal').modal('toggle')\n    }\n\n    return {\n      showProgrammaticallyShowModal,\n      hideProgrammaticallyShowModal,\n      toggleProgrammaticallyShowModal\n    }\n  }\n})\n"],"sourceRoot":""}