2 lines
5.1 KiB
JavaScript
2 lines
5.1 KiB
JavaScript
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{d as w,h as _,j as C,o as e,c as t,k as s,n as f,r as u,e as F,X as q,W as D,H as a,w as E,a as b,t as A,l as m,b as k,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const B=s("div",{class:"bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"},null,-1),M={class:"relative bg-white rounded-lg shadow dark:bg-gray-700"},T=s("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[s("path",{"clip-rule":"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z","fill-rule":"evenodd"})],-1),z={key:0,class:"p-6 rounded-b border-gray-200 border-t dark:border-gray-600"},S=w({__name:"FwbModal",props:{notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},size:{default:"2xl"}},emits:["close","click:outside"],setup(c,{emit:l}){const n=c,y=l,r={xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl","6xl":"max-w-6xl","7xl":"max-w-7xl"};function d(){y("close")}function v(){n.persistent||(y("click:outside"),d())}function x(){!n.notEscapable&&!n.persistent&&d()}const h=_(null);return C(()=>{h.value&&h.value.focus()}),(o,Y)=>(e(),t("div",null,[B,s("div",{ref_key:"modalRef",ref:h,class:"overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex",tabindex:"0",onClick:q(v,["self"]),onKeyup:D(x,["esc"])},[s("div",{class:f([`${r[o.size]}`,"relative p-4 w-full h-full"])},[s("div",M,[s("div",{class:f([o.$slots.header?"border-b border-gray-200 dark:border-gray-600":"","p-4 rounded-t flex justify-between items-center"])},[u(o.$slots,"header"),o.persistent?F("",!0):(e(),t("button",{key:0,"aria-label":"close",class:"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white",type:"button",onClick:d},[u(o.$slots,"close-icon",{},()=>[T])]))],2),s("div",{class:f([o.$slots.header?"":"pt-0","p-6"])},[u(o.$slots,"body")],2),o.$slots.footer?(e(),t("div",z,[u(o.$slots,"footer")])):F("",!0)])],2)],544)]))}}),P={class:"vp-raw flex justify-start"},$=s("div",{class:"flex items-center text-lg"}," Terms of Service ",-1),I=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply. ",-1),V=s("p",{class:"text-base leading-relaxed text-gray-500 dark:text-gray-400"}," The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them. ",-1),N={class:"flex justify-between"},p=w({__name:"FwbModalExample",props:{size:{default:"2xl"},notEscapable:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},triggerText:{default:"Open Modal"}},setup(c){const l=_(!1);function n(){l.value=!1}function y(){l.value=!0}return(r,d)=>(e(),t("div",P,[a(m(g),{onClick:y},{default:E(()=>[b(A(r.triggerText),1)]),_:1}),l.value?(e(),k(m(S),{key:0,"not-escapable":r.notEscapable,persistent:r.persistent,size:r.size,onClose:n},{header:E(()=>[$]),body:E(()=>[I,V]),footer:E(()=>[s("div",N,[a(m(g),{color:"alternative",onClick:n},{default:E(()=>[b(" Decline ")]),_:1}),a(m(g),{color:"green",onClick:n},{default:E(()=>[b(" I accept ")]),_:1})])]),_:1},8,["not-escapable","persistent","size"])):F("",!0)]))}}),R={class:"vp-raw flex justify-start space-x-2"},U={__name:"FwbModalExampleSize",setup(c){return(l,n)=>(e(),t("div",R,[s("span",null,[a(p,{size:"xs","trigger-text":"SM Modal"})]),s("span",null,[a(p,{size:"md","trigger-text":"MD Modal"})]),s("span",null,[a(p,{size:"xl","trigger-text":"XL Modal"})]),s("span",null,[a(p,{size:"5xl","trigger-text":"5XL Modal"})])]))}},j={class:"vp-raw flex justify-start space-x-2"},G={__name:"FwbModalExampleEscapable",setup(c){return(l,n)=>(e(),t("div",j,[a(p,{"trigger-text":"Escapable"}),a(p,{"not-escapable":"","trigger-text":"Not Escapable"})]))}},O={class:"vp-raw"},L={__name:"FwbModalExamplePersistent",setup(c){return(l,n)=>(e(),t("div",O,[a(p,{persistent:"","trigger-text":"Persistent"})]))}},W=i("",7),X=i("",5),K=i("",6),H=i("",3),J=i("",6),os=JSON.parse('{"title":"Vue Modal - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/modal.md","filePath":"components/modal.md"}'),Q={name:"components/modal.md"},es=Object.assign(Q,{setup(c){return(l,n)=>(e(),t("div",null,[W,a(p),X,a(U),K,a(G),H,a(L),J]))}});export{os as __pageData,es as default};
|