notifications.09578820.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import{c as k,_ as u,I as b}from"./icon-code.6d7a3662.js";import{S as v}from"./sweetalert2.all.79a6bcd7.js";import{d as w,u as C,b as _,c as B,a as t,f as a,j as e,g as m,W as p,w as f,l as h,o as l}from"./index.c685e846.js";import{I as E}from"./icon-bell.2e21c889.js";const $=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,"Notifications")])],-1),j={class:"pt-5 space-y-8"},T={class:"panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},S={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},M=t("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),N=t("a",{href:"https://www.npmjs.com/package/sweetalert2",target:"_blank",class:"block hover:underline"},"https://www.npmjs.com/package/sweetalert2",-1),D={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},I={class:"panel"},A={class:"flex items-center justify-between mb-5"},H=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),P={class:"flex items-center"},L={class:"mb-5"},R={class:"flex items-center justify-center"},V=t("pre",null,`<!-- basic -->
  2. <button type="button" class="btn btn-primary" @click="showMessage('Hello, world! This is a toast message.')">Open Toast</button>
  3. <!-- script -->
  4. <script>
  5. const showMessage = (msg = 'Example notification text.', position = 'bottom-start', showCloseButton = true, closeButtonHtml = '', duration = 3000) => {
  6. const toast = Swal.mixin({
  7. toast: true,
  8. position: position || 'bottom-start',
  9. showConfirmButton: false,
  10. timer: duration,
  11. showCloseButton: showCloseButton,
  12. });
  13. toast.fire({
  14. title: msg,
  15. });
  16. };
  17. <\/script>
  18. `,-1),W={class:"panel lg:row-span-2"},O={class:"flex items-center justify-between mb-5"},q=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Position",-1),z={class:"flex items-center"},F={class:"mb-5"},G=t("h6",{class:"font-semibold text-base dark:text-white-light mb-3 text-center"},"Top Position",-1),J={class:"flex items-center justify-center mb-10 gap-2"},K=t("h6",{class:"font-semibold text-base dark:text-white-light mb-3 text-center"},"Bottom Position",-1),Q={class:"flex items-center justify-center gap-2"},U=t("pre",null,`<!-- top left -->
  19. <button type="button" class="btn btn-success" @click="showMessage('Example notification text.',store.rtlClass === 'rtl' ? 'top-end' : 'top-start')">Top Left</button>
  20. <!-- top center -->
  21. <button type="button" class="btn btn-secondary" @click="showMessage('Example notification text','top')">Top Center</button>
  22. <!-- top right -->
  23. <button type="button" class="btn btn-info" @click="showMessage('Example notification text.', store.rtlClass === 'rtl' ? 'top-start' : 'top-end')">Top Right</button>
  24. <!-- bottom left -->
  25. <button type="button" class="btn btn-dark" @click="showMessage('Example notification text.',store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start')">Bottom Left</button>
  26. <!-- bottom center -->
  27. <button type="button" class="btn btn-primary" @click="showMessage('Example notification text.','bottom')">Bottom Center</button>
  28. <!-- bottom right -->
  29. <button type="button" class="btn btn-secondary" @click="showMessage('Example notification text.',store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end')">Bottom Right</button>
  30. <!-- script -->
  31. <script>
  32. import { useAppStore } from '@/stores/index';
  33. const store = useAppStore();
  34. const showMessage = (msg = 'Example notification text.', position = 'bottom-start', showCloseButton = true, closeButtonHtml = '', duration = 3000) => {
  35. const toast = Swal.mixin({
  36. toast: true,
  37. position: position || 'bottom-start',
  38. showConfirmButton: false,
  39. timer: duration,
  40. showCloseButton: showCloseButton,
  41. });
  42. toast.fire({
  43. title: msg,
  44. });
  45. };
  46. <\/script>
  47. `,-1),X={class:"panel"},Y={class:"flex items-center justify-between mb-5"},Z=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"No Action",-1),tt={class:"flex items-center"},ot={class:"mb-5"},st={class:"flex items-center justify-center"},et=t("pre",null,`<!-- no action -->
  48. <button type="button" class="btn btn-success" @click="showMessage('Example notification text.', 'bottom-start',false)">No Action</button>
  49. <!-- script -->
  50. <script>
  51. const showMessage = (msg = 'Example notification text.', position = 'bottom-start', showCloseButton = true, closeButtonHtml = '', duration = 3000) => {
  52. const toast = Swal.mixin({
  53. toast: true,
  54. position: position || 'bottom-start',
  55. showConfirmButton: false,
  56. timer: duration,
  57. showCloseButton: showCloseButton,
  58. });
  59. toast.fire({
  60. title: msg,
  61. });
  62. };
  63. <\/script>
  64. `,-1),nt={class:"panel"},it={class:"flex items-center justify-between mb-5"},at=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Click Callback",-1),lt={class:"flex items-center"},rt={class:"mb-5"},ct={class:"flex items-center justify-center"},dt=t("pre",null,`<!-- click callback -->
  65. <button type="button" class="btn btn-info" @click="clickCallable()">Click Callback</button>
  66. <!-- script -->
  67. <script>
  68. const clickCallable = () => {
  69. Swal.fire({
  70. toast: true,
  71. position: 'bottom-start',
  72. text: "Custom callback when action button is clicked.",
  73. showCloseButton: true,
  74. showConfirmButton: false,
  75. }).then((result) => {
  76. Swal.fire({
  77. toast: true,
  78. position: 'bottom-start',
  79. text: 'Thanks for clicking the Dismiss button!',
  80. showCloseButton: true,
  81. showConfirmButton: false,
  82. });
  83. });
  84. };
  85. <\/script>
  86. `,-1),ut={class:"panel"},bt={class:"flex items-center justify-between mb-5"},mt=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Duration",-1),pt={class:"flex items-center"},ft={class:"mb-5"},ht={class:"flex items-center justify-center"},xt=t("pre",null,`<!-- click callback -->
  87. <button type="button" class="btn btn-dark" @click="showMessage(msg='Example notification text.', position= 'bottom-start', duration=5000)">Duration</button>
  88. <!-- script -->
  89. <script>
  90. const showMessage = (msg = 'Example notification text.', position = 'bottom-start', showCloseButton = true, closeButtonHtml = '', duration = 3000) => {
  91. const toast = Swal.mixin({
  92. toast: true,
  93. position: position || 'bottom-start',
  94. showConfirmButton: false,
  95. timer: duration,
  96. showCloseButton: showCloseButton,
  97. });
  98. toast.fire({
  99. title: msg,
  100. });
  101. };
  102. <\/script>
  103. `,-1),vt={class:"panel lg:col-span-2"},gt={class:"flex items-center justify-between mb-5"},yt=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Background Color",-1),kt={class:"flex items-center"},wt={class:"mb-5"},Ct={class:"grid grid-cols-2 sm:grid-cols-1 sm:flex items-center justify-center gap-2 colored-toast"},_t=t("div",{id:"primary-toast"},null,-1),Bt=t("div",{id:"secondary-toast"},null,-1),Et=t("div",{id:"success-toast"},null,-1),$t=t("div",{id:"danger-toast"},null,-1),jt=t("div",{id:"warning-toast"},null,-1),Tt=t("div",{id:"info-toast"},null,-1),St=t("pre",null,`<!-- primary -->
  104. <div>
  105. <button type="button" class="btn btn-primary" @click="coloredToast('primary')">Primary</button>
  106. <div id="primary-toast"></div>
  107. </div>
  108. <!-- secondary -->
  109. <div>
  110. <button type=" button" class="btn btn-secondary" @click="coloredToast('secondary')">Secondary</button>
  111. <div id="secondary-toast"></div>
  112. </div>
  113. <!-- success -->
  114. <div>
  115. <button type="button" class="btn btn-success" @click="coloredToast('success')">Success</button>
  116. <div id="success-toast"></div>
  117. </div>
  118. <!-- danger -->
  119. <div>
  120. <button type="button" class="btn btn-danger" @click="coloredToast('danger')">Danger</button>
  121. <div id="danger-toast"></div>
  122. </div>
  123. <!-- warning -->
  124. <div>
  125. <button type="button" class="btn btn-warning" @click="coloredToast('warning')">Warning</button>
  126. <div id="warning-toast"></div>
  127. </div>
  128. <!-- info -->
  129. <div>
  130. <button type="button" class="btn btn-info" @click="coloredToast('info')">Info</button>
  131. <div id="info-toast"></div>
  132. </div>
  133. <!-- script -->
  134. <script>
  135. const coloredToast = (color) => {
  136. const toast = Swal.mixin({
  137. toast: true,
  138. position: 'bottom-start',
  139. showConfirmButton: false,
  140. timer: 3000,
  141. showCloseButton: true,
  142. customClass: {
  143. popup: \`color-\${color}\`
  144. },
  145. target: document.getElementById(color + '-toast')
  146. });
  147. toast.fire({
  148. title: 'Example notification text.',
  149. });
  150. };
  151. <\/script>
  152. `,-1),Lt=w({__name:"notifications",setup(Mt){C({title:"Notification"});const x=_(),{codeArr:r,toggleCode:c}=k(),n=(i="Example notification text.",o="bottom-start",s=!0,Nt="",y=3e3)=>{v.mixin({toast:!0,position:o||"bottom-start",showConfirmButton:!1,timer:y,showCloseButton:s}).fire({title:i})},g=()=>{v.fire({toast:!0,position:"bottom-start",text:"Custom callback when action button is clicked.",showCloseButton:!0,showConfirmButton:!1}).then(i=>{v.fire({toast:!0,position:"bottom-start",text:"Thanks for clicking the Dismiss button!",showCloseButton:!0,showConfirmButton:!1})})},d=i=>{v.mixin({toast:!0,position:"bottom-start",showConfirmButton:!1,timer:3e3,showCloseButton:!0,customClass:{popup:`color-${i}`},target:document.getElementById(i+"-toast")||"body"}).fire({title:"Example notification text."})};return(i,o)=>(l(),B("div",null,[$,t("div",j,[t("div",T,[t("div",S,[a(E)]),M,N]),t("div",D,[t("div",I,[t("div",A,[H,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[0]||(o[0]=s=>e(c)("code1"))},[t("span",P,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",L,[t("div",R,[t("button",{type:"button",class:"btn btn-primary",onClick:o[1]||(o[1]=s=>n("Hello, world! This is a toast message."))},"Open Toast")])]),e(r).includes("code1")?(l(),p(u,{key:0},{default:f(()=>[V]),_:1})):h("",!0)]),t("div",W,[t("div",O,[q,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[2]||(o[2]=s=>e(c)("code2"))},[t("span",z,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",F,[G,t("div",J,[t("button",{type:"button",class:"btn btn-success",onClick:o[3]||(o[3]=s=>n("Example notification text.",e(x).rtlClass==="rtl"?"top-end":"top-start"))}," Top Left "),t("button",{type:"button",class:"btn btn-secondary",onClick:o[4]||(o[4]=s=>n("Example notification text","top"))},"Top Center"),t("button",{type:"button",class:"btn btn-info",onClick:o[5]||(o[5]=s=>n("Example notification text.",e(x).rtlClass==="rtl"?"top-start":"top-end"))}," Top Right ")]),K,t("div",Q,[t("button",{type:"button",class:"btn btn-dark",onClick:o[6]||(o[6]=s=>n("Example notification text.",e(x).rtlClass==="rtl"?"bottom-end":"bottom-start"))}," Bottom Left "),t("button",{type:"button",class:"btn btn-primary",onClick:o[7]||(o[7]=s=>n("Example notification text.","bottom"))},"Bottom Center"),t("button",{type:"button",class:"btn btn-secondary",onClick:o[8]||(o[8]=s=>n("Example notification text.",e(x).rtlClass==="rtl"?"bottom-start":"bottom-end"))}," Bottom Right ")])]),e(r).includes("code2")?(l(),p(u,{key:0},{default:f(()=>[U]),_:1})):h("",!0)]),t("div",X,[t("div",Y,[Z,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[9]||(o[9]=s=>e(c)("code3"))},[t("span",tt,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",ot,[t("div",st,[t("button",{type:"button",class:"btn btn-success",onClick:o[10]||(o[10]=s=>n("Example notification text.","bottom-start",!1))}," No Action ")])]),e(r).includes("code3")?(l(),p(u,{key:0},{default:f(()=>[et]),_:1})):h("",!0)]),t("div",nt,[t("div",it,[at,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[11]||(o[11]=s=>e(c)("code4"))},[t("span",lt,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",rt,[t("div",ct,[t("button",{type:"button",class:"btn btn-info",onClick:o[12]||(o[12]=s=>g())},"Click Callback")])]),e(r).includes("code4")?(l(),p(u,{key:0},{default:f(()=>[dt]),_:1})):h("",!0)]),t("div",ut,[t("div",bt,[mt,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[13]||(o[13]=s=>e(c)("code5"))},[t("span",pt,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",ft,[t("div",ht,[t("button",{type:"button",class:"btn btn-dark",onClick:o[14]||(o[14]=s=>n(i.msg="Example notification text.",i.position="bottom-start",i.duration=5e3))}," Duration ")])]),e(r).includes("code5")?(l(),p(u,{key:0},{default:f(()=>[xt]),_:1})):h("",!0)]),t("div",vt,[t("div",gt,[yt,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:o[15]||(o[15]=s=>e(c)("code6"))},[t("span",kt,[a(b,{class:"me-2"}),m(" Code ")])])]),t("div",wt,[t("div",Ct,[t("div",null,[t("button",{type:"button",class:"btn btn-primary",onClick:o[16]||(o[16]=s=>d("primary"))},"Primary"),_t]),t("div",null,[t("button",{type:"button",class:"btn btn-secondary",onClick:o[17]||(o[17]=s=>d("secondary"))},"Secondary"),Bt]),t("div",null,[t("button",{type:"button",class:"btn btn-success",onClick:o[18]||(o[18]=s=>d("success"))},"Success"),Et]),t("div",null,[t("button",{type:"button",class:"btn btn-danger",onClick:o[19]||(o[19]=s=>d("danger"))},"Danger"),$t]),t("div",null,[t("button",{type:"button",class:"btn btn-warning",onClick:o[20]||(o[20]=s=>d("warning"))},"Warning"),jt]),t("div",null,[t("button",{type:"button",class:"btn btn-info",onClick:o[21]||(o[21]=s=>d("info"))},"Info"),Tt])])]),e(r).includes("code6")?(l(),p(u,{key:0},{default:f(()=>[St]),_:1})):h("",!0)])])])]))}});export{Lt as default};