Migration des composants UI vers @framework/ui

Les composants qui dépendent d'un serveur Frappe ou de Frappe Cloud ne sont plus dans frappe-ui/frappe. Ils sont dans le paquet @framework/ui (dossier ui/ de Dodock), exportés par sa racine.

Composants déplacés

Remplacer les imports

- import { useTelemetry, TrialBanner } from "frappe-ui/frappe";
+ import { useTelemetry, TrialBanner } from "@framework/ui";

telemetryPlugin était l'export par défaut d'un fichier de frappe-ui. C'est maintenant un export nommé.

@vueuse/core est une dépendance paire (peer dependency) de @framework/ui : le composable d'onboarding utilise useStorage. Votre application fournit @vueuse/core, pour n'en avoir qu'une copie.

Les écrans internes de DataImportWizard (ses étapes), OnboardingSteps et HelpCenter ne sont pas exportés. Une application ne les importe pas directement.

Télémétrie

import { telemetryPlugin } from "@framework/ui";

app.use(telemetryPlugin, {
    app_name: "mon_application",
    router, // facultatif : une page vue par navigation
});

Le plugin lit sa configuration sur le serveur Frappe. Options principales : app_name (obligatoire), enabled, router, getContext, anonymousMode.

Onboarding

useOnboarding(appName) renvoie l'état de l'onboarding de l'utilisateur pour une application. Il renvoie undefined pour un visiteur non connecté.

import { useOnboarding } from "@framework/ui";

const onboarding = useOnboarding("mon_application");
onboarding?.setUp([
    { name: "create_first_customer", title: "Créer un premier client", completed: false },
    { name: "send_first_quote", title: "Envoyer un premier devis", completed: false, dependsOn: "create_first_customer" },
]);

// Plus tard, quand l'utilisateur a fait l'action :
onboarding?.updateOnboardingStep("create_first_customer");

Autres méthodes : skip(step), skipAll(), reset(step), resetAll(), syncStatus(). Les valeurs calculées stepsCompleted, totalSteps et completedPercentage alimentent GettingStartedBanner.

Import de données

Le composant s'appelle maintenant DataImportWizard. Il prend l'état créé par useDataImport :

<template>
    <DataImportWizard
        :data-import="dataImport"
        :on-open-list="(doctype) => router.push(`/${doctype}`)"
        @open-record="(doctype, name) => router.push(`/${doctype}/${name}`)"
    />
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { DataImportWizard, useDataImport } from "@framework/ui";

const router = useRouter();
const importName = ref(null); // nom d'un document Data Import existant, ou null pour un nouvel import
const dataImport = useDataImport(importName, { doctype: "Customer" });
</script>

useDataImport utilise la connexion temps réel de l'application pour suivre la progression. Vous n'avez pas à passer de socket.