[{"data":1,"prerenderedAt":521},["ShallowReactive",2],{"\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-framework-ui":3,"section:\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-framework-ui":520},{"id":4,"title":5,"body":6,"description":506,"extension":507,"meta":508,"navigation":270,"path":516,"seo":517,"stem":518,"__hash__":519},"docs\u002F1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fcomposants-framework-ui.md","Composants @framework\u002Fui",{"type":7,"value":8,"toc":495},"minimark",[9,18,32,37,128,132,135,158,161,165,169,182,396,423,436,439,449,456,470,474,491],[10,11,13,14],"h1",{"id":12},"composants-frameworkui","Composants ",[15,16,17],"code",{},"@framework\u002Fui",[19,20,21,22,24,25,28,29,31],"p",{},"Le paquet ",[15,23,17],{}," regroupe des composants Vue qui dépendent de la connaissance de Dokos (doctypes, endpoints, onboarding, facturation). Ces composants ont été migrés depuis ",[15,26,27],{},"frappe-ui"," afin de séparer la bibliothèque de composants « purs » (",[15,30,27],{},") des composants spécifiques au framework.",[33,34,36],"h2",{"id":35},"composants-concernés","Composants concernés",[38,39,40,53],"table",{},[41,42,43],"thead",{},[44,45,46,50],"tr",{},[47,48,49],"th",{},"Groupe",[47,51,52],{},"Composants et fonctions",[54,55,56,74,102,115],"tbody",{},[44,57,58,62],{},[59,60,61],"td",{},"Télémétrie",[59,63,64,67,68,67,71],{},[15,65,66],{},"telemetryPlugin",", ",[15,69,70],{},"useTelemetry",[15,72,73],{},"TelemetryPluginOptions",[44,75,76,79],{},[59,77,78],{},"Onboarding et aide",[59,80,81,67,84,67,87,67,90,67,93,67,96,67,99],{},[15,82,83],{},"useOnboarding",[15,85,86],{},"OnboardingStep",[15,88,89],{},"GettingStartedBanner",[15,91,92],{},"IntermediateStepModal",[15,94,95],{},"HelpModal",[15,97,98],{},"showHelpModal",[15,100,101],{},"minimize",[44,103,104,107],{},[59,105,106],{},"Facturation",[59,108,109,67,112],{},[15,110,111],{},"TrialBanner",[15,113,114],{},"SignupBanner",[44,116,117,120],{},[59,118,119],{},"Import de données",[59,121,122,67,125],{},[15,123,124],{},"DataImportWizard",[15,126,127],{},"useDataImport",[33,129,131],{"id":130},"changement-dimport","Changement d'import",[19,133,134],{},"Tous ces composants sont exportés depuis la racine du paquet. Il suffit de remplacer le chemin d'import :",[136,137,142],"pre",{"className":138,"code":139,"language":140,"meta":141,"style":141},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","-import { useTelemetry, TrialBanner } from 'frappe-ui\u002Ffrappe'\n+import { useTelemetry, TrialBanner } from '@framework\u002Fui'\n","diff","",[15,143,144,152],{"__ignoreMap":141},[145,146,149],"span",{"class":147,"line":148},"line",1,[145,150,151],{},"-import { useTelemetry, TrialBanner } from 'frappe-ui\u002Ffrappe'\n",[145,153,155],{"class":147,"line":154},2,[145,156,157],{},"+import { useTelemetry, TrialBanner } from '@framework\u002Fui'\n",[19,159,160],{},"Aucun sous-chemin supplémentaire n'a été introduit.",[33,162,164],{"id":163},"modifications-techniques","Modifications techniques",[166,167,119],"h3",{"id":168},"import-de-données",[19,170,171,172,175,176,178,179,181],{},"L'ancien composant ",[15,173,174],{},"DataImport"," est remplacé par ",[15,177,124],{},". Il reçoit l'état créé par le composable ",[15,180,127],{},".",[136,183,187],{"className":184,"code":185,"language":186,"meta":141,"style":141},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { ref } from \"vue\";\nimport { DataImportWizard, useDataImport } from \"@framework\u002Fui\";\n\nconst importName = ref(null);\nconst dataImport = useDataImport(importName, { doctype: \"Customer\" });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDataImportWizard :data-import=\"dataImport\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[15,188,189,206,237,265,272,298,336,346,351,361,387],{"__ignoreMap":141},[145,190,191,195,199,203],{"class":147,"line":148},[145,192,194],{"class":193},"sMK4o","\u003C",[145,196,198],{"class":197},"swJcz","script",[145,200,202],{"class":201},"spNyl"," setup",[145,204,205],{"class":193},">\n",[145,207,208,212,215,219,222,225,228,231,234],{"class":147,"line":154},[145,209,211],{"class":210},"s7zQu","import",[145,213,214],{"class":193}," {",[145,216,218],{"class":217},"sTEyZ"," ref",[145,220,221],{"class":193}," }",[145,223,224],{"class":210}," from",[145,226,227],{"class":193}," \"",[145,229,186],{"class":230},"sfazB",[145,232,233],{"class":193},"\"",[145,235,236],{"class":193},";\n",[145,238,240,242,244,247,250,253,255,257,259,261,263],{"class":147,"line":239},3,[145,241,211],{"class":210},[145,243,214],{"class":193},[145,245,246],{"class":217}," DataImportWizard",[145,248,249],{"class":193},",",[145,251,252],{"class":217}," useDataImport",[145,254,221],{"class":193},[145,256,224],{"class":210},[145,258,227],{"class":193},[145,260,17],{"class":230},[145,262,233],{"class":193},[145,264,236],{"class":193},[145,266,268],{"class":147,"line":267},4,[145,269,271],{"emptyLinePlaceholder":270},true,"\n",[145,273,275,278,281,284,287,290,293,296],{"class":147,"line":274},5,[145,276,277],{"class":201},"const",[145,279,280],{"class":217}," importName ",[145,282,283],{"class":193},"=",[145,285,218],{"class":286},"s2Zo4",[145,288,289],{"class":217},"(",[145,291,292],{"class":193},"null",[145,294,295],{"class":217},")",[145,297,236],{"class":193},[145,299,301,303,306,308,310,313,315,317,320,323,325,328,330,332,334],{"class":147,"line":300},6,[145,302,277],{"class":201},[145,304,305],{"class":217}," dataImport ",[145,307,283],{"class":193},[145,309,252],{"class":286},[145,311,312],{"class":217},"(importName",[145,314,249],{"class":193},[145,316,214],{"class":193},[145,318,319],{"class":197}," doctype",[145,321,322],{"class":193},":",[145,324,227],{"class":193},[145,326,327],{"class":230},"Customer",[145,329,233],{"class":193},[145,331,221],{"class":193},[145,333,295],{"class":217},[145,335,236],{"class":193},[145,337,339,342,344],{"class":147,"line":338},7,[145,340,341],{"class":193},"\u003C\u002F",[145,343,198],{"class":197},[145,345,205],{"class":193},[145,347,349],{"class":147,"line":348},8,[145,350,271],{"emptyLinePlaceholder":270},[145,352,354,356,359],{"class":147,"line":353},9,[145,355,194],{"class":193},[145,357,358],{"class":197},"template",[145,360,205],{"class":193},[145,362,364,367,369,372,375,377,379,382,384],{"class":147,"line":363},10,[145,365,366],{"class":193},"  \u003C",[145,368,124],{"class":197},[145,370,371],{"class":193}," :",[145,373,374],{"class":201},"data-import",[145,376,283],{"class":193},[145,378,233],{"class":193},[145,380,381],{"class":217},"dataImport",[145,383,233],{"class":193},[145,385,386],{"class":193}," \u002F>\n",[145,388,390,392,394],{"class":147,"line":389},11,[145,391,341],{"class":193},[145,393,358],{"class":197},[145,395,205],{"class":193},[19,397,398,399,67,402,405,406,409,410,67,413,67,416,405,419,422],{},"Les anciennes propriétés ",[15,400,401],{},"label",[15,403,404],{},"description"," et ",[15,407,408],{},"socket"," n'existent plus. L'assistant utilise lui-même la connexion temps réel de l'application. Les anciens types ",[15,411,412],{},"DataImportRecord",[15,414,415],{},"DataImportProps",[15,417,418],{},"DataImportSocket",[15,420,421],{},"DataImports"," ont été retirés.",[19,424,425,426,429,430,433,434,181],{},"Le mappage des colonnes utilise le composant ",[15,427,428],{},"Combobox"," de frappe-ui. Les étapes de l'assistant utilisent le composant ",[15,431,432],{},"Link"," de ",[15,435,17],{},[166,437,78],{"id":438},"onboarding-et-aide",[19,440,441,442,444,445,448],{},"Le composable et l'état d'aide sont écrits en TypeScript. ",[15,443,83],{}," est typé depuis le source plutôt que via un fichier ",[15,446,447],{},".d.ts"," écrit à la main.",[33,450,452,453],{"id":451},"dépendance-vueusecore","Dépendance ",[15,454,455],{},"@vueuse\u002Fcore",[19,457,458,460,461,465,466,469],{},[15,459,455],{}," est une dépendance paire (",[462,463,464],"em",{},"peer dependency","), car le composable d'onboarding utilise ",[15,467,468],{},"useStorage",". Cela évite qu'une application se retrouve avec deux copies des refs.",[33,471,473],{"id":472},"composants-internes-non-exportés","Composants internes non exportés",[19,475,476,477,479,480,405,483,486,487,490],{},"Les écrans internes de ",[15,478,124],{}," (étapes), ",[15,481,482],{},"OnboardingSteps",[15,484,485],{},"HelpCenter"," ont été migrés en tant que fichiers internes. Ils ne sont jamais importés directement par une application et ne figurent pas dans le ",[462,488,489],{},"barrel"," racine.",[492,493,494],"style",{},"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);}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":141,"searchDepth":148,"depth":154,"links":496},[497,498,499,503,505],{"id":35,"depth":154,"text":36},{"id":130,"depth":154,"text":131},{"id":163,"depth":154,"text":164,"children":500},[501,502],{"id":168,"depth":239,"text":119},{"id":438,"depth":239,"text":78},{"id":451,"depth":154,"text":504},"Dépendance @vueuse\u002Fcore",{"id":472,"depth":154,"text":473},"Composants techniques migrés depuis frappe-ui vers le paquet @framework\u002Fui (télémétrie, onboarding, import de données, bannières d'essai et d'inscription)","md",{"reviewed":270,"last_verified":509,"sources":510},"2026-11-04",[511,512,513,514,515],"dodock@v5:ui\u002Fsrc\u002Findex.ts","dodock@v5:ui\u002Fpackage.json","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FDataImport\u002Findex.ts","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FDataImport\u002FREADME.md","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FDataImport\u002Fsteps\u002FPreviewTable.vue","\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fcomposants-framework-ui",{"title":5,"description":506},"1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fcomposants-framework-ui","Kd7a4KBtE0i_rItdn94tjjhr8AYQ_0EsaQ97tmAbHcc",{},1794226463732]