@things-factory/grist-ui 4.0.0-y.0 → 4.0.7

package/client/data-grid/data-grid-body-style.js

@@ -11,32 +11,34 @@ export const dataGridBodyStyle = css`
     color: var(--grid-record-color);
   }
 
-  :host > [odd] {
+  [odd] {
     background-color: var(--grid-record-odd-background-color);
   }
 
-  :host > [selected-row] {
+  [selected-row] {
     background-color: var(--grid-record-selected-background-color);
     color: var(--grid-record-selected-color);
   }
 
-  :host > [emphasized-row] {
-    background-color: var(--grid-record-emphasized-background-color);
-    color: var(--grid-record-emphasized-color);
-  }
-
-  :host > [focused-row] {
-    background-color: var(--grid-record-focused-background-color);
+  [focused-row] {
     box-shadow: var(--grid-record-focused-box-shadow);
     font-weight: bold;
     color: var(--grid-record-focused-color);
+    background-image: var(--focused-background-image);
+    background-blend-mode: darken;
   }
 
-  :host > [focused] {
-    background-color: var(--grid-record-focused-cell-background-color);
+  [focused] {
+    border: var(--grid-record-focused-cell-border);
+  }
+
+  [emphasized-row],
+  [emphasized-row][focused] {
+    background-color: var(--grid-record-emphasized-background-color);
+    color: var(--grid-record-emphasized-color);
   }
 
-  :host > [editing] {
+  [editing] {
     background-color: var(--grid-record-editing-background-color);
   }
 
@@ -44,25 +46,25 @@ export const dataGridBodyStyle = css`
     :host {
       grid-template-columns: var(--grid-template-print-columns);
     }
-    :host > [focused] {
+    [focused] {
       border: none;
     }
 
-    :host > [selected-row] {
+    [selected-row] {
       background-color: transparent;
     }
 
-    :host > [emphasized-row] {
+    [emphasized-row] {
       background-color: transparent;
       color: initial;
     }
 
-    :host > [focused-row] {
+    [focused-row] {
       background-color: transparent;
       color: initial;
     }
 
-    :host > [editing] {
+    [editing] {
       background-color: transparent;
     }
   }

package/client/data-grid/data-grid-body.js

@@ -1,14 +1,14 @@
-import { LitElement, html } from 'lit-element'
-import { supportsPassive } from '@things-factory/utils'
+import './data-grid-field'
+
+import { html, LitElement } from 'lit-element'
 import _ from 'underscore'
 
-import './data-grid-field'
+import { supportsPassive } from '@things-factory/utils'
 
-import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
+import { dataGridBodyStyle } from './data-grid-body-style'
 import { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'
 import { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'
-
-import { dataGridBodyStyle } from './data-grid-body-style'
+import { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'
 
 const THRESHOLD = 300
 const DATA_PADDING = 3
@@ -157,6 +157,12 @@ class DataGridBody extends LitElement {
     this.shadowRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))
 
     this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)
+
+    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')
+    this.style.setProperty(
+      '--focused-background-image',
+      `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>")`
+    )
   }
 
   _onWheelEvent(e) {

package/client/data-grid/data-grid-field.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { css, html, LitElement } from 'lit-element'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 

package/client/data-grist.js

@@ -1,12 +1,13 @@
-import { pulltorefresh } from '@things-factory/utils'
-import { css, html, LitElement } from 'lit-element'
-import { buildConfig } from './configure/config-builder'
 import './data-grid/data-grid'
 import './data-list/data-list'
-import { DataProvider } from './data-provider'
 
+import { LitElement, css, html } from 'lit-element'
+
+import { DataProvider } from './data-provider'
+import Headroom from '@operato/headroom'
 import { HeadroomStyles } from '@things-factory/styles'
-import Headroom from 'headroom.js'
+import { buildConfig } from './configure/config-builder'
+import { pulltorefresh } from '@things-factory/utils'
 
 const DEFAULT_DATA = {
   page: 1,

package/client/data-report.js

@@ -1,12 +1,12 @@
 import './data-report/data-report-component'
 
-import { css, html, LitElement } from 'lit-element'
-
-import { pulltorefresh } from '@things-factory/utils'
+import { LitElement, css, html } from 'lit-element'
 
+import { DataProvider } from './data-provider'
 import { buildColumn } from './configure/column-builder'
 import { buildConfig } from './configure/config-builder'
-import { DataProvider } from './data-provider'
+import { i18next } from '@things-factory/i18n-base'
+import { pulltorefresh } from '@things-factory/utils'
 
 const DEFAULT_DATA = {
   page: 1,
@@ -199,7 +199,16 @@ export class DataReport extends LitElement {
     var getColumnIndex = name => columns.filter(column => !column.hidden).findIndex(column => column.name == name)
 
     /* 그룹 토털 레코드를 추가한다. */
-    var groupFieldsForTotalRecord = [{ column: '*', title: 'grand total', align: 'right' } /* for total */, ...groups]
+    var groupFieldsForTotalRecord = [
+      {
+        column: '*',
+        title: i18next.exists('text.ox-data-report-grand-total')
+          ? i18next.t('text.ox-data-report-grand-total')
+          : 'grand total',
+        align: 'right'
+      } /* for total */,
+      ...groups
+    ]
     groupFieldsForTotalRecord = groupFieldsForTotalRecord.map(group => {
       return {
         ...group,
@@ -251,7 +260,9 @@ export class DataReport extends LitElement {
           {
             '*': {
               titleColumn: groupFieldsForTotalRecord[0].titleColumn,
-              value: 'grand total',
+              value: i18next.exists('text.ox-data-report-grand-total')
+                ? i18next.t('text.ox-data-report-grand-total')
+                : 'grand total',
               groupName: '*',
               row: 1,
               rowspan: 1,

package/client/editors/registry.js

@@ -1,18 +1,20 @@
+import { registerEditor as oxRegisterEditor, unregisterEditor as oxUnregisterEditor } from '@operato/data-grist'
+
 import {
-  TextInput,
+  CheckboxInput,
+  ColorInput,
+  DateInput,
+  DateTimeInput,
   EmailInput,
-  TelInput,
-  PasswordInput,
+  ImageInput,
+  MonthInput,
   NumberInput,
+  PasswordInput,
   Select,
-  CheckboxInput,
-  MonthInput,
-  WeekInput,
-  DateInput,
+  TelInput,
+  TextInput,
   TimeInput,
-  DateTimeInput,
-  ColorInput,
-  ImageInput
+  WeekInput
 } from './input-editors'
 
 var EDITORS = {
@@ -40,10 +42,12 @@ var EDITORS = {
 
 export function registerEditor(type, editor) {
   EDITORS[type] = editor
+  oxRegisterEditor(type, editor)
 }
 
 export function unregisterEditor(type) {
   delete EDITORS[type]
+  oxUnregisterEditor(type)
 }
 
 export function getEditors() {

package/client/renderers/registry.js

@@ -1,12 +1,14 @@
+import { registerRenderer as oxRegisterRenderer, unregisterRenderer as oxUnregisterRenderer } from '@operato/data-grist'
+
 import { BooleanRenderer } from './boolean-renderer'
-import { TextRenderer } from './text-renderer'
-import { PasswordRenderer } from './password-renderer'
-import { DateRenderer } from './date-renderer'
 import { ColorRenderer } from './color-renderer'
-import { ProgressRenderer } from './progress-renderer'
+import { DateRenderer } from './date-renderer'
+import { ImageRenderer } from './image-renderer'
 import { LinkRenderer } from './link-renderer'
+import { PasswordRenderer } from './password-renderer'
+import { ProgressRenderer } from './progress-renderer'
 import { SelectRenderer } from './select-renderer'
-import { ImageRenderer } from './image-renderer'
+import { TextRenderer } from './text-renderer'
 
 var RENDERERS = {
   string: TextRenderer,
@@ -33,10 +35,12 @@ var RENDERERS = {
 
 export function registerRenderer(type, renderer) {
   RENDERERS[type] = renderer
+  oxRegisterRenderer(type, renderer)
 }
 
 export function unregisterRenderer(type) {
   delete RENDERERS[type]
+  oxUnregisterRenderer(type)
 }
 
 export function getRenderers() {

package/client/themes/grist-theme.css

@@ -41,10 +41,10 @@ body {
   --grid-record-wide-fontsize: var(--fontsize-small);
   --grid-record-selected-background-color: #f1f8e9;
   --grid-record-selected-color: var(--grid-record-color);
-  --grid-record-focused-background-color: rgba(var(--primary-color-rgb), 0.15);
+  --grid-record-focused-background-color: rgba(var(--primary-color-rgb), 0.2);
   --grid-record-focused-border: 1px solid var(--primary-color);
   --grid-record-focused-cell-background-color: rgba(var(--primary-color-rgb), 0.25);
-  --grid-record-focused-cell-border: 1px solid rgba(var(--primary-color-rgb), 0.4);
+  --grid-record-focused-cell-border: 1px dashed var(--primary-color);
   --grid-record-focused-color: var(--grid-record-color);
   --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
   --grid-record-emphasized-background-color: var(--primary-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/grist-ui",
-  "version": "4.0.0-y.0",
+  "version": "4.0.7",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -24,11 +24,14 @@
     "migration:create": "node ../../node_modules/typeorm/cli.js migration:create -d ./server/migrations"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.22.1",
-    "@things-factory/styles": "^4.0.0-y.0",
-    "@things-factory/utils": "^4.0.0-y.0",
-    "lit-element": "^2.5.1",
+    "@material/mwc-icon": "^0.25.3",
+    "@operato/data-grist": "^0.2.28",
+    "@operato/headroom": "^0.2.26",
+    "@things-factory/i18n-base": "^4.0.7",
+    "@things-factory/styles": "^4.0.7",
+    "@things-factory/utils": "^4.0.7",
+    "lit": "^2.0.2",
     "underscore": "^1.11.0"
   },
-  "gitHead": "64ee0f6547f90b1386024b975efc3b31a5e381cb"
+  "gitHead": "035fa60359aefa9b9111f807fc7e8db6a15a4a6e"
 }

package/translations/en.json

@@ -1,3 +1,3 @@
 {
-  "label.module": "module"
-}
+  "text.ox-data-report-grand-total": "grand total"
+}

package/translations/ko.json

@@ -1,3 +1,3 @@
 {
-  "label.module": "모듈"
-}
+  "text.ox-data-report-grand-total": "총합계"
+}

package/translations/zh.json

@@ -1,3 +1,3 @@
 {
-  "label.module": "模块"
-}
+  "text.ox-data-report-grand-total": "[zh] grand total"
+}