@draftably/vue 0.1.0 → 0.2.1

package/README.md

@@ -8,5 +8,5 @@ cleanup when it unmounts. Any number of diagrams can share a page.
 pnpm add @draftably/vue
 ```
 
-See [Use with your framework](https://draftably.dev/docs/frameworks) for the component, server
+See [Frameworks](https://draftably.dev/docs/frameworks) for the component, server
 rendering with the `svg` prop, and a complete example.

package/dist/index.d.ts

@@ -20,6 +20,11 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
         type: StringConstructor;
         default: undefined;
     };
+    /** `'visible'` shows the item list under the drawing; `'hidden'` (default) shows it on focus. */
+    outline: {
+        type: PropType<"visible" | "hidden">;
+        default: undefined;
+    };
     /** Static SVG from `renderSvg(source, { target: 'inline', idPrefix })`, shown until the viewer draws. */
     svg: {
         type: StringConstructor;
@@ -49,6 +54,11 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
         type: StringConstructor;
         default: undefined;
     };
+    /** `'visible'` shows the item list under the drawing; `'hidden'` (default) shows it on focus. */
+    outline: {
+        type: PropType<"visible" | "hidden">;
+        default: undefined;
+    };
     /** Static SVG from `renderSvg(source, { target: 'inline', idPrefix })`, shown until the viewer draws. */
     svg: {
         type: StringConstructor;
@@ -63,6 +73,7 @@ export declare const DraftDiagram: import("vue").DefineComponent<import("vue").E
 }>, {
     label: string;
     state: string | null;
+    outline: "visible" | "hidden";
     svg: string;
     options: ViewerOptions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.js

@@ -10,6 +10,8 @@ export const DraftDiagram = defineComponent({
         state: { type: String, default: undefined },
         /** The accessible name. */
         label: { type: String, default: undefined },
+        /** `'visible'` shows the item list under the drawing; `'hidden'` (default) shows it on focus. */
+        outline: { type: String, default: undefined },
         /** Static SVG from `renderSvg(source, { target: 'inline', idPrefix })`, shown until the viewer draws. */
         svg: { type: String, default: undefined },
         options: { type: Object, default: undefined },
@@ -25,7 +27,13 @@ export const DraftDiagram = defineComponent({
                 el.value.options = props.options;
         });
         expose({ element: el });
-        return () => h('draft-diagram', { ref: el, source: props.source, state: props.state ?? undefined, label: props.label }, props.svg ? [h('div', { innerHTML: props.svg })] : []);
+        return () => h('draft-diagram', {
+            ref: el,
+            source: props.source,
+            state: props.state ?? undefined,
+            label: props.label,
+            outline: props.outline,
+        }, props.svg ? [h('div', { innerHTML: props.svg })] : []);
     },
 });
 export default DraftDiagram;

package/package.json

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