@operato/data-grist 7.0.60 → 7.0.65

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

@@ -26,31 +26,10 @@ export class RecordViewBody extends LitElement {
         padding: var(--spacing-large) var(--spacing-huge);
         font-size: 16px; /* for ios safari */
         flex: 1;
-        max-width: 1100px;
+        max-width: 1300px;
         box-sizing: border-box;
       }
 
-      @media only screen and (max-width: 600px) {
-        div[content] {
-          grid-template-columns: 2fr 3fr;
-          padding: var(--spacing-medium);
-        }
-      }
-
-      @media only screen and (min-width: 1200px) {
-        div[content] {
-          grid-template-columns: 1fr 3fr 1fr 3fr;
-        }
-      }
-
-      @media only screen and (min-width: 1600px) {
-        div[content] {
-          grid-template-columns: 1fr 3fr 1fr 3fr;
-          width: 95%;
-          margin: auto;
-        }
-      }
-
       label {
         display: flex;
         align-items: center;
@@ -63,6 +42,10 @@ export class RecordViewBody extends LitElement {
         padding-right: var(--spacing-large);
       }
 
+      label[wide] {
+        grid-column: 1 / 2;
+      }
+
       label md-icon {
         display: none;
       }
@@ -86,17 +69,57 @@ export class RecordViewBody extends LitElement {
         font: var(--record-view-font);
         color: var(--record-view-color);
 
-        max-width: 300px;
+        max-width: 360px;
       }
 
       ox-grid-field[editing='true'] {
         border: var(--record-view-edit-border);
       }
 
+      ox-grid-field[wide] {
+        grid-column: 2 / 5;
+        width: 100%;
+        max-width: unset;
+      }
+
       :first-child + ox-grid-field {
         color: var(--record-view-focus-color);
         font-weight: bold;
       }
+
+      @media only screen and (max-width: 600px) {
+        div[content] {
+          grid-template-columns: 2fr 3fr;
+          padding: var(--spacing-medium);
+        }
+
+        label[wide] {
+          grid-column: 1 / 2;
+        }
+
+        ox-grid-field[wide] {
+          grid-column: 1 / 3;
+          width: 100%;
+          max-width: unset;
+        }
+      }
+
+      @media only screen and (max-width: 1000px) {
+        div[content] {
+          grid-template-columns: 2fr 3fr;
+          padding: var(--spacing-medium);
+        }
+
+        label[wide] {
+          grid-column: 1 / 2;
+        }
+
+        ox-grid-field[wide] {
+          grid-column: 2 / 3;
+          width: 100%;
+          max-width: unset;
+        }
+      }
     `
   ]
 
@@ -145,7 +168,7 @@ export class RecordViewBody extends LitElement {
     return html`
       <div content>
         ${columns.map((column, index) => {
-          let { editable, mandatory } = column.record
+          let { editable, mandatory, wide } = column.record
           if (typeof editable === 'function') {
             editable = editable.call(this, record[column.name], column, record, rowIndex, this)
           }
@@ -153,9 +176,10 @@ export class RecordViewBody extends LitElement {
           let dirtyFields = record['__dirtyfields__'] || {}
 
           return html`
-            <label ?editable=${editable}
-              ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
-            >
+            <label ?editable=${editable} ?wide=${wide}>
+              <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
+              <md-icon>edit</md-icon>
+            </label>
             <ox-grid-field
               .rowIndex=${rowIndex}
               .column=${column}
@@ -163,6 +187,7 @@ export class RecordViewBody extends LitElement {
               .value=${record[column.name]}
               ?dirty=${!!dirtyFields[column.name]}
               ?tabstop=${!!editable}
+              ?wide=${wide}
             ></ox-grid-field>
           `
         })}

package/src/types.ts

@@ -501,6 +501,8 @@ export type DefaultValueFnConfig =
  * @property {DefaultValueFnConfig|undefined} [defaultValue] - Configuration for specifying the default value for the field.
  *                                                             It can be a predefined value generator function or a custom user-defined function (optional).
  * @property {Object.<string, *>|undefined} [extended] - Additional extended properties that can be added as needed for specific field configurations (optional).
+ * @property {boolean} [wide] - Specifies if the field should occupy a larger width within the viewer or editor.
+ *                              When set to `true`, the field will attempt to span across multiple columns or occupy more space horizontally.
  */
 export type RecordConfig = {
   renderer: FieldRenderer
@@ -512,6 +514,7 @@ export type RecordConfig = {
   options: any
   rowOptionField?: string
   defaultValue?: DefaultValueFnConfig
+  wide?: boolean
   [extended: string]: any
 }
 

package/stories/fixed-column.stories.ts

@@ -248,6 +248,9 @@ const config = {
       type: 'json5',
       name: 'json5',
       header: 'JSON5',
+      record: {
+        wide: true
+      },
       width: 200
     },
     {
@@ -255,7 +258,8 @@ const config = {
       name: 'thumbnail',
       header: 'thumbnail',
       record: {
-        editable: true
+        editable: true,
+        wide: true
       },
       width: 120
     },

package/stories/grid-setting.stories.ts

@@ -255,6 +255,9 @@ const config = {
       type: 'json5',
       name: 'json5',
       header: 'JSON5',
+      record: {
+        wide: true
+      },
       width: 200
     },
     {
@@ -262,7 +265,8 @@ const config = {
       name: 'thumbnail',
       header: 'thumbnail',
       record: {
-        editable: true
+        editable: true,
+        wide: true
       },
       width: 120
     },

package/stories/grist-modes.stories.ts

@@ -260,7 +260,8 @@ const config = {
       name: 'thumbnail',
       header: 'thumbnail',
       record: {
-        editable: true
+        editable: true,
+        wide: true
       },
       width: 120
     },

package/stories/group-header.stories.ts

@@ -284,7 +284,8 @@ const config = {
         group: '2023'
       },
       record: {
-        editable: true
+        editable: true,
+        wide: true
       },
       width: 120
     },

package/stories/record-view.stories.ts

@@ -0,0 +1,143 @@
+import '@material/web/icon/icon.js'
+import '../src/index.js'
+import '../src/record-view/record-view-body.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+import { CommonGristStyles } from '@operato/styles'
+import { ColumnConfig, GristRecord } from '../src/types.js'
+import { buildColumn } from '../src/configure/column-builder.js'
+import { ZERO_RECORD } from '../src/index.js'
+
+const columnsConfig: ColumnConfig[] = [
+  {
+    type: 'string',
+    name: 'id',
+    hidden: true
+  },
+  {
+    type: 'string',
+    name: 'name',
+    label: true,
+    header: 'name',
+    record: {
+      editable: true
+    },
+    filter: 'search',
+    sortable: true,
+    width: 120
+  },
+  {
+    type: 'string',
+    name: 'description',
+    header: 'description',
+    filter: 'search',
+    record: {
+      editable: true,
+      align: 'left'
+    },
+    width: 200
+  },
+  {
+    type: 'textarea',
+    name: 'textarea',
+    label: true,
+    header: 'textarea',
+    record: {
+      editable: true,
+      wide: true
+    },
+    filter: 'search',
+    sortable: true,
+    width: 130
+  },
+  {
+    type: 'datetime',
+    name: 'updatedAt',
+    header: 'updated at',
+    record: {
+      editable: true,
+      defaultValue: {
+        name: 'now'
+      }
+    },
+    filter: 'between',
+    sortable: true,
+    width: 180
+  },
+  {
+    type: 'datetime',
+    name: 'createdAt',
+    header: 'created at',
+    record: {
+      editable: false
+    },
+    sortable: true,
+    width: 180
+  }
+].map((column: any) => buildColumn(column))
+
+const record: GristRecord = ZERO_RECORD
+
+export default {
+  title: 'ox-record-view-body',
+  component: 'ox-record-view-body',
+  argTypes: {
+    headerFilter: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  headerFilter: boolean
+  theme?: 'light' | 'dark'
+}
+
+const Template: Story<ArgTypes> = ({ headerFilter }: 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" />
+  <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"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    ${CommonGristStyles.cssText}
+  </style>
+
+  <style>
+    ox-record-view-body {
+      height: 600px;
+    }
+  </style>
+
+  <ox-record-view-body .columns=${columnsConfig} .record=${record}> </ox-record-view-body>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  headerFilter: true
+}

package/stories/textarea.stories.ts

@@ -117,7 +117,8 @@ const config = {
       label: true,
       header: 'textarea',
       record: {
-        editable: true
+        editable: true,
+        wide: true
       },
       filter: 'search',
       sortable: true,