[{"data":1,"prerenderedAt":2165},["ShallowReactive",2],{"navigation":3,"page:\u002Fcomponents\u002Feditable":320,"\u002Fcomponents\u002Feditable-surround":2160},[4,28],{"title":5,"path":6,"stem":7,"children":8,"icon":27},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Styling","\u002Fgetting-started\u002Fstyling","1.getting-started\u002F3.styling","i-lucide-paintbrush",{"title":23,"path":24,"stem":25,"icon":26},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-sliders",false,{"title":29,"path":30,"stem":31,"children":32,"icon":35},"Components","\u002Fcomponents","2.components\u002F1.index",[33,36,41,46,51,56,64,69,74,79,84,89,95,101,107,113,118,123,128,133,138,143,148,152,156,161,166,171,176,181,189,194,199,204,209,214,219,224,229,234,239,245,250,255,260,264,269,275,281,285,290,294,299,304,310,315],{"title":34,"path":30,"stem":31,"icon":35},"All Components","i-lucide-component",{"title":37,"path":38,"stem":39,"icon":40},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002Faccordion","i-lucide-layout-panel-top",{"title":42,"path":43,"stem":44,"icon":45},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","2.components\u002Falert-dialog","i-lucide-triangle-alert",{"title":47,"path":48,"stem":49,"icon":50},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar","i-lucide-circle-user",{"title":52,"path":53,"stem":54,"icon":55},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton","i-lucide-mouse-pointer-click",{"title":57,"path":58,"stem":59,"icon":60,"badge":61},"Calendar","\u002Fcomponents\u002Fcalendar","2.components\u002Fcalendar","i-lucide-calendar-days",{"label":62,"color":63},"NEW","success",{"title":65,"path":66,"stem":67,"icon":68},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox","i-lucide-square-check",{"title":70,"path":71,"stem":72,"icon":73},"Checkbox Group","\u002Fcomponents\u002Fcheckbox-group","2.components\u002Fcheckbox-group","i-lucide-list-checks",{"title":75,"path":76,"stem":77,"icon":78},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":80,"path":81,"stem":82,"icon":83},"Combobox","\u002Fcomponents\u002Fcombobox","2.components\u002Fcombobox","i-lucide-search",{"title":85,"path":86,"stem":87,"icon":88},"Context Menu","\u002Fcomponents\u002Fcontext-menu","2.components\u002Fcontext-menu","i-lucide-mouse-pointer-2",{"title":90,"path":91,"stem":92,"icon":93,"badge":94},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table","i-lucide-table-2",{"label":62,"color":63},{"title":96,"path":97,"stem":98,"icon":99,"badge":100},"Date Field","\u002Fcomponents\u002Fdate-field","2.components\u002Fdate-field","i-lucide-calendar-clock",{"label":62,"color":63},{"title":102,"path":103,"stem":104,"icon":105,"badge":106},"Date Range Field","\u002Fcomponents\u002Fdate-range-field","2.components\u002Fdate-range-field","i-lucide-calendar-range",{"label":62,"color":63},{"title":108,"path":109,"stem":110,"icon":111,"badge":112},"Date Range Picker","\u002Fcomponents\u002Fdate-range-picker","2.components\u002Fdate-range-picker","i-lucide-calendar-search",{"label":62,"color":63},{"title":114,"path":115,"stem":116,"icon":117},"Dialog","\u002Fcomponents\u002Fdialog","2.components\u002Fdialog","i-lucide-square",{"title":119,"path":120,"stem":121,"icon":122},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer","i-lucide-panel-right",{"title":124,"path":125,"stem":126,"icon":127},"Editable","\u002Fcomponents\u002Feditable","2.components\u002Feditable","i-lucide-square-pen",{"title":129,"path":130,"stem":131,"icon":132},"Field","\u002Fcomponents\u002Ffield","2.components\u002Ffield","i-lucide-text-cursor-input",{"title":134,"path":135,"stem":136,"icon":137},"Fieldset","\u002Fcomponents\u002Ffieldset","2.components\u002Ffieldset","i-lucide-group",{"title":139,"path":140,"stem":141,"icon":142},"Form","\u002Fcomponents\u002Fform","2.components\u002Fform","i-lucide-clipboard-check",{"title":144,"path":145,"stem":146,"icon":147},"Hover Preview Card","\u002Fcomponents\u002Fhover-preview-card","2.components\u002Fhover-preview-card","i-lucide-id-card",{"title":149,"path":150,"stem":151,"icon":132},"Input","\u002Fcomponents\u002Finput","2.components\u002Finput",{"title":153,"path":154,"stem":155,"icon":73},"Listbox","\u002Fcomponents\u002Flistbox","2.components\u002Flistbox",{"title":157,"path":158,"stem":159,"icon":160},"Menu","\u002Fcomponents\u002Fmenu","2.components\u002Fmenu","i-lucide-list",{"title":162,"path":163,"stem":164,"icon":165},"Menubar","\u002Fcomponents\u002Fmenubar","2.components\u002Fmenubar","i-lucide-panel-top",{"title":167,"path":168,"stem":169,"icon":170},"Meter","\u002Fcomponents\u002Fmeter","2.components\u002Fmeter","i-lucide-gauge",{"title":172,"path":173,"stem":174,"icon":105,"badge":175},"Month Picker","\u002Fcomponents\u002Fmonth-picker","2.components\u002Fmonth-picker",{"label":62,"color":63},{"title":177,"path":178,"stem":179,"icon":105,"badge":180},"Month Range Picker","\u002Fcomponents\u002Fmonth-range-picker","2.components\u002Fmonth-range-picker",{"label":62,"color":63},{"title":182,"path":183,"stem":184,"icon":185,"badge":186},"Navigation Menu","\u002Fcomponents\u002Fnavigation-menu","2.components\u002Fnavigation-menu","i-lucide-navigation",{"label":187,"color":188},"UPDATED","warning",{"title":190,"path":191,"stem":192,"icon":193},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field","i-lucide-badge-plus",{"title":195,"path":196,"stem":197,"icon":198},"Overlay Provider","\u002Fcomponents\u002Foverlay","2.components\u002Foverlay","i-lucide-panels-top-left",{"title":200,"path":201,"stem":202,"icon":203},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination","i-lucide-ellipsis",{"title":205,"path":206,"stem":207,"icon":208},"Pin \u002F OTP Input","\u002Fcomponents\u002Fpin-input","2.components\u002Fpin-input","i-lucide-binary",{"title":210,"path":211,"stem":212,"icon":213},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover","i-lucide-message-square",{"title":215,"path":216,"stem":217,"icon":218},"Progress","\u002Fcomponents\u002Fprogress","2.components\u002Fprogress","i-lucide-loader",{"title":220,"path":221,"stem":222,"icon":223},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group","i-lucide-circle-dot",{"title":225,"path":226,"stem":227,"icon":228},"Rating","\u002Fcomponents\u002Frating","2.components\u002Frating","i-lucide-star",{"title":230,"path":231,"stem":232,"icon":233},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect","i-lucide-list-filter",{"title":235,"path":236,"stem":237,"icon":238},"Separator","\u002Fcomponents\u002Fseparator","2.components\u002Fseparator","i-lucide-minus",{"title":240,"path":241,"stem":242,"icon":243,"badge":244},"Sidebar","\u002Fcomponents\u002Fsidebar","2.components\u002Fsidebar","i-lucide-panel-left",{"label":62,"color":63},{"title":246,"path":247,"stem":248,"icon":249},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider","i-lucide-sliders-horizontal",{"title":251,"path":252,"stem":253,"icon":254},"Stepper","\u002Fcomponents\u002Fstepper","2.components\u002Fstepper","i-lucide-list-ordered",{"title":256,"path":257,"stem":258,"icon":259},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch","i-lucide-toggle-left",{"title":261,"path":262,"stem":263,"icon":40},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":265,"path":266,"stem":267,"icon":268},"Tags Input","\u002Fcomponents\u002Ftags-input","2.components\u002Ftags-input","i-lucide-tags",{"title":270,"path":271,"stem":272,"icon":273,"badge":274},"Time Field","\u002Fcomponents\u002Ftime-field","2.components\u002Ftime-field","i-lucide-clock-3",{"label":62,"color":63},{"title":276,"path":277,"stem":278,"icon":279,"badge":280},"Time Range Field","\u002Fcomponents\u002Ftime-range-field","2.components\u002Ftime-range-field","i-lucide-clock-arrow-up",{"label":62,"color":63},{"title":282,"path":283,"stem":284,"icon":213},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":286,"path":287,"stem":288,"icon":289},"Toggle","\u002Fcomponents\u002Ftoggle","2.components\u002Ftoggle","i-lucide-toggle-right",{"title":291,"path":292,"stem":293,"icon":73},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","2.components\u002Ftoggle-group",{"title":295,"path":296,"stem":297,"icon":298},"Toolbar","\u002Fcomponents\u002Ftoolbar","2.components\u002Ftoolbar","i-lucide-wrench",{"title":300,"path":301,"stem":302,"icon":303},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip","i-lucide-info",{"title":305,"path":306,"stem":307,"icon":308,"badge":309},"Tree","\u002Fcomponents\u002Ftree","2.components\u002Ftree","i-lucide-folder-tree",{"label":62,"color":63},{"title":311,"path":312,"stem":313,"icon":60,"badge":314},"Year Picker","\u002Fcomponents\u002Fyear-picker","2.components\u002Fyear-picker",{"label":62,"color":63},{"title":316,"path":317,"stem":318,"icon":105,"badge":319},"Year Range Picker","\u002Fcomponents\u002Fyear-range-picker","2.components\u002Fyear-range-picker",{"label":62,"color":63},{"id":321,"title":124,"body":322,"description":2153,"extension":2154,"links":2155,"meta":2156,"navigation":2157,"path":125,"seo":2158,"stem":126,"__hash__":2159},"docs\u002F2.components\u002Feditable.md",{"type":323,"value":324,"toc":2131},"minimark",[325,332,339,344,393,400,403,409,646,650,655,673,725,729,743,798,802,809,869,873,882,965,969,972,1082,1086,1101,1105,1109,1153,1157,1521,1525,1639,1643,1737,1741,1794,1798,1897,1901,2052,2063,2067,2127],[326,327,328,331],"p",{},[329,330,124],"code",{}," switches between a preview and a text input. It keeps draft and committed values separate and supports native forms.",[326,333,334,335,338],{},"Use Editable for in-place text editing. Use ",[336,337,149],"a",{"href":150}," for a control that stays editable.",[340,341,343],"h2",{"id":342},"anatomy","Anatomy",[345,346,347,361,369,377,385],"ul",{},[348,349,350,356,357,360],"li",{},[351,352,353],"strong",{},[329,354,355],{},"#preview",": Replaces preview content. Receives the committed value, empty state, and ",[329,358,359],{},"edit"," action.",[348,362,363,368],{},[351,364,365],{},[329,366,367],{},"#edit",": Content inside the generated edit button.",[348,370,371,376],{},[351,372,373],{},[329,374,375],{},"#submit",": Content inside the generated submit button.",[348,378,379,384],{},[351,380,381],{},[329,382,383],{},"#cancel",": Content inside the generated cancel button.",[348,386,387,392],{},[351,388,389],{},[329,390,391],{},"#state",": Optional renderless state output with committed value, draft, edit state, and actions.",[326,394,395,396,399],{},"The component generates preview\u002Finput and action controls so their keyboard and form behavior stays connected. Style them with the matching ",[329,397,398],{},"ui"," keys.",[340,401,23],{"id":402},"usage",[404,405,406],"component-preview",{},[407,408],"examples-editable-demo",{},[410,411,412],"component-code",{},[413,414,419],"pre",{"className":415,"code":416,"language":417,"meta":418,"style":418},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Editable } from \"akaza-ui\";\nimport { ref } from \"vue\";\n\nconst title = ref(\"Quarterly planning notes\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CEditable\n    v-model=\"title\"\n    activation-mode=\"click\"\n    submit-mode=\"none\"\n    select-on-focus\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[329,420,421,456,487,509,516,545,555,560,570,579,595,610,625,631,637],{"__ignoreMap":418},[422,423,426,430,434,438,441,444,447,451,453],"span",{"class":424,"line":425},"line",1,[422,427,429],{"class":428},"sMK4o","\u003C",[422,431,433],{"class":432},"swJcz","script",[422,435,437],{"class":436},"spNyl"," setup",[422,439,440],{"class":436}," lang",[422,442,443],{"class":428},"=",[422,445,446],{"class":428},"\"",[422,448,450],{"class":449},"sfazB","ts",[422,452,446],{"class":428},[422,454,455],{"class":428},">\n",[422,457,459,463,466,470,473,476,479,482,484],{"class":424,"line":458},2,[422,460,462],{"class":461},"s7zQu","import",[422,464,465],{"class":428}," {",[422,467,469],{"class":468},"sTEyZ"," Editable",[422,471,472],{"class":428}," }",[422,474,475],{"class":461}," from",[422,477,478],{"class":428}," \"",[422,480,481],{"class":449},"akaza-ui",[422,483,446],{"class":428},[422,485,486],{"class":428},";\n",[422,488,490,492,494,497,499,501,503,505,507],{"class":424,"line":489},3,[422,491,462],{"class":461},[422,493,465],{"class":428},[422,495,496],{"class":468}," ref",[422,498,472],{"class":428},[422,500,475],{"class":461},[422,502,478],{"class":428},[422,504,417],{"class":449},[422,506,446],{"class":428},[422,508,486],{"class":428},[422,510,512],{"class":424,"line":511},4,[422,513,515],{"emptyLinePlaceholder":514},true,"\n",[422,517,519,522,525,527,530,533,535,538,540,543],{"class":424,"line":518},5,[422,520,521],{"class":436},"const",[422,523,524],{"class":468}," title ",[422,526,443],{"class":428},[422,528,496],{"class":529},"s2Zo4",[422,531,532],{"class":468},"(",[422,534,446],{"class":428},[422,536,537],{"class":449},"Quarterly planning notes",[422,539,446],{"class":428},[422,541,542],{"class":468},")",[422,544,486],{"class":428},[422,546,548,551,553],{"class":424,"line":547},6,[422,549,550],{"class":428},"\u003C\u002F",[422,552,433],{"class":432},[422,554,455],{"class":428},[422,556,558],{"class":424,"line":557},7,[422,559,515],{"emptyLinePlaceholder":514},[422,561,563,565,568],{"class":424,"line":562},8,[422,564,429],{"class":428},[422,566,567],{"class":432},"template",[422,569,455],{"class":428},[422,571,573,576],{"class":424,"line":572},9,[422,574,575],{"class":428},"  \u003C",[422,577,578],{"class":432},"Editable\n",[422,580,582,585,587,589,592],{"class":424,"line":581},10,[422,583,584],{"class":436},"    v-model",[422,586,443],{"class":428},[422,588,446],{"class":428},[422,590,591],{"class":449},"title",[422,593,594],{"class":428},"\"\n",[422,596,598,601,603,605,608],{"class":424,"line":597},11,[422,599,600],{"class":436},"    activation-mode",[422,602,443],{"class":428},[422,604,446],{"class":428},[422,606,607],{"class":449},"click",[422,609,594],{"class":428},[422,611,613,616,618,620,623],{"class":424,"line":612},12,[422,614,615],{"class":436},"    submit-mode",[422,617,443],{"class":428},[422,619,446],{"class":428},[422,621,622],{"class":449},"none",[422,624,594],{"class":428},[422,626,628],{"class":424,"line":627},13,[422,629,630],{"class":436},"    select-on-focus\n",[422,632,634],{"class":424,"line":633},14,[422,635,636],{"class":428},"  \u002F>\n",[422,638,640,642,644],{"class":424,"line":639},15,[422,641,550],{"class":428},[422,643,567],{"class":432},[422,645,455],{"class":428},[340,647,649],{"id":648},"examples","Examples",[651,652,654],"h3",{"id":653},"activation-mode","Activation mode",[326,656,657,658,661,662,665,666,668,669,672],{},"Choose when the preview enters edit mode. ",[329,659,660],{},"focus"," is keyboard-friendly and is the default. ",[329,663,664],{},"dblclick"," avoids accidental pointer edits, while ",[329,667,622],{}," leaves activation to the generated edit button or exposed ",[329,670,671],{},"edit()"," method.",[413,674,676],{"className":415,"code":675,"language":417,"meta":418,"style":418},"\u003Ctemplate>\n  \u003CEditable v-model=\"title\" activation-mode=\"dblclick\" \u002F>\n\u003C\u002Ftemplate>\n",[329,677,678,686,717],{"__ignoreMap":418},[422,679,680,682,684],{"class":424,"line":425},[422,681,429],{"class":428},[422,683,567],{"class":432},[422,685,455],{"class":428},[422,687,688,690,692,695,697,699,701,703,706,708,710,712,714],{"class":424,"line":458},[422,689,575],{"class":428},[422,691,124],{"class":432},[422,693,694],{"class":436}," v-model",[422,696,443],{"class":428},[422,698,446],{"class":428},[422,700,591],{"class":449},[422,702,446],{"class":428},[422,704,705],{"class":436}," activation-mode",[422,707,443],{"class":428},[422,709,446],{"class":428},[422,711,664],{"class":449},[422,713,446],{"class":428},[422,715,716],{"class":428}," \u002F>\n",[422,718,719,721,723],{"class":424,"line":489},[422,720,550],{"class":428},[422,722,567],{"class":432},[422,724,455],{"class":428},[651,726,728],{"id":727},"submit-and-cancel","Submit and cancel",[326,730,731,734,735,738,739,742],{},[329,732,733],{},"submitMode"," controls automatic submission. Escape always cancels. In multiline mode, ",[329,736,737],{},"Ctrl+Enter"," or ",[329,740,741],{},"Cmd+Enter"," submits when Enter submission is enabled.",[413,744,746],{"className":415,"code":745,"language":417,"meta":418,"style":418},"\u003Ctemplate>\n  \u003CEditable v-model=\"summary\" multiline submit-mode=\"both\" \u002F>\n\u003C\u002Ftemplate>\n",[329,747,748,756,790],{"__ignoreMap":418},[422,749,750,752,754],{"class":424,"line":425},[422,751,429],{"class":428},[422,753,567],{"class":432},[422,755,455],{"class":428},[422,757,758,760,762,764,766,768,771,773,776,779,781,783,786,788],{"class":424,"line":458},[422,759,575],{"class":428},[422,761,124],{"class":432},[422,763,694],{"class":436},[422,765,443],{"class":428},[422,767,446],{"class":428},[422,769,770],{"class":449},"summary",[422,772,446],{"class":428},[422,774,775],{"class":436}," multiline",[422,777,778],{"class":436}," submit-mode",[422,780,443],{"class":428},[422,782,446],{"class":428},[422,784,785],{"class":449},"both",[422,787,446],{"class":428},[422,789,716],{"class":428},[422,791,792,794,796],{"class":424,"line":489},[422,793,550],{"class":428},[422,795,567],{"class":432},[422,797,455],{"class":428},[651,799,801],{"id":800},"explicit-submission","Explicit submission",[326,803,804,805,808],{},"Set ",[329,806,807],{},"submitMode=\"none\""," when only the generated submit button or exposed method should commit the draft.",[413,810,812],{"className":415,"code":811,"language":417,"meta":418,"style":418},"\u003Ctemplate>\n  \u003CEditable v-model=\"slug\" activation-mode=\"none\" submit-mode=\"none\" \u002F>\n\u003C\u002Ftemplate>\n",[329,813,814,822,861],{"__ignoreMap":418},[422,815,816,818,820],{"class":424,"line":425},[422,817,429],{"class":428},[422,819,567],{"class":432},[422,821,455],{"class":428},[422,823,824,826,828,830,832,834,837,839,841,843,845,847,849,851,853,855,857,859],{"class":424,"line":458},[422,825,575],{"class":428},[422,827,124],{"class":432},[422,829,694],{"class":436},[422,831,443],{"class":428},[422,833,446],{"class":428},[422,835,836],{"class":449},"slug",[422,838,446],{"class":428},[422,840,705],{"class":436},[422,842,443],{"class":428},[422,844,446],{"class":428},[422,846,622],{"class":449},[422,848,446],{"class":428},[422,850,778],{"class":436},[422,852,443],{"class":428},[422,854,446],{"class":428},[422,856,622],{"class":449},[422,858,446],{"class":428},[422,860,716],{"class":428},[422,862,863,865,867],{"class":424,"line":489},[422,864,550],{"class":428},[422,866,567],{"class":432},[422,868,455],{"class":428},[651,870,872],{"id":871},"field-and-form-integration","Field and form integration",[326,874,875,876,878,879,881],{},"Inside ",[336,877,129],{"href":130},", ",[329,880,124],{}," inherits id, name, required, disabled, and description metadata. Its hidden native control submits only the committed value.",[413,883,885],{"className":415,"code":884,"language":417,"meta":418,"style":418},"\u003Ctemplate>\n  \u003CField label=\"Release title\" name=\"title\" required>\n    \u003CEditable v-model=\"title\" \u002F>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n",[329,886,887,895,929,948,957],{"__ignoreMap":418},[422,888,889,891,893],{"class":424,"line":425},[422,890,429],{"class":428},[422,892,567],{"class":432},[422,894,455],{"class":428},[422,896,897,899,901,904,906,908,911,913,916,918,920,922,924,927],{"class":424,"line":458},[422,898,575],{"class":428},[422,900,129],{"class":432},[422,902,903],{"class":436}," label",[422,905,443],{"class":428},[422,907,446],{"class":428},[422,909,910],{"class":449},"Release title",[422,912,446],{"class":428},[422,914,915],{"class":436}," name",[422,917,443],{"class":428},[422,919,446],{"class":428},[422,921,591],{"class":449},[422,923,446],{"class":428},[422,925,926],{"class":436}," required",[422,928,455],{"class":428},[422,930,931,934,936,938,940,942,944,946],{"class":424,"line":489},[422,932,933],{"class":428},"    \u003C",[422,935,124],{"class":432},[422,937,694],{"class":436},[422,939,443],{"class":428},[422,941,446],{"class":428},[422,943,591],{"class":449},[422,945,446],{"class":428},[422,947,716],{"class":428},[422,949,950,953,955],{"class":424,"line":511},[422,951,952],{"class":428},"  \u003C\u002F",[422,954,129],{"class":432},[422,956,455],{"class":428},[422,958,959,961,963],{"class":424,"line":518},[422,960,550],{"class":428},[422,962,567],{"class":432},[422,964,455],{"class":428},[651,966,968],{"id":967},"custom-preview","Custom preview",[326,970,971],{},"The preview slot exposes an explicit action. Keep interaction on the generated preview button; only replace its content.",[413,973,975],{"className":415,"code":974,"language":417,"meta":418,"style":418},"\u003Ctemplate>\n  \u003CEditable v-model=\"title\">\n    \u003Ctemplate #preview=\"{ value, isEmpty }\">\n      \u003Cstrong>{{ isEmpty ? \"Add a title\" : value }}\u003C\u002Fstrong>\n    \u003C\u002Ftemplate>\n  \u003C\u002FEditable>\n\u003C\u002Ftemplate>\n",[329,976,977,985,1003,1038,1057,1066,1074],{"__ignoreMap":418},[422,978,979,981,983],{"class":424,"line":425},[422,980,429],{"class":428},[422,982,567],{"class":432},[422,984,455],{"class":428},[422,986,987,989,991,993,995,997,999,1001],{"class":424,"line":458},[422,988,575],{"class":428},[422,990,124],{"class":432},[422,992,694],{"class":436},[422,994,443],{"class":428},[422,996,446],{"class":428},[422,998,591],{"class":449},[422,1000,446],{"class":428},[422,1002,455],{"class":428},[422,1004,1005,1007,1009,1012,1015,1017,1019,1022,1025,1028,1031,1034,1036],{"class":424,"line":489},[422,1006,933],{"class":428},[422,1008,567],{"class":432},[422,1010,1011],{"class":428}," #",[422,1013,1014],{"class":436},"preview",[422,1016,443],{"class":428},[422,1018,446],{"class":428},[422,1020,1021],{"class":428},"{",[422,1023,1024],{"class":468}," value",[422,1026,1027],{"class":428},",",[422,1029,1030],{"class":468}," isEmpty ",[422,1032,1033],{"class":428},"}",[422,1035,446],{"class":428},[422,1037,455],{"class":428},[422,1039,1040,1043,1045,1048,1051,1053,1055],{"class":424,"line":511},[422,1041,1042],{"class":428},"      \u003C",[422,1044,351],{"class":432},[422,1046,1047],{"class":428},">",[422,1049,1050],{"class":468},"{{ isEmpty ? \"Add a title\" : value }}",[422,1052,550],{"class":428},[422,1054,351],{"class":432},[422,1056,455],{"class":428},[422,1058,1059,1062,1064],{"class":424,"line":518},[422,1060,1061],{"class":428},"    \u003C\u002F",[422,1063,567],{"class":432},[422,1065,455],{"class":428},[422,1067,1068,1070,1072],{"class":424,"line":547},[422,1069,952],{"class":428},[422,1071,124],{"class":432},[422,1073,455],{"class":428},[422,1075,1076,1078,1080],{"class":424,"line":557},[422,1077,550],{"class":428},[422,1079,567],{"class":432},[422,1081,455],{"class":428},[651,1083,1085],{"id":1084},"native-form-reset","Native Form Reset",[326,1087,1088,1089,1092,1093,1096,1097,1100],{},"A native form reset restores the initial model and clears interaction state. Calling ",[329,1090,1091],{},"preventDefault()"," on the reset event preserves the current value. Reset updates ",[329,1094,1095],{},"v-model"," without emitting ",[329,1098,1099],{},"value-change",".",[340,1102,1104],{"id":1103},"api-reference","API Reference",[651,1106,1108],{"id":1107},"model","Model",[1110,1111,1112,1130],"table",{},[1113,1114,1115],"thead",{},[1116,1117,1118,1121,1124,1127],"tr",{},[1119,1120,1108],"th",{},[1119,1122,1123],{},"Type",[1119,1125,1126],{},"Default",[1119,1128,1129],{},"Description",[1131,1132,1133],"tbody",{},[1116,1134,1135,1140,1145,1150],{},[1136,1137,1138],"td",{},[329,1139,1095],{},[1136,1141,1142],{},[329,1143,1144],{},"string | null",[1136,1146,1147],{},[329,1148,1149],{},"\"\"",[1136,1151,1152],{},"Committed value. Draft input does not update it until submission.",[651,1154,1156],{"id":1155},"props","Props",[1110,1158,1159,1172],{},[1113,1160,1161],{},[1116,1162,1163,1166,1168,1170],{},[1119,1164,1165],{},"Prop",[1119,1167,1123],{},[1119,1169,1126],{},[1119,1171,1129],{},[1131,1173,1174,1192,1209,1229,1249,1268,1288,1306,1327,1345,1365,1382,1400,1418,1436,1454,1472,1488,1505],{},[1116,1175,1176,1181,1186,1189],{},[1136,1177,1178],{},[329,1179,1180],{},"id",[1136,1182,1183],{},[329,1184,1185],{},"string",[1136,1187,1188],{},"field\u002Fgenerated id",[1136,1190,1191],{},"Visible control id.",[1116,1193,1194,1199,1203,1206],{},[1136,1195,1196],{},[329,1197,1198],{},"name",[1136,1200,1201],{},[329,1202,1185],{},[1136,1204,1205],{},"field name",[1136,1207,1208],{},"Native form field name.",[1116,1210,1211,1216,1221,1226],{},[1136,1212,1213],{},[329,1214,1215],{},"placeholder",[1136,1217,1218],{},[329,1219,1220],{},"string | { preview?: string; edit?: string }",[1136,1222,1223],{},[329,1224,1225],{},"\"Enter text...\"",[1136,1227,1228],{},"Shared or mode-specific placeholder.",[1116,1230,1231,1236,1241,1246],{},[1136,1232,1233],{},[329,1234,1235],{},"activationMode",[1136,1237,1238],{},[329,1239,1240],{},"\"focus\" | \"click\" | \"dblclick\" | \"none\"",[1136,1242,1243],{},[329,1244,1245],{},"\"focus\"",[1136,1247,1248],{},"Preview event that starts editing.",[1116,1250,1251,1255,1260,1265],{},[1136,1252,1253],{},[329,1254,733],{},[1136,1256,1257],{},[329,1258,1259],{},"\"blur\" | \"enter\" | \"both\" | \"none\"",[1136,1261,1262],{},[329,1263,1264],{},"\"blur\"",[1136,1266,1267],{},"Events that submit the draft.",[1116,1269,1270,1275,1280,1285],{},[1136,1271,1272],{},[329,1273,1274],{},"startWithEditMode",[1136,1276,1277],{},[329,1278,1279],{},"boolean",[1136,1281,1282],{},[329,1283,1284],{},"false",[1136,1286,1287],{},"Starts with the input visible and focused.",[1116,1289,1290,1295,1299,1303],{},[1136,1291,1292],{},[329,1293,1294],{},"selectOnFocus",[1136,1296,1297],{},[329,1298,1279],{},[1136,1300,1301],{},[329,1302,1284],{},[1136,1304,1305],{},"Selects input text when editing starts.",[1116,1307,1308,1313,1317,1321],{},[1136,1309,1310],{},[329,1311,1312],{},"autoResize",[1136,1314,1315],{},[329,1316,1279],{},[1136,1318,1319],{},[329,1320,1284],{},[1136,1322,1323,1324,1100],{},"Uses native ",[329,1325,1326],{},"field-sizing: content",[1116,1328,1329,1334,1338,1342],{},[1136,1330,1331],{},[329,1332,1333],{},"multiline",[1136,1335,1336],{},[329,1337,1279],{},[1136,1339,1340],{},[329,1341,1284],{},[1136,1343,1344],{},"Renders a textarea instead of an input.",[1116,1346,1347,1352,1357,1362],{},[1136,1348,1349],{},[329,1350,1351],{},"rows",[1136,1353,1354],{},[329,1355,1356],{},"number",[1136,1358,1359],{},[329,1360,1361],{},"2",[1136,1363,1364],{},"Initial textarea rows.",[1116,1366,1367,1372,1376,1379],{},[1136,1368,1369],{},[329,1370,1371],{},"maxLength",[1136,1373,1374],{},[329,1375,1356],{},[1136,1377,1378],{},"—",[1136,1380,1381],{},"Native maximum draft length.",[1116,1383,1384,1389,1393,1397],{},[1136,1385,1386],{},[329,1387,1388],{},"required",[1136,1390,1391],{},[329,1392,1279],{},[1136,1394,1395],{},[329,1396,1284],{},[1136,1398,1399],{},"Requires a committed non-empty value.",[1116,1401,1402,1407,1411,1415],{},[1136,1403,1404],{},[329,1405,1406],{},"disabled",[1136,1408,1409],{},[329,1410,1279],{},[1136,1412,1413],{},[329,1414,1284],{},[1136,1416,1417],{},"Disables all controls and form submission.",[1116,1419,1420,1425,1429,1433],{},[1136,1421,1422],{},[329,1423,1424],{},"readOnly",[1136,1426,1427],{},[329,1428,1279],{},[1136,1430,1431],{},[329,1432,1284],{},[1136,1434,1435],{},"Keeps preview focusable but blocks editing.",[1116,1437,1438,1443,1447,1451],{},[1136,1439,1440],{},[329,1441,1442],{},"invalid",[1136,1444,1445],{},[329,1446,1279],{},[1136,1448,1449],{},[329,1450,1284],{},[1136,1452,1453],{},"Controlled invalid state.",[1116,1455,1456,1461,1466,1469],{},[1136,1457,1458],{},[329,1459,1460],{},"dir",[1136,1462,1463],{},[329,1464,1465],{},"\"ltr\" | \"rtl\"",[1136,1467,1468],{},"inherited",[1136,1470,1471],{},"Text direction.",[1116,1473,1474,1479,1483,1485],{},[1136,1475,1476],{},[329,1477,1478],{},"ariaLabel",[1136,1480,1481],{},[329,1482,1185],{},[1136,1484,1378],{},[1136,1486,1487],{},"Accessible label when no Field label exists.",[1116,1489,1490,1495,1499,1502],{},[1136,1491,1492],{},[329,1493,1494],{},"ariaDescribedby",[1136,1496,1497],{},[329,1498,1185],{},[1136,1500,1501],{},"field ids",[1136,1503,1504],{},"Accessible description ids.",[1116,1506,1507,1511,1516,1518],{},[1136,1508,1509],{},[329,1510,398],{},[1136,1512,1513],{},[329,1514,1515],{},"EditableUi",[1136,1517,1378],{},[1136,1519,1520],{},"Classes for structural parts.",[651,1522,1524],{"id":1523},"emits","Emits",[1110,1526,1527,1539],{},[1113,1528,1529],{},[1116,1530,1531,1534,1537],{},[1119,1532,1533],{},"Event",[1119,1535,1536],{},"Payload",[1119,1538,1129],{},[1131,1540,1541,1556,1574,1588,1612,1625],{},[1116,1542,1543,1548,1553],{},[1136,1544,1545],{},[329,1546,1547],{},"update:modelValue",[1136,1549,1550],{},[329,1551,1552],{},"value",[1136,1554,1555],{},"Fired after a draft is accepted.",[1116,1557,1558,1562,1567],{},[1136,1559,1560],{},[329,1561,1099],{},[1136,1563,1564],{},[329,1565,1566],{},"(value, details)",[1136,1568,1569,1570,1573],{},"Fired before commit. ",[329,1571,1572],{},"details.cancel()"," prevents it.",[1116,1575,1576,1581,1585],{},[1136,1577,1578],{},[329,1579,1580],{},"draft-change",[1136,1582,1583],{},[329,1584,1566],{},[1136,1586,1587],{},"Fired before draft input updates. Cancelable.",[1116,1589,1590,1595,1600],{},[1136,1591,1592],{},[329,1593,1594],{},"state-change",[1136,1596,1597],{},[329,1598,1599],{},"(state, details)",[1136,1601,1602,1603,878,1605,1608,1609,1100],{},"Fired for ",[329,1604,359],{},[329,1606,1607],{},"submit",", and ",[329,1610,1611],{},"cancel",[1116,1613,1614,1618,1622],{},[1136,1615,1616],{},[329,1617,1607],{},[1136,1619,1620],{},[329,1621,1566],{},[1136,1623,1624],{},"Fired before submission completes. Cancelable.",[1116,1626,1627,1631,1636],{},[1136,1628,1629],{},[329,1630,1611],{},[1136,1632,1633],{},[329,1634,1635],{},"(committedValue, details)",[1136,1637,1638],{},"Fired before draft cancellation. Cancelable.",[651,1640,1642],{"id":1641},"slots","Slots",[1110,1644,1645,1656],{},[1113,1646,1647],{},[1116,1648,1649,1652,1654],{},[1119,1650,1651],{},"Slot",[1119,1653,1156],{},[1119,1655,1129],{},[1131,1657,1658,1676,1687,1698,1709],{},[1116,1659,1660,1664,1673],{},[1136,1661,1662],{},[329,1663,1014],{},[1136,1665,1666,878,1668,878,1671],{},[329,1667,1552],{},[329,1669,1670],{},"isEmpty",[329,1672,359],{},[1136,1674,1675],{},"Preview button content.",[1116,1677,1678,1682,1684],{},[1136,1679,1680],{},[329,1681,359],{},[1136,1683,1378],{},[1136,1685,1686],{},"Edit button content.",[1116,1688,1689,1693,1695],{},[1136,1690,1691],{},[329,1692,1607],{},[1136,1694,1378],{},[1136,1696,1697],{},"Submit button content.",[1116,1699,1700,1704,1706],{},[1136,1701,1702],{},[329,1703,1611],{},[1136,1705,1378],{},[1136,1707,1708],{},"Cancel button content.",[1116,1710,1711,1716,1734],{},[1136,1712,1713],{},[329,1714,1715],{},"state",[1136,1717,1718,878,1720,878,1723,878,1726,878,1728,878,1730,878,1732],{},[329,1719,1552],{},[329,1721,1722],{},"draft",[329,1724,1725],{},"isEditing",[329,1727,1670],{},[329,1729,359],{},[329,1731,1607],{},[329,1733,1611],{},[1136,1735,1736],{},"Optional state-driven custom UI.",[651,1738,1740],{"id":1739},"methods","Methods",[1110,1742,1743,1752],{},[1113,1744,1745],{},[1116,1746,1747,1750],{},[1119,1748,1749],{},"Method",[1119,1751,1129],{},[1131,1753,1754,1764,1774,1784],{},[1116,1755,1756,1761],{},[1136,1757,1758],{},[329,1759,1760],{},"edit(event?)",[1136,1762,1763],{},"Enters edit mode and focuses the input.",[1116,1765,1766,1771],{},[1136,1767,1768],{},[329,1769,1770],{},"submit(event?, reason?)",[1136,1772,1773],{},"Validates and commits the draft.",[1116,1775,1776,1781],{},[1136,1777,1778],{},[329,1779,1780],{},"cancel(event?)",[1136,1782,1783],{},"Restores the committed value and exits edit mode.",[1116,1785,1786,1791],{},[1136,1787,1788],{},[329,1789,1790],{},"focus()",[1136,1792,1793],{},"Focuses the visible edit input.",[651,1795,1797],{"id":1796},"ui-options","UI Options",[1110,1799,1800,1809],{},[1113,1801,1802],{},[1116,1803,1804,1807],{},[1119,1805,1806],{},"Key",[1119,1808,1129],{},[1131,1810,1811,1821,1831,1841,1850,1860,1870,1879,1888],{},[1116,1812,1813,1818],{},[1136,1814,1815],{},[329,1816,1817],{},"root",[1136,1819,1820],{},"Root wrapper.",[1116,1822,1823,1828],{},[1136,1824,1825],{},[329,1826,1827],{},"hiddenInput",[1136,1829,1830],{},"Native form\u002Fvalidity input.",[1116,1832,1833,1838],{},[1136,1834,1835],{},[329,1836,1837],{},"area",[1136,1839,1840],{},"Preview\u002Finput area.",[1116,1842,1843,1847],{},[1136,1844,1845],{},[329,1846,1014],{},[1136,1848,1849],{},"Generated preview button.",[1116,1851,1852,1857],{},[1136,1853,1854],{},[329,1855,1856],{},"input",[1136,1858,1859],{},"Generated input or textarea.",[1116,1861,1862,1867],{},[1136,1863,1864],{},[329,1865,1866],{},"actions",[1136,1868,1869],{},"Action wrapper.",[1116,1871,1872,1876],{},[1136,1873,1874],{},[329,1875,359],{},[1136,1877,1878],{},"Edit button.",[1116,1880,1881,1885],{},[1136,1882,1883],{},[329,1884,1607],{},[1136,1886,1887],{},"Submit button.",[1116,1889,1890,1894],{},[1136,1891,1892],{},[329,1893,1611],{},[1136,1895,1896],{},"Cancel button.",[651,1898,1900],{"id":1899},"styling-hooks","Styling Hooks",[1110,1902,1903,1916],{},[1113,1904,1905],{},[1116,1906,1907,1910,1913],{},[1119,1908,1909],{},"UI key",[1119,1911,1912],{},"CSS class",[1119,1914,1915],{},"Data attrs",[1131,1917,1918,1932,1946,1962,1981,1997,2012,2026,2039],{},[1116,1919,1920,1924,1929],{},[1136,1921,1922],{},[329,1923,1817],{},[1136,1925,1926],{},[329,1927,1928],{},"akaza-editable",[1136,1930,1931],{},"`data-akaza-state=\"preview",[1116,1933,1934,1938,1943],{},[1136,1935,1936],{},[329,1937,1827],{},[1136,1939,1940],{},[329,1941,1942],{},"akaza-editable-hidden-input",[1136,1944,1945],{},"native validity attrs",[1116,1947,1948,1952,1957],{},[1136,1949,1950],{},[329,1951,1837],{},[1136,1953,1954],{},[329,1955,1956],{},"akaza-editable-area",[1136,1958,1959],{},[329,1960,1961],{},"data-akaza-state",[1116,1963,1964,1968,1973],{},[1136,1965,1966],{},[329,1967,1014],{},[1136,1969,1970],{},[329,1971,1972],{},"akaza-editable-preview",[1136,1974,1975,878,1978],{},[329,1976,1977],{},"data-akaza-state=\"preview\"",[329,1979,1980],{},"data-akaza-empty",[1116,1982,1983,1987,1992],{},[1136,1984,1985],{},[329,1986,1856],{},[1136,1988,1989],{},[329,1990,1991],{},"akaza-editable-input",[1136,1993,1994],{},[329,1995,1996],{},"data-akaza-state=\"editing\"",[1116,1998,1999,2003,2008],{},[1136,2000,2001],{},[329,2002,1866],{},[1136,2004,2005],{},[329,2006,2007],{},"akaza-editable-actions",[1136,2009,2010],{},[329,2011,1961],{},[1116,2013,2014,2018,2023],{},[1136,2015,2016],{},[329,2017,359],{},[1136,2019,2020],{},[329,2021,2022],{},"akaza-editable-edit",[1136,2024,2025],{},"native disabled attr",[1116,2027,2028,2032,2037],{},[1136,2029,2030],{},[329,2031,1607],{},[1136,2033,2034],{},[329,2035,2036],{},"akaza-editable-submit",[1136,2038,2025],{},[1116,2040,2041,2045,2050],{},[1136,2042,2043],{},[329,2044,1611],{},[1136,2046,2047],{},[329,2048,2049],{},"akaza-editable-cancel",[1136,2051,2025],{},[326,2053,2054,2055,2058,2059,2062],{},"Plain ",[329,2056,2057],{},"class"," applies to the root wrapper. Use ",[329,2060,2061],{},"ui.input"," for the editable control.",[651,2064,2066],{"id":2065},"keyboard","Keyboard",[1110,2068,2069,2078],{},[1113,2070,2071],{},[1116,2072,2073,2075],{},[1119,2074,1806],{},[1119,2076,2077],{},"Behavior",[1131,2079,2080,2093,2105,2115],{},[1116,2081,2082,2087],{},[1136,2083,2084],{},[329,2085,2086],{},"Enter",[1136,2088,2089,2090,2092],{},"Submits when ",[329,2091,733],{}," includes Enter.",[1116,2094,2095,2102],{},[1136,2096,2097,2099,2100],{},[329,2098,737],{}," \u002F ",[329,2101,741],{},[1136,2103,2104],{},"Submits a multiline value.",[1116,2106,2107,2112],{},[1136,2108,2109],{},[329,2110,2111],{},"Escape",[1136,2113,2114],{},"Cancels the draft and returns to preview mode.",[1116,2116,2117,2122],{},[1136,2118,2119],{},[329,2120,2121],{},"Tab",[1136,2123,2124,2125,1100],{},"Uses native focus order; blur may submit depending on ",[329,2126,733],{},[2128,2129,2130],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":418,"searchDepth":425,"depth":458,"links":2132},[2133,2134,2135,2143],{"id":342,"depth":458,"text":343},{"id":402,"depth":458,"text":23},{"id":648,"depth":458,"text":649,"children":2136},[2137,2138,2139,2140,2141,2142],{"id":653,"depth":489,"text":654},{"id":727,"depth":489,"text":728},{"id":800,"depth":489,"text":801},{"id":871,"depth":489,"text":872},{"id":967,"depth":489,"text":968},{"id":1084,"depth":489,"text":1085},{"id":1103,"depth":458,"text":1104,"children":2144},[2145,2146,2147,2148,2149,2150,2151,2152],{"id":1107,"depth":489,"text":1108},{"id":1155,"depth":489,"text":1156},{"id":1523,"depth":489,"text":1524},{"id":1641,"depth":489,"text":1642},{"id":1739,"depth":489,"text":1740},{"id":1796,"depth":489,"text":1797},{"id":1899,"depth":489,"text":1900},{"id":2065,"depth":489,"text":2066},"Inline text editing with preview, draft, submit, cancel, and native form behavior.","md",null,{},{"icon":127},{"title":124,"description":2153},"-6yGCXRkXfx_PXUQ4-z16p_xTGXkrnagbmtE0IwZmnU",[2161,2163],{"title":119,"path":120,"stem":121,"description":2162,"icon":122,"children":-1},"A panel that slides in from the edge of the viewport.",{"title":129,"path":130,"stem":131,"description":2164,"icon":132,"children":-1},"Label, description, and error wiring for form controls.",1789932252964]