@draftably/vue 0.4.0 → 0.5.0

package/README.md

@@ -5,13 +5,14 @@ Draftably diagrams in Vue. `DraftDiagram` wraps the `<draft-diagram>` element fr
 cleanup when it unmounts. Any number of diagrams can share a page.
 
 ```sh
-pnpm add @draftably/vue
+pnpm add @draftably/vue @draftably/runtime
 ```
 
 Import `@draftably/runtime/host.css` once in your client entry: it reserves each element's height
-and hides slot content until the element loads. With Vite, add
-`optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] }` to `vite.config`.
+and hides slot content until the element loads, and it lets marked content take the pointer. With
+Vite 5–7, add `optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] }` to
+`vite.config`.
 
-The [Vue recipe](https://draftably.dev/docs/frameworks#vue) is a complete, type-checked app: both
-components, an event, your content on a node, a dark theme and server rendering with the `svg`
-prop. CI compiles it from the packed packages.
+[Vue and Nuxt](https://draftably.dev/docs/vue) has a complete, type-checked app: both components,
+an event, your content on a node, a dark page and server rendering with the `svg` prop. CI
+compiles it from the packed packages. The same page has the Nuxt server and strict-CSP code.

package/dist/editor.d.ts

@@ -30,7 +30,7 @@ export declare const DraftEditor: import("vue").DefineComponent<import("vue").Ex
     onAnchors?: ((detail: {
         anchors: readonly import("@draftably/runtime/viewer").Anchor[];
     }) => any) | undefined;
-    onUpdate?: ((detail: import("@draftably/runtime/viewer").UpdateResult) => any) | undefined;
+    onUpdate?: ((detail: import("@draftably/runtime/viewer").UpdateResult | import("@draftably/runtime/host").EditorUpdate) => any) | undefined;
     onRender?: ((detail: {
         revision: number;
         value: Extract<import("@draftably/runtime").RenderResult, {
@@ -58,14 +58,18 @@ export declare const DraftEditor: import("vue").DefineComponent<import("vue").Ex
         href: string;
         target: "_self" | "_blank";
         preventDefault(): void;
-    }, "preventDefault">) => any) | undefined;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
     onContextmenu?: ((detail: Omit<{
         id: string | null;
         kind?: import("@draftably/runtime/viewer").ItemKind;
         clientX: number;
         clientY: number;
         preventDefault(): void;
-    }, "preventDefault">) => any) | undefined;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
     onSelect?: ((detail: {
         ids: readonly string[];
         reason: "user" | "api";

package/dist/events.d.ts

@@ -1,9 +1,12 @@
 /** Emits from the runtime's one list of events: a new event adds no lines here. */
-import { type HostEventName, type HostEvents } from '@draftably/runtime/host';
-export type { HostEventName, HostEvents };
-/** `@camera`, `@select`, … : each receives the event's `detail`. */
+import { type HostEventDetail, type HostEventName, type HostEvents } from '@draftably/runtime/host';
+export type { HostEventDetail, HostEventName, HostEvents };
+/**
+ * `@camera`, `@select`, … : each receives the event's `detail`. `@link` and `@contextmenu` also
+ * get `preventDefault()`.
+ */
 export type HostEmits = {
-    [K in HostEventName]: (detail: HostEvents[K]) => true;
+    [K in HostEventName]: (detail: HostEventDetail<K>) => true;
 };
 export declare const hostEmits: HostEmits;
 /** Re-emit every host event from `node`. */

package/dist/events.js

@@ -1,8 +1,8 @@
 /** Emits from the runtime's one list of events: a new event adds no lines here. */
-import { HOST_EVENTS } from '@draftably/runtime/host';
+import { HOST_EVENTS, hostDetail, } from '@draftably/runtime/host';
 export const hostEmits = Object.fromEntries(HOST_EVENTS.map(name => [name, null]));
 /** Re-emit every host event from `node`. */
 export function listenHostEvents(node, emit) {
     for (const name of HOST_EVENTS)
-        node.addEventListener(`draft-${name}`, event => emit(name, event.detail));
+        node.addEventListener(`draft-${name}`, event => emit(name, hostDetail(event)));
 }

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import type { UpdateResult, ViewerOptions } from '@draftably/runtime/viewer';
 import { type PropType } from 'vue';
 export { renderSvg } from '@draftably/runtime';
 export { HOST_EVENTS } from '@draftably/runtime/host';
-export type { HostEmits, HostEventName, HostEvents } from './events.js';
+export type { HostEmits, HostEventDetail, HostEventName, HostEvents } from './events.js';
 export type { DraftDiagramElement, UpdateResult, ViewerOptions };
 export declare const DraftDiagram: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** `.draft` source. A change redraws the diagram and keeps the camera. */
@@ -75,7 +75,7 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
     onAnchors?: ((detail: {
         anchors: readonly import("@draftably/runtime/viewer").Anchor[];
     }) => any) | undefined;
-    onUpdate?: ((detail: UpdateResult) => any) | undefined;
+    onUpdate?: ((detail: UpdateResult | import("@draftably/runtime/host").EditorUpdate) => any) | undefined;
     onRender?: ((detail: {
         revision: number;
         value: Extract<import("@draftably/runtime").RenderResult, {
@@ -103,14 +103,18 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
         href: string;
         target: "_self" | "_blank";
         preventDefault(): void;
-    }, "preventDefault">) => any) | undefined;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
     onContextmenu?: ((detail: Omit<{
         id: string | null;
         kind?: import("@draftably/runtime/viewer").ItemKind;
         clientX: number;
         clientY: number;
         preventDefault(): void;
-    }, "preventDefault">) => any) | undefined;
+    }, "preventDefault"> & {
+        preventDefault(): void;
+    }) => any) | undefined;
     onSelect?: ((detail: {
         ids: readonly string[];
         reason: "user" | "api";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/vue",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue components for Draftably diagrams.",
   "license": "MIT",
   "type": "module",
@@ -23,8 +23,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@draftably/runtime": "0.4.0",
-    "@draftably/editor": "0.4.0"
+    "@draftably/runtime": "0.5.0",
+    "@draftably/editor": "0.5.0"
   },
   "peerDependencies": {
     "vue": "^3.4"