[{"data":1,"prerenderedAt":579},["ShallowReactive",2],{"msfe-doc:\u002Fen\u002Fcustomization\u002Fsearch":3},{"id":4,"title":5,"body":6,"description":567,"extension":568,"keywords":569,"locale":571,"meta":572,"navigation":573,"order":66,"path":574,"section":575,"seo":576,"stem":577,"__hash__":578},"docs\u002Fcustomization\u002Fsearch.en.md","Custom search panels",{"type":7,"value":8,"toc":561},"minimark",[9,14,35,119,122,126,133,459,466,470,518,541,545,548,557],[10,11,13],"h2",{"id":12},"integration-point","Integration point",[15,16,17,18,22,23,26,27,30,31,34],"p",{},"The creation option ",[19,20,21],"code",{},"searchPanel"," accepts ",[19,24,25],{},"ComponentViewRenderer\u003CSearchPanelProps>",". Vue uses ",[19,28,29],{},"VueComponentViewRenderer(SearchPanel)"," and retains ",[19,32,33],{},"VueNodeViewHost"," inside the existing Provider tree.",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-ts shiki shiki-themes github-light github-light github-dark","import { VueComponentViewRenderer } from '@quirekit\u002Fmsfe-vue'\nimport SearchPanel from '.\u002Fsearch-panel.vue'\nconst options = {\n  searchPanel: VueComponentViewRenderer(SearchPanel),\n  \u002F\u002F Provide markdown and extensions as in the Vue integration guide.\n}\n","ts","",[19,43,44,64,77,93,106,113],{"__ignoreMap":41},[45,46,49,53,57,60],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sDD9d","import",[45,54,56],{"class":55},"sVPnS"," { VueComponentViewRenderer } ",[45,58,59],{"class":51},"from",[45,61,63],{"class":62},"s-HEn"," '@quirekit\u002Fmsfe-vue'\n",[45,65,67,69,72,74],{"class":47,"line":66},2,[45,68,52],{"class":51},[45,70,71],{"class":55}," SearchPanel ",[45,73,59],{"class":51},[45,75,76],{"class":62}," '.\u002Fsearch-panel.vue'\n",[45,78,80,83,87,90],{"class":47,"line":79},3,[45,81,82],{"class":51},"const",[45,84,86],{"class":85},"sUNQB"," options",[45,88,89],{"class":51}," =",[45,91,92],{"class":55}," {\n",[45,94,96,99,103],{"class":47,"line":95},4,[45,97,98],{"class":55},"  searchPanel: ",[45,100,102],{"class":101},"sgQzM","VueComponentViewRenderer",[45,104,105],{"class":55},"(SearchPanel),\n",[45,107,109],{"class":47,"line":108},5,[45,110,112],{"class":111},"sqmzS","  \u002F\u002F Provide markdown and extensions as in the Vue integration guide.\n",[45,114,116],{"class":47,"line":115},6,[45,117,118],{"class":55},"}\n",[15,120,121],{},"Native search shortcuts continue to open this panel. Do not build a competing whole-document index and mutate content DOM to highlight results.",[10,123,125],{"id":124},"minimal-panel","Minimal panel",[15,127,128,129,132],{},"Place this public QuireKit component example in ",[19,130,131],{},"search-panel.vue"," and connect it above.",[36,134,138],{"className":135,"code":136,"language":137,"meta":41,"style":41},"language-vue shiki shiki-themes github-light github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport type { SearchPanelProps } from '@quirekit\u002Fmsfe-core'\nimport { QuireInput, QuireButton } from '@quirekit\u002Fui\u002Fvue'\ndefineProps\u003C{ view: SearchPanelProps }>()\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003Cdiv class=\"flex flex-wrap items-center gap-2 p-qk-surface\">\n    \u003CQuireInput :model-value=\"view.query.search\" aria-label=\"Find\"\n      @update:model-value=\"value => view.setQuery({ search: value ?? '' })\" \u002F>\n    \u003CQuireButton :disabled=\"!view.valid || view.composing\"\n      @click=\"view.run('next')\">Next\u003C\u002FQuireButton>\n    \u003CQuireButton variant=\"ghost\" @click=\"view.run('close')\">Close\u003C\u002FQuireButton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[19,139,140,164,179,191,212,221,230,249,282,328,360,396,440,450],{"__ignoreMap":41},[45,141,142,145,149,152,155,158,161],{"class":47,"line":48},[45,143,144],{"class":55},"\u003C",[45,146,148],{"class":147},"su0ou","script",[45,150,151],{"class":101}," setup",[45,153,154],{"class":101}," lang",[45,156,157],{"class":55},"=",[45,159,160],{"class":62},"\"ts\"",[45,162,163],{"class":55},">\n",[45,165,166,168,171,174,176],{"class":47,"line":66},[45,167,52],{"class":51},[45,169,170],{"class":51}," type",[45,172,173],{"class":55}," { SearchPanelProps } ",[45,175,59],{"class":51},[45,177,178],{"class":62}," '@quirekit\u002Fmsfe-core'\n",[45,180,181,183,186,188],{"class":47,"line":79},[45,182,52],{"class":51},[45,184,185],{"class":55}," { QuireInput, QuireButton } ",[45,187,59],{"class":51},[45,189,190],{"class":62}," '@quirekit\u002Fui\u002Fvue'\n",[45,192,193,196,199,203,206,209],{"class":47,"line":95},[45,194,195],{"class":101},"defineProps",[45,197,198],{"class":55},"\u003C{ ",[45,200,202],{"class":201},"sde8i","view",[45,204,205],{"class":51},":",[45,207,208],{"class":101}," SearchPanelProps",[45,210,211],{"class":55}," }>()\n",[45,213,214,217,219],{"class":47,"line":108},[45,215,216],{"class":55},"\u003C\u002F",[45,218,148],{"class":147},[45,220,163],{"class":55},[45,222,223,225,228],{"class":47,"line":115},[45,224,144],{"class":55},[45,226,227],{"class":147},"template",[45,229,163],{"class":55},[45,231,233,236,239,242,244,247],{"class":47,"line":232},7,[45,234,235],{"class":55},"  \u003C",[45,237,238],{"class":147},"div",[45,240,241],{"class":101}," class",[45,243,157],{"class":55},[45,245,246],{"class":62},"\"flex flex-wrap items-center gap-2 p-qk-surface\"",[45,248,163],{"class":55},[45,250,252,255,258,261,264,266,269,272,274,277,279],{"class":47,"line":251},8,[45,253,254],{"class":55},"    \u003C",[45,256,257],{"class":147},"QuireInput",[45,259,260],{"class":55}," :",[45,262,263],{"class":101},"model-value",[45,265,157],{"class":55},[45,267,268],{"class":62},"\"",[45,270,271],{"class":55},"view.query.search",[45,273,268],{"class":62},[45,275,276],{"class":101}," aria-label",[45,278,157],{"class":55},[45,280,281],{"class":62},"\"Find\"\n",[45,283,285,288,291,293,295,297,299,302,305,308,311,314,317,320,323,325],{"class":47,"line":284},9,[45,286,287],{"class":55},"      @",[45,289,290],{"class":101},"update",[45,292,205],{"class":55},[45,294,263],{"class":101},[45,296,157],{"class":55},[45,298,268],{"class":62},[45,300,301],{"class":201},"value",[45,303,304],{"class":51}," =>",[45,306,307],{"class":55}," view.",[45,309,310],{"class":101},"setQuery",[45,312,313],{"class":55},"({ search: value ",[45,315,316],{"class":51},"??",[45,318,319],{"class":62}," ''",[45,321,322],{"class":55}," })",[45,324,268],{"class":62},[45,326,327],{"class":55}," \u002F>\n",[45,329,331,333,336,338,341,343,345,348,351,354,357],{"class":47,"line":330},10,[45,332,254],{"class":55},[45,334,335],{"class":147},"QuireButton",[45,337,260],{"class":55},[45,339,340],{"class":101},"disabled",[45,342,157],{"class":55},[45,344,268],{"class":62},[45,346,347],{"class":51},"!",[45,349,350],{"class":55},"view.valid ",[45,352,353],{"class":51},"||",[45,355,356],{"class":55}," view.composing",[45,358,359],{"class":62},"\"\n",[45,361,363,365,368,370,372,375,378,381,384,387,389,392,394],{"class":47,"line":362},11,[45,364,287],{"class":55},[45,366,367],{"class":101},"click",[45,369,157],{"class":55},[45,371,268],{"class":62},[45,373,374],{"class":55},"view.",[45,376,377],{"class":101},"run",[45,379,380],{"class":55},"(",[45,382,383],{"class":62},"'next'",[45,385,386],{"class":55},")",[45,388,268],{"class":62},[45,390,391],{"class":55},">Next\u003C\u002F",[45,393,335],{"class":147},[45,395,163],{"class":55},[45,397,399,401,403,406,408,411,414,416,418,420,422,424,426,429,431,433,436,438],{"class":47,"line":398},12,[45,400,254],{"class":55},[45,402,335],{"class":147},[45,404,405],{"class":101}," variant",[45,407,157],{"class":55},[45,409,410],{"class":62},"\"ghost\"",[45,412,413],{"class":55}," @",[45,415,367],{"class":101},[45,417,157],{"class":55},[45,419,268],{"class":62},[45,421,374],{"class":55},[45,423,377],{"class":101},[45,425,380],{"class":55},[45,427,428],{"class":62},"'close'",[45,430,386],{"class":55},[45,432,268],{"class":62},[45,434,435],{"class":55},">Close\u003C\u002F",[45,437,335],{"class":147},[45,439,163],{"class":55},[45,441,443,446,448],{"class":47,"line":442},13,[45,444,445],{"class":55},"  \u003C\u002F",[45,447,238],{"class":147},[45,449,163],{"class":55},[45,451,453,455,457],{"class":47,"line":452},14,[45,454,216],{"class":55},[45,456,227],{"class":147},[45,458,163],{"class":55},[15,460,461,462,465],{},"Localize labels for the application. ",[19,463,464],{},"view.phrase(key)"," can supply host CodeMirror phrases; do not hardcode one language across locales.",[10,467,469],{"id":468},"fields-and-actions","Fields and actions",[15,471,472,475,476,479,480,479,483,479,486,489,490,493,494,497,498,501,502,505,506,509,510,513,514,517],{},[19,473,474],{},"query"," contains ",[19,477,478],{},"search",", ",[19,481,482],{},"replace",[19,484,485],{},"caseSensitive",[19,487,488],{},"regexp"," and ",[19,491,492],{},"wholeWord",". Update fields with ",[19,495,496],{},"setQuery(partial)"," rather than mutating props. ",[19,499,500],{},"valid"," includes nonempty-query and regex validity. ",[19,503,504],{},"matches"," reports the count: ",[19,507,508],{},"total"," matches (at most 1,000 are counted; ",[19,511,512],{},"limited"," is true beyond that) and ",[19,515,516],{},"current",", the one-based match the main selection covers exactly, or 0.",[15,519,520,22,523,479,526,479,529,479,532,479,534,489,537,540],{},[19,521,522],{},"run()",[19,524,525],{},"next",[19,527,528],{},"previous",[19,530,531],{},"all",[19,533,482],{},[19,535,536],{},"replaceAll",[19,538,539],{},"close",". Disable replacement during readonly or composition. Finding and copying remain available. Actions return booleans; obsolete handlers from an unmounted panel must not continue writing.",[10,542,544],{"id":543},"complete-the-panel","Complete the panel",[15,546,547],{},"Add replacement input, case\u002Fword\u002Fregex toggles and navigation through the same contract. Avoid submitting while input composition is active. Let the search lifecycle restore focus after closing; global Enter handlers should not steal input events.",[15,549,550,551,556],{},"Verify invalid regex, no results, composition, replacement undo, readonly search, initial selection, close focus, narrow layouts and both themes. See ",[552,553,555],"a",{"href":554},"\u002Fen\u002Fapi\u002Frendering","Rendering API",".",[558,559,560],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sqmzS, html code.shiki .sqmzS{--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D}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 .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 .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 .su0ou, html code.shiki .su0ou{--shiki-default:#22863A;--shiki-light:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}",{"title":41,"searchDepth":66,"depth":66,"links":562},[563,564,565,566],{"id":12,"depth":66,"text":13},{"id":124,"depth":66,"text":125},{"id":468,"depth":66,"text":469},{"id":543,"depth":66,"text":544},"Replace search UI while retaining canonical queries, selection and replacement.","md",[570,21,536,478],"SearchPanelProps","en",{},true,"\u002Fen\u002Fcustomization\u002Fsearch","UI and themes",{"title":5,"description":567},"customization\u002Fsearch.en","s4ToVfO--vyvm7TfpJF0oeLBilR6xEW9xYaFoH1zf9c",1793046312746]