modals.47c37ff3.js 113 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319
  1. import{_ as Y,o as v,c as F,a as t,d as st,u as lt,b as it,e as r,f as a,j as s,g as m,w as l,W as f,l as g,L as I,U as W,F as ot,i as rt,K,V as nt}from"./index.c685e846.js";import{_ as dt}from"./profile-16.a5dcf128.js";import{S as ut,N as ct,P as pt,a as vt}from"./pagination.min.b7ce10ba.js";import{c as mt,_ as x,I as h}from"./icon-code.6d7a3662.js";import{I as X}from"./icon-bell.2e21c889.js";import{f as c,N as n,o,V as d,_ as u,I as p}from"./icon-x.6c3c1ce6.js";import{I as J}from"./icon-facebook.927aefe9.js";import{o as bt,s as ft,d as Z,f as yt,c as H}from"./tabs.55ddd10d.js";import"./micro-task.27a59902.js";const gt={},xt={width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ht=t("path",{d:"M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),kt=t("path",{opacity:"0.5",d:"M6 10V8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8V10",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),wt=[ht,kt];function _t(Q,b){return v(),F("svg",xt,wt)}const tt=Y(gt,[["render",_t]]),Ct={},Tt={xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},Dt=t("path",{d:"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"},null,-1),jt=[Dt];function $t(Q,b){return v(),F("svg",Tt,jt)}const et=Y(Ct,[["render",$t]]),Pt={},Mt={width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},St=t("path",{d:"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 12.7215 17.8726 13.4133 17.6392 14.054C17.5551 14.285 17.4075 14.4861 17.2268 14.6527L17.1463 14.727C16.591 15.2392 15.7573 15.3049 15.1288 14.8858C14.6735 14.5823 14.4 14.0713 14.4 13.5241V12M14.4 12C14.4 13.3255 13.3255 14.4 12 14.4C10.6745 14.4 9.6 13.3255 9.6 12C9.6 10.6745 10.6745 9.6 12 9.6C13.3255 9.6 14.4 10.6745 14.4 12Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),qt=t("path",{opacity:"0.5",d:"M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),Rt=[St,qt];function Ot(Q,b){return v(),F("svg",Mt,Rt)}const zt=Y(Pt,[["render",Ot]]),It=t("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[t("li",null,[t("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),t("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[t("span",null,"Modals")])],-1),Ut={class:"pt-5 space-y-8"},Vt={class:"panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},Lt={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},Ft=t("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),Nt=t("a",{href:"https://headlessui.com/vue/dialog",target:"_blank",class:"block hover:underline"},"https://headlessui.com/vue/dialog",-1),Et={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},At={class:"panel"},Bt={class:"flex items-center justify-between mb-5"},Gt=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),Zt={class:"flex items-center"},Ht={class:"mb-5"},Qt={class:"flex items-center justify-center"},Yt={class:"fixed inset-0 overflow-y-auto"},Wt={class:"flex min-h-full items-start justify-center px-4 py-8"},Kt=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Xt={class:"p-5"},Jt=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),te={class:"flex justify-end items-center mt-8"},ee=t("pre",null,`<!-- basic -->
  2. <div class="mb-5">
  3. <!-- Trigger -->
  4. <div class="flex items-center justify-center">
  5. <button type="button" class="btn btn-primary" @click="modal1 = true">Launch modal</button>
  6. </div>
  7. <!-- Modal -->
  8. <TransitionRoot appear :show="modal1" as="template">
  9. <Dialog as="div" @close="modal1 = false" class="relative z-50">
  10. <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100" leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
  11. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  12. </TransitionChild>
  13. <div class="fixed inset-0 overflow-y-auto">
  14. <div class="flex min-h-full items-start justify-center px-4 py-8">
  15. <TransitionChild
  16. as="template"
  17. enter="duration-300 ease-out"
  18. enter-from="opacity-0 scale-95"
  19. enter-to="opacity-100 scale-100"
  20. leave="duration-200 ease-in"
  21. leave-from="opacity-100 scale-100"
  22. leave-to="opacity-0 scale-95"
  23. >
  24. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  25. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal1 = false">
  26. <svg> ... </svg>
  27. </button>
  28. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  29. <div class="p-5">
  30. <p>
  31. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
  32. nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  33. </p>
  34. <div class="flex justify-end items-center mt-8">
  35. <button type="button" @click="modal1 = false" class="btn btn-outline-danger">Discard</button>
  36. <button type="button" @click="modal1 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  37. </div>
  38. </div>
  39. </DialogPanel>
  40. </TransitionChild>
  41. </div>
  42. </div>
  43. </Dialog>
  44. </TransitionRoot>
  45. </div>
  46. <!-- script -->
  47. <script lang="ts" setup>
  48. import { ref } from 'vue';
  49. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  50. const modal1 = ref(false);
  51. <\/script>
  52. `,-1),ae={class:"panel"},se={class:"flex items-center justify-between mb-5"},le=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertically Centered",-1),ie={class:"flex items-center"},oe={class:"mb-5"},re={class:"flex items-center justify-center"},ne={class:"fixed inset-0 overflow-y-auto"},de={class:"flex min-h-full items-center justify-center px-4 py-8"},ue=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),ce={class:"p-5"},pe=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),ve={class:"flex justify-end items-center mt-8"},me=t("pre",null,`<!-- vertically centered -->
  53. <div class="mb-5">
  54. <!-- Trigger -->
  55. <div class="flex items-center justify-center">
  56. <button type="button" class="btn btn-info" @click="modal2 = true">Launch modal</button>
  57. </div>
  58. <!-- Modal -->
  59. <TransitionRoot appear :show="modal2" as="template">
  60. <Dialog as="div" @close="modal2 = false" class="relative z-50">
  61. <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100" leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
  62. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  63. </TransitionChild>
  64. <div class="fixed inset-0 overflow-y-auto">
  65. <div class="flex min-h-full items-center justify-center px-4 py-8">
  66. <TransitionChild
  67. as="template"
  68. enter="duration-300 ease-out"
  69. enter-from="opacity-0 scale-95"
  70. enter-to="opacity-100 scale-100"
  71. leave="duration-200 ease-in"
  72. leave-from="opacity-100 scale-100"
  73. leave-to="opacity-0 scale-95"
  74. >
  75. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  76. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal2 = false">
  77. <svg> ... </svg>
  78. </button>
  79. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  80. <div class="p-5">
  81. <p>
  82. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
  83. nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  84. </p>
  85. <div class="flex justify-end items-center mt-8">
  86. <button type="button" @click="modal2 = false" class="btn btn-outline-danger">Discard</button>
  87. <button type="button" @click="modal2 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  88. </div>
  89. </div>
  90. </DialogPanel>
  91. </TransitionChild>
  92. </div>
  93. </div>
  94. </Dialog>
  95. </TransitionRoot>
  96. </div>
  97. <!-- script -->
  98. <script lang="ts" setup>
  99. import { ref } from 'vue';
  100. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  101. const modal2 = ref(false);
  102. <\/script>
  103. `,-1),be={class:"panel"},fe={class:"flex items-center justify-between mb-5"},ye=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Static",-1),ge={class:"flex items-center"},xe={class:"mb-5"},he={class:"flex items-center justify-center"},ke={class:"fixed inset-0 overflow-y-auto"},we={class:"flex min-h-full items-start justify-center px-4 py-8"},_e=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Ce={class:"p-5"},Te=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),De={class:"flex justify-end items-center mt-8"},je=t("pre",null,`<!-- static -->
  104. <div class="mb-5">
  105. <!-- Trigger -->
  106. <div class="flex items-center justify-center">
  107. <button type="button" class="btn btn-secondary" @click="modal3 = true">Static modal</button>
  108. </div>
  109. <!-- Modal -->
  110. <TransitionRoot appear :show="modal3" as="template">
  111. <Dialog as="div" class="relative z-50">
  112. <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100" leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
  113. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  114. </TransitionChild>
  115. <div class="fixed inset-0 overflow-y-auto">
  116. <div class="flex min-h-full items-start justify-center px-4 py-8">
  117. <TransitionChild
  118. as="template"
  119. enter="duration-300 ease-out"
  120. enter-from="opacity-0 scale-95"
  121. enter-to="opacity-100 scale-100"
  122. leave="duration-200 ease-in"
  123. leave-from="opacity-100 scale-100"
  124. leave-to="opacity-0 scale-95"
  125. >
  126. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  127. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal3 = false">
  128. <svg> ... </svg>
  129. </button>
  130. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  131. <div class="p-5">
  132. <p>
  133. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
  134. nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  135. </p>
  136. <div class="flex justify-end items-center mt-8">
  137. <button type="button" @click="modal3 = false" class="btn btn-outline-danger">Discard</button>
  138. <button type="button" @click="modal3 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  139. </div>
  140. </div>
  141. </DialogPanel>
  142. </TransitionChild>
  143. </div>
  144. </div>
  145. </Dialog>
  146. </TransitionRoot>
  147. </div>
  148. <!-- script -->
  149. <script lang="ts" setup>
  150. import { ref } from 'vue';
  151. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  152. const modal3 = ref(false);
  153. <\/script>
  154. `,-1),$e={class:"panel"},Pe={class:"flex items-center justify-between mb-5"},Me=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Remove animation",-1),Se={class:"flex items-center"},qe={class:"mb-5"},Re={class:"flex items-center justify-center"},Oe={class:"fixed inset-0 overflow-y-auto"},ze={class:"flex min-h-full items-start justify-center px-4 py-8"},Ie=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Ue={class:"p-5"},Ve=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),Le={class:"flex justify-end items-center mt-8"},Fe=t("pre",null,`<!-- remove animation -->
  155. <div class="mb-5">
  156. <!-- Trigger -->
  157. <div class="flex items-center justify-center">
  158. <button type="button" class="btn btn-success" @click="modal4 = true">Launch modal</button>
  159. </div>
  160. <!-- Modal -->
  161. <Dialog as="div" :open="modal4" @close="modal4 = false" class="relative z-50">
  162. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  163. <div class="fixed inset-0 overflow-y-auto">
  164. <div class="flex min-h-full items-start justify-center px-4 py-8">
  165. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  166. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal4 = false">
  167. <svg> ... </svg>
  168. </button>
  169. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  170. <div class="p-5">
  171. <p>
  172. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
  173. nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  174. </p>
  175. <div class="flex justify-end items-center mt-8">
  176. <button type="button" @click="modal4 = false" class="btn btn-outline-danger">Discard</button>
  177. <button type="button" @click="modal4 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  178. </div>
  179. </div>
  180. </DialogPanel>
  181. </div>
  182. </div>
  183. </Dialog>
  184. </div>
  185. <!-- script -->
  186. <script lang="ts" setup>
  187. import { ref } from 'vue';
  188. import { Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  189. const modal4 = ref(false);
  190. <\/script>
  191. `,-1),Ne={class:"panel"},Ee={class:"flex items-center justify-between mb-5"},Ae=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Optional sizes",-1),Be={class:"flex items-center"},Ge={class:"mb-5"},Ze={class:"flex items-center justify-center gap-2"},He={class:"fixed inset-0 overflow-y-auto"},Qe={class:"flex min-h-full items-start justify-center px-4 py-8"},Ye=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),We={class:"p-5"},Ke=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),Xe={class:"flex justify-end items-center mt-8"},Je={class:"fixed inset-0 overflow-y-auto"},ta={class:"flex min-h-full items-start justify-center px-4 py-8"},ea=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),aa={class:"p-5"},sa=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),la={class:"flex justify-end items-center mt-8"},ia={class:"fixed inset-0 overflow-y-auto"},oa={class:"flex min-h-full items-start justify-center px-4 py-8"},ra=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),na={class:"p-5"},da=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),ua={class:"flex justify-end items-center mt-8"},ca=t("pre",null,`<!-- extra large -->
  192. <div>
  193. <!-- Trigger -->
  194. <button type="button" class="btn btn-warning" @click="modal5 = true">Extra large</button>
  195. <!-- Modal -->
  196. <TransitionRoot appear :show="modal5" as="template">
  197. <Dialog as="div" @close="modal5 = false" class="relative z-50">
  198. <TransitionChild
  199. as="template"
  200. enter="duration-300 ease-out"
  201. enter-from="opacity-0"
  202. enter-to="opacity-100"
  203. leave="duration-200 ease-in"
  204. leave-from="opacity-100"
  205. leave-to="opacity-0"
  206. >
  207. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  208. </TransitionChild>
  209. <div class="fixed inset-0 overflow-y-auto">
  210. <div class="flex min-h-full items-start justify-center px-4 py-8">
  211. <TransitionChild
  212. as="template"
  213. enter="duration-300 ease-out"
  214. enter-from="opacity-0 scale-95"
  215. enter-to="opacity-100 scale-100"
  216. leave="duration-200 ease-in"
  217. leave-from="opacity-100 scale-100"
  218. leave-to="opacity-0 scale-95"
  219. >
  220. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-5xl text-black dark:text-white-dark">
  221. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal5 = false">
  222. <svg> ... </svg>
  223. </button>
  224. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  225. <div class="p-5">
  226. <p>
  227. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  228. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  229. </p>
  230. <div class="flex justify-end items-center mt-8">
  231. <button type="button" @click="modal5 = false" class="btn btn-outline-danger">Discard</button>
  232. <button type="button" @click="modal5 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  233. </div>
  234. </div>
  235. </DialogPanel>
  236. </TransitionChild>
  237. </div>
  238. </div>
  239. </Dialog>
  240. </TransitionRoot>
  241. </div>
  242. <!-- large -->
  243. <div>
  244. <!-- Trigger -->
  245. <button type="button" class="btn btn-danger" @click="modal6 = true">Large</button>
  246. <!-- Modal -->
  247. <TransitionRoot appear :show="modal6" as="template">
  248. <Dialog as="div" @close="modal6 = false" class="relative z-50">
  249. <TransitionChild
  250. as="template"
  251. enter="duration-300 ease-out"
  252. enter-from="opacity-0"
  253. enter-to="opacity-100"
  254. leave="duration-200 ease-in"
  255. leave-from="opacity-100"
  256. leave-to="opacity-0"
  257. >
  258. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  259. </TransitionChild>
  260. <div class="fixed inset-0 overflow-y-auto">
  261. <div class="flex min-h-full items-start justify-center px-4 py-8">
  262. <TransitionChild
  263. as="template"
  264. enter="duration-300 ease-out"
  265. enter-from="opacity-0 scale-95"
  266. enter-to="opacity-100 scale-100"
  267. leave="duration-200 ease-in"
  268. leave-from="opacity-100 scale-100"
  269. leave-to="opacity-0 scale-95"
  270. >
  271. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark">
  272. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal6 = false">
  273. <svg> ... </svg>
  274. </button>
  275. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  276. <div class="p-5">
  277. <p>
  278. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  279. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  280. </p>
  281. <div class="flex justify-end items-center mt-8">
  282. <button type="button" @click="modal6 = false" class="btn btn-outline-danger">Discard</button>
  283. <button type="button" @click="modal6 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  284. </div>
  285. </div>
  286. </DialogPanel>
  287. </TransitionChild>
  288. </div>
  289. </div>
  290. </Dialog>
  291. </TransitionRoot>
  292. </div>
  293. <!-- small -->
  294. <div>
  295. <!-- Trigger -->
  296. <button type="button" class="btn btn-secondary" @click="modal7 = true">Small</button>
  297. <!-- Modal -->
  298. <TransitionRoot appear :show="modal7" as="template">
  299. <Dialog as="div" @close="modal7 = false" class="relative z-50">
  300. <TransitionChild
  301. as="template"
  302. enter="duration-300 ease-out"
  303. enter-from="opacity-0"
  304. enter-to="opacity-100"
  305. leave="duration-200 ease-in"
  306. leave-from="opacity-100"
  307. leave-to="opacity-0"
  308. >
  309. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  310. </TransitionChild>
  311. <div class="fixed inset-0 overflow-y-auto">
  312. <div class="flex min-h-full items-start justify-center px-4 py-8">
  313. <TransitionChild
  314. as="template"
  315. enter="duration-300 ease-out"
  316. enter-from="opacity-0 scale-95"
  317. enter-to="opacity-100 scale-100"
  318. leave="duration-200 ease-in"
  319. leave-from="opacity-100 scale-100"
  320. leave-to="opacity-0 scale-95"
  321. >
  322. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark">
  323. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal7 = false">
  324. <svg> ... </svg>
  325. </button>
  326. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  327. <div class="p-5">
  328. <p>
  329. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  330. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  331. </p>
  332. <div class="flex justify-end items-center mt-8">
  333. <button type="button" @click="modal7 = false" class="btn btn-outline-danger">Discard</button>
  334. <button type="button" @click="modal7 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  335. </div>
  336. </div>
  337. </DialogPanel>
  338. </TransitionChild>
  339. </div>
  340. </div>
  341. </Dialog>
  342. </TransitionRoot>
  343. </div>
  344. <!-- script -->
  345. <script lang="ts" setup>
  346. import { ref } from 'vue';
  347. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  348. const modal5 = ref(false);
  349. const modal6 = ref(false);
  350. const modal7 = ref(false);
  351. <\/script>
  352. `,-1),pa={class:"panel"},va={class:"flex items-center justify-between mb-5"},ma=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Video",-1),ba={class:"flex items-center"},fa={class:"mb-5"},ya={class:"flex items-center justify-center"},ga={class:"fixed inset-0 overflow-y-auto"},xa={class:"flex min-h-full items-start justify-center px-4 py-8"},ha=t("div",{class:"p-5"},[t("iframe",{src:"https://www.youtube.com/embed/tgbNymZ7vqY",class:"w-full h-[250px] md:h-[550px]"})],-1),ka=t("pre",null,`<!-- video -->
  353. <div class="mb-5">
  354. <!-- Trigger -->
  355. <div class="flex items-center justify-center">
  356. <button type="button" class="btn btn-primary" @click="modal8 = true">Play Youtube</button>
  357. </div>
  358. <!-- Modal -->
  359. <TransitionRoot appear :show="modal8" as="template">
  360. <Dialog as="div" @close="modal8 = false" class="relative z-50">
  361. <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100" leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
  362. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  363. </TransitionChild>
  364. <div class="fixed inset-0 overflow-y-auto">
  365. <div class="flex min-h-full items-start justify-center px-4 py-8">
  366. <TransitionChild
  367. as="template"
  368. enter="duration-300 ease-out"
  369. enter-from="opacity-0 scale-95"
  370. enter-to="opacity-100 scale-100"
  371. leave="duration-200 ease-in"
  372. leave-from="opacity-100 scale-100"
  373. leave-to="opacity-0 scale-95"
  374. >
  375. <DialogPanel class="relative overflow-hidden w-full max-w-3xl py-8">
  376. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal8 = false">
  377. <svg> ... </svg>
  378. </button>
  379. <div class="p-5">
  380. <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" class="w-full h-[250px] md:h-[550px]"></iframe>
  381. </div>
  382. </DialogPanel>
  383. </TransitionChild>
  384. </div>
  385. </div>
  386. </Dialog>
  387. </TransitionRoot>
  388. </div>
  389. <!-- script -->
  390. <script lang="ts" setup>
  391. import { ref } from 'vue';
  392. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  393. import { useAppStore } from '@/stores/index';
  394. const store = useAppStore();
  395. const modal8 = ref(false);
  396. <\/script>
  397. `,-1),wa={class:"panel lg:col-span-2"},_a={class:"flex items-center justify-between mb-5"},Ca=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Animation Style Modal",-1),Ta={class:"flex items-center"},Da={class:"mb-5"},ja={class:"flex flex-wrap items-center justify-center gap-2"},$a={class:"fixed inset-0 overflow-y-auto"},Pa={class:"flex min-h-full items-start justify-center px-4 py-8"},Ma=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Sa={class:"p-5"},qa=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),Ra={class:"flex justify-end items-center mt-8"},Oa={class:"fixed inset-0 overflow-y-auto"},za={class:"flex min-h-full items-start justify-center px-4 py-8"},Ia=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Ua={class:"p-5"},Va=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),La={class:"flex justify-end items-center mt-8"},Fa={class:"fixed inset-0 overflow-y-auto"},Na={class:"flex min-h-full items-start justify-center px-4 py-8"},Ea=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Aa={class:"p-5"},Ba=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),Ga={class:"flex justify-end items-center mt-8"},Za={class:"fixed inset-0 overflow-y-auto"},Ha={class:"flex min-h-full items-start justify-center px-4 py-8"},Qa=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),Ya={class:"p-5"},Wa=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),Ka={class:"flex justify-end items-center mt-8"},Xa={class:"fixed inset-0 overflow-y-auto"},Ja={class:"flex min-h-full items-start justify-center px-4 py-8"},ts=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),es={class:"p-5"},as=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),ss={class:"flex justify-end items-center mt-8"},ls={class:"fixed inset-0 overflow-y-auto"},is={class:"flex min-h-full items-start justify-center px-4 py-8"},os=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),rs={class:"p-5"},ns=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),ds={class:"flex justify-end items-center mt-8"},us={class:"fixed inset-0 overflow-y-auto"},cs={class:"flex min-h-full items-start justify-center px-4 py-8"},ps=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),vs={class:"p-5"},ms=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),bs={class:"flex justify-end items-center mt-8"},fs={class:"fixed inset-0 overflow-y-auto"},ys={class:"flex min-h-full items-start justify-center px-4 py-8"},gs=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Modal Title ",-1),xs={class:"p-5"},hs=t("p",null," Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. ",-1),ks={class:"flex justify-end items-center mt-8"},ws=t("pre",null,`<!-- fadein -->
  398. <div>
  399. <!-- Trigger -->
  400. <button type="button" class="btn btn-primary" @click="modal9 = true">FadeIn</button>
  401. <!-- Modal -->
  402. <TransitionRoot appear :show="modal9" as="template">
  403. <Dialog as="div" @close="modal9 = false" class="relative z-50">
  404. <TransitionChild
  405. as="template"
  406. enter="duration-300 ease-out"
  407. enter-from="opacity-0"
  408. enter-to="opacity-100"
  409. leave="duration-200 ease-in"
  410. leave-from="opacity-100"
  411. leave-to="opacity-0"
  412. >
  413. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  414. </TransitionChild>
  415. <div class="fixed inset-0 overflow-y-auto">
  416. <div class="flex min-h-full items-start justify-center px-4 py-8">
  417. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeIn">
  418. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal9 = false">
  419. <svg> ... </svg>
  420. </button>
  421. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  422. <div class="p-5">
  423. <p>
  424. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  425. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  426. </p>
  427. <div class="flex justify-end items-center mt-8">
  428. <button type="button" @click="modal9 = false" class="btn btn-outline-danger">Discard</button>
  429. <button type="button" @click="modal9 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  430. </div>
  431. </div>
  432. </DialogPanel>
  433. </div>
  434. </div>
  435. </Dialog>
  436. </TransitionRoot>
  437. </div>
  438. <!-- slidein down -->
  439. <div>
  440. <!-- Trigger -->
  441. <button type="button" class="btn btn-info" @click="modal10 = true">SlideIn Down</button>
  442. <!-- Modal -->
  443. <TransitionRoot appear :show="modal10" as="template">
  444. <Dialog as="div" @close="modal10 = false" class="relative z-50">
  445. <TransitionChild
  446. as="template"
  447. enter="duration-300 ease-out"
  448. enter-from="opacity-0"
  449. enter-to="opacity-100"
  450. leave="duration-200 ease-in"
  451. leave-from="opacity-100"
  452. leave-to="opacity-0"
  453. >
  454. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  455. </TransitionChild>
  456. <div class="fixed inset-0 overflow-y-auto">
  457. <div class="flex min-h-full items-start justify-center px-4 py-8">
  458. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInDown">
  459. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal10 = false">
  460. <svg> ... </svg>
  461. </button>
  462. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  463. <div class="p-5">
  464. <p>
  465. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  466. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  467. </p>
  468. <div class="flex justify-end items-center mt-8">
  469. <button type="button" @click="modal10 = false" class="btn btn-outline-danger">Discard</button>
  470. <button type="button" @click="modal10 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  471. </div>
  472. </div>
  473. </DialogPanel>
  474. </div>
  475. </div>
  476. </Dialog>
  477. </TransitionRoot>
  478. </div>
  479. <!-- fadein up -->
  480. <div>
  481. <!-- Trigger -->
  482. <button type="button" class="btn btn-success" @click="modal11 = true">FadeIn Up</button>
  483. <!-- Modal -->
  484. <TransitionRoot appear :show="modal11" as="template">
  485. <Dialog as="div" @close="modal11 = false" class="relative z-50">
  486. <TransitionChild
  487. as="template"
  488. enter="duration-300 ease-out"
  489. enter-from="opacity-0"
  490. enter-to="opacity-100"
  491. leave="duration-200 ease-in"
  492. leave-from="opacity-100"
  493. leave-to="opacity-0"
  494. >
  495. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  496. </TransitionChild>
  497. <div class="fixed inset-0 overflow-y-auto">
  498. <div class="flex min-h-full items-start justify-center px-4 py-8">
  499. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeInUp">
  500. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal11 = false">
  501. <svg> ... </svg>
  502. </button>
  503. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  504. <div class="p-5">
  505. <p>
  506. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  507. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  508. </p>
  509. <div class="flex justify-end items-center mt-8">
  510. <button type="button" @click="modal11 = false" class="btn btn-outline-danger">Discard</button>
  511. <button type="button" @click="modal11 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  512. </div>
  513. </div>
  514. </DialogPanel>
  515. </div>
  516. </div>
  517. </Dialog>
  518. </TransitionRoot>
  519. </div>
  520. <!-- slidein up -->
  521. <div>
  522. <!-- Trigger -->
  523. <button type="button" class="btn btn-warning" @click="modal12 = true">SlideIn Up</button>
  524. <!-- Modal -->
  525. <TransitionRoot appear :show="modal12" as="template">
  526. <Dialog as="div" @close="modal12 = false" class="relative z-50">
  527. <TransitionChild
  528. as="template"
  529. enter="duration-300 ease-out"
  530. enter-from="opacity-0"
  531. enter-to="opacity-100"
  532. leave="duration-200 ease-in"
  533. leave-from="opacity-100"
  534. leave-to="opacity-0"
  535. >
  536. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  537. </TransitionChild>
  538. <div class="fixed inset-0 overflow-y-auto">
  539. <div class="flex min-h-full items-start justify-center px-4 py-8">
  540. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInUp">
  541. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal12 = false">
  542. <svg> ... </svg>
  543. </button>
  544. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  545. <div class="p-5">
  546. <p>
  547. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  548. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  549. </p>
  550. <div class="flex justify-end items-center mt-8">
  551. <button type="button" @click="modal12 = false" class="btn btn-outline-danger">Discard</button>
  552. <button type="button" @click="modal12 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  553. </div>
  554. </div>
  555. </DialogPanel>
  556. </div>
  557. </div>
  558. </Dialog>
  559. </TransitionRoot>
  560. </div>
  561. <!-- fadein left -->
  562. <div>
  563. <!-- Trigger -->
  564. <button type="button" class="btn btn-danger" @click="modal13 = true">FadeIn Left</button>
  565. <!-- Modal -->
  566. <TransitionRoot appear :show="modal13" as="template">
  567. <Dialog as="div" @close="modal13 = false" class="relative z-50">
  568. <TransitionChild
  569. as="template"
  570. enter="duration-300 ease-out"
  571. enter-from="opacity-0"
  572. enter-to="opacity-100"
  573. leave="duration-200 ease-in"
  574. leave-from="opacity-100"
  575. leave-to="opacity-0"
  576. >
  577. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  578. </TransitionChild>
  579. <div class="fixed inset-0 overflow-y-auto">
  580. <div class="flex min-h-full items-start justify-center px-4 py-8">
  581. <DialogPanel
  582. class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
  583. :class="store.rtlClass === 'rtl' ? 'animate__fadeInRight' : 'animate__fadeInLeft'"
  584. >
  585. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal13 = false">
  586. <svg> ... </svg>
  587. </button>
  588. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  589. <div class="p-5">
  590. <p>
  591. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  592. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  593. </p>
  594. <div class="flex justify-end items-center mt-8">
  595. <button type="button" @click="modal13 = false" class="btn btn-outline-danger">Discard</button>
  596. <button type="button" @click="modal13 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  597. </div>
  598. </div>
  599. </DialogPanel>
  600. </div>
  601. </div>
  602. </Dialog>
  603. </TransitionRoot>
  604. </div>
  605. <!-- rotatein left -->
  606. <div>
  607. <!-- Trigger -->
  608. <button type="button" class="btn btn-secondary" @click="modal14 = true">RotateIn Left</button>
  609. <!-- Modal -->
  610. <TransitionRoot appear :show="modal14" as="template">
  611. <Dialog as="div" @close="modal14 = false" class="relative z-50">
  612. <TransitionChild
  613. as="template"
  614. enter="duration-300 ease-out"
  615. enter-from="opacity-0"
  616. enter-to="opacity-100"
  617. leave="duration-200 ease-in"
  618. leave-from="opacity-100"
  619. leave-to="opacity-0"
  620. >
  621. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  622. </TransitionChild>
  623. <div class="fixed inset-0 overflow-y-auto">
  624. <div class="flex min-h-full items-start justify-center px-4 py-8">
  625. <DialogPanel
  626. class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
  627. :class="store.rtlClass === 'rtl' ? 'animate__rotateInDownRight' : 'animate__rotateInDownLeft'"
  628. >
  629. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal14 = false">
  630. <svg> ... </svg>
  631. </button>
  632. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  633. <div class="p-5">
  634. <p>
  635. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  636. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  637. </p>
  638. <div class="flex justify-end items-center mt-8">
  639. <button type="button" @click="modal14 = false" class="btn btn-outline-danger">Discard</button>
  640. <button type="button" @click="modal14 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  641. </div>
  642. </div>
  643. </DialogPanel>
  644. </div>
  645. </div>
  646. </Dialog>
  647. </TransitionRoot>
  648. </div>
  649. <!-- fadein right -->
  650. <div>
  651. <!-- Trigger -->
  652. <button type="button" class="btn btn-dark" @click="modal15 = true">FadeIn Right</button>
  653. <!-- Modal -->
  654. <TransitionRoot appear :show="modal15" as="template">
  655. <Dialog as="div" @close="modal15 = false" class="relative z-50">
  656. <TransitionChild
  657. as="template"
  658. enter="duration-300 ease-out"
  659. enter-from="opacity-0"
  660. enter-to="opacity-100"
  661. leave="duration-200 ease-in"
  662. leave-from="opacity-100"
  663. leave-to="opacity-0"
  664. >
  665. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  666. </TransitionChild>
  667. <div class="fixed inset-0 overflow-y-auto">
  668. <div class="flex min-h-full items-start justify-center px-4 py-8">
  669. <DialogPanel
  670. class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
  671. :class="store.rtlClass === 'rtl' ? 'animate__fadeInLeft' : 'animate__fadeInRight'"
  672. >
  673. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal15 = false">
  674. <svg> ... </svg>
  675. </button>
  676. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  677. <div class="p-5">
  678. <p>
  679. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  680. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  681. </p>
  682. <div class="flex justify-end items-center mt-8">
  683. <button type="button" @click="modal15 = false" class="btn btn-outline-danger">Discard</button>
  684. <button type="button" @click="modal15 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  685. </div>
  686. </div>
  687. </DialogPanel>
  688. </div>
  689. </div>
  690. </Dialog>
  691. </TransitionRoot>
  692. </div>
  693. <!-- zoomin up -->
  694. <div>
  695. <!-- Trigger -->
  696. <button type="button" class="btn btn-primary" @click="modal16 = true">ZoomIn Up</button>
  697. <!-- Modal -->
  698. <TransitionRoot appear :show="modal16" as="template">
  699. <Dialog as="div" @close="modal16 = false" class="relative z-50">
  700. <TransitionChild
  701. as="template"
  702. enter="duration-300 ease-out"
  703. enter-from="opacity-0"
  704. enter-to="opacity-100"
  705. leave="duration-200 ease-in"
  706. leave-from="opacity-100"
  707. leave-to="opacity-0"
  708. >
  709. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  710. </TransitionChild>
  711. <div class="fixed inset-0 overflow-y-auto">
  712. <div class="flex min-h-full items-start justify-center px-4 py-8">
  713. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__zoomInUp">
  714. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal16 = false">
  715. <svg> ... </svg>
  716. </button>
  717. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Modal Title</div>
  718. <div class="p-5">
  719. <p>
  720. Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
  721. montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
  722. </p>
  723. <div class="flex justify-end items-center mt-8">
  724. <button type="button" @click="modal16 = false" class="btn btn-outline-danger">Discard</button>
  725. <button type="button" @click="modal16 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  726. </div>
  727. </div>
  728. </DialogPanel>
  729. </div>
  730. </div>
  731. </Dialog>
  732. </TransitionRoot>
  733. </div>
  734. <!-- script -->
  735. <script lang="ts" setup>
  736. import { ref } from 'vue';
  737. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
  738. const modal9 = ref(false);
  739. const modal10 = ref(false);
  740. const modal11 = ref(false);
  741. const modal12 = ref(false);
  742. const modal13 = ref(false);
  743. const modal14 = ref(false);
  744. const modal15 = ref(false);
  745. const modal16 = ref(false);
  746. <\/script>
  747. `,-1),_s={class:"panel lg:col-span-2"},Cs={class:"flex items-center justify-between mb-5"},Ts=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Custom",-1),Ds={class:"flex items-center"},js={class:"mb-5"},$s=t("p",{class:"text-center mb-4"},"More Custom Modals.",-1),Ps={class:"flex flex-wrap items-center justify-center gap-2"},Ms={class:"fixed inset-0 overflow-y-auto"},Ss={class:"flex min-h-full items-start justify-center px-4 py-8"},qs={class:"flex items-center justify-center dark:text-white-dark/70 text-base font-medium text-[#1f2937] p-5"},Rs={class:"flex items-center justify-center w-16 h-16 rounded-full bg-[#f1f2f3] dark:bg-white/10"},Os={class:"p-5"},zs=t("div",{class:"text-white-dark text-center text-sm"},[t("p",null," Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id rutrum. ")],-1),Is={class:"flex justify-end items-center mt-8"},Us={class:"fixed inset-0 overflow-y-auto"},Vs={class:"flex min-h-full items-start justify-center px-4 py-8"},Ls=t("div",{class:"text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"}," Tabs ",-1),Fs={class:"p-5"},Ns=t("a",{href:"javascript:;",class:"p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark"},"Disabled",-1),Es=t("h4",{class:"font-semibold text-2xl mb-4"},"We move your world!",-1),As=t("p",{class:"mb-4"}," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Bs=t("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",-1),Gs=t("div",{class:"flex items-start"},[t("div",{class:"w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none"},[t("img",{src:nt,alt:"",class:"w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"})]),t("div",{class:"flex-auto"},[t("h5",{class:"text-xl font-medium mb-4"},"Media heading"),t("p",{class:"text-white-dark"}," Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. ")])],-1),Zs=t("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ",-1),Hs={class:"flex justify-end items-center mt-8"},Qs={class:"fixed inset-0 overflow-y-auto"},Ys={class:"flex min-h-full items-start justify-center px-4 py-8"},Ws={class:"px-5 pt-5 ltr:text-right rtl:text-left"},Ks=t("div",{class:"p-5"},[t("div",{class:"text-white dark:text-white-light text-center"},[t("div",{class:"rounded-full w-20 h-20 mx-auto mb-7 overflow-hidden"},[t("img",{src:dt,alt:"",class:"w-full h-full object-cover"})]),t("p",{class:"font-semibold"},[m("Click on view to access "),t("br"),m("your profile.")])]),t("div",{class:"flex justify-center items-center mt-8 mb-5"},[t("button",{type:"button",class:"btn bg-white text-black dark:btn-dark"},"View")])],-1),Xs={class:"fixed inset-0 overflow-y-auto"},Js={class:"flex min-h-full items-start justify-center px-4 py-8"},tl=t("div",{class:"text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]"},"Login",-1),el={class:"p-5"},al={class:"relative mb-4"},sl={class:"absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark"},ll=t("input",{type:"email",placeholder:"Email",class:"form-input ltr:pl-10 rtl:pr-10"},null,-1),il={class:"relative mb-4"},ol={class:"absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark"},rl=t("input",{type:"password",placeholder:"Password",class:"form-input ltr:pl-10 rtl:pr-10"},null,-1),nl=t("button",{type:"button",class:"btn btn-primary w-full"},"Login",-1),dl=t("div",{class:"my-4 text-center text-xs text-white-dark dark:text-white-dark/70"},"OR",-1),ul={class:"flex items-center justify-center gap-3 mb-5"},cl={href:"javascript:void(0);",class:"btn btn-outline-primary flex gap-1"},pl=t("span",null,"Facebook",-1),vl={href:"javascript:void(0);",class:"btn btn-outline-danger flex gap-1"},ml=t("span",null,"Github",-1),bl=t("div",{class:"p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm"},[t("p",{class:"text-center text-white-dark dark:text-white-dark/70"},[m(" Looking to "),t("a",{href:"javascript:;",class:"text-[#515365] hover:underline dark:text-white-dark"},"create an account?")])],-1),fl={class:"fixed inset-0 overflow-y-auto"},yl={class:"flex min-h-full items-start justify-center px-4 py-8"},gl=t("div",{class:"text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]"},"Register",-1),xl={class:"p-5"},hl={class:"relative mb-4"},kl={class:"absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark"},wl=t("input",{type:"text",placeholder:"Name",class:"form-input ltr:pl-10 rtl:pr-10"},null,-1),_l={class:"relative mb-4"},Cl={class:"absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark"},Tl=t("input",{type:"email",placeholder:"Email",class:"form-input ltr:pl-10 rtl:pr-10"},null,-1),Dl={class:"relative mb-4"},jl={class:"absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark"},$l=t("input",{type:"password",placeholder:"Password",class:"form-input ltr:pl-10 rtl:pr-10"},null,-1),Pl=t("button",{type:"button",class:"btn btn-primary w-full"},"Submit",-1),Ml=t("div",{class:"my-4 text-center text-xs text-white-dark dark:text-white-dark/70"},"OR",-1),Sl={class:"flex items-center justify-center gap-3 mb-5"},ql={href:"javascript:void(0);",class:"btn btn-outline-primary flex gap-1"},Rl=t("span",null,"Facebook",-1),Ol={href:"javascript:void(0);",class:"btn btn-outline-danger flex gap-1"},zl=t("span",null,"Github",-1),Il=t("div",{class:"p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm"},[t("p",{class:"text-center text-white-dark dark:text-white-dark/70"},[m(" Already have "),t("a",{href:"javascript:;",class:"text-[#515365] hover:underline dark:text-white-dark"},"Login?")])],-1),Ul={class:"fixed inset-0 overflow-y-auto"},Vl={class:"flex min-h-full items-start justify-center px-4 py-8"},Ll=t("div",{class:"text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]"},"Slider",-1),Fl={class:"px-5"},Nl=["src"],El={href:"javascript:;",class:"swiper-button-prev-ex1 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},Al={href:"javascript:;",class:"swiper-button-next-ex1 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},Bl=t("pre",null,`<!-- standard -->
  748. <div>
  749. <!-- Trigger -->
  750. <button type="button" class="btn btn-primary" @click="modal17 = true">Standard</button>
  751. <!-- Modal -->
  752. <TransitionRoot appear :show="modal17" as="template">
  753. <Dialog as="div" @close="modal17 = false" class="relative z-50">
  754. <TransitionChild
  755. as="template"
  756. enter="duration-300 ease-out"
  757. enter-from="opacity-0"
  758. enter-to="opacity-100"
  759. leave="duration-200 ease-in"
  760. leave-from="opacity-100"
  761. leave-to="opacity-0"
  762. >
  763. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  764. </TransitionChild>
  765. <div class="fixed inset-0 overflow-y-auto">
  766. <div class="flex min-h-full items-start justify-center px-4 py-8">
  767. <TransitionChild
  768. as="template"
  769. enter="duration-300 ease-out"
  770. enter-from="opacity-0 scale-95"
  771. enter-to="opacity-100 scale-100"
  772. leave="duration-200 ease-in"
  773. leave-from="opacity-100 scale-100"
  774. leave-to="opacity-0 scale-95"
  775. >
  776. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  777. <div class="flex items-center justify-center dark:text-white-dark/70 text-base font-medium text-[#1f2937] p-5">
  778. <div class="flex items-center justify-center w-16 h-16 rounded-full bg-[#f1f2f3] dark:bg-white/10">
  779. <svg> ... </svg>
  780. </div>
  781. </div>
  782. <div class="p-5">
  783. <div class="text-white-dark text-center text-sm">
  784. <p>
  785. Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum
  786. augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id rutrum.
  787. </p>
  788. </div>
  789. <div class="flex justify-end items-center mt-8">
  790. <button type="button" class="btn btn-outline-danger" @click="modal17 = false">Discard</button>
  791. <button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="modal17 = false">Save</button>
  792. </div>
  793. </div>
  794. </DialogPanel>
  795. </TransitionChild>
  796. </div>
  797. </div>
  798. </Dialog>
  799. </TransitionRoot>
  800. </div>
  801. <!-- tabs -->
  802. <div>
  803. <!-- Trigger -->
  804. <button type="button" class="btn btn-info" @click="modal18 = true">Tabs</button>
  805. <!-- Modal -->
  806. <TransitionRoot appear :show="modal18" as="template">
  807. <Dialog as="div" @close="modal18 = false" class="relative z-50">
  808. <TransitionChild
  809. as="template"
  810. enter="duration-300 ease-out"
  811. enter-from="opacity-0"
  812. enter-to="opacity-100"
  813. leave="duration-200 ease-in"
  814. leave-from="opacity-100"
  815. leave-to="opacity-0"
  816. >
  817. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  818. </TransitionChild>
  819. <div class="fixed inset-0 overflow-y-auto">
  820. <div class="flex min-h-full items-start justify-center px-4 py-8">
  821. <TransitionChild
  822. as="template"
  823. enter="duration-300 ease-out"
  824. enter-from="opacity-0 scale-95"
  825. enter-to="opacity-100 scale-100"
  826. leave="duration-200 ease-in"
  827. leave-from="opacity-100 scale-100"
  828. leave-to="opacity-0 scale-95"
  829. >
  830. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
  831. <button type="button" class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal18 = false">
  832. <svg> ... </svg>
  833. </button>
  834. <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">Tabs</div>
  835. <div class="p-5">
  836. <TabGroup as="div">
  837. <TabList class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
  838. <Tab as="template" v-slot="{ selected }">
  839. <a
  840. href="javascript:;"
  841. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
  842. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  843. >Home</a
  844. >
  845. </Tab>
  846. <Tab as="template" v-slot="{ selected }">
  847. <a
  848. href="javascript:;"
  849. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
  850. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  851. >Profile</a
  852. >
  853. </Tab>
  854. <Tab as="template" v-slot="{ selected }">
  855. <a
  856. href="javascript:;"
  857. class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
  858. :class="{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }"
  859. >Contact</a
  860. >
  861. </Tab>
  862. <Tab as="template" disabled>
  863. <a href="javascript:;" class="p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark">Disabled</a>
  864. </Tab>
  865. </TabList>
  866. <TabPanels class="pt-5 flex-1 text-sm">
  867. <TabPanel>
  868. <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
  869. <p class="mb-4">
  870. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  871. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  872. </p>
  873. <p>
  874. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  875. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  876. </p>
  877. </TabPanel>
  878. <TabPanel>
  879. <div class="flex items-start">
  880. <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
  881. <img src="/assets/images/profile-34.jpeg" alt="" class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover" />
  882. </div>
  883. <div class="flex-auto">
  884. <h5 class="text-xl font-medium mb-4">Media heading</h5>
  885. <p class="text-white-dark">
  886. Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
  887. turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  888. </p>
  889. </div>
  890. </div>
  891. </TabPanel>
  892. <TabPanel>
  893. <p>
  894. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  895. exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  896. pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  897. </p>
  898. </TabPanel>
  899. <TabPanel>Disabled</TabPanel>
  900. </TabPanels>
  901. </TabGroup>
  902. <div class="flex justify-end items-center mt-8">
  903. <button type="button" @click="modal18 = false" class="btn btn-outline-danger">Discard</button>
  904. <button type="button" @click="modal18 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
  905. </div>
  906. </div>
  907. </DialogPanel>
  908. </TransitionChild>
  909. </div>
  910. </div>
  911. </Dialog>
  912. </TransitionRoot>
  913. </div>
  914. <!-- profile -->
  915. <div>
  916. <!-- Trigger -->
  917. <button type="button" class="btn btn-success" @click="modal19 = true">Profile</button>
  918. <!-- Modal -->
  919. <TransitionRoot appear :show="modal19" as="template">
  920. <Dialog as="div" @close="modal19 = false" class="relative z-50">
  921. <TransitionChild
  922. as="template"
  923. enter="duration-300 ease-out"
  924. enter-from="opacity-0"
  925. enter-to="opacity-100"
  926. leave="duration-200 ease-in"
  927. leave-from="opacity-100"
  928. leave-to="opacity-0"
  929. >
  930. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  931. </TransitionChild>
  932. <div class="fixed inset-0 overflow-y-auto">
  933. <div class="flex min-h-full items-start justify-center px-4 py-8">
  934. <TransitionChild
  935. as="template"
  936. enter="duration-300 ease-out"
  937. enter-from="opacity-0 scale-95"
  938. enter-to="opacity-100 scale-100"
  939. leave="duration-200 ease-in"
  940. leave-from="opacity-100 scale-100"
  941. leave-to="opacity-0 scale-95"
  942. >
  943. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-[300px] text-black dark:text-white-dark bg-secondary dark:bg-secondary">
  944. <div class="px-5 pt-5 text-right">
  945. <button type="button" class="text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none" @click="modal19 = false">
  946. <svg> ... </svg>
  947. </button>
  948. </div>
  949. <div class="p-5">
  950. <div class="text-white dark:text-white-light text-center">
  951. <div class="rounded-full w-20 h-20 mx-auto mb-7 overflow-hidden"><img src="/assets/images/profile-16.jpeg" alt="" class="w-full h-full object-cover" /></div>
  952. <p class="font-semibold">Click on view to access <br />your profile.</p>
  953. </div>
  954. <div class="flex justify-center items-center mt-8 mb-5">
  955. <button type="button" class="btn bg-white text-black dark:btn-dark">View</button>
  956. </div>
  957. </div>
  958. </DialogPanel>
  959. </TransitionChild>
  960. </div>
  961. </div>
  962. </Dialog>
  963. </TransitionRoot>
  964. </div>
  965. <!-- login -->
  966. <div>
  967. <!-- Trigger -->
  968. <button type="button" class="btn btn-warning" @click="modal20 = true">Login</button>
  969. <!-- Modal -->
  970. <TransitionRoot appear :show="modal20" as="template">
  971. <Dialog as="div" @close="modal20 = false" class="relative z-50">
  972. <TransitionChild
  973. as="template"
  974. enter="duration-300 ease-out"
  975. enter-from="opacity-0"
  976. enter-to="opacity-100"
  977. leave="duration-200 ease-in"
  978. leave-from="opacity-100"
  979. leave-to="opacity-0"
  980. >
  981. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  982. </TransitionChild>
  983. <div class="fixed inset-0 overflow-y-auto">
  984. <div class="flex min-h-full items-start justify-center px-4 py-8">
  985. <TransitionChild
  986. as="template"
  987. enter="duration-300 ease-out"
  988. enter-from="opacity-0 scale-95"
  989. enter-to="opacity-100 scale-100"
  990. leave="duration-200 ease-in"
  991. leave-from="opacity-100 scale-100"
  992. leave-to="opacity-0 scale-95"
  993. >
  994. <DialogPanel class="panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark">
  995. <button type="button" class="absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none" @click="modal20 = false">
  996. <svg> ... </svg>
  997. </button>
  998. <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Login</div>
  999. <div class="p-5">
  1000. <form>
  1001. <div class="relative mb-4">
  1002. <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
  1003. <svg> ... </svg>
  1004. </span>
  1005. <input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
  1006. </div>
  1007. <div class="relative mb-4">
  1008. <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
  1009. <svg> ... </svg>
  1010. </span>
  1011. <input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
  1012. </div>
  1013. <button type="button" class="btn btn-primary w-full">Login</button>
  1014. </form>
  1015. </div>
  1016. <div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
  1017. <div class="flex items-center justify-center gap-3 mb-5">
  1018. <a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
  1019. <svg> ... </svg>
  1020. <span>Facebook</span>
  1021. </a>
  1022. <a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
  1023. <svg> ... </svg>
  1024. <span>Github</span>
  1025. </a>
  1026. </div>
  1027. <div class="p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm">
  1028. <p class="text-center text-white-dark dark:text-white-dark/70">
  1029. Looking to <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark">create an account?</a>
  1030. </p>
  1031. </div>
  1032. </DialogPanel>
  1033. </TransitionChild>
  1034. </div>
  1035. </div>
  1036. </Dialog>
  1037. </TransitionRoot>
  1038. </div>
  1039. <!-- Register -->
  1040. <div>
  1041. <!-- Trigger -->
  1042. <button type="button" class="btn btn-danger" @click="modal21 = true">Register</button>
  1043. <!-- Modal -->
  1044. <TransitionRoot appear :show="modal21" as="template">
  1045. <Dialog as="div" @close="modal21 = false" class="relative z-50">
  1046. <TransitionChild
  1047. as="template"
  1048. enter="duration-300 ease-out"
  1049. enter-from="opacity-0"
  1050. enter-to="opacity-100"
  1051. leave="duration-200 ease-in"
  1052. leave-from="opacity-100"
  1053. leave-to="opacity-0"
  1054. >
  1055. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  1056. </TransitionChild>
  1057. <div class="fixed inset-0 overflow-y-auto">
  1058. <div class="flex min-h-full items-start justify-center px-4 py-8">
  1059. <TransitionChild
  1060. as="template"
  1061. enter="duration-300 ease-out"
  1062. enter-from="opacity-0 scale-95"
  1063. enter-to="opacity-100 scale-100"
  1064. leave="duration-200 ease-in"
  1065. leave-from="opacity-100 scale-100"
  1066. leave-to="opacity-0 scale-95"
  1067. >
  1068. <DialogPanel class="panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark">
  1069. <button type="button" class="absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none" @click="modal21 = false">
  1070. <svg> ... </svg>
  1071. </button>
  1072. <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Register</div>
  1073. <div class="p-5">
  1074. <form>
  1075. <div class="relative mb-4">
  1076. <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
  1077. <svg> ... </svg>
  1078. </span>
  1079. <input type="text" placeholder="Name" class="form-input ltr:pl-10 rtl:pr-10" />
  1080. </div>
  1081. <div class="relative mb-4">
  1082. <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
  1083. <svg> ... </svg>
  1084. </span>
  1085. <input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
  1086. </div>
  1087. <div class="relative mb-4">
  1088. <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
  1089. <svg> ... </svg>
  1090. </span>
  1091. <input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
  1092. </div>
  1093. <button type="button" class="btn btn-primary w-full">Submit</button>
  1094. </form>
  1095. </div>
  1096. <div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
  1097. <div class="flex items-center justify-center gap-3 mb-5">
  1098. <a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
  1099. <svg> ... </svg>
  1100. <span>Facebook</span>
  1101. </a>
  1102. <a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
  1103. <svg> ... </svg>
  1104. <span>Github</span>
  1105. </a>
  1106. </div>
  1107. <div class="p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm">
  1108. <p class="text-center text-white-dark dark:text-white-dark/70">
  1109. Already have <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark">Login?</a>
  1110. </p>
  1111. </div>
  1112. </DialogPanel>
  1113. </TransitionChild>
  1114. </div>
  1115. </div>
  1116. </Dialog>
  1117. </TransitionRoot>
  1118. </div>
  1119. <!-- slider -->
  1120. <div>
  1121. <!-- Trigger -->
  1122. <button type="button" class="btn btn-secondary" @click="modal22 = true">Slider</button>
  1123. <!-- Modal -->
  1124. <TransitionRoot appear :show="modal22" as="template">
  1125. <Dialog as="div" @close="modal22 = false" class="relative z-50">
  1126. <TransitionChild
  1127. as="template"
  1128. enter="duration-300 ease-out"
  1129. enter-from="opacity-0"
  1130. enter-to="opacity-100"
  1131. leave="duration-200 ease-in"
  1132. leave-from="opacity-100"
  1133. leave-to="opacity-0"
  1134. >
  1135. <DialogOverlay class="fixed inset-0 bg-[black]/60" />
  1136. </TransitionChild>
  1137. <div class="fixed inset-0 overflow-y-auto">
  1138. <div class="flex min-h-full items-start justify-center px-4 py-8">
  1139. <TransitionChild
  1140. as="template"
  1141. enter="duration-300 ease-out"
  1142. enter-from="opacity-0 scale-95"
  1143. enter-to="opacity-100 scale-100"
  1144. leave="duration-200 ease-in"
  1145. leave-from="opacity-100 scale-100"
  1146. leave-to="opacity-0 scale-95"
  1147. >
  1148. <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark">
  1149. <button type="button" class="absolute top-7 ltr:right-5 rtl:left-5 text-white-dark hover:text-dark outline-none" @click="modal22 = false">
  1150. <svg> ... </svg>
  1151. </button>
  1152. <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Slider</div>
  1153. <div class="px-5">
  1154. <swiper
  1155. :modules="[Navigation, Pagination]"
  1156. :navigation="{ nextEl: '.swiper-button-next-ex1', prevEl: '.swiper-button-prev-ex1' }"
  1157. :pagination="{ clickable: true }"
  1158. class="max-w-3xl mx-auto mb-5"
  1159. id="slider1"
  1160. >
  1161. <template v-for="(item, i) in 3" :key="i">
  1162. <swiper-slide>
  1163. <img :src="\`/assets/images/carousel\${item}.jpeg\`" class="w-full" alt="" />
  1164. </swiper-slide>
  1165. </template>
  1166. <a
  1167. href="javascript:;"
  1168. class="
  1169. swiper-button-prev-ex1
  1170. grid
  1171. place-content-center
  1172. ltr:left-2
  1173. rtl:right-2
  1174. p-1
  1175. transition
  1176. text-primary
  1177. hover:text-white
  1178. border border-primary
  1179. hover:border-primary hover:bg-primary
  1180. rounded-full
  1181. absolute
  1182. z-[999]
  1183. top-1/2
  1184. -translate-y-1/2
  1185. "
  1186. >
  1187. <svg> ... </svg>
  1188. </a>
  1189. <a
  1190. href="javascript:;"
  1191. class="
  1192. swiper-button-next-ex1
  1193. grid
  1194. place-content-center
  1195. ltr:right-2
  1196. rtl:left-2
  1197. p-1
  1198. transition
  1199. text-primary
  1200. hover:text-white
  1201. border border-primary
  1202. hover:border-primary hover:bg-primary
  1203. rounded-full
  1204. absolute
  1205. z-[999]
  1206. top-1/2
  1207. -translate-y-1/2
  1208. "
  1209. >
  1210. <svg> ... </svg>
  1211. </a>
  1212. </swiper>
  1213. </div>
  1214. </DialogPanel>
  1215. </TransitionChild>
  1216. </div>
  1217. </div>
  1218. </Dialog>
  1219. </TransitionRoot>
  1220. </div>
  1221. <!-- script -->
  1222. <script lang="ts" setup>
  1223. import { ref } from 'vue';
  1224. import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay, TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
  1225. import { Swiper, SwiperSlide } from 'swiper/vue';
  1226. import { Navigation, Pagination } from 'swiper';
  1227. import 'swiper/css';
  1228. import 'swiper/css/navigation';
  1229. import 'swiper/css/pagination';
  1230. const modal17 = ref(false);
  1231. const modal18 = ref(false);
  1232. const modal19 = ref(false);
  1233. const modal20 = ref(false);
  1234. const modal21 = ref(false);
  1235. const modal22 = ref(false);
  1236. <\/script>
  1237. `,-1),ei=st({__name:"modals",setup(Q){lt({title:"Modals"});const{codeArr:b,toggleCode:y}=mt(),U=it(),k=r(!1),w=r(!1),V=r(!1),_=r(!1),C=r(!1),T=r(!1),D=r(!1),N=r(!1),j=r(!1),$=r(!1),P=r(!1),M=r(!1),S=r(!1),q=r(!1),R=r(!1),O=r(!1),L=r(!1),z=r(!1),E=r(!1),A=r(!1),B=r(!1),G=r(!1);return(Gl,e)=>(v(),F("div",null,[It,t("div",Ut,[t("div",Vt,[t("div",Lt,[a(X)]),Ft,Nt]),t("div",Et,[t("div",At,[t("div",Bt,[Gt,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[0]||(e[0]=i=>s(y)("code1"))},[t("span",Zt,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",Ht,[t("div",Qt,[t("button",{type:"button",class:"btn btn-primary",onClick:e[1]||(e[1]=i=>k.value=!0)},"Launch modal")]),a(s(c),{appear:"",show:k.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[5]||(e[5]=i=>k.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Yt,[t("div",Wt,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[2]||(e[2]=i=>k.value=!1)},[a(p)]),Kt,t("div",Xt,[Jt,t("div",te,[t("button",{type:"button",onClick:e[3]||(e[3]=i=>k.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[4]||(e[4]=i=>k.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"},"Save")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),s(b).includes("code1")?(v(),f(x,{key:0},{default:l(()=>[ee]),_:1})):g("",!0)]),t("div",ae,[t("div",se,[le,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[6]||(e[6]=i=>s(y)("code2"))},[t("span",ie,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",oe,[t("div",re,[t("button",{type:"button",class:"btn btn-info",onClick:e[7]||(e[7]=i=>w.value=!0)},"Launch modal")]),a(s(c),{appear:"",show:w.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[11]||(e[11]=i=>w.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",ne,[t("div",de,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[8]||(e[8]=i=>w.value=!1)},[a(p)]),ue,t("div",ce,[pe,t("div",ve,[t("button",{type:"button",onClick:e[9]||(e[9]=i=>w.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[10]||(e[10]=i=>w.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"},"Save")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),s(b).includes("code2")?(v(),f(x,{key:0},{default:l(()=>[me]),_:1})):g("",!0)]),t("div",be,[t("div",fe,[ye,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[12]||(e[12]=i=>s(y)("code3"))},[t("span",ge,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",xe,[t("div",he,[t("button",{type:"button",class:"btn btn-secondary",onClick:e[13]||(e[13]=i=>V.value=!0)},"Static modal")]),a(s(c),{appear:"",show:V.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",ke,[t("div",we,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[14]||(e[14]=i=>V.value=!1)},[a(p)]),_e,t("div",Ce,[Te,t("div",De,[t("button",{type:"button",onClick:e[15]||(e[15]=i=>V.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[16]||(e[16]=i=>V.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"},"Save")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),s(b).includes("code3")?(v(),f(x,{key:0},{default:l(()=>[je]),_:1})):g("",!0)]),t("div",$e,[t("div",Pe,[Me,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[17]||(e[17]=i=>s(y)("code4"))},[t("span",Se,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",qe,[t("div",Re,[t("button",{type:"button",class:"btn btn-success",onClick:e[18]||(e[18]=i=>_.value=!0)},"Launch modal")]),a(s(n),{as:"div",open:_.value,onClose:e[22]||(e[22]=i=>_.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"}),t("div",Oe,[t("div",ze,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[19]||(e[19]=i=>_.value=!1)},[a(p)]),Ie,t("div",Ue,[Ve,t("div",Le,[t("button",{type:"button",onClick:e[20]||(e[20]=i=>_.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[21]||(e[21]=i=>_.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"},"Save")])])]),_:1})])])]),_:1},8,["open"])]),s(b).includes("code4")?(v(),f(x,{key:0},{default:l(()=>[Fe]),_:1})):g("",!0)]),t("div",Ne,[t("div",Ee,[Ae,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[23]||(e[23]=i=>s(y)("code5"))},[t("span",Be,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",Ge,[t("div",Ze,[t("div",null,[t("button",{type:"button",class:"btn btn-warning",onClick:e[24]||(e[24]=i=>C.value=!0)},"Extra large"),a(s(c),{appear:"",show:C.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[28]||(e[28]=i=>C.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",He,[t("div",Qe,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-5xl text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[25]||(e[25]=i=>C.value=!1)},[a(p)]),Ye,t("div",We,[Ke,t("div",Xe,[t("button",{type:"button",onClick:e[26]||(e[26]=i=>C.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[27]||(e[27]=i=>C.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-danger",onClick:e[29]||(e[29]=i=>T.value=!0)},"Large"),a(s(c),{appear:"",show:T.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[33]||(e[33]=i=>T.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Je,[t("div",ta,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[30]||(e[30]=i=>T.value=!1)},[a(p)]),ea,t("div",aa,[sa,t("div",la,[t("button",{type:"button",onClick:e[31]||(e[31]=i=>T.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[32]||(e[32]=i=>T.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-secondary",onClick:e[34]||(e[34]=i=>D.value=!0)},"Small"),a(s(c),{appear:"",show:D.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[38]||(e[38]=i=>D.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",ia,[t("div",oa,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[35]||(e[35]=i=>D.value=!1)},[a(p)]),ra,t("div",na,[da,t("div",ua,[t("button",{type:"button",onClick:e[36]||(e[36]=i=>D.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[37]||(e[37]=i=>D.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])])])]),s(b).includes("code5")?(v(),f(x,{key:0},{default:l(()=>[ca]),_:1})):g("",!0)]),t("div",pa,[t("div",va,[ma,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[39]||(e[39]=i=>s(y)("code6"))},[t("span",ba,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",fa,[t("div",ya,[t("button",{type:"button",class:"btn btn-primary",onClick:e[40]||(e[40]=i=>N.value=!0)},"Play Youtube")]),a(s(c),{appear:"",show:N.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[42]||(e[42]=i=>N.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",ga,[t("div",xa,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"relative overflow-hidden w-full max-w-3xl py-8"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[41]||(e[41]=i=>N.value=!1)},[a(p)]),ha]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),s(b).includes("code6")?(v(),f(x,{key:0},{default:l(()=>[ka]),_:1})):g("",!0)]),t("div",wa,[t("div",_a,[Ca,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[43]||(e[43]=i=>s(y)("code7"))},[t("span",Ta,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",Da,[t("div",ja,[t("div",null,[t("button",{type:"button",class:"btn btn-primary",onClick:e[44]||(e[44]=i=>j.value=!0)},"FadeIn"),a(s(c),{appear:"",show:j.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[48]||(e[48]=i=>j.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",$a,[t("div",Pa,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeIn"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[45]||(e[45]=i=>j.value=!1)},[a(p)]),Ma,t("div",Sa,[qa,t("div",Ra,[t("button",{type:"button",onClick:e[46]||(e[46]=i=>j.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[47]||(e[47]=i=>j.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-info",onClick:e[49]||(e[49]=i=>$.value=!0)},"SlideIn Down"),a(s(c),{appear:"",show:$.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[53]||(e[53]=i=>$.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Oa,[t("div",za,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInDown"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[50]||(e[50]=i=>$.value=!1)},[a(p)]),Ia,t("div",Ua,[Va,t("div",La,[t("button",{type:"button",onClick:e[51]||(e[51]=i=>$.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[52]||(e[52]=i=>$.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-success",onClick:e[54]||(e[54]=i=>P.value=!0)},"FadeIn Up"),a(s(c),{appear:"",show:P.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[58]||(e[58]=i=>P.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Fa,[t("div",Na,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeInUp"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[55]||(e[55]=i=>P.value=!1)},[a(p)]),Ea,t("div",Aa,[Ba,t("div",Ga,[t("button",{type:"button",onClick:e[56]||(e[56]=i=>P.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[57]||(e[57]=i=>P.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-warning",onClick:e[59]||(e[59]=i=>M.value=!0)},"SlideIn Up"),a(s(c),{appear:"",show:M.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[63]||(e[63]=i=>M.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Za,[t("div",Ha,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInUp"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[60]||(e[60]=i=>M.value=!1)},[a(p)]),Qa,t("div",Ya,[Wa,t("div",Ka,[t("button",{type:"button",onClick:e[61]||(e[61]=i=>M.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[62]||(e[62]=i=>M.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-danger",onClick:e[64]||(e[64]=i=>S.value=!0)},"FadeIn Left"),a(s(c),{appear:"",show:S.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[68]||(e[68]=i=>S.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Xa,[t("div",Ja,[a(s(u),{class:I(["panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated",s(U).rtlClass==="rtl"?"animate__fadeInRight":"animate__fadeInLeft"])},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[65]||(e[65]=i=>S.value=!1)},[a(p)]),ts,t("div",es,[as,t("div",ss,[t("button",{type:"button",onClick:e[66]||(e[66]=i=>S.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[67]||(e[67]=i=>S.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1},8,["class"])])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-secondary",onClick:e[69]||(e[69]=i=>q.value=!0)},"RotateIn Left"),a(s(c),{appear:"",show:q.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[73]||(e[73]=i=>q.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",ls,[t("div",is,[a(s(u),{class:I(["panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated",s(U).rtlClass==="rtl"?"animate__rotateInDownRight":"animate__rotateInDownLeft"])},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[70]||(e[70]=i=>q.value=!1)},[a(p)]),os,t("div",rs,[ns,t("div",ds,[t("button",{type:"button",onClick:e[71]||(e[71]=i=>q.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[72]||(e[72]=i=>q.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1},8,["class"])])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-dark",onClick:e[74]||(e[74]=i=>R.value=!0)},"FadeIn Right"),a(s(c),{appear:"",show:R.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[78]||(e[78]=i=>R.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",us,[t("div",cs,[a(s(u),{class:I(["panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated",s(U).rtlClass==="rtl"?"animate__fadeInLeft":"animate__fadeInRight"])},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[75]||(e[75]=i=>R.value=!1)},[a(p)]),ps,t("div",vs,[ms,t("div",bs,[t("button",{type:"button",onClick:e[76]||(e[76]=i=>R.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[77]||(e[77]=i=>R.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1},8,["class"])])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-primary",onClick:e[79]||(e[79]=i=>O.value=!0)},"ZoomIn Up"),a(s(c),{appear:"",show:O.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[83]||(e[83]=i=>O.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",fs,[t("div",ys,[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__zoomInUp"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[80]||(e[80]=i=>O.value=!1)},[a(p)]),gs,t("div",xs,[hs,t("div",ks,[t("button",{type:"button",onClick:e[81]||(e[81]=i=>O.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[82]||(e[82]=i=>O.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})])])]),_:1})]),_:1},8,["show"])])])]),s(b).includes("code7")?(v(),f(x,{key:0},{default:l(()=>[ws]),_:1})):g("",!0)]),t("div",_s,[t("div",Cs,[Ts,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:e[84]||(e[84]=i=>s(y)("code8"))},[t("span",Ds,[a(h,{class:"me-2"}),m(" Code ")])])]),t("div",js,[$s,t("div",Ps,[t("div",null,[t("button",{type:"button",class:"btn btn-primary",onClick:e[85]||(e[85]=i=>L.value=!0)},"Standard"),a(s(c),{appear:"",show:L.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[88]||(e[88]=i=>L.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Ms,[t("div",Ss,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("div",qs,[t("div",Rs,[a(X,{class:"w-7 h-7"})])]),t("div",Os,[zs,t("div",Is,[t("button",{type:"button",class:"btn btn-outline-danger",onClick:e[86]||(e[86]=i=>L.value=!1)},"Discard"),t("button",{type:"button",class:"btn btn-primary ltr:ml-4 rtl:mr-4",onClick:e[87]||(e[87]=i=>L.value=!1)}," Save ")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-info",onClick:e[89]||(e[89]=i=>z.value=!0)},"Tabs"),a(s(c),{appear:"",show:z.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[93]||(e[93]=i=>z.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Us,[t("div",Vs,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[90]||(e[90]=i=>z.value=!1)},[a(p)]),Ls,t("div",Fs,[a(s(bt),{as:"div"},{default:l(()=>[a(s(ft),{class:"flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]"},{default:l(()=>[a(s(Z),{as:"template"},{default:l(({selected:i})=>[t("a",{href:"javascript:;",class:I(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":i}])},"Home",2)]),_:1}),a(s(Z),{as:"template"},{default:l(({selected:i})=>[t("a",{href:"javascript:;",class:I(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":i}])},"Profile",2)]),_:1}),a(s(Z),{as:"template"},{default:l(({selected:i})=>[t("a",{href:"javascript:;",class:I(["p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none",{"!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black":i}])},"Contact",2)]),_:1}),a(s(Z),{as:"template",disabled:""},{default:l(()=>[Ns]),_:1})]),_:1}),a(s(yt),{class:"pt-5 flex-1 text-sm"},{default:l(()=>[a(s(H),null,{default:l(()=>[Es,As,Bs]),_:1}),a(s(H),null,{default:l(()=>[Gs]),_:1}),a(s(H),null,{default:l(()=>[Zs]),_:1}),a(s(H),null,{default:l(()=>[m("Disabled")]),_:1})]),_:1})]),_:1}),t("div",Hs,[t("button",{type:"button",onClick:e[91]||(e[91]=i=>z.value=!1),class:"btn btn-outline-danger"},"Discard"),t("button",{type:"button",onClick:e[92]||(e[92]=i=>z.value=!1),class:"btn btn-primary ltr:ml-4 rtl:mr-4"}," Save ")])])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-success",onClick:e[94]||(e[94]=i=>E.value=!0)},"Profile"),a(s(c),{appear:"",show:E.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[96]||(e[96]=i=>E.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Qs,[t("div",Ys,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-[300px] text-black dark:text-white-dark bg-secondary dark:bg-secondary"},{default:l(()=>[t("div",Ws,[t("button",{type:"button",class:"text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none",onClick:e[95]||(e[95]=i=>E.value=!1)},[a(p,{class:"w-5 h-5"})])]),Ks]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-warning",onClick:e[97]||(e[97]=i=>A.value=!0)},"Login"),a(s(c),{appear:"",show:A.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[99]||(e[99]=i=>A.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Xs,[t("div",Js,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none",onClick:e[98]||(e[98]=i=>A.value=!1)},[a(p,{class:"w-5 h-5"})]),tl,t("div",el,[t("form",null,[t("div",al,[t("span",sl,[a(W,{class:"w-5 h-5"})]),ll]),t("div",il,[t("span",ol,[a(tt,{class:"w-5 h-5"})]),rl]),nl])]),dl,t("div",ul,[t("a",cl,[a(J,{class:"w-5 h-5 shrink-0"}),pl]),t("a",vl,[a(et,{class:"shrink-0"}),ml])]),bl]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-danger",onClick:e[100]||(e[100]=i=>B.value=!0)},"Register"),a(s(c),{appear:"",show:B.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[102]||(e[102]=i=>B.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",fl,[t("div",yl,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none",onClick:e[101]||(e[101]=i=>B.value=!1)},[a(p,{class:"w-5 h-5"})]),gl,t("div",xl,[t("form",null,[t("div",hl,[t("span",kl,[a(W,{class:"w-5 h-5"})]),wl]),t("div",_l,[t("span",Cl,[a(zt)]),Tl]),t("div",Dl,[t("span",jl,[a(tt,{class:"w-5 h-5"})]),$l]),Pl])]),Ml,t("div",Sl,[t("a",ql,[a(J,{class:"w-5 h-5 shrink-0"}),Rl]),t("a",Ol,[a(et,{class:"shrink-0"}),zl])]),Il]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])]),t("div",null,[t("button",{type:"button",class:"btn btn-secondary",onClick:e[103]||(e[103]=i=>G.value=!0)},"Slider"),a(s(c),{appear:"",show:G.value,as:"template"},{default:l(()=>[a(s(n),{as:"div",onClose:e[105]||(e[105]=i=>G.value=!1),class:"relative z-[51]"},{default:l(()=>[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0","enter-to":"opacity-100",leave:"duration-200 ease-in","leave-from":"opacity-100","leave-to":"opacity-0"},{default:l(()=>[a(s(d),{class:"fixed inset-0 bg-[black]/60"})]),_:1}),t("div",Ul,[t("div",Vl,[a(s(o),{as:"template",enter:"duration-300 ease-out","enter-from":"opacity-0 scale-95","enter-to":"opacity-100 scale-100",leave:"duration-200 ease-in","leave-from":"opacity-100 scale-100","leave-to":"opacity-0 scale-95"},{default:l(()=>[a(s(u),{class:"panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark"},{default:l(()=>[t("button",{type:"button",class:"absolute top-7 ltr:right-5 rtl:left-5 text-white-dark hover:text-dark outline-none",onClick:e[104]||(e[104]=i=>G.value=!1)},[a(p,{class:"w-5 h-5"})]),Ll,t("div",Fl,[(v(),f(s(vt),{modules:[s(ct),s(pt)],navigation:{nextEl:".swiper-button-next-ex1",prevEl:".swiper-button-prev-ex1"},pagination:{clickable:!0},class:"max-w-3xl mx-auto mb-5",id:"slider1",dir:s(U).rtlClass,key:s(U).rtlClass==="rtl"?"true":"false"},{default:l(()=>[(v(),F(ot,null,rt(3,(i,at)=>a(s(ut),{key:at},{default:l(()=>[t("img",{src:`/assets/images/carousel${i}.jpeg`,class:"w-full",alt:""},null,8,Nl)]),_:2},1024)),64)),t("a",El,[a(K,{class:"w-5 h-5 rtl:-rotate-90 rotate-90"})]),t("a",Al,[a(K,{class:"w-5 h-5 rtl:rotate-90 -rotate-90"})])]),_:1},8,["modules","navigation","dir"]))])]),_:1})]),_:1})])])]),_:1})]),_:1},8,["show"])])])]),s(b).includes("code8")?(v(),f(x,{key:0},{default:l(()=>[Bl]),_:1})):g("",!0)])])])]))}});export{ei as default};