@opens/service-workflow-ui 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,123 @@
-# Temporary Holding Version
+# @opens/service-workflow-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Service workflow editor
+
+Import the package stylesheet once in the consuming application, then bind the service flow with
+`v-model`. Existing rules are always displayed; `allowed-node-types` controls which types can be
+created by the editor.
+
+```ts
+import { createPinia } from 'pinia';
+import ServiceWorkflowUi, {
+  AppServiceWorkflowAddForm,
+  AppServiceWorkflowEditor,
+} from '@opens/service-workflow-ui';
+import '@opens/service-workflow-ui/dist/yunique_ui.css';
+
+app.use(createPinia());
+app.use(ServiceWorkflowUi);
+```
+
+```vue
+<app-service-workflow-editor
+  workflow-id="main-flow"
+  v-model="flow"
+  :allowed-node-types="['screen', 'identification', 'service']"
+  @change="handleChange"
+  @node="handleNode"
+  @invalid-change="handleInvalidChange"
+  @invalid-model="handleInvalidModel"
+></app-service-workflow-editor>
+
+<app-service-workflow-add-form workflow-id="main-flow"></app-service-workflow-add-form>
+```
+
+`workflow-id` connects one editor to one external add form through Pinia. The consumer owns the
+Pinia instance; the library never installs or replaces it. The add form can be positioned anywhere
+in the application and appears when the editor toolbar or a child placeholder requests creation.
+
+A non-empty flow must contain exactly one rule with `isRoot: true`. Disconnected rules, multiple
+parents, and cycles are supported. Invalid models remain visible in read-only mode.
+
+Node-type descriptors may define a maximum number of outgoing children. Every rule with remaining
+capacity displays one rolling purple add placeholder, regardless of how many slots remain.
+`maxChildren: 0` disables child creation for that type.
+
+```ts
+const allowedNodeTypes = [
+  { type: 'screen', maxChildren: 2 },
+  { type: 'identification', maxChildren: 1 },
+  { type: 'service', maxChildren: 0 },
+];
+```
+
+The editor rejects add, connect, or cross-source reconnect operations that exceed a finite limit
+through `invalid-change`. Existing over-capacity payloads remain visible and editable so their
+connections can be removed or corrected.
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+npm run test:e2e:dev
+```
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+npm run build
+npm run test:e2e
+```
+
+---
+
+### Novas versões
+
+Para fechar novas versões deve-se atualizar o parâmetro `version` no package.json com o valor da nova versão. Após isso, o pipeline já irá fazer o build e atualizar no npm.

package/dist/main.d.ts

@@ -0,0 +1,101 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_Props = {
+    workflowId: string;
+};
+
+declare type __VLS_Props_2 = {
+    workflowId: string;
+    modelValue: any;
+    allowedNodeTypes?: any[];
+};
+
+export declare const AppServiceWorkflowAddForm: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare const AppServiceWorkflowEditor: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (flow: any) => any;
+change: (flow: any, mutation: WorkflowMutation) => any;
+node: (rule: any) => any;
+"invalid-change": (invalid: InvalidChange) => any;
+"invalid-model": (invalid: InvalidModel) => any;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+"onUpdate:modelValue"?: ((flow: any) => any) | undefined;
+onChange?: ((flow: any, mutation: WorkflowMutation) => any) | undefined;
+onNode?: ((rule: any) => any) | undefined;
+"onInvalid-change"?: ((invalid: InvalidChange) => any) | undefined;
+"onInvalid-model"?: ((invalid: InvalidModel) => any) | undefined;
+}>, {
+allowedNodeTypes: any[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+
+export declare interface InvalidChange {
+    mutation: Record<string, any>;
+    reason: string;
+}
+
+export declare interface InvalidModel {
+    reasons: string[];
+}
+
+export declare interface NormalizedNodeType {
+    type: string;
+    label: string;
+    color: string;
+    icon: string;
+    defaultName: string;
+    maxChildren?: number;
+}
+
+export declare interface ServiceWorkflowEditorChannel {
+    request: ComputedRef<WorkflowAddRequest | undefined>;
+    nodeTypes: ComputedRef<NormalizedNodeType[]>;
+    requestAdd: (parentRule?: any) => boolean;
+    cancelAdd: () => void;
+    confirmAdd: (nodeType: NormalizedNodeType) => boolean;
+}
+
+export declare const useServiceWorkflowEditorChannel: (workflowId: string) => ServiceWorkflowEditorChannel;
+
+export declare interface WorkflowAddRequest {
+    workflowId: string;
+    parentId?: string;
+    parentName?: string;
+}
+
+export declare type WorkflowMutation = {
+    type: 'add-node';
+    nodeId: string;
+    parentId?: string;
+} | {
+    type: 'delete-node';
+    nodeId: string;
+} | {
+    type: 'connect';
+    edgeId: string;
+    source: string;
+    target: string;
+} | {
+    type: 'disconnect';
+    edgeId: string;
+    source: string;
+    target: string;
+} | {
+    type: 'reconnect';
+    edgeId: string;
+    source: string;
+    target: string;
+    previousSource: string;
+    previousTarget: string;
+};
+
+export { }