@operato/data-grist 7.0.43 → 7.0.45

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

@@ -4,38 +4,61 @@ import { customElement, property } from 'lit/decorators.js'
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
 
-const DEFAULT_TEXT_ALIGN = 'left'
-
 @customElement('ox-card-gutter')
 export class DataCardGutter extends LitElement {
   static styles = [
     css`
       :host {
+        display: flex;
         background-color: transparent;
         align-content: center;
-        font-size: var(--grid-record-wide-fontsize);
+        align-items: center;
         text-overflow: ellipsis;
-        color: var(--grid-record-color);
+      }
+
+      :host([row-selector]) {
+        margin-right: auto;
       }
 
       * {
-        flex: 1;
-        margin: var(--spacing-tiny);
-        border: var(--data-card-item-btn-border);
-        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);
+        border: 0;
+        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
+        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
+
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));
+
+        padding: var(--spacing-small);
       }
 
       *:hover {
         cursor: pointer;
-        background-color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      :host([danger]) button {
+        background-color: var(--md-sys-color-error);
         color: var(--md-sys-color-on-primary);
       }
 
-      *[center] {
-        flex: none;
-        margin: var(--spacing-none) auto;
+      :host([danger]) button:hover {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      button {
+        display: flex;
+        gap: var(--spacing-small);
+        border: 0;
+        align-items: center;
+      }
+
+      button md-icon {
+        border: 0;
+        padding: 0;
+        background-color: unset;
       }
     `
   ]
@@ -60,15 +83,18 @@ export class DataCardGutter extends LitElement {
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('column')) {
-      var align = this.column.record.align || DEFAULT_TEXT_ALIGN
-      if (align != DEFAULT_TEXT_ALIGN) {
-        let justify = 'center'
-        switch (align) {
-          case 'right':
-            justify = 'flex-end'
-            break
-        }
-        this.style.setProperty('--data-card-gutter-justify-content', justify)
+      const { gutterName, danger } = this.column
+
+      if (gutterName == 'row-selector') {
+        this.setAttribute('row-selector', '')
+      } else {
+        this.removeAttribute('row-selector')
+      }
+
+      if (danger) {
+        this.setAttribute('danger', '')
+      } else {
+        this.removeAttribute('danger')
       }
     }
   }

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

@@ -17,7 +17,7 @@ export class DataCard extends DataManipulator {
         padding: var(--spacing-medium);
 
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-template-rows: min-content;
         grid-gap: var(--spacing-large);
       }
@@ -50,8 +50,8 @@ export class DataCard extends DataManipulator {
         transform: translate(-50%, -50%);
       }
 
-      ox-record-card[emphasized-row],
-      ox-record-card[emphasized-row][focused] {
+      [card][emphasized-row],
+      [card][emphasized-row][focused] {
         background-color: var(--grid-record-emphasized-background-color);
         color: var(--grid-record-emphasized-color);
       }
@@ -131,6 +131,7 @@ export class DataCard extends DataManipulator {
             .emphasized=${emphasized}
             ?selected-row=${record['__selected__']}
             ?dirty=${record['__dirty__']}
+            card
           ></ox-record-card>
         `
       })}

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

@@ -40,6 +40,7 @@ export class RecordCard extends LitElement {
         border-radius: var(--data-card-record-card-border-radius);
         border: var(--data-card-record-card-border);
         height: min-content;
+        padding: var(--spacing-small) var(--spacing-none);
       }
 
       :host(:hover) {
@@ -78,21 +79,16 @@ export class RecordCard extends LitElement {
       }
 
       [thumbnail] {
-        width: 100%;
         height: var(--data-card-thumbnail-height);
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
         overflow: hidden;
-        margin-top: var(--spacing-medium);
       }
 
       [content] {
-        display: grid;
-        gap: var(--spacing-tiny) var(--spacing-medium);
-        grid-template:
-          'brief gutters'
-          'detail detail';
-        grid-template-columns: 1fr 35px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-tiny);
         margin: var(--data-card-item-margin);
       }
 
@@ -100,20 +96,16 @@ export class RecordCard extends LitElement {
         display: flex;
         flex-direction: column;
         gap: var(--spacing-tiny);
-        grid-area: brief;
         overflow: hidden;
       }
 
       [gutters] {
-        grid-area: gutters;
-      }
-
-      [detail] {
-        grid-area: detail;
-      }
-
-      ox-card-gutter {
-        flex: 0 0 14px;
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-small);
+        margin: var(--spacing-small) var(--spacing-medium);
+        justify-content: end;
+        align-items: stretch;
       }
 
       ox-card-field {
@@ -194,7 +186,6 @@ export class RecordCard extends LitElement {
     const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined
 
     const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)
-    const firstGutter = gutters[0]
 
     if (this.hasAttribute('dirty')) {
       var dirtyIcon
@@ -225,39 +216,6 @@ export class RecordCard extends LitElement {
         : html``}
 
       <div content>
-        <div gutters>
-          ${firstGutter
-            ? html`
-                <ox-card-gutter
-                  .rowIndex=${rowIndex}
-                  .column=${firstGutter}
-                  .record=${record}
-                  .value=${record[firstGutter.name]}
-                ></ox-card-gutter>
-              `
-            : html``}
-          ${gutters.length === 2
-            ? html`
-                <ox-card-gutter
-                  .rowIndex=${rowIndex}
-                  .column=${gutters[1]}
-                  .record=${record}
-                  .value=${record[gutters[1].name]}
-                ></ox-card-gutter>
-              `
-            : gutters.length > 2
-              ? html`
-                  <ox-card-gutter-menu
-                    .gutters=${gutters}
-                    .rowIndex=${rowIndex}
-                    .record=${record}
-                    .clickHandler=${this.clickHandler}
-                    .dblclickHandler=${this.dblclickHandler}
-                  ></ox-card-gutter-menu>
-                `
-              : html``}
-        </div>
-
         <div brief>
           ${briefFields.map(
             (column, idx) => html`
@@ -289,6 +247,19 @@ export class RecordCard extends LitElement {
             `
           : html``}
       </div>
+
+      <div gutters>
+        ${gutters.map(gutter => {
+          return html`
+            <ox-card-gutter
+              .rowIndex=${rowIndex}
+              .column=${gutter}
+              .record=${record}
+              .value=${record[gutter.name]}
+            ></ox-card-gutter>
+          `
+        })}
+      </div>
     `
   }
 

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

@@ -39,7 +39,6 @@ export class DataGridField extends LitElement {
 
       :host([gutter]) * {
         cursor: default;
-        font-size:1.2em;
       }
 
       :host([editing]) {
@@ -79,6 +78,37 @@ export class DataGridField extends LitElement {
         flex: none;
         margin: 0 auto;
       }
+
+      :host > button {
+        display: flex;
+        gap: var(--spacing-small);
+        border: 0;
+        align-items: center;
+        padding: var(--spacing-small);
+
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+        border-radius: var(--data-card-item-btn-border-radius, var(--md-sys-shape-corner-tiny));
+
+        font-size: 0.8rem;
+        line-height: 0.8rem;
+
+        md-icon {
+          border: 0;
+          padding: 0;
+          background-color: unset;
+        }
+      }
+
+      :host([danger]) > button {
+        background-color: var(--md-sys-color-error);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      :host([danger]) > button:hover {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
     `
   ]
 
@@ -154,6 +184,13 @@ export class DataGridField extends LitElement {
         this.style.setProperty('--data-grid-field-justify-content', justify)
         this.style.setProperty('--data-grid-field-text-align', align)
       }
+
+      const { danger } = this.column
+      if (danger) {
+        this.setAttribute('danger', '')
+      } else {
+        this.removeAttribute('danger')
+      }
     }
 
     if (changes.has('fixed')) {

package/src/data-list/data-list-gutter.ts

@@ -38,13 +38,31 @@ export class DataListGutter extends LitElement {
 
       * {
         flex: 1;
-        margin: var(--spacing-none);
+        border: 0;
+        font-size: var(--md-sys-typescale-label-medium-size, 0.8rem);
+        line-height: var(--md-sys-typescale-label-medium-size, 0.8rem);
+
+        background-color: transparent;
+        padding: var(--spacing-small);
       }
 
       *[center] {
         flex: none;
         margin: var(--spacing-none) auto;
       }
+
+      button {
+        display: flex;
+        gap: var(--spacing-small);
+        border: 0;
+        align-items: center;
+      }
+
+      button md-icon {
+        border: 0;
+        padding: 0;
+        background-color: unset;
+      }
     `
   ]
 
@@ -78,6 +96,13 @@ export class DataListGutter extends LitElement {
         }
         this.style.setProperty('--data-list-gutter-justify-content', justify)
       }
+
+      const { danger } = this.column
+      if (danger) {
+        this.setAttribute('danger', '')
+      } else {
+        this.removeAttribute('danger')
+      }
     }
   }
 }

package/src/gutters/gutter-button.ts

@@ -1,35 +1,35 @@
 import '@material/web/icon/icon.js'
 
 import { html } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { FieldRenderer, HeaderRenderer } from '../types'
+import { ColumnConfig, FieldRenderer, GristRecord, HeaderRenderer } from '../types'
 
 export class GutterButton {
-  static instance(config: any = {}) {
-    var { icon = 'edit', title } = config
+  static instance(config: Partial<ColumnConfig> = { type: 'gutter', gutterName: 'button' }) {
+    var { icon = 'edit', title, iconOnly = true } = config
 
-    var iconFn = typeof icon == 'function' ? icon : () => icon
-
-    var inlineHeaderStyle = 'margin-top:1px;'
-    var inlineRecordStyle = 'margin-top:1px;'
+    var iconFn = typeof icon == 'function' ? icon : (record?: GristRecord) => icon
 
     return Object.assign(
       {},
       {
         type: 'gutter',
-        gutterType: 'button',
+        gutterName: 'button',
         width: 26,
         resizable: false,
         sortable: false,
         header: {
           renderer: function (column) {
-            return html` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `
+            return iconOnly ? html` <md-icon title=${ifDefined(title)}>${iconFn()}</md-icon> ` : title
           } as HeaderRenderer
         },
         record: {
           align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
-            return html` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-icon> `
+            return iconOnly
+              ? html` <md-icon title=${ifDefined(title)}>${iconFn(record)}</md-icon> `
+              : html`<button><md-icon>${iconFn()}</md-icon>${title}</button>`
           } as FieldRenderer
         },
         forGrid: true,

package/src/gutters/gutter-dirty.ts

@@ -50,16 +50,16 @@ class GutterDirtyElement extends LitElement {
 }
 
 const INLINESTYLE =
-  'font-size: var(--grid-record-fontsize);vertical-align: middle; color: var(--grid-record-dirty-color)'
+  'font-size: var(--grid-record-fontsize); vertical-align: middle; color: var(--grid-record-dirty-color)'
 
 export class GutterDirty {
-  static instance(config: ColumnConfig = { type: 'gutter', name: '__dirty__' } as any) {
+  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__dirty__' }) {
     return Object.assign(
       {},
       {
         type: 'gutter',
         name: '__dirty__',
-        gutterType: 'dirty',
+        gutterName: 'dirty',
         width: 30,
         resizable: false,
         sortable: false,

package/src/gutters/gutter-row-selector.ts

@@ -3,16 +3,16 @@ import { html } from 'lit'
 import { DataCard } from '../data-card/data-card'
 import { DataGrid } from '../data-grid/data-grid'
 import { DataList } from '../data-list/data-list'
-import { FieldRenderer, HeaderRenderer } from '../types'
+import { ColumnConfig, FieldRenderer, HeaderRenderer } from '../types'
 
 export class GutterRowSelector {
-  static instance(config = {} as any) {
+  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__selected__' }) {
     return Object.assign(
       {},
       {
         type: 'gutter',
         name: '__selected__',
-        gutterType: 'row-selector',
+        gutterName: 'row-selector',
         width: 30,
         resizable: false,
         sortable: false,
@@ -23,7 +23,7 @@ export class GutterRowSelector {
             return html`
               <input
                 type="checkbox"
-                .checked=${checked}
+                .checked=${!!checked}
                 @change=${(e: Event) => {
                   let selected = column.multiple ? (e.target as HTMLInputElement).checked : false
 

package/src/gutters/gutter-sequence.ts

@@ -1,10 +1,10 @@
 import { DataCard } from '../data-card/data-card'
 import { DataGrid } from '../data-grid/data-grid'
 import { DataList } from '../data-list/data-list'
-import { ColumnWidthCallback, FieldRenderer, GristEventHandler } from '../types'
+import { ColumnConfig, ColumnWidthCallback, FieldRenderer, GristEventHandler } from '../types'
 
 export class GutterSequence {
-  static instance(config = {} as any) {
+  static instance(config: Partial<ColumnConfig> = { type: 'gutter', name: '__seq__' }) {
     return {
       type: 'gutter',
       name: '__seq__',

package/src/types.ts

@@ -344,7 +344,13 @@ export type ColumnConfig = {
    * 또한 Gutter 열은 행을 선택하거나 행의 상태를 나타내는 체크박스를 포함할 수도 있습니다.
    */
   gutterName?: 'button' | 'sequence' | 'row-selector' | 'dirty'
+  title?: string
   fixed?: boolean
+  /** [begin] only for button gutter column */
+  icon?: string
+  iconOnly?: boolean
+  danger?: boolean
+  /** [end] only for button gutter column */
   header: HeaderConfig
   record: RecordConfig
   handlers: GristEventHandlerSet

package/stories/grid-setting.stories.ts

@@ -390,6 +390,7 @@ const Template: Story<ArgTypes> = ({
     <link href="/themes/light.css" rel="stylesheet" />
     <link href="/themes/dark.css" rel="stylesheet" />
     <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/material-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <link
@@ -416,7 +417,7 @@ const Template: Story<ArgTypes> = ({
 
     <style>
       ox-grist {
-        height: 600px;
+        flex: 1;
       }
 
       ox-filters-form {

package/stories/grist-modes.stories.ts

@@ -100,7 +100,9 @@ const config = {
       type: 'gutter',
       gutterName: 'button',
       icon: 'edit',
-      title: 'edit',
+      iconOnly: false,
+      title: '수정편집',
+      width: 120,
       handlers: {
         click: function () {
           console.log('clicked')
@@ -111,7 +113,9 @@ const config = {
       type: 'gutter',
       gutterName: 'button',
       icon: 'add',
-      title: 'add',
+      iconOnly: false,
+      title: '행추가',
+      width: 120,
       handlers: {
         click: 'record-copy'
       }
@@ -362,6 +366,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
     <link href="/themes/light.css" rel="stylesheet" />
     <link href="/themes/dark.css" rel="stylesheet" />
     <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/material-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <link
@@ -388,7 +393,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
 
     <style>
       ox-grist {
-        height: 600px;
+        flex: 1;
       }
 
       ox-filters-form {