[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"docs:progress":3,"demo:progress\u002Fhero":787},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,167,171,176,187,204,305,363,367,373,406,448,452,468,502,544,548,557,592,634,638,643,686,728,732,736,756],[8,9,11],"h1",{"id":10},"progress","Progress",[13,14,15],"p",{},"A bar showing task progress.",[17,18],"demo",{"name":19},"progress\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,113,55,122,55,132,55,141,55,150,55,159],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Progress } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fprogress'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Progress.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Progress.Label",[36,111,112],{"style":42}," \u002F>",[36,114,115,117,120],{"class":38,"style":39},[36,116,106],{"style":42},[36,118,119],{"style":46},"Progress.Track",[36,121,54],{"style":42},[36,123,124,127,130],{"class":38,"style":39},[36,125,126],{"style":42},"      \u003C",[36,128,129],{"style":46},"Progress.Indicator",[36,131,112],{"style":42},[36,133,134,137,139],{"class":38,"style":39},[36,135,136],{"style":42},"    \u003C\u002F",[36,138,119],{"style":46},[36,140,54],{"style":42},[36,142,143,145,148],{"class":38,"style":39},[36,144,106],{"style":42},[36,146,147],{"style":46},"Progress.Value",[36,149,112],{"style":42},[36,151,152,155,157],{"class":38,"style":39},[36,153,154],{"style":42},"  \u003C\u002F",[36,156,99],{"style":46},[36,158,54],{"style":42},[36,160,161,163,165],{"class":38,"style":39},[36,162,76],{"style":42},[36,164,89],{"style":46},[36,166,54],{"style":42},[21,168,170],{"id":169},"api-reference","API reference",[172,173,175],"h3",{"id":174},"api-reference-root","Root",[13,177,178,179,182,183,186],{},"Groups all parts of the progress bar and reports the task's status to screen readers.\nRenders a ",[32,180,181],{},"\u003Cdiv>"," element with ",[32,184,185],{},"role=\"progressbar\"",".",[13,188,189,191,192,194,195,197,198,201,202,186],{},[32,190,185],{}," requires an accessible name: render a ",[32,193,109],{}," inside ",[32,196,175],{},", or pass\n",[32,199,200],{},"aria-label"," to ",[32,203,175],{},[205,206],"table",{"columns":207,"rows":211},[208,209,210],"Prop","Type","Default",[212,224,235,244,254,264,274,285,295],{"summary":213,"detail":217},[214,215,216],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[218,219,220,221],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},"Description","HTML element to render.",{"summary":225,"detail":229},[226,227,228],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[230,231,232,233],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},"CSS class applied to the element.",{"summary":236,"detail":238},[237,227,228],"\u003Ccode>style\u003C\u002Fcode>",[239,240,241,242],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},"Inline style applied to the element.",{"summary":245,"detail":248},[246,247,228],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>number | null\u003C\u002Fcode>",[249,250,251,252],{"label":208,"html":246},{"label":209,"html":247},{"label":210,"html":228},{"label":222,"html":253},"Required. The current value, or \u003Ccode>null\u003C\u002Fcode> while it is indeterminate.",{"summary":255,"detail":258},[256,257,228],"\u003Ccode>format\u003C\u002Fcode>","\u003Ccode>Intl.NumberFormatOptions\u003C\u002Fcode>",[259,260,261,262],{"label":208,"html":256},{"label":209,"html":257},{"label":210,"html":228},{"label":222,"html":263},"Options to format the value. Without it, the value is displayed as its percentage position in the range.",{"summary":265,"detail":268},[266,267,228],"\u003Ccode>locale\u003C\u002Fcode>","\u003Ccode>Intl.LocalesArgument\u003C\u002Fcode>",[269,270,271,272],{"label":208,"html":266},{"label":209,"html":267},{"label":210,"html":228},{"label":222,"html":273},"The locale used by \u003Ccode>Intl.NumberFormat\u003C\u002Fcode> when formatting the value. Defaults to the user's runtime locale.",{"summary":275,"detail":279},[276,277,278],"\u003Ccode>min\u003C\u002Fcode>","\u003Ccode>number\u003C\u002Fcode>","\u003Ccode>0\u003C\u002Fcode>",[280,281,282,283],{"label":208,"html":276},{"label":209,"html":277},{"label":210,"html":278},{"label":222,"html":284},"The minimum value.",{"summary":286,"detail":289},[287,277,288],"\u003Ccode>max\u003C\u002Fcode>","\u003Ccode>100\u003C\u002Fcode>",[290,291,292,293],{"label":208,"html":287},{"label":209,"html":277},{"label":210,"html":288},{"label":222,"html":294},"The maximum value. Reaching it puts the progress bar in the \u003Ccode>complete\u003C\u002Fcode> status.",{"summary":296,"detail":299},[297,298,228],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ status }>\u003C\u002Fcode>",[300,301,302,303],{"label":208,"html":297},{"label":209,"html":298},{"label":210,"html":228},{"label":222,"html":304},"Content; receives the progress \u003Ccode>status\u003C\u002Fcode>.",[205,306,307,320],{},[308,309,310],"thead",{},[311,312,313,318],"tr",{},[314,315,317],"th",{"style":316},"text-align:left","Attribute",[314,319,222],{"style":316},[321,322,323,337,349],"tbody",{},[311,324,325,331],{},[326,327,328],"td",{"style":316},[32,329,330],{},"data-progressing",[326,332,333,334,186],{"style":316},"Present while the value is a finite number below ",[32,335,336],{},"max",[311,338,339,344],{},[326,340,341],{"style":316},[32,342,343],{},"data-complete",[326,345,346,347,186],{"style":316},"Present when the value reaches or exceeds ",[32,348,336],{},[311,350,351,356],{},[326,352,353],{"style":316},[32,354,355],{},"data-indeterminate",[326,357,358,359,362],{"style":316},"Present when the value is ",[32,360,361],{},"null"," or not a finite number.",[172,364,366],{"id":365},"api-reference-track","Track",[13,368,369,370,372],{},"Contains the progress bar indicator and represents the whole task.\nRenders a ",[32,371,181],{}," element.",[205,374],{"columns":375,"rows":376},[208,209,210],[377,384,391,398],{"summary":378,"detail":379},[214,215,216],[380,381,382,383],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},{"summary":385,"detail":386},[226,227,228],[387,388,389,390],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":392,"detail":393},[237,227,228],[394,395,396,397],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":399,"detail":400},[297,298,228],[401,402,403,404],{"label":208,"html":297},{"label":209,"html":298},{"label":210,"html":228},{"label":222,"html":405},"Track content; receives the progress \u003Ccode>status\u003C\u002Fcode>.",[205,407,408,416],{},[308,409,410],{},[311,411,412,414],{},[314,413,317],{"style":316},[314,415,222],{"style":316},[321,417,418,428,438],{},[311,419,420,424],{},[326,421,422],{"style":316},[32,423,330],{},[326,425,333,426,186],{"style":316},[32,427,336],{},[311,429,430,434],{},[326,431,432],{"style":316},[32,433,343],{},[326,435,346,436,186],{"style":316},[32,437,336],{},[311,439,440,444],{},[326,441,442],{"style":316},[32,443,355],{},[326,445,358,446,362],{"style":316},[32,447,361],{},[172,449,451],{"id":450},"api-reference-indicator","Indicator",[13,453,454,455,458,459,462,463,465,466,372],{},"Visualizes how much of the task is done. Its ",[32,456,457],{},"width"," is set inline, from the value's percentage\nposition between ",[32,460,461],{},"min"," and ",[32,464,336],{},"; in the indeterminate status no width is set.\nRenders a ",[32,467,181],{},[205,469],{"columns":470,"rows":471},[208,209,210],[472,479,486,494],{"summary":473,"detail":474},[214,215,216],[475,476,477,478],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},{"summary":480,"detail":481},[226,227,228],[482,483,484,485],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":487,"detail":488},[237,227,228],[489,490,491,492],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":493},"Inline style applied to the element, after the built-in \u003Ccode>width\u003C\u002Fcode>.",{"summary":495,"detail":496},[297,298,228],[497,498,499,500],{"label":208,"html":297},{"label":209,"html":298},{"label":210,"html":228},{"label":222,"html":501},"Indicator content; receives the progress \u003Ccode>status\u003C\u002Fcode>.",[205,503,504,512],{},[308,505,506],{},[311,507,508,510],{},[314,509,317],{"style":316},[314,511,222],{"style":316},[321,513,514,524,534],{},[311,515,516,520],{},[326,517,518],{"style":316},[32,519,330],{},[326,521,333,522,186],{"style":316},[32,523,336],{},[311,525,526,530],{},[326,527,528],{"style":316},[32,529,343],{},[326,531,346,532,186],{"style":316},[32,533,336],{},[311,535,536,540],{},[326,537,538],{"style":316},[32,539,355],{},[326,541,358,542,362],{"style":316},[32,543,361],{},[172,545,547],{"id":546},"api-reference-value","Value",[13,549,550,551,553,554,372],{},"A text element displaying the current value. Hidden from screen readers, which read the value from\n",[32,552,175],{},".\nRenders a ",[32,555,556],{},"\u003Cspan>",[205,558],{"columns":559,"rows":560},[208,209,210],[561,569,576,583],{"summary":562,"detail":564},[214,215,563],"\u003Ccode>'span'\u003C\u002Fcode>",[565,566,567,568],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":563},{"label":222,"html":223},{"summary":570,"detail":571},[226,227,228],[572,573,574,575],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":577,"detail":578},[237,227,228],[579,580,581,582],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":584,"detail":586},[297,585,228],"\u003Ccode>Slot<{ formattedValue: string; value: number | null }>\u003C\u002Fcode>",[587,588,589,590],{"label":208,"html":297},{"label":209,"html":585},{"label":210,"html":228},{"label":222,"html":591},"Slot receiving the formatted value and the raw number; \u003Ccode>formattedValue\u003C\u002Fcode> is \u003Ccode>'indeterminate'\u003C\u002Fcode> while the progress is indeterminate. Without it, the part renders the formatted value, and nothing while indeterminate.",[205,593,594,602],{},[308,595,596],{},[311,597,598,600],{},[314,599,317],{"style":316},[314,601,222],{"style":316},[321,603,604,614,624],{},[311,605,606,610],{},[326,607,608],{"style":316},[32,609,330],{},[326,611,333,612,186],{"style":316},[32,613,336],{},[311,615,616,620],{},[326,617,618],{"style":316},[32,619,343],{},[326,621,346,622,186],{"style":316},[32,623,336],{},[311,625,626,630],{},[326,627,628],{"style":316},[32,629,355],{},[326,631,358,632,362],{"style":316},[32,633,361],{},[172,635,637],{"id":636},"api-reference-label","Label",[13,639,640,641,372],{},"An accessible label for the progress bar.\nRenders a ",[32,642,556],{},[205,644],{"columns":645,"rows":646},[208,209,210],[647,654,661,668,678],{"summary":648,"detail":649},[214,215,563],[650,651,652,653],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":563},{"label":222,"html":223},{"summary":655,"detail":656},[226,227,228],[657,658,659,660],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":662,"detail":663},[237,227,228],[664,665,666,667],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":669,"detail":672},[670,227,671],"\u003Ccode>id\u003C\u002Fcode>","auto",[673,674,675,676],{"label":208,"html":670},{"label":209,"html":227},{"label":210,"html":671},{"label":222,"html":677},"Custom element ID. Associated with the progress bar via \u003Ccode>aria-labelledby\u003C\u002Fcode>.",{"summary":679,"detail":680},[297,298,228],[681,682,683,684],{"label":208,"html":297},{"label":209,"html":298},{"label":210,"html":228},{"label":222,"html":685},"Label content; receives the progress \u003Ccode>status\u003C\u002Fcode>.",[205,687,688,696],{},[308,689,690],{},[311,691,692,694],{},[314,693,317],{"style":316},[314,695,222],{"style":316},[321,697,698,708,718],{},[311,699,700,704],{},[326,701,702],{"style":316},[32,703,330],{},[326,705,333,706,186],{"style":316},[32,707,336],{},[311,709,710,714],{},[326,711,712],{"style":316},[32,713,343],{},[326,715,346,716,186],{"style":316},[32,717,336],{},[311,719,720,724],{},[326,721,722],{"style":316},[32,723,355],{},[326,725,358,726,362],{"style":316},[32,727,361],{},[21,729,731],{"id":730},"additional-types","Additional types",[172,733,735],{"id":734},"additional-types-progressstatus","ProgressStatus",[13,737,738,739,742,743,746,747,749,750,749,752,462,754,186],{},"The ",[32,740,741],{},"status"," carried by the object handed to the ",[32,744,745],{},"default"," slot of ",[32,748,175],{},", ",[32,751,366],{},[32,753,451],{},[32,755,637],{},[26,757,759],{"language":758,"class":30},"ts",[32,760,762],{"class":761},"language-ts",[36,763,764,767,770,773,776,779,782,784],{"class":38,"style":39},[36,765,766],{"style":60},"type",[36,768,769],{"style":50}," ProgressStatus",[36,771,772],{"style":60}," =",[36,774,775],{"style":70}," 'indeterminate'",[36,777,778],{"style":60}," |",[36,780,781],{"style":70}," 'progressing'",[36,783,778],{"style":60},[36,785,786],{"style":70}," 'complete'","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Progress } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fprogress'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { onMounted, onUnmounted, shallowRef } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> interval\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ReturnType\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> setInterval>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">onMounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  interval \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setInterval\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    value.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Math.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, Math.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(value.value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Math.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">random\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">})\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">onUnmounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> clearInterval\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(interval))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"grid w-60 max-w-full grid-cols-2 gap-y-2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-normal text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Uploading<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-right text-sm text-gray-900 tabular-nums\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Track\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"col-span-full h-1 overflow-hidden rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"block bg-gray-500 transition-[width] duration-500\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Progress.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390076918]