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

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