@nocobase/plugin-workflow 0.11.0-alpha.1 → 0.11.1-alpha.2

package/lib/client/style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.workflowVersionDropdownClass = exports.workflowPageClass = exports.nodeTitleClass = exports.nodeSubtreeClass = exports.nodeMetaClass = exports.nodeJobButtonClass = exports.nodeHeaderClass = exports.nodeClass = exports.nodeCardClass = exports.nodeBlockClass = exports.branchClass = exports.branchBlockClass = exports.addButtonClass = void 0;
+exports.default = void 0;
 function _client() {
   const data = require("@nocobase/client");
   _client = function _client() {
@@ -11,314 +11,337 @@ function _client() {
   };
   return data;
 }
-const workflowPageClass = (0, _client().css)`
-  flex-grow: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .workflow-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: 0.5rem 1rem;
-    background: #fff;
-    border-bottom: 1px solid #e7e7e7;
-
-    header {
+const useStyles = (0, _client().createStyles)(({
+  css,
+  token
+}) => {
+  return {
+    workflowPageClass: css`
+      flex-grow: 1;
+      overflow: hidden;
       display: flex;
-      align-items: center;
-      min-height: 2rem;
-    }
+      flex-direction: column;
+
+      .workflow-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        padding: 0.5rem 1rem;
+        background: ${token.colorBgContainer};
+        border-bottom: 1px solid ${token.colorBorder};
+
+        header {
+          display: flex;
+          align-items: center;
+          min-height: 2rem;
+        }
 
-    aside {
+        aside {
+          display: flex;
+          align-items: center;
+          gap: 0.5em;
+        }
+
+        .workflow-versions {
+          label {
+            margin-right: 0.5em;
+          }
+        }
+      }
+
+      .workflow-canvas {
+        flex-grow: 1;
+        overflow: auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2em;
+
+        .end {
+          cursor: default;
+
+          &:hover {
+            box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+          }
+        }
+      }
+    `,
+    workflowVersionDropdownClass: css`
+      .ant-dropdown-menu-item {
+        .ant-dropdown-menu-title-content {
+          text-align: right;
+
+          time {
+            margin-left: 0.5rem;
+            color: ${token.colorText};
+            font-size: 80%;
+          }
+
+          strong {
+            font-weight: normal;
+          }
+
+          > .enabled {
+            strong {
+              font-weight: bold;
+            }
+          }
+
+          > .unexecuted {
+            strong {
+              font-style: italic;
+            }
+          }
+        }
+      }
+    `,
+    branchBlockClass: css`
+      display: flex;
+      position: relative;
+
+      :before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: calc(50% - 0.5px);
+        width: 1px;
+        background-color: ${token.colorBorder};
+      }
+    `,
+    branchClass: css`
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 0.5em;
-    }
+      position: relative;
+      min-width: 20em;
+      padding: 0 2em;
 
-    .workflow-versions {
-      label {
-        margin-right: 0.5em;
+      .workflow-node-list {
+        flex-grow: 1;
       }
-    }
-  }
 
-  .workflow-canvas {
-    flex-grow: 1;
-    overflow: auto;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2em;
+      .workflow-branch-lines {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: ${token.colorBorder};
+      }
+
+      :before,
+      :after {
+        content: '';
+        position: absolute;
+        height: 1px;
+        background-color: ${token.colorBorder};
+      }
 
-    .end {
-      cursor: default;
+      :before {
+        top: 0;
+      }
+
+      :after {
+        bottom: 0;
+      }
+
+      :not(:first-child):not(:last-child) {
+        :before,
+        :after {
+          left: 0;
+          width: 100%;
+        }
+      }
+
+      :last-child:not(:first-child) {
+        :before,
+        :after {
+          right: 50%;
+          width: 50%;
+        }
+      }
+
+      :first-child:not(:last-child) {
+        :before,
+        :after {
+          left: 50%;
+          width: 50%;
+        }
+      }
+    `,
+    nodeBlockClass: css`
+      flex-grow: 1;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    `,
+    nodeClass: css`
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    `,
+    nodeCardClass: css`
+      position: relative;
+      width: 20em;
+      background: ${token.colorBgContainer};
+      padding: 1em;
+      box-shadow: ${token.boxShadowTertiary};
+      border-radius: ${token.borderRadiusLG}px;
+      cursor: pointer;
+      transition: box-shadow 0.3s ease;
 
       &:hover {
-        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+        box-shadow: ${token.boxShadow};
+
+        .workflow-node-remove-button {
+          opacity: 1;
+        }
       }
-    }
-  }
-`;
-exports.workflowPageClass = workflowPageClass;
-const workflowVersionDropdownClass = (0, _client().css)`
-  .ant-dropdown-menu-item {
-    .ant-dropdown-menu-title-content {
-      text-align: right;
-
-      time {
-        margin-left: 0.5rem;
-        color: #999;
-        font-size: 80%;
+
+      &.configuring {
+        box-shadow: ${token.boxShadow};
       }
 
-      strong {
-        font-weight: normal;
+      .workflow-node-remove-button {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: ${token.colorText};
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        &[disabled] {
+          display: none;
+        }
+
+        &:hover {
+          color: ${token.colorErrorHover};
+        }
       }
 
-      > .enabled {
-        strong {
-          font-weight: bold;
+      .ant-input {
+        font-weight: bold;
+
+        &:not(:focus) {
+          transition: background-color 0.3s ease, border-color 0.3s ease;
+          border-color: ${token.colorBorderBg};
+          background-color: ${token.colorBgContainerDisabled};
+
+          &:not(:disabled):hover {
+            border-color: ${token.colorPrimaryBorderHover};
+          }
+
+          &:disabled:hover {
+            border-color: ${token.colorBorderBg};
+          }
         }
       }
 
-      > .unexecuted {
-        strong {
-          font-style: italic;
+      .workflow-node-config-button {
+        padding: 0;
+      }
+
+      &:hover {
+        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
+
+        .workflow-node-remove-button {
+          opacity: 1;
         }
       }
-    }
-  }
-`;
-exports.workflowVersionDropdownClass = workflowVersionDropdownClass;
-const branchBlockClass = (0, _client().css)`
-  display: flex;
-  position: relative;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: calc(50% - 0.5px);
-    width: 1px;
-    background-color: var(--nb-box-bg);
-  }
-`;
-exports.branchBlockClass = branchBlockClass;
-const branchClass = (0, _client().css)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  min-width: 20em;
-  padding: 0 2em;
-
-  .workflow-node-list {
-    flex-grow: 1;
-  }
-
-  .workflow-branch-lines {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: #ddd;
-  }
-
-  :before,
-  :after {
-    content: '';
-    position: absolute;
-    height: 1px;
-    background-color: #ddd;
-  }
-
-  :before {
-    top: 0;
-  }
-
-  :after {
-    bottom: 0;
-  }
-
-  :not(:first-child):not(:last-child) {
-    :before,
-    :after {
-      left: 0;
-      width: 100%;
-    }
-  }
-
-  :last-child:not(:first-child) {
-    :before,
-    :after {
-      right: 50%;
-      width: 50%;
-    }
-  }
-
-  :first-child:not(:last-child) {
-    :before,
-    :after {
-      left: 50%;
-      width: 50%;
-    }
-  }
-`;
-exports.branchClass = branchClass;
-const nodeBlockClass = (0, _client().css)`
-  flex-grow: 1;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-`;
-exports.nodeBlockClass = nodeBlockClass;
-const nodeClass = (0, _client().css)`
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-exports.nodeClass = nodeClass;
-const nodeCardClass = (0, _client().css)`
-  position: relative;
-  width: 20em;
-  background: #fff;
-  padding: 1em;
-  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
-  border-radius: 0.5em;
-  cursor: pointer;
-  transition: box-shadow 0.3s ease;
-
-  &.configuring {
-    box-shadow: 0 0.25em 1em rgba(0, 100, 200, 0.25);
-  }
-
-  .workflow-node-remove-button {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: #999;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-
-    &[disabled] {
-      display: none;
-    }
-
-    &:hover {
-      color: red;
-    }
-  }
-
-  .ant-input {
-    font-weight: bold;
-
-    &:not(:focus) {
-      transition: background-color 0.3s ease, border-color 0.3s ease;
-      border-color: #f7f7f7;
-      background-color: #f7f7f7;
-
-      &:not(:disabled):hover {
-        border-color: #eee;
-        background-color: #eee;
+    `,
+    nodeJobButtonClass: css`
+      display: flex;
+      position: absolute;
+      top: calc(1em - 1px);
+      right: 1em;
+      justify-content: center;
+      align-items: center;
+      color: ${token.colorText};
+
+      &[type='button'] {
+        border: none;
+      }
+
+      &.inner {
+        position: static;
       }
 
-      &:disabled:hover {
-        border-color: #f7f7f7;
+      .ant-tag {
+        padding: 0;
+        width: ${token.sizeLG}px;
+        height: ${token.sizeLG}px;
+        line-height: ${token.sizeLG}px;
+        margin-right: 0;
+        border-radius: 50%;
+        text-align: center;
+      }
+    `,
+    nodeHeaderClass: css`
+      position: relative;
+    `,
+    nodeMetaClass: css`
+      margin-bottom: 0.5em;
+
+      .workflow-node-id {
+        color: ${token.colorTextDescription};
+
+        &:before {
+          content: '#';
+        }
+      }
+    `,
+    nodeTitleClass: css`
+      display: flex;
+      align-items: center;
+      font-weight: normal;
+      .workflow-node-id {
+        color: ${token.colorTextDescription};
+      }
+    `,
+    nodeSubtreeClass: css`
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+    `,
+    addButtonClass: css`
+      flex-shrink: 0;
+      padding: 2em 0;
+
+      > .ant-btn {
+        &:disabled {
+          visibility: hidden;
+        }
+      }
+    `,
+    conditionClass: css`
+      position: relative;
+      height: 2em;
+      overflow: visible;
+
+      > span {
+        position: absolute;
+        top: calc(1.5em - 1px);
+        line-height: 1em;
+        color: ${token.colorTextSecondary};
+        padding: 1px;
       }
-    }
-  }
-
-  .workflow-node-config-button {
-    padding: 0;
-  }
-
-  &:hover {
-    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25);
-
-    .workflow-node-remove-button {
-      opacity: 1;
-    }
-  }
-`;
-exports.nodeCardClass = nodeCardClass;
-const nodeJobButtonClass = (0, _client().css)`
-  display: flex;
-  position: absolute;
-  top: 1.25em;
-  right: 1.25em;
-  width: 1.25rem;
-  height: 1.25rem;
-  min-width: 1.25rem;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.8em;
-  color: #fff;
-
-  &[type='button'] {
-    border: none;
-  }
-
-  &.inner {
-    position: static;
-  }
-
-  .ant-tag {
-    padding: 0;
-    width: 100%;
-    line-height: 18px;
-    margin-right: 0;
-    border-radius: 50%;
-    text-align: center;
-  }
-`;
-exports.nodeJobButtonClass = nodeJobButtonClass;
-const nodeHeaderClass = (0, _client().css)`
-  position: relative;
-`;
-exports.nodeHeaderClass = nodeHeaderClass;
-const nodeMetaClass = (0, _client().css)`
-  margin-bottom: 0.5em;
-
-  .workflow-node-id {
-    color: #999;
-
-    &:before {
-      content: '#';
-    }
-  }
-`;
-exports.nodeMetaClass = nodeMetaClass;
-const nodeTitleClass = (0, _client().css)`
-  display: flex;
-  align-items: center;
-  font-weight: normal;
-  .workflow-node-id {
-    color: #999;
-  }
-`;
-exports.nodeTitleClass = nodeTitleClass;
-const nodeSubtreeClass = (0, _client().css)`
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-`;
-exports.nodeSubtreeClass = nodeSubtreeClass;
-const addButtonClass = (0, _client().css)`
-  flex-shrink: 0;
-  padding: 2em 0;
-
-  > .ant-btn {
-    &:disabled {
-      visibility: hidden;
-    }
-  }
-`;
-exports.addButtonClass = addButtonClass;
+    `,
+    loopLineClass: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2em;
+      height: 6em;
+    `
+  };
+});
+var _default = useStyles;
+exports.default = _default;

package/lib/client/triggers/collection.d.ts

@@ -45,6 +45,7 @@ declare const _default: {
             'x-decorator': string;
             'x-component': string;
             'x-component-props': {
+                className: string;
                 mode: string;
                 placeholder: string;
                 filter(field: any): boolean;
@@ -60,6 +61,12 @@ declare const _default: {
         };
         condition: {
             title: string;
+            'x-component-props': {
+                useProps: () => {
+                    options: any[];
+                    className: string;
+                };
+            };
             'x-reactions': {
                 dependencies: string[];
                 fulfill: {
@@ -71,13 +78,6 @@ declare const _default: {
             type: string;
             'x-decorator': string;
             'x-component': string;
-            'x-component-props': {
-                useProps(): {
-                    options: any[];
-                    className: string;
-                };
-                dynamicComponent: string;
-            };
         };
         appends: {
             'x-reactions': {
@@ -94,9 +94,8 @@ declare const _default: {
             'x-decorator': string;
             'x-component': string;
             'x-component-props': {
-                mode: string;
-                placeholder: string;
-                filter(field: any): boolean;
+                useCollection(): any;
+                className: string;
             };
         };
     };

package/lib/client/triggers/collection.js

@@ -98,6 +98,7 @@ var _default = {
       'x-decorator': 'FormItem',
       'x-component': 'FieldsSelect',
       'x-component-props': {
+        className: 'full-width',
         mode: 'multiple',
         placeholder: '{{t("Select field")}}',
         filter(field) {
@@ -115,6 +116,9 @@ var _default = {
     },
     condition: _objectSpread(_objectSpread({}, _collection.filter), {}, {
       title: `{{t("Only triggers when match conditions", { ns: "${_locale.NAMESPACE}" })}}`,
+      'x-component-props': {
+        useProps: _collection.filter['x-component-props'].useProps
+      },
       'x-reactions': [{
         dependencies: ['collection'],
         fulfill: {

package/lib/client/triggers/index.d.ts

@@ -1,6 +1,5 @@
 import { ISchema } from '@formily/react';
 import { SchemaInitializerItemOptions } from '@nocobase/client';
-import { Registry } from '@nocobase/utils/client';
 import React from 'react';
 import { VariableOptions } from '../variable';
 export interface Trigger {
@@ -20,6 +19,6 @@ export interface Trigger {
     useInitializers?(config: any): SchemaInitializerItemOptions | null;
     initializers?: any;
 }
-export declare const triggers: Registry<Trigger>;
+export declare const triggers: any;
 export declare const TriggerConfig: () => React.JSX.Element;
-export declare function useTrigger(): Trigger;
+export declare function useTrigger(): any;