@operato/app 2.0.0-alpha.6 → 2.0.0-alpha.60

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.6",
+  "version": "2.0.0-alpha.60",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -136,43 +136,43 @@
     "@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.6",
-    "@operato/data-grist": "^2.0.0-alpha.6",
-    "@operato/font": "^2.0.0-alpha.6",
-    "@operato/form": "^2.0.0-alpha.0",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/layout": "^2.0.0-alpha.4",
-    "@operato/property-editor": "^2.0.0-alpha.6",
-    "@operato/shell": "^2.0.0-alpha.0",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.0",
-    "cm6-graphql": "^0.0.12",
+    "@operato/attachment": "^2.0.0-alpha.60",
+    "@operato/data-grist": "^2.0.0-alpha.60",
+    "@operato/font": "^2.0.0-alpha.60",
+    "@operato/form": "^2.0.0-alpha.57",
+    "@operato/graphql": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@operato/input": "^2.0.0-alpha.59",
+    "@operato/layout": "^2.0.0-alpha.57",
+    "@operato/property-editor": "^2.0.0-alpha.60",
+    "@operato/shell": "^2.0.0-alpha.57",
+    "@operato/styles": "^2.0.0-alpha.57",
+    "@operato/utils": "^2.0.0-alpha.57",
+    "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 +189,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "9b56040758ce57f30663bf7e0934587087a1076b"
+  "gitHead": "755a088ddd184b28c22aba6abbd82636df6eb7ee"
 }

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/selector/ox-selector-resource-object.ts

@@ -61,7 +61,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
@@ -114,7 +114,7 @@ export class OxSelectorResourceObject extends LitElement {
   }
 
   onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
+    this.confirmCallback && this.confirmCallback()
     closePopup(this)
   }
 

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);