2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as i}from"./chunks/useMergeClasses.5cec3a4e.js";import{g as y,d as C,h as x,Y as j,$ as T,o as p,c as o,k as c,n as E,l as a,r as b,t as _,e as S,_ as P,H as s,w as u,a as w,Q as r}from"./chunks/framework.3f630664.js";const f={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},q={default:"rounded",rounded:"rounded-full"},z="ring-2 ring-gray-300 dark:ring-gray-500 p-1",$="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",V={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},I={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},N="absolute w-auto h-auto text-gray-400",M="flex overflow-hidden relative justify-center items-center",R="bg-gray-100 dark:bg-gray-600",J="font-medium text-gray-600 dark:text-gray-300",U={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function W(n){const t=y(()=>i([f[n.size.value],q[n.rounded.value?"rounded":"default"],n.bordered.value?z:"",n.stacked.value?"border-2 border-white dark:border-gray-800":""])),e=y(()=>{const m=`${n.statusPosition.value}-${n.rounded.value?"rounded":"default"}`;return i([$,V[n.status.value],I[m]])}),g=y(()=>i([N,U[n.size.value]])),d=y(()=>i([M,f[n.size.value],q[n.rounded.value?"rounded":"default"],n.img.value&&n.bordered.value?"":R,n.bordered.value?" overflow-visible":""])),F=y(()=>i([J]));return{avatarClasses:t,avatarDotClasses:e,avatarPlaceholderClasses:g,avatarPlaceholderInitialsClasses:F,avatarPlaceholderWrapperClasses:d}}const H={class:"relative"},O=["alt","src"],G=c("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1),Q=[G],Y=["data-pos"],l=C({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(n){const t=x(!1);function e(){t.value=!0}const g=j(),d=y(()=>g.placeholder),F=n,{avatarClasses:m,avatarDotClasses:B,avatarPlaceholderClasses:v,avatarPlaceholderInitialsClasses:A,avatarPlaceholderWrapperClasses:D}=W(T(F));return(k,Is)=>(p(),o("div",H,[c("div",{class:E(a(D))},[n.img&&!t.value?(p(),o("img",{key:0,alt:n.alt,class:E(a(m)),src:n.img,onError:e},null,42,O)):!n.initials&&d.value?(p(),o("div",{key:1,class:E(a(v))},[b(k.$slots,"placeholder")],2)):!n.img&&!n.initials?(p(),o("svg",{key:2,class:E(a(v)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Q,2)):(p(),o("div",{key:3,class:E(a(A))},_(n.initials),3))],2),n.status?(p(),o("span",{key:0,class:E(a(B)),"data-pos":n.statusPosition},null,10,Y)):S("",!0)]))}}),K={},L={class:"flex -space-x-4"};function X(n,t){return p(),o("div",L,[b(n.$slots,"default")])}const h=P(K,[["render",X]]),Z=["href"],ss=C({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(n){return(t,e)=>(p(),o("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:n.href},"+"+_(n.total),9,Z))}}),as={class:"vp-raw flex justify-center space-x-4"},ns={__name:"FwbAvatarExample",setup(n){return(t,e)=>(p(),o("div",as,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},ls={class:"vp-raw flex justify-center"},ps={__name:"FwbAvatarExampleAlt",setup(n){return(t,e)=>(p(),o("div",ls,[s(a(l),{alt:"Alternative text",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},os={class:"vp-raw flex justify-center space-x-4"},ts={__name:"FwbAvatarExampleBordered",setup(n){return(t,e)=>(p(),o("div",os,[s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},es={class:"vp-raw flex justify-center space-x-4"},cs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Es={__name:"FwbAvatarExampleIcon",setup(n){return(t,e)=>(p(),o("div",es,[s(a(l),null,{placeholder:u(()=>[cs]),_:1}),s(a(l),{rounded:""},{placeholder:u(()=>[rs]),_:1})]))}},ys={class:"vp-raw flex justify-center space-x-4"},is={__name:"FwbAvatarExampleInitials",setup(n){return(t,e)=>(p(),o("div",ys,[s(a(l),{initials:"JD"}),s(a(l),{initials:"JD",rounded:""})]))}},us={class:"vp-raw flex justify-center space-x-4"},gs={__name:"FwbAvatarExamplePlaceholder",setup(n){return(t,e)=>(p(),o("div",us,[s(a(l)),s(a(l),{rounded:""})]))}},ds={class:"vp-raw flex justify-center items-center space-x-4"},Fs={__name:"FwbAvatarExampleSize",setup(n){return(t,e)=>(p(),o("div",ds,[s(a(l),{size:"xs",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"sm",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"md",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"lg",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"xl",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},ms={class:"vp-raw grid gap-2"},vs={__name:"FwbAvatarExampleStack",setup(n){return(t,e)=>(p(),o("div",ms,[s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"",stacked:""})]),_:1}),s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(ss),{href:"#",total:99})]),_:1})]))}},fs={class:"vp-raw flex justify-center space-x-4"},qs={__name:"FwbAvatarExampleStatus",setup(n){return(t,e)=>(p(),o("div",fs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"busy"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"away"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"offline"})]))}},hs={class:"vp-raw flex justify-center space-x-4"},Cs={__name:"FwbAvatarExampleStatusPosition",setup(n){return(t,e)=>(p(),o("div",hs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-right",status:"online"})]))}},bs=c("h1",{id:"vue-avatar-flowbite",tabindex:"-1"},[w("Vue Avatar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-avatar-flowbite","aria-label":'Permalink to "Vue Avatar - Flowbite"'},"")],-1),_s=c("p",null,"Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes",-1),ws=c("h2",{id:"default-avatar",tabindex:"-1"},[w("Default avatar "),c("a",{class:"header-anchor",href:"#default-avatar","aria-label":'Permalink to "Default avatar"'},"")],-1),Bs=c("p",null,"Use this example to create a circle and rounded avatar on an image element.",-1),As=r("",3),Ds=r("",3),ks=r("",2),xs=r("",3),js=r("",2),Ts=r("",3),Ss=r("",2),Ps=r("",2),zs=r("",3),$s=r("",1),Js=JSON.parse('{"title":"Vue Avatar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md"}'),Vs={name:"components/avatar.md"},Us=Object.assign(Vs,{setup(n){return(t,e)=>(p(),o("div",null,[bs,_s,ws,Bs,s(ns),As,s(ts),Ds,s(qs),ks,s(Cs),xs,s(Fs),js,s(ps),Ts,s(vs),Ss,s(gs),Ps,s(is),zs,s(Es),$s]))}});export{Js as __pageData,Us as default};
|