sequential-workflow-designer-svelte 0.16.6 → 0.16.8

package/README.md

@@ -79,17 +79,17 @@ The global editor:
 
 ```svelte
 <script lang="ts">
-	import type { GlobalEditorContext, Definition } from 'sequential-workflow-designer';
+  import type { RootEditorContext, Definition } from 'sequential-workflow-designer';
 
-	export let context: GlobalEditorContext;
-	export let definition: Definition;
-	let velocity = definition.properties.velocity;
+  export let context: RootEditorContext;
+  export let definition: Definition;
+  let velocity = definition.properties.velocity;
 
-	function onVelocityChanged(event: Event) {
-		velocity = parseInt((event.target as HTMLInputElement).value);
-		definition.properties.velocity = velocity;
-		context.notifyPropertiesChanged();
-	}
+  function onVelocityChanged(event: Event) {
+    velocity = parseInt((event.target as HTMLInputElement).value);
+    definition.properties.velocity = velocity;
+    context.notifyPropertiesChanged();
+  }
 </script>
 
 <input type="number" value={String(velocity)} on:input={onVelocityChanged} />
@@ -99,19 +99,19 @@ The step editor:
 
 ```svelte
 <script lang="ts">
-	import type { StepEditorContext, Definition, Step } from 'sequential-workflow-designer';
+  import type { StepEditorContext, Definition, Step } from 'sequential-workflow-designer';
 
-	export let context: StepEditorContext;
-	export let definition: Definition;
-	export let step: Step;
+  export let context: StepEditorContext;
+  export let definition: Definition;
+  export let step: Step;
 
-	let name = step.name;
+  let name = step.name;
 
-	function onNameChanged(event: Event) {
-		name = (event.target as HTMLInputElement).value;
-		step.name = name;
-		context.notifyNameChanged();
-	}
+  function onNameChanged(event: Event) {
+    name = (event.target as HTMLInputElement).value;
+    step.name = name;
+    context.notifyNameChanged();
+  }
 </script>
 
 <input value={name} on:input={onNameChanged} />

package/dist/SequentialWorkflowDesigner.svelte

@@ -17,8 +17,11 @@ export let validator = void 0;
 export let uidGenerator = void 0;
 export let definitionWalker = void 0;
 export let extensions = void 0;
+export let customActionHandler = void 0;
 export let stepEditor = null;
+export let nativeStepEditor = null;
 export let rootEditor = null;
+export let nativeRootEditor = null;
 export let isEditorCollapsed = false;
 export let isReadonly = false;
 export let selectedStepId = null;
@@ -26,29 +29,35 @@ let isFirstChange = true;
 let designer = null;
 let placeholder;
 function init() {
-  const editors = stepEditor && rootEditor ? {
+  const editors = (stepEditor || nativeStepEditor) && (rootEditor || nativeRootEditor) ? {
     isCollapsed: isEditorCollapsed,
     stepEditorProvider: (step, context, def) => {
-      if (!stepEditor) {
-        throw new Error("No step editor provided");
+      if (stepEditor) {
+        const root = document.createElement("div");
+        new stepEditor({
+          target: root,
+          props: { step, context, definition: def }
+        });
+        return root;
       }
-      const root = document.createElement("div");
-      new stepEditor({
-        target: root,
-        props: { step, context, definition: def }
-      });
-      return root;
+      if (nativeStepEditor) {
+        return nativeStepEditor(step, context, def);
+      }
+      throw new Error("No step editor provided");
     },
     globalEditorProvider: (def, context) => {
-      if (!rootEditor) {
-        throw new Error("No root editor provided");
+      if (rootEditor) {
+        const root = document.createElement("div");
+        new rootEditor({
+          target: root,
+          props: { definition: def, context }
+        });
+        return root;
+      }
+      if (nativeRootEditor) {
+        return nativeRootEditor(def, context);
       }
-      const root = document.createElement("div");
-      new rootEditor({
-        target: root,
-        props: { definition: def, context }
-      });
-      return root;
+      throw new Error("No root editor provided");
     }
   } : false;
   const _toolbox = toolbox ? {
@@ -65,20 +74,27 @@ function init() {
     undoStackSize,
     undoStack,
     validator,
-    uidGenerator,
     definitionWalker,
     extensions,
-    isReadonly
+    isReadonly,
+    uidGenerator,
+    customActionHandler
   });
-  d.onReady.subscribe(() => dispatch("definitionChanged", {
-    definition: d.getDefinition(),
-    isValid: d.isValid()
-  }));
-  d.onDefinitionChanged.subscribe((definition2) => dispatch("definitionChanged", {
-    definition: definition2,
-    isValid: d.isValid()
-  }));
+  d.onReady.subscribe(
+    () => dispatch("definitionChanged", {
+      definition: d.getDefinition(),
+      isValid: d.isValid()
+    })
+  );
+  d.onDefinitionChanged.subscribe(
+    (definition2) => dispatch("definitionChanged", {
+      definition: definition2,
+      isValid: d.isValid()
+    })
+  );
   d.onSelectedStepIdChanged.subscribe((stepId) => dispatch("selectedStepIdChanged", { stepId }));
+  d.onIsToolboxCollapsedChanged.subscribe((isCollapsed) => dispatch("isToolboxCollapsedChanged", { isCollapsed }));
+  d.onIsEditorCollapsedChanged.subscribe((isCollapsed) => dispatch("isEditorCollapsedChanged", { isCollapsed }));
   if (selectedStepId) {
     d.selectStepById(selectedStepId);
   }
@@ -122,4 +138,4 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={placeholder} class="sqd-designer-svelte"></div>
+<div bind:this={placeholder} class="sqd-designer-svelte" />

package/dist/SequentialWorkflowDesigner.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { DefinitionWalker, type Definition, type StepsConfiguration, type ToolboxConfiguration, type UndoStack, type ValidatorConfiguration, type UidGenerator, type DesignerExtension } from 'sequential-workflow-designer';
+import { DefinitionWalker, type Definition, type StepsConfiguration, type ToolboxConfiguration, type UndoStack, type ValidatorConfiguration, type UidGenerator, type DesignerExtension, type CustomActionHandler, type StepEditorProvider, type RootEditorProvider } from 'sequential-workflow-designer';
 declare const __propDef: {
     props: {
         definition: Definition;
@@ -15,15 +15,37 @@ declare const __propDef: {
         uidGenerator?: UidGenerator | undefined;
         definitionWalker?: DefinitionWalker | undefined;
         extensions?: DesignerExtension[] | undefined;
-        stepEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
-        rootEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        customActionHandler?: CustomActionHandler | undefined;
+        /**
+             * @description Svelte component that will be used to render the step editor. If this property is set, the `nativeStepEditor` property will be ignored.
+             */ stepEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        /**
+             * @description Function that will be used to render the step editor.
+             */ nativeStepEditor?: StepEditorProvider | null | undefined;
+        /**
+             * @description Svelte component that will be used to render the root editor. If this property is set, the `nativeRootEditor` property will be ignored.
+             */ rootEditor?: ConstructorOfATypedSvelteComponent | null | undefined;
+        /**
+             * @description Function that will be used to render the root editor.
+             */ nativeRootEditor?: RootEditorProvider | null | undefined;
         isEditorCollapsed?: boolean | undefined;
         isReadonly?: boolean | undefined;
         selectedStepId?: string | null | undefined;
     };
     events: {
-        definitionChanged: CustomEvent<any>;
-        selectedStepIdChanged: CustomEvent<any>;
+        definitionChanged: CustomEvent<{
+            definition: Definition;
+            isValid: boolean;
+        }>;
+        selectedStepIdChanged: CustomEvent<{
+            stepId: string | null;
+        }>;
+        isToolboxCollapsedChanged: CustomEvent<{
+            isCollapsed: boolean;
+        }>;
+        isEditorCollapsedChanged: CustomEvent<{
+            isCollapsed: boolean;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-svelte",
 	"description": "Svelte wrapper for Sequential Workflow Designer component.",
-	"version": "0.16.6",
+	"version": "0.16.8",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -11,8 +11,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:single": "echo \"No tests yet\"",
-		"prettier": "prettier --check ./src",
-		"prettier:fix": "prettier --write ./src",
+		"prettier": "prettier --plugin prettier-plugin-svelte --check ./src",
+		"prettier:fix": "prettier --plugin prettier-plugin-svelte --write ./src",
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"exports": {
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.16.6"
+		"sequential-workflow-designer": "^0.16.8"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.16.6",
+		"sequential-workflow-designer": "^0.16.8",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
@@ -41,11 +41,22 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
 		"prettier": "^2.8.2",
+		"prettier-plugin-svelte": "^2.8.0",
 		"@typescript-eslint/eslint-plugin": "^5.47.0",
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
-}
+	"type": "module",
+	"keywords": [
+		"workflow",
+		"designer",
+		"builder",
+		"nocode",
+		"lowcode",
+		"flow",
+		"svelte",
+		"sveltejs"
+	]
+}