feat: Add table component to viewer

bpmn-io · Nov 29, 2023 · d476af0 · d476af0
1 parent ec33b55
commit d476af0
Show file tree

Hide file tree

Showing 8 changed files with 533 additions and 30 deletions.
diff --git a/packages/form-js-editor/src/features/modeling/behavior/TableDataSourceBehavior.js b/packages/form-js-editor/src/features/modeling/behavior/TableDataSourceBehavior.js
@@ -0,0 +1,25 @@
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import { get } from 'min-dash';
+
+export class TableDataSourceBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+
+    this.preExecute('formField.add', function(context) {
+
+      const { formField } = context;
+
+      if (get(formField, [ 'type' ]) !== 'table') {
+        return;
+      }
+
+      context.formField = {
+        ...formField,
+        dataSource: formField.id
+      };
+    }, true);
+  }
+}
+
+TableDataSourceBehavior.$inject = [ 'eventBus' ];
diff --git a/packages/form-js-editor/src/features/modeling/behavior/index.js b/packages/form-js-editor/src/features/modeling/behavior/index.js
@@ -4,6 +4,7 @@ import PathBehavior from './PathBehavior';
 import ValidateBehavior from './ValidateBehavior';
 import ValuesSourceBehavior from './ValuesSourceBehavior';
 import { ColumnsSourceBehavior } from './ColumnsSourceBehavior';
+import { TableDataSourceBehavior } from './TableDataSourceBehavior';
 
 export default {
   __init__: [
@@ -12,12 +13,14 @@ export default {
     'pathBehavior',
     'validateBehavior',
     'valuesSourceBehavior',
-    'columnsSourceBehavior'
+    'columnsSourceBehavior',
+    'tableDataSourceBehavior'
   ],
   idBehavior: [ 'type', IdBehavior ],
   keyBehavior: [ 'type', KeyBehavior ],
   pathBehavior: [ 'type', PathBehavior ],
   validateBehavior: [ 'type', ValidateBehavior ],
   valuesSourceBehavior: [ 'type', ValuesSourceBehavior ],
-  columnsSourceBehavior: [ 'type', ColumnsSourceBehavior ]
+  columnsSourceBehavior: [ 'type', ColumnsSourceBehavior ],
+  tableDataSourceBehavior: [ 'type', TableDataSourceBehavior ]
 };
diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css
@@ -52,10 +52,7 @@
   --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
   --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
-  --color-layer: var(
-    --cds-layer, 
-    var(--cds-layer-01, var(--color-white)) 
-  );
+  --color-layer-accent: var(--cds-layer-accent, #e0e0e0);
 
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
@@ -989,6 +986,112 @@
   overflow: hidden;
 }
 
+.fjs-container .fjs-table-outer-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.fjs-container .fjs-table-middle-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  border: 1px solid var(--color-borders-group);
+  border-radius: 3px;
+}
+
+.fjs-container .fjs-table-middle-container.fjs-table-empty {
+  border: none;
+  color: var(--color-text-disabled);
+  padding-left: 16px;
+}
+
+.fjs-container .fjs-table-inner-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+
+.fjs-container .fjs-table {
+  min-width: 100%;
+  overflow-y: auto;
+  border-collapse: collapse;
+}
+
+.fjs-container .fjs-table-head {
+  background-color: var(--color-layer-accent);
+}
+
+.fjs-container .fjs-table-th {
+  min-width: 120px;
+  cursor: pointer;
+
+}
+
+.fjs-container .fjs-table-th-label {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.fjs-container .fjs-table-th:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-th,
+.fjs-container .fjs-table-td {
+  text-align: left;
+  height: 32px;
+  padding: 0 16px;
+}
+
+.fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) {
+  border-bottom: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button {
+  border: unset;
+  background: unset;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--color-borders-group);
+}
+
+.fjs-container .fjs-table-nav-button:first-of-type {
+  margin-left: 16px;
+}
+
+.fjs-container .fjs-table-nav-button:focus {
+  outline: var(--outline-definition);
+  outline-offset: -1px;
+}
+
+.fjs-container .fjs-table-nav-button svg {
+  width: 16px;
+}
+
+.fjs-container .fjs-table-sort-icon-asc,
+.fjs-container .fjs-table-sort-icon-desc {
+  width: 16px;
+}
+
 /**
 * Flatpickr style adjustments
 */