@operato/app 2.0.0-alpha.9 → 2.0.0-alpha.91

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-alpha.91",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -133,46 +133,44 @@
     "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^2.0.0-alpha.9",
-    "@operato/data-grist": "^2.0.0-alpha.9",
-    "@operato/font": "^2.0.0-alpha.9",
-    "@operato/form": "^2.0.0-alpha.8",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.9",
-    "@operato/layout": "^2.0.0-alpha.9",
-    "@operato/property-editor": "^2.0.0-alpha.9",
-    "@operato/shell": "^2.0.0-alpha.8",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
-    "cm6-graphql": "^0.0.12",
+    "@material/web": "^1.4.0",
+    "@operato/attachment": "^2.0.0-alpha.90",
+    "@operato/data-grist": "^2.0.0-alpha.90",
+    "@operato/font": "^2.0.0-alpha.90",
+    "@operato/form": "^2.0.0-alpha.91",
+    "@operato/graphql": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/input": "^2.0.0-alpha.90",
+    "@operato/layout": "^2.0.0-alpha.90",
+    "@operato/property-editor": "^2.0.0-alpha.90",
+    "@operato/shell": "^2.0.0-alpha.90",
+    "@operato/styles": "^2.0.0-alpha.90",
+    "@operato/utils": "^2.0.0-alpha.68",
+    "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
     "graphql": "^16.5.0",
     "graphql-config": "^5.0.2",
     "graphql-tag": "^2.12.6",
-    "lit": "^2.5.0"
+    "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -189,5 +187,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3baf1ab68d3bd68e15fe6f88ea85fd6eba98b131"
+  "gitHead": "bd409ab29a9ea994652f9fb09489e0bad544f74a"
 }

package/src/filters-form/filter-resource-select.ts

@@ -6,22 +6,16 @@ import { html } from 'lit-html'
 import { FilterConfig, FilterSelectRenderer } from '@operato/form'
 import { i18next } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
+import { GristRecord } from '@operato/data-grist'
 
-type SelectedCallback = (value: { id: string; name: string; description: string }) => void
+type SelectedCallback = (value?: Partial<GristRecord>) => void
 
 function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
   const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {}
 
-  var actualValue
-  if (typeof valueField === 'function') {
-    actualValue = valueField(value)
-  } else {
-    actualValue = value?.[valueField]
-  }
-
   var template = html`
     <ox-selector-resource-object
-      .value=${actualValue}
+      .value=${value}
       .confirmCallback=${confirmCallback}
       .queryName=${queryName}
       .columns=${select}
@@ -53,9 +47,9 @@ function openResourceSelector(filter: FilterConfig, value: any, confirmCallback:
 
 export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {
   const { name, operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
-  const hideValue = value ? value[idField] : '';
-  const text = value ? value[nameField] : '';
+  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}
+  const hideValue = value ? value[idField] : ''
+  const text = value ? value[nameField] : ''
 
   return operator === 'like'
     ? html` <input
@@ -87,26 +81,33 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
           name='${name}_disp'
           .value=${text}
           readonly
+          @change=${() => false}
           @click=${(e: Event) => {
             e.stopPropagation()
-            const input = e.target as HTMLInputElement;
+
+            const input = e.target as HTMLInputElement
+            const codeInput =
+              owner.tagName.toLowerCase() == 'ox-grid-header'
+                ? owner.renderRoot.querySelector(`[name="${name}"]`)
+                : owner.renderRoot.querySelector(`form [name="${name}"]`)
 
             const confirmCallback = (selected?: { [field: string]: any }) => {
-              let disp = selected ? selected[idField] : '';
+              let disp = selected ? selected[idField] : ''
 
-              if(selected && nameField){
-                disp = selected[nameField];
+              if (selected && nameField) {
+                disp = selected[nameField]
               }
-              input.value = disp;
-
-              let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' 
-                            ? owner.renderRoot.querySelector(`[name="${name}"]`)
-                            : owner.renderRoot.querySelector(`form [name="${name}"]`);
+              input.value = disp
 
-              const objectValue = selected ? selected[idField] : '';
-              codeInput.value = objectValue;
+              const value = selected ? selected[idField] : ''
+              codeInput.value = value
 
-              input.dispatchEvent(new Event('change', { bubbles: true }))
+              codeInput.dispatchEvent(
+                new Event('change', {
+                  bubbles: true,
+                  composed: true
+                })
+              )
 
               owner.dispatchEvent(
                 new CustomEvent('filter-change', {
@@ -115,13 +116,13 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
                   detail: {
                     name: name,
                     operator,
-                    value: objectValue
+                    value
                   }
                 })
               )
             }
 
-            openResourceSelector(filter, value, confirmCallback)
+            openResourceSelector(filter, codeInput.value, confirmCallback)
           }}
         />
       `

package/src/grist-editor/ox-grist-editor-resource-code.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { OxGristEditor, RecordConfig } from '@operato/data-grist'
 
 import { customElement } from 'lit/decorators.js'
@@ -20,7 +20,7 @@ export class OxGristEditorResourceCode extends OxGristEditor {
         ${(codes || []).map(
           (code: CommonCodeDetail) => html`
             <option ?selected=${code.name == this.value} value=${code.name}>
-            ${code.name == '' ? '' : selectDispOpt.replace('name',code.description).replace('code',code.name)}
+              ${code.name == '' ? '' : selectDispOpt.replace('name', code.description).replace('code', code.name)}
             </option>
           `
         )}

package/src/grist-editor/ox-grist-editor-resource-id.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../selector/ox-selector-resource-id.js'
 
 import { html } from 'lit'
@@ -19,7 +19,7 @@ export class OxGristEditorResourceId extends OxGristEditor {
       ${!value
         ? html`<span tabindex="0"></span>`
         : html` <span tabindex="0">${value[nameField]} (${value[descriptionField]})</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
+      <md-icon>arrow_drop_down</md-icon>
     `
   }
 

package/src/grist-editor/ox-popup-code-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-code.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,11 +6,12 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('ox-popup-code-input')
 export class OxPopupCodeInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -26,11 +28,6 @@ export class OxPopupCodeInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -45,8 +42,10 @@ export class OxPopupCodeInput extends LitElement {
       </ox-input-code>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/grist-editor/ox-popup-privilege-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-privilege.js'
 
 import gql from 'graphql-tag'
@@ -6,12 +7,13 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { client } from '@operato/graphql'
 
 @customElement('ox-popup-privilege-input')
 export class OxPopupPrivilegeInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -28,15 +30,6 @@ export class OxPopupPrivilegeInput extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-
-      .button-container {
-        display: flex;
-        flex-direction: row;
-      }
-
-      div[padding] {
-        flex: 1;
-      }
     `
   ]
 
@@ -51,11 +44,11 @@ export class OxPopupPrivilegeInput extends LitElement {
       <ox-input-privilege .value=${this.value} .privileges=${this.privileges} @change=${this.onChange.bind(this)}>
       </ox-input-privilege>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onReset.bind(this)}>${i18next.t('button.reset')}</mwc-button>
-        <div padding></div>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onReset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/selector/ox-selector-resource-id.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -39,11 +40,6 @@ export class OxSelectorResourceId extends LitElement {
       #filters > * {
         padding: var(--padding-default) var(--padding-wide);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -71,10 +67,13 @@ export class OxSelectorResourceId extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/selector/ox-selector-resource-object-legacy.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/form/ox-search-form.js'
 
@@ -40,11 +41,6 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }
@@ -110,10 +106,13 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -223,17 +222,17 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
             fieldType === 'string'
               ? 'text'
               : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
+                ? 'number'
+                : fieldType === 'boolean'
+                  ? 'checkbox'
+                  : fieldType,
           queryName: selectField.queryName,
           props:
             fieldType === 'string'
               ? { searchOper: 'i_like' }
               : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
+                ? { searchOper: 'in' }
+                : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })

package/src/selector/ox-selector-resource-object.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -47,11 +48,6 @@ export class OxSelectorResourceObject extends LitElement {
       #filters > * {
         padding: var(--padding-default) var(--padding-wide);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -61,7 +57,7 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: String }) queryName!: string
   @property({ type: Object }) basicArgs: any
   @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
-  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void
+  @property({ type: Object }) confirmCallback?: (record?: Partial<GristRecord>) => void
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
@@ -97,10 +93,13 @@ export class OxSelectorResourceObject extends LitElement {
         </div>
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left: unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -114,7 +113,7 @@ export class OxSelectorResourceObject extends LitElement {
   }
 
   onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
+    this.confirmCallback && this.confirmCallback()
     closePopup(this)
   }
 

package/stories/ox-input-graphql.stories.ts

@@ -24,7 +24,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/themes/app-theme.css

@@ -82,6 +82,16 @@ body {
   --mdc-button-outline-width: 1px;
   --mdc-button-horizontal-padding: 16px;
 
+  /* material style component themes */
+  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-primary: var(--secondary-text-color);
+  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-secondary: var(--primary-color);
+  --md-button-outline-color: var(--primary-color);
+  --md-danger-button-primary-color: var(--status-danger-color);
+  --md-danger-button-outline-color: var(--status-danger-color);
+  --md-button-outline-width: 1px;
+
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);

package/themes/grist-theme.css

@@ -37,7 +37,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
-  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --grid-record-padding: 0 5px 0 5px;
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);