dist directory

docs/.vitepress/dist/assets/components_toggle.md.05a55234.lean.js

@@ -0,0 +1 @@
+import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as q,$ as v,o as y,c as i,a0 as w,a1 as B,k as b,n as f,l,t as T,h as E,H as a,Q as d}from"./chunks/framework.3f630664.js";const A="w-fit relative inline-flex items-center cursor-pointer",k='bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600',D="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300",V={lg:"w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6",md:"w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5",sm:"w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4"},x={red:"peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",green:"peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",purple:"peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",yellow:"peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400",teal:"peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",orange:"peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500"};function S(c){const s=u(()=>A),t=u(()=>k),n=u(()=>V[c.size.value]),e=u(()=>x[c.color.value]),g=u(()=>D);return{labelClasses:s,toggleSize:n,toggleClasses:t,toggleColor:e,toggleBallClasses:g}}const z=["disabled"],r=q({__name:"FwbToggle",props:{color:{default:""},disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1},size:{default:"md"}},emits:["update:modelValue"],setup(c,{emit:s}){const t=c,n=s,e=u({get(){return t.modelValue},set(m){n("update:modelValue",m)}}),{labelClasses:g,toggleSize:F,toggleClasses:_,toggleColor:o,toggleBallClasses:p}=S(v(t));return(m,C)=>(y(),i("label",{class:f(l(g))},[w(b("input",{"onUpdate:modelValue":C[0]||(C[0]=h=>e.value=h),disabled:m.disabled,class:"sr-only peer",type:"checkbox"},null,8,z),[[B,e.value]]),b("span",{class:f([l(_),l(F),l(o)])},null,2),b("span",{class:f(l(p))},T(m.label),3)],2))}}),P={class:"vp-raw"},I={__name:"FwbToggleExample",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",P,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},$={class:"vp-raw"},U={__name:"FwbToggleExampleChecked",setup(c){const s=E(!0);return(t,n)=>(y(),i("div",$,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),label:"Toggle me"},null,8,["modelValue"])]))}},N={class:"vp-raw flex justify-between flex-wrap gap-2"},R={__name:"FwbToggleExampleColors",setup(c){const s=E(!0),t=E(!0),n=E(!0),e=E(!0),g=E(!0),F=E(!0);return(_,o)=>(y(),i("div",N,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":o[0]||(o[0]=p=>s.value=p),label:"Red",color:"red"},null,8,["modelValue"]),a(l(r),{modelValue:t.value,"onUpdate:modelValue":o[1]||(o[1]=p=>t.value=p),label:"Green",color:"green"},null,8,["modelValue"]),a(l(r),{modelValue:n.value,"onUpdate:modelValue":o[2]||(o[2]=p=>n.value=p),label:"Purple",color:"purple"},null,8,["modelValue"]),a(l(r),{modelValue:e.value,"onUpdate:modelValue":o[3]||(o[3]=p=>e.value=p),label:"Yellow",color:"yellow"},null,8,["modelValue"]),a(l(r),{modelValue:g.value,"onUpdate:modelValue":o[4]||(o[4]=p=>g.value=p),label:"Teal",color:"teal"},null,8,["modelValue"]),a(l(r),{modelValue:F.value,"onUpdate:modelValue":o[5]||(o[5]=p=>F.value=p),label:"Orange",color:"orange"},null,8,["modelValue"])]))}},O={class:"vp-raw"},L={__name:"FwbToggleExampleDisabled",setup(c){const s=E(!1);return(t,n)=>(y(),i("div",O,[a(l(r),{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=e=>s.value=e),disabled:"",label:"Can't Toggle me"},null,8,["modelValue"])]))}},M={class:"vp-raw grid gap-3"},G={__name:"FwbToggleExampleSize",setup(c){return(s,t)=>(y(),i("div",M,[a(l(r),{label:"Small",size:"sm"}),a(l(r),{label:"Medium",size:"md"}),a(l(r),{label:"Large",size:"lg"})]))}},Y=d("",6),j=d("",2),H=d("",2),J=d("",2),Q=d("",2),K=d("",1),ss=JSON.parse('{"title":"Vue Toggle - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/toggle.md","filePath":"components/toggle.md"}'),W={name:"components/toggle.md"},ls=Object.assign(W,{setup(c){return(s,t)=>(y(),i("div",null,[Y,a(I),j,a(U),H,a(L),J,a(R),Q,a(G),K]))}});export{ss as __pageData,ls as default};