@operato/app 2.0.0-alpha.98 → 2.0.0-beta.0

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.98",
+  "version": "2.0.0-beta.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -134,22 +134,21 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^1.4.0",
-    "@operato/attachment": "^2.0.0-alpha.98",
-    "@operato/data-grist": "^2.0.0-alpha.98",
-    "@operato/font": "^2.0.0-alpha.98",
-    "@operato/form": "^2.0.0-alpha.94",
-    "@operato/graphql": "^2.0.0-alpha.57",
-    "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.98",
-    "@operato/layout": "^2.0.0-alpha.98",
-    "@operato/property-editor": "^2.0.0-alpha.98",
-    "@operato/shell": "^2.0.0-alpha.98",
-    "@operato/styles": "^2.0.0-alpha.98",
-    "@operato/utils": "^2.0.0-alpha.68",
+    "@operato/attachment": "^2.0.0-beta.0",
+    "@operato/data-grist": "^2.0.0-beta.0",
+    "@operato/font": "^2.0.0-beta.0",
+    "@operato/form": "^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/layout": "^2.0.0-beta.0",
+    "@operato/property-editor": "^2.0.0-beta.0",
+    "@operato/shell": "^2.0.0-beta.0",
+    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/utils": "^2.0.0-beta.0",
     "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",
@@ -187,5 +186,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cc3f1dee34e1bf60629920629e566bf28171c8fe"
+  "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
 }

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

@@ -54,9 +54,9 @@ function openResourceSelector(column: ColumnConfig, value: any, confirmCallback:
 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] : '';
+  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
@@ -79,54 +79,55 @@ export const FilterResourceSelect: FilterSelectRenderer = (column, value, owner:
         }}
       />`
     : operator == 'in'
-    ? html``
-    : operator === 'eq'
-    ? html`
-        <input name='${column.name}' .value=${hideValue} type="text" hidden></input>
-        <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
+      ? 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]
                   }
-                })
-              )
-            }
-
-            openResourceSelector(column, value, confirmCallback)
-          }}
-        />
-      `
-    : html``
+
+                  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/filters-form/filter-resource-select.ts

@@ -11,7 +11,7 @@ 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 || {}
+  const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || ({} as any)
 
   var template = html`
     <ox-selector-resource-object
@@ -47,7 +47,7 @@ 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 || {}
+  var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || ({} as any)
   const hideValue = value ? value[idField] : ''
   const text = value ? value[nameField] : ''
 
@@ -72,59 +72,59 @@ export const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner:
         }}
       />`
     : operator == 'in'
-    ? html``
-    : operator === 'eq'
-    ? html`
-        <input name='${name}' .value=${hideValue} type="text" hidden></input>
-        <input 
-          type="text"
-          name='${name}_disp'
-          .value=${text}
-          readonly
-          @change=${() => false}
-          @click=${(e: Event) => {
-            e.stopPropagation()
+      ? 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 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] : ''
+                const confirmCallback = (selected?: { [field: string]: any }) => {
+                  let disp = selected ? selected[idField] : ''
 
-              if (selected && nameField) {
-                disp = selected[nameField]
-              }
-              input.value = disp
+                  if (selected && nameField) {
+                    disp = selected[nameField]
+                  }
+                  input.value = disp
 
-              const value = selected ? selected[idField] : ''
-              codeInput.value = value
+                  const value = selected ? selected[idField] : ''
+                  codeInput.value = value
 
-              codeInput.dispatchEvent(
-                new Event('change', {
-                  bubbles: true,
-                  composed: true
-                })
-              )
+                  codeInput.dispatchEvent(
+                    new Event('change', {
+                      bubbles: true,
+                      composed: true
+                    })
+                  )
 
-              owner.dispatchEvent(
-                new CustomEvent('filter-change', {
-                  bubbles: true,
-                  composed: true,
-                  detail: {
-                    name: name,
-                    operator,
-                    value
-                  }
-                })
-              )
-            }
+                  owner.dispatchEvent(
+                    new CustomEvent('filter-change', {
+                      bubbles: true,
+                      composed: true,
+                      detail: {
+                        name: name,
+                        operator,
+                        value
+                      }
+                    })
+                  )
+                }
 
-            openResourceSelector(filter, codeInput.value, confirmCallback)
-          }}
-        />
-      `
-    : html``
+                openResourceSelector(filter, codeInput.value, confirmCallback)
+              }}
+            />
+          `
+        : html``
 }

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

@@ -18,7 +18,7 @@ export class OxPopupCodeInput extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);

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

@@ -20,7 +20,7 @@ export class OxPopupPrivilegeInput extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);

package/src/input/ox-input-background-pattern.ts

@@ -117,7 +117,7 @@ export class OxInputBackgroundPattern extends OxFormField {
     const value = this.value || ({} as BackgroundPatternOption)
 
     return html`
-      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
+      <label> <ox-i18n msgid="label.image">image</ox-i18n> </label>
 
       <ox-attachment-selector
         value-key="image"
@@ -128,7 +128,7 @@ export class OxInputBackgroundPattern extends OxFormField {
         custom-editor
       ></ox-attachment-selector>
 
-      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
+      <label> <ox-i18n msgid="label.align">align</ox-i18n> </label>
 
       <select value-key="align" class="select-content" .value=${value.align}>
         <option value="left-top">Left Top</option>
@@ -143,16 +143,16 @@ export class OxInputBackgroundPattern extends OxFormField {
       </select>
 
       <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.offset-x">offsetX</ox-i18n> </label>
         <input type="number" value-key="offsetX" .value=${value.offsetX} />
 
-        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.offset-y">offsetY</ox-i18n> </label>
         <input type="number" value-key="offsetY" .value=${value.offsetY} />
 
-        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.width">width</ox-i18n> </label>
         <input type="number" value-key="width" .value=${value.width} />
 
-        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.height">height</ox-i18n> </label>
         <input type="number" value-key="height" .value=${value.height} />
       </div>
 
@@ -163,12 +163,12 @@ export class OxInputBackgroundPattern extends OxFormField {
 
       <div class="grid-10">
         <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">fit</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.fit">fit</ox-i18n> </label>
       </div>
 
       <div class="grid-10">
         <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
-        <label> <ox-i18n msgid="label.no-repeat" auto="">no repeat</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.no-repeat">no repeat</ox-i18n> </label>
       </div>
     `
   }

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

@@ -2,7 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { fetch } from 'cross-fetch'
 import { print } from 'graphql'
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'

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

@@ -21,7 +21,7 @@ export class OxSelectorResourceId extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);

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

@@ -17,7 +17,7 @@ import {
   InheritedValueType,
   ZERO_DATA
 } from '@operato/data-grist'
-import { MultiColumnFormStyles, SearchForm } from '@operato/form'
+import { MultiColumnFormStyles, OxSearchForm } from '@operato/form'
 import { buildArgs, client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
@@ -34,7 +34,7 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -76,7 +76,7 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
   @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
 
   @query('ox-grist') grist!: DataGrist
-  @query('ox-search-form') searchForm!: SearchForm
+  @query('ox-search-form') searchForm!: OxSearchForm
 
   render() {
     return html`

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

@@ -29,7 +29,7 @@ export class OxSelectorResourceObject extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);

package/stories/graphql-client.stories.ts

@@ -0,0 +1,73 @@
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '@operato/graphql/graphql-client.js'
+import '../src/input/ox-input-graphql.js'
+
+// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
+
+import { html, TemplateResult } from 'lit'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'graphql-client',
+  component: 'graphql-client',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-graphql
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-graphql>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'code',
+  value: `
+query privileges {
+  privileges {
+    items {
+      privilege
+      category
+      description
+    }
+    total
+  }
+}
+`
+}

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

@@ -0,0 +1,98 @@
+import { html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'
+import '../src/selector/ox-selector-resource-object'
+
+setClientLink(
+  createMockLink({
+    request: {
+      query: ''
+    },
+    result: {
+      data: {
+        viewer: null
+      }
+    }
+  })
+)
+
+export default {
+  title: 'ox-selector-resource-object',
+  component: 'ox-selector-resource-object',
+  argTypes: {
+    queryName: { control: 'string' },
+    value: { control: 'string' },
+    valueField: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  queryName: string
+  value?: string
+  valueField?: string
+}
+
+const Template: Story<ArgTypes> = ({ value = '', queryName, valueField }: ArgTypes) => html`
+  <style>
+    body {
+    }
+  </style>
+
+  <script>
+    const select = ['name', 'description']
+  </script>
+
+  <ox-selector-resource-object
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    value=${ifDefined(value)}
+    valueField=${ifDefined(valueField)}
+    .queryName=${queryName}
+    .confirmCallback=${(record: any) => console.log('confirm', record)}
+    .columns=${[
+      {
+        type: 'string',
+        name: 'id',
+        header: 'id',
+        hidden: true,
+        width: 100,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'name',
+        header: 'name',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: 'description',
+        hidden: false,
+        width: 150,
+        queryName: ''
+      }
+    ]}
+    .list=${['name', 'description']}
+    .basicArgs=${''}
+  >
+  </ox-selector-resource-object>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: '',
+  queryName: 'entity',
+  valueField: 'id'
+}

package/themes/app-theme.css

@@ -131,7 +131,7 @@ body {
 
   /* form style */
   --label-font: normal var(--fontsize-default) var(--theme-font);
-  --label-color: var(--secondary-color);
+  --label-color: var(--md-sys-color-on-surface);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
   --input-padding: var(--padding-default);