134 lines
38 KiB
JavaScript
134 lines
38 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('<h1 id="vue-modal-flowbite" tabindex="-1">Vue Modal - Flowbite <a class="header-anchor" href="#vue-modal-flowbite" aria-label="Permalink to "Vue Modal - Flowbite""></a></h1><h4 id="use-the-modal-component-to-show-interactive-dialogs-and-notifications-to-your-website-users-available-in-multiple-sizes-colors-and-styles" tabindex="-1">Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles <a class="header-anchor" href="#use-the-modal-component-to-show-interactive-dialogs-and-notifications-to-your-website-users-available-in-multiple-sizes-colors-and-styles" aria-label="Permalink to "Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles""></a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/modal/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/modal/</a></p></div><p>The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.</p><p>Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.</p><h2 id="default-modal" tabindex="-1">Default modal <a class="header-anchor" href="#default-modal" aria-label="Permalink to "Default modal""></a></h2>',7),X=i(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"showModal"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Open modal</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-if</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowModal"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@close</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"closeModal"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">header</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flex items-center text-lg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Terms of Service</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">body</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"text-base leading-relaxed text-gray-500 dark:text-gray-400"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> 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.</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"text-base leading-relaxed text-gray-500 dark:text-gray-400"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> 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.</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">footer</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flex justify-between"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"closeModal"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"alternative"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Decline</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"closeModal"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"green"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> I accept</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"ts"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'vue'</span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButton, FwbModal } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">isShowModal</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">false</span><span style="color:#E1E4E8;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">closeModal</span><span style="color:#E1E4E8;"> () {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> isShowModal.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">false</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">showModal</span><span style="color:#E1E4E8;"> () {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> isShowModal.value </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"showModal"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Open modal</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-if</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowModal"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@close</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"closeModal"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">header</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flex items-center text-lg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Terms of Service</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">div</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">body</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"text-base leading-relaxed text-gray-500 dark:text-gray-400"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> 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.</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">p</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"text-base leading-relaxed text-gray-500 dark:text-gray-400"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> 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.</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">p</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">footer</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flex justify-between"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"closeModal"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"alternative"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Decline</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"closeModal"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"green"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> I accept</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">div</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"ts"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'vue'</span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButton, FwbModal } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">isShowModal</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">false</span><span style="color:#24292E;">)</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">closeModal</span><span style="color:#24292E;"> () {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> isShowModal.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">false</span></span>
|
||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">showModal</span><span style="color:#24292E;"> () {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> isShowModal.value </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
|
||
<span class="line"><span style="color:#24292E;">}</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="size" tabindex="-1">Size <a class="header-anchor" href="#size" aria-label="Permalink to "Size""></a></h2><p>You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.</p><p><code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code>, <code>3xl</code>, <code>4xl</code>, <code>5xl</code>, <code>6xl</code>, <code>7xl</code></p><p>The default value is: <code>2xl</code></p>`,5),K=i(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xs"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"md"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"xl"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"5xl"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbModal } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xs"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"md"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"xl"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"5xl"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbModal } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="escapable" tabindex="-1">Escapable <a class="header-anchor" href="#escapable" aria-label="Permalink to "Escapable""></a></h2><p>The escapable property is true by default to improve user experience and accessibility.</p><p>This means that you may close the modal by</p><ul><li>Using the close button on the modal</li><li>Clicking outside of the modal</li><li>Pressing the escape key</li></ul><p>In some situations, your user may be required to interact with the modal content. If this is the case, you can set the <code>not-escapable</code> property to <code>true</code>. The developer can then choose when they want to close the modal.</p>`,6),H=i(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">not-escapable</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbModal } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">not-escapable</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbModal } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="persistent" tabindex="-1">Persistent <a class="header-anchor" href="#persistent" aria-label="Permalink to "Persistent""></a></h2><p>Clicking outside of the element or pressing esc key will not send <code>close</code> event.</p>`,3),J=i(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-modal</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">persistent</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbModal } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-modal</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">persistent</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbModal } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="props" tabindex="-1">Props: <a class="header-anchor" href="#props" aria-label="Permalink to "Props:""></a></h3><table><thead><tr><th>Name</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>size</td><td><code>md</code>,<code>lg</code>, <code>xl</code>, <code>2xl</code>, <code>3xl</code>, <code>4xl</code>, <code>5xl</code>, <code>6xl</code>, <code>7xl</code></td><td>2xl</td></tr><tr><td>notEscapable</td><td><code>true</code>, <code>false</code></td><td><code>false</code></td></tr><tr><td>persistent</td><td><code>true</code>, <code>false</code></td><td><code>true</code></td></tr></tbody></table><h3 id="events" tabindex="-1">Events: <a class="header-anchor" href="#events" aria-label="Permalink to "Events:""></a></h3><table><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody><tr><td><code>close</code></td><td>Clicked on the close button, pressed <code>Esc</code>, or clicked outside the modal content</td></tr><tr><td><code>click:outside</code></td><td>Clicked outside the modal content</td></tr></tbody></table>`,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};
|