2 lines
3.4 KiB
JavaScript
2 lines
3.4 KiB
JavaScript
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};
|