14325280d9
- 78 SDK pages per language (components, composables, advanced API, guides, architecture, getting-started) - vector-edit.md user guide page (5 languages) - Update stale ru/programmable/cli/inspecting.md - Fix YAML frontmatter quoting for colons in descriptions 474 files, 0 missing pages across de/es/fr/it/pl/ru. VitePress build verified — all 546 SDK pages render.
61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
---
|
|
title: Vue SDK
|
|
description: Construye editores con OpenPencil usando composables headless y primitivos de Vue.
|
|
---
|
|
|
|
# Vue SDK
|
|
|
|
`@open-pencil/vue` existe para que OpenPencil pueda ser más que una aplicación de diseño independiente.
|
|
|
|
El objetivo es convertir OpenPencil en un toolkit que puedas integrar en otros productos, herramientas internas y editores específicos de flujo de trabajo — no solo una interfaz predeterminada.
|
|
|
|
La aplicación OpenPencil es una composición de ese toolkit. El SDK es la forma en que construyes una diferente.
|
|
|
|
Te ofrece:
|
|
|
|
- contexto de editor inyectado
|
|
- renderizado de canvas respaldado por CanvasKit
|
|
- composables de selección, comandos, menú, panel de propiedades y variables
|
|
- primitivos estructurales headless como `PageListRoot`, `PropertyListRoot` y `ToolbarRoot`
|
|
- primitivos de i18n integrados para menús, paneles, diálogos y selectores de idioma personalizados
|
|
|
|
## Empieza aquí
|
|
|
|
<SdkCardGroup>
|
|
<SdkCard title="Primeros pasos" to="/programmable/sdk/getting-started" description="Instala el paquete, crea una instancia del editor y monta los primitivos principales." />
|
|
<SdkCard title="Arquitectura" to="/programmable/sdk/architecture" description="Comprende cómo encajan los composables, primitivos y el contexto del editor." />
|
|
<SdkCard title="Guías" to="/programmable/sdk/guides/custom-editor-shell" description="Construye shells personalizados, paneles de propiedades y paneles de navegación." />
|
|
<SdkCard title="Referencia de API" to="/programmable/sdk/api/" description="Explora componentes, composables y APIs públicas avanzadas." />
|
|
</SdkCardGroup>
|
|
|
|
## Por qué existe el SDK
|
|
|
|
Diferentes productos y equipos necesitan diferentes superficies de edición.
|
|
|
|
A veces necesitas un editor de diseño completo. A veces necesitas un canvas enfocado dentro de otra aplicación. A veces necesitas una herramienta de flujo de trabajo interna, un editor de plantillas, o una superficie de edición asistida por IA construida alrededor de un caso de uso específico.
|
|
|
|
El SDK es la capa que hace posibles esos escenarios.
|
|
|
|
## Principios de diseño
|
|
|
|
- **Headless primero**: lógica y estructura, no estilos de la app
|
|
- **Composable sobre wrapper**: usa composables cuando no hay coordinación estructural significativa
|
|
- **API pública intencional**: exportaciones estables desde `packages/vue/src/index.ts`
|
|
- **Integración con el framework**: integración de Vue sobre `@open-pencil/core`
|
|
|
|
## Cómo entender el paquete
|
|
|
|
El SDK tiene dos capas principales:
|
|
|
|
1. **Composables** para el estado del editor y las acciones
|
|
2. **Primitivos** para la estructura significativa de UI
|
|
|
|
Si solo necesitas el estado del editor y las acciones, empieza con composables.
|
|
Si estás construyendo bloques reutilizables de UI para el editor, empieza con primitivos.
|
|
|
|
## Secciones de la API
|
|
|
|
- [Componentes](/programmable/sdk/api/components/)
|
|
- [Composables](/programmable/sdk/api/composables/)
|
|
- [Avanzado](/programmable/sdk/api/advanced/)
|