2 lines
5.5 KiB
JavaScript
2 lines
5.5 KiB
JavaScript
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as V}from"./chunks/simplifyTailwindClasses.275301d3.js";import{g as u,d as T,o,c as e,k as c,n as m,l as t,t as b,r as C,a as z,h as g,H as r,w as I,F as S,D as P,e as $,Q as F}from"./chunks/framework.3f630664.js";import{i as U}from"./chunks/isArray.513c67aa.js";const N="block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",G="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600",L="flex flex-col items-center justify-center pt-5 pb-6",M="!-mb-2 text-sm text-gray-500 dark:text-gray-400";function H(E){const s=u(()=>V(N,"text-"+E)),p=u(()=>G),l=u(()=>j),n=u(()=>L),y=u(()=>M);return{fileInpClasses:s,labelClasses:p,dropzoneLabelClasses:l,dropzoneWrapClasses:n,dropzoneTextClasses:y}}const O={key:0},R=["multiple"],J=c("svg",{"aria-hidden":"true",class:"w-8 h-8 text-gray-500 dark:text-gray-400",fill:"none",viewBox:"0 0 20 16",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor"})],-1),W={key:0},X=c("span",{class:"font-semibold"},"Click to upload",-1),Z={key:1},Q=["multiple"],d=T({__name:"FwbFileInput",props:{dropzone:{type:Boolean,default:!1},label:{default:""},modelValue:{default:null},multiple:{type:Boolean,default:!1},size:{default:"sm"}},emits:["update:modelValue"],setup(E,{emit:s}){const p=E,l=u(()=>U(p.modelValue)?p.modelValue.map(a=>a.name).join(", "):p.modelValue instanceof FileList?Array.from(p.modelValue).map(a=>a.name).join(","):p.modelValue instanceof File&&p.modelValue.name||""),n=s,y=u({get(){return p.modelValue},set(a){n("update:modelValue",a)}}),v=a=>{var f;const i=a.target;p.multiple?y.value=Array.from(i.files??[]):y.value=((f=i.files)==null?void 0:f[0])??null},q=a=>{var f,h;a.preventDefault();const i=[];(f=a.dataTransfer)!=null&&f.items?(Object.values(a.dataTransfer.items).forEach(_=>{_.kind==="file"&&i.push(_.getAsFile())}),p.multiple?y.value=i:y.value=i[0]):(h=a.dataTransfer)!=null&&h.files&&Object.values(a.dataTransfer.files).forEach(_=>{y.value=_})},A=a=>{a.preventDefault()},{fileInpClasses:D,labelClasses:B,dropzoneLabelClasses:w,dropzoneWrapClasses:x,dropzoneTextClasses:k}=H(p.size);return(a,i)=>(o(),e("div",null,[a.dropzone?(o(),e("div",{key:1,class:"flex items-center justify-center",onChange:v,onDragover:A,onDrop:q},[c("label",{class:m(t(w))},[c("div",{class:m(t(x))},[J,y.value?(o(),e("p",Z,"File: "+b(l.value),1)):(o(),e("div",W,[c("p",{class:m(t(k))},[X,z(" or drag and drop ")],2),C(a.$slots,"default")]))],2),c("input",{multiple:a.multiple,type:"file",class:"hidden"},null,8,Q)],2)],32)):(o(),e("div",O,[c("label",null,[c("span",{class:m(t(B))},b(a.label),3),c("input",{class:m(t(D)),multiple:a.multiple,type:"file",onChange:v},null,42,R)]),C(a.$slots,"default")]))]))}}),K={class:"vp-raw"},Y={__name:"FwbFileInputExample",setup(E){const s=g(null);return(p,l)=>(o(),e("div",K,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},null,8,["modelValue"])]))}},ss={class:"vp-raw"},ls=c("p",{class:"!mt-1 text-sm text-gray-500 dark:text-gray-300"}," SVG, PNG, JPG or GIF (MAX. 800x400px). ",-1),as={__name:"FwbFileInputExampleHelper",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ss,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},{default:I(()=>[ls]),_:1},8,["modelValue"])]))}},ns={class:"vp-raw grid gap-2"},ps={__name:"FwbFileInputExampleSize",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ns,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),size:"xs",label:"Small size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=n=>s.value=n),size:"sm",label:"Default size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=n=>s.value=n),size:"lg",label:"Large size"},null,8,["modelValue"])]))}},os={class:"vp-raw"},es={__name:"FwbFileInputExampleDropZone",setup(E){const s=g(null);return(p,l)=>(o(),e("div",os,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),dropzone:""},null,8,["modelValue"])]))}},ts={class:"vp-raw"},rs={key:0,class:"mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md"},cs={__name:"FwbFileInputExampleMultiple",setup(E){const s=g([]);return(p,l)=>(o(),e("div",ts,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file",multiple:""},null,8,["modelValue"]),s.value.length!==0?(o(),e("div",rs,[(o(!0),e(S,null,P(s.value,n=>(o(),e("div",{key:n},b(n.name),1))),128))])):$("",!0)]))}},Es=F("",4),ys=F("",2),is=F("",2),us=F("",2),ds=F("",2),Fs=F("",1),vs=JSON.parse('{"title":"Vue FileInput - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/fileInput.md","filePath":"components/fileInput.md"}'),fs={name:"components/fileInput.md"},hs=Object.assign(fs,{setup(E){return(s,p)=>(o(),e("div",null,[Es,r(Y),ys,r(cs),is,r(as),us,r(ps),ds,r(es),Fs]))}});export{vs as __pageData,hs as default};
|