@operato/process 2.0.0-alpha.99 → 2.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "2.0.0-alpha.99",
+  "version": "2.0.0-beta.0",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -68,18 +68,18 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^2.0.0-alpha.99",
-    "@operato/board": "^2.0.0-alpha.99",
-    "@operato/data-grist": "^2.0.0-alpha.99",
-    "@operato/font": "^2.0.0-alpha.99",
-    "@operato/graphql": "^2.0.0-alpha.57",
-    "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.99",
-    "@operato/markdown": "^2.0.0-alpha.99",
-    "@operato/popup": "^2.0.0-alpha.99",
-    "@operato/property-editor": "^2.0.0-alpha.99",
-    "@operato/styles": "^2.0.0-alpha.99",
-    "@operato/utils": "^2.0.0-alpha.68",
+    "@operato/app": "^2.0.0-beta.0",
+    "@operato/board": "^2.0.0-beta.0",
+    "@operato/data-grist": "^2.0.0-beta.0",
+    "@operato/font": "^2.0.0-beta.0",
+    "@operato/graphql": "^2.0.0-beta.0",
+    "@operato/i18n": "^2.0.0-beta.0",
+    "@operato/input": "^2.0.0-beta.0",
+    "@operato/markdown": "^2.0.0-beta.0",
+    "@operato/popup": "^2.0.0-beta.0",
+    "@operato/property-editor": "^2.0.0-beta.0",
+    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/utils": "^2.0.0-beta.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -87,7 +87,7 @@
     "file-saver": "^2.0.5",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "sortablejs": "^1.14.0"
+    "sortablejs": "^1.15.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.2",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "8641cdd871ffdbef9e5b2a79bbf3862fb0422e3e"
+  "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
 }

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -80,7 +80,7 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('componentGroupList')) {
-      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')
+      const color = getComputedStyle(this, null).getPropertyValue('--md-sys-color-primary')
 
       this.icons = (this.componentGroupList || [])
         .filter(group => group.templates?.length > 0)

package/src/modeller/edit-toolbar.ts

@@ -190,7 +190,7 @@ export class EditToolbar extends LitElement {
         <span class="vline"></span>
 
         <span button id="font-increase" title="increase font size"></span>
-        <span button id="font-decrease" title="decrease font size"></span>
+        <span button id="font-decrease" title="decrease font size" style="scale: 0.7;"></span>
 
         <span class="vline"></span>
         <span padding></span>

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -131,14 +131,14 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
 
       md-icon {
         margin-left: 5px;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         opacity: 0.8;
         cursor: pointer;
         --md-icon-size: 18px;
       }
 
       md-icon:hover {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
         opacity: 1;
       }
 

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -21,13 +21,12 @@ export class SceneInspector extends LitElement {
 
       ox-input-search {
         --input-search-padding: 3px;
-        --input-search-border-bottom: none;
         --input-search-focus-border-bottom: none;
         --input-search-font: normal 16px var(--theme-font);
 
         border-radius: 999px;
         box-sizing: border-box;
-        border: 1px solid var(--secondary-color);
+        border: 1px solid var(--md-sys-color-on-secondary-container);
         padding: 0 10px;
         margin: 5px;
       }

package/src/modeller/property-sidebar/specifics/specifics.ts

@@ -25,7 +25,7 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
 
         text-align: right;
         font: bold 14px var(--theme-font);
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
         text-transform: uppercase;
       }
     `

package/src/ox-process-list.ts

@@ -4,7 +4,7 @@ import '@operato/data-grist'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
-import { ColumnConfig, DataGrist, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, GristData, GristRecord, SortersConfig } from '@operato/data-grist'
 import { OxPopup } from '@operato/popup'
 
 import { createProcess, fetchProcessList } from './graphql/process'
@@ -38,7 +38,7 @@ class ProcessList extends LitElement {
       align-items: center;
       padding: var(--padding-default) var(--padding-wide);
       border-top: 2px solid rgba(0, 0, 0, 0.2);
-      background-color: var(--theme-white-color);
+      background-color: var(--md-sys-color-surface);
       box-shadow: var(--box-shadow);
     }
 
@@ -58,7 +58,7 @@ class ProcessList extends LitElement {
       padding: var(--padding-narrow);
       font-size: 1em;
       opacity: 0.5;
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
       cursor: pointer;
     }
 
@@ -66,12 +66,12 @@ class ProcessList extends LitElement {
       border-radius: 9px;
       background-color: rgba(var(--primary-color-rgb), 0.05);
       opacity: 1;
-      color: var(--secondary-text-color);
+      color: var(--md-sys-color-on-secondary-container);
       cursor: default;
     }
     #modes > md-icon:hover {
       opacity: 1;
-      color: var(--secondary-text-color);
+      color: var(--md-sys-color-on-secondary-container);
     }
 
     #add button {
@@ -79,7 +79,8 @@ class ProcessList extends LitElement {
       align-items: center;
       justify-content: center;
 
-      background-color: var(--primary-color);
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
       border: 0;
       border-radius: 50%;
       padding: 5px;
@@ -89,13 +90,13 @@ class ProcessList extends LitElement {
     }
 
     #add button:hover {
-      background-color: var(--focus-background-color);
+      background-color: var(--md-sys-color-on-primary-container);
+      color: var(--md-sys-color-primary-container);
       box-shadow: var(--box-shadow);
     }
 
     #add button md-icon {
       font-size: 1.5em;
-      color: var(--theme-white-color);
     }
 
     #filters {
@@ -114,22 +115,10 @@ class ProcessList extends LitElement {
     #filters md-icon {
       position: absolute;
       top: 3px;
-      color: var(--secondary-color);
+      color: var(--md-sys-color-on-secondary-container);
     }
     #filters * {
-      margin-right: var(--margin-default);
-    }
-
-    oops-spinner {
-      display: none;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    oops-spinner[show] {
-      display: block;
+      margin-right: var(--spacing-medium);
     }
 
     @media only screen and (max-width: 460px) {
@@ -147,8 +136,6 @@ class ProcessList extends LitElement {
   @property({ type: Array }) groups: any[] = []
   @property({ type: Array }) favorites: any[] = []
 
-  @state() _showSpinner: boolean = false
-
   @query('ox-grist') grist!: DataGrist
 
   render() {
@@ -191,18 +178,12 @@ class ProcessList extends LitElement {
             : undefined}
         </div>
       </ox-grist>
-
-      <oops-spinner ?show=${this._showSpinner}></oops-spinner>
     `
   }
 
-  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {
-    this._showSpinner = true
-
+  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {
     const { items: records, total } = await this.getProcesses({ page, limit, sorters })
 
-    this._showSpinner = false
-
     return {
       total,
       records
@@ -227,34 +208,6 @@ class ProcessList extends LitElement {
           type: 'gutter',
           gutterName: 'sequence'
         },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'star_border',
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number
-            ): void => {}
-          }
-        },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          icon: 'drive_file_rename_outline',
-          handlers: {
-            click: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number
-            ): void => {}
-          }
-        },
         {
           type: 'string',
           name: 'id',
@@ -279,18 +232,7 @@ class ProcessList extends LitElement {
             editable: true,
             align: 'left'
           },
-          width: 200,
-          handlers: {
-            dblclick: (
-              columns: ColumnConfig[],
-              data: GristData,
-              column: ColumnConfig,
-              record: GristRecord,
-              rowIndex: number
-            ): void => {
-              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
-            }
-          }
+          width: 200
         },
         {
           type: 'boolean',
@@ -326,12 +268,7 @@ class ProcessList extends LitElement {
       rows: {
         selectable: {
           multiple: true
-        },
-        handlers: {},
-        classifier: function (
-          record: GristRecord,
-          rowIndex: number
-        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}
+        }
       },
       sorters: [
         {

package/src/ox-process-modeller.ts

@@ -98,7 +98,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
-        background: var(--secondary-color, black);
+        background: var(--md-sys-color-on-secondary-container, black);
 
         display: flex;
         justify-content: center;

package/src/ox-process-template-list.ts

@@ -77,7 +77,7 @@ export class OxProcessTemplateList extends LitElement {
         align-items: center;
         padding: var(--padding-default) var(--padding-wide);
         border-top: 2px solid rgba(0, 0, 0, 0.2);
-        background-color: var(--theme-white-color);
+        background-color: var(--md-sys-color-surface);
         box-shadow: var(--box-shadow);
       }
 

package/src/selector/ox-process-creation-card.ts

@@ -17,7 +17,7 @@ export class ProcessCreationCard extends localize(i18next)(LitElement) {
           border: var(--card-list-create-border);
           border-radius: var(--card-list-create-border-radius);
 
-          background-color: #fff;
+          background-color: var(--md-sys-color-surface);
 
           align-content: center;
           justify-content: center;

package/src/selector/ox-process-selector.ts

@@ -120,7 +120,7 @@ export class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitEle
 
         #filter {
           padding: var(--popup-content-padding);
-          background-color: #fff;
+          background-color: var(--md-sys-color-surface);
           box-shadow: var(--box-shadow);
         }
 

package/src/selector/process-creation-popup.ts

@@ -21,7 +21,7 @@ export class ProcessCreationPopup extends localize(i18next)(LitElement) {
           gap: 10px;
           padding: 10px;
 
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
 
         [body] {

package/src/selector/process-thumbnail-card.ts

@@ -38,7 +38,7 @@ export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
           border: var(--card-list-create-border);
           border-radius: var(--card-list-create-border-radius);
 
-          background-color: #fff;
+          background-color: var(--md-sys-color-surface);
 
           -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
@@ -79,7 +79,7 @@ export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
         [back] form select {
           flex: 1 1 60%;
           width: 10px;
-          background-color: #fff;
+          background-color: var(--md-sys-color-surface);
           border: var(--card-list-create-input-border);
           border-radius: var(--card-list-create-input-border-radius);
           padding: var(--card-list-create-input-padding);