jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dist directory

Browse Source
This commit is contained in:
Jaroslav Drzik
2024-03-12 05:28:28 +01:00
parent a385e96520
commit a27c84b7a9
283 changed files with 24264 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/.vitepress/dist/404.html vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/app.8d65fb2d.js vendored Normal file
View File

@@ -0,0 +1 @@
import{aj as i,s,al as u,am as c,an as l,ao as d,ap as f,aq as m,ar as h,as as A,at as y,au as g,av as v,d as w,u as P,j as C,y as R,aw as _,ax as E,ay as b}from"./chunks/framework.3f630664.js";import{t as r}from"./chunks/theme.3359535a.js";const j={extends:r,Layout:()=>i(r.Layout,null,{})};function p(e){if(e.extends){const t=p(e.extends);return{...t,...e,async enhanceApp(a){t.enhanceApp&&await t.enhanceApp(a),e.enhanceApp&&await e.enhanceApp(a)}}}return e}const o=p(j),x=w({name:"VitePressApp",setup(){const{site:e}=P();return C(()=>{R(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),_(),E(),b(),o.setup&&o.setup(),()=>i(o.Layout)}});async function D(){const e=T(),t=L();t.provide(c,e);const a=l(e.route);return t.provide(d,a),t.component("Content",f),t.component("ClientOnly",m),Object.defineProperties(t.config.globalProperties,{$frontmatter:{get(){return a.frontmatter.value}},$params:{get(){return a.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:t,router:e,siteData:h}),{app:t,router:e,data:a}}function L(){return A(x)}function T(){let e=s,t;return y(a=>{let n=g(a);return n?(e&&(t=n),(e||t===n)&&(n=n.replace(/\.js$/,".lean.js")),s&&(e=!1),v(()=>import(n),[])):null},o.NotFound)}s&&D().then(({app:e,router:t,data:a})=>{t.go().then(()=>{u(t.route,a.site),e.mount("#app")})});export{D as createApp};

1
docs/.vitepress/dist/assets/chunks/FlowbiteThemable.vue_vue_type_script_setup_true_lang.e3bec3bf.js vendored Normal file
View File

@@ -0,0 +1 @@
import{F as t}from"./useFlowbiteThemable.013ea29e.js";import{d as r,U as s,a2 as a,r as p}from"./framework.3f630664.js";const l=r({__name:"FlowbiteThemable",props:{theme:{default:"blue"}},setup(e){return s(t,a(e,"theme")),(o,n)=>p(o.$slots,"default")}});export{l as _};

1
docs/.vitepress/dist/assets/chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js vendored Normal file
View File

@@ -0,0 +1 @@
import{d as r,o,c as a,r as s,n as t}from"./framework.3f630664.js";const n=["href"],i=r({__name:"FwbA",props:{href:{default:""},color:{default:"text-primary-600 dark:text-primary-500"}},setup(l){return(e,c)=>(o(),a("a",{href:e.href,class:t([e.color,"inline-flex items-center hover:underline"])},[s(e.$slots,"default")],10,n))}});export{i as _};

1
docs/.vitepress/dist/assets/chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/FwbDropdown.e54fafa7.js vendored Normal file
View File

@@ -0,0 +1 @@
import{x as k,h as r,g,O as y,d as S,a2 as $,o as m,c as v,k as u,H as a,w as n,r as h,n as N,l as _,N as D,e as T,T as B,a as I,t as R,p as V,m as z,_ as F}from"./framework.3f630664.js";import{o as H}from"./index.b15c605d.js";import{_ as M}from"./FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as w}from"./FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{c as O}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const P="absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700",l=8,j={bottom:"",left:"top-0",right:"top-0",top:""},E={bottom(e){return`bottom: -${e.height+l}px;`},left(e){return`left: -${e.width+l}px;`},right(e){return`right: -${e.width+l}px;`},top(e){return`top: -${e.height+l}px;`}};function G(e){k(e.visible,o=>{o&&y(()=>c())});const t=r(""),c=()=>{var s;const o=(s=e.contentRef.value)==null?void 0:s.getBoundingClientRect();if(!o){t.value="";return}t.value=E[e.placement.value](o)};return{contentClasses:g(()=>O(P,j[e.placement.value])),contentStyles:t}}const q=e=>(V("data-v-e40b6242"),e=e(),z(),e),A={class:"inline-flex items-center"},J=q(()=>u("svg",{class:"w-4 h-4 ml-2",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[u("path",{d:"M19 9l-7 7-7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1)),K=S({__name:"FwbDropdown",props:{placement:{default:"bottom"},text:{default:""},transition:{default:""}},setup(e){const t=r(!1),c=()=>t.value=!1,d=()=>t.value=!t.value,o=e,s={bottom:"to-bottom",left:"to-left",right:"to-right",top:"to-top"},C=g(()=>o.transition===null?s[o.placement]:o.transition),p=r(),f=r(),{contentClasses:b,contentStyles:x}=G({placement:$(o,"placement"),visible:t,contentRef:p});return H(f,()=>{t.value&&(t.value=!1)}),(i,L)=>(m(),v("div",{ref_key:"wrapper",ref:f,class:"inline-flex relative"},[u("div",A,[a(w,{onClick:d},{default:n(()=>[h(i.$slots,"trigger",{},()=>[a(M,null,{suffix:n(()=>[J]),default:n(()=>[I(R(i.text)+" ",1)]),_:1})],!0)]),_:3})]),a(B,{name:C.value},{default:n(()=>[t.value?(m(),v("div",{key:0,ref_key:"content",ref:p,class:N([_(b)]),style:D(_(x))},[a(w,{onClick:c},{default:n(()=>[h(i.$slots,"default",{},void 0,!0)]),_:3})],6)):T("",!0)]),_:3},8,["name"])],512))}}),Z=F(K,[["__scopeId","data-v-e40b6242"]]);export{Z as F};

1
docs/.vitepress/dist/assets/chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js vendored Normal file
View File

@@ -0,0 +1 @@
import{g as p,d as y,$ as x,o as a,c as l,n as f,l as c,t as h,e as u,k as m,r as i,a0 as C,ai as S,L as $,a7 as w}from"./framework.3f630664.js";import{a as B}from"./index.b15c605d.js";import{t as b}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const o={Success:"success",Error:"error"},I="block mb-2 text-sm font-medium",M="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",V="cursor-not-allowed bg-gray-100",E={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},q="bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",z="bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500";function D(t){const r=p(()=>{const s=t.validationStatus.value,n=s===o.Success?q:s===o.Error?z:"";return b(M,n,E[t.size.value],t.disabled.value?V:"")}),d=p(()=>{const s=t.validationStatus.value,n=s===o.Success?"text-green-700 dark:text-green-500":s===o.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return b(I,n)});return{inputClasses:r,labelClasses:d}}const L={class:"flex relative"},N={key:0,class:"w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"},R=["disabled","type","required"],F={key:1,class:"absolute right-2.5 bottom-2.5"},P={key:2,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},A=y({__name:"FwbInput",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{default:""},required:{type:Boolean,default:!1},size:{default:"md"},type:{default:"text"},validationStatus:{default:void 0}},setup(t){const r=t,d=B(r,"modelValue"),{inputClasses:s,labelClasses:n}=D(x(r)),k=p(()=>b("mt-2 text-sm",r.validationStatus===o.Success?"text-green-600 dark:text-green-500":"",r.validationStatus===o.Error?"text-red-600 dark:text-red-500":""));return(e,g)=>(a(),l("div",null,[e.label?(a(),l("label",{key:0,class:f(c(n))},h(e.label),3)):u("",!0),m("div",L,[e.$slots.prefix?(a(),l("div",N,[i(e.$slots,"prefix")])):u("",!0),C(m("input",$(e.$attrs,{"onUpdate:modelValue":g[0]||(g[0]=v=>w(d)?d.value=v:null),disabled:e.disabled,type:e.type,required:e.required,class:[c(s),e.$slots.prefix?"pl-10":""]}),null,16,R),[[S,c(d)]]),e.$slots.suffix?(a(),l("div",F,[i(e.$slots,"suffix")])):u("",!0)]),e.$slots.validationMessage?(a(),l("p",{key:1,class:f(k.value)},[i(e.$slots,"validationMessage")],2)):u("",!0),e.$slots.helper?(a(),l("p",P,[i(e.$slots,"helper")])):u("",!0)]))}});export{A as _};

1
docs/.vitepress/dist/assets/chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js vendored Normal file
View File

@@ -0,0 +1 @@
import{c as f}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as i,d as u,o as t,c as a,r as o,n as d,l as c,$ as m,e as n}from"./framework.3f630664.js";import{s as p}from"./simplifyTailwindClasses.275301d3.js";const b="overflow-hidden w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white";function g(){return{containerClasses:i(()=>f(b))}}const B=u({__name:"FwbListGroup",setup(e){const{containerClasses:r}=g();return(l,s)=>(t(),a("ul",{class:d(c(r))},[o(l.$slots,"default")],2))}}),y="inline-flex items-center w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600",C="block w-full px-4 py-2 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white",h="bg-gray-100 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400";function k(e){return{itemClasses:i(()=>p(y,e.disabled.value?h:"",!e.disabled.value&&e.hover.value?C:""))}}const v={key:0,class:"mr-2"},_={key:1,class:"ml-2"},G=u({__name:"FwbListGroupItem",props:{hover:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(e){const r=e,{itemClasses:l}=k(m(r));return(s,w)=>(t(),a("li",{class:d(c(l))},[s.$slots.prefix?(t(),a("div",v,[o(s.$slots,"prefix")])):n("",!0),o(s.$slots,"default"),s.$slots.suffix?(t(),a("div",_,[o(s.$slots,"suffix")])):n("",!0)],2))}});export{B as _,G as a};

1
docs/.vitepress/dist/assets/chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js vendored Normal file
View File

@@ -0,0 +1 @@
import{u as o}from"./useMergeClasses.5cec3a4e.js";import{d as l,g as n,o as r,c,r as m,n as p}from"./framework.3f630664.js";const u="mb-3 last:mb-0 text-gray-900 dark:text-white leading-normal",_=l({__name:"FwbP",props:{class:{default:""}},setup(s){const e=s,a=n(()=>o([u,e.class]));return(t,d)=>(r(),c("p",{class:p(a.value)},[m(t.$slots,"default")],2))}});export{_};

1
docs/.vitepress/dist/assets/chunks/FwbRadio.vue_vue_type_script_setup_true_lang.a8d8cba7.js vendored Normal file
View File

@@ -0,0 +1 @@
import{d as f,g as a,o as g,c as p,a0 as b,a4 as y,k as r,n as o,t as v,r as k}from"./framework.3f630664.js";import{t as C}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const V={class:"flex w-[100%] items-center"},w=["disabled","name","value"],x="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600",B="m-2 mr-0 text-sm font-medium text-gray-900 dark:text-gray-300",D=f({__name:"FwbRadio",props:{modelValue:{default:""},name:{default:""},value:{default:""},label:{default:""},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(d,{emit:n}){const s=d,u=n,t=a({get(){return s.modelValue},set(e){u("update:modelValue",e)}}),i=a(()=>x),m=a(()=>C(B,s.disabled&&"text-gray-400 dark:text-gray-500"));return(e,l)=>(g(),p("label",V,[b(r("input",{"onUpdate:modelValue":l[0]||(l[0]=c=>t.value=c),type:"radio",disabled:e.disabled,name:e.name,value:e.value,class:o(i.value)},null,10,w),[[y,t.value]]),r("span",{class:o(m.value)},v(e.label),3),k(e.$slots,"default")]))}});export{D as _};

5
docs/.vitepress/dist/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js vendored Normal file
View File

@@ -0,0 +1 @@
import{c as r}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as s,d as i,$ as c,o as C,c as u,n as w,l as h,k as t}from"./framework.3f630664.js";const p={0:"w-0 h-0",.5:"w-0.5 h-0.5",1:"w-1 h-1",1.5:"w-1.5 h-1.5",10:"w-10 h-10",11:"w-11 h-11",12:"w-12 h-12",2:"w-2 h-2",2.5:"w-2.5 h-2.5",3:"w-3 h-3",4:"w-4 h-4",5:"w-5 h-5",6:"w-6 h-6",7:"w-7 h-7",8:"w-8 h-8",9:"w-9 h-9"},f={blue:"fill-blue-600",gray:"fill-gray-600 dark:fill-gray-300",green:"fill-green-500",pink:"fill-pink-600",purple:"fill-purple-600",red:"fill-red-600",white:"fill-white",yellow:"fill-yellow-400"};function d(e){const l=s(()=>p[e.size.value]),n=s(()=>f[e.color.value]),a=s(()=>"text-gray-200 dark:text-gray-600"),o=s(()=>"animate-spin");return{spinnerClasses:s(()=>r(o.value,a.value,n.value,l.value))}}const m=t("path",{d:"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",fill:"currentColor"},null,-1),_=t("path",{d:"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",fill:"currentFill"},null,-1),g=[m,_],x=i({__name:"FwbSpinner",props:{color:{default:"blue"},size:{default:"4"}},setup(e){const l=e,{spinnerClasses:n}=d(c(l));return(a,o)=>(C(),u("svg",{class:w(h(n)),fill:"none",role:"status",viewBox:"0 0 100 101",xmlns:"http://www.w3.org/2000/svg"},g,2))}});export{x as _};

1
docs/.vitepress/dist/assets/chunks/FwbTabs.vue_vue_type_script_setup_true_lang.ebf7e19d.js vendored Normal file
View File

@@ -0,0 +1 @@
import{d as C,l,o,c as i,r as y,e as A,F as k,a0 as $,ah as L,M as v,g as d,a2 as _,k as b,t as D,n as T,U as u,Y as J,D as K,a3 as R,ac as M,b as P}from"./framework.3f630664.js";import{f as q}from"./flatten.a0535777.js";import{t as z}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as g}from"./simplifyTailwindClasses.275301d3.js";import{u as W}from"./useFlowbiteThemable.013ea29e.js";const E="flowbite-tab-activate-func-injection",B="flowbite-tab-active-name-injection",N="flowbite-tab-style-injection",S="flowbite-tab-visibility-directive-injection",U={key:0},G={key:1},ie=C({__FLOWBITE_TAB__:!0,__name:"FwbTab",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1}},setup(e){const t=v(B,""),r=v(S,"if");return(a,s)=>l(r)==="if"?(o(),i(k,{key:0},[l(t)===e.name?(o(),i("div",U,[y(a.$slots,"default")])):A("",!0)],64)):l(r)==="show"?$((o(),i("div",G,[y(a.$slots,"default")],512)),[[L,l(t)===e.name]]):A("",!0)}});function H(e){const t=d(()=>z("flex flex-wrap font-medium text-center text-gray-500 dark:text-gray-400 text-sm",e.variant==="underline"&&"-mb-px",e.variant==="default"&&"border-b border-gray-200 dark:border-gray-700"));return{divClasses:d(()=>e.variant==="underline"?"border-b border-gray-200 dark:border-gray-700 font-medium text-center text-gray-500 dark:text-gray-400 text-sm":""),ulClasses:t}}const Q={default:"cursor-pointer inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},X={default:"cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300",active:"cursor-pointer inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500",disabled:"inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"},Z={default:"cursor-pointer inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",active:"cursor-pointer inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active",disabled:"inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"};function ee(e){const t=W();return{tabClasses:d(()=>{const a=t.isActive.value,s=e.active.value?"active":e.disabled.value?"disabled":"default";return e.variant==="default"?g(Q[s],(a&&s)==="active"?t.textClasses.value:""):e.variant==="underline"?g(X[s],(a&&s)==="active"?[t.borderClasses.value,t.textClasses.value]:""):e.variant==="pills"?g(Z[s],(a&&s)==="active"?[t.backgroundClasses.value,"text-white"]:""):""})}}const te=C({__name:"FwbTabPane",props:{name:{type:String,required:!0},title:{type:String,default:""},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},setup(e){const t=e,r=v(N);r||console.warn("you can't use Tab outside of Tabs component. No tab style injection found");const a=v(E);a||console.warn("you can't use Tab outside of Tabs component. No tab activate injection found");const s=()=>{if(!t.disabled){if(!a)return console.warn("no onActivate");a(t.name)}},{tabClasses:f}=ee({active:_(t,"active"),disabled:_(t,"disabled"),variant:r});return(V,p)=>(o(),i("li",null,[b("div",{class:T(l(f)),onClick:s},D(e.title),3)]))}}),de=C({inheritAttrs:!1,__name:"FwbTabs",props:{variant:{default:"default"},modelValue:{default:""},directive:{default:"if"}},emits:["update:modelValue","click:pane"],setup(e,{emit:t}){const r=e,a=t,{ulClasses:s,divClasses:f}=H(r);u(N,r.variant);const p=J().default,F=d(()=>p?q(p()).filter(n=>n.type.__FLOWBITE_TAB__):[]),m=d({get:()=>r.modelValue,set:n=>a("update:modelValue",n)});u(B,m),u(S,_(r,"directive"));const j=n=>{m.value=n},Y=()=>{a("click:pane")};return u(E,j),(n,ae)=>(o(),i(k,null,[b("div",{class:T(l(f))},[b("ul",{class:T(l(s))},[(o(!0),i(k,null,K(F.value,(c,O)=>{var x,h,w,I;return o(),P(te,{key:O,active:m.value===((x=c.props)==null?void 0:x.name),disabled:(h=c.props)==null?void 0:h.disabled,name:(w=c.props)==null?void 0:w.name,title:(I=c.props)==null?void 0:I.title,onClick:Y},null,8,["active","disabled","name","title"])}),128))],2)],2),b("div",R(M(n.$attrs)),[y(n.$slots,"default")],16)],64))}});export{de as _,ie as a};

1
docs/.vitepress/dist/assets/chunks/FwbToast.vue_vue_type_script_setup_true_lang.8ed93404.js vendored Normal file
View File

@@ -0,0 +1 @@
import{s as f}from"./simplifyTailwindClasses.275301d3.js";import{g,d as x,Z as L,$ as k,o,b as _,w as B,r as m,n as u,l as v,I as $,h as z,c,e as h,k as i}from"./framework.3f630664.js";import{u as M}from"./useFlowbiteThemable.013ea29e.js";const T={danger:"text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",empty:"",success:"text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",warning:"text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200"},A={center:"items-center",end:"items-end",start:"items-start"},C="flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",b="text-sm font-normal";function S(e){const n=g(()=>T[e.type.value]),r=g(()=>{const t=A[e.alignment.value];return e.divide.value?f(C,"dark:divide-gray-700 divide-x divide-gray-200",t):f(C,t)}),s=g(()=>e.type.value!=="empty"&&e.divide.value?f(b,"pl-3"):b);return{typeClasses:n,wrapperClasses:r,contentClasses:s}}function F(e){var a;const{backgroundClasses:n,borderClasses:r,disabledClasses:s,focusClasses:t,hoverClasses:d,isActive:y,textClasses:p}=M((a=e.theme)==null?void 0:a.value);return{classes:g(()=>{if(!y.value)return"";const l=[];return e.apply.value.includes("text")&&l.push(p.value),e.apply.value.includes("border")&&l.push(r.value),e.apply.value.includes("background")&&l.push(n.value),e.apply.value.includes("hover")&&l.push(d.value),e.apply.value.includes("disabled")&&l.push(s.value),e.apply.value.includes("focus")&&l.push(t.value),l.join(" ")})}}const V=x({__name:"FlowbiteThemableChild",props:{apply:{type:Array,required:!0},tag:{type:String,default:"div"},theme:{type:String,default:void 0}},setup(e){const n=L(),r=e,{classes:s}=F(k(r)),t=g(()=>n.class||"");return(d,y)=>(o(),_($(e.tag),{class:u(v(f)(t.value,v(s)))},{default:B(()=>[m(d.$slots,"default")]),_:3},8,["class"]))}}),j={key:1,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},N=i("path",{"clip-rule":"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z","fill-rule":"evenodd"},null,-1),q=[N],D={key:2,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},E=i("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"},null,-1),H=[E],I={key:3,"aria-hidden":"true",class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R=i("path",{"clip-rule":"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z","fill-rule":"evenodd"},null,-1),W=[R],Z=i("span",{class:"sr-only"},"Close",-1),G=i("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[i("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),J=[Z,G],Q=x({__name:"FwbToast",props:{type:{type:String,default:"empty"},alignment:{type:String,default:"center"},closable:{type:Boolean,default:!1},divide:{type:Boolean,default:!1}},emits:["close"],setup(e,{emit:n}){const r=e,s=z(!0),t=n,{typeClasses:d,wrapperClasses:y,contentClasses:p}=S(k(r)),w=()=>{t("close"),s.value=!1};return(a,l)=>s.value?(o(),c("div",{key:0,id:"toast-default",class:u(v(y)),role:"alert"},[e.type!=="empty"||a.$slots.icon?(o(),_(V,{key:0,apply:["background","text"],class:u(["inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg",v(d)])},{default:B(()=>[a.$slots.icon?m(a.$slots,"icon",{key:0,class:u({"ml-3":e.type!=="empty"})}):e.type==="success"?(o(),c("svg",j,q)):e.type==="danger"?(o(),c("svg",D,H)):e.type==="warning"?(o(),c("svg",I,W)):h("",!0)]),_:3},8,["class"])):h("",!0),i("div",{class:u([v(p),{"ml-3":a.$slots.icon||e.type!=="empty"}])},[m(a.$slots,"default")],2),e.closable?(o(),c("button",{key:1,"aria-label":"Close",class:"border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",type:"button",onClick:w},J)):h("",!0)],2)):h("",!0)}});export{Q as _};

1
docs/.vitepress/dist/assets/chunks/flatten.a0535777.js vendored Normal file
View File

@@ -0,0 +1 @@
import{a,F as p,ad as y}from"./framework.3f630664.js";function i(f,t=!0,n=[]){return f.forEach(r=>{if(r!==null){if(typeof r!="object"){(typeof r=="string"||typeof r=="number")&&n.push(a(String(r)));return}if(Array.isArray(r)){i(r,t,n);return}if(r.type===p){if(r.children===null)return;Array.isArray(r.children)&&i(r.children,t,n)}else r.type!==y&&n.push(r)}}),n}export{i as f};

29
docs/.vitepress/dist/assets/chunks/framework.3f630664.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/index.6b4d4439.js vendored Normal file
View File

@@ -0,0 +1 @@
import{a7 as p,h as l,l as g,g as m,ae as y,j as h,O as w,af as T,ag as S}from"./framework.3f630664.js";var c;const v=typeof window<"u",D=e=>typeof e<"u",F=e=>typeof e=="function",N=e=>typeof e=="string",O=()=>{};v&&((c=window==null?void 0:window.navigator)!=null&&c.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function f(e){return typeof e=="function"?e():g(e)}function R(e){return e}function _(e,u){var s;if(typeof e=="number")return e+u;const o=((s=e.match(/^-?[0-9]+\.?[0-9]*/))==null?void 0:s[0])||"",t=e.slice(o.length),n=parseFloat(o)+u;return Number.isNaN(n)?e:n+t}function b(e){return T()?(S(e),!0):!1}function x(e){return typeof e=="function"?m(e):l(e)}function A(e,u=!0){y()?h(e):u?e():w(e)}function I(e,u,s={}){const{immediate:o=!0}=s,t=l(!1);let n=null;function i(){n&&(clearTimeout(n),n=null)}function r(){t.value=!1,i()}function a(...d){i(),t.value=!0,n=setTimeout(()=>{t.value=!1,n=null,e(...d)},f(u))}return o&&(t.value=!0,v&&a()),b(r),{isPending:t,start:a,stop:r}}function M(e=!1,u={}){const{truthyValue:s=!0,falsyValue:o=!1}=u,t=p(e),n=l(e);function i(r){if(arguments.length)return n.value=r,n.value;{const a=f(s);return n.value=n.value===a?f(o):a,n.value}}return t?i:[n,i]}export{N as a,R as b,D as c,F as d,_ as e,x as f,b as g,I as h,v as i,O as n,f as r,A as t,M as u};

1
docs/.vitepress/dist/assets/chunks/index.b15c605d.js vendored Normal file
View File

@@ -0,0 +1 @@
import{i as V,a as B,n as y,b as j,c as F,r as W,d as q,e as G,t as R,f as U,g as M}from"./index.6b4d4439.js";import{h as g,x as P,g as J,ae as H,y as A}from"./framework.3f630664.js";function O(n){var t;const e=W(n);return(t=e==null?void 0:e.$el)!=null?t:e}const E=V?window:void 0;function _(...n){let t,e,s,a;if(B(n[0])?([e,s,a]=n,t=E):[t,e,s,a]=n,!t)return y;let l=y;const d=P(()=>O(t),i=>{l(),i&&(i.addEventListener(e,s,a),l=()=>{i.removeEventListener(e,s,a),l=y})},{immediate:!0,flush:"post"}),r=()=>{d(),l()};return M(r),r}function ue(n,t,e={}){const{window:s=E,ignore:a,capture:l=!0,detectIframe:d=!1}=e;if(!s)return;const r=g(!0);let i;const c=u=>{s.clearTimeout(i);const o=O(n);!o||o===u.target||u.composedPath().includes(o)||!r.value||t(u)},h=u=>a&&a.some(o=>{const m=O(o);return m&&(u.target===m||u.composedPath().includes(m))}),b=[_(s,"click",c,{passive:!0,capture:l}),_(s,"pointerdown",u=>{const o=O(n);r.value=!!o&&!u.composedPath().includes(o)&&!h(u)},{passive:!0}),_(s,"pointerup",u=>{if(u.button===0){const o=u.composedPath();u.composedPath=()=>o,i=s.setTimeout(()=>c(u),50)}},{passive:!0}),d&&_(s,"blur",u=>{var o;const m=O(n);((o=document.activeElement)==null?void 0:o.tagName)==="IFRAME"&&!(m!=null&&m.contains(document.activeElement))&&t(u)})].filter(Boolean);return()=>b.forEach(u=>u())}function D(n,t=!1){const e=g(),s=()=>e.value=!!n();return s(),R(s,t),e}function v(n,t={}){const{window:e=E}=t,s=D(()=>e&&"matchMedia"in e&&typeof e.matchMedia=="function");let a;const l=g(!1),d=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",r):a.removeListener(r))},r=()=>{s.value&&(d(),a=e.matchMedia(U(n).value),l.value=a.matches,"addEventListener"in a?a.addEventListener("change",r):a.addListener(r))};return A(r),M(()=>d()),l}const ie={sm:640,md:768,lg:1024,xl:1280,"2xl":1536};var K=Object.defineProperty,x=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable,S=(n,t,e)=>t in n?K(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,Y=(n,t)=>{for(var e in t||(t={}))z.call(t,e)&&S(n,e,t[e]);if(x)for(var e of x(t))X.call(t,e)&&S(n,e,t[e]);return n};function oe(n,t={}){function e(r,i){let c=n[r];return i!=null&&(c=G(c,i)),typeof c=="number"&&(c=`${c}px`),c}const{window:s=E}=t;function a(r){return s?s.matchMedia(r).matches:!1}const l=r=>v(`(min-width: ${e(r)})`,t),d=Object.keys(n).reduce((r,i)=>(Object.defineProperty(r,i,{get:()=>l(i),enumerable:!0,configurable:!0}),r),{});return Y({greater(r){return v(`(min-width: ${e(r,.1)})`,t)},greaterOrEqual:l,smaller(r){return v(`(max-width: ${e(r,-.1)})`,t)},smallerOrEqual(r){return v(`(max-width: ${e(r)})`,t)},between(r,i){return v(`(min-width: ${e(r)}) and (max-width: ${e(i,-.1)})`,t)},isGreater(r){return a(`(min-width: ${e(r,.1)})`)},isGreaterOrEqual(r){return a(`(min-width: ${e(r)})`)},isSmaller(r){return a(`(max-width: ${e(r,-.1)})`)},isSmallerOrEqual(r){return a(`(max-width: ${e(r)})`)},isInBetween(r,i){return a(`(min-width: ${e(r)}) and (max-width: ${e(i,-.1)})`)}},d)}function Z(n){return JSON.parse(JSON.stringify(n))}const N=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},L="__vueuse_ssr_handlers__";N[L]=N[L]||{};var Q;(function(n){n.UP="UP",n.RIGHT="RIGHT",n.DOWN="DOWN",n.LEFT="LEFT",n.NONE="NONE"})(Q||(Q={}));var k=Object.defineProperty,T=Object.getOwnPropertySymbols,ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable,C=(n,t,e)=>t in n?k(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,ne=(n,t)=>{for(var e in t||(t={}))ee.call(t,e)&&C(n,e,t[e]);if(T)for(var e of T(t))te.call(t,e)&&C(n,e,t[e]);return n};const re={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};ne({linear:j},re);function le(n,t,e,s={}){var a,l,d;const{clone:r=!1,passive:i=!1,eventName:c,deep:h=!1,defaultValue:b}=s,f=H(),u=e||(f==null?void 0:f.emit)||((a=f==null?void 0:f.$emit)==null?void 0:a.bind(f))||((d=(l=f==null?void 0:f.proxy)==null?void 0:l.$emit)==null?void 0:d.bind(f==null?void 0:f.proxy));let o=c;t||(t="modelValue"),o=c||o||`update:${t.toString()}`;const m=p=>r?q(r)?r(p):Z(p):p,$=()=>F(n[t])?m(n[t]):b;if(i){const p=$(),I=g(p);return P(()=>n[t],w=>I.value=m(w)),P(I,w=>{(w!==n[t]||h)&&u(o,w)},{deep:h}),I}else return J({get(){return $()},set(p){u(o,p)}})}export{le as a,ie as b,ue as o,oe as u};

1
docs/.vitepress/dist/assets/chunks/isArray.513c67aa.js vendored Normal file
View File

@@ -0,0 +1 @@
var r=Array.isArray;const a=r;export{a as i};

1
docs/.vitepress/dist/assets/chunks/simplifyTailwindClasses.275301d3.js vendored Normal file
View File

@@ -0,0 +1 @@
const d={border:t=>t.substring(0,t.lastIndexOf("-"))},u=(t,e=d)=>{const n=Object.keys(e).find(r=>t.includes(r));return n?e[n](t):t.substring(0,t.indexOf("-"))};function T(...t){return t.filter(e=>e).reduce((e,i)=>{const n=Array.isArray(i)?Array.from(i).map(s=>s.split(" ")).flat():i.split(" "),r=n.map(s=>u(s)),a=r.filter(s=>!e.types.includes(s)),c=[...r.filter(s=>e.types.includes(s)),...a],l=[...new Set([...e.types,...c])],f=l.map(s=>{if(c.includes(s)){const p=r.indexOf(s);if(p>=0)return n[p]||""}const o=e.types.indexOf(s);return o>=0&&e.classes[o]||""}).filter(s=>!!s);return{types:l,classes:f}},{types:[],classes:[]}).classes.join(" ")}export{T as s};

1
docs/.vitepress/dist/assets/chunks/theme.3359535a.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/chunks/useFlowbiteThemable.013ea29e.js vendored Normal file
View File

@@ -0,0 +1 @@
import{M as c,h as i,g as r}from"./framework.3f630664.js";const p="flowbite-themable-injection-key",d={blue:{background:"bg-blue-700 dark:bg-blue-600",disabled:"",hover:"hover:bg-blue-800 dark:hover:bg-blue-700",text:"text-blue-600 dark:text-blue-500",border:"border-blue-600 dark:border-blue-500",focus:"focus:ring-blue-300 dark:focus:ring-blue-800"},green:{background:"bg-green-700 dark:bg-green-600",disabled:"",hover:"hover:bg-green-800 dark:hover:bg-green-700",text:"text-green-600 dark:text-green-500",border:"border-green-600 dark:border-green-500",focus:"focus:ring-green-300 dark:focus:ring-green-800"},pink:{background:"bg-pink-700 dark:bg-pink-600",disabled:"",hover:"hover:bg-pink-800 dark:hover:bg-pink-700",text:"text-pink-600 dark:text-pink-500",border:"border-pink-600 dark:border-pink-500",focus:"focus:ring-pink-300 dark:focus:ring-pink-900"},purple:{background:"bg-purple-700 dark:bg-purple-600",disabled:"",hover:"hover:bg-purple-800 dark:hover:bg-purple-700",text:"text-purple-600 dark:text-purple-500",border:"border-purple-600 dark:border-purple-500",focus:"focus:ring-purple-300 dark:focus:ring-purple-900"},red:{background:"bg-red-700 dark:bg-red-600",disabled:"",hover:"hover:bg-red-800 dark:hover:bg-red-700",text:"text-red-600 dark:text-red-500",border:"border-red-600 dark:border-red-500",focus:"focus:ring-red-300 dark:focus:ring-red-900"}};function f(a){const o=c(p,i(null)),e=r(()=>a||o.value),u=r(()=>!!(o!=null&&o.value)),b=r(()=>e.value?d[e.value].background:""),s=r(()=>e.value?d[e.value].border:""),l=r(()=>(o==null?void 0:o.value)||void 0),n=r(()=>e.value?d[e.value].disabled:""),t=r(()=>e.value?d[e.value].focus:""),g=r(()=>e.value?d[e.value].hover:""),k=r(()=>e.value?d[e.value].text:"");return{backgroundClasses:b,borderClasses:s,color:l,disabledClasses:n,focusClasses:t,hoverClasses:g,isActive:u,textClasses:k}}export{p as F,f as u};

1
docs/.vitepress/dist/assets/chunks/useMergeClasses.5cec3a4e.js vendored Normal file
View File

@@ -0,0 +1 @@
import{t as s}from"./FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";const t=e=>s(e);export{t as u};

1
docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as m}from"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{d as _,o as s,b as i,w as t,H as r,a as p,l as n,c as f}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";const u=_({__name:"SlotListenerExample",setup(a){const e=()=>{console.log("onClick from slot-listener")},o=()=>{console.log("onMouseenter from slot-listener")},c=()=>{console.log("onMouseleave from slot-listener")};return(L,N)=>(s(),i(n(m),{onClick:e,onMouseleave:c,onMouseenter:o},{default:t(()=>[r(n(l),null,{default:t(()=>[p("HELLO")]),_:1})]),_:1}))}}),U=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"components/PLAYGROUND/PLAYGROUND.md","filePath":"components/PLAYGROUND/PLAYGROUND.md"}'),d={name:"components/PLAYGROUND/PLAYGROUND.md"},Y=Object.assign(d,{setup(a){return(e,o)=>(s(),f("div",null,[r(u)]))}});export{U as __pageData,Y as default};

1
docs/.vitepress/dist/assets/components_PLAYGROUND_PLAYGROUND.md.69e01489.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as m}from"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import{d as _,o as s,b as i,w as t,H as r,a as p,l as n,c as f}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";const u=_({__name:"SlotListenerExample",setup(a){const e=()=>{console.log("onClick from slot-listener")},o=()=>{console.log("onMouseenter from slot-listener")},c=()=>{console.log("onMouseleave from slot-listener")};return(L,N)=>(s(),i(n(m),{onClick:e,onMouseleave:c,onMouseenter:o},{default:t(()=>[r(n(l),null,{default:t(()=>[p("HELLO")]),_:1})]),_:1}))}}),U=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"components/PLAYGROUND/PLAYGROUND.md","filePath":"components/PLAYGROUND/PLAYGROUND.md"}'),d={name:"components/PLAYGROUND/PLAYGROUND.md"},Y=Object.assign(d,{setup(a){return(e,o)=>(s(),f("div",null,[r(u)]))}});export{U as __pageData,Y as default};

515
docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

383
docs/.vitepress/dist/assets/components_alert.md.255adf89.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_alert.md.255adf89.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

319
docs/.vitepress/dist/assets/components_avatar.md.8db14583.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_avatar.md.8db14583.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

169
docs/.vitepress/dist/assets/components_badge.md.ffb613ab.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_badge.md.ffb613ab.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

127
docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_breadcrumb.md.e0d619ba.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
docs/.vitepress/dist/assets/components_button-group.md.39681d07.js vendored Normal file
View File

@@ -0,0 +1,59 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r('<h1 id="vue-button-group-flowbite" tabindex="-1">Vue Button Group - Flowbite <a class="header-anchor" href="#vue-button-group-flowbite" aria-label="Permalink to &quot;Vue Button Group - Flowbite&quot;">​</a></h1><h4 id="button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" tabindex="-1">Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line <a class="header-anchor" href="#button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" aria-label="Permalink to &quot;Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line&quot;">​</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/button-group/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/button-group/</a></p></div><p>The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.</p><h2 id="basic-example" tabindex="-1">Basic example <a class="header-anchor" href="#basic-example" aria-label="Permalink to &quot;Basic example&quot;">​</a></h2>',6),v=r(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;Button Default&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;purple&quot;</span><span style="color:#E1E4E8;">&gt;Button Purple&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;alternative&quot;</span><span style="color:#E1E4E8;">&gt;Button Alternative&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;red&quot;</span><span style="color:#E1E4E8;">&gt;Button Red&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButtonGroup, FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;Button Default&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;purple&quot;</span><span style="color:#24292E;">&gt;Button Purple&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;alternative&quot;</span><span style="color:#24292E;">&gt;Button Alternative&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;red&quot;</span><span style="color:#24292E;">&gt;Button Red&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButtonGroup, FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="buttons-with-icons" tabindex="-1">Buttons with icons <a class="header-anchor" href="#buttons-with-icons" aria-label="Permalink to &quot;Buttons with icons&quot;">​</a></h2>`,2),A=r(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 1&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 2&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 3&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Button 4</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">suffix</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-5 h-5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 20 20&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;evenodd&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;evenodd&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbButtonGroup, FwbButton } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 1&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 2&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 3&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Button 4</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">suffix</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-5 h-5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 20 20&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;evenodd&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;evenodd&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbButtonGroup, FwbButton } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default};

1
docs/.vitepress/dist/assets/components_button-group.md.39681d07.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r("",6),v=r("",2),A=r("",1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default};

447
docs/.vitepress/dist/assets/components_button.md.39f535da.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_button.md.39f535da.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

107
docs/.vitepress/dist/assets/components_card.md.8594cbd9.js vendored Normal file
View File

@@ -0,0 +1,107 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as E,d as h,$ as m,o as p,b as f,w as r,c as e,n as i,l as t,e as b,k as a,r as F,I as _,H as o,Q as c}from"./chunks/framework.3f630664.js";function v(s){const n=E(()=>s.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":s.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":s.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),l=E(()=>s.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:n,horizontalImageClasses:l}}const w=["alt","src"],y=h({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(s){const n=s,{cardClasses:l,horizontalImageClasses:g}=v(m(n)),d=E(()=>n.href?"a":"div");return(u,j)=>(p(),f(_(d.value),{class:i(t(l)),href:s.href},{default:r(()=>[s.imgSrc?(p(),e("img",{key:0,alt:s.imgAlt,class:i([t(g),"rounded-t-lg"]),src:s.imgSrc},null,10,w)):b("",!0),a("div",null,[F(u.$slots,"default")])]),_:3},8,["class","href"]))}}),q={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},x=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),C={__name:"FwbCardExample",setup(s){return(n,l)=>(p(),e("div",q,[o(t(y),{href:"#"},{default:r(()=>[x]),_:1})]))}},k={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},A=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),D={__name:"FwbCardExampleImage",setup(s){return(n,l)=>(p(),e("div",k,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-1.jpg",variant:"image"},{default:r(()=>[A]),_:1})]))}},B={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},T=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),S={__name:"FwbCardExampleHorizontal",setup(s){return(n,l)=>(p(),e("div",B,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-4.jpg",variant:"horizontal"},{default:r(()=>[T]),_:1})]))}},P=c('<h1 id="vue-card-flowbite" tabindex="-1">Vue Card - Flowbite <a class="header-anchor" href="#vue-card-flowbite" aria-label="Permalink to &quot;Vue Card - Flowbite&quot;">​</a></h1><h4 id="get-started-with-a-large-variety-of-tailwind-css-card-examples-for-your-web-project" tabindex="-1">Get started with a large variety of Tailwind CSS card examples for your web project <a class="header-anchor" href="#get-started-with-a-large-variety-of-tailwind-css-card-examples-for-your-web-project" aria-label="Permalink to &quot;Get started with a large variety of Tailwind CSS card examples for your web project&quot;">​</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/card/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/card/</a></p></div><p>Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.</p><h2 id="prop-default" tabindex="-1">Prop - default <a class="header-anchor" href="#prop-default" aria-label="Permalink to &quot;Prop - default&quot;">​</a></h2>',6),N=c(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-card</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-card</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCard } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-card</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-card</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCard } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="prop-image" tabindex="-1">Prop - image <a class="header-anchor" href="#prop-image" aria-label="Permalink to &quot;Prop - image&quot;">​</a></h2>`,2),V=c(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-card</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/docs/images/blog/image-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">variant</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;image&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-card</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCard } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-card</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/docs/images/blog/image-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">variant</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;image&quot;</span></span>
<span class="line"><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-card</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCard } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="prop-horizontal" tabindex="-1">Prop - horizontal <a class="header-anchor" href="#prop-horizontal" aria-label="Permalink to &quot;Prop - horizontal&quot;">​</a></h2>`,2),z=c(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-card</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/docs/images/blog/image-4.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">variant</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;horizontal&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">h5</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-card</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCard } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-card</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Desk&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/docs/images/blog/image-4.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">variant</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;horizontal&quot;</span></span>
<span class="line"><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-5&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">h5</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Noteworthy technology acquisitions 2021</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">h5</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;font-normal text-gray-700 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-card</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCard } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),R=JSON.parse('{"title":"Vue Card - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/card.md","filePath":"components/card.md"}'),I={name:"components/card.md"},O=Object.assign(I,{setup(s){return(n,l)=>(p(),e("div",null,[P,o(C),N,o(D),V,o(S),z]))}});export{R as __pageData,O as default};

1
docs/.vitepress/dist/assets/components_card.md.8594cbd9.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as E,d as h,$ as m,o as p,b as f,w as r,c as e,n as i,l as t,e as b,k as a,r as F,I as _,H as o,Q as c}from"./chunks/framework.3f630664.js";function v(s){const n=E(()=>s.variant.value==="default"?"block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700":s.variant.value==="image"?"max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700":s.variant.value==="horizontal"?"flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700":""),l=E(()=>s.variant.value==="horizontal"?"object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg":"");return{cardClasses:n,horizontalImageClasses:l}}const w=["alt","src"],y=h({__name:"FwbCard",props:{href:{type:String,default:""},imgAlt:{type:String,default:""},imgSrc:{type:String,default:""},variant:{type:String,default:"default"}},setup(s){const n=s,{cardClasses:l,horizontalImageClasses:g}=v(m(n)),d=E(()=>n.href?"a":"div");return(u,j)=>(p(),f(_(d.value),{class:i(t(l)),href:s.href},{default:r(()=>[s.imgSrc?(p(),e("img",{key:0,alt:s.imgAlt,class:i([t(g),"rounded-t-lg"]),src:s.imgSrc},null,10,w)):b("",!0),a("div",null,[F(u.$slots,"default")])]),_:3},8,["class","href"]))}}),q={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},x=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),C={__name:"FwbCardExample",setup(s){return(n,l)=>(p(),e("div",q,[o(t(y),{href:"#"},{default:r(()=>[x]),_:1})]))}},k={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},A=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),D={__name:"FwbCardExampleImage",setup(s){return(n,l)=>(p(),e("div",k,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-1.jpg",variant:"image"},{default:r(()=>[A]),_:1})]))}},B={class:"vp-raw inline-flex align-center gap-2 flex-wrap"},T=a("div",{class:"p-5"},[a("h5",{class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"}," Noteworthy technology acquisitions 2021 "),a("p",{class:"font-normal text-gray-700 dark:text-gray-400"}," Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order. ")],-1),S={__name:"FwbCardExampleHorizontal",setup(s){return(n,l)=>(p(),e("div",B,[o(t(y),{"img-alt":"Desk","img-src":"https://flowbite.com/docs/images/blog/image-4.jpg",variant:"horizontal"},{default:r(()=>[T]),_:1})]))}},P=c("",6),N=c("",2),V=c("",2),z=c("",1),R=JSON.parse('{"title":"Vue Card - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/card.md","filePath":"components/card.md"}'),I={name:"components/card.md"},O=Object.assign(I,{setup(s){return(n,l)=>(p(),e("div",null,[P,o(C),N,o(D),V,o(S),z]))}});export{R as __pageData,O as default};

121
docs/.vitepress/dist/assets/components_carousel.md.8090985f.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_carousel.md.8090985f.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

81
docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.js vendored Normal file
View File

@@ -0,0 +1,81 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as C,o as p,c as r,a0 as g,a1 as x,k as E,n as F,l as e,t as v,e as D,r as A,h as y,H as o,b as w,w as m,a as b,Q as i}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const V="block text-sm font-medium text-gray-900 dark:text-gray-300",T="w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500";function S(){const l=u(()=>B(T)),s=u(()=>V);return{checkboxClasses:l,labelClasses:s}}const P={class:"flex gap-3 items-center justify-start"},$=["disabled"],d=C({__name:"FwbCheckbox",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:s}){const t=l,a=s,n=u({get(){return t.modelValue},set(c){a("update:modelValue",c)}}),{checkboxClasses:k,labelClasses:f}=S();return(c,h)=>(p(),r("label",P,[g(E("input",{"onUpdate:modelValue":h[0]||(h[0]=_=>n.value=_),class:F(e(k)),disabled:c.disabled,type:"checkbox"},null,10,$),[[x,n.value]]),c.label?(p(),r("span",{key:0,class:F(e(f))},v(c.label),3)):D("",!0),A(c.$slots,"default")]))}}),I={class:"vp-raw"},N={__name:"FwbCheckboxExample",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",I,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Default checkbox"},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={__name:"FwbCheckboxExampleChecked",setup(l){const s=y(!0);return(t,a)=>(p(),r("div",U,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Checked checkbox"},null,8,["modelValue"])]))}},R={class:"vp-raw"},j={__name:"FwbCheckboxExampleDisabled",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",R,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled checkbox"},null,8,["modelValue"])]))}},O={__name:"FwbCheckboxExampleLink",setup(l){const s=y(!1);return(t,a)=>(p(),w(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n)},{default:m(()=>[o(e(q),{href:"#"},{default:m(()=>[b(" I agree with the terms and conditions. ")]),_:1})]),_:1},8,["modelValue"]))}},z=E("h1",{id:"vue-checkbox-flowbite",tabindex:"-1"},[b("Vue Checkbox - Flowbite "),E("a",{class:"header-anchor",href:"#vue-checkbox-flowbite","aria-label":'Permalink to "Vue Checkbox - Flowbite"'},"​")],-1),H=E("h2",{id:"default-checkbox",tabindex:"-1"},[b("Default checkbox "),E("a",{class:"header-anchor",href:"#default-checkbox","aria-label":'Permalink to "Default checkbox"'},"​")],-1),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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-checkbox</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;check&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Default checkbox&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCheckbox } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">check</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 style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-checkbox</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;check&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Default checkbox&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCheckbox } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">check</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 style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="disabled-checkbox" tabindex="-1">Disabled checkbox <a class="header-anchor" href="#disabled-checkbox" aria-label="Permalink to &quot;Disabled checkbox&quot;">​</a></h2>`,2),M=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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-checkbox</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;check&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Disabled checkbox&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCheckbox } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">check</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 style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-checkbox</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;check&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Disabled checkbox&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCheckbox } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">check</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 style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="checked-checkbox" tabindex="-1">Checked checkbox <a class="header-anchor" href="#checked-checkbox" aria-label="Permalink to &quot;Checked checkbox&quot;">​</a></h2>`,2),Q=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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-checkbox</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;check&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Checked checkbox&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCheckbox } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">check</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;">true</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-checkbox</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;check&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Checked checkbox&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCheckbox } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">check</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;">true</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="link-with-checkbox" tabindex="-1">Link with checkbox <a class="header-anchor" href="#link-with-checkbox" aria-label="Permalink to &quot;Link with checkbox&quot;">​</a></h2>`,2),G=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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-checkbox</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;check&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> I agree with the terms and conditions.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-checkbox</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA, FwbCheckbox } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">check</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 style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-checkbox</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;check&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> I agree with the terms and conditions.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-checkbox</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA, FwbCheckbox } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">check</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 style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),ss=JSON.parse('{"title":"Vue Checkbox - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/checkbox.md","filePath":"components/checkbox.md"}'),K={name:"components/checkbox.md"},as=Object.assign(K,{setup(l){return(s,t)=>(p(),r("div",null,[z,H,o(N),J,o(j),M,o(L),Q,o(O),G]))}});export{ss as __pageData,as as default};

1
docs/.vitepress/dist/assets/components_checkbox.md.ed60323a.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as u,d as C,o as p,c as r,a0 as g,a1 as x,k as E,n as F,l as e,t as v,e as D,r as A,h as y,H as o,b as w,w as m,a as b,Q as i}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const V="block text-sm font-medium text-gray-900 dark:text-gray-300",T="w-4 h-4 rounded bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-600 dark:border-gray-500";function S(){const l=u(()=>B(T)),s=u(()=>V);return{checkboxClasses:l,labelClasses:s}}const P={class:"flex gap-3 items-center justify-start"},$=["disabled"],d=C({__name:"FwbCheckbox",props:{disabled:{type:Boolean,default:!1},label:{default:""},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:s}){const t=l,a=s,n=u({get(){return t.modelValue},set(c){a("update:modelValue",c)}}),{checkboxClasses:k,labelClasses:f}=S();return(c,h)=>(p(),r("label",P,[g(E("input",{"onUpdate:modelValue":h[0]||(h[0]=_=>n.value=_),class:F(e(k)),disabled:c.disabled,type:"checkbox"},null,10,$),[[x,n.value]]),c.label?(p(),r("span",{key:0,class:F(e(f))},v(c.label),3)):D("",!0),A(c.$slots,"default")]))}}),I={class:"vp-raw"},N={__name:"FwbCheckboxExample",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",I,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Default checkbox"},null,8,["modelValue"])]))}},U={class:"vp-raw"},L={__name:"FwbCheckboxExampleChecked",setup(l){const s=y(!0);return(t,a)=>(p(),r("div",U,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Checked checkbox"},null,8,["modelValue"])]))}},R={class:"vp-raw"},j={__name:"FwbCheckboxExampleDisabled",setup(l){const s=y(!1);return(t,a)=>(p(),r("div",R,[o(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"Disabled checkbox"},null,8,["modelValue"])]))}},O={__name:"FwbCheckboxExampleLink",setup(l){const s=y(!1);return(t,a)=>(p(),w(e(d),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n)},{default:m(()=>[o(e(q),{href:"#"},{default:m(()=>[b(" I agree with the terms and conditions. ")]),_:1})]),_:1},8,["modelValue"]))}},z=E("h1",{id:"vue-checkbox-flowbite",tabindex:"-1"},[b("Vue Checkbox - Flowbite "),E("a",{class:"header-anchor",href:"#vue-checkbox-flowbite","aria-label":'Permalink to "Vue Checkbox - Flowbite"'},"​")],-1),H=E("h2",{id:"default-checkbox",tabindex:"-1"},[b("Default checkbox "),E("a",{class:"header-anchor",href:"#default-checkbox","aria-label":'Permalink to "Default checkbox"'},"​")],-1),J=i("",2),M=i("",2),Q=i("",2),G=i("",1),ss=JSON.parse('{"title":"Vue Checkbox - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/checkbox.md","filePath":"components/checkbox.md"}'),K={name:"components/checkbox.md"},as=Object.assign(K,{setup(l){return(s,t)=>(p(),r("div",null,[z,H,o(N),J,o(j),M,o(L),Q,o(O),G]))}});export{ss as __pageData,as as default};

125
docs/.vitepress/dist/assets/components_dropdown.md.3551a089.js vendored Normal file
View File

@@ -0,0 +1,125 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{F as o}from"./chunks/FwbDropdown.e54fafa7.js";import{o as e,c,H as s,w as n,l as a,k as t,a as l,Q as r}from"./chunks/framework.3f630664.js";import{_ as g,a as p}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const d={class:"vp-raw flex gap-2 flex-wrap"},u=t("p",{class:"p-2"}," Dropdown content here ",-1),m=t("p",{class:"p-2"}," Dropdown content here ",-1),w=t("p",{class:"p-2"}," Dropdown content here ",-1),_=t("p",{class:"p-2"}," Dropdown content here ",-1),h={__name:"FwbDropdownExamplePlacement",setup(E){return(y,i)=>(e(),c("div",d,[s(a(o),{placement:"top",text:"Top"},{default:n(()=>[u]),_:1}),s(a(o),{placement:"right",text:"Right"},{default:n(()=>[m]),_:1}),s(a(o),{text:"Bottom"},{default:n(()=>[w]),_:1}),s(a(o),{placement:"left",text:"Left"},{default:n(()=>[_]),_:1})]))}},D={class:"vp-raw"},F={__name:"FwbDropdownExampleListGroup",setup(E){return(y,i)=>(e(),c("div",D,[s(a(o),{text:"Menu"},{default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},f={class:"vp-raw"},b=t("span",null,"Custom Trigger Element",-1),A={__name:"FwbDropdownExampleTrigger",setup(E){return(y,i)=>(e(),c("div",f,[s(a(o),null,{trigger:n(()=>[b]),default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},q=r('<h1 id="vue-dropdown-flowbite" tabindex="-1">Vue Dropdown - Flowbite <a class="header-anchor" href="#vue-dropdown-flowbite" aria-label="Permalink to &quot;Vue Dropdown - Flowbite&quot;">​</a></h1><h4 id="get-started-with-the-dropdown-component-to-show-a-list-of-menu-items-when-clicking-on-the-trigger-element-based-on-multiple-layouts-styles-and-placements" tabindex="-1">Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements <a class="header-anchor" href="#get-started-with-the-dropdown-component-to-show-a-list-of-menu-items-when-clicking-on-the-trigger-element-based-on-multiple-layouts-styles-and-placements" aria-label="Permalink to &quot;Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements&quot;">​</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/dropdowns/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/dropdowns/</a></p></div><p>The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.</p><h2 id="dropdown-placement" tabindex="-1">Dropdown - placement <a class="header-anchor" href="#dropdown-placement" aria-label="Permalink to &quot;Dropdown - placement&quot;">​</a></h2>',6),C=r(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Bottom&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#E1E4E8;">&gt;Dropdown content here&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placement</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Top&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#E1E4E8;">&gt;Dropdown content here&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placement</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;right&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Right&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#E1E4E8;">&gt;Dropdown content here&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placement</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;left&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Left&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#E1E4E8;">&gt;Dropdown content here&lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbDropdown } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Bottom&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#24292E;">&gt;Dropdown content here&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placement</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Top&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#24292E;">&gt;Dropdown content here&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placement</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;right&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Right&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#24292E;">&gt;Dropdown content here&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placement</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;left&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Left&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;p-2&quot;</span><span style="color:#24292E;">&gt;Dropdown content here&lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbDropdown } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="dropdown-with-list-group" tabindex="-1">Dropdown with List Group <a class="header-anchor" href="#dropdown-with-list-group" aria-label="Permalink to &quot;Dropdown with List Group&quot;">​</a></h2>`,2),v=r(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Menu&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Profile</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Settings</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Messages</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Download</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbDropdown, ListGroup, ListGroupItem } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Menu&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Profile</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Settings</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Messages</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Download</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbDropdown, ListGroup, ListGroupItem } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="dropdown-trigger" tabindex="-1">Dropdown - trigger <a class="header-anchor" href="#dropdown-trigger" aria-label="Permalink to &quot;Dropdown - trigger&quot;">​</a></h2>`,2),B=r(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Bottom&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">trigger</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;Custom Trigger Element&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Profile</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Settings</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Messages</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Download</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbDropdown, ListGroup, ListGroupItem } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Bottom&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">trigger</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;Custom Trigger Element&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Profile</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Settings</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Messages</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Download</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbDropdown, ListGroup, ListGroupItem } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),j=JSON.parse('{"title":"Vue Dropdown - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/dropdown.md","filePath":"components/dropdown.md"}'),x={name:"components/dropdown.md"},H=Object.assign(x,{setup(E){return(y,i)=>(e(),c("div",null,[q,s(h),C,s(F),v,s(A),B]))}});export{j as __pageData,H as default};

1
docs/.vitepress/dist/assets/components_dropdown.md.3551a089.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{F as o}from"./chunks/FwbDropdown.e54fafa7.js";import{o as e,c,H as s,w as n,l as a,k as t,a as l,Q as r}from"./chunks/framework.3f630664.js";import{_ as g,a as p}from"./chunks/FwbListGroupItem.vue_vue_type_script_setup_true_lang.9898f565.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import"./chunks/FwbSlotListener.vue_vue_type_script_lang.85726df2.js";import"./chunks/flatten.a0535777.js";import"./chunks/isArray.513c67aa.js";import"./chunks/simplifyTailwindClasses.275301d3.js";const d={class:"vp-raw flex gap-2 flex-wrap"},u=t("p",{class:"p-2"}," Dropdown content here ",-1),m=t("p",{class:"p-2"}," Dropdown content here ",-1),w=t("p",{class:"p-2"}," Dropdown content here ",-1),_=t("p",{class:"p-2"}," Dropdown content here ",-1),h={__name:"FwbDropdownExamplePlacement",setup(E){return(y,i)=>(e(),c("div",d,[s(a(o),{placement:"top",text:"Top"},{default:n(()=>[u]),_:1}),s(a(o),{placement:"right",text:"Right"},{default:n(()=>[m]),_:1}),s(a(o),{text:"Bottom"},{default:n(()=>[w]),_:1}),s(a(o),{placement:"left",text:"Left"},{default:n(()=>[_]),_:1})]))}},D={class:"vp-raw"},F={__name:"FwbDropdownExampleListGroup",setup(E){return(y,i)=>(e(),c("div",D,[s(a(o),{text:"Menu"},{default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},f={class:"vp-raw"},b=t("span",null,"Custom Trigger Element",-1),A={__name:"FwbDropdownExampleTrigger",setup(E){return(y,i)=>(e(),c("div",f,[s(a(o),null,{trigger:n(()=>[b]),default:n(()=>[s(a(g),null,{default:n(()=>[s(a(p),null,{default:n(()=>[l(" Profile ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Settings ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Messages ")]),_:1}),s(a(p),null,{default:n(()=>[l(" Download ")]),_:1})]),_:1})]),_:1})]))}},q=r("",6),C=r("",2),v=r("",2),B=r("",1),j=JSON.parse('{"title":"Vue Dropdown - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/dropdown.md","filePath":"components/dropdown.md"}'),x={name:"components/dropdown.md"},H=Object.assign(x,{setup(E){return(y,i)=>(e(),c("div",null,[q,s(h),C,s(F),v,s(A),B]))}});export{j as __pageData,H as default};

113
docs/.vitepress/dist/assets/components_fileInput.md.4013b935.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_fileInput.md.4013b935.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

69
docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_flowbiteThemable_flowbiteThemable.md.696f24eb.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

599
docs/.vitepress/dist/assets/components_footer.md.0590fa94.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_footer.md.0590fa94.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

97
docs/.vitepress/dist/assets/components_heading.md.e8348a42.js vendored Normal file
View File

@@ -0,0 +1,97 @@
import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r(`<h1 id="vue-heading-flowbite" tabindex="-1">Vue Heading - Flowbite <a class="header-anchor" href="#vue-heading-flowbite" aria-label="Permalink to &quot;Vue Heading - Flowbite&quot;">​</a></h1><h4 id="the-heading-component-defines-six-levels-of-title-elements-from-h1-to-h6-that-are-used-as-titles-and-subtitles-on-a-web-page-based-on-multiple-styles-and-layouts" tabindex="-1">The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts <a class="header-anchor" href="#the-heading-component-defines-six-levels-of-title-elements-from-h1-to-h6-that-are-used-as-titles-and-subtitles-on-a-web-page-based-on-multiple-styles-and-layouts" aria-label="Permalink to &quot;The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts&quot;">​</a></h4><h2 id="heading-one-h1" tabindex="-1">Heading one (H1) <a class="header-anchor" href="#heading-one-h1" aria-label="Permalink to &quot;Heading one (H1)&quot;">​</a></h2><p>Use the <code>tag=&quot;h1&quot;</code> as the most important text element to indicate the title of your web page.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h1&quot;</span><span style="color:#E1E4E8;">&gt;Heading 1&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h1&quot;</span><span style="color:#24292E;">&gt;Heading 1&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),k=r(`<h2 id="heading-two-h2" tabindex="-1">Heading two (H2) <a class="header-anchor" href="#heading-two-h2" aria-label="Permalink to &quot;Heading two (H2)&quot;">​</a></h2><p>The H2 tag can be used as subtitles of the page’s sections.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h2&quot;</span><span style="color:#E1E4E8;">&gt;Heading 2&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h2&quot;</span><span style="color:#24292E;">&gt;Heading 2&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),B=r(`<h2 id="heading-three-h3" tabindex="-1">Heading three (H3) <a class="header-anchor" href="#heading-three-h3" aria-label="Permalink to &quot;Heading three (H3)&quot;">​</a></h2><p>Use the H3 tags inside sections that already have a H2 available.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h3&quot;</span><span style="color:#E1E4E8;">&gt;Heading 3&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h3&quot;</span><span style="color:#24292E;">&gt;Heading 3&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),S=r(`<h2 id="heading-four-h4" tabindex="-1">Heading four (H4) <a class="header-anchor" href="#heading-four-h4" aria-label="Permalink to &quot;Heading four (H4)&quot;">​</a></h2><p>The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h4&quot;</span><span style="color:#E1E4E8;">&gt;Heading 4&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h4&quot;</span><span style="color:#24292E;">&gt;Heading 4&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),P=r(`<h2 id="heading-five-h5" tabindex="-1">Heading five (H5) <a class="header-anchor" href="#heading-five-h5" aria-label="Permalink to &quot;Heading five (H5)&quot;">​</a></h2><p>The H5 tag is most often used in longer articles with other heading already available or in sidebars.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h5&quot;</span><span style="color:#E1E4E8;">&gt;Heading 5&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h5&quot;</span><span style="color:#24292E;">&gt;Heading 5&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),V=r(`<h2 id="heading-six-h6" tabindex="-1">Heading six (H6) <a class="header-anchor" href="#heading-six-h6" aria-label="Permalink to &quot;Heading six (H6)&quot;">​</a></h2><p>Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h6&quot;</span><span style="color:#E1E4E8;">&gt;Heading 6&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h6&quot;</span><span style="color:#24292E;">&gt;Heading 6&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),I=r(`<h2 id="color" tabindex="-1">Color <a class="header-anchor" href="#color" aria-label="Permalink to &quot;Color&quot;">​</a></h2><p>Use the <code>color</code> prop to set the text color.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-green-400&quot;</span><span style="color:#E1E4E8;">&gt;Green eading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-green-400&quot;</span><span style="color:#24292E;">&gt;Green eading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),N=r(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use the <code>class</code> attribute to apply the tailwind classes.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;!text-xl italic underline&quot;</span><span style="color:#E1E4E8;">&gt;Custom heading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;!text-xl italic underline&quot;</span><span style="color:#24292E;">&gt;Custom heading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default};

1
docs/.vitepress/dist/assets/components_heading.md.e8348a42.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r("",5),k=r("",3),B=r("",3),S=r("",3),P=r("",3),V=r("",3),I=r("",3),N=r("",3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default};

125
docs/.vitepress/dist/assets/components_image.md.e097f963.js vendored Normal file
View File

@@ -0,0 +1,125 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t(`<h1 id="vue-images-flowbite" tabindex="-1">Vue Images - Flowbite <a class="header-anchor" href="#vue-images-flowbite" aria-label="Permalink to &quot;Vue Images - Flowbite&quot;">​</a></h1><h4 id="the-image-component-can-be-used-to-embed-images-inside-the-web-page-in-articles-and-sections-based-on-multiple-styles-sizes-layouts-and-hover-animations" tabindex="-1">The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations <a class="header-anchor" href="#the-image-component-can-be-used-to-embed-images-inside-the-web-page-in-articles-and-sections-based-on-multiple-styles-sizes-layouts-and-hover-animations" aria-label="Permalink to &quot;The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations&quot;">​</a></h4><h2 id="default-image" tabindex="-1">Default image <a class="header-anchor" href="#default-image" aria-label="Permalink to &quot;Default image&quot;">​</a></h2><p>Use this example to show the a responsive image that won’t grow beyond the maximum original width.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),v=t(`<h2 id="image-caption" tabindex="-1">Image caption <a class="header-anchor" href="#image-caption" aria-label="Permalink to &quot;Image caption&quot;">​</a></h2><p>This example can be used to add a caption for the image often used inside articles. Use <code>caption-class</code> to override the cation.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">caption</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">caption</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),q=t(`<h2 id="sizes" tabindex="-1">Sizes <a class="header-anchor" href="#sizes" aria-label="Permalink to &quot;Sizes&quot;">​</a></h2><p>Set the size of the image using the <code>w-size</code> and <code>h-size</code> or <code>max-w-size</code> utility classes from Tailwind CSS to set the width and height of the element.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;max-w-md&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;max-w-md&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),C=t(`<h2 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-label="Permalink to &quot;Alignment&quot;">​</a></h2><p>Align the image component to the center or right side of the document page using <code>mx-auto</code> and <code>ml-auto</code> margin styles.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alignment</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mx-auto&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;max-w-md&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alignment</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mx-auto&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;max-w-md&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),A=t(`<h2 id="grayscale" tabindex="-1">Grayscale <a class="header-anchor" href="#grayscale" aria-label="Permalink to &quot;Grayscale&quot;">​</a></h2><p>Use the filter option and apply a grayscale to the image element using the grayscale class.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;max-w-lg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;max-w-lg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),x=t(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use the <code>img-class</code> prop to apply tailwind classes.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-img</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;rounded-lg border-[1px]&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;max-w-lg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-img</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flowbite-vue&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;rounded-lg border-[1px]&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;max-w-lg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/examples/image.png&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default};

1
docs/.vitepress/dist/assets/components_image.md.e097f963.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t("",5),v=t("",3),q=t("",3),C=t("",3),A=t("",3),x=t("",3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default};

275
docs/.vitepress/dist/assets/components_input.md.455fa912.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_input.md.455fa912.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import{d as E,h as y,o as e,c as i,H as l,l as p,b as m,w as u,a as F,k as d,Q as t}from"./chunks/framework.3f630664.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const C={class:"vp-raw"},h=E({__name:"FwbInputExample",setup(r){const s=y("");return(c,a)=>(e(),i("div",C,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},null,8,["modelValue"])]))}}),f={class:"vp-raw grid gap-2"},b=E({__name:"FwbInputExampleSize",setup(r){const s=y("");return(c,a)=>(e(),i("div",f,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Small",placeholder:"enter your name",size:"sm"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Medium",placeholder:"enter your name",size:"md"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Large",placeholder:"enter your name",size:"lg"},null,8,["modelValue"])]))}}),_=E({__name:"FwbInputExampleDisabled",setup(r){const s=y("");return(c,a)=>(e(),m(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"First name",placeholder:"enter your first name"},null,8,["modelValue"]))}}),v={class:"vp-raw"},B=E({__name:"FwbInputExampleHelper",setup(r){const s=y("");return(c,a)=>(e(),i("div",v,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},{helper:u(()=>[F(" We'll never share your details. Read our "),l(p(q),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:u(()=>[F(" Privacy Policy ")]),_:1}),F(". ")]),_:1},8,["modelValue"])]))}}),w={class:"vp-raw"},A=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),D=E({__name:"FwbInputExamplePrefix",setup(r){const s=y("");return(c,a)=>(e(),i("div",w,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query"},{prefix:u(()=>[A]),_:1},8,["modelValue"])]))}}),k={class:"vp-raw"},x=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),S=E({__name:"FwbInputExampleSuffix",setup(r){const s=y("");return(c,a)=>(e(),i("div",k,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query",size:"lg"},{prefix:u(()=>[x]),suffix:u(()=>[l(p(g),null,{default:u(()=>[F("Search")]),_:1})]),_:1},8,["modelValue"])]))}}),V={class:"vp-raw"},T=E({__name:"FwbInputExampleRequired",setup(r){const s=y("");return(c,a)=>(e(),i("div",V,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name",required:""},null,8,["modelValue"])]))}}),I={class:"vp-raw"},P=d("hr",{class:"mt-4 border-0"},null,-1),z=E({__name:"FwbInputExampleValidation",setup(r){const s=y("");return(c,a)=>(e(),i("div",I,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"success"},null,8,["modelValue"]),P,l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"error"},{validationMessage:u(()=>[F(" Please enter a valid email address ")]),_:1},8,["modelValue"])]))}}),$=t("",7),R=t("",2),N=t("",2),M=t("",2),U=t("",2),j=t("",2),H=t("",2),L=t("",3),O=t("",1),ns=JSON.parse('{"title":"Vue Input - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/input.md","filePath":"components/input.md"}'),W={name:"components/input.md"},ls=Object.assign(W,{setup(r){return(s,c)=>(e(),i("div",null,[$,l(h),R,l(b),N,l(_),M,l(T),U,l(B),j,l(D),H,l(S),L,l(z),O]))}});export{ns as __pageData,ls as default};

499
docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_jumbotron.md.7e83799d.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

47
docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.js vendored Normal file
View File

@@ -0,0 +1,47 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as r}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{o as p,b as i,w as n,a as s,l,H as a,c as E,Q as c}from"./chunks/framework.3f630664.js";import{_ as y}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/useMergeClasses.5cec3a4e.js";const u={__name:"FwbAExample",setup(e){return(o,t)=>(p(),i(l(r),{href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1}))}},d={__name:"FwbAExampleParagraph",setup(e){return(o,t)=>(p(),i(l(y),null,{default:n(()=>[s(" The free updates that will be provided is based on the "),a(l(r),{href:"/",class:"underline hover:no-underline"},{default:n(()=>[s(" roadmap ")]),_:1}),s(" that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well. ")]),_:1}))}},h={class:"vp-raw"},b={__name:"FwbAExampleCustom",setup(e){return(o,t)=>(p(),E("div",h,[a(l(r),{class:"text-orange-500 italic",href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1})]))}},_=c(`<h1 id="vue-links-flowbite" tabindex="-1">Vue Links - Flowbite <a class="header-anchor" href="#vue-links-flowbite" aria-label="Permalink to &quot;Vue Links - Flowbite&quot;">​</a></h1><h4 id="the-link-component-can-be-used-to-set-hyperlinks-from-one-page-to-another-or-to-an-external-website-when-clicking-on-an-inline-text-item-button-or-card" tabindex="-1">The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card <a class="header-anchor" href="#the-link-component-can-be-used-to-set-hyperlinks-from-one-page-to-another-or-to-an-external-website-when-clicking-on-an-inline-text-item-button-or-card" aria-label="Permalink to &quot;The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card&quot;">​</a></h4><h2 id="default-link" tabindex="-1">Default link <a class="header-anchor" href="#default-link" aria-label="Permalink to &quot;Default link&quot;">​</a></h2><p>Use this example to set default styles to an inline link element.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt; Flowbite-vue &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt; Flowbite-vue &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),m=c(`<h2 id="paragraph-link" tabindex="-1">Paragraph link <a class="header-anchor" href="#paragraph-link" aria-label="Permalink to &quot;Paragraph link&quot;">​</a></h2><p>Use this example to set a link inside a paragraph with an underline style.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> The free updates that will be provided is based on the &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;underline hover:no-underline&quot;</span><span style="color:#E1E4E8;">&gt;roadmap&lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt; that we have laid</span></span>
<span class="line"><span style="color:#E1E4E8;"> out for this project. It is also possible that we will provide</span></span>
<span class="line"><span style="color:#E1E4E8;"> extra updates outside of the roadmap as well.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA, FwbP } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> The free updates that will be provided is based on the &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;underline hover:no-underline&quot;</span><span style="color:#24292E;">&gt;roadmap&lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt; that we have laid</span></span>
<span class="line"><span style="color:#24292E;"> out for this project. It is also possible that we will provide</span></span>
<span class="line"><span style="color:#24292E;"> extra updates outside of the roadmap as well.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA, FwbP } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),f=c(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use <code>class</code> attribute prop to apply the tailwind classes.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-orange-500 italic&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt; Flowbite-vue &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-orange-500 italic&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt; Flowbite-vue &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),C=JSON.parse('{"title":"Vue Links - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/link.md","filePath":"components/link.md"}'),g={name:"components/link.md"},D=Object.assign(g,{setup(e){return(o,t)=>(p(),E("div",null,[_,a(u),m,a(d),f,a(b)]))}});export{C as __pageData,D as default};

1
docs/.vitepress/dist/assets/components_link.md.ae3cc9d2.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as r}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{o as p,b as i,w as n,a as s,l,H as a,c as E,Q as c}from"./chunks/framework.3f630664.js";import{_ as y}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/useMergeClasses.5cec3a4e.js";const u={__name:"FwbAExample",setup(e){return(o,t)=>(p(),i(l(r),{href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1}))}},d={__name:"FwbAExampleParagraph",setup(e){return(o,t)=>(p(),i(l(y),null,{default:n(()=>[s(" The free updates that will be provided is based on the "),a(l(r),{href:"/",class:"underline hover:no-underline"},{default:n(()=>[s(" roadmap ")]),_:1}),s(" that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well. ")]),_:1}))}},h={class:"vp-raw"},b={__name:"FwbAExampleCustom",setup(e){return(o,t)=>(p(),E("div",h,[a(l(r),{class:"text-orange-500 italic",href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1})]))}},_=c("",5),m=c("",3),f=c("",3),C=JSON.parse('{"title":"Vue Links - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/link.md","filePath":"components/link.md"}'),g={name:"components/link.md"},D=Object.assign(g,{setup(e){return(o,t)=>(p(),E("div",null,[_,a(u),m,a(d),f,a(b)]))}});export{C as __pageData,D as default};

205
docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_list-group.md.e9bebe16.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

133
docs/.vitepress/dist/assets/components_modal.md.48165202.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_modal.md.48165202.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

345
docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_navbar.md.e4dfa350.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

149
docs/.vitepress/dist/assets/components_pagination.md.c228117a.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_pagination.md.c228117a.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

117
docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.js vendored Normal file
View File

@@ -0,0 +1,117 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as a}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import{o as t,c as p,H as s,w as n,a as e,l,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";const E={class:"vp-raw"},y={__name:"FwbPExample",setup(o){return(c,r)=>(t(),p("div",E,[s(l(a),null,{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),null,{default:n(()=>[e(" Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},d={class:"vp-raw"},h={__name:"FwbPExampleCustom",setup(o){return(c,r)=>(t(),p("div",d,[s(l(a),{class:"font-light"},{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),{class:"font-bold"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-left"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-center"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-right"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-green-600 dark:text-green-400 italic"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},u=i(`<h1 id="vue-paragraph-flowbite" tabindex="-1">Vue Paragraph - Flowbite <a class="header-anchor" href="#vue-paragraph-flowbite" aria-label="Permalink to &quot;Vue Paragraph - Flowbite&quot;">​</a></h1><h4 id="use-the-paragraph-component-to-create-multiple-blocks-of-text-separated-by-blank-lines-and-write-content-based-on-multiple-layouts-and-styles" tabindex="-1">Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles <a class="header-anchor" href="#use-the-paragraph-component-to-create-multiple-blocks-of-text-separated-by-blank-lines-and-write-content-based-on-multiple-layouts-and-styles" aria-label="Permalink to &quot;Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles&quot;">​</a></h4><h2 id="default-paragraph" tabindex="-1">Default paragraph <a class="header-anchor" href="#default-paragraph" aria-label="Permalink to &quot;Default paragraph&quot;">​</a></h2><p>Use this example of a paragraph element to use inside article content or a landing page.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Track work across the enterprise through an open, collaborative platform.</span></span>
<span class="line"><span style="color:#E1E4E8;"> Link issues across Jira and ingest data from other software development</span></span>
<span class="line"><span style="color:#E1E4E8;"> tools, so your IT support and operations teams have richer contextual</span></span>
<span class="line"><span style="color:#E1E4E8;"> information to rapidly respond to requests, incidents, and changes.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbP } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Track work across the enterprise through an open, collaborative platform.</span></span>
<span class="line"><span style="color:#24292E;"> Link issues across Jira and ingest data from other software development</span></span>
<span class="line"><span style="color:#24292E;"> tools, so your IT support and operations teams have richer contextual</span></span>
<span class="line"><span style="color:#24292E;"> information to rapidly respond to requests, incidents, and changes.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbP } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),g=i(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use <code>class</code> attribute to apply the tailwind classes.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;font-light&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Track work across the enterprise through an open, collaborative platform.</span></span>
<span class="line"><span style="color:#E1E4E8;"> Link issues across Jira and ingest data from other software development</span></span>
<span class="line"><span style="color:#E1E4E8;"> tools, so your IT support and operations teams have richer contextual</span></span>
<span class="line"><span style="color:#E1E4E8;"> information to rapidly respond to requests, incidents, and changes.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;font-bold&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;test-left&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;test-center&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-right&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-green-600 dark:text-green-400 italic&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#E1E4E8;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#E1E4E8;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#E1E4E8;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbP } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;font-light&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Track work across the enterprise through an open, collaborative platform.</span></span>
<span class="line"><span style="color:#24292E;"> Link issues across Jira and ingest data from other software development</span></span>
<span class="line"><span style="color:#24292E;"> tools, so your IT support and operations teams have richer contextual</span></span>
<span class="line"><span style="color:#24292E;"> information to rapidly respond to requests, incidents, and changes.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;font-bold&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;test-left&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;test-center&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-right&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-green-600 dark:text-green-400 italic&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Deliver great service experiences fast - without the complexityof</span></span>
<span class="line"><span style="color:#24292E;"> traditional ITSM solutions. Accelerate critical development work,</span></span>
<span class="line"><span style="color:#24292E;"> eliminate toil, and deploy changes with ease, with a complete</span></span>
<span class="line"><span style="color:#24292E;"> audit trail for every change.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbP } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),_=JSON.parse('{"title":"Vue Paragraph - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/paragraph.md","filePath":"components/paragraph.md"}'),m={name:"components/paragraph.md"},x=Object.assign(m,{setup(o){return(c,r)=>(t(),p("div",null,[u,s(y),g,s(h)]))}});export{_ as __pageData,x as default};

1
docs/.vitepress/dist/assets/components_paragraph.md.28aca1b3.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as a}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import{o as t,c as p,H as s,w as n,a as e,l,Q as i}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";const E={class:"vp-raw"},y={__name:"FwbPExample",setup(o){return(c,r)=>(t(),p("div",E,[s(l(a),null,{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),null,{default:n(()=>[e(" Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},d={class:"vp-raw"},h={__name:"FwbPExampleCustom",setup(o){return(c,r)=>(t(),p("div",d,[s(l(a),{class:"font-light"},{default:n(()=>[e(" Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. ")]),_:1}),s(l(a),{class:"font-bold"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-left"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-center"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-right"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1}),s(l(a),{class:"text-green-600 dark:text-green-400 italic"},{default:n(()=>[e(" Deliver great service experiences fast - without the complexityof traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change. ")]),_:1})]))}},u=i("",5),g=i("",3),_=JSON.parse('{"title":"Vue Paragraph - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/paragraph.md","filePath":"components/paragraph.md"}'),m={name:"components/paragraph.md"},x=Object.assign(m,{setup(o){return(c,r)=>(t(),p("div",null,[u,s(y),g,s(h)]))}});export{_ as __pageData,x as default};

109
docs/.vitepress/dist/assets/components_progress.md.af9b4180.js vendored Normal file
View File

@@ -0,0 +1,109 @@
import{c as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as m,$ as B,o as p,c as r,k as c,t as F,n as y,l as s,e as d,N as f,F as h,a as b,H as a,b as _,Q as E}from"./chunks/framework.3f630664.js";const w={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},v={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},C={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function A(n){const e=g(()=>u(w[n.color.value],C[n.size.value])),t=g(()=>u(C[n.size.value])),i=g(()=>u(v[n.color.value]));return{innerClasses:e,outerClasses:t,outsideLabelClasses:i}}const D={key:0,class:"flex justify-between mb-1"},l=m({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(n){const e=n,{innerClasses:t,outerClasses:i,outsideLabelClasses:q}=A(B(e));return(o,O)=>(p(),r("div",null,[o.label||o.labelProgress&&o.labelPosition==="outside"?(p(),r("div",D,[c("span",{class:y([s(q),"text-base font-medium"])},F(o.label),3),o.labelProgress&&o.labelPosition==="outside"?(p(),r("span",{key:0,class:y([s(q),"text-sm font-medium"])},F(o.progress)+"%",3)):d("",!0)])):d("",!0),c("div",{class:y([s(i),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[c("div",{class:y([s(t),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:f({width:o.progress+"%"})},[o.labelProgress&&o.labelPosition==="inside"?(p(),r(h,{key:0},[b(F(o.progress)+"% ",1)],64)):d("",!0)],6)],2)]))}}),k={class:"vp-raw"},P={__name:"FwbProgressExample",setup(n){return(e,t)=>(p(),r("div",k,[a(s(l),{progress:45})]))}},x={class:"vp-raw grid gap-2"},T={__name:"FwbProgressExampleColor",setup(n){return(e,t)=>(p(),r("div",x,[a(s(l),{label:"Default",progress:12.5}),a(s(l),{color:"dark",label:"Dark",progress:25}),a(s(l),{color:"blue",label:"Blue",progress:37.5}),a(s(l),{color:"red",label:"Red",progress:50}),a(s(l),{color:"green",label:"Green",progress:62.5}),a(s(l),{color:"yellow",label:"Yellow",progress:75}),a(s(l),{color:"indigo",label:"Indigo",progress:87.5}),a(s(l),{color:"purple",label:"Purple",progress:100})]))}},z={__name:"FwbProgressExampleLabelInside",setup(n){return(e,t)=>(p(),_(s(l),{progress:50,"label-position":"inside","label-progress":"",size:"lg"}))}},S={__name:"FwbProgressExampleLabelOutside",setup(n){return(e,t)=>(p(),_(s(l),{progress:42,"label-position":"outside","label-progress":"",label:"Flowbite Vue 3"}))}},V={class:"vp-raw grid gap-2"},I={__name:"FwbProgressExampleSize",setup(n){return(e,t)=>(p(),r("div",V,[a(s(l),{progress:25,label:"Small",size:"sm"}),a(s(l),{progress:50,label:"Medium",size:"md"}),a(s(l),{progress:75,label:"Large",size:"lg"}),a(s(l),{progress:100,label:"Extra Large",size:"xl"})]))}},N=c("h1",{id:"vue-progress-bar-flowbite",tabindex:"-1"},[b("Vue Progress Bar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-progress-bar-flowbite","aria-label":'Permalink to "Vue Progress Bar - Flowbite"'},"​")],-1),$=c("h2",{id:"default",tabindex:"-1"},[b("Default "),c("a",{class:"header-anchor",href:"#default","aria-label":'Permalink to "Default"'},"​")],-1),L=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;45&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbProgress } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;45&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbProgress } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="sizes" tabindex="-1">Sizes <a class="header-anchor" href="#sizes" aria-label="Permalink to &quot;Sizes&quot;">​</a></h2><p>You can also use different sizes by using various sizing.</p>`,3),R=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;grid gap-2&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;25&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sm&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Small&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;50&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;md&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Medium&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;75&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;lg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Large&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;xl&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Extra Large&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbProgress } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;grid gap-2&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;25&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sm&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Small&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;50&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;md&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Medium&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;75&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;lg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Large&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;xl&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Extra Large&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbProgress } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="with-label-inside" tabindex="-1">With label inside <a class="header-anchor" href="#with-label-inside" aria-label="Permalink to &quot;With label inside&quot;">​</a></h2><p>Here is an example of using a progress bar with the label inside the bar.</p>`,3),Y=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;50&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;inside&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label-progress</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;lg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbProgress } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;50&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;inside&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label-progress</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;lg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbProgress } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="with-label-outside" tabindex="-1">With label outside <a class="header-anchor" href="#with-label-outside" aria-label="Permalink to &quot;With label outside&quot;">​</a></h2><p>And this is an example of using a progress bar outside the bar.</p>`,3),W=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;42&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;outside&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label-progress</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Flowbite Vue 3&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbProgress } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;42&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;outside&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label-progress</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Flowbite Vue 3&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbProgress } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="colors" tabindex="-1">Colors <a class="header-anchor" href="#colors" aria-label="Permalink to &quot;Colors&quot;">​</a></h2><p>You can also apply color.</p>`,3),G=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;grid gap-2&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;12.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Default&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;25&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;dark&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Dark&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;37.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;blue&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Blue&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;50&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;red&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Red&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;62.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;green&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Green&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;75&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;yellow&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Yellow&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;87.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;indigo&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Indigo&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:progress</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;purple&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Purple&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbProgress } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;grid gap-2&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;12.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Default&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;25&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;dark&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Dark&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;37.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;blue&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Blue&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;50&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;red&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Red&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;62.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;green&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Green&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;75&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;yellow&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Yellow&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;87.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;indigo&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Indigo&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-progress</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:progress</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;purple&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Purple&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbProgress } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),J=JSON.parse('{"title":"Vue Progress Bar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),M={name:"components/progress.md"},Q=Object.assign(M,{setup(n){return(e,t)=>(p(),r("div",null,[N,$,a(P),L,a(I),R,a(z),Y,a(S),W,a(T),G]))}});export{J as __pageData,Q as default};

1
docs/.vitepress/dist/assets/components_progress.md.af9b4180.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{c as u}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as m,$ as B,o as p,c as r,k as c,t as F,n as y,l as s,e as d,N as f,F as h,a as b,H as a,b as _,Q as E}from"./chunks/framework.3f630664.js";const w={default:"bg-blue-600 dark:bg-blue-600",blue:"bg-blue-600 dark:bg-blue-600",dark:"bg-gray-600 dark:bg-gray-300",green:"bg-green-600 dark:bg-green-500",red:"bg-red-600 dark:bg-red-500",yellow:"bg-yellow-400",indigo:"bg-indigo-600 dark:bg-indigo-500",purple:"bg-purple-600 dark:bg-purple-500"},v={default:"",blue:"text-blue-700 dark:text-blue-500",dark:"dark:text-white",green:"text-green-700 dark:text-green-500",red:"text-red-700 dark:text-red-500",yellow:"text-yellow-700 dark:text-yellow-500",indigo:"text-indigo-700 dark:text-indigo-500",purple:"text-purple-700 dark:text-purple-500"},C={sm:"h-1.5 text-xs leading-none",md:"h-2.5 text-xs leading-none",lg:"h-4 text-sm leading-none",xl:"h-6 text-base leading-tight"};function A(n){const e=g(()=>u(w[n.color.value],C[n.size.value])),t=g(()=>u(C[n.size.value])),i=g(()=>u(v[n.color.value]));return{innerClasses:e,outerClasses:t,outsideLabelClasses:i}}const D={key:0,class:"flex justify-between mb-1"},l=m({__name:"FwbProgress",props:{color:{default:"default"},label:{default:""},labelPosition:{default:"none"},labelProgress:{type:Boolean,default:!1},progress:{default:0},size:{default:"md"}},setup(n){const e=n,{innerClasses:t,outerClasses:i,outsideLabelClasses:q}=A(B(e));return(o,O)=>(p(),r("div",null,[o.label||o.labelProgress&&o.labelPosition==="outside"?(p(),r("div",D,[c("span",{class:y([s(q),"text-base font-medium"])},F(o.label),3),o.labelProgress&&o.labelPosition==="outside"?(p(),r("span",{key:0,class:y([s(q),"text-sm font-medium"])},F(o.progress)+"%",3)):d("",!0)])):d("",!0),c("div",{class:y([s(i),"w-full bg-gray-200 rounded-full dark:bg-gray-700"])},[c("div",{class:y([s(t),"rounded-full font-medium text-blue-100 text-center p-0.5"]),style:f({width:o.progress+"%"})},[o.labelProgress&&o.labelPosition==="inside"?(p(),r(h,{key:0},[b(F(o.progress)+"% ",1)],64)):d("",!0)],6)],2)]))}}),k={class:"vp-raw"},P={__name:"FwbProgressExample",setup(n){return(e,t)=>(p(),r("div",k,[a(s(l),{progress:45})]))}},x={class:"vp-raw grid gap-2"},T={__name:"FwbProgressExampleColor",setup(n){return(e,t)=>(p(),r("div",x,[a(s(l),{label:"Default",progress:12.5}),a(s(l),{color:"dark",label:"Dark",progress:25}),a(s(l),{color:"blue",label:"Blue",progress:37.5}),a(s(l),{color:"red",label:"Red",progress:50}),a(s(l),{color:"green",label:"Green",progress:62.5}),a(s(l),{color:"yellow",label:"Yellow",progress:75}),a(s(l),{color:"indigo",label:"Indigo",progress:87.5}),a(s(l),{color:"purple",label:"Purple",progress:100})]))}},z={__name:"FwbProgressExampleLabelInside",setup(n){return(e,t)=>(p(),_(s(l),{progress:50,"label-position":"inside","label-progress":"",size:"lg"}))}},S={__name:"FwbProgressExampleLabelOutside",setup(n){return(e,t)=>(p(),_(s(l),{progress:42,"label-position":"outside","label-progress":"",label:"Flowbite Vue 3"}))}},V={class:"vp-raw grid gap-2"},I={__name:"FwbProgressExampleSize",setup(n){return(e,t)=>(p(),r("div",V,[a(s(l),{progress:25,label:"Small",size:"sm"}),a(s(l),{progress:50,label:"Medium",size:"md"}),a(s(l),{progress:75,label:"Large",size:"lg"}),a(s(l),{progress:100,label:"Extra Large",size:"xl"})]))}},N=c("h1",{id:"vue-progress-bar-flowbite",tabindex:"-1"},[b("Vue Progress Bar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-progress-bar-flowbite","aria-label":'Permalink to "Vue Progress Bar - Flowbite"'},"​")],-1),$=c("h2",{id:"default",tabindex:"-1"},[b("Default "),c("a",{class:"header-anchor",href:"#default","aria-label":'Permalink to "Default"'},"​")],-1),L=E("",3),R=E("",3),Y=E("",3),W=E("",3),G=E("",1),J=JSON.parse('{"title":"Vue Progress Bar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/progress.md","filePath":"components/progress.md"}'),M={name:"components/progress.md"},Q=Object.assign(M,{setup(n){return(e,t)=>(p(),r("div",null,[N,$,a(P),L,a(I),R,a(z),Y,a(S),W,a(T),G]))}});export{J as __pageData,Q as default};

335
docs/.vitepress/dist/assets/components_radio.md.b618a9a7.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_radio.md.b618a9a7.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

41
docs/.vitepress/dist/assets/components_range.md.9320c947.js vendored Normal file
View File

@@ -0,0 +1,41 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as _,d as h,$ as f,o as i,c as u,k as m,t as g,n as v,l as p,a0 as q,a5 as C,_ as w,h as E,H as n,Q as d}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";const A="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",D="block mb-2 text-sm font-medium text-gray-900 dark:text-white",V={lg:"h-3 range-lg",md:"h-2 range-md",sm:"h-1 range-sm"};function T(o){const s=_(()=>B(A,V[o.size.value])),l=_(()=>D);return{rangeClasses:s,labelClasses:l}}const x={class:"flex flex-col"},S=["step","min","max","disabled"],k=h({__name:"FwbRange",props:{disabled:{type:Boolean,default:!1},label:{default:"Range slider"},max:{default:100},min:{default:0},modelValue:{default:50},size:{default:"md"},steps:{default:1}},emits:["update:modelValue"],setup(o,{emit:s}){const l=o,a=s,e=_({get(){return l.modelValue},set(c){a("update:modelValue",c)}}),{rangeClasses:t,labelClasses:r}=T(f(l));return(c,b)=>(i(),u("label",x,[m("span",{class:v(p(r))},g(c.label),3),q(m("input",{"onUpdate:modelValue":b[0]||(b[0]=F=>e.value=F),step:c.steps,min:c.min,max:c.max,disabled:c.disabled,type:"range",class:v(p(t))},null,10,S),[[C,e.value]])]))}}),y=w(k,[["__scopeId","data-v-fadec9c5"]]),z={class:"vp-raw"},P={__name:"FwbRangeExample",setup(o){const s=E(10);return(l,a)=>(i(),u("div",z,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0}},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},R={class:"vp-raw"},M={__name:"FwbRangeExampleDisabled",setup(o){const s=E(10);return(l,a)=>(i(),u("div",R,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},disabled:"",label:"Disabled range"},null,8,["modelValue"])]))}},I={class:"vp-raw"},$={__name:"FwbRangeExampleMinMax",setup(o){const s=E(10);return(l,a)=>(i(),u("div",I,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},max:15,min:5,label:"Min-max range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},N={class:"vp-raw grid gap-3"},U={__name:"FwbRangeExampleSize",setup(o){const s=E(10),l=E(10),a=E(10);return(e,t)=>(i(),u("div",N,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),modelModifiers:{number:!0},label:"Small range",size:"sm"},null,8,["modelValue"]),n(p(y),{modelValue:l.value,"onUpdate:modelValue":t[1]||(t[1]=r=>l.value=r),modelModifiers:{number:!0},label:"Medium range",size:"md"},null,8,["modelValue"]),n(p(y),{modelValue:a.value,"onUpdate:modelValue":t[2]||(t[2]=r=>a.value=r),modelModifiers:{number:!0},label:"Large range",size:"lg"},null,8,["modelValue"])]))}},L={class:"vp-raw"},O={__name:"FwbRangeExampleSteps",setup(o){const s=E(10);return(l,a)=>(i(),u("div",L,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},steps:5,label:"Steps range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},G=d('<h1 id="vue-toggle-range-flowbite" tabindex="-1">Vue Toggle Range - Flowbite <a class="header-anchor" href="#vue-toggle-range-flowbite" aria-label="Permalink to &quot;Vue Toggle Range - Flowbite&quot;">​</a></h1><h4 id="get-started-with-the-range-component-to-receive-a-number-from-the-user-anywhere-from-1-to-100-by-sliding-form-control-horizontally-based-on-multiple-options" tabindex="-1">Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options <a class="header-anchor" href="#get-started-with-the-range-component-to-receive-a-number-from-the-user-anywhere-from-1-to-100-by-sliding-form-control-horizontally-based-on-multiple-options" aria-label="Permalink to &quot;Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/forms/range/" target="_blank" rel="noreferrer">https://flowbite.com/docs/forms/range/</a></p></div><h2 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h2>',5),j=d(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;Current value: {{ value }}&lt;/</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbRange } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">value</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;">10</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;Current value: {{ value }}&lt;/</span><span style="color:#22863A;">pre</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbRange } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">value</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;">10</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="disabled-state" tabindex="-1">Disabled state <a class="header-anchor" href="#disabled-state" aria-label="Permalink to &quot;Disabled state&quot;">​</a></h2>`,2),H=d(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">disabled</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Disabled range&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">disabled</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Disabled range&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="min-and-max" tabindex="-1">Min and Max <a class="header-anchor" href="#min-and-max" aria-label="Permalink to &quot;Min and Max&quot;">​</a></h2>`,2),J=d(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:max</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;15&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:min</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Min-max range&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:max</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;15&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:min</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Min-max range&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="steps" tabindex="-1">Steps <a class="header-anchor" href="#steps" aria-label="Permalink to &quot;Steps&quot;">​</a></h2>`,2),Q=d(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:steps</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Steps range&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:steps</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Steps range&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="sizes" tabindex="-1">Sizes <a class="header-anchor" href="#sizes" aria-label="Permalink to &quot;Sizes&quot;">​</a></h2>`,2),K=d(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value1&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Small range&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sm&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value2&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Medium range&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;md&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-range</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;value3&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Large range&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;lg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value1&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Small range&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sm&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value2&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Medium range&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;md&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-range</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;value3&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Large range&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;lg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),ss=JSON.parse('{"title":"Vue Toggle Range - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/range.md","filePath":"components/range.md"}'),W={name:"components/range.md"},as=Object.assign(W,{setup(o){return(s,l)=>(i(),u("div",null,[G,n(P),j,n(M),H,n($),J,n(O),Q,n(U),K]))}});export{ss as __pageData,as as default};

1
docs/.vitepress/dist/assets/components_range.md.9320c947.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as _,d as h,$ as f,o as i,c as u,k as m,t as g,n as v,l as p,a0 as q,a5 as C,_ as w,h as E,H as n,Q as d}from"./chunks/framework.3f630664.js";import{s as B}from"./chunks/simplifyTailwindClasses.275301d3.js";const A="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700",D="block mb-2 text-sm font-medium text-gray-900 dark:text-white",V={lg:"h-3 range-lg",md:"h-2 range-md",sm:"h-1 range-sm"};function T(o){const s=_(()=>B(A,V[o.size.value])),l=_(()=>D);return{rangeClasses:s,labelClasses:l}}const x={class:"flex flex-col"},S=["step","min","max","disabled"],k=h({__name:"FwbRange",props:{disabled:{type:Boolean,default:!1},label:{default:"Range slider"},max:{default:100},min:{default:0},modelValue:{default:50},size:{default:"md"},steps:{default:1}},emits:["update:modelValue"],setup(o,{emit:s}){const l=o,a=s,e=_({get(){return l.modelValue},set(c){a("update:modelValue",c)}}),{rangeClasses:t,labelClasses:r}=T(f(l));return(c,b)=>(i(),u("label",x,[m("span",{class:v(p(r))},g(c.label),3),q(m("input",{"onUpdate:modelValue":b[0]||(b[0]=F=>e.value=F),step:c.steps,min:c.min,max:c.max,disabled:c.disabled,type:"range",class:v(p(t))},null,10,S),[[C,e.value]])]))}}),y=w(k,[["__scopeId","data-v-fadec9c5"]]),z={class:"vp-raw"},P={__name:"FwbRangeExample",setup(o){const s=E(10);return(l,a)=>(i(),u("div",z,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0}},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},R={class:"vp-raw"},M={__name:"FwbRangeExampleDisabled",setup(o){const s=E(10);return(l,a)=>(i(),u("div",R,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},disabled:"",label:"Disabled range"},null,8,["modelValue"])]))}},I={class:"vp-raw"},$={__name:"FwbRangeExampleMinMax",setup(o){const s=E(10);return(l,a)=>(i(),u("div",I,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},max:15,min:5,label:"Min-max range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},N={class:"vp-raw grid gap-3"},U={__name:"FwbRangeExampleSize",setup(o){const s=E(10),l=E(10),a=E(10);return(e,t)=>(i(),u("div",N,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=r=>s.value=r),modelModifiers:{number:!0},label:"Small range",size:"sm"},null,8,["modelValue"]),n(p(y),{modelValue:l.value,"onUpdate:modelValue":t[1]||(t[1]=r=>l.value=r),modelModifiers:{number:!0},label:"Medium range",size:"md"},null,8,["modelValue"]),n(p(y),{modelValue:a.value,"onUpdate:modelValue":t[2]||(t[2]=r=>a.value=r),modelModifiers:{number:!0},label:"Large range",size:"lg"},null,8,["modelValue"])]))}},L={class:"vp-raw"},O={__name:"FwbRangeExampleSteps",setup(o){const s=E(10);return(l,a)=>(i(),u("div",L,[n(p(y),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=e=>s.value=e),modelModifiers:{number:!0},steps:5,label:"Steps range"},null,8,["modelValue"]),m("pre",null,"Selected value: "+g(s.value),1)]))}},G=d("",5),j=d("",2),H=d("",2),J=d("",2),Q=d("",2),K=d("",1),ss=JSON.parse('{"title":"Vue Toggle Range - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/range.md","filePath":"components/range.md"}'),W={name:"components/range.md"},as=Object.assign(W,{setup(o){return(s,l)=>(i(),u("div",null,[G,n(P),j,n(M),H,n($),J,n(O),Q,n(U),K]))}});export{ss as __pageData,as as default};

87
docs/.vitepress/dist/assets/components_rating.md.1bf1f257.js vendored Normal file
View File

@@ -0,0 +1,87 @@
import{c as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as f,$ as v,o as s,c as a,F as y,D as d,n as _,l as o,r as b,k as n,t as C,e as x,H as l,w as m,a as F,Q as E}from"./chunks/framework.3f630664.js";const q={sm:"w-5 h-5",md:"w-7 h-7",lg:"w-10 h-10"};function A(t){return{sizeClasses:g(()=>w(q[t.size.value]??""))}}const D={class:"flex items-center"},k=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),B=[k],T=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),R=[T],z=n("span",{class:"w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"},null,-1),S=["href"],r=f({__name:"FwbRating",props:{rating:{default:3},reviewLink:{default:""},reviewText:{default:""},scale:{default:5},size:{default:"md"}},setup(t){const p=t,e=g(()=>Math.floor(p.rating)),h=g(()=>p.scale-e.value),{sizeClasses:u}=A(v(p));return(c,Z)=>(s(),a("div",D,[(s(!0),a(y,null,d(e.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-yellow-400"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},B,2))),128)),(s(!0),a(y,null,d(h.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-gray-300 dark:text-gray-500"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R,2))),128)),b(c.$slots,"besideText"),c.reviewText&&c.reviewLink?(s(),a(y,{key:0},[z,n("a",{href:c.reviewLink,class:"text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"},C(c.reviewText),9,S)],64)):x("",!0)]))}}),$={class:"vp-raw"},V={__name:"FwbRatingExample",setup(t){return(p,e)=>(s(),a("div",$,[l(o(r),{rating:4})]))}},P={class:"vp-raw"},N=n("p",{class:"ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"}," 4.75 out of 5 ",-1),I={__name:"FwbRatingExampleWithText",setup(t){return(p,e)=>(s(),a("div",P,[l(o(r),{rating:4.75},{besideText:m(()=>[N]),_:1})]))}},L={class:"vp-raw"},M=n("p",{class:"ml-2 text-sm font-bold text-gray-900 dark:text-white"}," 4.95 ",-1),O={__name:"FwbRatingExampleCount",setup(t){return(p,e)=>(s(),a("div",L,[l(o(r),{rating:1,scale:1,"review-link":"#","review-text":"73 reviews"},{besideText:m(()=>[M]),_:1})]))}},j={class:"vp-raw grid gap-2"},H={__name:"FwbRatingExampleStarSizes",setup(t){return(p,e)=>(s(),a("div",j,[l(o(r),{rating:4,size:"sm"}),l(o(r),{rating:4,size:"md"}),l(o(r),{rating:4,size:"lg"})]))}},J=n("h1",{id:"vue-rating-flowbite",tabindex:"-1"},[F("Vue Rating - Flowbite "),n("a",{class:"header-anchor",href:"#vue-rating-flowbite","aria-label":'Permalink to "Vue Rating - Flowbite"'},"​")],-1),Q=n("h2",{id:"default-rating",tabindex:"-1"},[F("Default rating "),n("a",{class:"header-anchor",href:"#default-rating","aria-label":'Permalink to "Default rating"'},"​")],-1),U=n("p",null,"Use this simple example of a star rating component for showing review results.",-1),W=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbRating } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbRating } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="rating-with-text" tabindex="-1">Rating with text <a class="header-anchor" href="#rating-with-text" aria-label="Permalink to &quot;Rating with text&quot;">​</a></h2><p>If you also want to show a text near the stars you can use this example as a reference.</p>`,3),G=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4.75&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">besideText</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;ml-2 text-sm font-medium text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> 4.75 out of 5</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbRating } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4.75&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">besideText</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;ml-2 text-sm font-medium text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> 4.75 out of 5</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbRating } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="rating-count" tabindex="-1">Rating count <a class="header-anchor" href="#rating-count" aria-label="Permalink to &quot;Rating count&quot;">​</a></h2><p>Aggregate more results by using this example to show the amount of reviews and the average score.</p>`,3),K=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:scale</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">review-link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">review-text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;73 reviews&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">besideText</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;ml-2 text-sm font-bold text-gray-900 dark:text-white&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> 4.95</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbRating } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:scale</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">review-link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">review-text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;73 reviews&quot;</span></span>
<span class="line"><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">besideText</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;ml-2 text-sm font-bold text-gray-900 dark:text-white&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> 4.95</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbRating } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="star-sizes" tabindex="-1">Star sizes <a class="header-anchor" href="#star-sizes" aria-label="Permalink to &quot;Star sizes&quot;">​</a></h2><p>Check out the different sizing options for the star review component from small, medium, and large.</p>`,3),X=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sm&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;md&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-rating</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;lg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:rating</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbRating } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sm&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;md&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-rating</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;lg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:rating</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbRating } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),ns=JSON.parse('{"title":"Vue Rating - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/rating.md","filePath":"components/rating.md"}'),Y={name:"components/rating.md"},ls=Object.assign(Y,{setup(t){return(p,e)=>(s(),a("div",null,[J,Q,U,l(V),W,l(I),G,l(O),K,l(H),X]))}});export{ns as __pageData,ls as default};

1
docs/.vitepress/dist/assets/components_rating.md.1bf1f257.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import{c as w}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g,d as f,$ as v,o as s,c as a,F as y,D as d,n as _,l as o,r as b,k as n,t as C,e as x,H as l,w as m,a as F,Q as E}from"./chunks/framework.3f630664.js";const q={sm:"w-5 h-5",md:"w-7 h-7",lg:"w-10 h-10"};function A(t){return{sizeClasses:g(()=>w(q[t.size.value]??""))}}const D={class:"flex items-center"},k=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),B=[k],T=n("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"},null,-1),R=[T],z=n("span",{class:"w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"},null,-1),S=["href"],r=f({__name:"FwbRating",props:{rating:{default:3},reviewLink:{default:""},reviewText:{default:""},scale:{default:5},size:{default:"md"}},setup(t){const p=t,e=g(()=>Math.floor(p.rating)),h=g(()=>p.scale-e.value),{sizeClasses:u}=A(v(p));return(c,Z)=>(s(),a("div",D,[(s(!0),a(y,null,d(e.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-yellow-400"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},B,2))),128)),(s(!0),a(y,null,d(h.value,i=>(s(),a("svg",{key:i,class:_([o(u),"text-gray-300 dark:text-gray-500"]),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},R,2))),128)),b(c.$slots,"besideText"),c.reviewText&&c.reviewLink?(s(),a(y,{key:0},[z,n("a",{href:c.reviewLink,class:"text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"},C(c.reviewText),9,S)],64)):x("",!0)]))}}),$={class:"vp-raw"},V={__name:"FwbRatingExample",setup(t){return(p,e)=>(s(),a("div",$,[l(o(r),{rating:4})]))}},P={class:"vp-raw"},N=n("p",{class:"ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"}," 4.75 out of 5 ",-1),I={__name:"FwbRatingExampleWithText",setup(t){return(p,e)=>(s(),a("div",P,[l(o(r),{rating:4.75},{besideText:m(()=>[N]),_:1})]))}},L={class:"vp-raw"},M=n("p",{class:"ml-2 text-sm font-bold text-gray-900 dark:text-white"}," 4.95 ",-1),O={__name:"FwbRatingExampleCount",setup(t){return(p,e)=>(s(),a("div",L,[l(o(r),{rating:1,scale:1,"review-link":"#","review-text":"73 reviews"},{besideText:m(()=>[M]),_:1})]))}},j={class:"vp-raw grid gap-2"},H={__name:"FwbRatingExampleStarSizes",setup(t){return(p,e)=>(s(),a("div",j,[l(o(r),{rating:4,size:"sm"}),l(o(r),{rating:4,size:"md"}),l(o(r),{rating:4,size:"lg"})]))}},J=n("h1",{id:"vue-rating-flowbite",tabindex:"-1"},[F("Vue Rating - Flowbite "),n("a",{class:"header-anchor",href:"#vue-rating-flowbite","aria-label":'Permalink to "Vue Rating - Flowbite"'},"​")],-1),Q=n("h2",{id:"default-rating",tabindex:"-1"},[F("Default rating "),n("a",{class:"header-anchor",href:"#default-rating","aria-label":'Permalink to "Default rating"'},"​")],-1),U=n("p",null,"Use this simple example of a star rating component for showing review results.",-1),W=E("",3),G=E("",3),K=E("",3),X=E("",1),ns=JSON.parse('{"title":"Vue Rating - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/rating.md","filePath":"components/rating.md"}'),Y={name:"components/rating.md"},ls=Object.assign(Y,{setup(t){return(p,e)=>(s(),a("div",null,[J,Q,U,l(V),W,l(I),G,l(O),K,l(H),X]))}});export{ns as __pageData,ls as default};

287
docs/.vitepress/dist/assets/components_select.md.654d7864.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_select.md.654d7864.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1259
docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_sidebar.md.8fae9f09.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.js vendored Normal file
View File

@@ -0,0 +1,59 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as n}from"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{o as l,c as o,H as s,l as a,Q as p}from"./chunks/framework.3f630664.js";const r={class:"vp-raw"},E={__name:"FwbSpinnerExample",setup(e){return(t,c)=>(l(),o("div",r,[s(a(n))]))}},i={class:"vp-raw flex items-center gap-2"},y={__name:"FwbSpinnerExampleColor",setup(e){return(t,c)=>(l(),o("div",i,[s(a(n),{color:"blue"}),s(a(n),{color:"gray"}),s(a(n),{color:"green"}),s(a(n),{color:"pink"}),s(a(n),{color:"purple"}),s(a(n),{color:"red"}),s(a(n),{color:"white"}),s(a(n),{color:"yellow"})]))}},d={class:"vp-raw flex items-center gap-2"},u={__name:"FwbSpinnerExampleSize",setup(e){return(t,c)=>(l(),o("div",d,[s(a(n)),s(a(n),{size:"6"}),s(a(n),{size:"8"}),s(a(n),{size:"10"}),s(a(n),{size:"12"})]))}},h=p('<h1 id="vue-spinner-flowbite" tabindex="-1">Vue Spinner - Flowbite <a class="header-anchor" href="#vue-spinner-flowbite" aria-label="Permalink to &quot;Vue Spinner - Flowbite&quot;">​</a></h1><h4 id="use-the-spinner-component-as-a-loader-indicator-in-your-projects-when-fetching-data-based-on-an-animated-svg-using-the-utility-classes-from-tailwind-css" tabindex="-1">Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS <a class="header-anchor" href="#use-the-spinner-component-as-a-loader-indicator-in-your-projects-when-fetching-data-based-on-an-animated-svg-using-the-utility-classes-from-tailwind-css" aria-label="Permalink to &quot;Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS&quot;">​</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/spinner/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/spinner/</a></p></div><p>The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.</p><h2 id="basic-example" tabindex="-1">Basic example <a class="header-anchor" href="#basic-example" aria-label="Permalink to &quot;Basic example&quot;">​</a></h2>',6),_=p(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbSpinner } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbSpinner } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="prop-size" tabindex="-1">Prop - size <a class="header-anchor" href="#prop-size" aria-label="Permalink to &quot;Prop - size&quot;">​</a></h2>`,2),g=p(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;6&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;8&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;10&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;12&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbSpinner } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;6&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;8&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;10&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;12&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbSpinner } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="prop-color" tabindex="-1">Prop - color <a class="header-anchor" href="#prop-color" aria-label="Permalink to &quot;Prop - color&quot;">​</a></h2>`,2),b=p(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;blue&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;gray&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;green&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;pink&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;purple&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;red&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;white&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-spinner</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;yellow&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbSpinner } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;blue&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;gray&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;green&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;pink&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;purple&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;red&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;white&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-spinner</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;yellow&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbSpinner } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table><thead><tr><th>Name</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>color</td><td><code>blue</code>, <code>gray</code>, <code>green</code>, <code>pink</code>, <code>purple</code>, <code>red</code>, <code>white</code>, <code>yellow</code></td><td><code>blue</code></td></tr><tr><td>size</td><td><code>0</code>, <code>0.5</code>, <code>1</code>, <code>1.5</code>, <code>10</code>, <code>11</code>, <code>12</code>, <code>2</code>, <code>2.5</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>, <code>8</code>, <code>9</code></td><td><code>4</code></td></tr></tbody></table>`,4),q=JSON.parse('{"title":"Vue Spinner - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/spinner.md","filePath":"components/spinner.md"}'),F={name:"components/spinner.md"},v=Object.assign(F,{setup(e){return(t,c)=>(l(),o("div",null,[h,s(E),_,s(u),g,s(y),b]))}});export{q as __pageData,v as default};

1
docs/.vitepress/dist/assets/components_spinner.md.37ac3cc2.lean.js vendored Normal file
View File

@@ -0,0 +1 @@
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as n}from"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{o as l,c as o,H as s,l as a,Q as p}from"./chunks/framework.3f630664.js";const r={class:"vp-raw"},E={__name:"FwbSpinnerExample",setup(e){return(t,c)=>(l(),o("div",r,[s(a(n))]))}},i={class:"vp-raw flex items-center gap-2"},y={__name:"FwbSpinnerExampleColor",setup(e){return(t,c)=>(l(),o("div",i,[s(a(n),{color:"blue"}),s(a(n),{color:"gray"}),s(a(n),{color:"green"}),s(a(n),{color:"pink"}),s(a(n),{color:"purple"}),s(a(n),{color:"red"}),s(a(n),{color:"white"}),s(a(n),{color:"yellow"})]))}},d={class:"vp-raw flex items-center gap-2"},u={__name:"FwbSpinnerExampleSize",setup(e){return(t,c)=>(l(),o("div",d,[s(a(n)),s(a(n),{size:"6"}),s(a(n),{size:"8"}),s(a(n),{size:"10"}),s(a(n),{size:"12"})]))}},h=p("",6),_=p("",2),g=p("",2),b=p("",4),q=JSON.parse('{"title":"Vue Spinner - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/spinner.md","filePath":"components/spinner.md"}'),F={name:"components/spinner.md"},v=Object.assign(F,{setup(e){return(t,c)=>(l(),o("div",null,[h,s(E),_,s(u),g,s(y),b]))}});export{q as __pageData,v as default};

469
docs/.vitepress/dist/assets/components_table.md.a270deef.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_table.md.a270deef.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

227
docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_tabs.md.b0c6e412.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

203
docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_textarea.md.b787a2ff.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

519
docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_timeline.md.0bc3fcd0.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

251
docs/.vitepress/dist/assets/components_toast.md.552e0ecb.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_toast.md.552e0ecb.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/.vitepress/dist/assets/components_toastProvider_toastProvider.md.9ae8b914.lean.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More