@operato/data-grist 0.2.50 → 0.3.2

package/src/data-card/record-card.ts

@@ -2,12 +2,13 @@ import '@material/mwc-icon'
 import './data-card-field'
 import '../record-view'
 import './data-card-gutter'
+import './data-card-gutter-menu'
 
-import { GristConfig, GristData, GristRecord } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'
+import { GristConfig, GristData, GristRecord } from '../types'
 import { recordCardClickHandler } from './event-handlers/record-card-click-handler'
 import { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'
 
@@ -61,11 +62,12 @@ export class RecordCard extends LitElement {
 
       [thumbnail] {
         width: 100%;
-        max-height: var(--data-card-thumbnail-height);
+        height: var(--data-card-thumbnail-height);
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
         border-bottom: var(--data-card-thumbnail-border-bottom);
         overflow: hidden;
+        align-self: center;
       }
 
       [content] {
@@ -77,21 +79,18 @@ export class RecordCard extends LitElement {
         margin: var(--data-card-item-margin);
       }
 
-      [gutters] {
-        width: 50px;
-        grid-area: gutters;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-
-        position: relative;
-      }
       [brief] {
         grid-area: brief;
+        overflow: hidden;
+      }
+
+      [gutters] {
+        grid-area: gutters;
       }
+
       [detail] {
         grid-area: detail;
+        overflow: hidden;
       }
 
       ox-card-gutter {
@@ -137,6 +136,8 @@ export class RecordCard extends LitElement {
   @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false
 
   private _recordView: any
+  private clickHandler = recordCardClickHandler.bind(this) as EventListener
+  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener
 
   attributeChangedCallback(name: string, oldval: any, newval: any) {
     super.attributeChangedCallback(name, oldval, newval)
@@ -175,8 +176,8 @@ export class RecordCard extends LitElement {
     */
     // longpressable(this.renderRoot.querySelector('[content]'))
     // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
-    this.renderRoot.addEventListener('click', recordCardClickHandler.bind(this) as EventListener)
-    this.renderRoot.addEventListener('dblclick', recordCardDblClickHandler.bind(this) as EventListener)
+    this.renderRoot.addEventListener('click', this.clickHandler)
+    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)
   }
 
   updated(changes: PropertyValues<this>) {
@@ -243,7 +244,13 @@ export class RecordCard extends LitElement {
               `
             : gutters.length > 2
             ? html`
-                <ox-card-gutter-menu .gutters=${gutters} .rowIndex=${rowIndex} .record=${record}></ox-card-gutter-menu>
+                <ox-card-gutter-menu
+                  .gutters=${gutters}
+                  .rowIndex=${rowIndex}
+                  .record=${record}
+                  .clickHandler=${this.clickHandler}
+                  .dblclickHandler=${this.dblclickHandler}
+                ></ox-card-gutter-menu>
               `
             : html``}
         </div>

package/src/data-grid/data-grid-header.ts

@@ -1,15 +1,16 @@
-import '@operato/popup'
+import '@operato/popup/ox-popup.js'
 import '@material/mwc-icon'
 
-import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import throttle from 'lodash-es/throttle'
 
-import { FilterStyles } from '../filters/filter-styles'
 import { OxPopup } from '@operato/popup'
+
+import { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
+import { FilterStyles } from '../filters/filter-styles'
 import { getRenderer } from '../filters/registry'
-import throttle from 'lodash-es/throttle'
+import { ColumnConfig, GristConfig, GristData, SortersConfig } from '../types'
 
 @customElement('ox-grid-header')
 export class DataGridHeader extends LitElement {

package/src/data-grid/data-grid.ts

@@ -25,7 +25,6 @@ export class DataGrid extends LitElement {
 
         overflow: hidden;
 
-        border: var(--grid-container-border-color);
         border-width: var(--grid-container-border-width);
       }
 

package/src/data-list/data-list.ts

@@ -6,8 +6,6 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'
 import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'
-import { dataListClickHandler } from './event-handlers/data-list-click-handler'
-import { dataListDblclickHandler } from './event-handlers/data-list-dblclick-handler'
 
 @customElement('ox-list')
 export class DataList extends LitElement {
@@ -138,9 +136,6 @@ export class DataList extends LitElement {
 
       this.onRecordChanged(record['__origin__'], row, null)
     })
-
-    this.renderRoot.addEventListener('click', dataListClickHandler.bind(this) as EventListener)
-    this.renderRoot.addEventListener('dblclick', dataListDblclickHandler.bind(this) as EventListener)
   }
 
   onRecordChanged(

package/src/data-list/event-handlers/record-partial-click-handler.ts

@@ -1,5 +1,4 @@
-import { ColumnConfig, GristRecord } from '../../types'
-
+import { ColumnConfig } from '../../types'
 import { RecordPartial } from '../record-partial'
 
 /**
@@ -10,29 +9,28 @@ import { RecordPartial } from '../record-partial'
 export function recordPartialClickHandler(this: RecordPartial, e: MouseEvent): void {
   e.stopPropagation()
 
-  /* current-target should be [content] or 'ox-list-gutter' */
+  /* target should be [content] or 'ox-list-field' or 'ox-list-gutter' */
   var target = e.target as any
-  var { column, record, rowIndex, columnIndex } = target as {
+  var { column, rowIndex } = target as {
     column: ColumnConfig
-    record: GristRecord
     rowIndex: number
-    columnIndex: number
   }
 
-  if (column && column.type == 'gutter') {
-    /* Gutter가 클릭된 경우 */
-    /* do column click handler */
+  /* do column click handler */
+  if (column) {
     var { click } = column.handlers
-    click && click(this.config.columns, this.data, column, record, rowIndex, target)
+    if (click) {
+      click(this.config.columns, this.data, column, this.record, rowIndex, target)
+      return
+    }
+  }
 
-    return
+  /* do rows click handler */
+  var { click: rowsClick } = this.config.rows.handlers
+  if (rowsClick) {
+    rowsClick(this.config.columns, this.data, column, this.record, rowIndex, target)
   } else {
-    var { click: rowsClick } = this.config.rows.handlers
-    if (rowsClick) {
-      rowsClick(this.config.columns, this.data, column, record, rowIndex, target)
-    } else {
-      /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
-      this.popupRecordView()
-    }
+    /* content 가 클릭된 경우 - 레코드뷰 팝업을 실행한다. */
+    this.popupRecordView()
   }
 }

package/src/filters/filter-select.ts

@@ -1,8 +1,9 @@
-import '@operato/input/dist/src/ox-checkbox.js'
+import '@operato/input/ox-checkbox.js'
 
-import { FilterSelectRenderer } from '../types'
 import { html } from 'lit-html'
 
+import { FilterSelectRenderer } from '../types'
+
 export const FilterSelect: FilterSelectRenderer = (column, owner) => {
   const options = (typeof column.filter !== 'boolean' && column.filter?.options) || []
 

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './types'
+
 export * from './configure/zero-config'
 export * from './data-grist'
 export * from './data-report'

package/src/search-form/ox-select-field.ts

@@ -1,13 +1,14 @@
-import '@operato/popup'
+import '@operato/popup/ox-popup-list.js'
 import '@material/mwc-icon'
 
-import { CSSResult, TemplateResult, css, html } from 'lit'
-import { OXFieldOptionProps, OXSelectFieldProps } from '..'
+import { css, CSSResult, html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit-html/directives/if-defined.js'
 import { customElement, property } from 'lit/decorators.js'
 
-import { OXBasicField } from './ox-basic-field'
 import { OxPopupList } from '@operato/popup'
-import { ifDefined } from 'lit-html/directives/if-defined.js'
+
+import { OXFieldOptionProps, OXSelectFieldProps } from '../index.js'
+import { OXBasicField } from './ox-basic-field.js'
 
 @customElement('ox-select-field')
 export class OXSelectField extends OXBasicField {

package/src/types.ts

@@ -23,7 +23,7 @@ export type FilterConfig = { type: string; options?: { [key: string]: any } } |
 export type PaginationConfig = {
   page?: number
   limit?: number
-  pages: number[]
+  pages?: number[]
   infinite?: boolean
 }
 

package/tsconfig.json

@@ -10,6 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "outDir": "dist",
     "sourceMap": true,
@@ -19,5 +20,6 @@
     "incremental": true,
     "types": ["node", "mocha"]
   },
-  "include": ["**/*.ts", "*.d.ts"]
+  "include": ["**/*.ts", "*.d.ts"],
+  "exclude": ["dist", "node_modules"]
 }

package/dist/src/data-card/event-handlers/data-card-click-handler.d.ts

@@ -1,6 +0,0 @@
-/**
- * ox-card 의 click handler
- *
- * - handler의 this 는 ox-card임.
- */
-export declare function dataCardClickHandler(e: MouseEvent): void;

package/dist/src/data-card/event-handlers/data-card-click-handler.js

@@ -1,16 +0,0 @@
-/**
- * ox-card 의 click handler
- *
- * - handler의 this 는 ox-card임.
- */
-export function dataCardClickHandler(e) {
-    e.stopPropagation();
-    /* target should be 'ox-record-card' */
-    var target = e.target;
-    var { record, rowIndex } = target;
-    /* do rows click handler */
-    // var { click: rowsClick } = this.config.rows.handlers
-    // var columns = this.config.columns
-    // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
-}
-//# sourceMappingURL=data-card-click-handler.js.map

package/dist/src/data-card/event-handlers/data-card-click-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-card-click-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/data-card-click-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,CAAa;IAChD,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uCAAuC;IACvC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IACtC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAEjC,2BAA2B;IAC3B,uDAAuD;IACvD,oCAAoC;IACpC,0FAA0F;AAC5F,CAAC","sourcesContent":["import { DataCardField } from '../data-card-field'\n\n/**\n * ox-card 의 click handler\n *\n * - handler의 this 는 ox-card임.\n */\nexport function dataCardClickHandler(e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-record-card' */\n  var target = e.target as DataCardField\n  var { record, rowIndex } = target\n\n  /* do rows click handler */\n  // var { click: rowsClick } = this.config.rows.handlers\n  // var columns = this.config.columns\n  // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)\n}\n"]}

package/dist/src/data-card/event-handlers/data-card-dblclick-handler.d.ts

@@ -1,6 +0,0 @@
-/**
- * ox-card 의 dblclick handler
- *
- * - handler의 this 는 ox-card임.
- */
-export declare function dataCardDblclickHandler(e: MouseEvent): void;

package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js

@@ -1,16 +0,0 @@
-/**
- * ox-card 의 dblclick handler
- *
- * - handler의 this 는 ox-card임.
- */
-export function dataCardDblclickHandler(e) {
-    e.stopPropagation();
-    /* target should be 'ox-record-card' */
-    var target = e.target;
-    var { record, rowIndex } = target;
-    /* do rows dblclick handler */
-    // var { click: rowsDblclick } = this.config.rows.handlers
-    // var columns = this.config.columns
-    // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
-}
-//# sourceMappingURL=data-card-dblclick-handler.js.map

package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-card-dblclick-handler.js","sourceRoot":"","sources":["../../../../src/data-card/event-handlers/data-card-dblclick-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,CAAa;IACnD,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uCAAuC;IACvC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IACtC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAEjC,8BAA8B;IAC9B,0DAA0D;IAC1D,oCAAoC;IACpC,gGAAgG;AAClG,CAAC","sourcesContent":["import { DataCardField } from '../data-card-field'\n\n/**\n * ox-card 의 dblclick handler\n *\n * - handler의 this 는 ox-card임.\n */\nexport function dataCardDblclickHandler(e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-record-card' */\n  var target = e.target as DataCardField\n  var { record, rowIndex } = target\n\n  /* do rows dblclick handler */\n  // var { click: rowsDblclick } = this.config.rows.handlers\n  // var columns = this.config.columns\n  // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)\n}\n"]}

package/dist/src/data-list/event-handlers/data-list-click-handler.d.ts

@@ -1,6 +0,0 @@
-/**
- * ox-list 의 click handler
- *
- * - handler의 this 는 ox-list임.
- */
-export declare function dataListClickHandler(e: MouseEvent): void;

package/dist/src/data-list/event-handlers/data-list-click-handler.js

@@ -1,16 +0,0 @@
-/**
- * ox-list 의 click handler
- *
- * - handler의 this 는 ox-list임.
- */
-export function dataListClickHandler(e) {
-    e.stopPropagation();
-    /* target should be 'record-partial' */
-    var target = e.target;
-    var { record, rowIndex } = target;
-    /* do rows click handler */
-    // var { click: rowsClick } = this.config.rows.handlers
-    // var columns = this.config.columns
-    // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
-}
-//# sourceMappingURL=data-list-click-handler.js.map

package/dist/src/data-list/event-handlers/data-list-click-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-list-click-handler.js","sourceRoot":"","sources":["../../../../src/data-list/event-handlers/data-list-click-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,CAAa;IAChD,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uCAAuC;IACvC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IACtC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAEjC,2BAA2B;IAC3B,uDAAuD;IACvD,oCAAoC;IACpC,0FAA0F;AAC5F,CAAC","sourcesContent":["import { DataListField } from '../data-list-field'\n\n/**\n * ox-list 의 click handler\n *\n * - handler의 this 는 ox-list임.\n */\nexport function dataListClickHandler(e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be 'record-partial' */\n  var target = e.target as DataListField\n  var { record, rowIndex } = target\n\n  /* do rows click handler */\n  // var { click: rowsClick } = this.config.rows.handlers\n  // var columns = this.config.columns\n  // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)\n}\n"]}

package/dist/src/data-list/event-handlers/data-list-dblclick-handler.d.ts

@@ -1,6 +0,0 @@
-/**
- * ox-list 의 dblclick handler
- *
- * - handler의 this 는 ox-list임.
- */
-export declare function dataListDblclickHandler(e: MouseEvent): void;

package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js

@@ -1,16 +0,0 @@
-/**
- * ox-list 의 dblclick handler
- *
- * - handler의 this 는 ox-list임.
- */
-export function dataListDblclickHandler(e) {
-    e.stopPropagation();
-    /* target should be 'record-partial' */
-    var target = e.target;
-    var { record, rowIndex } = target;
-    /* do rows dblclick handler */
-    // var { click: rowsDblclick } = this.config.rows.handlers
-    // var columns = this.config.columns
-    // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
-}
-//# sourceMappingURL=data-list-dblclick-handler.js.map

package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-list-dblclick-handler.js","sourceRoot":"","sources":["../../../../src/data-list/event-handlers/data-list-dblclick-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,CAAa;IACnD,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uCAAuC;IACvC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IACtC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAEjC,8BAA8B;IAC9B,0DAA0D;IAC1D,oCAAoC;IACpC,gGAAgG;AAClG,CAAC","sourcesContent":["import { DataListField } from '../data-list-field'\n\n/**\n * ox-list 의 dblclick handler\n *\n * - handler의 this 는 ox-list임.\n */\nexport function dataListDblclickHandler(e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be 'record-partial' */\n  var target = e.target as DataListField\n  var { record, rowIndex } = target\n\n  /* do rows dblclick handler */\n  // var { click: rowsDblclick } = this.config.rows.handlers\n  // var columns = this.config.columns\n  // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)\n}\n"]}

package/src/data-card/event-handlers/data-card-click-handler.ts

@@ -1,19 +0,0 @@
-import { DataCardField } from '../data-card-field'
-
-/**
- * ox-card 의 click handler
- *
- * - handler의 this 는 ox-card임.
- */
-export function dataCardClickHandler(e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be 'ox-record-card' */
-  var target = e.target as DataCardField
-  var { record, rowIndex } = target
-
-  /* do rows click handler */
-  // var { click: rowsClick } = this.config.rows.handlers
-  // var columns = this.config.columns
-  // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
-}

package/src/data-card/event-handlers/data-card-dblclick-handler.ts

@@ -1,19 +0,0 @@
-import { DataCardField } from '../data-card-field'
-
-/**
- * ox-card 의 dblclick handler
- *
- * - handler의 this 는 ox-card임.
- */
-export function dataCardDblclickHandler(e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be 'ox-record-card' */
-  var target = e.target as DataCardField
-  var { record, rowIndex } = target
-
-  /* do rows dblclick handler */
-  // var { click: rowsDblclick } = this.config.rows.handlers
-  // var columns = this.config.columns
-  // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
-}

package/src/data-list/event-handlers/data-list-click-handler.ts

@@ -1,19 +0,0 @@
-import { DataListField } from '../data-list-field'
-
-/**
- * ox-list 의 click handler
- *
- * - handler의 this 는 ox-list임.
- */
-export function dataListClickHandler(e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be 'record-partial' */
-  var target = e.target as DataListField
-  var { record, rowIndex } = target
-
-  /* do rows click handler */
-  // var { click: rowsClick } = this.config.rows.handlers
-  // var columns = this.config.columns
-  // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
-}

package/src/data-list/event-handlers/data-list-dblclick-handler.ts

@@ -1,19 +0,0 @@
-import { DataListField } from '../data-list-field'
-
-/**
- * ox-list 의 dblclick handler
- *
- * - handler의 this 는 ox-list임.
- */
-export function dataListDblclickHandler(e: MouseEvent): void {
-  e.stopPropagation()
-
-  /* target should be 'record-partial' */
-  var target = e.target as DataListField
-  var { record, rowIndex } = target
-
-  /* do rows dblclick handler */
-  // var { click: rowsDblclick } = this.config.rows.handlers
-  // var columns = this.config.columns
-  // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
-}