@operato/data-grist 0.2.49 → 0.3.1

package/src/data-card/data-card-gutter-menu.ts

@@ -1,11 +1,12 @@
 import '@material/mwc-icon'
-import './data-card-gutter'
+import './data-card-gutter.js'
 
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { OxPopupMenu } from '@operato/popup'
+import { OxPopup } from '@operato/popup'
+
+import { ColumnConfig, GristRecord } from '../types.js'
 
 @customElement('ox-card-gutter-menu')
 class DataCardGutterMenu extends LitElement {
@@ -14,20 +15,34 @@ class DataCardGutterMenu extends LitElement {
       position: relative;
     }
 
+    ::slotted(ox-popup) {
+      padding: 4px;
+    }
+
     mwc-icon {
       cursor: pointer;
+
+      flex: 1;
+      margin: 0;
+      margin-bottom: 1px;
+      border: var(--data-card-item-btn-border);
+      border-radius: var(--data-card-item-btn-border-radius);
+      padding: var(--data-card-item-btn-padding);
+      font-size: var(--grid-record-fontsize);
     }
   `
 
   @property({ type: Object }) gutters!: ColumnConfig[]
   @property({ type: Number }) rowIndex!: number
   @property({ type: Object }) record!: GristRecord
+  @property() clickHandler!: EventListener
+  @property() dblclickHandler!: EventListener
 
   @query('mwc-icon') icon!: Element
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => this.open()}>more_horiz</mwc-icon>
+      <mwc-icon @click=${(e: Event) => this.open(e)}>more_horiz</mwc-icon>
       <slot></slot>
     `
   }
@@ -43,20 +58,30 @@ class DataCardGutterMenu extends LitElement {
             .value=${this.record[gutter.name]}
             menu
             alive-on-select
+            @click=${(e: Event) => {
+              this.clickHandler(e)
+              // TODO close popup
+            }}
+            @dblclick=${(e: Event) => {
+              this.dblclickHandler(e)
+              // TODO close popup
+            }}
           ></ox-card-gutter>
         `
       )}
     `
   }
 
-  open() {
-    const top = 0
-    const left = (this.icon as HTMLElement).offsetWidth
+  open(e: Event) {
+    e.stopPropagation()
+
+    const bottom = (this.icon as HTMLElement).offsetHeight
+    const left = -4
     const parent = this
 
-    OxPopupMenu.open({
+    OxPopup.open({
       template: this.menuRender(),
-      top,
+      bottom,
       left,
       parent
     })

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

@@ -1,8 +1,9 @@
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
-import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
+import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
+import { ColumnConfig, GristRecord } from '../types'
+
 const DEFAULT_TEXT_ALIGN = 'left'
 
 @customElement('ox-card-gutter')
@@ -24,6 +25,7 @@ export class DataCardGutter extends LitElement {
         border: var(--data-card-item-btn-border);
         border-radius: var(--data-card-item-btn-border-radius);
         padding: var(--data-card-item-btn-padding);
+        font-size: var(--grid-record-fontsize);
       }
       *:hover {
         color: var(--grid-record-color-hover);

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

@@ -2,6 +2,7 @@ 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'
@@ -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,16 +79,6 @@ 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;
       }
@@ -137,6 +129,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 +169,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 +237,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/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,