[{"data":1,"prerenderedAt":671},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Favatar":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":20,"body":135,"description":664,"extension":665,"meta":666,"navigation":667,"path":19,"section":11,"seo":668,"stem":669,"__hash__":670},"pkg\u002Fpkg\u002Favatar.md",{"type":136,"value":137,"toc":652},"minimark",[138,142,145,150,198,202,207,230,237,267,269,273,287,309,311,316,320,324,335,373,394,398,411,520,535,583,587,592,628,648],[139,140,141],"p",{},"A profile picture, initials, or icon.",[143,144],"base-avatar-demo",{},[146,147,149],"h2",{"id":148},"anatomy","Anatomy",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-vue shiki shiki-themes github-light github-dark","\u003CUiAvatarRoot>\n  \u003CUiAvatarImage src=\"\" \u002F>\n  \u003CUiAvatarFallback>LT\u003C\u002FUiAvatarFallback>\n\u003C\u002FUiAvatarRoot>\n","vue","",[158,159,160,176,182,188],"code",{"__ignoreMap":156},[161,162,165,169,173],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sVt8B","\u003C",[161,170,172],{"class":171},"s9eBZ","UiAvatarRoot",[161,174,175],{"class":167},">\n",[161,177,179],{"class":163,"line":178},2,[161,180,181],{"class":167},"  \u003CUiAvatarImage src=\"\" \u002F>\n",[161,183,185],{"class":163,"line":184},3,[161,186,187],{"class":167},"  \u003CUiAvatarFallback>LT\u003C\u002FUiAvatarFallback>\n",[161,189,191,194,196],{"class":163,"line":190},4,[161,192,193],{"class":167},"\u003C\u002F",[161,195,172],{"class":171},[161,197,175],{"class":167},[146,199,201],{"id":200},"examples","Examples",[203,204,206],"h3",{"id":205},"optimized-and-lazy-loaded-images","Optimized and lazy-loaded images",[139,208,209,210,213,214,217,218,221,222,225,226,229],{},"By default, ",[158,211,212],{},"UiAvatarImage"," preloads ",[158,215,216],{},"src"," and renders the ",[158,219,220],{},"img"," only once it has loaded. That does not compose with ",[158,223,224],{},"\u003CNuxtImg>"," or ",[158,227,228],{},"loading=\"lazy\"",".",[139,231,232,233,236],{},"Pass ",[158,234,235],{},"keepMounted"," to render the image immediately and let it load in place. Only the image that is actually displayed is requested.",[151,238,240],{"className":153,"code":239,"language":155,"meta":156,"style":156},"\u003CUiAvatarRoot>\n  \u003CUiAvatarFallback>LT\u003C\u002FUiAvatarFallback>\n  \u003CUiAvatarImage keep-mounted loading=\"lazy\" src=\"\u002Favatar.jpg\" width=\"32\" height=\"32\" alt=\"\" \u002F>\n\u003C\u002FUiAvatarRoot>\n",[158,241,242,250,254,259],{"__ignoreMap":156},[161,243,244,246,248],{"class":163,"line":164},[161,245,168],{"class":167},[161,247,172],{"class":171},[161,249,175],{"class":167},[161,251,252],{"class":163,"line":178},[161,253,187],{"class":167},[161,255,256],{"class":163,"line":184},[161,257,258],{"class":167},"  \u003CUiAvatarImage keep-mounted loading=\"lazy\" src=\"\u002Favatar.jpg\" width=\"32\" height=\"32\" alt=\"\" \u002F>\n",[161,260,261,263,265],{"class":163,"line":190},[161,262,193],{"class":167},[161,264,172],{"class":171},[161,266,175],{"class":167},[143,268],{"variant":235},[203,270,272],{"id":271},"stacking","Stacking",[139,274,275,276,278,279,282,283,286],{},"With ",[158,277,235],{},", the image and the fallback are both present until the image loads. The image is hidden from view until then (",[158,280,281],{},"visibility",", not ",[158,284,285],{},"display: none","), so the fallback provides the visible initials.",[139,288,289,290,292,293,292,297,300,301,304,305,308],{},"Stack them in the same box and put ",[158,291,212],{}," ",[294,295,296],"strong",{},"after",[158,298,299],{},"UiAvatarFallback",". Both are positioned, so whichever comes later paints on top. Hide loading and failed images with ",[158,302,303],{},"data-loading"," and ",[158,306,307],{},"data-error",". The second avatar below uses a missing file so the fallback stays.",[143,310],{"variant":271},[139,312,275,313,315],{},[158,314,235],{},", the image is part of the server-rendered HTML and can start loading before hydration. A cached image shows immediately.",[146,317,319],{"id":318},"api-reference","API reference",[203,321,323],{"id":322},"root","Root",[139,325,326,327,330,331,334],{},"The avatar frame. Renders a ",[158,328,329],{},"\u003Cspan>",". Pass ",[158,332,333],{},"color"," to tint the fallback wash and initials. The image is unchanged.",[336,337,338,351],"table",{},[339,340,341],"thead",{},[342,343,344,348],"tr",{},[345,346,347],"th",{},"Attribute",[345,349,350],{},"Description",[352,353,354,364],"tbody",{},[342,355,356,361],{},[357,358,359],"td",{},[158,360,303],{},[357,362,363],{},"Present while the image is loading.",[342,365,366,370],{},[357,367,368],{},[158,369,307],{},[357,371,372],{},"Present when the image failed to load.",[139,374,375,376,379,380,383,384,383,387,390,391,229],{},"Root state ",[158,377,378],{},"imageLoadingStatus"," is ",[158,381,382],{},"idle",", ",[158,385,386],{},"loading",[158,388,389],{},"loaded",", or ",[158,392,393],{},"error",[203,395,397],{"id":396},"image","Image",[139,399,400,401,404,405,407,408,410],{},"The picture. Renders an ",[158,402,403],{},"\u003Cimg>",". Preloads ",[158,406,216],{}," unless ",[158,409,235],{}," is set.",[336,412,413,428],{},[339,414,415],{},[342,416,417,420,423,426],{},[345,418,419],{},"Prop",[345,421,422],{},"Type",[345,424,425],{},"Default",[345,427,350],{},[352,429,430,447,466,483,499],{},[342,431,432,436,441,444],{},[357,433,434],{},[158,435,216],{},[357,437,438],{},[158,439,440],{},"string",[357,442,443],{},"—",[357,445,446],{},"Image URL.",[342,448,449,454,458,463],{},[357,450,451],{},[158,452,453],{},"alt",[357,455,456],{},[158,457,440],{},[357,459,460],{},[158,461,462],{},"''",[357,464,465],{},"Accessible name. Prefer empty when the fallback already has initials.",[342,467,468,473,478,480],{},[357,469,470],{},[158,471,472],{},"width",[357,474,475],{},[158,476,477],{},"number | string",[357,479,443],{},[357,481,482],{},"Native width.",[342,484,485,490,494,496],{},[357,486,487],{},[158,488,489],{},"height",[357,491,492],{},[158,493,477],{},[357,495,443],{},[357,497,498],{},"Native height.",[342,500,501,505,510,512],{},[357,502,503],{},[158,504,235],{},[357,506,507],{},[158,508,509],{},"boolean",[357,511,443],{},[357,513,514,515,517,518,229],{},"Keep the ",[158,516,220],{}," in the DOM and load in place. Supports ",[158,519,228],{},[139,521,522,523,526,527,383,529,383,531,390,533,229],{},"Emits ",[158,524,525],{},"loadingStatusChange"," with ",[158,528,382],{},[158,530,386],{},[158,532,389],{},[158,534,393],{},[336,536,537,545],{},[339,538,539],{},[342,540,541,543],{},[345,542,347],{},[345,544,350],{},[352,546,547,555,563,573],{},[342,548,549,553],{},[357,550,551],{},[158,552,303],{},[357,554,363],{},[342,556,557,561],{},[357,558,559],{},[158,560,307],{},[357,562,372],{},[342,564,565,570],{},[357,566,567],{},[158,568,569],{},"data-starting-style",[357,571,572],{},"Present when the image begins animating in.",[342,574,575,580],{},[357,576,577],{},[158,578,579],{},"data-ending-style",[357,581,582],{},"Present when the image is animating out.",[203,584,586],{"id":585},"fallback","Fallback",[139,588,589,590,229],{},"Shown when the image is missing, loading, or failed. Renders a ",[158,591,329],{},[336,593,594,606],{},[339,595,596],{},[342,597,598,600,602,604],{},[345,599,419],{},[345,601,422],{},[345,603,425],{},[345,605,350],{},[352,607,608],{},[342,609,610,615,620,625],{},[357,611,612],{},[158,613,614],{},"delay",[357,616,617],{},[158,618,619],{},"number",[357,621,622],{},[158,623,624],{},"0",[357,626,627],{},"Milliseconds to wait before showing the fallback.",[336,629,630,638],{},[339,631,632],{},[342,633,634,636],{},[345,635,347],{},[345,637,350],{},[352,639,640],{},[342,641,642,646],{},[357,643,644],{},[158,645,303],{},[357,647,363],{},[649,650,651],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":156,"searchDepth":178,"depth":178,"links":653},[654,655,659],{"id":148,"depth":178,"text":149},{"id":200,"depth":178,"text":201,"children":656},[657,658],{"id":205,"depth":184,"text":206},{"id":271,"depth":184,"text":272},{"id":318,"depth":178,"text":319,"children":660},[661,662,663],{"id":322,"depth":184,"text":323},{"id":396,"depth":184,"text":397},{"id":585,"depth":184,"text":586},"A profile picture with a fallback","md",{},true,{"title":20,"description":664},"pkg\u002Favatar","NHHZWEgEwrWnL_tPocuqFZVbW77oJEN2CRBLBxH_dMM",1791043754643]