1import{o as i,c as m,b as a,e as r,m as n,bg as g,t as e,bh as A,b5 as f,b3 as _,b4 as b,bp as I,d as s,f as S}from"./index-BJiotQ1y.js";import{_ as V}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{V as d}from"./VImg-CEdg-vTA.js";import{V as u}from"./VTooltip-DmA7vLY3.js";import{V as o}from"./VAvatar-Bj_eSgFO.js";import{_ as E}from"./AppCardCode-CcXt1CXD.js";import{V as D}from"./VRow-BaWP5n9q.js";import{V as p}from"./VCol-Bwtue8I5.js";import"./VOverlay-Dzxa60iL.js";import"./easing-CjukEv2V.js";import"./delay-BAExgEeO.js";import"./lazy-CecdQcFC.js";import"./scopeId-CzFWNpQy.js";import"./forwardRefs-C-GTDzx5.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VCard-ImMJge73.js";import"./VCardText-Ds77CzhY.js";import"./VDivider-niEB_qmK.js";/* empty css */const N={class:"v-avatar-group demo-avatar-group"},R={__name:"DemoAvatarGroup",setup(v){return(t,l)=>(i(),m("div",N,[a(o,{size:40},{default:r(()=>[a(d,{src:n(g)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[0]||(l[0]=[e(" John Doe ")])),_:1})]),_:1}),a(o,{size:40},{default:r(()=>[a(d,{src:n(A)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[1]||(l[1]=[e(" Jennie Obrien ")])),_:1})]),_:1}),a(o,{size:40},{default:r(()=>[a(d,{src:n(f)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[2]||(l[2]=[e(" Peter Harper ")])),_:1})]),_:1}),a(o,{size:40},{default:r(()=>[a(d,{src:n(_)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[3]||(l[3]=[e(" Vivian Padilla ")])),_:1})]),_:1}),a(o,{size:40},{default:r(()=>[a(d,{src:n(b)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[4]||(l[4]=[e(" Scott Wells ")])),_:1})]),_:1}),a(o,{size:40},{default:r(()=>[a(d,{src:n(I)},null,8,["src"]),a(u,{activator:"parent",location:"top"},{default:r(()=>l[5]||(l[5]=[e(" Angel Bishop ")])),_:1})]),_:1}),a(o,{size:40,color:t.$vuetify.theme.current.dark?"#373b50":"#eeedf0"},{default:r(()=>l[6]||(l[6]=[e(" +3 ")])),_:1},8,["color"])]))}},U=V(R,[["__scopeId","data-v-51974b3d"]]),W={class:"demo-space-x"},k={__name:"DemoAvatarImages",setup(v){return(t,l)=>(i(),m("div",W,[a(o,{image:n(g)},null,8,["image"]),a(o,{image:n(A)},null,8,["image"]),a(o,{image:n(f)},null,8,["image"]),a(o,{image:n(_)},null,8,["image"]),a(o,{image:n(b)},null,8,["image"]),a(o,{image:n(I)},null,8,["image"])]))}},j={},B={class:"demo-space-x"};function C(v,t){return i(),m("div",B,[a(o,{rounded:"0",color:"primary",icon:"tabler-user"}),a(o,{rounded:"sm",color:"secondary",icon:"tabler-user"}),a(o,{rounded:"",color:"success",icon:"tabler-user"}),a(o,{rounded:"lg",color:"info",icon:"tabler-user"}),a(o,{rounded:"xl",color:"warning",icon:"tabler-user"}),a(o,{color:"error",icon:"tabler-user"})])}const J=V(j,[["render",C]]),G={},H={class:"demo-space-x"};function O(v,t){return i(),m("div",H,[a(o,{color:"primary",icon:"tabler-home"}),a(o,{color:"secondary",icon:"tabler-cloud"}),a(o,{color:"success",icon:"tabler-bell"}),a(o,{color:"info",icon:"tabler-user"}),a(o,{color:"warning",icon:"tabler-alert-circle"}),a(o,{color:"error",icon:"tabler-message"})])}const Y=V(G,[["render",O]]),q={},F={class:"demo-space-x"};function K(v,t){return i(),m("div",F,[a(o,{color:"primary",size:"x-small"},{default:r(()=>t[0]||(t[0]=[s("small",null,"PI",-1)])),_:1}),a(o,{color:"secondary",size:"small"},{default:r(()=>t[1]||(t[1]=[e(" PI ")])),_:1}),a(o,{color:"success"},{default:r(()=>t[2]||(t[2]=[e(" PI ")])),_:1}),a(o,{color:"info",size:"large"},{default:r(()=>t[3]||(t[3]=[s("span",{class:"text-lg"},"PI",-1)])),_:1}),a(o,{color:"error",size:"x-large"},{default:r(()=>t[4]||(t[4]=[s("span",{class:"text-lg"},"PI",-1)])),_:1})])}const L=V(q,[["render",K]]),M={},Q={class:"demo-space-x"};function X(v,t){return i(),m("div",Q,[a(o,{color:"primary",variant:"tonal"},{default:r(()=>t[0]||(t[0]=[e(" PI ")])),_:1}),a(o,{color:"secondary",variant:"tonal"},{default:r(()=>t[1]||(t[1]=[e(" SE ")])),_:1}),a(o,{color:"success",variant:"tonal"},{default:r(()=>t[2]||(t[2]=[e(" SU ")])),_:1}),a(o,{color:"info",variant:"tonal"},{default:r(()=>t[3]||(t[3]=[e(" IN ")])),_:1}),a(o,{color:"warning",variant:"tonal"},{default:r(()=>t[4]||(t[4]=[e(" WA ")])),_:1}),a(o,{color:"error",variant:"tonal"},{default:r(()=>t[5]||(t[5]=[e(" ER ")])),_:1})])}const Z=V(M,[["render",X]]),h={},aa={class:"demo-space-x"};function ra(v,t){return i(),m("div",aa,[a(o,{color:"primary"},{default:r(()=>t[0]||(t[0]=[e(" PI ")])),_:1}),a(o,{color:"secondary"},{default:r(()=>t[1]||(t[1]=[e(" SE ")])),_:1}),a(o,{color:"success"},{default:r(()=>t[2]||(t[2]=[e(" SU ")])),_:1}),a(o,{color:"info"},{default:r(()=>t[3]||(t[3]=[e(" IN ")])),_:1}),a(o,{color:"warning"},{default:r(()=>t[4]||(t[4]=[e(" WA ")])),_:1}),a(o,{color:"error"},{default:r(()=>t[5]||(t[5]=[e(" ER ")])),_:1})])}const ta=V(h,[["render",ra]]),oa={ts:`<template> 2 <div class="demo-space-x"> 3 <VAvatar color="primary"> 4 PI 5 </VAvatar> 6 7 <VAvatar color="secondary"> 8 SE 9 </VAvatar> 10 11 <VAvatar color="success"> 12 SU 13 </VAvatar> 14 15 <VAvatar color="info"> 16 IN 17 </VAvatar> 18 19 <VAvatar color="warning"> 20 WA 21 </VAvatar> 22 23 <VAvatar color="error"> 24 ER 25 </VAvatar> 26 </div> 27</template> 28`,js:`<template> 29 <div class="demo-space-x"> 30 <VAvatar color="primary"> 31 PI 32 </VAvatar> 33 34 <VAvatar color="secondary"> 35 SE 36 </VAvatar> 37 38 <VAvatar color="success"> 39 SU 40 </VAvatar> 41 42 <VAvatar color="info"> 43 IN 44 </VAvatar> 45 46 <VAvatar color="warning"> 47 WA 48 </VAvatar> 49 50 <VAvatar color="error"> 51 ER 52 </VAvatar> 53 </div> 54</template> 55`},ea={ts:`<script setup lang="ts">
56import avatar1 from '@images/avatars/avatar-1.png' 57import avatar2 from '@images/avatars/avatar-2.png' 58import avatar3 from '@images/avatars/avatar-3.png' 59import avatar4 from '@images/avatars/avatar-4.png' 60import avatar5 from '@images/avatars/avatar-5.png' 61import avatar6 from '@images/avatars/avatar-6.png' 62<\/script> 63 64<template> 65 <div class="v-avatar-group demo-avatar-group"> 66 <VAvatar :size="40"> 67 <VImg :src="avatar1" /> 68 <VTooltip 69 activator="parent" 70 location="top" 71 > 72 John Doe 73 </VTooltip> 74 </VAvatar> 75 76 <VAvatar :size="40"> 77 <VImg :src="avatar2" /> 78 <VTooltip 79 activator="parent" 80 location="top" 81 > 82 Jennie Obrien 83 </VTooltip> 84 </VAvatar> 85 86 <VAvatar :size="40"> 87 <VImg :src="avatar3" /> 88 <VTooltip 89 activator="parent" 90 location="top" 91 > 92 Peter Harper 93 </VTooltip> 94 </VAvatar> 95 96 <VAvatar :size="40"> 97 <VImg :src="avatar4" /> 98 <VTooltip 99 activator="parent" 100 location="top" 101 > 102 Vivian Padilla 103 </VTooltip> 104 </VAvatar> 105 106 <VAvatar :size="40"> 107 <VImg :src="avatar5" /> 108 <VTooltip 109 activator="parent" 110 location="top" 111 > 112 Scott Wells 113 </VTooltip> 114 </VAvatar> 115 116 <VAvatar :size="40"> 117 <VImg :src="avatar6" /> 118 <VTooltip 119 activator="parent" 120 location="top" 121 > 122 Angel Bishop 123 </VTooltip> 124 </VAvatar> 125 126 <VAvatar 127 :size="40" 128 :color="$vuetify.theme.current.dark ? '#373b50' : '#eeedf0'" 129 > 130 +3 131 </VAvatar> 132 </div> 133</template> 134 135<style lang="scss" scoped> 136.demo-avatar-group { 137 &.v-avatar-group { 138 .v-avatar { 139 &:last-child { 140 border: none; 141 } 142 } 143 } 144} 145</style> 146`,js:`<script setup> 147import avatar1 from '@images/avatars/avatar-1.png' 148import avatar2 from '@images/avatars/avatar-2.png' 149import avatar3 from '@images/avatars/avatar-3.png' 150import avatar4 from '@images/avatars/avatar-4.png' 151import avatar5 from '@images/avatars/avatar-5.png' 152import avatar6 from '@images/avatars/avatar-6.png' 153<\/script> 154 155<template> 156 <div class="v-avatar-group demo-avatar-group"> 157 <VAvatar :size="40"> 158 <VImg :src="avatar1" /> 159 <VTooltip 160 activator="parent" 161 location="top" 162 > 163 John Doe 164 </VTooltip> 165 </VAvatar> 166 167 <VAvatar :size="40"> 168 <VImg :src="avatar2" /> 169 <VTooltip 170 activator="parent" 171 location="top" 172 > 173 Jennie Obrien 174 </VTooltip> 175 </VAvatar> 176 177 <VAvatar :size="40"> 178 <VImg :src="avatar3" /> 179 <VTooltip 180 activator="parent" 181 location="top" 182 > 183 Peter Harper 184 </VTooltip> 185 </VAvatar> 186 187 <VAvatar :size="40"> 188 <VImg :src="avatar4" /> 189 <VTooltip 190 activator="parent" 191 location="top" 192 > 193 Vivian Padilla 194 </VTooltip> 195 </VAvatar> 196 197 <VAvatar :size="40"> 198 <VImg :src="avatar5" /> 199 <VTooltip 200 activator="parent" 201 location="top" 202 > 203 Scott Wells 204 </VTooltip> 205 </VAvatar> 206 207 <VAvatar :size="40"> 208 <VImg :src="avatar6" /> 209 <VTooltip 210 activator="parent" 211 location="top" 212 > 213 Angel Bishop 214 </VTooltip> 215 </VAvatar> 216 217 <VAvatar 218 :size="40" 219 :color="$vuetify.theme.current.dark ? '#373b50' : '#eeedf0'" 220 > 221 +3 222 </VAvatar> 223 </div> 224</template> 225 226<style lang="scss" scoped> 227.demo-avatar-group { 228 &.v-avatar-group { 229 .v-avatar { 230 &:last-child { 231 border: none; 232 } 233 } 234 } 235} 236</style> 237`},la={ts:`<template> 238 <div class="demo-space-x"> 239 <VAvatar 240 color="primary" 241 icon="tabler-home" 242 /> 243 244 <VAvatar 245 color="secondary" 246 icon="tabler-cloud" 247 /> 248 249 <VAvatar 250 color="success" 251 icon="tabler-bell" 252 /> 253 254 <VAvatar 255 color="info" 256 icon="tabler-user" 257 /> 258 259 <VAvatar 260 color="warning" 261 icon="tabler-alert-circle" 262 /> 263 264 <VAvatar 265 color="error" 266 icon="tabler-message" 267 /> 268 </div> 269</template> 270`,js:`<template> 271 <div class="demo-space-x"> 272 <VAvatar 273 color="primary" 274 icon="tabler-home" 275 /> 276 277 <VAvatar 278 color="secondary" 279 icon="tabler-cloud" 280 /> 281 282 <VAvatar 283 color="success" 284 icon="tabler-bell" 285 /> 286 287 <VAvatar 288 color="info" 289 icon="tabler-user" 290 /> 291 292 <VAvatar 293 color="warning" 294 icon="tabler-alert-circle" 295 /> 296 297 <VAvatar 298 color="error" 299 icon="tabler-message" 300 /> 301 </div> 302</template> 303`},sa={ts:`<script setup lang="ts">
304import avatar1 from '@images/avatars/avatar-1.png' 305import avatar2 from '@images/avatars/avatar-2.png' 306import avatar3 from '@images/avatars/avatar-3.png' 307import avatar4 from '@images/avatars/avatar-4.png' 308import avatar5 from '@images/avatars/avatar-5.png' 309import avatar6 from '@images/avatars/avatar-6.png' 310<\/script> 311 312<template> 313 <div class="demo-space-x"> 314 <VAvatar :image="avatar1" /> 315 316 <VAvatar :image="avatar2" /> 317 318 <VAvatar :image="avatar3" /> 319 320 <VAvatar :image="avatar4" /> 321 322 <VAvatar :image="avatar5" /> 323 324 <VAvatar :image="avatar6" /> 325 </div> 326</template> 327`,js:`<script setup> 328import avatar1 from '@images/avatars/avatar-1.png' 329import avatar2 from '@images/avatars/avatar-2.png' 330import avatar3 from '@images/avatars/avatar-3.png' 331import avatar4 from '@images/avatars/avatar-4.png' 332import avatar5 from '@images/avatars/avatar-5.png' 333import avatar6 from '@images/avatars/avatar-6.png' 334<\/script> 335 336<template> 337 <div class="demo-space-x"> 338 <VAvatar :image="avatar1" /> 339 340 <VAvatar :image="avatar2" /> 341 342 <VAvatar :image="avatar3" /> 343 344 <VAvatar :image="avatar4" /> 345 346 <VAvatar :image="avatar5" /> 347 348 <VAvatar :image="avatar6" /> 349 </div> 350</template> 351`},na={ts:`<template> 352 <div class="demo-space-x"> 353 <VAvatar 354 rounded="0" 355 color="primary" 356 icon="tabler-user" 357 /> 358 359 <VAvatar 360 rounded="sm" 361 color="secondary" 362 icon="tabler-user" 363 /> 364 365 <VAvatar 366 rounded 367 color="success" 368 icon="tabler-user" 369 /> 370 371 <VAvatar 372 rounded="lg" 373 color="info" 374 icon="tabler-user" 375 /> 376 377 <VAvatar 378 rounded="xl" 379 color="warning" 380 icon="tabler-user" 381 /> 382 383 <VAvatar 384 color="error" 385 icon="tabler-user" 386 /> 387 </div> 388</template> 389`,js:`<template> 390 <div class="demo-space-x"> 391 <VAvatar 392 rounded="0" 393 color="primary" 394 icon="tabler-user" 395 /> 396 397 <VAvatar 398 rounded="sm" 399 color="secondary" 400 icon="tabler-user" 401 /> 402 403 <VAvatar 404 rounded 405 color="success" 406 icon="tabler-user" 407 /> 408 409 <VAvatar 410 rounded="lg" 411 color="info" 412 icon="tabler-user" 413 /> 414 415 <VAvatar 416 rounded="xl" 417 color="warning" 418 icon="tabler-user" 419 /> 420 421 <VAvatar 422 color="error" 423 icon="tabler-user" 424 /> 425 </div> 426</template> 427`},ia={ts:`<template> 428 <div class="demo-space-x"> 429 <VAvatar 430 color="primary" 431 size="x-small" 432 > 433 <small>PI</small> 434 </VAvatar> 435 436 <VAvatar 437 color="secondary" 438 size="small" 439 > 440 PI 441 </VAvatar> 442 443 <VAvatar color="success"> 444 PI 445 </VAvatar> 446 447 <VAvatar 448 color="info" 449 size="large" 450 > 451 <span class="text-lg">PI</span> 452 </VAvatar> 453 454 <VAvatar 455 color="error" 456 size="x-large" 457 > 458 <span class="text-lg">PI</span> 459 </VAvatar> 460 </div> 461</template> 462`,js:`<template> 463 <div class="demo-space-x"> 464 <VAvatar 465 color="primary" 466 size="x-small" 467 > 468 <small>PI</small> 469 </VAvatar> 470 471 <VAvatar 472 color="secondary" 473 size="small" 474 > 475 PI 476 </VAvatar> 477 478 <VAvatar color="success"> 479 PI 480 </VAvatar> 481 482 <VAvatar 483 color="info" 484 size="large" 485 > 486 <span class="text-lg">PI</span> 487 </VAvatar> 488 489 <VAvatar 490 color="error" 491 size="x-large" 492 > 493 <span class="text-lg">PI</span> 494 </VAvatar> 495 </div> 496</template> 497`},va={ts:`<template> 498 <div class="demo-space-x"> 499 <VAvatar 500 color="primary" 501 variant="tonal" 502 > 503 PI 504 </VAvatar> 505 506 <VAvatar 507 color="secondary" 508 variant="tonal" 509 > 510 SE 511 </VAvatar> 512 <VAvatar 513 color="success" 514 variant="tonal" 515 > 516 SU 517 </VAvatar> 518 <VAvatar 519 color="info" 520 variant="tonal" 521 > 522 IN 523 </VAvatar> 524 <VAvatar 525 color="warning" 526 variant="tonal" 527 > 528 WA 529 </VAvatar> 530 <VAvatar 531 color="error" 532 variant="tonal" 533 > 534 ER 535 </VAvatar> 536 </div> 537</template> 538`,js:`<template> 539 <div class="demo-space-x"> 540 <VAvatar 541 color="primary" 542 variant="tonal" 543 > 544 PI 545 </VAvatar> 546 547 <VAvatar 548 color="secondary" 549 variant="tonal" 550 > 551 SE 552 </VAvatar> 553 <VAvatar 554 color="success" 555 variant="tonal" 556 > 557 SU 558 </VAvatar> 559 <VAvatar 560 color="info" 561 variant="tonal" 562 > 563 IN 564 </VAvatar> 565 <VAvatar 566 color="warning" 567 variant="tonal" 568 > 569 WA 570 </VAvatar> 571 <VAvatar 572 color="error" 573 variant="tonal" 574 > 575 ER 576 </VAvatar> 577 </div> 578</template> 579`},Sa={__name:"avatar",setup(v){return(t,l)=>{const x=ta,c=E,y=Z,z=L,T=Y,P=J,$=k,w=U;return i(),S(D,{class:"match-height"},{default:r(()=>[a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Colors",code:oa},{default:r(()=>[l[0]||(l[0]=s("p",null,[e("Use "),s("code",null,"color"),e(" prop to change the background color of avatar.")],-1)),a(x)]),_:1},8,["code"])]),_:1}),a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Tonal",code:va},{default:r(()=>[l[1]||(l[1]=s("p",null,[e("Use "),s("code",null,'variant="tonal"'),e(" to create light background avatars.")],-1)),a(y)]),_:1},8,["code"])]),_:1}),a(p,{md:"6",cols:"12"},{default:r(()=>[a(c,{title:"Sizes",code:ia},{default:r(()=>[l[2]||(l[2]=s("p",null,[e("The "),s("code",null,"size"),e(" prop allows you to change the height and width of the avatar.")],-1)),a(z)]),_:1},8,["code"])]),_:1}),a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Icons",code:la},{default:r(()=>[l[3]||(l[3]=s("p",null,[e("You can use "),s("code",null,"icon"),e(" prop of "),s("code",null,"v-avatar"),e(" component for rendering icons.")],-1)),a(T)]),_:1},8,["code"])]),_:1}),a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Rounded",code:na},{default:r(()=>[l[4]||(l[4]=s("p",null,[e("The "),s("code",null,"rounded"),e(" prop can be used to change the border radius of "),s("code",null,"v-avatar"),e(".")],-1)),a(P)]),_:1},8,["code"])]),_:1}),a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Images",code:sa},{default:r(()=>[l[5]||(l[5]=s("p",null,[e("You can use "),s("code",null,"image"),e(" prop of "),s("code",null,"v-avatar"),e(" component for rendering image.")],-1)),a($)]),_:1},8,["code"])]),_:1}),a(p,{cols:"12",md:"6"},{default:r(()=>[a(c,{title:"Group",code:ea},{default:r(()=>[l[6]||(l[6]=s("p",null,[e("Use "),s("code",null,"v-avatar-group"),e(" class as a wrapper of avatars.")],-1)),a(w)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{Sa as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.