@operato/data-grist 2.0.0-beta.3 → 2.0.0-beta.30

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.30",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
+  "operato": true,
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -17,6 +18,7 @@
   },
   "exports": {
     ".": "./dist/src/index.js",
+    "./package.json": "./package.json",
     "./ox-grist.js": "./dist/src/data-grist.js",
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
@@ -59,16 +61,16 @@
     "storybook:build": "tsc && build-storybook"
   },
   "dependencies": {
-    "@material/web": "^1.4.0",
-    "@operato/headroom": "^2.0.0-beta.0",
-    "@operato/input": "^2.0.0-beta.3",
-    "@operato/p13n": "^2.0.0-beta.3",
-    "@operato/popup": "^2.0.0-beta.0",
-    "@operato/pull-to-refresh": "^2.0.0-beta.0",
-    "@operato/styles": "^2.0.0-beta.0",
+    "@material/web": "^1.5.0",
+    "@operato/headroom": "^2.0.0-beta.23",
+    "@operato/input": "^2.0.0-beta.30",
+    "@operato/p13n": "^2.0.0-beta.30",
+    "@operato/popup": "^2.0.0-beta.30",
+    "@operato/pull-to-refresh": "^2.0.0-beta.23",
+    "@operato/styles": "^2.0.0-beta.23",
     "@operato/time-calculator": "^2.0.0-beta.0",
-    "@operato/utils": "^2.0.0-beta.0",
-    "i18next": "^21.5.4",
+    "@operato/utils": "^2.0.0-beta.23",
+    "i18next": "^21.6.3",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -106,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f784d266745412a10887dd5163da8c8d7a4fe423"
+  "gitHead": "b45f30f4c78bc715f5c5581cf97505b3b6372964"
 }

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

@@ -26,6 +26,8 @@ class DataCardGutterMenu extends LitElement {
       border-radius: var(--data-card-item-btn-border-radius);
       padding: var(--data-card-item-btn-padding);
       font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      background-color: transparent;
+      color: var(--grid-record-color);
     }
 
     md-icon:hover {

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

@@ -59,7 +59,7 @@ export class RecordCard extends LitElement {
         text-indent: 1px;
         left: var(--spacing-none);
         top: var(--spacing-none);
-        color: var(--grid-record-dirty-color);
+        color: var(--grid-record-dirty-color, var(--md-sys-color-error));
       }
 
       [thumbnail] {
@@ -102,17 +102,17 @@ export class RecordCard extends LitElement {
 
       ox-card-field {
         font: var(--data-card-item-etc-font);
-        color: var(--data-card-item-etc-color);
+        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));
       }
 
       ox-card-field[name] {
         font: var(--data-card-item-name-font);
-        color: var(--data-card-item-name-color);
+        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));
       }
 
       ox-card-field[desc] {
         font: var(--data-card-item-disc-font);
-        color: var(--data-card-item-disc-color);
+        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));
       }
     `
   ]

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

@@ -545,6 +545,10 @@ export class DataGridBody extends LitElement {
       const opacity = selectBlock.style.opacity
 
       selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')
+      const rect = selectBlock.getBoundingClientRect()
+      selectBlock.style.setProperty('--tooltip-top', `${rect.top}px`)
+      selectBlock.style.setProperty('--tooltip-left', `${rect.left}px`)
+
       selectBlock.style.backgroundColor = 'red'
       selectBlock.style.opacity = '0.5'
       await sleep(500)

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

@@ -3,10 +3,10 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { TooltipStyles } from '@operato/styles'
+import { TooltipReactiveController } from '@operato/utils'
 
 import { ZERO_COLUMN } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
-import { getRenderer } from '../renderers'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
@@ -103,6 +103,8 @@ export class DataGridField extends LitElement {
   private _onFieldChange: (e: Event) => void = e => {}
   private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   render(): TemplateResult {
     if (!this.column) {
       return html``

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

@@ -8,7 +8,7 @@ import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
-import { closestElement, detectOverflow } from '@operato/utils'
+import { TooltipReactiveController, closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
@@ -163,6 +163,8 @@ export class DataGridHeader extends LitElement {
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   connectedCallback() {
     super.connectedCallback()
 
@@ -232,19 +234,9 @@ export class DataGridHeader extends LitElement {
       >
         <span
           for-title
+          data-reactive-tooltip
           style="text-align:${align || column.record.align || 'left'};"
           @click=${(e: MouseEvent) => this._changeSort(column)}
-          @mouseover=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-
-            if (detectOverflow(element)) {
-              element.setAttribute('data-tooltip', element.textContent!.trim())
-            }
-          }}
-          @mouseout=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-            element.removeAttribute('data-tooltip')
-          }}
           >${this._renderHeader(column)}
         </span>
 

package/src/data-grist.ts

@@ -392,7 +392,7 @@ export class DataGrist extends LitElement implements DataConsumer {
           column =>
             column.filter &&
             'value' in (column.filter as FilterConfigObject) &&
-            (column.filter as FilterConfigObject).value
+            (column.filter as FilterConfigObject).value !== undefined
         )
         .map(column => {
           const filter = column.filter as FilterConfigObject

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

@@ -62,7 +62,7 @@ export class RecordPartial extends LitElement {
         text-indent: 1px;
         left: var(--spacing-none);
         top: var(--spacing-none);
-        color: var(--grid-record-dirty-color);
+        color: var(--grid-record-dirty-color, var(--md-sys-color-error));
       }
 
       [content] {
@@ -88,17 +88,17 @@ export class RecordPartial extends LitElement {
 
       ox-list-field {
         font: var(--data-list-item-etc-font);
-        color: var(--data-list-item-etc-color);
+        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));
       }
 
       ox-list-field[name] {
         font: var(--data-list-item-name-font);
-        color: var(--data-list-item-name-color);
+        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));
       }
 
       ox-list-field[desc] {
         font: var(--data-list-item-disc-font);
-        color: var(--data-list-item-disc-color);
+        color: var(--data-list-item-disc-color, var(--md-sys-color-tertiary));
       }
     `
   ]

package/src/editors/ox-grist-editor-date.ts

@@ -5,6 +5,6 @@ import { html } from 'lit'
 @customElement('ox-grist-editor-date')
 export class OxGristEditorDate extends OxGristEditor {
   get editorTemplate() {
-    return html` <input type="date" .value=${this.value} /> `
+    return html` <input type="date" .value=${this.value} max="9999-12-31" /> `
   }
 }

package/src/editors/ox-grist-editor-datetime.ts

@@ -22,6 +22,6 @@ export class OxGristEditorDateTime extends OxGristEditor {
   }
 
   get editorTemplate() {
-    return html` <input type="datetime-local" .value=${this.value} /> `
+    return html` <input type="datetime-local" .value=${this.value} max="9999-12-31T23:59" /> `
   }
 }

package/src/filters/filter-checkbox.ts

@@ -21,7 +21,7 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
       name=${column.name}
       ?checked=${value}
       indeterminatable
-      ?indeterminate=${value == null}
+      ?indeterminate=${value === undefined}
       left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(

package/src/personalizer/ox-grist-filter-personalizer.ts

@@ -107,7 +107,7 @@ export class OxGristFilterPersonalizer extends LitElement {
             ${this.preference?.filters!.map(
               filter => html`
                 <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
-                  >${filter.name}<span style="position: absolute; right: 10px; cursor: move;" handle
+                  >${filter.name}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
                     >☰</span
                   ></ox-checkbox
                 >

package/src/personalizer/ox-grist-personalizer.ts

@@ -22,10 +22,11 @@ export class OxGristPersonalizer extends LitElement {
         background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
         border-radius: 0px 0px 7px 7px;
         cursor: pointer;
+        padding-top:var(--spacing-small);
 
         &:hover {
-          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-primary));
-          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-on-primary));
+          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));
+          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));
         }
       }
     `
@@ -69,8 +70,18 @@ export class OxGristPersonalizer extends LitElement {
 
           const template = html`
             <div class="personalizer-header" slot="header">
-              <md-icon
-                style="margin-left: auto;"
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 auto;
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
                     const { mode, columns, sorters, pagination } = this.preference || {}
@@ -83,9 +94,21 @@ export class OxGristPersonalizer extends LitElement {
                   }
                   popup.close()
                 }}
-                title=${String(i18next.t('button.save'))}
-                >keep</md-icon
-              ><md-icon
+              >
+                ${String(i18next.t('button.save'))}
+              </div>
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 var(--spacing-small, 4px);
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
                     grist.personalConfig = this.preference = {}
@@ -93,9 +116,17 @@ export class OxGristPersonalizer extends LitElement {
                   }
                   popup.close()
                 }}
-                title=${String(i18next.t('button.delete'))}
-                >keep_off</md-icon
-              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
+              >
+                ${String(i18next.t('button.delete'))}
+              </div>
+              <md-icon
+                style=${`
+                  --md-icon-size: 1.2em;
+                  margin-left: var(--spacing-tiny, 2px);
+                  cursor: pointer;
+                `}
+                @click=${async (e: MouseEvent) => popup.close()}
+                title=${String(i18next.t('button.close'))}
                 >close</md-icon
               >
             </div>
@@ -103,7 +134,7 @@ export class OxGristPersonalizer extends LitElement {
             ${columns.map(
               column => html`
                 <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
-                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: move;" handle
+                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
                     >☰</span
                   ></ox-checkbox
                 >

package/src/renderers/ox-grist-renderer-json5.ts

@@ -11,6 +11,10 @@ function onmouseover(e: Event) {
   } catch {}
 
   element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))
+
+  const rect = element.getBoundingClientRect()
+  element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)
+  element.style.setProperty('--tooltip-left', `${rect.left}px`)
 }
 
 function onmouseout(e: Event) {

package/src/renderers/ox-grist-renderer-text.ts

@@ -1,21 +1,9 @@
 import { html } from 'lit'
 
-import { detectOverflow, format as formatter } from '@operato/utils'
+import { format as formatter } from '@operato/utils'
 
 import { FieldRenderer } from '../types'
 
-function onmouseover(e: Event) {
-  const element = e.target as HTMLSpanElement
-  if (detectOverflow(element)) {
-    element.setAttribute('data-tooltip', element.textContent!)
-  }
-}
-
-function onmouseout(e: Event) {
-  const element = e.target as HTMLSpanElement
-  element.removeAttribute('data-tooltip')
-}
-
 export const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {
   var { format } = column.record || {}
 
@@ -24,5 +12,5 @@ export const OxGristRendererText: FieldRenderer = (value, column, record, rowInd
     text = formatter(format, text)
   }
 
-  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}&nbsp;</span>`
+  return html`<span data-reactive-tooltip>${text}&nbsp;</span>`
 }

package/stories/dynamic-editable.stories.ts

@@ -28,6 +28,8 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           number: idx,
           float: 1.3,
           date: '2023-09-20',
+          active: idx % 2 === 0,
+          role: 'admin',
           routing: {
             id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
             name: '조림>세척'
@@ -136,6 +138,40 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         header: 'date',
         width: 120
       },
+      {
+        type: 'boolean',
+        name: 'active',
+        header: 'active',
+        record: {
+          editable: true
+        },
+        filter: {
+          value: false
+        },
+        sortable: true,
+        width: 60
+      },
+      {
+        type: 'select',
+        name: 'role',
+        label: true,
+        header: 'role',
+        record: {
+          // options: ['', 'admin', 'worker', 'tester'],
+          options: [
+            { display: 'admin', value: 'admin' },
+            { display: 'worker', value: 'worker' },
+            { display: 'tester', value: 'tester' }
+          ],
+          editable: true
+        },
+        filter: {
+          operator: 'in',
+          value: ['worker']
+        },
+        sortable: true,
+        width: 120
+      },
       {
         type: 'object',
         name: 'routing',

package/stories/grid-setting.stories.ts

@@ -413,9 +413,14 @@ const Template: Story<ArgTypes> = ({
     </style>
 
     <style>
-      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;

package/themes/grist-theme.css

@@ -171,3 +171,7 @@ body {
     --data-card-create-form-padding: 7px;
   }
 }
+
+body.dark {
+  --grid-container-border-color: 1px solid rgba(255, 255, 255, 0.09);
+}

package/translations/en.json

@@ -1,4 +1,7 @@
 {
+  "button.save": "save",
+  "button.delete": "delete",
+
   "label.accumulator_sum": "sum",
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",

package/translations/ja.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "削除",
+  "button.save": "保存",
   "label.accumulator_sum": "合計",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",

package/translations/ko.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "삭제",
+  "button.save": "저장",
   "label.accumulator_sum": "합계",
   "label.accumulator_avg": "평균",
   "label.accumulator_count": "계수",

package/translations/ms.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "padam",
+  "button.save": "simpan",
   "label.accumulator_sum": "Jumlah",
   "label.accumulator_avg": "Purata",
   "label.accumulator_count": "Kiraan",

package/translations/zh.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "删除",
+  "button.save": "保存",
   "label.accumulator_sum": "总和",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "计数",