@things-factory/grist-ui 4.2.12 → 4.3.0

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

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const dataGridBodyStyle = css`
   :host {

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

@@ -1,7 +1,7 @@
 import './data-grid-field'
 
-import { html, LitElement } from 'lit-element'
-import _ from 'underscore'
+import { html, LitElement } from 'lit'
+import debounce from 'lodash-es/debounce'
 
 import { supportsPassive } from '@things-factory/utils'
 
@@ -30,7 +30,7 @@ function calcScrollPos(parent, child) {
 }
 
 class DataGridBody extends LitElement {
-  debounce = _.debounce((scrollTop, clientHeight) => {
+  debounce = debounce((scrollTop, clientHeight) => {
     const maxVisibleRows = Math.ceil(clientHeight / (ROW_HEIGHT + GAP_SIZE))
     const from = Math.max(0, Math.floor(scrollTop / (ROW_HEIGHT + GAP_SIZE)) - maxVisibleRows * DATA_PADDING)
     const to = Math.min(this.data.records.length, from + maxVisibleRows * (DATA_PADDING * 2 + 1))

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

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

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 import '@material/mwc-icon'
 
@@ -93,11 +93,7 @@ class DataGridFooter extends LitElement {
       <span class="filler"></span>
 
       <span class="limit">
-        ${pages.map(
-          size => html`
-            <a ?selected=${limit == size} @click=${e => this._changeLimit(size)}>${size}</a>
-          `
-        )}
+        ${pages.map(size => html` <a ?selected=${limit == size} @click=${e => this._changeLimit(size)}>${size}</a> `)}
         records
       </span>
       <span>&nbsp;</span>

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

@@ -1,6 +1,7 @@
-import { LitElement, html, css } from 'lit-element'
+import { css, html, LitElement } from 'lit'
+import throttle from 'lodash-es/throttle'
+
 import { supportsPassive } from '@things-factory/utils'
-import throttle from 'lodash/throttle'
 
 class DataGridHeader extends LitElement {
   static get properties() {

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import { ScrollbarStyles } from '@things-factory/styles'
 
 import './data-grid-header'

package/client/data-grist.js

@@ -1,7 +1,7 @@
 import './data-grid/data-grid'
 import './data-list/data-list'
 
-import { LitElement, css, html } from 'lit-element'
+import { LitElement, css, html } from 'lit'
 
 import { DataProvider } from './data-provider'
 import Headroom from '@operato/headroom'

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 class DataListField extends LitElement {
   static get properties() {

package/client/data-list/data-list-gutter.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
@@ -28,7 +28,7 @@ class DataListGutter extends LitElement {
 
           font-size: var(--grid-record-wide-fontsize);
           text-overflow: ellipsis;
-          color:var(--grid-record-color);
+          color: var(--grid-record-color);
         }
 
         * {
@@ -57,9 +57,7 @@ class DataListGutter extends LitElement {
     var { renderer } = column.record
 
     /* renderer가 html template이 아니고 단순한 값인 경우가 있으므로, html 템플릿으로 감싸준다. */
-    return html`
-      ${renderer(value, column, record, rowIndex, this)}
-    `
+    return html` ${renderer(value, column, record, rowIndex, this)} `
   }
 
   updated(changes) {

package/client/data-list/data-list.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import '@material/mwc-icon'
 import './record-partial'
 

package/client/data-list/record-partial.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 // import { longpressable } from '@things-factory/utils'
 import '@material/mwc-icon'
 

package/client/data-provider.js

@@ -1,5 +1,6 @@
-import isEqual from 'lodash/isEqual'
-import isEmpty from 'lodash/isEmpty'
+import isEmpty from 'lodash-es/isEmpty'
+import isEqual from 'lodash-es/isEqual'
+
 import { NOOP } from './const'
 
 function _calculateTotalPage(limit, total) {

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

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const dataReportBodyStyle = css`
   :host {

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

@@ -1,6 +1,6 @@
 import './data-report-field'
 
-import { html, LitElement } from 'lit-element'
+import { html, LitElement } from 'lit'
 
 import { dataReportBodyStyle } from './data-report-body-style'
 import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler'

package/client/data-report/data-report-component.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import { ScrollbarStyles } from '@things-factory/styles'
 
 import './data-report-header'

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
@@ -61,9 +61,7 @@ class DataReportField extends LitElement {
     var { value, column, record, rowIndex } = this
     var { renderer } = column.record
 
-    return html`
-      ${renderer(value, column, record, rowIndex, this)}
-    `
+    return html` ${renderer(value, column, record, rowIndex, this)} `
   }
 
   updated(changes) {

package/client/data-report/data-report-header.js

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from 'lit-element'
-import throttle from 'lodash/throttle'
+import { css, html, LitElement } from 'lit'
+import throttle from 'lodash-es/throttle'
+
 import { supportsPassive } from '@things-factory/utils'
 
 class DataReportHeader extends LitElement {

package/client/data-report.js

@@ -1,6 +1,6 @@
 import './data-report/data-report-component'
 
-import { LitElement, css, html } from 'lit-element'
+import { LitElement, css, html } from 'lit'
 
 import { DataProvider } from './data-provider'
 import { buildColumn } from './configure/column-builder'

package/client/editors/input-editors.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 const STYLE = css`
   :host {

package/client/gutters/gutter-button.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 import '@material/mwc-icon'
 
 export class GutterButton {

package/client/gutters/gutter-dirty.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import '@material/mwc-icon'
 
 class GutterDirtyElement extends LitElement {

package/client/gutters/gutter-row-selector.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element'
+import { html } from 'lit'
 
 export class GutterRowSelector {
   static instance(config = {}) {

package/client/record-view/record-view-body.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import '@material/mwc-icon'
 
 import '../data-grid/data-grid-field'
@@ -49,7 +49,7 @@ export class RecordViewBody extends LitElement {
       }
 
       data-grid-field[editing='true'] {
-        border-top:none;
+        border-top: none;
         border-bottom: var(--record-view-edit-border-bottom);
       }
 
@@ -112,7 +112,7 @@ export class RecordViewBody extends LitElement {
       target.setAttribute('editing', true)
     })
 
-    this._focusedListener = function(e) {
+    this._focusedListener = function (e) {
       var keyCode = e.keyCode
       switch (keyCode) {
         case KEY_ESC:
@@ -141,9 +141,7 @@ export class RecordViewBody extends LitElement {
     var { renderer } = column.header
     var title = renderer.call(this, column)
 
-    return html`
-      ${title}
-    `
+    return html` ${title} `
   }
 }
 

package/client/record-view/record-view.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 import '@material/mwc-icon'
 
 import './record-view-body'

package/client/renderers/progress-renderer.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { LitElement, html, css } from 'lit'
 
 class DataGristProgressRenderer extends LitElement {
   static get styles() {

package/client/themes/grist-theme.css

@@ -143,12 +143,15 @@ body {
   --record-view-footer-button-color: var(--theme-white-color);
   --record-view-footer-iconbutton-size: 35px;
   --record-view-footer-focus-background: var(--primary-color);
+
+  --ox-grist-padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
 }
 
 @media only screen and (max-width: 460px) {
   body {
     --record-view-label-font: bold 15px/32px var(--theme-font);
     --record-view-font: normal 15px/32px var(--theme-font);
+    --ox-grist-padding: 0;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/grist-ui",
-  "version": "4.2.12",
+  "version": "4.3.0",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -25,13 +25,14 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/data-grist": "^0.3.28",
-    "@operato/headroom": "^0.3.28",
-    "@things-factory/i18n-base": "^4.2.12",
-    "@things-factory/styles": "^4.1.40",
-    "@things-factory/utils": "^4.1.40",
-    "lit": "^2.0.2",
+    "@operato/data-grist": "^0.4.3",
+    "@operato/headroom": "^0.4.3",
+    "@things-factory/i18n-base": "^4.3.0",
+    "@things-factory/styles": "^4.3.0",
+    "@things-factory/utils": "^4.3.0",
+    "lit": "^2.2.0",
+    "lodash-es": "^4.17.15",
     "underscore": "^1.11.0"
   },
-  "gitHead": "fea26f2ea238a3a279c7ab6427cd8aedcd68926b"
+  "gitHead": "772c8e6f56a3dda655ad49f7018a49a37e081ee8"
 }