* docs: polish localized documentation - Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports * docs(pl): complete editorial pass - Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page * docs(de): complete editorial pass - Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(es): complete editorial pass - Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(fr): complete editorial pass - Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs: correct localized terminology - Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms * docs(it): continue editorial pass - Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior * docs(it): complete editorial pass - Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose * docs(pl): refine property panel terminology * docs: refine remaining localized prose - Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology * docs(ru): rewrite Penpot comparison naturally - Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required * docs: rewrite localized feature overviews naturally - Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged * docs(de): refine property panel terminology * docs: refine Spanish and French SDK terminology * docs(ru): continue full prose audit - Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts * docs(ru): audit user and automation guides - Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology * docs(ru): audit CLI inspection and analysis * docs(ru): audit Vue SDK overview and guides * docs(ru): audit Vue SDK API prose - Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers * docs(ru): audit advanced and gradient API references * docs(ru): finish advanced API prose audit * docs(ru): audit JSX renderer guide * docs(ru): audit CLI export and scripting guides * docs(pl): audit Penpot comparison prose * docs(pl): audit selection and automation guides * docs(pl): audit homepage and variable guides * docs(pl): audit vector, layers, and Pen guides * docs(pl): audit Auto layout and shape guides * docs(pl): audit context menu and export guides * docs(pl): audit JSX and analysis guides * docs(pl): audit AI Chat guide * docs(pl): audit components and CLI inspection * docs(pl): audit scripting and SDK overview prose * docs(pl): audit SDK API indexes * docs(pl): audit SDK component references * docs(pl): audit SDK composable references * docs(ru): refine usePosition terminology * docs(pl): audit advanced SDK references * docs(pl): audit Figma compatibility matrix * docs(pl): finish residual SDK terminology audit * docs(pl): finish component terminology audit * docs(pl): finish SDK guide terminology audit * docs(de): begin full user guide prose audit * docs(de): audit navigation, Pen, and layers guides * docs(de): audit Auto Layout, shapes, menu, and export * docs(de): audit components, text, and vector guides * docs(de): audit variables and automation overview * docs(de): audit AI Chat and collaboration guides * docs(de): audit CLI inspection, analysis, and export * docs(de): audit scripting and JSX guides * docs(de): audit Vue SDK overview and guides * docs(de): audit SDK API indexes * docs(de): audit SDK component references * docs(de): audit SDK composable references * docs(de): audit advanced SDK references * docs(de): audit Penpot comparison prose * docs(de): audit Figma compatibility reference * docs(es): begin full user guide prose audit * docs(es): audit document organization guides * docs(es): audit editing workflow guides * docs(es): audit automation and collaboration prose * docs(es): audit CLI inspection and export guides * docs(es): audit CLI scripting guide * docs(es): audit JSX and feature overview prose * docs(es): audit Penpot comparison prose * docs(es): audit SDK overview and guides * docs(es): begin SDK component reference audit * docs(es): audit SDK navigation component references * docs(es): audit SDK color and layout components * docs(es): begin SDK composable reference audit * docs(es): audit SDK property composable references * docs(es): audit SDK editor composable references * docs(es): begin advanced SDK reference audit * docs(es): audit advanced SDK state references * docs(es): complete advanced SDK reference audit * docs(es): audit Figma compatibility reference * docs(es): complete residual terminology sweep * docs(fr): begin full prose second audit * docs(fr): audit AI and variables prose * docs(fr): audit core user guide prose * docs(fr): audit editing workflow guides * docs(fr): audit CLI and JSX prose * docs(fr): audit Penpot comparison prose * docs(fr): audit SDK overview and guides * docs(fr): begin SDK API reference audit * docs(fr): audit SDK navigation component references * docs(fr): audit SDK color and layout components * docs(fr): begin SDK composable reference audit * docs(fr): audit SDK property composable references * docs(fr): audit editor composables and advanced APIs * docs(fr): audit advanced SDK state references * docs(fr): complete advanced SDK reference audit * docs(fr): audit Figma compatibility reference * docs(fr): complete residual terminology sweep * docs(it): begin full prose second audit * docs(it): audit document workflow guides * docs(it): audit editing and automation prose * docs(it): audit CLI and JSX prose * docs(it): audit Penpot comparison and SDK guides * docs(it): begin SDK API reference audit * docs(it): audit SDK component and state references * docs(it): audit residual SDK references * docs(it): audit Figma compatibility reference * docs(it): complete residual terminology sweep * docs(i18n): verify residual locale terminology
58 lines
3.1 KiB
Markdown
58 lines
3.1 KiB
Markdown
---
|
||
title: Vue SDK
|
||
description: Créez des éditeurs basés sur OpenPencil avec des composants sans styles et des composables Vue.
|
||
---
|
||
|
||
# Vue SDK
|
||
|
||
`@open-pencil/vue` permet d'utiliser OpenPencil autrement que comme une application de design autonome.
|
||
|
||
Vous pouvez intégrer OpenPencil à un autre produit, à un outil interne ou à un éditeur spécialisé, sans reprendre l'interface par défaut de l'application.
|
||
|
||
L'application OpenPencil n'est qu'une des interfaces créées avec cette boîte à outils. Le SDK vous permet de construire la vôtre.
|
||
|
||
Le SDK fournit :
|
||
|
||
- le contexte de l'éditeur au moyen de la dependency injection de Vue ;
|
||
- le rendu de la zone de travail avec CanvasKit ;
|
||
- des composables pour la sélection, les commandes, les menus, les panneaux de propriétés et les variables ;
|
||
- des composants structurels sans styles tels que `PageListRoot`, `PropertyListRoot` et `ToolbarRoot` ;
|
||
- la localisation des menus, panneaux et boîtes de dialogue, ainsi que des composants de sélection de la langue.
|
||
|
||
## Par où commencer
|
||
|
||
<SdkCardGroup>
|
||
<SdkCard title="Premiers pas" to="/programmable/sdk/getting-started" description="Installez le package, créez une instance de l'éditeur et connectez les composants principaux." />
|
||
<SdkCard title="Architecture" to="/programmable/sdk/architecture" description="Découvrez comment les composables, les composants et le contexte de l'éditeur s'articulent." />
|
||
<SdkCard title="Guides" to="/programmable/sdk/guides/custom-editor-shell" description="Créez une interface d'éditeur, des panneaux de propriétés et des panneaux de navigation sur mesure." />
|
||
<SdkCard title="Référence de l'API" to="/programmable/sdk/api/" description="Consultez les composants, les composables et les API de bas niveau." />
|
||
</SdkCardGroup>
|
||
|
||
## À quoi sert le SDK
|
||
|
||
Chaque produit et chaque équipe a besoin d'une expérience d'édition différente.
|
||
|
||
Il peut s'agir d'un éditeur de design complet, d'une zone de travail intégrée à une autre application, d'un outil interne, d'un éditeur de modèles ou d'une interface spécialisée assistée par l'IA.
|
||
|
||
## Principes de conception
|
||
|
||
- **Sans styles par conception :** le SDK fournit la logique et la structure sans imposer l’apparence de l’application.
|
||
- **Un composable plutôt qu'un wrapper inutile :** si aucune structure d'interface ne doit être coordonnée, un composable suffit.
|
||
- **Une API publique maîtrisée :** les fonctionnalités stables sont exportées depuis `packages/vue/src/index.ts`.
|
||
- **Une intégration étroite avec Vue :** le SDK relie Vue aux fonctionnalités de `@open-pencil/core`.
|
||
|
||
## Deux niveaux d'API
|
||
|
||
Le SDK se compose de deux niveaux principaux :
|
||
|
||
1. Les **composables** fournissent l'état de l'éditeur et les opérations associées.
|
||
2. Les **composants** définissent une structure d'interface pertinente.
|
||
|
||
Si vous avez uniquement besoin de l'état et des opérations de l'éditeur, commencez par les composables. Si vous créez des éléments d'interface réutilisables, commencez par les composants.
|
||
|
||
## Sections de l'API
|
||
|
||
- [Composants](/programmable/sdk/api/components/)
|
||
- [Composables](/programmable/sdk/api/composables/)
|
||
- [API de bas niveau](/programmable/sdk/api/advanced/)
|