@operato/app 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/app

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-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -147,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-beta.0",
-    "@operato/data-grist": "^8.0.0-beta.0",
-    "@operato/font": "^8.0.0-beta.0",
-    "@operato/form": "^8.0.0-beta.0",
-    "@operato/graphql": "^8.0.0-beta.0",
-    "@operato/i18n": "^8.0.0-beta.0",
-    "@operato/input": "^8.0.0-beta.0",
-    "@operato/layout": "^8.0.0-beta.0",
-    "@operato/property-editor": "^8.0.0-beta.0",
-    "@operato/shell": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.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",
@@ -199,5 +199,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "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-code.ts

@@ -1,11 +0,0 @@
-import './ox-filter-resource-code.js'
-
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '@operato/data-grist'
-
-export const FilterResourceCode: FilterSelectRenderer = (column, value, owner) => {
-  return html`
-    <ox-filter-resource-code name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-code>
-  `
-}

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

@@ -1,11 +0,0 @@
-import './ox-filter-resource-object.js'
-
-import { html } from 'lit-html'
-
-import { FilterSelectRenderer } from '@operato/data-grist'
-
-export const FilterResourceObject: FilterSelectRenderer = (column, value, owner) => {
-  return html`
-    <ox-filter-resource-object name=${column?.name} .column=${column} .value=${value}></ox-filter-resource-object>
-  `
-}

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,14 +0,0 @@
-import { registerFilterRenderer } from '@operato/form'
-import { registerFilterRenderer as dataGristFilterRenderer } from '@operato/data-grist'
-
-import { FilterResourceSelect } from './filter-resource-select.js'
-
-import { FilterResourceCode } from './filter-resource-code.js'
-import { FilterResourceObject } from './filter-resource-object.js'
-
-registerFilterRenderer('resource-object', [FilterResourceSelect])
-registerFilterRenderer('resource-id', [FilterResourceSelect])
-
-dataGristFilterRenderer('code', [FilterResourceCode])
-dataGristFilterRenderer('object', [FilterResourceObject])
-dataGristFilterRenderer('resource-object', [FilterResourceObject])

package/src/filters-form/ox-filter-resource-code.ts

@@ -1,154 +0,0 @@
-import '@operato/input/ox-select.js'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { FilterConfigObject } from '@operato/data-grist'
-import { client, gqlContext } from '@operato/graphql'
-import { OxFormField } from '@operato/input'
-
-type CommonCodeDetail = {
-  name: string
-  description: string
-  rank: number
-}
-
-const FETCH_COMMON_CODE_GQL = (codeName: string) => gql`
-{
-  commonCode(name: "${codeName}") {
-    details {
-      name
-      description
-      rank
-    }
-  }
-}
-`
-
-@customElement('ox-filter-resource-code')
-export class OxFilterResourceCode extends OxFormField {
-  static styles = css`
-    :host {
-      min-width: 100px;
-    }
-  `
-
-  @property({ type: Object }) column: any
-  @property({ type: String }) value?: string
-
-  @state() codes?: CommonCodeDetail[]
-
-  render() {
-    const { name, filter } = this.column
-    const operator = (filter as FilterConfigObject).operator
-    const { selectDispOpt = 'code-name' } = this.column.record || {}
-
-    if (!this.codes) {
-      return html`<p>Loading...</p>`
-    }
-
-    return operator === 'in'
-      ? html`
-          <ox-select
-            .value=${this.value}
-            @change=${(e: CustomEvent) => {
-              let val = e.detail
-              this.value = val?.length > 0 ? val : undefined
-
-              this?.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: this.value
-                  }
-                })
-              )
-            }}
-          >
-            <ox-popup-list multiple attr-selected="checked" with-search align-left>
-              <ox-checkbox
-                checkAll
-                @click=${(e: any) => {
-                  const checked = e.target.checked
-                  const val = checked ? this.codes!.map((code: CommonCodeDetail) => code.name) : []
-
-                  e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))
-                }}
-                >${i18next.t('label.all')}</ox-checkbox
-              >
-              ${this.codes
-                ?.filter((code: CommonCodeDetail) => !!code.name)
-                .map(
-                  (code: CommonCodeDetail) => html`
-                    <ox-checkbox
-                      option
-                      value=${code.name}
-                      @change=${(e: any) => {
-                        const parent = e.target.parentElement
-                        const checkCnt = e.target.checked ? 1 : -1
-                        const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt
-
-                        parent.querySelector('ox-checkbox[checkAll]').checked =
-                          this.codes!.filter((code: CommonCodeDetail) => !!code.name).length === checkedLen
-                      }}
-                      >${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox
-                    >
-                  `
-                )}
-            </ox-popup-list>
-          </ox-select>
-        `
-      : html`
-          <ox-select
-            .value=${this.value}
-            @change=${(e: CustomEvent) => {
-              this.value = e.detail
-              this.dispatchEvent(
-                new CustomEvent('change', {
-                  detail: {
-                    name,
-                    operator,
-                    value: this.value
-                  }
-                })
-              )
-            }}
-          >
-            <ox-popup-list with-search>
-              <div option value="">&nbsp;</div>
-              ${this.codes?.map(
-                (code: CommonCodeDetail) => html`
-                  <div option value=${code.name}>
-                    ${selectDispOpt.replace('name', code.description).replace('code', code.name)}
-                  </div>
-                `
-              )}
-            </ox-popup-list>
-          </ox-select>
-        `
-  }
-
-  async fetchCodes() {
-    const { codeName } = this.column.record || {}
-
-    if (codeName) {
-      const response = await client.query({
-        query: FETCH_COMMON_CODE_GQL(codeName),
-        context: gqlContext()
-      })
-
-      this.codes = response?.data?.commonCode?.details || []
-
-      this.requestUpdate()
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.fetchCodes()
-  }
-}