@operato/data-grist 2.0.0-beta.8 → 7.0.0-rc.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-beta.8",
+  "version": "7.0.0-rc.0",
   "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.8",
-    "@operato/p13n": "^2.0.0-beta.7",
-    "@operato/popup": "^2.0.0-beta.5",
-    "@operato/pull-to-refresh": "^2.0.0-beta.0",
-    "@operato/styles": "^2.0.0-beta.5",
-    "@operato/time-calculator": "^2.0.0-beta.0",
-    "@operato/utils": "^2.0.0-beta.0",
-    "i18next": "^21.5.4",
+    "@material/web": "^1.5.0",
+    "@operato/headroom": "^7.0.0-rc.0",
+    "@operato/input": "^7.0.0-rc.0",
+    "@operato/p13n": "^7.0.0-rc.0",
+    "@operato/popup": "^7.0.0-rc.0",
+    "@operato/pull-to-refresh": "^7.0.0-rc.0",
+    "@operato/styles": "^7.0.0-rc.0",
+    "@operato/time-calculator": "^7.0.0-rc.0",
+    "@operato/utils": "^7.0.0-rc.0",
+    "i18next": "^21.6.3",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
@@ -106,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "19f578277c1240817c46d0eeea6c8e5ed84e8322"
+  "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1"
 }

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
+            (typeof((column.filter as FilterConfigObject).value) === 'boolean' || (column.filter as FilterConfigObject).value)
         )
         .map(column => {
           const filter = column.filter as FilterConfigObject

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

@@ -40,6 +40,10 @@ const STYLE = css`
     display: none;
   }
 
+  :host > input {
+    color: var(--md-sys-color-on-background);
+  }
+
   :host > input[type='checkbox'] {
     width: initial;
     margin: 0;

package/src/filters/filter-checkbox.ts

@@ -16,12 +16,19 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
         ? label.renderer(column)
         : header.renderer(column) || name
 
+  // 텍스트 형태로 받았을시 의도가 boolean이면 boolean 타입으로 변환
+  if (value === 'false') {
+    value = false;
+  } else if (value === 'true') {
+    value = true;
+  }
+
   return html`
     <ox-checkbox
       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
                 >
@@ -126,7 +126,8 @@ export class OxGristFilterPersonalizer extends LitElement {
             styles: css`
               :host {
                 width: 240px;
-                max-height: 300px;
+                min-height: 300px;
+                max-height: 80%;
                 overflow: auto;
               }
 

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,9 @@ 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
                 >
@@ -122,7 +155,8 @@ export class OxGristPersonalizer extends LitElement {
             styles: css`
               :host {
                 width: 240px;
-                max-height: 300px;
+                min-height: 300px;
+                max-height: 80%;
                 overflow: auto;
               }
 

package/src/record-view/record-creator.ts

@@ -16,6 +16,7 @@ export class RecordCreator extends LitElement {
 
   @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean
   @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false
+  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false
 
   constructor() {
     super()
@@ -101,7 +102,8 @@ export class RecordCreator extends LitElement {
           }}
         ></ox-record-view>
       `,
-      parent: document.body
+      parent: document.body,
+      preventCloseOnBlur: this.preventCloseOnBlur
     })
   }
 

package/src/record-view/record-view-body.ts

@@ -15,7 +15,7 @@ export class RecordViewBody extends LitElement {
     css`
       :host {
         display: grid;
-        grid-template-columns: 33% 67%;
+        grid-template-columns: 2fr 3fr 2fr 3fr;
         grid-auto-rows: min-content;
         grid-gap: var(--record-view-gap);
         padding: var(--record-view-padding);
@@ -54,7 +54,7 @@ export class RecordViewBody extends LitElement {
         border-bottom: var(--record-view-border-bottom);
         font: var(--record-view-font);
         color: var(--record-view-color);
-        background-color: transparent;
+        background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-variant));
       }
 
       ox-grid-field[editing='true'] {
@@ -65,6 +65,18 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-focus-color);
         font-weight: bold;
       }
+
+      @media only screen and (max-width: 460px) {
+        :host {
+          grid-template-columns: 2fr 3fr;
+        }
+      }
+
+      @media (min-width: 1200px) {
+        :host {
+          grid-template-columns: 2fr 3fr 2fr 3fr 2fr 3fr;
+        }
+      }
     `
   ]
 

package/src/record-view/record-view.ts

@@ -54,9 +54,8 @@ export class RecordView extends LitElement {
       }
 
       [footer] button md-icon {
-        margin-top: -3px;
-        margin-right: 5px;
-        font-size: var(--record-view-footer-iconbutton-size);
+        --md-icon-size: var(--record-view-footer-iconbutton-size);
+        margin-right: var(--spacing-small, 4px);
       }
 
       [footer] button[ok] {

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/click-event.stories.ts

@@ -6,12 +6,9 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
-import {
-  FetchHandler,
-  FetchOption,
-  GristEventHandler,
-} from '../src/types.js'
+import { FetchHandler, FetchOption, GristEventHandler } from '../src/types.js'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -60,10 +57,14 @@ const config = {
       icon: 'add',
       title: 'add',
       handlers: {
-        click: ((columns, data, column, record, rowIndex, target, e) => console.log('column - clicked')) as GristEventHandler,
-        dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('column - dblclicked')) as GristEventHandler,
-        contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('column - contextmenued')) as GristEventHandler,
-        focus: ((columns, data, column, record, rowIndex, target, e) => console.log('column - focused')) as GristEventHandler,
+        click: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - clicked')) as GristEventHandler,
+        dblclick: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - dblclicked')) as GristEventHandler,
+        contextmenu: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - contextmenued')) as GristEventHandler,
+        focus: ((columns, data, column, record, rowIndex, target, e) =>
+          console.log('column - focused')) as GristEventHandler
       }
     },
     {
@@ -162,11 +163,14 @@ const config = {
       multiple: false
     },
     handlers: {
-      click: ((columns, data, column, record, rowIndex, target, e) => console.log('row - clicked')) as GristEventHandler,
-      dblclick: ((columns, data, column, record, rowIndex, target, e) => console.log('row - dblclicked')) as GristEventHandler,
-      contextmenu: ((columns, data, column, record, rowIndex, target, e) => console.log('row - contextmenued')) as GristEventHandler,
-      focus: ((columns, data, column, record, rowIndex, target, e) => console.log('row - focused')) as GristEventHandler,
-  },
+      click: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - clicked')) as GristEventHandler,
+      dblclick: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - dblclicked')) as GristEventHandler,
+      contextmenu: ((columns, data, column, record, rowIndex, target, e) =>
+        console.log('row - contextmenued')) as GristEventHandler,
+      focus: ((columns, data, column, record, rowIndex, target, e) => console.log('row - focused')) as GristEventHandler
+    },
     accumulator: true
   },
   sorters: [
@@ -187,7 +191,9 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
-    withoutSearch: { control: 'boolean' }
+    withoutSearch: { control: 'boolean' },
+    preventCloseOnBlur: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -199,10 +205,12 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
-  mode: 'GRID'|'LIST'|'CARD'
+  mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
   withoutSearch: boolean
+  preventCloseOnBlur: boolean
   fetchHandler: FetchHandler
+  theme: 'light' | 'dark'
 }
 
 const Template: Story<ArgTypes> = ({
@@ -210,9 +218,18 @@ const Template: Story<ArgTypes> = ({
   mode = 'GRID',
   urlParamsSensitive = false,
   withoutSearch = false,
-  fetchHandler
+  preventCloseOnBlur = false,
+  fetchHandler,
+  theme = 'light'
 }: ArgTypes) =>
-  html` <link
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -225,15 +242,19 @@ const Template: Story<ArgTypes> = ({
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -254,7 +275,7 @@ const Template: Story<ArgTypes> = ({
       <div slot="headroom" class="header">
         <div class="filters">
           <ox-filters-form ?without-search=${withoutSearch} autofocus></ox-filters-form>
-          <ox-record-creator id="add" light-popup>
+          <ox-record-creator id="add" light-popup ?prevent-close-on-blur=${preventCloseOnBlur}>
             <button><md-icon>add</md-icon></button>
           </ox-record-creator>
         </div>

package/stories/creatable-only-column.stories.ts

@@ -156,6 +156,7 @@ export default {
   component: 'ox-grist',
   argTypes: {
     headerFilter: { control: 'boolean' },
+    preventCloseOnBlur: { control: 'boolean' },
     theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
@@ -168,10 +169,11 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  preventCloseOnBlur: boolean
   theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes) =>
+const Template: Story<ArgTypes> = ({ headerFilter, preventCloseOnBlur, theme = 'light' }: ArgTypes) =>
   html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
     <link href="/themes/light.css" rel="stylesheet" />
@@ -246,7 +248,7 @@ const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: ArgTypes)
             </ox-popup>
           </div>
 
-          <ox-record-creator id="add" light-popup>
+          <ox-record-creator id="add" light-popup ?prevent-close-on-blur=${preventCloseOnBlur}>
             <button><md-icon>add</md-icon></button>
           </ox-record-creator>
         </div>

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

@@ -50,11 +50,9 @@ body {
   --grid-record-wide-fontsize: var(--md-sys-typescale-label-medium-size, 0.75rem);
   --grid-record-selected-background-color: var(--md-sys-color-primary-container);
   --grid-record-selected-color: var(--md-sys-color-on-primary-container);
-  --grid-record-focused-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
   --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-cell-border: 1px dashed var(--md-sys-color-outline);
-  --grid-record-focused-color: var(--md-sys-color-secondary);
   --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
   --grid-record-emphasized-background-color: var(--md-sys-color-secondary-fixed-dim);
   --grid-record-emphasized-color: var(--md-sys-color-on-secondary-fixed-variant);

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": "カウント",