npm - @operato/data-grist - Versions diffs - 0.3.18 → 0.3.22 - Mend

@operato/data-grist 0.3.18 → 0.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +37 -0
package/custom-elements.json +1015 -1015
package/demo/data-grist-test.html +142 -85
package/demo/index.html +55 -72
package/dist/src/data-grid/data-grid-header.js +3 -1
package/dist/src/data-grid/data-grid-header.js.map +1 -1
package/dist/src/record-view/record-view-body.js +4 -2
package/dist/src/record-view/record-view-body.js.map +1 -1
package/dist/src/sorters/sorters-control.js +22 -8
package/dist/src/sorters/sorters-control.js.map +1 -1
package/dist/src/types.d.ts +1 -0
package/dist/src/types.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +8 -8
package/src/data-grid/data-grid-header.ts +3 -1
package/src/record-view/record-view-body.ts +4 -2
package/src/sorters/sorters-control.ts +22 -8
package/src/types.ts +1 -0
package/yarn-error.log +16718 -0

package/demo/data-grist-test.html CHANGED Viewed

@@ -44,11 +44,15 @@
     <link href="/themes/oops-theme.css" rel="stylesheet" />
     <link href="/themes/grist-theme.css" rel="stylesheet" />
   </head>
   <body>
     <script type="module">
       import { LitElement, html, css, render } from 'lit'
       import '../dist/index.js'
-      import '@operato/popup'
+      import '../dist/src/filters/filters-form.js'
+      import '../dist/src/sorters/sorters-control.js'
+      import '../dist/src/record-view/record-creator.js'
+      import '@operato/popup/ox-popup-list.js'
       import '@material/mwc-icon'
       const fetchHandler = async ({ page, limit, sorters = [] }) => {
@@ -65,7 +69,8 @@
               return {
                 id: idx,
                 name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
-                description: idx % 2 ? `hatiolab manager-${start + idx + 1}` : `hatiosea manager-${start + idx + 1}`,
+                description:
+                  idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
                 email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
                 active: Math.round(Math.random() * 2) % 2 ? true : false,
                 barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
@@ -81,10 +86,14 @@
                         name: 'HatioSEA',
                         description: `말레이시아 세티아알람-${start + idx + 1}`
                       },
-                image:
-                  idx % 2
+                thumbnail:
+                  idx % 4 === 0
+                    ? '' /* no source */
+                    : idx % 4 === 1
                     ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
-                    : `http://www.hatiolab.com/assets/img/thingsboard-30.png`,
+                    : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
                 role: ['admin', 'worker', 'tester'][idx % 3],
                 color: idx % 2 ? `#87f018` : `#180f87`,
                 rate: Math.round(Math.random() * 100),
@@ -107,9 +116,7 @@
       const config = {
         list: {
-          thumbnail: function (record, rowIndex) {
-            return html` <img src=${record.image} style="width: 100%; height: 100%;" /> `
-          },
+          thumbnail: 'thumbnail',
           fields: ['name', 'description'],
           details: ['role', 'email']
         },
@@ -153,10 +160,11 @@
                 // href: 'http://hatiolab.com',
                 href: function (column, record, rowIndex) {
                   return record['homepage']
-                }
-                // target: '_blank'
+                },
+                target: '_blank'
               }
             },
+            filter: 'search',
             sortable: true,
             width: 120
           },
@@ -164,13 +172,14 @@
             type: 'string',
             name: 'description',
             header: 'description',
+            filter: 'search',
             record: {
               editable: true,
               align: 'left'
             },
             width: 200,
             handlers: {
-              dblclick: (columns, data, column, record, rowIndex) => {
+              click: (columns, data, column, record, rowIndex, target) => {
                 alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
               }
             }
@@ -183,6 +192,7 @@
             record: {
               editable: true
             },
+            filter: 'search',
             sortable: true,
             width: 130,
             validation: function (after, before, record, column) {
@@ -207,6 +217,7 @@
             record: {
               editable: true
             },
+            filter: true,
             handlers: {
               dblclick: () => {
                 const grist = document.querySelector('ox-grist')
@@ -225,6 +236,10 @@
               options: ['admin', 'worker', 'tester'],
               editable: true
             },
+            filter: {
+              options: ['admin', 'worker', 'tester', 'xyz', 'VERY'],
+              multiple: true /* this case, operator should be 'in' */
+            },
             sortable: true,
             width: 120
           },
@@ -246,6 +261,7 @@
               align: 'right',
               editable: true
             },
+            filter: 'between',
             sortable: true,
             width: 50
           },
@@ -255,6 +271,14 @@
             header: 'JSON5',
             width: 200
           },
+          {
+            type: 'image',
+            name: 'thumbnail',
+            header: 'thumbnail',
+            record: {
+              editable: true
+            }
+          },
           {
             type: 'datetime',
             name: 'updatedAt',
@@ -262,6 +286,7 @@
             record: {
               editable: true
             },
+            filter: 'between',
             sortable: true,
             width: 180
           },
@@ -270,7 +295,7 @@
             name: 'createdAt',
             header: 'created at',
             record: {
-              editable: true
+              editable: false
             },
             sortable: true,
             width: 180
@@ -311,6 +336,7 @@
           css`
             :host {
               display: flex;
+              flex-direction: column;
             }
             ox-grist {
@@ -321,34 +347,95 @@
               --grid-record-emphasized-color: yellow;
             }
-            #headroom {
+            [slot='headroom'] {
               display: flex;
-              flex-direction: column;
-              background-color: var(--primary-color);
-              height: 200px;
+              flex-direction: row;
               align-items: center;
-              justify-content: center;
-              color: var(--theme-white-color);
+              padding: var(--padding-default) var(--padding-wide);
+              border-top: 2px solid rgba(0, 0, 0, 0.2);
+              background-color: var(--theme-white-color);
+              box-shadow: var(--box-shadow);
+              --mdc-icon-size: 24px;
+            }
+            #sorters {
+              margin-left: auto;
+              position: relative;
+            }
+            #sorters > * {
+              padding: var(--padding-narrow);
+              margin-right: var(--margin-default);
             }
             #modes > * {
               padding: var(--padding-narrow);
-              font-size: 1.5em;
-              opacity: 0.7;
+              opacity: 0.5;
+              color: var(--primary-text-color);
+              cursor: pointer;
             }
             #modes > mwc-icon[active] {
-              border: 1px solid var(--status-warning-color);
               border-radius: 9px;
-              background-color: rgba(0, 0, 0, 0.3);
+              background-color: rgba(var(--primary-color-rgb), 0.05);
               opacity: 1;
+              color: var(--secondary-text-color);
+              cursor: default;
             }
-            #filters {
-              position: absolute;
-              left: 10px;
-              bottom: 10px;
-              width: calc(100% - 20px);
+            #modes > mwc-icon:hover {
+              opacity: 1;
+              color: var(--secondary-text-color);
+            }
+            #add {
+              width: 50px;
+              text-align: right;
+            }
+            #add button {
+              background-color: var(--status-success-color);
+              border: 0;
+              border-radius: 50%;
+              padding: 5px;
+              width: 36px;
+              height: 36px;
+              cursor: pointer;
+            }
+            #add button:hover {
+              background-color: var(--focus-background-color);
+              box-shadow: var(--box-shadow);
+            }
+            #add button mwc-icon {
+              font-size: 2em;
+              color: var(--theme-white-color);
+            }
+            #filters * {
+              margin-right: var(--margin-default);
+            }
+            #tailer {
+              display: flex;
+              flex-direction: row;
+              margin: 0 var(--margin-default);
+            }
+            #tailer a {
+              padding: 0 var(--padding-narrow) 0 var(--padding-default);
+              margin: 0 var(--margin-narrow);
+              border-left: 1px solid rgba(0, 0, 0, 0.1);
+              font-size: var(--fontsize-default);
+              color: var(--primary-color);
+            }
+            @media only screen and (max-width: 460px) {
+              #modes {
+                display: none;
+              }
             }
           `
         ]
@@ -359,27 +446,49 @@
           }
         }
+        get searchForm() {
+          return this.shadowRoot.querySelector('ox-filters-form')
+        }
         render() {
           const mode = this.mode || 'CARD'
           return html`
             <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
+              <ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
               <div slot="headroom" id="headroom">
-                <h1>HEAD ROOM AREA</h1>
+                <div id="sorters">
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >sort</mwc-icon
+                  >
+                  <ox-popup id="sorter-control">
+                    <ox-sorters-control> </ox-sorters-control>
+                  </ox-popup>
+                </div>
                 <div id="modes">
                   <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
                   <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
                   <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
                 </div>
                 <div id="tailer">
-                  <a href="./report-test.html">Report Test</a>|
+                  <a href="./report-test.html">Report Test</a>
                   <a
                     href="#"
                     @click=${() => {
                       this.renderRoot.querySelector('ox-grist').reset()
                     }}
                     >Reset</a
-                  >|
+                  >
                   <a
                     href="#"
                     @click=${() => {
@@ -389,61 +498,9 @@
                   >
                 </div>
-                <div id="filters">
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >sort</mwc-icon
-                  >
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >more_horiz</mwc-icon
-                  >
-                  <mwc-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('ox-popup-list').open({
-                        left: target.offsetLeft,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >sort</mwc-icon
-                  >
-                  <ox-popup-list @select=${() => console.log(e.detail)} multiple>
-                    <div
-                      option
-                      @click=${function (e) {
-                        const icon = e.currentTarget.querySelector('mwc-icon')
-                        icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-                      }}
-                    >
-                      <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-                      <span>click me to toggle</span>
-                    </div>
-                    <div
-                      option
-                      @click=${function (e) {
-                        const icon = e.currentTarget.querySelector('mwc-icon')
-                        icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
-                      }}
-                    >
-                      <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
-                      <span>click me to toggle</span>
-                    </div>
-                  </ox-popup-list>
-                </div>
+                <ox-record-creator id="add" light-popup>
+                  <button><mwc-icon>add</mwc-icon></button>
+                </ox-record-creator>
               </div>
             </ox-grist>
           `

package/demo/index.html CHANGED Viewed

@@ -353,12 +353,24 @@
               align-items: center;
               padding: var(--padding-default) var(--padding-wide);
               border-top: 2px solid rgba(0, 0, 0, 0.2);
-              background-color: var(--main-section-background-color);
+              background-color: var(--theme-white-color);
+              box-shadow: var(--box-shadow);
+              --mdc-icon-size: 24px;
+            }
+            #sorters {
+              margin-left: auto;
+              position: relative;
+            }
+            #sorters > * {
+              padding: var(--padding-narrow);
+              margin-right: var(--margin-default);
             }
             #modes > * {
               padding: var(--padding-narrow);
-              font-size: 1em;
               opacity: 0.5;
               color: var(--primary-text-color);
               cursor: pointer;
@@ -372,41 +384,38 @@
               cursor: default;
             }
-            #filters {
-              display: flex;
-              flex-direction: row;
-              justify-content: space-between;
-              margin-right: auto;
-              align-items: center;
+            #modes > mwc-icon:hover {
+              opacity: 1;
+              color: var(--secondary-text-color);
             }
-            #filters > * {
-              padding: var(--padding-default) var(--padding-wide);
+            #add {
+              width: 50px;
+              text-align: right;
             }
-            #search {
-              flex: 1;
-              display: flex;
-              position: relative;
-              align-items: center;
+            #add button {
+              background-color: var(--status-success-color);
+              border: 0;
+              border-radius: 50%;
+              padding: 5px;
+              width: 36px;
+              height: 36px;
+              cursor: pointer;
+            }
-              --mdc-icon-size: 20px;
+            #add button:hover {
+              background-color: var(--focus-background-color);
+              box-shadow: var(--box-shadow);
             }
-            #search [type='text'] {
-              flex: 1;
-              background-color: transparent;
-              border: 0;
-              border-bottom: var(--border-dark-color);
-              padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
-              font-size: var(--fontsize-large);
-              outline: none;
+            #add button mwc-icon {
+              font-size: 2em;
+              color: var(--theme-white-color);
             }
-            #search mwc-icon {
-              position: absolute;
-              color: var(--secondary-color);
+            #filters * {
+              margin-right: var(--margin-default);
             }
             #tailer {
@@ -423,29 +432,9 @@
               color: var(--primary-color);
             }
-            #add button {
-              background-color: var(--status-success-color);
-              border: 0;
-              border-radius: 50%;
-              padding: 5px;
-              width: 36px;
-              height: 36px;
-              cursor: pointer;
-            }
-            #add button:hover {
-              background-color: var(--focus-background-color);
-              box-shadow: var(--box-shadow);
-            }
-            #add button mwc-icon {
-              font-size: 2em;
-              color: var(--theme-white-color);
-            }
             @media only screen and (max-width: 460px) {
-              #filters {
-                flex-direction: column;
+              #modes {
+                display: none;
               }
             }
           `
@@ -466,31 +455,25 @@
           return html`
             <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
-              <ox-filters-form slot="headroom" @change=${e => console.log(e.detail)}></ox-filters-form>
+              <ox-filters-form slot="headroom" @change=${e => console.log('changed', e.detail)}></ox-filters-form>
               <div slot="headroom" id="headroom">
-                <div id="filters">
-                  <div id="search">
-                    <mwc-icon>search</mwc-icon>
-                    <input type="text" />
-                  </div>
-                  <div>
-                    <mwc-icon
-                      @click=${e => {
-                        const target = e.currentTarget
-                        this.renderRoot.querySelector('#sorter-control').open({
-                          left: target.offsetLeft,
-                          top: target.offsetTop + target.offsetHeight
-                        })
-                      }}
-                      >sort</mwc-icon
-                    >
-                    <ox-popup id="sorter-control">
-                      <ox-sorters-control> </ox-sorters-control>
-                    </ox-popup>
-                  </div>
+                <div id="sorters">
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >sort</mwc-icon
+                  >
+                  <ox-popup id="sorter-control">
+                    <ox-sorters-control> </ox-sorters-control>
+                  </ox-popup>
                 </div>
                 <div id="modes">
                   <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
                   <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>

package/dist/src/data-grid/data-grid-header.js CHANGED Viewed

@@ -40,7 +40,9 @@ let DataGridHeader = class DataGridHeader extends LitElement {
                       </span>
                     `
                 : undefined}
-                ${column.filter ? html ` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}
+                ${column.filter && column.filter.operator !== 'search'
+                ? html ` <span filter> ${this._renderFilterHeader(column)} </span> `
+                : undefined}
                 ${column.resizable !== false
                 ? html `
                       <span splitter draggable="false" @mousedown=${(e) => this._mousedown(e, idx)}

package/dist/src/data-grid/data-grid-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { closestElement } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, GristConfig, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n\n overflow: hidden;\n }\n\n div[column] {\n display: flex;\n\n white-space: nowrap;\n overflow: hidden;\n background-color: var(--grid-header-background-color);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n div[gutter] {\n padding: var(--padding-default) 0 var(--padding-narrow) 0;\n text-align: center;\n }\n\n span {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n }\n\n span[for-title] {\n flex: 1;\n text-overflow: ellipsis;\n line-height: 1.6;\n text-transform: capitalize;\n }\n span[for-title] mwc-icon {\n font-size: var(--grid-record-fontsize);\n }\n\n span[sorter],\n span[filter] {\n padding: 0;\n border: 0;\n }\n span[sorter] mwc-icon {\n font-size: var(--grid-header-sorter-size);\n }\n\n span[filter] > mwc-icon {\n font-size: var(--fontsize-default);\n line-height: 20px;\n }\n\n span[splitter] {\n cursor: col-resize;\n border-right: var(--grid-header-splitter-border);\n }\n span[splitter]:hover {\n border-right: var(--grid-header-splitter-border-hover);\n }\n input[type='checkbox'],\n input[type='radio'] {\n margin: 3px 0 0 0;\n zoom: var(--grist-input-zoom);\n }\n [filter-title] {\n color: var(--grid-header-filter-title-color);\n font: var(--grid-header-filter-title-font);\n text-transform: capitalize;\n }\n [filter-title] * {\n vertical-align: middle;\n }\n [filter-title] mwc-icon {\n opacity: 0.7;\n color: var(--grid-header-filter-title-icon-color);\n }\n [filter] input[type='checkbox'] {\n margin-left: 10px;\n margin-bottom: 5px;\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n @property({ type: Object }) data: GristData = ZERO_DATA\n\n @state() private _sorters: SortersConfig = []\n private _lastAccVal?: number\n private _throttledNotifier?: any\n\n connectedCallback() {\n super.connectedCallback()\n\n const grid = closestElement('ox-grist', this)\n grid?.addEventListener('sorters-change', (e: Event) => {\n this._sorters = (e as CustomEvent).detail\n })\n }\n\n render() {\n var columns = this.columns \|\| []\n\n return html`\n ${columns.map((column, idx) =>\n !column.hidden\n ? html`\n <div ?gutter=${column.type == 'gutter'} column>\n <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n >${this._renderHeader(column)}\n </span>\n\n ${column.sortable\n ? html`\n <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n ${this._renderSortHeader(column)}\n </span>\n `\n : undefined}\n ${column.filter ? html` <span filter> ${this._renderFilterHeader(column)} </span> ` : undefined}\n ${column.resizable !== false\n ? html`\n <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n > </span\n >\n `\n : undefined}\n </div>\n `\n : undefined\n )}\n\n <div column></div>\n `\n }\n\n _renderHeader(column: ColumnConfig) {\n var { renderer } = column.header \|\| {}\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n\n _renderSortHeader(column: ColumnConfig) {\n var sorters = this._sorters\n\n var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n if (!sorter) {\n return html``\n }\n\n if (sorters.length > 1) {\n var rank = sorters.indexOf(sorter) + 1\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n } else {\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n }\n }\n\n _renderFilterHeader(column: ColumnConfig) {\n var filter = column.filter as FilterConfigObject\n const type = filter.type\n const idx = filter!.operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(type)[idx]\n\n return html`\n <mwc-icon\n @click=${(e: Event) => {\n const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup \| null\n // const popup = (e.target as HTMLElement).nextSibling as OxPopupList \| null\n\n // absolute position인 popup의 위치 부모는 grist 이므로,\n // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n const top = parent.offsetTop + parent.offsetHeight\n const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n popup?.open({\n right,\n top\n })\n }}\n >filter_alt</mwc-icon\n >\n\n ${!renderer\n ? html``\n : type === 'select'\n ? html`<ox-popup-list multiple attr-selected=\"checked\" with-search\n ><div filter-title slot=\"header\">\n <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n </div>\n ${renderer(column, this)}</ox-popup-list\n >`\n : html` <ox-popup\n ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n ${renderer(column, this)}</ox-popup\n >`}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._sorters = this.config.sorters \|\| []\n }\n }\n\n _changeSort(column: ColumnConfig) {\n if (!column.sortable) {\n return\n }\n\n var sorters = [...this._sorters]\n\n var idx = sorters.findIndex(sorter => sorter.name == column.name)\n if (idx !== -1) {\n let sorter = sorters[idx]\n if (sorter.desc) {\n sorters.splice(idx, 1)\n } else {\n sorter.desc = true\n }\n } else {\n var sorter = {\n name: column.name\n }\n\n sorters.push(sorter)\n }\n\n this._sorters = sorters\n\n this.dispatchEvent(\n new CustomEvent('sorters-change', {\n bubbles: true,\n composed: true,\n detail: this._sorters\n })\n )\n }\n\n _accumalate(x: number) {\n this._lastAccVal = (this._lastAccVal ?? 0) + x\n return this._lastAccVal\n }\n\n _notifyWidthChange(idx: number, width: number) {\n if (!this._throttledNotifier) {\n this._throttledNotifier = throttle((idx: number, width: number) => {\n this.dispatchEvent(\n new CustomEvent('column-width-change', {\n bubbles: true,\n composed: true,\n detail: {\n idx,\n width\n }\n })\n )\n\n this._lastAccVal = 0\n }, 100)\n }\n\n this._throttledNotifier(idx, width)\n }\n\n _mousedown(e: MouseEvent, idx: number) {\n e.stopPropagation()\n e.preventDefault()\n\n var mousemoveHandler = ((e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n let column = this.columns[idx]\n\n let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n if (width == 0) {\n /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n return\n }\n\n this._notifyWidthChange(idx, width)\n }).bind(this)\n\n var mouseupHandler = ((e: MouseEvent) => {\n document.removeEventListener('mousemove', mousemoveHandler)\n document.removeEventListener('mouseup', mouseupHandler)\n\n mousemoveHandler(e)\n }).bind(this)\n\n document.addEventListener('mousemove', mousemoveHandler)\n document.addEventListener('mouseup', mouseupHandler)\n }\n}\n"]}
1	+ {"version":3,"file":"data-grid-header.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAIvD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAkG8B,WAAM,GAAgB,WAAW,CAAA;QAClC,YAAO,GAAmB,YAAY,CAAA;QACrC,SAAI,GAAc,SAAS,CAAA;QAEtC,aAAQ,GAAkB,EAAE,CAAA;IAuN/C,CAAC;IAnNC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;QAC7C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,gBAAgB,EAAE,CAAC,CAAQ,EAAE,EAAE;YACpD,IAAI,CAAC,QAAQ,GAAI,CAAiB,CAAC,MAAM,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAC5B,CAAC,MAAM,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;6BACa,MAAM,CAAC,IAAI,IAAI,QAAQ;yCACX,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;qBAC/D,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;;;kBAG7B,MAAM,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAA;4CACoB,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;0BAC7D,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;;qBAEnC;gBACH,CAAC,CAAC,SAAS;kBACX,MAAM,CAAC,MAAM,IAAK,MAAM,CAAC,MAA6B,CAAC,QAAQ,KAAK,QAAQ;gBAC5E,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,WAAW;gBACnE,CAAC,CAAC,SAAS;kBACX,MAAM,CAAC,SAAS,KAAK,KAAK;gBAC1B,CAAC,CAAC,IAAI,CAAA;oEAC4C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC;;;qBAGzF;gBACH,CAAC,CAAC,SAAS;;aAEhB;YACH,CAAC,CAAC,SAAS,CACd;;;KAGF,CAAA;IACH,CAAC;IAED,aAAa,CAAC,MAAoB;QAChC,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QACtC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;IAED,iBAAiB,CAAC,MAAoB;QACpC,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE3B,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QAC3F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;QAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,IAAI,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YACtC,OAAO,MAAM,CAAC,IAAI;gBAChB,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,SAAS;gBAClE,CAAC,CAAC,IAAI,CAAA,iDAAiD,IAAI,SAAS,CAAA;SACvE;aAAM;YACL,OAAO,MAAM,CAAC,IAAI;gBAChB,CAAC,CAAC,IAAI,CAAA,0CAA0C;gBAChD,CAAC,CAAC,IAAI,CAAA,4CAA4C,CAAA;SACrD;IACH,CAAC;IAED,mBAAmB,CAAC,MAAoB;QACtC,IAAI,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;QAChD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;QACxB,MAAM,GAAG,GAAG,MAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QAE7C,OAAO,IAAI,CAAA;;iBAEE,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,MAAM,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,UAAU,CAAgB,CAAA;YAC3E,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,yBAAyB,CAAmB,CAAA;YAC/E,4EAA4E;YAE5E,8CAA8C;YAC9C,iDAAiD;YACjD,0EAA0E;YAC1E,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY,CAAA;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAA;YAE3F,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC;gBACV,KAAK;gBACL,GAAG;aACJ,CAAC,CAAA;QACJ,CAAC;;;;QAID,CAAC,QAAQ;YACT,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,KAAK,QAAQ;gBACnB,CAAC,CAAC,IAAI,CAAA;;kEAEoD,MAAM,CAAC,IAAI;;cAE/D,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC;YACxB;gBACJ,CAAC,CAAC,IAAI,CAAA;mFACqE,MAAM,CAAC,IAAI;cAChF,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC;YACxB;KACP,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;SAC1C;IACH,CAAC;IAED,WAAW,CAAC,MAAoB;QAC9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,OAAM;SACP;QAED,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;QAEhC,IAAI,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;QACjE,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE;YACd,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAA;YACzB,IAAI,MAAM,CAAC,IAAI,EAAE;gBACf,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;aACvB;iBAAM;gBACL,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;aACnB;SACF;aAAM;YACL,IAAI,MAAM,GAAG;gBACX,IAAI,EAAE,MAAM,CAAC,IAAI;aAClB,CAAA;YAED,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;SACrB;QAED,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CACH,CAAA;IACH,CAAC;IAED,WAAW,CAAC,CAAS;;QACnB,IAAI,CAAC,WAAW,GAAG,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QAC9C,OAAO,IAAI,CAAC,WAAW,CAAA;IACzB,CAAC;IAED,kBAAkB,CAAC,GAAW,EAAE,KAAa;QAC3C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC5B,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,CAAC,GAAW,EAAE,KAAa,EAAE,EAAE;gBAChE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,GAAG;wBACH,KAAK;qBACN;iBACF,CAAC,CACH,CAAA;gBAED,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;YACtB,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;QAED,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,UAAU,CAAC,CAAa,EAAE,GAAW;QACnC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,gBAAgB,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACxC,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YAE9B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;YAC7E,IAAI,KAAK,IAAI,CAAC,EAAE;gBACd,8CAA8C;gBAC9C,OAAM;aACP;YAED,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,IAAI,cAAc,GAAG,CAAC,CAAC,CAAa,EAAE,EAAE;YACtC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;YAEvD,gBAAgB,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IACtD,CAAC;CACF,CAAA;AA5TQ,qBAAM,GAAG;IACd,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAuC;AACrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA4B;AAE9C;IAAR,KAAK,EAAE;gDAAqC;AAtGlC,cAAc;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACnB,cAAc,CA6T1B;SA7TY,cAAc","sourcesContent":["import '@operato/popup/ox-popup.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\n\nimport { OxPopup } from '@operato/popup'\nimport { closestElement } from '@operato/utils'\n\nimport { ZERO_COLUMNS, ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { FilterStyles } from '../filters/filter-styles'\nimport { getFilterRenderer } from '../filters/registry'\nimport { ColumnConfig, FilterConfigObject, GristConfig, GristData, SortersConfig } from '../types'\n\n@customElement('ox-grid-header')\nexport class DataGridHeader extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n\n overflow: hidden;\n }\n\n div[column] {\n display: flex;\n\n white-space: nowrap;\n overflow: hidden;\n background-color: var(--grid-header-background-color);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n div[gutter] {\n padding: var(--padding-default) 0 var(--padding-narrow) 0;\n text-align: center;\n }\n\n span {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n }\n\n span[for-title] {\n flex: 1;\n text-overflow: ellipsis;\n line-height: 1.6;\n text-transform: capitalize;\n }\n span[for-title] mwc-icon {\n font-size: var(--grid-record-fontsize);\n }\n\n span[sorter],\n span[filter] {\n padding: 0;\n border: 0;\n }\n span[sorter] mwc-icon {\n font-size: var(--grid-header-sorter-size);\n }\n\n span[filter] > mwc-icon {\n font-size: var(--fontsize-default);\n line-height: 20px;\n }\n\n span[splitter] {\n cursor: col-resize;\n border-right: var(--grid-header-splitter-border);\n }\n span[splitter]:hover {\n border-right: var(--grid-header-splitter-border-hover);\n }\n input[type='checkbox'],\n input[type='radio'] {\n margin: 3px 0 0 0;\n zoom: var(--grist-input-zoom);\n }\n [filter-title] {\n color: var(--grid-header-filter-title-color);\n font: var(--grid-header-filter-title-font);\n text-transform: capitalize;\n }\n [filter-title] * {\n vertical-align: middle;\n }\n [filter-title] mwc-icon {\n opacity: 0.7;\n color: var(--grid-header-filter-title-icon-color);\n }\n [filter] input[type='checkbox'] {\n margin-left: 10px;\n margin-bottom: 5px;\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n }\n `\n ]\n\n @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n @property({ type: Array }) columns: ColumnConfig[] = ZERO_COLUMNS\n @property({ type: Object }) data: GristData = ZERO_DATA\n\n @state() private _sorters: SortersConfig = []\n private _lastAccVal?: number\n private _throttledNotifier?: any\n\n connectedCallback() {\n super.connectedCallback()\n\n const grid = closestElement('ox-grist', this)\n grid?.addEventListener('sorters-change', (e: Event) => {\n this._sorters = (e as CustomEvent).detail\n })\n }\n\n render() {\n var columns = this.columns \|\| []\n\n return html`\n ${columns.map((column, idx) =>\n !column.hidden\n ? html`\n <div ?gutter=${column.type == 'gutter'} column>\n <span for-title @click=${(e: MouseEvent) => this._changeSort(column)}\n >${this._renderHeader(column)}\n </span>\n\n ${column.sortable\n ? html`\n <span sorter @click=${(e: MouseEvent) => this._changeSort(column)}>\n ${this._renderSortHeader(column)}\n </span>\n `\n : undefined}\n ${column.filter && (column.filter as FilterConfigObject).operator !== 'search'\n ? html` <span filter> ${this._renderFilterHeader(column)} </span> `\n : undefined}\n ${column.resizable !== false\n ? html`\n <span splitter draggable=\"false\" @mousedown=${(e: MouseEvent) => this._mousedown(e, idx)}\n > </span\n >\n `\n : undefined}\n </div>\n `\n : undefined\n )}\n\n <div column></div>\n `\n }\n\n _renderHeader(column: ColumnConfig) {\n var { renderer } = column.header \|\| {}\n var title = renderer.call(this, column)\n\n return html` ${title} `\n }\n\n _renderSortHeader(column: ColumnConfig) {\n var sorters = this._sorters\n\n var sorter = sorters.find(sorter => column.type !== 'gutter' && column.name == sorter.name)\n if (!sorter) {\n return html``\n }\n\n if (sorters.length > 1) {\n var rank = sorters.indexOf(sorter) + 1\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `\n } else {\n return sorter.desc\n ? html` <mwc-icon>keyboard_arrow_up</mwc-icon> `\n : html` <mwc-icon>keyboard_arrow_down</mwc-icon> `\n }\n }\n\n _renderFilterHeader(column: ColumnConfig) {\n var filter = column.filter as FilterConfigObject\n const type = filter.type\n const idx = filter!.operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(type)[idx]\n\n return html`\n <mwc-icon\n @click=${(e: Event) => {\n const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement\n const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup \| null\n // const popup = (e.target as HTMLElement).nextSibling as OxPopupList \| null\n\n // absolute position인 popup의 위치 부모는 grist 이므로,\n // data-grid-header 의 포지션 부모(grist)의 위치로부터 계산해야함.\n // this의 position을 relative로 하지 못하는 이유 : ox-popup-list가 grid body에 덮히기 때문.\n const top = parent.offsetTop + parent.offsetHeight\n const right = this.clientWidth - (parent.offsetLeft + parent.offsetWidth - this.scrollLeft)\n\n popup?.open({\n right,\n top\n })\n }}\n >filter_alt</mwc-icon\n >\n\n ${!renderer\n ? html``\n : type === 'select'\n ? html`<ox-popup-list multiple attr-selected=\"checked\" with-search\n ><div filter-title slot=\"header\">\n <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>\n </div>\n ${renderer(column, this)}</ox-popup-list\n >`\n : html` <ox-popup\n ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>\n ${renderer(column, this)}</ox-popup\n >`}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('config')) {\n this._sorters = this.config.sorters \|\| []\n }\n }\n\n _changeSort(column: ColumnConfig) {\n if (!column.sortable) {\n return\n }\n\n var sorters = [...this._sorters]\n\n var idx = sorters.findIndex(sorter => sorter.name == column.name)\n if (idx !== -1) {\n let sorter = sorters[idx]\n if (sorter.desc) {\n sorters.splice(idx, 1)\n } else {\n sorter.desc = true\n }\n } else {\n var sorter = {\n name: column.name\n }\n\n sorters.push(sorter)\n }\n\n this._sorters = sorters\n\n this.dispatchEvent(\n new CustomEvent('sorters-change', {\n bubbles: true,\n composed: true,\n detail: this._sorters\n })\n )\n }\n\n _accumalate(x: number) {\n this._lastAccVal = (this._lastAccVal ?? 0) + x\n return this._lastAccVal\n }\n\n _notifyWidthChange(idx: number, width: number) {\n if (!this._throttledNotifier) {\n this._throttledNotifier = throttle((idx: number, width: number) => {\n this.dispatchEvent(\n new CustomEvent('column-width-change', {\n bubbles: true,\n composed: true,\n detail: {\n idx,\n width\n }\n })\n )\n\n this._lastAccVal = 0\n }, 100)\n }\n\n this._throttledNotifier(idx, width)\n }\n\n _mousedown(e: MouseEvent, idx: number) {\n e.stopPropagation()\n e.preventDefault()\n\n var mousemoveHandler = ((e: MouseEvent) => {\n e.stopPropagation()\n e.preventDefault()\n let column = this.columns[idx]\n\n let width = Math.max(0, Number(column.width) + this._accumalate(e.movementX))\n if (width == 0) {\n /* CLARIFY-ME 왜 마지막 이벤트의 offsetX로 음수 값이 오는가 */\n return\n }\n\n this._notifyWidthChange(idx, width)\n }).bind(this)\n\n var mouseupHandler = ((e: MouseEvent) => {\n document.removeEventListener('mousemove', mousemoveHandler)\n document.removeEventListener('mouseup', mouseupHandler)\n\n mousemoveHandler(e)\n }).bind(this)\n\n document.addEventListener('mousemove', mousemoveHandler)\n document.addEventListener('mouseup', mouseupHandler)\n }\n}\n"]}

package/dist/src/record-view/record-view-body.js CHANGED Viewed

@@ -26,10 +26,12 @@ let RecordViewBody = class RecordViewBody extends LitElement {
         var rowIndex = this.rowIndex;
         return html `
       ${columns.map(column => {
-            let { editable } = column.record;
+            let { editable, mandatory } = column.record;
             let dirtyFields = record['__dirtyfields__'] || {};
             return html `
-          <label ?editable=${editable}><span>${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label>
+          <label ?editable=${editable}
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+          >
           <ox-grid-field
             .rowIndex=${rowIndex}
             .column=${column}