import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as v,a as d}from"./chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js";import{_ as i}from"./chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js";import{_ as h}from"./chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js";import{d as f,h as _,o as E,c as y,k as t,H as a,w as l,a as e,l as n,F as g,D as F,t as w,Q as m}from"./chunks/framework.3f630664.js";import{_ as A}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{F as D}from"./chunks/FwbDropdown.e54fafa7.js";import"./chunks/flatten.a0535777.js";import"./chunks/simplifyTailwindClasses.275301d3.js";import"./chunks/useFlowbiteThemable.013ea29e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/isArray.513c67aa.js";const T={class:"vp-raw"},V=t("span",{class:""},"Select theme:",-1),C={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},b=f({__name:"FlowbiteThemableExampleTabs",props:{tabsVariant:{type:String,default:"default"}},setup(u){const o=_("first"),p=_("blue");return(r,s)=>(E(),y("div",T,[V,t("div",C,[a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[0]||(s[0]=c=>p.value=c),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[1]||(s[1]=c=>p.value=c),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[2]||(s[2]=c=>p.value=c),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[3]||(s[3]=c=>p.value=c),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:p.value,"onUpdate:modelValue":s[4]||(s[4]=c=>p.value=c),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),a(n(h),{theme:p.value},{default:l(()=>[a(n(v),{modelValue:o.value,"onUpdate:modelValue":s[5]||(s[5]=c=>o.value=c),class:"p-5",variant:u.tabsVariant},{default:l(()=>[a(n(d),{name:"first",title:"First"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae? ")]),_:1}),a(n(d),{name:"second",title:"Second"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta. ")]),_:1}),a(n(d),{name:"third",title:"Third"},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem. ")]),_:1}),a(n(d),{name:"fourth",title:"Fourth",disabled:""},{default:l(()=>[e(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem. ")]),_:1})]),_:1},8,["modelValue","variant"])]),_:1},8,["theme"])]))}}),k={class:"vp-raw"},q={class:"flex align-center gap-2 flex-wrap"},B=f({__name:"FlowbiteThemableExampleButton",props:{theme:{type:String,default:"blue"}},setup(u){const o=["blue","green","red","pink","purple"];return(p,r)=>(E(),y("div",k,[t("div",q,[(E(),y(g,null,F(o,s=>a(n(h),{key:s,theme:s},{default:l(()=>[a(n(A),null,{default:l(()=>[e(w(s),1)]),_:2},1024)]),_:2},1032,["theme"])),64))])]))}}),x={class:"vp-raw"},P=t("span",{class:""},"Select theme:",-1),S={class:"grid xs:grid-cols-5 md:grid-cols-7 mb-5 mt-2"},$={class:"inline-flex align-center gap-2 flex-wrap"},U=f({__name:"FlowbiteThemableExampleDropdown",setup(u){const o=_("blue");return(p,r)=>(E(),y("div",x,[P,t("div",S,[a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[0]||(r[0]=s=>o.value=s),value:"blue"},{default:l(()=>[e(" Blue ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[1]||(r[1]=s=>o.value=s),value:"green"},{default:l(()=>[e(" Green ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[2]||(r[2]=s=>o.value=s),value:"pink"},{default:l(()=>[e(" Pink ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[3]||(r[3]=s=>o.value=s),value:"purple"},{default:l(()=>[e(" Purple ")]),_:1},8,["modelValue"]),a(n(i),{modelValue:o.value,"onUpdate:modelValue":r[4]||(r[4]=s=>o.value=s),value:"red"},{default:l(()=>[e(" Red ")]),_:1},8,["modelValue"])]),t("div",$,[a(n(h),{theme:o.value},{default:l(()=>[a(n(D),{text:"Dropdown"},{default:l(()=>[e(" Dropdown content... ")]),_:1})]),_:1},8,["theme"])])]))}}),I=m('

Vue Themable Configuration - Flowbite ​

You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)

WARNING

WIP, Do not use it in production

Tabs ​

',4),N=m(`
vue
<template>
  <flowbite-themable :theme="theme">
      <fwb-tabs :variant="variant">
        ...
      </fwb-tabs>
  </flowbite-themable>
</template>

<script setup>
import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
  <flowbite-themable :theme="theme">
      <fwb-tabs :variant="variant">
        ...
      </fwb-tabs>
  </flowbite-themable>
</template>

<script setup>
import { FwbTabs, FwbTab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>

variant: pills ​

`,3),R=t("hr",null,null,-1),L=t("h3",{id:"variant-underline",tabindex:"-1"},[e("variant: underline "),t("a",{class:"header-anchor",href:"#variant-underline","aria-label":'Permalink to "variant: underline"'},"​")],-1),G=t("hr",null,null,-1),O=t("hr",null,null,-1),W=t("h2",{id:"dropdown",tabindex:"-1"},[e("Dropdown "),t("a",{class:"header-anchor",href:"#dropdown","aria-label":'Permalink to "Dropdown"'},"​")],-1),j=m(`
vue
<template>
  <flowbite-themable :theme="theme">
      <fwb-dropdown>
        ...
      </fwb-dropdown>
  </flowbite-themable>
</template>

<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <fwb-dropdown>
        ...
      </fwb-dropdown>
  </flowbite-themable>
</template>

<script setup>
import { FwbDropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>

Button ​

`,2),H=m(`
vue
<template>
  <flowbite-themable :theme="theme">
      <fwb-button>
        ...
      </fwb-button>
  </flowbite-themable>
</template>

<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
  <flowbite-themable :theme="theme">
      <fwb-button>
        ...
      </fwb-button>
  </flowbite-themable>
</template>

<script setup>
import { FwbButton, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
`,1),cs=JSON.parse('{"title":"Vue Themable Configuration - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/flowbiteThemable/flowbiteThemable.md","filePath":"components/flowbiteThemable/flowbiteThemable.md"}'),J={name:"components/flowbiteThemable/flowbiteThemable.md"},is=Object.assign(J,{setup(u){return(o,p)=>(E(),y("div",null,[I,a(b),N,a(b,{"tabs-variant":"pills"}),R,L,G,a(b,{"tabs-variant":"underline"}),O,W,a(U),j,a(B),H]))}});export{cs as __pageData,is as default};