@operato/attribute 1.2.41

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@operato/attribute",
+  "description": "WebApplication attribute supporting components following open-wc recommendations",
+  "author": "heartyoh",
+  "version": "1.2.41",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./grist-editor": "./dist/src/grist-editor/index.js",
+    "./grist-editor/ox-grist-editor-attributes.js": "./dist/src/grist-editor/ox-grist-editor-attributes.js",
+    "./ox-attribute-form.js": "./dist/src/ox-attribute-form.js",
+    "./ox-attribute-view.js": "./dist/src/ox-attribute-view.js",
+    "./types.js": "./dist/src/types.js"
+  },
+  "typesVersions": {
+    "*": {
+      "grist-editor": [
+        "dist/src/grist-editor/index.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-attributes.js": [
+        "dist/src/grist-editor/ox-grist-editor-attributes.d.ts"
+      ],
+      "ox-attribute-form.js": [
+        "dist/src/ox-attribute-form.d.ts"
+      ],
+      "ox-attribute-view.js": [
+        "dist/src/ox-attribute-view.d.ts"
+      ],
+      "types.js": [
+        "dist/src/types.d.ts"
+      ]
+    }
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/operato.git",
+    "directory": "webcomponents/attribute"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && npm run analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
+  },
+  "dependencies": {
+    "@material/mwc-button": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
+    "@material/mwc-icon-button": "^0.27.0",
+    "@operato/data-grist": "^1.2.39",
+    "@operato/graphql": "^1.2.35",
+    "@operato/grist-editor": "^1.2.40",
+    "@operato/i18n": "^1.2.35",
+    "@operato/input": "^1.2.39",
+    "@operato/popup": "^1.2.38",
+    "@operato/property-editor": "^1.2.40",
+    "@operato/shell": "^1.2.38",
+    "@operato/styles": "^1.2.35",
+    "@operato/utils": "^1.2.35",
+    "lit": "^2.5.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@web/dev-server": "^0.2.1",
+    "@web/dev-server-storybook": "^0.7.1",
+    "@web/test-runner": "^0.16.1",
+    "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",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "customElements": "custom-elements.json",
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "b5584b413b09193583b4be1652e4bfebcc6d8d7a"
+}

package/src/grist-editor/index.ts

@@ -0,0 +1,10 @@
+import { OxGristRendererJson5, registerEditor, registerRenderer } from '@operato/data-grist'
+
+import { OxGristEditorAttribute } from './ox-grist-editor-attributes'
+
+/* register grist renderer/editor for id */
+registerEditor('attributes', OxGristEditorAttribute)
+
+registerRenderer('attributes', OxGristRendererJson5)
+
+export * from './ox-grist-editor-attributes'

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

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-popup-attributes.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { cloneDeep } from 'lodash-es'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('ox-grist-editor-attributes')
+export class OxGristEditorAttribute extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    return html`<div tabindex="0">${value || ''}</div> `
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openPopup()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openPopup()
+    }
+  }
+
+  async openPopup() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    var { options } = this.column.record
+    var { attributeSet } = options || {}
+
+    if (typeof options === 'function') {
+      options = await options.call(this, this.value, this.column, this.record, this.row, this.field)
+    }
+
+    const { name, help, objectified = false } = options
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: !objectified ? JSON.stringify(newval) : newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    try {
+      var value: any =
+        !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})
+    } catch (e) {
+      var value: any = {}
+    }
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+    */
+    var template = html`
+      <ox-popup-attributes .value=${value} .attributeSet=${attributeSet} .confirmCallback=${confirmCallback}>
+      </ox-popup-attributes>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || ''} ${i18next.t('field.attributes')}`,
+      help
+    })
+  }
+}

package/src/grist-editor/ox-popup-attributes.ts

@@ -0,0 +1,93 @@
+import '../ox-attribute-form.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { AttributeSet } from '../types.js'
+
+@customElement('ox-popup-attributes')
+export class OxPopupAttributes extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-data-item-spec {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--padding-wide);
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: Object }) attributeSet?: AttributeSet
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  render() {
+    var attributeSet = this.attributeSet || {}
+
+    return html`
+      <ox-attribute-form .value=${this.value} .attributeSet=${attributeSet} @change=${this.onChange.bind(this)}>
+      </ox-attribute-form>
+
+      <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>
+      </div>
+    `
+  }
+
+  private onChange(e: CustomEvent) {
+    e.stopPropagation()
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+      => 
+      이런 이유로, Object.assign(...)을 사용하였다.
+    */
+    this.value = e.detail
+  }
+
+  private onCancel(e: Event) {
+    closePopup(this)
+  }
+
+  private onConfirm(e: Event) {
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './types.js'

package/src/ox-attribute-form.ts

@@ -0,0 +1,218 @@
+import '@operato/input/ox-input-file.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { AttributeSet } from './types.js'
+
+@customElement('ox-attribute-form')
+export class OxAttributeForm extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    form {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      display: grid;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+
+    label:nth-child(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-area: name;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+
+    div[description] * {
+      vertical-align: middle;
+    }
+
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
+
+    div[elements] {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    div[elements] * {
+      flex: 1;
+    }
+
+    div[elements] input,
+    div[elements] select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
+      }
+
+      div[name] {
+        text-align: left;
+      }
+    }
+  `
+
+  @property({ type: Object }) attributeSet?: AttributeSet
+  @property({ type: Object }) value?: { [tag: string]: any }
+
+  render() {
+    return html` <form @change=${(e: Event) => this.onChange(e)}>
+      <h2>${this.attributeSet?.entity || ''}</h2>
+      <h3>${this.attributeSet?.description || ''}</h3>
+      ${this.buildInputs()}
+    </form>`
+  }
+
+  private onChange(e: Event) {
+    this.value = this.buildValue()
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+
+  private buildInputs() {
+    const items = this.attributeSet?.items.filter(item => item.active)
+
+    return (items || []).map(item => {
+      const { name, description, tag, type, options = {} } = item
+
+      const value = this.value && this.value[tag]
+
+      switch (type) {
+        case 'select':
+          var element = html` <select .name=${tag}>
+            <option value=""></option>
+            ${(options.options || []).map(
+              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`
+            )}
+          </select>`
+          break
+
+        case 'boolean':
+          var element = html` <input type="checkbox" name=${tag} .checked=${value} />`
+          break
+
+        case 'number':
+          var element = html` <input type="number" name=${tag} value=${value} />`
+          break
+
+        case 'date':
+          var element = html` <input type="date" name=${tag} value=${value} />`
+          break
+
+        case 'datetime':
+          var element = html` <input type="datetime-local" name=${tag} value=${value} />`
+          break
+
+        case 'file':
+          var element = html`<ox-input-file
+            name=${tag}
+            label="Attach Files"
+            accept="*/*"
+            multiple="true"
+            hide-filelist
+          ></ox-input-file>`
+
+        case 'string':
+        default:
+          var element = html` <input type="text" name=${tag} value=${value} />`
+      }
+
+      return html` <label .title=${description}>
+        <div name>${name}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div elements>${element}</div>
+      </label>`
+    })
+  }
+
+  private buildValue() {
+    const items = this.attributeSet!.items
+
+    return (items || []).reduce((sum, item) => {
+      const { tag, type } = item
+
+      const editors = Array.prototype.slice.call(
+        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
+      ) as HTMLInputElement[]
+
+      if (editors.length > 0) {
+        sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
+      }
+
+      return sum
+    }, {} as { [tag: string]: any })
+  }
+}

package/src/ox-attribute-view.ts

@@ -0,0 +1,182 @@
+import '@operato/input/ox-input-file.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { AttributeSet } from './types.js'
+
+@customElement('ox-attribute-view')
+export class OxAttributeView extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: row;
+
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+
+    form {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      display: grid;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
+      align-items: center;
+      margin-bottom: var(--margin-default);
+    }
+
+    label:nth-child(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+
+    div[name] {
+      grid-area: name;
+      font: var(--label-font);
+      color: var(--label-color);
+      text-align: right;
+    }
+
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+
+    div[description] * {
+      vertical-align: middle;
+    }
+
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
+
+    div[elements] {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    div[elements] * {
+      flex: 1;
+    }
+
+    div[elements] input,
+    div[elements] select {
+      border: var(--input-field-border);
+      border-radius: var(--input-field-border-radius);
+      padding: var(--input-field-padding);
+      font: var(--input-field-font);
+    }
+
+    @media only screen and (max-width: 460px) {
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
+      }
+
+      div[name] {
+        text-align: left;
+      }
+    }
+  `
+
+  @property({ type: Object }) attributeSet?: AttributeSet
+  @property({ type: Object }) value?: { [tag: string]: any }
+
+  render() {
+    return html`<form>
+      <h2>${this.attributeSet?.entity || ''}</h2>
+      <h3>${this.attributeSet?.description || ''}</h3>
+      ${this.buildEntryViews()}
+    </form> `
+  }
+
+  private buildEntryViews() {
+    const items = this.attributeSet?.items.filter(item => item.active)
+
+    return (items || []).map(item => {
+      const { name, description, tag, type, options = {} } = item
+
+      const value = this.value && this.value[tag]
+
+      switch (type) {
+        case 'select':
+          var element = html` <select .name=${tag} disabled>
+            <option value=""></option>
+            ${(options.options || []).map(
+              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`
+            )}
+          </select>`
+          break
+
+        case 'boolean':
+          var element = html` <input type="checkbox" name=${tag} .checked=${value} disabled />`
+          break
+
+        case 'number':
+          var element = html` <input type="number" name=${tag} value=${value} disabled />`
+          break
+
+        case 'file':
+          var element = html`<ox-input-file
+            name=${tag}
+            label="Attach Files"
+            accept="*/*"
+            multiple="true"
+            hide-filelist
+            disabled
+          ></ox-input-file>`
+
+        case 'string':
+        default:
+          var element = html` <input type="text" name=${tag} value=${value} disabled />`
+      }
+
+      return html` <label .title=${description}>
+        <div name>${name}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div elements>${element}</div>
+      </label>`
+    })
+  }
+}