[{"data":1,"prerenderedAt":3777},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fcontent-dialog":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fcontent-dialog":2056},{"id":4,"title":5,"body":6,"description":2045,"extension":2046,"meta":2047,"nav":2048,"navigation":251,"path":2049,"seo":2050,"stem":2054,"__hash__":2055},"content_en\u002Fen\u002Fcomponents\u002Fcontent-dialog.md","Content Dialog",{"type":7,"value":8,"toc":2037},"minimark",[9,13,32,43,125,130,166,479,483,494,615,717,721,746,834,838,863,1034,1038,1064,1114,1176,1180,1441,1577,1623,2033],[10,11,5],"h1",{"id":12},"content-dialog",[14,15,16,17,21,22,26,27,31],"p",{},"Content Dialog is used to request confirmation or additional information from the user before continuing (official WinUI description: ",[18,19,20],"em",{},"use a content dialog to prompt the user to confirm an action or provide additional information","). It is a ",[23,24,25],"strong",{},"modal"," overlay: the mask swallows pointer input behind it, focus is trapped inside the dialog, and only ",[28,29,30],"code",{},"Esc"," or a button can dismiss it.",[14,33,34,35,38,39,42],{},"The geometry, state machine and animations align with the ContentDialog of WinUI 3 \u002F Windows App SDK (",[28,36,37],{},"microsoft-ui-xaml"," ",[28,40,41],{},"winui3\u002Frelease\u002F2.5.1",", verified to match the WindowsAppSDK 2.0.1 used by the latest WinUI3 Gallery release v2.9.3 on the target files):",[44,45,46,73,99],"ul",{},[47,48,49,52,53,56,57,60,61,64,65,68,69,72],"li",{},[23,50,51],{},"Geometry",": ",[28,54,55],{},"MinWidth"," 320 \u002F ",[28,58,59],{},"MaxWidth"," 548 \u002F ",[28,62,63],{},"MinHeight"," 184 \u002F ",[28,66,67],{},"MaxHeight"," 756, corner radius 8 (",[28,70,71],{},"OverlayCornerRadius","), stroke 1, padding 24, title-bottom spacing 12, button spacing 8.",[47,74,75,78,79,82,83,86,87,90,91,94,95,98],{},[23,76,77],{},"Anatomy",": full-screen content layer (",[28,80,81],{},"LayoutRoot",") → centered surface (",[28,84,85],{},"BackgroundElement",": background color + stroke + shadow) → two rows (content ",[28,88,89],{},"*"," \u002F command area ",[28,92,93],{},"auto",") → content layer (",[28,96,97],{},"ContentDialogTopOverlay"," background + bottom border) and a 5-column command-area grid.",[47,100,101,104,105,108,109,112,113,116,117,120,121,124],{},[23,102,103],{},"Animation",": enter ",[28,106,107],{},"scale 1.05 → 1"," (250ms, ",[28,110,111],{},"cubic-bezier(0,0,0,1)",") + ",[28,114,115],{},"opacity 0 → 1"," (83ms, linear); exit ",[28,118,119],{},"scale 1 → 1.05"," (167ms) + ",[28,122,123],{},"opacity 1 → 0"," (83ms); the mask only fades 83ms linear without scaling.",[126,127,129],"h2",{"id":128},"basic-usage","Basic usage",[14,131,132,135,136,139,140,143,144,147,148,151,152,139,155,139,158,161,162,165],{},[28,133,134],{},"v-model:open"," controls the open state (aligned with ",[28,137,138],{},"ShowAsync()"," \u002F ",[28,141,142],{},"Hide()","), and ",[28,145,146],{},"closed"," returns the result via ",[28,149,150],{},"args.result"," (",[28,153,154],{},"primary",[28,156,157],{},"secondary",[28,159,160],{},"none",", aligned with ",[28,163,164],{},"ContentDialogResult",").",[167,168,170,177],"demo-block",{"title":169},"Basic: title + body + primary\u002Fsecondary buttons (defaultButton = primary)",[171,172,174],"template",{"v-slot:preview":173},"",[175,176],"content-dialog-basic-demo",{},[171,178,179],{"v-slot:code":173},[180,181,185],"pre",{"className":182,"code":183,"language":184,"meta":173,"style":173},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { FluereButton, FluereContentDialog } from '@fluere-vue\u002Fui'\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereButton @click=\"open = true\">Delete draft\u003C\u002FFluereButton>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"Delete this draft?\"\n    primary-button-text=\"Delete\"\n    secondary-button-text=\"Cancel\"\n    default-button=\"primary\"\n    @closed=\"(args) => console.log(args.result)\"\n  >\n    Deleting removes it from both this PC and the cloud, and it cannot be undone.\n  \u003C\u002FFluereContentDialog>\n\u003C\u002Ftemplate>\n","vue",[28,186,187,217,233,246,253,278,288,293,302,339,347,368,379,390,401,412,447,453,459,470],{"__ignoreMap":173},[188,189,192,196,200,204,207,210,214],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"sVt8B","\u003C",[188,197,199],{"class":198},"s9eBZ","script",[188,201,203],{"class":202},"sScJk"," setup",[188,205,206],{"class":202}," lang",[188,208,209],{"class":194},"=",[188,211,213],{"class":212},"sZZnC","\"ts\"",[188,215,216],{"class":194},">\n",[188,218,220,224,227,230],{"class":190,"line":219},2,[188,221,223],{"class":222},"szBVR","import",[188,225,226],{"class":194}," { FluereButton, FluereContentDialog } ",[188,228,229],{"class":222},"from",[188,231,232],{"class":212}," '@fluere-vue\u002Fui'\n",[188,234,236,238,241,243],{"class":190,"line":235},3,[188,237,223],{"class":222},[188,239,240],{"class":194}," { ref } ",[188,242,229],{"class":222},[188,244,245],{"class":212}," 'vue'\n",[188,247,249],{"class":190,"line":248},4,[188,250,252],{"emptyLinePlaceholder":251},true,"\n",[188,254,256,259,263,266,269,272,275],{"class":190,"line":255},5,[188,257,258],{"class":222},"const",[188,260,262],{"class":261},"sj4cs"," open",[188,264,265],{"class":222}," =",[188,267,268],{"class":202}," ref",[188,270,271],{"class":194},"(",[188,273,274],{"class":261},"false",[188,276,277],{"class":194},")\n",[188,279,281,284,286],{"class":190,"line":280},6,[188,282,283],{"class":194},"\u003C\u002F",[188,285,199],{"class":198},[188,287,216],{"class":194},[188,289,291],{"class":190,"line":290},7,[188,292,252],{"emptyLinePlaceholder":251},[188,294,296,298,300],{"class":190,"line":295},8,[188,297,195],{"class":194},[188,299,171],{"class":198},[188,301,216],{"class":194},[188,303,305,308,311,314,317,319,322,325,327,330,332,335,337],{"class":190,"line":304},9,[188,306,307],{"class":194},"  \u003C",[188,309,310],{"class":198},"FluereButton",[188,312,313],{"class":194}," @",[188,315,316],{"class":202},"click",[188,318,209],{"class":194},[188,320,321],{"class":212},"\"",[188,323,324],{"class":194},"open ",[188,326,209],{"class":222},[188,328,329],{"class":261}," true",[188,331,321],{"class":212},[188,333,334],{"class":194},">Delete draft\u003C\u002F",[188,336,310],{"class":198},[188,338,216],{"class":194},[188,340,342,344],{"class":190,"line":341},10,[188,343,307],{"class":194},[188,345,346],{"class":198},"FluereContentDialog\n",[188,348,350,353,356,359,361,363,365],{"class":190,"line":349},11,[188,351,352],{"class":202},"    v-model",[188,354,355],{"class":194},":",[188,357,358],{"class":202},"open",[188,360,209],{"class":194},[188,362,321],{"class":212},[188,364,358],{"class":194},[188,366,367],{"class":212},"\"\n",[188,369,371,374,376],{"class":190,"line":370},12,[188,372,373],{"class":202},"    title",[188,375,209],{"class":194},[188,377,378],{"class":212},"\"Delete this draft?\"\n",[188,380,382,385,387],{"class":190,"line":381},13,[188,383,384],{"class":202},"    primary-button-text",[188,386,209],{"class":194},[188,388,389],{"class":212},"\"Delete\"\n",[188,391,393,396,398],{"class":190,"line":392},14,[188,394,395],{"class":202},"    secondary-button-text",[188,397,209],{"class":194},[188,399,400],{"class":212},"\"Cancel\"\n",[188,402,404,407,409],{"class":190,"line":403},15,[188,405,406],{"class":202},"    default-button",[188,408,209],{"class":194},[188,410,411],{"class":212},"\"primary\"\n",[188,413,415,418,420,422,424,426,430,433,436,439,442,445],{"class":190,"line":414},16,[188,416,417],{"class":194},"    @",[188,419,146],{"class":202},[188,421,209],{"class":194},[188,423,321],{"class":212},[188,425,271],{"class":194},[188,427,429],{"class":428},"s4XuR","args",[188,431,432],{"class":194},") ",[188,434,435],{"class":222},"=>",[188,437,438],{"class":194}," console.",[188,440,441],{"class":202},"log",[188,443,444],{"class":194},"(args.result)",[188,446,367],{"class":212},[188,448,450],{"class":190,"line":449},17,[188,451,452],{"class":194},"  >\n",[188,454,456],{"class":190,"line":455},18,[188,457,458],{"class":194},"    Deleting removes it from both this PC and the cloud, and it cannot be undone.\n",[188,460,462,465,468],{"class":190,"line":461},19,[188,463,464],{"class":194},"  \u003C\u002F",[188,466,467],{"class":198},"FluereContentDialog",[188,469,216],{"class":194},[188,471,473,475,477],{"class":190,"line":472},20,[188,474,283],{"class":194},[188,476,171],{"class":198},[188,478,216],{"class":194},[126,480,482],{"id":481},"eight-button-combinations","Eight button combinations",[14,484,485,486,489,490,493],{},"The command-area state is derived purely from \"whether each of the three button texts is empty\" (aligned with the eight ",[28,487,488],{},"ButtonsVisibilityStates"," branches of ",[28,491,492],{},"ChangeVisualState","):",[495,496,497,517],"table",{},[498,499,500],"thead",{},[501,502,503,511,514],"tr",{},[504,505,506,507,510],"th",{},"State (",[28,508,509],{},"data-buttons",")",[504,512,513],{},"Trigger condition",[504,515,516],{},"Button placement",[518,519,520,544,557,573,587,600],"tbody",{},[501,521,522,528,531],{},[523,524,525],"td",{},[28,526,527],{},"all",[523,529,530],{},"all three texts present",[523,532,533,534,537,538,541,542,510],{},"three columns each take 1\u002F3, column spacing 8 + 8 (",[28,535,536],{},"FirstSpacer"," = 8, ",[28,539,540],{},"SecondaryColumn"," = ",[28,543,89],{},[501,545,546,551,554],{},[523,547,548],{},[28,549,550],{},"primary-secondary",[523,552,553],{},"primary + secondary",[523,555,556],{},"primary on column 1, secondary on column 5, each half width",[501,558,559,567,570],{},[523,560,561,139,564],{},[28,562,563],{},"primary-close",[28,565,566],{},"secondary-close",[523,568,569],{},"primary+close \u002F secondary+close",[523,571,572],{},"the first button on column 1, the close button on column 5",[501,574,575,581,584],{},[523,576,577,139,579],{},[28,578,154],{},[28,580,157],{},[523,582,583],{},"only primary \u002F only secondary",[523,585,586],{},"that button moves to column 5 (right half width)",[501,588,589,594,597],{},[523,590,591],{},[28,592,593],{},"close",[523,595,596],{},"only the close button",[523,598,599],{},"close button on column 5",[501,601,602,606,609],{},[523,603,604],{},[28,605,160],{},[523,607,608],{},"all empty",[523,610,611,612,510],{},"the command area collapses entirely (",[28,613,614],{},"CommandSpace.Visibility = Collapsed",[167,616,618,623],{"title":617},"Cycle through the eight combinations",[171,619,620],{"v-slot:preview":173},[621,622],"content-dialog-buttons-demo",{},[171,624,625],{"v-slot:code":173},[180,626,628],{"className":182,"code":627,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"Command area button combinations\"\n  :primary-button-text=\"active.primary\"\n  :secondary-button-text=\"active.secondary\"\n  :close-button-text=\"active.close\"\n\u002F>\n",[28,629,630,636,653,663,680,696,712],{"__ignoreMap":173},[188,631,632,634],{"class":190,"line":191},[188,633,195],{"class":194},[188,635,346],{"class":198},[188,637,638,641,643,645,647,649,651],{"class":190,"line":219},[188,639,640],{"class":202},"  v-model",[188,642,355],{"class":194},[188,644,358],{"class":202},[188,646,209],{"class":194},[188,648,321],{"class":212},[188,650,358],{"class":194},[188,652,367],{"class":212},[188,654,655,658,660],{"class":190,"line":235},[188,656,657],{"class":202},"  title",[188,659,209],{"class":194},[188,661,662],{"class":212},"\"Command area button combinations\"\n",[188,664,665,668,671,673,675,678],{"class":190,"line":248},[188,666,667],{"class":194},"  :",[188,669,670],{"class":202},"primary-button-text",[188,672,209],{"class":194},[188,674,321],{"class":212},[188,676,677],{"class":194},"active.primary",[188,679,367],{"class":212},[188,681,682,684,687,689,691,694],{"class":190,"line":255},[188,683,667],{"class":194},[188,685,686],{"class":202},"secondary-button-text",[188,688,209],{"class":194},[188,690,321],{"class":212},[188,692,693],{"class":194},"active.secondary",[188,695,367],{"class":212},[188,697,698,700,703,705,707,710],{"class":190,"line":280},[188,699,667],{"class":194},[188,701,702],{"class":202},"close-button-text",[188,704,209],{"class":194},[188,706,321],{"class":212},[188,708,709],{"class":194},"active.close",[188,711,367],{"class":212},[188,713,714],{"class":190,"line":290},[188,715,716],{"class":194},"\u002F>\n",[126,718,720],{"id":719},"default-button-and-enter","Default button and Enter",[14,722,723,726,727,730,731,734,735,738,739,742,743,745],{},[28,724,725],{},"default-button"," decides which button gets the accent style (corresponds to ",[28,728,729],{},"DefaultButton"," + ",[28,732,733],{},"AccentButtonStyle","). The focus rules match WinUI verbatim: when ",[23,736,737],{},"focus is not in the command area"," (or lands exactly on that button) the accent state is kept; when focus moves to another button in the command area, the accent state disappears (the ",[28,740,741],{},"NoDefaultButton"," branch). Pressing Enter activates the button pointed to by ",[28,744,725],{},", not the currently accented one.",[167,747,749,754],{"title":748},"Four DefaultButton values + Enter behavior",[171,750,751],{"v-slot:preview":173},[752,753],"content-dialog-default-button-demo",{},[171,755,756],{"v-slot:code":173},[180,757,759],{"className":182,"code":758,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"Default button and Enter\"\n  primary-button-text=\"OK\"\n  secondary-button-text=\"Cancel\"\n  close-button-text=\"Close\"\n  default-button=\"primary\"\n\u002F>\n",[28,760,761,767,783,792,802,811,821,830],{"__ignoreMap":173},[188,762,763,765],{"class":190,"line":191},[188,764,195],{"class":194},[188,766,346],{"class":198},[188,768,769,771,773,775,777,779,781],{"class":190,"line":219},[188,770,640],{"class":202},[188,772,355],{"class":194},[188,774,358],{"class":202},[188,776,209],{"class":194},[188,778,321],{"class":212},[188,780,358],{"class":194},[188,782,367],{"class":212},[188,784,785,787,789],{"class":190,"line":235},[188,786,657],{"class":202},[188,788,209],{"class":194},[188,790,791],{"class":212},"\"Default button and Enter\"\n",[188,793,794,797,799],{"class":190,"line":248},[188,795,796],{"class":202},"  primary-button-text",[188,798,209],{"class":194},[188,800,801],{"class":212},"\"OK\"\n",[188,803,804,807,809],{"class":190,"line":255},[188,805,806],{"class":202},"  secondary-button-text",[188,808,209],{"class":194},[188,810,400],{"class":212},[188,812,813,816,818],{"class":190,"line":280},[188,814,815],{"class":202},"  close-button-text",[188,817,209],{"class":194},[188,819,820],{"class":212},"\"Close\"\n",[188,822,823,826,828],{"class":190,"line":290},[188,824,825],{"class":202},"  default-button",[188,827,209],{"class":194},[188,829,411],{"class":212},[188,831,832],{"class":190,"line":295},[188,833,716],{"class":194},[126,835,837],{"id":836},"cancel-close-closings-cancel","Cancel close (Closing's Cancel)",[14,839,840,841,844,845,848,849,139,852,139,855,858,859,862],{},"Setting ",[28,842,843],{},"closing","'s ",[28,846,847],{},"args.cancel = true"," cancels the close: the dialog stays in place and no exit animation plays; the three buttons' click events (",[28,850,851],{},"primaryButtonClick",[28,853,854],{},"secondaryButtonClick",[28,856,857],{},"closeButtonClick",") can likewise use ",[28,860,861],{},"args.cancel"," to prevent the following close.",[167,864,866,871],{"title":865},"Confirm before closing (closing.cancel)",[171,867,868],{"v-slot:preview":173},[869,870],"content-dialog-cancel-demo",{},[171,872,873],{"v-slot:code":173},[180,874,876],{"className":182,"code":875,"language":184,"meta":173,"style":173},"\u003Cscript setup lang=\"ts\">\nconst onClosing = (args) => {\n  if (needConfirm.value) {\n    args.cancel = true \u002F\u002F block it the first time\n    needConfirm.value = false\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"Discard unsaved changes?\"\n    @closing=\"onClosing\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[28,877,878,894,914,922,935,945,950,955,963,967,975,981,997,1006,1021,1026],{"__ignoreMap":173},[188,879,880,882,884,886,888,890,892],{"class":190,"line":191},[188,881,195],{"class":194},[188,883,199],{"class":198},[188,885,203],{"class":202},[188,887,206],{"class":202},[188,889,209],{"class":194},[188,891,213],{"class":212},[188,893,216],{"class":194},[188,895,896,898,901,903,905,907,909,911],{"class":190,"line":219},[188,897,258],{"class":222},[188,899,900],{"class":202}," onClosing",[188,902,265],{"class":222},[188,904,151],{"class":194},[188,906,429],{"class":428},[188,908,432],{"class":194},[188,910,435],{"class":222},[188,912,913],{"class":194}," {\n",[188,915,916,919],{"class":190,"line":235},[188,917,918],{"class":222},"  if",[188,920,921],{"class":194}," (needConfirm.value) {\n",[188,923,924,927,929,931],{"class":190,"line":248},[188,925,926],{"class":194},"    args.cancel ",[188,928,209],{"class":222},[188,930,329],{"class":261},[188,932,934],{"class":933},"sJ8bj"," \u002F\u002F block it the first time\n",[188,936,937,940,942],{"class":190,"line":255},[188,938,939],{"class":194},"    needConfirm.value ",[188,941,209],{"class":222},[188,943,944],{"class":261}," false\n",[188,946,947],{"class":190,"line":280},[188,948,949],{"class":194},"  }\n",[188,951,952],{"class":190,"line":290},[188,953,954],{"class":194},"}\n",[188,956,957,959,961],{"class":190,"line":295},[188,958,283],{"class":194},[188,960,199],{"class":198},[188,962,216],{"class":194},[188,964,965],{"class":190,"line":304},[188,966,252],{"emptyLinePlaceholder":251},[188,968,969,971,973],{"class":190,"line":341},[188,970,195],{"class":194},[188,972,171],{"class":198},[188,974,216],{"class":194},[188,976,977,979],{"class":190,"line":349},[188,978,307],{"class":194},[188,980,346],{"class":198},[188,982,983,985,987,989,991,993,995],{"class":190,"line":370},[188,984,352],{"class":202},[188,986,355],{"class":194},[188,988,358],{"class":202},[188,990,209],{"class":194},[188,992,321],{"class":212},[188,994,358],{"class":194},[188,996,367],{"class":212},[188,998,999,1001,1003],{"class":190,"line":381},[188,1000,373],{"class":202},[188,1002,209],{"class":194},[188,1004,1005],{"class":212},"\"Discard unsaved changes?\"\n",[188,1007,1008,1010,1012,1014,1016,1019],{"class":190,"line":392},[188,1009,417],{"class":194},[188,1011,843],{"class":202},[188,1013,209],{"class":194},[188,1015,321],{"class":212},[188,1017,1018],{"class":194},"onClosing",[188,1020,367],{"class":212},[188,1022,1023],{"class":190,"line":403},[188,1024,1025],{"class":194},"  \u002F>\n",[188,1027,1028,1030,1032],{"class":190,"line":414},[188,1029,283],{"class":194},[188,1031,171],{"class":198},[188,1033,216],{"class":194},[126,1035,1037],{"id":1036},"full-size-and-long-content","Full size and long content",[14,1039,1040,1043,1044,1047,1048,1051,1052,1055,1056,1059,1060,1063],{},[28,1041,1042],{},"full-size-desired"," maps to ",[28,1045,1046],{},"FullSizeDesired"," → ",[28,1049,1050],{},"FullDialogSizing"," (only changes the surface's vertical alignment to Stretch; horizontal stays centered); when content exceeds the height, the content area scrolls internally while the command area stays fixed at the bottom. WinUI's ",[28,1053,1054],{},"ContentScrollViewer"," sets ",[28,1057,1058],{},"VerticalScrollBarVisibility"," to Disabled, so the ",[23,1061,1062],{},"scrollbar is invisible"," yet the content still scrolls.",[167,1065,1067,1072],{"title":1066},"FullSizeDesired: fill vertically (max 756)",[171,1068,1069],{"v-slot:preview":173},[1070,1071],"content-dialog-full-size-demo",{},[171,1073,1074],{"v-slot:code":173},[180,1075,1077],{"className":182,"code":1076,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog v-model:open=\"open\" title=\"Full-size dialog\" full-size-desired \u002F>\n",[28,1078,1079],{"__ignoreMap":173},[188,1080,1081,1083,1085,1088,1090,1092,1094,1096,1098,1100,1103,1105,1108,1111],{"class":190,"line":191},[188,1082,195],{"class":194},[188,1084,467],{"class":198},[188,1086,1087],{"class":202}," v-model",[188,1089,355],{"class":194},[188,1091,358],{"class":202},[188,1093,209],{"class":194},[188,1095,321],{"class":212},[188,1097,358],{"class":194},[188,1099,321],{"class":212},[188,1101,1102],{"class":202}," title",[188,1104,209],{"class":194},[188,1106,1107],{"class":212},"\"Full-size dialog\"",[188,1109,1110],{"class":202}," full-size-desired",[188,1112,1113],{"class":194}," \u002F>\n",[167,1115,1117,1122],{"title":1116},"Long content + no buttons: content area scrolls, Esc closes",[171,1118,1119],{"v-slot:preview":173},[1120,1121],"content-dialog-long-content-demo",{},[171,1123,1124],{"v-slot:code":173},[180,1125,1127],{"className":182,"code":1126,"language":184,"meta":173,"style":173},"\u003C!-- giving none of the three button texts ⇒ data-buttons=\"none\", command area collapsed -->\n\u003CFluereContentDialog v-model:open=\"open\" title=\"Terms of service summary (no buttons)\">\n  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">Paragraph {{ index }}…\u003C\u002Fp>\n\u003C\u002FFluereContentDialog>\n",[28,1128,1129,1134,1163,1168],{"__ignoreMap":173},[188,1130,1131],{"class":190,"line":191},[188,1132,1133],{"class":933},"\u003C!-- giving none of the three button texts ⇒ data-buttons=\"none\", command area collapsed -->\n",[188,1135,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1161],{"class":190,"line":219},[188,1137,195],{"class":194},[188,1139,467],{"class":198},[188,1141,1087],{"class":202},[188,1143,355],{"class":194},[188,1145,358],{"class":202},[188,1147,209],{"class":194},[188,1149,321],{"class":212},[188,1151,358],{"class":194},[188,1153,321],{"class":212},[188,1155,1102],{"class":202},[188,1157,209],{"class":194},[188,1159,1160],{"class":212},"\"Terms of service summary (no buttons)\"",[188,1162,216],{"class":194},[188,1164,1165],{"class":190,"line":235},[188,1166,1167],{"class":194},"  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">Paragraph {{ index }}…\u003C\u002Fp>\n",[188,1169,1170,1172,1174],{"class":190,"line":248},[188,1171,283],{"class":194},[188,1173,467],{"class":198},[188,1175,216],{"class":194},[126,1177,1179],{"id":1178},"api","API",[495,1181,1182,1198],{},[498,1183,1184],{},[501,1185,1186,1189,1192,1195],{},[504,1187,1188],{},"Prop (Props)",[504,1190,1191],{},"Type",[504,1193,1194],{},"Default",[504,1196,1197],{},"Description",[518,1199,1200,1225,1248,1269,1290,1311,1333,1354,1376,1396,1418],{},[501,1201,1202,1206,1211,1215],{},[523,1203,1204],{},[28,1205,358],{},[523,1207,1208],{},[28,1209,1210],{},"boolean",[523,1212,1213],{},[28,1214,274],{},[523,1216,1217,1218,1220,1221,139,1223],{},"Whether shown (",[28,1219,134],{},"); aligned with ",[28,1222,138],{},[28,1224,142],{},[501,1226,1227,1232,1237,1242],{},[523,1228,1229],{},[28,1230,1231],{},"title",[523,1233,1234],{},[28,1235,1236],{},"string",[523,1238,1239],{},[28,1240,1241],{},"''",[523,1243,1244,1245],{},"Title, 20px \u002F SemiBold, max 2 lines; aligned with ",[28,1246,1247],{},"Title",[501,1249,1250,1255,1259,1263],{},[523,1251,1252],{},[28,1253,1254],{},"primaryButtonText",[523,1256,1257],{},[28,1258,1236],{},[523,1260,1261],{},[28,1262,1241],{},[523,1264,1265,1266],{},"Primary button text; empty means not rendered; aligned with ",[28,1267,1268],{},"PrimaryButtonText",[501,1270,1271,1276,1280,1284],{},[523,1272,1273],{},[28,1274,1275],{},"secondaryButtonText",[523,1277,1278],{},[28,1279,1236],{},[523,1281,1282],{},[28,1283,1241],{},[523,1285,1286,1287],{},"Secondary button text; empty means not rendered; aligned with ",[28,1288,1289],{},"SecondaryButtonText",[501,1291,1292,1297,1301,1305],{},[523,1293,1294],{},[28,1295,1296],{},"closeButtonText",[523,1298,1299],{},[28,1300,1236],{},[523,1302,1303],{},[28,1304,1241],{},[523,1306,1307,1308],{},"Close button text; empty means not rendered; aligned with ",[28,1309,1310],{},"CloseButtonText",[501,1312,1313,1318,1322,1327],{},[523,1314,1315],{},[28,1316,1317],{},"isPrimaryButtonEnabled",[523,1319,1320],{},[28,1321,1210],{},[523,1323,1324],{},[28,1325,1326],{},"true",[523,1328,1329,1330],{},"Whether the primary button is enabled; aligned with ",[28,1331,1332],{},"IsPrimaryButtonEnabled",[501,1334,1335,1340,1344,1348],{},[523,1336,1337],{},[28,1338,1339],{},"isSecondaryButtonEnabled",[523,1341,1342],{},[28,1343,1210],{},[523,1345,1346],{},[28,1347,1326],{},[523,1349,1350,1351],{},"Whether the secondary button is enabled; aligned with ",[28,1352,1353],{},"IsSecondaryButtonEnabled",[501,1355,1356,1361,1366,1371],{},[523,1357,1358],{},[28,1359,1360],{},"defaultButton",[523,1362,1363],{},[28,1364,1365],{},"'none' | 'primary' | 'secondary' | 'close'",[523,1367,1368],{},[28,1369,1370],{},"'none'",[523,1372,1373,1374],{},"Default button (accent style + Enter target); aligned with ",[28,1375,729],{},[501,1377,1378,1383,1387,1391],{},[523,1379,1380],{},[28,1381,1382],{},"fullSizeDesired",[523,1384,1385],{},[28,1386,1210],{},[523,1388,1389],{},[28,1390,274],{},[523,1392,1393,1394],{},"Fill vertically (max 756); aligned with ",[28,1395,1046],{},[501,1397,1398,1403,1407,1412],{},[523,1399,1400],{},[28,1401,1402],{},"ariaLabel",[523,1404,1405],{},[28,1406,1236],{},[523,1408,1409],{},[28,1410,1411],{},"—",[523,1413,1414,1415],{},"Accessible name when there is no title; aligned with ",[28,1416,1417],{},"AutomationProperties.Name",[501,1419,1420,1425,1430,1435],{},[523,1421,1422],{},[28,1423,1424],{},"to",[523,1426,1427],{},[28,1428,1429],{},"string | HTMLElement",[523,1431,1432],{},[28,1433,1434],{},"'body'",[523,1436,1437,1438,510],{},"Portal target (web-side replacement for ",[28,1439,1440],{},"XamlRoot",[495,1442,1443,1455],{},[498,1444,1445],{},[501,1446,1447,1450,1453],{},[504,1448,1449],{},"Event",[504,1451,1452],{},"Payload",[504,1454,1197],{},[518,1456,1457,1473,1488,1506,1519,1532,1552],{},[501,1458,1459,1464,1468],{},[523,1460,1461],{},[28,1462,1463],{},"update:open",[523,1465,1466],{},[28,1467,1210],{},[523,1469,1470,1471],{},"Update for ",[28,1472,134],{},[501,1474,1475,1480,1482],{},[523,1476,1477],{},[28,1478,1479],{},"opened",[523,1481,1411],{},[523,1483,1484,1485],{},"The dialog was opened; aligned with ",[28,1486,1487],{},"Opened",[501,1489,1490,1494,1499],{},[523,1491,1492],{},[28,1493,851],{},[523,1495,1496],{},[28,1497,1498],{},"{ cancel }",[523,1500,1501,1502,1505],{},"Primary button clicked; ",[28,1503,1504],{},"cancel = true"," prevents the following close",[501,1507,1508,1512,1516],{},[523,1509,1510],{},[28,1511,854],{},[523,1513,1514],{},[28,1515,1498],{},[523,1517,1518],{},"Secondary button clicked; same as above",[501,1520,1521,1525,1529],{},[523,1522,1523],{},[28,1524,857],{},[523,1526,1527],{},[28,1528,1498],{},[523,1530,1531],{},"Close button clicked; same as above",[501,1533,1534,1538,1543],{},[523,1535,1536],{},[28,1537,843],{},[523,1539,1540],{},[28,1541,1542],{},"{ result, cancel }",[523,1544,1545,1546,1548,1549],{},"Close requested; ",[28,1547,1504],{}," cancels the close; aligned with ",[28,1550,1551],{},"Closing",[501,1553,1554,1558,1563],{},[523,1555,1556],{},[28,1557,146],{},[523,1559,1560],{},[28,1561,1562],{},"{ result }",[523,1564,1565,1566,1569,1570,1573,1574],{},"Closed; ",[28,1567,1568],{},"result"," ∈ ",[28,1571,1572],{},"'primary' | 'secondary' | 'none'","; aligned with ",[28,1575,1576],{},"Closed",[495,1578,1579,1588],{},[498,1580,1581],{},[501,1582,1583,1586],{},[504,1584,1585],{},"Slot (Slots)",[504,1587,1197],{},[518,1589,1590,1608],{},[501,1591,1592,1596],{},[523,1593,1594],{},[28,1595,1231],{},[523,1597,1598,1599,139,1601,1604,1605,1607],{},"Corresponds to ",[28,1600,1247],{},[28,1602,1603],{},"TitleTemplate","; replaces ",[28,1606,1231],{}," when provided",[501,1609,1610,1615],{},[523,1611,1612],{},[28,1613,1614],{},"default",[523,1616,1598,1617,139,1620],{},[28,1618,1619],{},"Content",[28,1621,1622],{},"ContentTemplate",[1624,1625,1626,1650,1695,1700],"blockquote",{},[14,1627,1628,1631,1632,730,1635,1638,1639,1642,1643,1645,1646,1649],{},[23,1629,1630],{},"Accessibility",": the content layer renders ",[28,1633,1634],{},"role=\"dialog\"",[28,1636,1637],{},"aria-modal=\"true\""," (aligned with the dialog's ",[28,1640,1641],{},"IsDialog"," + modal semantics in WinUI), and the accessible name is taken from the title (",[28,1644,1402],{}," when there is no title); initial focus follows WinUI's three-level priority (first focusable element in the content area → default button → first focusable button in the command area); ",[28,1647,1648],{},"Tab"," loops inside the dialog, and once closed focus returns to the element focused before opening; the mask is hidden from AT.",[14,1651,1652,1655,1656,1659,1660,1663,1664,1667,1668,1671,1672,151,1675,139,1678,139,1681,139,1684,139,1687,1690,1691,1694],{},[23,1653,1654],{},"Shared overlay primitive",": the mask is provided by ",[28,1657,1658],{},"FluereSmokeLayer"," (standalone Teleport + reka ",[28,1661,1662],{},"Presence",", 83ms linear fade in\u002Fout, body-scroll lock, ",[28,1665,1666],{},"aria-hidden","), and the state machine is provided by ",[28,1669,1670],{},"useDisclosure"," from ",[28,1673,1674],{},"@fluere-vue\u002Fhooks",[28,1676,1677],{},"isOpen",[28,1679,1680],{},"isClosing",[28,1682,1683],{},"requestClose",[28,1685,1686],{},"finishClose",[28,1688,1689],{},"cancelClose",", SSR-safe and respects ",[28,1692,1693],{},"prefers-reduced-motion","). Future Tooltip \u002F Flyout components reuse the same primitive.",[14,1696,1697],{},[23,1698,1699],{},"Implementation notes",[44,1701,1702,1723,1779,1789,1812,1830,1948,1965,1983,1997],{},[47,1703,1704,1707,1708,1710,1711,1714,1715,1718,1719,1722],{},[23,1705,1706],{},"The animation is not a single animation",": reka's ",[28,1709,1662],{}," decides the unmount timing from the first ",[28,1712,1713],{},"animationend"," on the node, while WinUI's scale (250 \u002F 167ms) and fade (83ms) have different durations. So this component puts ",[23,1716,1717],{},"the scale on the content-layer root node"," (the longest one, which gates the unmount so the exit animation is never cut off), ",[23,1720,1721],{},"the opacity on the inner surface"," (finishes at 83ms and stays 0, so the scale during the remaining time is invisible), and the mask runs its own 83ms on a separate Teleport layer — isomorphic to WinUI's \"two Popups, one Storyboard with multiple targets\" structure.",[47,1724,1725,1728,1729,151,1732,1735,1736,1739,1740,1743,1744,1747,1748,139,1751,139,1754,1757,1758,139,1761,139,1764,1767,1768,1771,1772,139,1775,1778],{},[23,1726,1727],{},"The animation aligns with the source frame by frame",": in ",[28,1730,1731],{},"ContentDialogOpenCloseThemeTransition::CreateStoryboardImpl",[28,1733,1734],{},"LayoutTransition_partial.cpp","), the Load branch registers ",[28,1737,1738],{},"ScaleX\u002FY"," 1.05 → 1.0 (250ms, ",[28,1741,1742],{},"TimingFunctionDescription{cp3.X=0}"," = cubic-bezier(0,0,0,1)) and ",[28,1745,1746],{},"Opacity"," 0 → 1 (83ms, linear), and the Unload branch is symmetric (167ms \u002F 83ms); ",[28,1749,1750],{},"s_OpenScaleDuration=250",[28,1752,1753],{},"s_CloseScaleDuration=167",[28,1755,1756],{},"s_OpacityChangeDuration=83"," correspond one-to-one with ",[28,1759,1760],{},"ControlNormalAnimationDuration",[28,1762,1763],{},"ControlFastAnimationDuration",[28,1765,1766],{},"ControlFasterAnimationDuration"," in ",[28,1769,1770],{},"Common_themeresources_any.xaml",". The 250ms and easing both hit tokens (",[28,1773,1774],{},"--durationGentle",[28,1776,1777],{},"--curveDecelerateMid","); 167ms \u002F 83ms have no same-value token, so they become component local variables with the source noted.",[47,1780,1781,1784,1785,1788],{},[23,1782,1783],{},"The mask and the dialog share the same layer",": both have ",[28,1786,1787],{},"z-index"," 1000, and the painting order is driven by the Teleport mount order (mask first, dialog after) — this lets a further-Teleported overlay inside the dialog (such as a Combobox dropdown, also 1000) stay above the dialog.",[47,1790,1791,1794,1795,1798,1799,139,1802,139,1805,1808,1809,1811],{},[23,1792,1793],{},"Clicking the mask does not close",": the WinUI ContentDialog has no light-dismiss path, so this component likewise ",[28,1796,1797],{},"preventDefault()","s ",[28,1800,1801],{},"pointer-down-outside",[28,1803,1804],{},"interact-outside",[28,1806,1807],{},"focus-outside","; only ",[28,1810,30],{}," and the three buttons can close it.",[47,1813,1814,1819,1820,1823,1824,1826,1827,1829],{},[23,1815,1816,1818],{},[28,1817,30],{}," and the close button",": aligned with ",[28,1821,1822],{},"ExecuteCloseAction()"," — when a clickable close button exists, it is \"programmatically clicked\" (going through ",[28,1825,857],{}," first), otherwise it closes directly with ",[28,1828,160],{},".",[47,1831,1832,1835,1836,1839,1840,1047,1843,1846,1847,1849,1850,1853,1854,1857,1858,1839,1861,1864,1865,139,1868,1871,1872,1875,1876,1839,1879,1047,1882,1885,1886,1839,1889,1892,1893,1896,1897],{},[23,1833,1834],{},"Color mapping"," (WinUI resource → token): ",[28,1837,1838],{},"ContentDialogBackground"," ← ",[28,1841,1842],{},"SolidBackgroundFillColorBase",[28,1844,1845],{},"colorNeutralBackground2"," (ΔE 2.3 \u002F 0.6); ",[28,1848,97],{}," ← the result of compositing ",[28,1851,1852],{},"LayerFillColorAlt"," underneath → ",[28,1855,1856],{},"colorNeutralBackground1"," (ΔE 0 \u002F 1.4); ",[28,1859,1860],{},"ContentDialogBorderBrush",[28,1862,1863],{},"SurfaceStrokeColorDefault"," (composited ",[28,1866,1867],{},"#C1C1C1",[28,1869,1870],{},"#424242",") → ",[28,1873,1874],{},"colorNeutralStroke2"," (ΔE 31 \u002F 16); ",[28,1877,1878],{},"ContentDialogSeparatorBorderBrush",[28,1880,1881],{},"CardStrokeColorDefault",[28,1883,1884],{},"colorNeutralStrokeAlpha","; ",[28,1887,1888],{},"ContentDialogSmokeFill",[28,1890,1891],{},"SmokeFillColorDefault"," (30% black) → ",[28,1894,1895],{},"colorBackgroundOverlay"," (40% \u002F 50%). The Fluent 2 Web token table has no equivalent entry; to strictly match the real machine, override the local variables:",[180,1898,1902],{"className":1899,"code":1900,"language":1901,"meta":173,"style":173},"language-css shiki shiki-themes github-light github-dark",".my-dialog .fui-content-dialog__surface {\n  --fui-content-dialog-surface: #f3f3f3; \u002F* SolidBackgroundFillColorBase *\u002F\n  --fui-content-dialog-border: #c1c1c1; \u002F* SurfaceStrokeColorDefault composited value *\u002F\n}\n","css",[28,1903,1904,1914,1929,1944],{"__ignoreMap":173},[188,1905,1906,1909,1912],{"class":190,"line":191},[188,1907,1908],{"class":202},".my-dialog",[188,1910,1911],{"class":202}," .fui-content-dialog__surface",[188,1913,913],{"class":194},[188,1915,1916,1919,1921,1924,1926],{"class":190,"line":219},[188,1917,1918],{"class":428},"  --fui-content-dialog-surface",[188,1920,52],{"class":194},[188,1922,1923],{"class":261},"#f3f3f3",[188,1925,1885],{"class":194},[188,1927,1928],{"class":933},"\u002F* SolidBackgroundFillColorBase *\u002F\n",[188,1930,1931,1934,1936,1939,1941],{"class":190,"line":235},[188,1932,1933],{"class":428},"  --fui-content-dialog-border",[188,1935,52],{"class":194},[188,1937,1938],{"class":261},"#c1c1c1",[188,1940,1885],{"class":194},[188,1942,1943],{"class":933},"\u002F* SurfaceStrokeColorDefault composited value *\u002F\n",[188,1945,1946],{"class":190,"line":248},[188,1947,954],{"class":194},[47,1949,1950,52,1953,1956,1957,1960,1961,1964],{},[23,1951,1952],{},"The shadow is a B-grade approximation",[28,1954,1955],{},"PrepareContent"," projects the shadow with ",[28,1958,1959],{},"ApplyElevationEffect(depth 0, baseElevation 128)","; the source only gives elevation values with no px to convert, so here the Fluent 2 maximum tier ",[28,1962,1963],{},"--shadow64"," is taken by overlay semantics.",[47,1966,1967,1971,1972,1975,1976,139,1979,1982],{},[23,1968,1969],{},[28,1970,1693],{},": the scale and fade are disabled (",[28,1973,1974],{},"animation: none","); the static form is the final state (",[28,1977,1978],{},"scale 1",[28,1980,1981],{},"opacity 1","), and close becomes an immediate unmount.",[47,1984,1985,1988,1989,1992,1993,1996],{},[23,1986,1987],{},"Narrow viewport",": WinUI absolute sizes such as ",[28,1990,1991],{},"MinWidth 320"," are aligned with the viewport on the web via ",[28,1994,1995],{},"min(..., 100%)"," (WinUI assumes a desktop window is wide enough), a responsive supplement.",[47,1998,1999,2002,2003,139,2006,2008,2009,2012,2013,2016,2017,2020,2021,2024,2025,2028,2029,2032],{},[23,2000,2001],{},"Differences from WinUI",": the cancellation of ",[28,2004,2005],{},"ButtonClick",[28,2007,1551],{}," is a ",[23,2010,2011],{},"synchronous flag"," (no async Deferral); ",[28,2014,2015],{},"Enter"," is not taken over on button \u002F a \u002F input \u002F textarea \u002F select \u002F summary \u002F contenteditable \u002F ",[28,2018,2019],{},"role=button"," (WinUI reaches the same effect through the routed event's ",[28,2022,2023],{},"Handled","); focus is restored when the exit animation ends (WinUI restores focus when the closing flow starts); Command properties such as ",[28,2026,2027],{},"PrimaryButtonCommand"," and the three ",[28,2030,2031],{},"*ButtonStyle"," are not exposed (covered by click events \u002F fixed styles); no hard constraint of \"only one Popup per parent\" is enforced; high-contrast themes are not implemented (a known gap).",[2034,2035,2036],"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 pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":173,"searchDepth":219,"depth":219,"links":2038},[2039,2040,2041,2042,2043,2044],{"id":128,"depth":219,"text":129},{"id":481,"depth":219,"text":482},{"id":719,"depth":219,"text":720},{"id":836,"depth":219,"text":837},{"id":1036,"depth":219,"text":1037},{"id":1178,"depth":219,"text":1179},"[object Object]","md",{},null,"\u002Fen\u002Fcomponents\u002Fcontent-dialog",{"title":5,"description":2051},{"A modal dialog":2052,"nav":2053},"title + body + primary\u002Fsecondary\u002Fclose buttons, with the mask layer and dialog enter\u002Fexit easing aligned to WinUI 3 frame by frame.",{"title":5},"en\u002Fcomponents\u002Fcontent-dialog","k8HE8Uc5TJNICgQeIhWtT2SCY0TQu-n2fTpSTGdKoRk",{"id":2057,"title":2058,"body":2059,"description":3770,"extension":2046,"meta":3771,"nav":3772,"navigation":251,"path":3773,"seo":3774,"stem":3775,"__hash__":3776},"content\u002Fcomponents\u002Fcontent-dialog.md","Content Dialog 对话框",{"type":7,"value":2060,"toc":3762},[2061,2064,2077,2085,2147,2150,2176,2403,2406,2414,2519,2610,2614,2638,2721,2725,2742,2900,2903,2923,2968,3029,3031,3265,3389,3430,3760],[10,2062,2058],{"id":2063},"content-dialog-对话框",[14,2065,2066,2067,2069,2070,2073,2074,2076],{},"Content Dialog 用来在继续之前向用户索取确认或补充信息（WinUI 官方描述：",[18,2068,20],{},"）。它是",[23,2071,2072],{},"模态","弹层：遮罩层吃掉背后的指针输入，焦点被困在弹窗内，",[28,2075,30],{}," 或按钮才能结束它。",[14,2078,2079,2080,38,2082,2084],{},"几何、状态机与动效对齐 WinUI 3 \u002F Windows App SDK 的 ContentDialog（",[28,2081,37],{},[28,2083,41],{},"，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 在目标文件上一致）：",[44,2086,2087,2105,2126],{},[47,2088,2089,2092,2093,56,2095,60,2097,64,2099,2101,2102,2104],{},[23,2090,2091],{},"几何","：",[28,2094,55],{},[28,2096,59],{},[28,2098,63],{},[28,2100,67],{}," 756、圆角 8（",[28,2103,71],{},"）、描边 1、内边距 24、标题下间距 12、按钮间距 8。",[47,2106,2107,2110,2111,2113,2114,2116,2117,2119,2120,2122,2123,2125],{},[23,2108,2109],{},"解剖","：全屏内容层（",[28,2112,81],{},"）→ 居中表面（",[28,2115,85],{},"：底色 + 描边 + 阴影）→ 两行（内容 ",[28,2118,89],{}," \u002F 命令区 ",[28,2121,93],{},"）→ 内容层（",[28,2124,97],{}," 底色 + 下边框）与 5 列命令区网格。",[47,2127,2128,2131,2132,2134,2135,2137,2138,2140,2141,2143,2144,2146],{},[23,2129,2130],{},"动效","：进入 ",[28,2133,107],{},"（250ms，",[28,2136,111],{},"）+ ",[28,2139,115],{},"（83ms，linear）；退出 ",[28,2142,119],{},"（167ms）+ ",[28,2145,123],{},"（83ms）；遮罩层只做 83ms linear 的透明度、不缩放。",[126,2148,2149],{"id":2149},"基础用法",[14,2151,2152,2154,2155,139,2157,2159,2160,2162,2163,2165,2166,139,2168,139,2170,2172,2173,2175],{},[28,2153,134],{}," 控制开关（对齐 ",[28,2156,138],{},[28,2158,142],{},"），",[28,2161,146],{}," 的 ",[28,2164,150],{}," 带回返回值（",[28,2167,154],{},[28,2169,157],{},[28,2171,160],{},"，对齐 ",[28,2174,164],{},"）。",[167,2177,2179,2183],{"title":2178},"基础：标题 + 正文 + 主\u002F次按钮（defaultButton = primary）",[171,2180,2181],{"v-slot:preview":173},[175,2182],{},[171,2184,2185],{"v-slot:code":173},[180,2186,2188],{"className":182,"code":2187,"language":184,"meta":173,"style":173},"\u003Cscript setup lang=\"ts\">\nimport { FluereButton, FluereContentDialog } from '@fluere-vue\u002Fui'\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereButton @click=\"open = true\">删除草稿\u003C\u002FFluereButton>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"要删除这份草稿吗？\"\n    primary-button-text=\"删除\"\n    secondary-button-text=\"取消\"\n    default-button=\"primary\"\n    @closed=\"(args) => console.log(args.result)\"\n  >\n    删除后将从本机与云端一并移除，且无法恢复。\n  \u003C\u002FFluereContentDialog>\n\u003C\u002Ftemplate>\n",[28,2189,2190,2206,2216,2226,2230,2246,2254,2258,2266,2295,2301,2317,2326,2335,2344,2352,2378,2382,2387,2395],{"__ignoreMap":173},[188,2191,2192,2194,2196,2198,2200,2202,2204],{"class":190,"line":191},[188,2193,195],{"class":194},[188,2195,199],{"class":198},[188,2197,203],{"class":202},[188,2199,206],{"class":202},[188,2201,209],{"class":194},[188,2203,213],{"class":212},[188,2205,216],{"class":194},[188,2207,2208,2210,2212,2214],{"class":190,"line":219},[188,2209,223],{"class":222},[188,2211,226],{"class":194},[188,2213,229],{"class":222},[188,2215,232],{"class":212},[188,2217,2218,2220,2222,2224],{"class":190,"line":235},[188,2219,223],{"class":222},[188,2221,240],{"class":194},[188,2223,229],{"class":222},[188,2225,245],{"class":212},[188,2227,2228],{"class":190,"line":248},[188,2229,252],{"emptyLinePlaceholder":251},[188,2231,2232,2234,2236,2238,2240,2242,2244],{"class":190,"line":255},[188,2233,258],{"class":222},[188,2235,262],{"class":261},[188,2237,265],{"class":222},[188,2239,268],{"class":202},[188,2241,271],{"class":194},[188,2243,274],{"class":261},[188,2245,277],{"class":194},[188,2247,2248,2250,2252],{"class":190,"line":280},[188,2249,283],{"class":194},[188,2251,199],{"class":198},[188,2253,216],{"class":194},[188,2255,2256],{"class":190,"line":290},[188,2257,252],{"emptyLinePlaceholder":251},[188,2259,2260,2262,2264],{"class":190,"line":295},[188,2261,195],{"class":194},[188,2263,171],{"class":198},[188,2265,216],{"class":194},[188,2267,2268,2270,2272,2274,2276,2278,2280,2282,2284,2286,2288,2291,2293],{"class":190,"line":304},[188,2269,307],{"class":194},[188,2271,310],{"class":198},[188,2273,313],{"class":194},[188,2275,316],{"class":202},[188,2277,209],{"class":194},[188,2279,321],{"class":212},[188,2281,324],{"class":194},[188,2283,209],{"class":222},[188,2285,329],{"class":261},[188,2287,321],{"class":212},[188,2289,2290],{"class":194},">删除草稿\u003C\u002F",[188,2292,310],{"class":198},[188,2294,216],{"class":194},[188,2296,2297,2299],{"class":190,"line":341},[188,2298,307],{"class":194},[188,2300,346],{"class":198},[188,2302,2303,2305,2307,2309,2311,2313,2315],{"class":190,"line":349},[188,2304,352],{"class":202},[188,2306,355],{"class":194},[188,2308,358],{"class":202},[188,2310,209],{"class":194},[188,2312,321],{"class":212},[188,2314,358],{"class":194},[188,2316,367],{"class":212},[188,2318,2319,2321,2323],{"class":190,"line":370},[188,2320,373],{"class":202},[188,2322,209],{"class":194},[188,2324,2325],{"class":212},"\"要删除这份草稿吗？\"\n",[188,2327,2328,2330,2332],{"class":190,"line":381},[188,2329,384],{"class":202},[188,2331,209],{"class":194},[188,2333,2334],{"class":212},"\"删除\"\n",[188,2336,2337,2339,2341],{"class":190,"line":392},[188,2338,395],{"class":202},[188,2340,209],{"class":194},[188,2342,2343],{"class":212},"\"取消\"\n",[188,2345,2346,2348,2350],{"class":190,"line":403},[188,2347,406],{"class":202},[188,2349,209],{"class":194},[188,2351,411],{"class":212},[188,2353,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376],{"class":190,"line":414},[188,2355,417],{"class":194},[188,2357,146],{"class":202},[188,2359,209],{"class":194},[188,2361,321],{"class":212},[188,2363,271],{"class":194},[188,2365,429],{"class":428},[188,2367,432],{"class":194},[188,2369,435],{"class":222},[188,2371,438],{"class":194},[188,2373,441],{"class":202},[188,2375,444],{"class":194},[188,2377,367],{"class":212},[188,2379,2380],{"class":190,"line":449},[188,2381,452],{"class":194},[188,2383,2384],{"class":190,"line":455},[188,2385,2386],{"class":194},"    删除后将从本机与云端一并移除，且无法恢复。\n",[188,2388,2389,2391,2393],{"class":190,"line":461},[188,2390,464],{"class":194},[188,2392,467],{"class":198},[188,2394,216],{"class":194},[188,2396,2397,2399,2401],{"class":190,"line":472},[188,2398,283],{"class":194},[188,2400,171],{"class":198},[188,2402,216],{"class":194},[126,2404,2405],{"id":2405},"八种按钮组合",[14,2407,2408,2409,2162,2411,2413],{},"命令区状态只由「三个按钮文案是否为空」推导（对齐 ",[28,2410,492],{},[28,2412,488],{}," 八个分支）：",[495,2415,2416,2432],{},[498,2417,2418],{},[501,2419,2420,2426,2429],{},[504,2421,2422,2423,2425],{},"状态（",[28,2424,509],{},"）",[504,2427,2428],{},"触发条件",[504,2430,2431],{},"按钮落位",[518,2433,2434,2453,2465,2479,2493,2505],{},[501,2435,2436,2440,2443],{},[523,2437,2438],{},[28,2439,527],{},[523,2441,2442],{},"三个文案都有",[523,2444,2445,2446,2448,2449,541,2451,2425],{},"三列各占 1\u002F3，列间距 8 + 8（",[28,2447,536],{}," = 8、",[28,2450,540],{},[28,2452,89],{},[501,2454,2455,2459,2462],{},[523,2456,2457],{},[28,2458,550],{},[523,2460,2461],{},"主 + 次",[523,2463,2464],{},"主按钮第 1 列、次按钮第 5 列，各占半宽",[501,2466,2467,2473,2476],{},[523,2468,2469,139,2471],{},[28,2470,563],{},[28,2472,566],{},[523,2474,2475],{},"主+关 \u002F 次+关",[523,2477,2478],{},"前一个按钮第 1 列、关闭按钮第 5 列",[501,2480,2481,2487,2490],{},[523,2482,2483,139,2485],{},[28,2484,154],{},[28,2486,157],{},[523,2488,2489],{},"只有主 \u002F 只有次",[523,2491,2492],{},"该按钮移到第 5 列（右半宽）",[501,2494,2495,2499,2502],{},[523,2496,2497],{},[28,2498,593],{},[523,2500,2501],{},"只有关闭按钮",[523,2503,2504],{},"关闭按钮第 5 列",[501,2506,2507,2511,2514],{},[523,2508,2509],{},[28,2510,160],{},[523,2512,2513],{},"全空",[523,2515,2516,2517,2425],{},"命令区整体折叠（",[28,2518,614],{},[167,2520,2522,2526],{"title":2521},"八种组合逐一切换",[171,2523,2524],{"v-slot:preview":173},[621,2525],{},[171,2527,2528],{"v-slot:code":173},[180,2529,2531],{"className":182,"code":2530,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"命令区按钮组合\"\n  :primary-button-text=\"active.primary\"\n  :secondary-button-text=\"active.secondary\"\n  :close-button-text=\"active.close\"\n\u002F>\n",[28,2532,2533,2539,2555,2564,2578,2592,2606],{"__ignoreMap":173},[188,2534,2535,2537],{"class":190,"line":191},[188,2536,195],{"class":194},[188,2538,346],{"class":198},[188,2540,2541,2543,2545,2547,2549,2551,2553],{"class":190,"line":219},[188,2542,640],{"class":202},[188,2544,355],{"class":194},[188,2546,358],{"class":202},[188,2548,209],{"class":194},[188,2550,321],{"class":212},[188,2552,358],{"class":194},[188,2554,367],{"class":212},[188,2556,2557,2559,2561],{"class":190,"line":235},[188,2558,657],{"class":202},[188,2560,209],{"class":194},[188,2562,2563],{"class":212},"\"命令区按钮组合\"\n",[188,2565,2566,2568,2570,2572,2574,2576],{"class":190,"line":248},[188,2567,667],{"class":194},[188,2569,670],{"class":202},[188,2571,209],{"class":194},[188,2573,321],{"class":212},[188,2575,677],{"class":194},[188,2577,367],{"class":212},[188,2579,2580,2582,2584,2586,2588,2590],{"class":190,"line":255},[188,2581,667],{"class":194},[188,2583,686],{"class":202},[188,2585,209],{"class":194},[188,2587,321],{"class":212},[188,2589,693],{"class":194},[188,2591,367],{"class":212},[188,2593,2594,2596,2598,2600,2602,2604],{"class":190,"line":280},[188,2595,667],{"class":194},[188,2597,702],{"class":202},[188,2599,209],{"class":194},[188,2601,321],{"class":212},[188,2603,709],{"class":194},[188,2605,367],{"class":212},[188,2607,2608],{"class":190,"line":290},[188,2609,716],{"class":194},[126,2611,2613],{"id":2612},"默认按钮与-enter","默认按钮与 Enter",[14,2615,2616,2618,2619,730,2621,2623,2624,2627,2628,2631,2632,2634,2635,2637],{},[28,2617,725],{}," 决定哪个按钮拿到强调样式（对应 ",[28,2620,729],{},[28,2622,733],{},"）。焦点规则与 WinUI 逐字一致：",[23,2625,2626],{},"焦点不在命令区","（或正好落在该按钮上）时保留强调态；焦点移到命令区里的",[23,2629,2630],{},"其它","按钮时，强调态消失（",[28,2633,741],{}," 分支）。按下 Enter 时激活的是 ",[28,2636,725],{}," 指向的按钮，而不是当前强调的那个。",[167,2639,2641,2645],{"title":2640},"DefaultButton 四档 + Enter 行为",[171,2642,2643],{"v-slot:preview":173},[752,2644],{},[171,2646,2647],{"v-slot:code":173},[180,2648,2650],{"className":182,"code":2649,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"默认按钮与 Enter\"\n  primary-button-text=\"确定\"\n  secondary-button-text=\"取消\"\n  close-button-text=\"关闭\"\n  default-button=\"primary\"\n\u002F>\n",[28,2651,2652,2658,2674,2683,2692,2700,2709,2717],{"__ignoreMap":173},[188,2653,2654,2656],{"class":190,"line":191},[188,2655,195],{"class":194},[188,2657,346],{"class":198},[188,2659,2660,2662,2664,2666,2668,2670,2672],{"class":190,"line":219},[188,2661,640],{"class":202},[188,2663,355],{"class":194},[188,2665,358],{"class":202},[188,2667,209],{"class":194},[188,2669,321],{"class":212},[188,2671,358],{"class":194},[188,2673,367],{"class":212},[188,2675,2676,2678,2680],{"class":190,"line":235},[188,2677,657],{"class":202},[188,2679,209],{"class":194},[188,2681,2682],{"class":212},"\"默认按钮与 Enter\"\n",[188,2684,2685,2687,2689],{"class":190,"line":248},[188,2686,796],{"class":202},[188,2688,209],{"class":194},[188,2690,2691],{"class":212},"\"确定\"\n",[188,2693,2694,2696,2698],{"class":190,"line":255},[188,2695,806],{"class":202},[188,2697,209],{"class":194},[188,2699,2343],{"class":212},[188,2701,2702,2704,2706],{"class":190,"line":280},[188,2703,815],{"class":202},[188,2705,209],{"class":194},[188,2707,2708],{"class":212},"\"关闭\"\n",[188,2710,2711,2713,2715],{"class":190,"line":290},[188,2712,825],{"class":202},[188,2714,209],{"class":194},[188,2716,411],{"class":212},[188,2718,2719],{"class":190,"line":295},[188,2720,716],{"class":194},[126,2722,2724],{"id":2723},"取消关闭closing-的-cancel","取消关闭（Closing 的 Cancel）",[14,2726,2727,2162,2729,2731,2732,139,2734,139,2736,2738,2739,2741],{},[28,2728,843],{},[28,2730,847],{}," 会取消本次关闭，弹窗留在原地且不播放退出动画；三个按钮的点击事件（",[28,2733,851],{},[28,2735,854],{},[28,2737,857],{},"）同样可以 ",[28,2740,861],{}," 阻止后续关闭。",[167,2743,2745,2749],{"title":2744},"先确认再关闭（closing.cancel）",[171,2746,2747],{"v-slot:preview":173},[869,2748],{},[171,2750,2751],{"v-slot:code":173},[180,2752,2754],{"className":182,"code":2753,"language":184,"meta":173,"style":173},"\u003Cscript setup lang=\"ts\">\nconst onClosing = (args) => {\n  if (needConfirm.value) {\n    args.cancel = true \u002F\u002F 第一次拦下\n    needConfirm.value = false\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"放弃未保存的更改？\"\n    @closing=\"onClosing\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[28,2755,2756,2772,2790,2796,2807,2815,2819,2823,2831,2835,2843,2849,2865,2874,2888,2892],{"__ignoreMap":173},[188,2757,2758,2760,2762,2764,2766,2768,2770],{"class":190,"line":191},[188,2759,195],{"class":194},[188,2761,199],{"class":198},[188,2763,203],{"class":202},[188,2765,206],{"class":202},[188,2767,209],{"class":194},[188,2769,213],{"class":212},[188,2771,216],{"class":194},[188,2773,2774,2776,2778,2780,2782,2784,2786,2788],{"class":190,"line":219},[188,2775,258],{"class":222},[188,2777,900],{"class":202},[188,2779,265],{"class":222},[188,2781,151],{"class":194},[188,2783,429],{"class":428},[188,2785,432],{"class":194},[188,2787,435],{"class":222},[188,2789,913],{"class":194},[188,2791,2792,2794],{"class":190,"line":235},[188,2793,918],{"class":222},[188,2795,921],{"class":194},[188,2797,2798,2800,2802,2804],{"class":190,"line":248},[188,2799,926],{"class":194},[188,2801,209],{"class":222},[188,2803,329],{"class":261},[188,2805,2806],{"class":933}," \u002F\u002F 第一次拦下\n",[188,2808,2809,2811,2813],{"class":190,"line":255},[188,2810,939],{"class":194},[188,2812,209],{"class":222},[188,2814,944],{"class":261},[188,2816,2817],{"class":190,"line":280},[188,2818,949],{"class":194},[188,2820,2821],{"class":190,"line":290},[188,2822,954],{"class":194},[188,2824,2825,2827,2829],{"class":190,"line":295},[188,2826,283],{"class":194},[188,2828,199],{"class":198},[188,2830,216],{"class":194},[188,2832,2833],{"class":190,"line":304},[188,2834,252],{"emptyLinePlaceholder":251},[188,2836,2837,2839,2841],{"class":190,"line":341},[188,2838,195],{"class":194},[188,2840,171],{"class":198},[188,2842,216],{"class":194},[188,2844,2845,2847],{"class":190,"line":349},[188,2846,307],{"class":194},[188,2848,346],{"class":198},[188,2850,2851,2853,2855,2857,2859,2861,2863],{"class":190,"line":370},[188,2852,352],{"class":202},[188,2854,355],{"class":194},[188,2856,358],{"class":202},[188,2858,209],{"class":194},[188,2860,321],{"class":212},[188,2862,358],{"class":194},[188,2864,367],{"class":212},[188,2866,2867,2869,2871],{"class":190,"line":381},[188,2868,373],{"class":202},[188,2870,209],{"class":194},[188,2872,2873],{"class":212},"\"放弃未保存的更改？\"\n",[188,2875,2876,2878,2880,2882,2884,2886],{"class":190,"line":392},[188,2877,417],{"class":194},[188,2879,843],{"class":202},[188,2881,209],{"class":194},[188,2883,321],{"class":212},[188,2885,1018],{"class":194},[188,2887,367],{"class":212},[188,2889,2890],{"class":190,"line":403},[188,2891,1025],{"class":194},[188,2893,2894,2896,2898],{"class":190,"line":414},[188,2895,283],{"class":194},[188,2897,171],{"class":198},[188,2899,216],{"class":194},[126,2901,2902],{"id":2902},"全尺寸与长内容",[14,2904,2905,2907,2908,1047,2910,2912,2913,2915,2916,2918,2919,2922],{},[28,2906,1042],{}," 对应 ",[28,2909,1046],{},[28,2911,1050],{},"（只把表面的纵向对齐改为 Stretch，横向仍居中）；内容超出高度时由内容区内部滚动，命令区固定在底部。WinUI 的 ",[28,2914,1054],{}," 把 ",[28,2917,1058],{}," 设为 Disabled，因此",[23,2920,2921],{},"滚动条不可见","但内容仍可滚动。",[167,2924,2926,2930],{"title":2925},"FullSizeDesired：纵向撑满（上限 756）",[171,2927,2928],{"v-slot:preview":173},[1070,2929],{},[171,2931,2932],{"v-slot:code":173},[180,2933,2935],{"className":182,"code":2934,"language":184,"meta":173,"style":173},"\u003CFluereContentDialog v-model:open=\"open\" title=\"全尺寸弹窗\" full-size-desired \u002F>\n",[28,2936,2937],{"__ignoreMap":173},[188,2938,2939,2941,2943,2945,2947,2949,2951,2953,2955,2957,2959,2961,2964,2966],{"class":190,"line":191},[188,2940,195],{"class":194},[188,2942,467],{"class":198},[188,2944,1087],{"class":202},[188,2946,355],{"class":194},[188,2948,358],{"class":202},[188,2950,209],{"class":194},[188,2952,321],{"class":212},[188,2954,358],{"class":194},[188,2956,321],{"class":212},[188,2958,1102],{"class":202},[188,2960,209],{"class":194},[188,2962,2963],{"class":212},"\"全尺寸弹窗\"",[188,2965,1110],{"class":202},[188,2967,1113],{"class":194},[167,2969,2971,2975],{"title":2970},"长内容 + 无按钮：内容区滚动，Esc 关闭",[171,2972,2973],{"v-slot:preview":173},[1120,2974],{},[171,2976,2977],{"v-slot:code":173},[180,2978,2980],{"className":182,"code":2979,"language":184,"meta":173,"style":173},"\u003C!-- 三个按钮文案都不给 ⇒ data-buttons=\"none\"，命令区折叠 -->\n\u003CFluereContentDialog v-model:open=\"open\" title=\"服务条款摘要（无按钮）\">\n  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">第 {{ index }} 段…\u003C\u002Fp>\n\u003C\u002FFluereContentDialog>\n",[28,2981,2982,2987,3016,3021],{"__ignoreMap":173},[188,2983,2984],{"class":190,"line":191},[188,2985,2986],{"class":933},"\u003C!-- 三个按钮文案都不给 ⇒ data-buttons=\"none\"，命令区折叠 -->\n",[188,2988,2989,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009,3011,3014],{"class":190,"line":219},[188,2990,195],{"class":194},[188,2992,467],{"class":198},[188,2994,1087],{"class":202},[188,2996,355],{"class":194},[188,2998,358],{"class":202},[188,3000,209],{"class":194},[188,3002,321],{"class":212},[188,3004,358],{"class":194},[188,3006,321],{"class":212},[188,3008,1102],{"class":202},[188,3010,209],{"class":194},[188,3012,3013],{"class":212},"\"服务条款摘要（无按钮）\"",[188,3015,216],{"class":194},[188,3017,3018],{"class":190,"line":235},[188,3019,3020],{"class":194},"  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">第 {{ index }} 段…\u003C\u002Fp>\n",[188,3022,3023,3025,3027],{"class":190,"line":248},[188,3024,283],{"class":194},[188,3026,467],{"class":198},[188,3028,216],{"class":194},[126,3030,1179],{"id":1178},[495,3032,3033,3049],{},[498,3034,3035],{},[501,3036,3037,3040,3043,3046],{},[504,3038,3039],{},"属性（Props）",[504,3041,3042],{},"类型",[504,3044,3045],{},"默认",[504,3047,3048],{},"说明",[518,3050,3051,3075,3094,3113,3132,3151,3170,3189,3208,3227,3246],{},[501,3052,3053,3057,3061,3065],{},[523,3054,3055],{},[28,3056,358],{},[523,3058,3059],{},[28,3060,1210],{},[523,3062,3063],{},[28,3064,274],{},[523,3066,3067,3068,3070,3071,139,3073],{},"是否显示（",[28,3069,134],{},"）；对齐 ",[28,3072,138],{},[28,3074,142],{},[501,3076,3077,3081,3085,3089],{},[523,3078,3079],{},[28,3080,1231],{},[523,3082,3083],{},[28,3084,1236],{},[523,3086,3087],{},[28,3088,1241],{},[523,3090,3091,3092],{},"标题，20px \u002F SemiBold，最多 2 行；对齐 ",[28,3093,1247],{},[501,3095,3096,3100,3104,3108],{},[523,3097,3098],{},[28,3099,1254],{},[523,3101,3102],{},[28,3103,1236],{},[523,3105,3106],{},[28,3107,1241],{},[523,3109,3110,3111],{},"主按钮文案；空则不渲染；对齐 ",[28,3112,1268],{},[501,3114,3115,3119,3123,3127],{},[523,3116,3117],{},[28,3118,1275],{},[523,3120,3121],{},[28,3122,1236],{},[523,3124,3125],{},[28,3126,1241],{},[523,3128,3129,3130],{},"次按钮文案；空则不渲染；对齐 ",[28,3131,1289],{},[501,3133,3134,3138,3142,3146],{},[523,3135,3136],{},[28,3137,1296],{},[523,3139,3140],{},[28,3141,1236],{},[523,3143,3144],{},[28,3145,1241],{},[523,3147,3148,3149],{},"关闭按钮文案；空则不渲染；对齐 ",[28,3150,1310],{},[501,3152,3153,3157,3161,3165],{},[523,3154,3155],{},[28,3156,1317],{},[523,3158,3159],{},[28,3160,1210],{},[523,3162,3163],{},[28,3164,1326],{},[523,3166,3167,3168],{},"主按钮是否可用；对齐 ",[28,3169,1332],{},[501,3171,3172,3176,3180,3184],{},[523,3173,3174],{},[28,3175,1339],{},[523,3177,3178],{},[28,3179,1210],{},[523,3181,3182],{},[28,3183,1326],{},[523,3185,3186,3187],{},"次按钮是否可用；对齐 ",[28,3188,1353],{},[501,3190,3191,3195,3199,3203],{},[523,3192,3193],{},[28,3194,1360],{},[523,3196,3197],{},[28,3198,1365],{},[523,3200,3201],{},[28,3202,1370],{},[523,3204,3205,3206],{},"默认按钮（强调样式 + Enter 目标）；对齐 ",[28,3207,729],{},[501,3209,3210,3214,3218,3222],{},[523,3211,3212],{},[28,3213,1382],{},[523,3215,3216],{},[28,3217,1210],{},[523,3219,3220],{},[28,3221,274],{},[523,3223,3224,3225],{},"纵向撑满（上限 756）；对齐 ",[28,3226,1046],{},[501,3228,3229,3233,3237,3241],{},[523,3230,3231],{},[28,3232,1402],{},[523,3234,3235],{},[28,3236,1236],{},[523,3238,3239],{},[28,3240,1411],{},[523,3242,3243,3244],{},"无标题时的可访问名；对齐 ",[28,3245,1417],{},[501,3247,3248,3252,3256,3260],{},[523,3249,3250],{},[28,3251,1424],{},[523,3253,3254],{},[28,3255,1429],{},[523,3257,3258],{},[28,3259,1434],{},[523,3261,3262,3263,2425],{},"门户目标（Web 侧替代 ",[28,3264,1440],{},[495,3266,3267,3279],{},[498,3268,3269],{},[501,3270,3271,3274,3277],{},[504,3272,3273],{},"事件（Emits）",[504,3275,3276],{},"载荷",[504,3278,3048],{},[518,3280,3281,3296,3309,3325,3338,3351,3369],{},[501,3282,3283,3287,3291],{},[523,3284,3285],{},[28,3286,1463],{},[523,3288,3289],{},[28,3290,1210],{},[523,3292,3293,3295],{},[28,3294,134],{}," 的更新",[501,3297,3298,3302,3304],{},[523,3299,3300],{},[28,3301,1479],{},[523,3303,1411],{},[523,3305,3306,3307],{},"弹窗已打开；对齐 ",[28,3308,1487],{},[501,3310,3311,3315,3319],{},[523,3312,3313],{},[28,3314,851],{},[523,3316,3317],{},[28,3318,1498],{},[523,3320,3321,3322,3324],{},"主按钮被点击；",[28,3323,1504],{}," 阻止后续关闭",[501,3326,3327,3331,3335],{},[523,3328,3329],{},[28,3330,854],{},[523,3332,3333],{},[28,3334,1498],{},[523,3336,3337],{},"次按钮被点击；同上",[501,3339,3340,3344,3348],{},[523,3341,3342],{},[28,3343,857],{},[523,3345,3346],{},[28,3347,1498],{},[523,3349,3350],{},"关闭按钮被点击；同上",[501,3352,3353,3357,3361],{},[523,3354,3355],{},[28,3356,843],{},[523,3358,3359],{},[28,3360,1542],{},[523,3362,3363,3364,3366,3367],{},"请求关闭；",[28,3365,1504],{}," 取消关闭；对齐 ",[28,3368,1551],{},[501,3370,3371,3375,3379],{},[523,3372,3373],{},[28,3374,146],{},[523,3376,3377],{},[28,3378,1562],{},[523,3380,3381,3382,1569,3384,3386,3387],{},"已关闭，",[28,3383,1568],{},[28,3385,1572],{},"；对齐 ",[28,3388,1576],{},[495,3390,3391,3400],{},[498,3392,3393],{},[501,3394,3395,3398],{},[504,3396,3397],{},"插槽（Slots）",[504,3399,3048],{},[518,3401,3402,3418],{},[501,3403,3404,3408],{},[523,3405,3406],{},[28,3407,1231],{},[523,3409,3410,3411,139,3413,3415,3416],{},"对应 ",[28,3412,1247],{},[28,3414,1603],{},"；提供后取代 ",[28,3417,1231],{},[501,3419,3420,3424],{},[523,3421,3422],{},[28,3423,1614],{},[523,3425,3410,3426,139,3428],{},[28,3427,1619],{},[28,3429,1622],{},[1624,3431,3432,3452,3486,3491],{},[14,3433,3434,3437,3438,730,3440,3442,3443,3445,3446,3448,3449,3451],{},[23,3435,3436],{},"无障碍","：内容层渲染 ",[28,3439,1634],{},[28,3441,1637],{},"（对齐 WinUI 弹窗的 ",[28,3444,1641],{}," + 模态语义），可访问名取标题（无标题时可用 ",[28,3447,1402],{},"）；初始焦点按 WinUI 的三级优先设置（内容区第一个可聚焦元素 → 默认按钮 → 命令区第一个可聚焦按钮）；",[28,3450,1648],{}," 在弹窗内循环，关闭后焦点回到弹出前聚焦的元素；遮罩层对 AT 隐藏。",[14,3453,3454,3457,3458,3460,3461,3463,3464,3466,3467,2162,3469,3471,3472,139,3474,139,3476,139,3478,139,3480,3482,3483,3485],{},[23,3455,3456],{},"共享弹层原语","：遮罩层由 ",[28,3459,1658],{}," 提供（独立 Teleport + reka ",[28,3462,1662],{},"，83ms linear 淡入淡出、锁定 body 滚动、",[28,3465,1666],{},"），状态机由 ",[28,3468,1674],{},[28,3470,1670],{}," 提供（",[28,3473,1677],{},[28,3475,1680],{},[28,3477,1683],{},[28,3479,1686],{},[28,3481,1689],{},"，SSR 安全且尊重 ",[28,3484,1693],{},"）。后续 Tooltip \u002F Flyout 类组件复用同一组原语。",[14,3487,3488],{},[23,3489,3490],{},"实现要点",[44,3492,3493,3513,3554,3563,3582,3599,3690,3704,3719,3731],{},[47,3494,3495,3498,3499,3501,3502,3504,3505,3508,3509,3512],{},[23,3496,3497],{},"动效不是一条动画","：reka 的 ",[28,3500,1662],{}," 以节点上第一次 ",[28,3503,1713],{}," 决定卸载时机，而 WinUI 的缩放（250 \u002F 167ms）与淡入淡出（83ms）时长不同。因此本组件把",[23,3506,3507],{},"缩放放在内容层根节点","（最长的一条，负责门控卸载，退出动画不会被截断），",[23,3510,3511],{},"透明度放在内层表面","（83ms 结束即保持 0，剩余时间里的缩放不可见），遮罩层另在独立 Teleport 层上跑自己的 83ms —— 与 WinUI「两个 Popup、同一 Storyboard 多目标」的结构同构。",[47,3514,3515,2092,3518,3520,3521,3523,3524,3526,3527,3529,3530,3532,3533,139,3535,139,3537,3539,3540,2162,3542,139,3544,139,3546,3548,3549,139,3551,3553],{},[23,3516,3517],{},"动效逐帧对齐源码",[28,3519,1731],{},"（",[28,3522,1734],{},"）里 Load 分支注册 ",[28,3525,1738],{}," 1.05 → 1.0（250ms，",[28,3528,1742],{}," = cubic-bezier(0,0,0,1)）与 ",[28,3531,1746],{}," 0 → 1（83ms，linear），Unload 分支对称（167ms \u002F 83ms）；",[28,3534,1750],{},[28,3536,1753],{},[28,3538,1756],{}," 与 ",[28,3541,1770],{},[28,3543,1760],{},[28,3545,1763],{},[28,3547,1766],{}," 一一对应。250ms 与缓动都命中 token（",[28,3550,1774],{},[28,3552,1777],{},"），167ms \u002F 83ms 无同值 token，落成组件局部变量并注明来源。",[47,3555,3556,3559,3560,3562],{},[23,3557,3558],{},"遮罩层与弹窗同层","：两者 ",[28,3561,1787],{}," 都是 1000，靠 Teleport 挂载顺序（遮罩先、弹窗后）决定绘制次序 —— 这是为了让弹窗内部再 Teleport 的浮层（如 Combobox 下拉，同为 1000）仍能盖在弹窗之上。",[47,3564,3565,3568,3569,139,3571,139,3573,3575,3576,3578,3579,3581],{},[23,3566,3567],{},"点击遮罩不关闭","：WinUI 的 ContentDialog 没有任何 light-dismiss 路径，本组件同样把 ",[28,3570,1801],{},[28,3572,1804],{},[28,3574,1807],{}," 一律 ",[28,3577,1797],{},"，只有 ",[28,3580,30],{}," 与三个按钮能关闭。",[47,3583,3584,3589,3590,3592,3593,3595,3596,3598],{},[23,3585,3586,3588],{},[28,3587,30],{}," 与关闭按钮","：对齐 ",[28,3591,1822],{}," —— 存在可点的关闭按钮时，「程序化点击」它（先走 ",[28,3594,857],{},"），否则直接以 ",[28,3597,160],{}," 关闭。",[47,3600,3601,3604,3605,1839,3607,1047,3609,3611,3612,1839,3614,3616,3617,3619,3620,1839,3622,3624,3625,139,3627,3629,3630,3632,3633,1839,3635,1047,3637,3639,3640,1839,3642,3644,3645,3647,3648],{},[23,3602,3603],{},"配色映射","（WinUI 资源 → token）：",[28,3606,1838],{},[28,3608,1842],{},[28,3610,1845],{},"（ΔE 2.3 \u002F 0.6）；",[28,3613,97],{},[28,3615,1852],{}," 叠底后的结果 → ",[28,3618,1856],{},"（ΔE 0 \u002F 1.4）；",[28,3621,1860],{},[28,3623,1863],{},"（合成后 ",[28,3626,1867],{},[28,3628,1870],{},"）→ ",[28,3631,1874],{},"（ΔE 31 \u002F 16）；",[28,3634,1878],{},[28,3636,1881],{},[28,3638,1884],{},"；",[28,3641,1888],{},[28,3643,1891],{},"（30% 黑）→ ",[28,3646,1895],{},"（40% \u002F 50%）。Fluent 2 Web 的 token 表没有同值档，需要严格对齐实机时覆盖局部变量：",[180,3649,3651],{"className":1899,"code":3650,"language":1901,"meta":173,"style":173},".my-dialog .fui-content-dialog__surface {\n  --fui-content-dialog-surface: #f3f3f3; \u002F* SolidBackgroundFillColorBase *\u002F\n  --fui-content-dialog-border: #c1c1c1; \u002F* SurfaceStrokeColorDefault 合成值 *\u002F\n}\n",[28,3652,3653,3661,3673,3686],{"__ignoreMap":173},[188,3654,3655,3657,3659],{"class":190,"line":191},[188,3656,1908],{"class":202},[188,3658,1911],{"class":202},[188,3660,913],{"class":194},[188,3662,3663,3665,3667,3669,3671],{"class":190,"line":219},[188,3664,1918],{"class":428},[188,3666,52],{"class":194},[188,3668,1923],{"class":261},[188,3670,1885],{"class":194},[188,3672,1928],{"class":933},[188,3674,3675,3677,3679,3681,3683],{"class":190,"line":235},[188,3676,1933],{"class":428},[188,3678,52],{"class":194},[188,3680,1938],{"class":261},[188,3682,1885],{"class":194},[188,3684,3685],{"class":933},"\u002F* SurfaceStrokeColorDefault 合成值 *\u002F\n",[188,3687,3688],{"class":190,"line":248},[188,3689,954],{"class":194},[47,3691,3692,2092,3695,3697,3698,3700,3701,3703],{},[23,3693,3694],{},"阴影是 B 级近似",[28,3696,1955],{}," 用 ",[28,3699,1959],{}," 投阴影，源码只给 elevation 值、没有 px 可换算，这里按浮层语义位取 Fluent 2 最大档 ",[28,3702,1963],{},"。",[47,3705,3706,3710,3711,3713,3714,139,3716,3718],{},[23,3707,3708],{},[28,3709,1693],{},"：关闭缩放与淡入淡出（",[28,3712,1974],{},"），静态形态就是最终态（",[28,3715,1978],{},[28,3717,1981],{},"），关闭变为立即卸载。",[47,3720,3721,3724,3725,3727,3728,3730],{},[23,3722,3723],{},"窄视口","：WinUI 的 ",[28,3726,1991],{}," 等绝对尺寸在 Web 上用 ",[28,3729,1995],{}," 与视口对齐（WinUI 假定桌面窗口足够宽），属响应式补充。",[47,3732,3733,2092,3736,139,3738,3740,3741,3744,3745,3747,3748,3750,3751,3753,3754,3756,3757,3759],{},[23,3734,3735],{},"与 WinUI 的差异",[28,3737,2005],{},[28,3739,1551],{}," 的取消是",[23,3742,3743],{},"同步标志","（不做异步 Deferral）；",[28,3746,2015],{}," 在 button \u002F a \u002F input \u002F textarea \u002F select \u002F summary \u002F contenteditable \u002F ",[28,3749,2019],{}," 上不接管（WinUI 靠路由事件的 ",[28,3752,2023],{}," 达到同一效果）；焦点还原发生在退出动画结束（WinUI 在关闭流程开始时就还焦点）；不暴露 ",[28,3755,2027],{}," 等 Command 属性与三个 ",[28,3758,2031],{},"（由点击事件 \u002F 固定样式承担）；不做「同一父节点只允许一个 Popup 弹窗」的强约束；高对比度主题未实现（属已知缺口）。",[2034,3761,2036],{},{"title":173,"searchDepth":219,"depth":219,"links":3763},[3764,3765,3766,3767,3768,3769],{"id":2149,"depth":219,"text":2149},{"id":2405,"depth":219,"text":2405},{"id":2612,"depth":219,"text":2613},{"id":2723,"depth":219,"text":2724},{"id":2902,"depth":219,"text":2902},{"id":1178,"depth":219,"text":1179},"模态对话框：标题 + 正文 + 主\u002F次\u002F关闭三个按钮，遮罩层与弹窗的进入 \u002F 退出缓动逐帧对齐 WinUI 3。",{},{"title":2058},"\u002Fcomponents\u002Fcontent-dialog",{"title":2058,"description":3770},"components\u002Fcontent-dialog","g3fVQkbMdwXa48nXZ1lrPpud5IjRgrySo9hGOCpq3Ls",1792150931642]