@operato/app 8.0.0-alpha.9 → 8.0.0-beta.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -29,6 +29,8 @@
     "./grist-editor/ox-grist-editor-resource-object.js": "./dist/src/grist-editor/ox-grist-editor-resource-object.js",
     "./grist-editor/ox-grist-editor-resource-object-legacy.js": "./dist/src/grist-editor/ox-grist-editor-resource-object-legacy.js",
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
+    "./filters-form/filter-resource-code.js": "./dist/src/filters-form/filter-resource-code.js",
+    "./filters-form/filter-resource-object.js": "./dist/src/filters-form/filter-resource-object.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js",
     "./filters-form.js": "./dist/src/filters-form/index.js"
   },
@@ -97,6 +99,15 @@
       "grist-editor/ox-grist-editor-resource-code.js": [
         "dist/src/grist-editor/ox-grist-editor-resource-code.d.ts"
       ],
+      "filters-form/filter-resource-code.js": [
+        "./dist/src/filters-form/filter-resource-code.d.ts"
+      ],
+      "filters-form/filter-resource-object.js": [
+        "./dist/src/filters-form/filter-resource-object.d.ts"
+      ],
+      "filters-form.js": [
+        "dist/src/filters-form/index.d.ts"
+      ],
       "filter-renderer.js": [
         "dist/src/filter-renderer/index.d.ts"
       ]
@@ -136,18 +147,18 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^2.0.0",
-    "@operato/attachment": "^8.0.0-alpha.9",
-    "@operato/data-grist": "^8.0.0-alpha.8",
-    "@operato/font": "^8.0.0-alpha.9",
-    "@operato/form": "^8.0.0-alpha.6",
-    "@operato/graphql": "^8.0.0-alpha.0",
-    "@operato/i18n": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/layout": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.9",
-    "@operato/shell": "^8.0.0-alpha.4",
-    "@operato/styles": "^8.0.0-alpha.4",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/attachment": "^8.0.0-beta.1",
+    "@operato/data-grist": "^8.0.0-beta.1",
+    "@operato/font": "^8.0.0-beta.1",
+    "@operato/form": "^8.0.0-beta.1",
+    "@operato/graphql": "^8.0.0-beta.1",
+    "@operato/i18n": "^8.0.0-beta.1",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/layout": "^8.0.0-beta.1",
+    "@operato/property-editor": "^8.0.0-beta.1",
+    "@operato/shell": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -157,17 +168,17 @@
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@open-wc/testing": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -188,5 +199,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2347cd63c237f73d1dae009e739b3c408afd58f3"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
-}

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/src/filter-renderer/filter-resource-select.ts

@@ -1,133 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '../selector/ox-selector-resource-id'
-
-import { html } from 'lit-html'
-
-import { ColumnConfig, FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-type SelectedCallback = (value: { id: string; name: string; description: string }) => void
-
-function openResourceSelector(column: ColumnConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id', title } = column.record.options
-
-  var actualValue
-  if (typeof valueField === 'function') {
-    actualValue = valueField(value)
-  } else {
-    actualValue = value?.[valueField]
-  }
-
-  var template = html`
-    <ox-selector-resource-object
-      .value=${actualValue}
-      .confirmCallback=${confirmCallback}
-      .queryName=${queryName}
-      .columns=${select}
-      .list=${list}
-      .basicArgs=${basicArgs}
-      .valueField=${valueField}
-    ></ox-selector-resource-object>
-  `
-
-  const popup = openPopup(template, {
-    backdrop: true,
-    size: 'large',
-    search: {
-      autofocus: true,
-      placeholder: title || i18next.t('title.select_item'),
-      handler: (instance: any, value: any) => {
-        /* instance: template instance */
-        instance.searchText(value)
-      }
-    },
-    filter: {
-      handler: (instance: any) => {
-        /* instance: template instance */
-        instance.toggleFilter()
-      }
-    }
-  })
-}
-
-export const FilterResourceSelect: FilterSelectRenderer = (column, value, owner: any) => {
-  const filter = column.filter as FilterConfigObject
-  const { operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {}
-  const hideValue = value ? value[idField] : ''
-  const text = value ? value[nameField] : ''
-
-  return operator === 'like'
-    ? html` <input
-        type="text"
-        name=${column.name}
-        .value=${text}
-        @change=${(e: CustomEvent) => {
-          const input = e.target as HTMLInputElement
-          input.dispatchEvent(
-            new CustomEvent('filter-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                name: column.name,
-                operator,
-                value: input.value
-              }
-            })
-          )
-        }}
-      />`
-    : operator == 'in'
-      ? html``
-      : operator === 'eq'
-        ? html`
-            <input name="${column.name}" .value=${hideValue} type="text" hidden />
-            <input
-              type="text"
-              name="${column.name}_disp"
-              .value=${text}
-              readonly
-              @click=${(e: Event) => {
-                e.stopPropagation()
-
-                const input = e.target as HTMLInputElement
-
-                const confirmCallback = (selected?: { [field: string]: any }) => {
-                  let disp = selected ? selected[idField] : ''
-
-                  if (selected && nameField) {
-                    disp = selected[nameField]
-                  }
-
-                  input.value = disp
-
-                  let codeInput =
-                    owner.tagName.toLowerCase() == 'ox-grid-header'
-                      ? owner.renderRoot.querySelector(`[name="${column.name}"]`)
-                      : owner.renderRoot.querySelector(`form [name="${column.name}"]`)
-
-                  const objectValue = selected ? selected[idField] : ''
-                  codeInput.value = objectValue
-
-                  input.dispatchEvent(new Event('change', { bubbles: true }))
-
-                  owner.dispatchEvent(
-                    new CustomEvent('filter-change', {
-                      bubbles: true,
-                      composed: true,
-                      detail: {
-                        name: column.name,
-                        operator,
-                        value: objectValue
-                      }
-                    })
-                  )
-                }
-
-                openResourceSelector(column, value, confirmCallback)
-              }}
-            />
-          `
-        : html``
-}

package/src/filter-renderer/index.ts

@@ -1,6 +0,0 @@
-import { registerFilterRenderer } from '@operato/data-grist'
-
-import { FilterResourceSelect } from './filter-resource-select.js'
-
-registerFilterRenderer('resource-object', [FilterResourceSelect])
-registerFilterRenderer('resource-id', [FilterResourceSelect])

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

@@ -1,130 +0,0 @@
-import '@operato/input/ox-checkbox.js'
-import '../selector/ox-selector-resource-object'
-
-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?: Partial<GristRecord>) => void
-
-function openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {
-  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || ({} as any)
-
-  var template = html`
-    <ox-selector-resource-object
-      .value=${value}
-      .confirmCallback=${confirmCallback}
-      .queryName=${queryName}
-      .columns=${select}
-      .list=${list}
-      .basicArgs=${basicArgs}
-      .valueField=${valueField}
-    ></ox-selector-resource-object>
-  `
-
-  const popup = openPopup(template, {
-    backdrop: true,
-    size: 'large',
-    search: {
-      autofocus: true,
-      placeholder: title || i18next.t('title.select_item'),
-      handler: (instance: any, value: any) => {
-        /* instance: template instance */
-        instance.searchText(value)
-      }
-    },
-    filter: {
-      handler: (instance: any) => {
-        /* instance: template instance */
-        instance.toggleFilter()
-      }
-    }
-  })
-}
-
-export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {
-  const { name, operator = 'like' } = filter
-  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || ({} as any)
-  const hideValue = value ? value[idField] : ''
-  const text = value ? value[nameField] : ''
-
-  return operator === 'like'
-    ? html` <input
-        type="text"
-        name=${name}
-        .value=${text}
-        @change=${(e: CustomEvent) => {
-          const input = e.target as HTMLInputElement
-          input.dispatchEvent(
-            new CustomEvent('filter-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                name,
-                operator,
-                value: input.value
-              }
-            })
-          )
-        }}
-      />`
-    : operator == 'in'
-      ? html``
-      : operator === 'eq'
-        ? html`
-            <input name="${name}" .value=${hideValue} type="text" hidden />
-            <input
-              type="text"
-              name="${name}_disp"
-              .value=${text}
-              readonly
-              @change=${() => false}
-              @click=${(e: Event) => {
-                e.stopPropagation()
-
-                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] : ''
-
-                  if (selected && nameField) {
-                    disp = selected[nameField]
-                  }
-                  input.value = disp
-
-                  const value = selected ? selected[idField] : ''
-                  codeInput.value = value
-
-                  codeInput.dispatchEvent(
-                    new Event('change', {
-                      bubbles: true,
-                      composed: true
-                    })
-                  )
-
-                  owner.dispatchEvent(
-                    new CustomEvent('filter-change', {
-                      bubbles: true,
-                      composed: true,
-                      detail: {
-                        name: name,
-                        operator,
-                        value
-                      }
-                    })
-                  )
-                }
-
-                openResourceSelector(filter, codeInput.value, confirmCallback)
-              }}
-            />
-          `
-        : html``
-}

package/src/filters-form/index.ts

@@ -1,6 +0,0 @@
-import { registerFilterRenderer } from '@operato/form'
-
-import { FilterResourceSelect } from './filter-resource-select.js'
-
-registerFilterRenderer('resource-object', [FilterResourceSelect])
-registerFilterRenderer('resource-id', [FilterResourceSelect])

package/src/grist-editor/index.ts

@@ -1,26 +0,0 @@
-import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
-
-import { OxGristEditorJson } from './ox-grist-editor-json.js'
-import { OxGristEditorCode } from './ox-grist-editor-code.js'
-import { OxGristEditorResourceCode } from './ox-grist-editor-resource-code.js'
-import { OxGristEditorResourceId } from './ox-grist-editor-resource-id.js'
-import { OxGristEditorResourceObject } from './ox-grist-editor-resource-object.js'
-import { OxGristRendererCrontab } from './ox-grist-renderer-crontab'
-import { OxGristRendererResourceId } from './ox-grist-renderer-resource-id.js'
-import { OxGristRendererResourceCode } from './ox-grist-renderer-resource-code.js'
-import { OxGristRendererResourceObject } from './ox-grist-renderer-resource-object.js'
-
-/* register grist renderer/editor for id */
-registerEditor('resource-id', OxGristEditorResourceId)
-registerEditor('resource-code', OxGristEditorResourceCode)
-registerEditor('resource-object', OxGristEditorResourceObject)
-registerEditor('json', OxGristEditorJson)
-registerEditor('template', OxGristEditorCode)
-
-registerRenderer('resource-id', OxGristRendererResourceId)
-registerRenderer('resource-code', OxGristRendererResourceId)
-registerRenderer('resource-object', OxGristRendererResourceObject)
-registerRenderer('parameters', OxGristRendererJson5)
-registerRenderer('value-map', OxGristRendererJson5)
-registerRenderer('partition-keys', OxGristRendererJson5)
-registerRenderer('crontab', OxGristRendererCrontab)

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

@@ -1,64 +0,0 @@
-import './ox-popup-code-input.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-code')
-export class OxGristEditorCode extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">${this.value || ''}</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var { mode, language = 'javascript' } = this.column.record?.options || {}
-
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-code-input
-          .value=${this.value}
-          mode=${mode}
-          .confirmCallback=${change.bind(this)}
-          language=${language}
-        ></ox-popup-code-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit code'),
-        help: 'data-grist/grist-editor/code'
-      }
-    )
-  }
-}

package/src/grist-editor/ox-grist-editor-json.ts

@@ -1,64 +0,0 @@
-import './ox-popup-code-input.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-json')
-export class OxGristEditorJson extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">${this.value || ''}</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-code-input
-          .value=${this.value}
-          mode="javascript"
-          @change=${(e: CustomEvent) => {
-            change(e.detail.value)
-            popup.close()
-          }}
-          lanugage="json"
-        ></ox-popup-code-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit json'),
-        help: 'data-grist/grist-editor/json'
-      }
-    )
-  }
-}

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

@@ -1,58 +0,0 @@
-import './ox-popup-privilege-input.js'
-
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxGristEditor } from '@operato/data-grist'
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('ox-grist-editor-privilege')
-export class OxGristEditorPrivilege extends OxGristEditor {
-  get editorTemplate() {
-    return html` <div tabindex="0">...</div> `
-  }
-
-  _onclick(e: Event): void {
-    e.stopPropagation()
-    this.showEditorPopup()
-  }
-
-  _onkeydown(e: KeyboardEvent): void {
-    const key = e.key
-    if (key == 'Enter') {
-      e.stopPropagation()
-      this.showEditorPopup()
-    }
-  }
-
-  showEditorPopup() {
-    var change = (value: string) => {
-      this.dispatchEvent(
-        new CustomEvent('field-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            before: this.value,
-            after: value,
-            column: this.column,
-            record: this.record,
-            row: this.row
-          }
-        })
-      )
-    }
-
-    var popup = openPopup(
-      html`
-        <ox-popup-privilege-input .value=${this.value} .confirmCallback=${change.bind(this)}></ox-popup-privilege-input>
-      `,
-      {
-        backdrop: true,
-        title: i18next.t('title.edit privilege'),
-        size: 'medium',
-        help: 'data-grist/grist-editor/privilege'
-      }
-    )
-  }
-}

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

@@ -1,30 +0,0 @@
-import '@material/web/icon/icon.js'
-import { OxGristEditor, RecordConfig } from '@operato/data-grist'
-
-import { customElement } from 'lit/decorators.js'
-import { html } from 'lit'
-
-type CommonCodeDetail = {
-  name: string
-  description: string
-  rank: number
-}
-
-@customElement('ox-grist-editor-resource-code')
-export class OxGristEditorResourceCode extends OxGristEditor {
-  get editorTemplate() {
-    var { codes, selectDispOpt = 'code-name' } = this.column.record || {}
-
-    return html`
-      <select>
-        ${(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)}
-            </option>
-          `
-        )}
-      </select>
-    `
-  }
-}