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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.31",
   "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.31",
+    "@operato/p13n": "^2.0.0-beta.31",
+    "@operato/popup": "^2.0.0-beta.31",
+    "@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": "beb2772f3deb798c8b875a4dc0967fb47ca5390a"
 }

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/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',