2 lines
6.3 KiB
JavaScript
2 lines
6.3 KiB
JavaScript
import{t as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{g as q,d as _,$ as k,o as t,c,k as m,n as C,l as r,t as b,e as g,a0 as V,a6 as T,a7 as x,F as P,D as U,r as S,h as F,H as p,w as B,a as v,Q as u}from"./chunks/framework.3f630664.js";import{a as z}from"./chunks/index.b15c605d.js";import{_ as $}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import"./chunks/index.6b4d4439.js";const i={Success:"success",Error:"error"},I="block mb-2 text-sm font-medium",N="w-full text-gray-900 bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",R="cursor-not-allowed bg-gray-100",M="bg-transparent dark:bg-transparent border-b-2 border-gray-200 appearance-none dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer",H={lg:"p-4",md:"p-2.5 text-sm",sm:"p-2 text-sm"},W="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",O="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 Y(o){const a=q(()=>{const e=o.validationStatus.value,s=e===i.Success?W:e===i.Error?O:"",l=e===i.Success?"focus:border-green-500":e===i.Error?"focus:border-red-500":"";return f(N,s,H[o.size.value],o.disabled.value&&R,o.underline.value?M:"border border-gray-300 rounded-lg",o.underline.value&&l)}),n=q(()=>{const e=o.validationStatus.value,s=e===i.Success?"text-green-700 dark:text-green-500":e===i.Error?"text-red-700 dark:text-red-500":"text-gray-900 dark:text-white";return f(I,s)});return{selectClasses:a,labelClasses:n}}const G=["disabled"],L={disabled:"",selected:"",value:""},j=["value"],J={key:1,class:"mt-2 text-sm text-gray-500 dark:text-gray-400"},y=_({__name:"FwbSelect",props:{modelValue:{default:""},label:{default:""},options:{default:()=>[]},placeholder:{default:"Please select one"},disabled:{type:Boolean,default:!1},underline:{type:Boolean,default:!1},size:{default:"md"},validationStatus:{default:void 0}},emits:["update:modelValue"],setup(o,{emit:a}){const n=o,s=z(n,"modelValue",a),{selectClasses:l,labelClasses:A}=Y(k(n)),D=q(()=>f("mt-2 text-sm",n.validationStatus===i.Success?"text-green-600 dark:text-green-500":"",n.validationStatus===i.Error?"text-red-600 dark:text-red-500":""));return(E,h)=>(t(),c("div",null,[m("label",null,[E.label?(t(),c("span",{key:0,class:C(r(A))},b(E.label),3)):g("",!0),V(m("select",{"onUpdate:modelValue":h[0]||(h[0]=d=>x(s)?s.value=d:null),disabled:E.disabled,class:C(r(l))},[m("option",L,b(E.placeholder),1),(t(!0),c(P,null,U(E.options,(d,w)=>(t(),c("option",{key:w,value:d.value},b(d.name),9,j))),128))],10,G),[[T,r(s)]])]),E.$slots.validationMessage?(t(),c("p",{key:0,class:C(D.value)},[S(E.$slots,"validationMessage")],2)):g("",!0),E.$slots.helper?(t(),c("p",J,[S(E.$slots,"helper")])):g("",!0)]))}}),Q={class:"vp-raw"},K={__name:"FwbSelectExample",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Q,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},null,8,["modelValue"])]))}},X={__name:"FwbSelectExampleDisabled",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",null,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,disabled:"",label:"Select a country",placeholder:"You can't select"},null,8,["modelValue"])]))}},Z={class:"vp-raw"},ss=_({__name:"FwbSelectExampleHelper",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",Z,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country"},{helper:B(()=>[v(" We'll never share your details. Read our "),p(r($),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:B(()=>[v(" Privacy Policy ")]),_:1}),v(". ")]),_:1},8,["modelValue"])]))}}),as={class:"vp-raw grid gap-2"},ns={__name:"FwbSelectExampleSize",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",as,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",size:"sm"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country",size:"md"},null,8,["modelValue"]),p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[2]||(s[2]=l=>a.value=l),options:n,label:"Select a country",size:"lg"},null,8,["modelValue"])]))}},ls={class:"vp-raw"},ps={__name:"FwbSelectExampleUnderlined",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",ls,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country",underline:""},null,8,["modelValue"])]))}},os={class:"vp-raw"},es=m("hr",{class:"mt-4 border-0"},null,-1),ts=_({__name:"FwbSelectExampleValidation",setup(o){const a=F(""),n=[{value:"us",name:"United States"},{value:"ca",name:"Canada"},{value:"fr",name:"France"}];return(e,s)=>(t(),c("div",os,[p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[0]||(s[0]=l=>a.value=l),options:n,label:"Select a country","validation-status":"success"},null,8,["modelValue"]),es,p(r(y),{modelValue:a.value,"onUpdate:modelValue":s[1]||(s[1]=l=>a.value=l),options:n,label:"Select a country","validation-status":"error"},{validationMessage:B(()=>[v(" Please select a country ")]),_:1},8,["modelValue"])]))}}),cs=u("",6),rs=u("",2),Es=u("",2),ys=u("",2),is=u("",2),us=u("",3),Fs=u("",1),fs=JSON.parse('{"title":"Vue Select - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/select.md","filePath":"components/select.md"}'),ds={name:"components/select.md"},qs=Object.assign(ds,{setup(o){return(a,n)=>(t(),c("div",null,[cs,p(K),rs,p(X),Es,p(ps),ys,p(ns),is,p(ss),us,p(ts),Fs]))}});export{fs as __pageData,qs as default};
|