@operato/grist-editor 2.0.0-alpha.4 → 2.0.0-alpha.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/grist-editor",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.43",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -17,42 +17,51 @@
   },
   "exports": {
     ".": "./dist/src/index.js",
-    "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
     "./ox-grist-editor-crontab.js": "./dist/src/ox-grist-editor-crontab.js",
+    "./ox-grist-editor-duration.js": "./dist/src/ox-grist-editor-duration.js",
+    "./ox-grist-editor-hashtags.js": "./dist/src/ox-grist-editor-hashtags.js",
+    "./ox-grist-editor-i18n-label.js": "./dist/src/ox-grist-editor-i18n-label.js",
     "./ox-grist-editor-parameters.js": "./dist/src/ox-grist-editor-parameters.js",
-    "./ox-grist-editor-value-map.js": "./dist/src/ox-grist-editor-value-map.js",
-    "./ox-grist-editor-value-ranges.js": "./dist/src/ox-grist-editor-value-ranges.js",
     "./ox-grist-editor-partition-keys.js": "./dist/src/ox-grist-editor-partition-keys.js",
     "./ox-grist-editor-quantifier.js": "./dist/src/ox-grist-editor-quantifier.js",
+    "./ox-grist-editor-value-map.js": "./dist/src/ox-grist-editor-value-map.js",
+    "./ox-grist-editor-value-ranges.js": "./dist/src/ox-grist-editor-value-ranges.js",
     "./ox-grist-renderer-crontab.js": "./dist/src/ox-grist-renderer-crontab.js",
     "./ox-grist-renderer-duration.js": "./dist/src/ox-grist-renderer-duration.js",
     "./ox-grist-renderer-hashtags.js": "./dist/src/ox-grist-renderer-hashtags.js",
+    "./ox-grist-renderer-i18n-label.js": "./dist/src/ox-grist-renderer-i18n-label.js",
     "./ox-grist-renderer-partition-keys.js": "./dist/src/ox-grist-renderer-partition-keys.js",
     "./ox-grist-renderer-quantifier.js": "./dist/src/ox-grist-renderer-quantifier.js"
   },
   "typesVersions": {
     "*": {
+      "ox-grist-editor-crontab.js": [
+        "dist/src/ox-grist-editor-crontab.d.ts"
+      ],
       "ox-grist-editor-duration.js": [
         "dist/src/ox-grist-editor-duration.d.ts"
       ],
-      "ox-grist-editor-crontab.js": [
-        "dist/src/ox-grist-editor-crontab.d.ts"
+      "ox-grist-editor-hashtags.js": [
+        "dist/src/ox-grist-editor-hashtags.d.ts"
+      ],
+      "ox-grist-editor-i18n-label.js": [
+        "dist/src/ox-grist-editor-i18n-label.d.ts"
       ],
       "ox-grist-editor-parameters.js": [
         "dist/src/ox-grist-editor-parameters.d.ts"
       ],
-      "ox-grist-editor-value-map.js": [
-        "dist/src/ox-grist-editor-value-map.d.ts"
-      ],
-      "ox-grist-editor-value-ranges.js": [
-        "dist/src/ox-grist-editor-value-ranges.d.ts"
-      ],
       "ox-grist-editor-partition-keys.js": [
         "dist/src/ox-grist-editor-partition-keys.d.ts"
       ],
       "ox-grist-editor-quantifier.js": [
         "dist/src/ox-grist-editor-quantifier.d.ts"
       ],
+      "ox-grist-editor-value-map.js": [
+        "dist/src/ox-grist-editor-value-map.d.ts"
+      ],
+      "ox-grist-editor-value-ranges.js": [
+        "dist/src/ox-grist-editor-value-ranges.d.ts"
+      ],
       "ox-grist-renderer-crontab.js": [
         "dist/src/ox-grist-renderer-crontab.d.ts"
       ],
@@ -62,6 +71,9 @@
       "ox-grist-renderer-hashtags.js": [
         "dist/src/ox-grist-renderer-hashtags.d.ts"
       ],
+      "ox-grist-renderer-i18n-label.js": [
+        "dist/src/ox-grist-renderer-i18n-label.d.ts"
+      ],
       "ox-grist-renderer-partition-keys.js": [
         "dist/src/ox-grist-renderer-partition-keys.d.ts"
       ],
@@ -86,38 +98,38 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.4",
-    "@operato/help": "^2.0.0-alpha.4",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.4",
-    "@operato/popup": "^2.0.0-alpha.4",
-    "@operato/property-editor": "^2.0.0-alpha.4",
-    "@operato/styles": "^2.0.0-alpha.0",
+    "@operato/data-grist": "^2.0.0-alpha.35",
+    "@operato/help": "^2.0.0-alpha.43",
+    "@operato/i18n": "^2.0.0-alpha.28",
+    "@operato/input": "^2.0.0-alpha.35",
+    "@operato/popup": "^2.0.0-alpha.35",
+    "@operato/property-editor": "^2.0.0-alpha.43",
+    "@operato/styles": "^2.0.0-alpha.28",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
     "lit": "^2.5.0",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
     "@material/mwc-fab": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
     "@types/w3c-web-usb": "^1.0.5",
-    "@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"
   },
@@ -134,5 +146,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "351befceadea37e8095af5b5a43dbd8be87e5cc5"
+  "gitHead": "bab8044c924725f8a06653d14decc9024f2de1c9"
 }

package/src/index.ts

@@ -12,6 +12,8 @@ import { OxGristRendererQuantifier } from './ox-grist-renderer-quantifier'
 import { OxGristRendererHashtags } from './ox-grist-renderer-hashtags'
 import { OxGristRendererPartitionKeys } from './ox-grist-renderer-partition-keys.js'
 import { OxGristEditorValueRanges } from './ox-grist-editor-value-ranges.js'
+import { OxGristEditorI18nLabel } from './ox-grist-editor-i18n-label.js'
+import { OxGristRendererI18nLabel } from './ox-grist-renderer-i18n-label.js'
 
 /* register grist renderer/editor for id */
 registerEditor('parameters', OxGristEditorParameters)
@@ -22,6 +24,7 @@ registerEditor('crontab', OxGristEditorCrontab)
 registerEditor('duration', OxGristEditorDuration)
 registerEditor('quantifier', OxGristEditorQuantifier)
 registerEditor('hashtags', OxGristEditorHashtags)
+registerEditor('i18n-label', OxGristEditorI18nLabel)
 
 registerRenderer('parameters', OxGristRendererJson5)
 registerRenderer('value-map', OxGristRendererJson5)
@@ -30,3 +33,4 @@ registerRenderer('partition-keys', OxGristRendererPartitionKeys)
 registerRenderer('duration', OxGristRendererDuration)
 registerRenderer('quantifier', OxGristRendererQuantifier)
 registerRenderer('hashtags', OxGristRendererHashtags)
+registerRenderer('i18n-label', OxGristRendererI18nLabel)

package/src/ox-grist-editor-i18n-label.ts

@@ -0,0 +1,101 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-popup-i18n-label-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import json5 from 'json5'
+
+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-i18n-label')
+export class OxGristEditorI18nLabel extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get options() {
+    return this.column.record?.options || {}
+  }
+
+  get editorTemplate() {
+    const { displayColumn } = this.column.record.options || {}
+
+    const value =
+      typeof this.value === 'object'
+        ? this.value[i18next.language || 'en-US']
+        : displayColumn
+          ? this.record[displayColumn]
+          : ''
+
+    return html`<div tabindex="0">${value || ''}</div>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  async openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const { name, help, languages, objectified = false } = this.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-i18n-label-input .value=${value} .languages=${languages} .confirmCallback=${confirmCallback}>
+      </ox-popup-i18n-label-input>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || i18next.t('title.i18n-label')} `,
+      help
+    })
+  }
+}

package/src/ox-grist-renderer-i18n-label.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit'
+
+import { FieldRenderer } from '@operato/data-grist'
+import i18next from 'i18next'
+
+export const OxGristRendererI18nLabel: FieldRenderer = (value, column, record, rowIndex, field) => {
+  const language = i18next.language || 'en-US'
+  const labels = value || {}
+  const label = labels[language] || labels[language.substring(0, 2)] || labels['en'] || ''
+
+  return html`<span>${label}</span>`
+}

package/src/ox-popup-i18n-label-input.ts

@@ -0,0 +1,98 @@
+import '@operato/input/ox-input-i18n-label.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'
+
+@customElement('ox-popup-i18n-label-input')
+export class OxPopupValueMapInput 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-input-i18n-label {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--padding-default);
+      }
+
+      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: Array }) languages: { code: string; display: string }[] = []
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  render() {
+    return html`
+      <ox-input-i18n-label .value=${this.value} .languages=${this.languages} @change=${this.onChange.bind(this)}>
+      </ox-input-i18n-label>
+
+      <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(...)을 사용하였다.
+    */
+
+    if (!this.value || typeof this.value !== 'object') {
+      this.value = {}
+    }
+
+    for (let key in this.value) {
+      delete this.value[key]
+    }
+
+    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/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);
+  --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);