npm - @operato/data-grist - Versions diffs - 7.1.31 → 7.1.33 - Mend

@operato/data-grist 7.1.31 → 7.1.33

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 (175) hide show

package/CHANGELOG.md +19 -0
package/dist/src/data-grid/data-grid-field.js +4 -1
package/dist/src/data-grid/data-grid-field.js.map +1 -1
package/dist/src/record-view/record-view-body.js +8 -4
package/dist/src/record-view/record-view-body.js.map +1 -1
package/dist/src/types.d.ts +1 -1
package/dist/src/types.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +10 -10
package/.storybook/main.js +0 -3
package/.storybook/preview.js +0 -52
package/.storybook/server.mjs +0 -8
package/demo/data-grist-test.html +0 -468
package/demo/favicon.ico +0 -0
package/demo/index.html +0 -541
package/demo/report-test.html +0 -249
package/src/accumulator/accumulator.ts +0 -63
package/src/configure/column-builder.ts +0 -114
package/src/configure/config-builder.ts +0 -40
package/src/configure/filters-option-builder.ts +0 -8
package/src/configure/imex-option-builder.ts +0 -5
package/src/configure/list-option-builder.ts +0 -9
package/src/configure/rows-option-builder.ts +0 -38
package/src/configure/tree-option-builder.ts +0 -22
package/src/configure/zero-config.ts +0 -83
package/src/const.ts +0 -1
package/src/data-card/data-card-field.ts +0 -94
package/src/data-card/data-card-gutter-menu.ts +0 -94
package/src/data-card/data-card-gutter.ts +0 -103
package/src/data-card/data-card.ts +0 -154
package/src/data-card/event-handlers/record-card-click-handler.ts +0 -34
package/src/data-card/event-handlers/record-card-dblclick-handler.ts +0 -34
package/src/data-card/record-card.ts +0 -289
package/src/data-consumer.ts +0 -11
package/src/data-grid/data-grid-accum-field.ts +0 -109
package/src/data-grid/data-grid-body-style.ts +0 -99
package/src/data-grid/data-grid-body.ts +0 -753
package/src/data-grid/data-grid-field.ts +0 -236
package/src/data-grid/data-grid-footer.ts +0 -117
package/src/data-grid/data-grid-header.ts +0 -574
package/src/data-grid/data-grid.ts +0 -293
package/src/data-grid/event-handlers/data-grid-body-click-handler.ts +0 -69
package/src/data-grid/event-handlers/data-grid-body-contextmenu-handler.ts +0 -32
package/src/data-grid/event-handlers/data-grid-body-dblclick-handler.ts +0 -42
package/src/data-grid/event-handlers/data-grid-body-focus-change-handler.ts +0 -24
package/src/data-grid/event-handlers/data-grid-body-keydown-handler.ts +0 -234
package/src/data-grist.ts +0 -1233
package/src/data-list/data-list-field.ts +0 -82
package/src/data-list/data-list-gutter.ts +0 -108
package/src/data-list/data-list.ts +0 -145
package/src/data-list/event-handlers/record-partial-click-handler.ts +0 -34
package/src/data-list/event-handlers/record-partial-dblclick-handler.ts +0 -33
package/src/data-list/event-handlers/record-partial-long-press-handler.ts +0 -33
package/src/data-list/record-partial.ts +0 -255
package/src/data-manipulator.ts +0 -426
package/src/data-provider.ts +0 -271
package/src/data-report/data-report-body-style.ts +0 -58
package/src/data-report/data-report-body.ts +0 -189
package/src/data-report/data-report-component.ts +0 -138
package/src/data-report/data-report-field.ts +0 -83
package/src/data-report/data-report-header.ts +0 -242
package/src/data-report/event-handlers/data-report-body-click-handler.ts +0 -38
package/src/data-report/event-handlers/data-report-body-dblclick-handler.ts +0 -25
package/src/data-report/event-handlers/data-report-body-keydown-handler.ts +0 -68
package/src/data-report.ts +0 -424
package/src/editors/index.ts +0 -4
package/src/editors/ox-grist-editor-checkbox.ts +0 -28
package/src/editors/ox-grist-editor-color.ts +0 -10
package/src/editors/ox-grist-editor-date.ts +0 -10
package/src/editors/ox-grist-editor-datetime.ts +0 -27
package/src/editors/ox-grist-editor-email.ts +0 -10
package/src/editors/ox-grist-editor-file.ts +0 -28
package/src/editors/ox-grist-editor-image.ts +0 -31
package/src/editors/ox-grist-editor-month.ts +0 -10
package/src/editors/ox-grist-editor-multiple-select.ts +0 -57
package/src/editors/ox-grist-editor-number.ts +0 -27
package/src/editors/ox-grist-editor-password.ts +0 -10
package/src/editors/ox-grist-editor-select.ts +0 -55
package/src/editors/ox-grist-editor-tel.ts +0 -10
package/src/editors/ox-grist-editor-text.ts +0 -14
package/src/editors/ox-grist-editor-textarea.ts +0 -16
package/src/editors/ox-grist-editor-time.ts +0 -10
package/src/editors/ox-grist-editor-tree.ts +0 -27
package/src/editors/ox-grist-editor-varname.ts +0 -36
package/src/editors/ox-grist-editor-week.ts +0 -10
package/src/editors/ox-grist-editor.ts +0 -207
package/src/editors/ox-input-tree.ts +0 -226
package/src/editors/registry.ts +0 -82
package/src/empty-note.ts +0 -46
package/src/filters/filter-checkbox.ts +0 -49
package/src/filters/filter-input-barcode.ts +0 -34
package/src/filters/filter-input.ts +0 -30
package/src/filters/filter-range-date.ts +0 -81
package/src/filters/filter-range-number.ts +0 -64
package/src/filters/filter-select-buttons.ts +0 -60
package/src/filters/filter-select.ts +0 -68
package/src/filters/filter-styles.ts +0 -119
package/src/filters/filters-form.ts +0 -476
package/src/filters/index.ts +0 -10
package/src/filters/registry.ts +0 -56
package/src/formatters/date-formatter.ts +0 -3
package/src/formatters/index.ts +0 -1
package/src/formatters/number-formatter.ts +0 -3
package/src/formatters/registry.ts +0 -30
package/src/formatters/text-formatter.ts +0 -3
package/src/gutters/gutter-button.ts +0 -51
package/src/gutters/gutter-dirty.ts +0 -96
package/src/gutters/gutter-row-selector.ts +0 -89
package/src/gutters/gutter-sequence.ts +0 -54
package/src/gutters/index.ts +0 -1
package/src/gutters/registry.ts +0 -32
package/src/handlers/contextmenu-tree-mutation.ts +0 -80
package/src/handlers/index.ts +0 -1
package/src/handlers/move-down.ts +0 -44
package/src/handlers/move-up.ts +0 -44
package/src/handlers/record-copy.ts +0 -38
package/src/handlers/record-delete.ts +0 -30
package/src/handlers/record-view-handler.ts +0 -27
package/src/handlers/registry.ts +0 -42
package/src/handlers/select-row-toggle.ts +0 -30
package/src/handlers/select-row.ts +0 -27
package/src/index.ts +0 -17
package/src/personalizer/index.ts +0 -1
package/src/personalizer/ox-grist-filter-personalizer.ts +0 -192
package/src/personalizer/ox-grist-personalizer.ts +0 -226
package/src/record-view/event-handlers/record-view-body-click-handler.ts +0 -33
package/src/record-view/event-handlers/record-view-body-keydown-handler.ts +0 -26
package/src/record-view/index.ts +0 -2
package/src/record-view/ox-record-creator.ts +0 -289
package/src/record-view/record-view-body.ts +0 -250
package/src/record-view/record-view-handler.ts +0 -86
package/src/record-view/record-view.ts +0 -122
package/src/renderers/index.ts +0 -14
package/src/renderers/ox-grist-renderer-boolean.ts +0 -43
package/src/renderers/ox-grist-renderer-color.ts +0 -15
package/src/renderers/ox-grist-renderer-date.ts +0 -62
package/src/renderers/ox-grist-renderer-file.ts +0 -31
package/src/renderers/ox-grist-renderer-image.ts +0 -27
package/src/renderers/ox-grist-renderer-json5.ts +0 -36
package/src/renderers/ox-grist-renderer-link.ts +0 -17
package/src/renderers/ox-grist-renderer-password.ts +0 -7
package/src/renderers/ox-grist-renderer-progress.ts +0 -45
package/src/renderers/ox-grist-renderer-select.ts +0 -58
package/src/renderers/ox-grist-renderer-text.ts +0 -16
package/src/renderers/ox-grist-renderer-textarea.ts +0 -7
package/src/renderers/ox-grist-renderer-tree.ts +0 -189
package/src/renderers/ox-grist-renderer.ts +0 -35
package/src/renderers/registry.ts +0 -111
package/src/sorters/sorters-control.ts +0 -143
package/src/types.ts +0 -813
package/src/utils/index.ts +0 -2
package/src/utils/list-param.ts +0 -72
package/src/utils/supports-passive.ts +0 -13
package/stories/accumulator-format.stories.ts +0 -276
package/stories/barcode-input-filter.stories.ts +0 -216
package/stories/bounded-select-filters.stories.ts +0 -333
package/stories/bounded-select-record.stories.ts +0 -336
package/stories/click-event-custom.stories.ts +0 -288
package/stories/click-event.stories.ts +0 -283
package/stories/creatable-only-column.stories.ts +0 -253
package/stories/default-filters.stories.ts +0 -241
package/stories/dynamic-editable.stories.ts +0 -313
package/stories/empty-sorters.stories.ts +0 -180
package/stories/explicit-fetch.stories.ts +0 -186
package/stories/fixed-column.stories.ts +0 -416
package/stories/grid-setting.stories.ts +0 -501
package/stories/grist-modes.stories.ts +0 -451
package/stories/group-header.stories.ts +0 -442
package/stories/record-view.stories.ts +0 -143
package/stories/textarea.stories.ts +0 -261
package/stories/tree-column-with-checkbox.stories.ts +0 -297
package/stories/tree-column.stories.ts +0 -296
package/tsconfig.json +0 -26
package/web-dev-server.config.mjs +0 -27
package/web-test-runner.config.mjs +0 -45

package/demo/index.html DELETED Viewed

@@ -1,541 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <style>
-      body {
-        /* box-sizing: border-box; */
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-      #app {
-        width: 100vw;
-        height: 100dvh;
-        display: flex;
-        flex-direction: column;
-      }
-      #demo {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      grist-demo {
-        flex: 1;
-        overflow: auto;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" 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"
-    />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <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 '../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/web/icon/icon.js'
-      import { CommonGristStyles } from '@operato/styles'
-      const fetchHandler = async ({ page, limit, sorters = [], filters }) => {
-        console.log('sorters, filters', sorters, filters)
-        var total = 120993
-        var start = (page - 1) * limit
-        await new Promise(resolve => setTimeout(resolve, 500))
-        return {
-          total,
-          records: Array(limit * page > total ? total % limit : limit)
-            .fill()
-            .map((item, idx) => {
-              return {
-                id: idx,
-                name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${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}`,
-                company:
-                  idx % 2
-                    ? {
-                        id: '2',
-                        name: 'HatioLAB',
-                        description: `경기도 성남시-${start + idx + 1}`
-                      }
-                    : {
-                        id: '3',
-                        name: 'HatioSEA',
-                        description: `말레이시아 세티아알람-${start + idx + 1}`
-                      },
-                thumbnail:
-                  idx % 4 === 0
-                    ? '' /* no source */
-                    : idx % 4 === 1
-                      ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
-                      : idx % 4 === 2
-                        ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
-                        : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
-                file: 'abce.txt',
-                number: 100200300,
-                role: ['admin', 'worker', 'tester'][idx % 3],
-                privilege: [undefined, 'read', 'write'][idx % 3],
-                color: idx % 2 ? `#87f018` : `#180f87`,
-                rate: Math.round(Math.random() * 100),
-                dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
-                dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-                homepage:
-                  idx % 2
-                    ? `http://hatiolab.com/${start + idx + 1}`
-                    : `http://deadpool.hatiolab.com/${start + idx + 1}`,
-                json5: {
-                  abc: 'abc',
-                  value: 123,
-                  xyz: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
-                  quantity: 6782341
-                },
-                createdAt: Date.now(),
-                updatedAt: Date.now()
-              }
-            })
-        }
-      }
-      const config = {
-        list: {
-          thumbnail: 'thumbnail',
-          fields: ['name', 'description'],
-          details: ['role', 'email', 'json5']
-        },
-        columns: [
-          {
-            type: 'gutter',
-            gutterName: 'dirty'
-          },
-          {
-            type: 'gutter',
-            gutterName: 'sequence'
-          },
-          {
-            type: 'gutter',
-            gutterName: 'row-selector',
-            title: 'row selector',
-            multiple: true
-          },
-          {
-            type: 'gutter',
-            gutterName: 'button',
-            icon: 'edit',
-            title: 'edit item',
-            handlers: {
-              click: function () {
-                console.log('clicked')
-              }
-            }
-          },
-          {
-            type: 'gutter',
-            gutterName: 'button',
-            icon: 'add',
-            title: 'record copy',
-            handlers: {
-              click: 'record-copy'
-            }
-          },
-          {
-            type: 'gutter',
-            gutterName: 'button',
-            icon: 'arrow_downward',
-            title: '아래로',
-            handlers: {
-              click: 'move-down'
-            }
-          },
-          {
-            type: 'string',
-            name: 'id',
-            hidden: true
-          },
-          {
-            type: 'link',
-            name: 'name',
-            label: true,
-            header: 'name',
-            record: {
-              editable: true,
-              options: {
-                // href: 'http://hatiolab.com',
-                href: function (column, record, rowIndex) {
-                  return record['homepage']
-                },
-                target: '_blank'
-              }
-            },
-            filter: 'search',
-            sortable: true,
-            width: 120
-          },
-          {
-            type: 'string',
-            name: 'description',
-            header: 'description',
-            filter: 'search',
-            record: {
-              editable: true,
-              align: 'left'
-            },
-            width: 200,
-            handlers: {
-              click: (columns, data, column, record, rowIndex, target) => {
-                alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
-              }
-            }
-          },
-          {
-            type: 'number',
-            name: 'number',
-            header: 'number',
-            record: {
-              format: '#,##0.0%'
-            },
-            width: 120
-          },
-          {
-            type: 'email',
-            name: 'email',
-            label: true,
-            header: 'email',
-            record: {
-              editable: true
-            },
-            filter: 'search',
-            sortable: true,
-            width: 130,
-            validation: function (after, before, record, column) {
-              if (after.indexOf('@') == -1) {
-                document.dispatchEvent(
-                  new CustomEvent('notify', {
-                    detail: {
-                      type: 'error',
-                      message: `invalid value - ${after}`
-                    }
-                  })
-                )
-                return false
-              }
-              return true
-            }
-          },
-          {
-            type: 'boolean',
-            name: 'active',
-            header: 'active',
-            record: {
-              editable: true,
-              align: 'center'
-            },
-            filter: true,
-            handlers: {
-              dblclick: () => {
-                const grist = document.querySelector('ox-grist')
-                console.log(grist.dirtyRecords)
-              }
-            },
-            sortable: true,
-            width: 60
-          },
-          {
-            type: 'select-buttons',
-            name: 'role',
-            label: true,
-            header: 'role',
-            record: {
-              options: ['', 'admin', 'worker', 'tester'],
-              editable: true
-            },
-            filter: true,
-            sortable: true,
-            width: 120
-          },
-          {
-            type: 'select',
-            name: 'privilege',
-            label: true,
-            header: 'privilege',
-            record: {
-              options: ['read', 'write'],
-              multiple: true,
-              editable: true
-            },
-            filter: 'in',
-            sortable: true,
-            width: 120
-          },
-          {
-            type: 'color',
-            name: 'color',
-            header: 'color',
-            record: {
-              editable: true
-            },
-            sortable: true,
-            width: 50
-          },
-          {
-            type: 'float',
-            name: 'rate',
-            header: 'rate',
-            record: {
-              align: 'right',
-              editable: true
-            },
-            filter: 'between',
-            sortable: true,
-            width: 50
-          },
-          {
-            type: 'json5',
-            name: 'json5',
-            header: 'JSON5',
-            label: true,
-            width: 200
-          },
-          {
-            type: 'progress',
-            name: 'rate',
-            header: 'progress',
-            record: {
-              editable: true
-            },
-            width: 200
-          },
-          {
-            type: 'image',
-            name: 'thumbnail',
-            header: 'thumbnail',
-            record: {
-              editable: true
-            },
-            handlers: {
-              click: () => {
-                console.log('thumbnail clicked...')
-              }
-            },
-            width: 200
-          },
-          {
-            type: 'file',
-            name: 'file',
-            header: 'file',
-            record: {
-              editable: true
-            },
-            handlers: {
-              click: () => {
-                console.log('thumbnail clicked...')
-              }
-            },
-            width: 200
-          },
-          {
-            type: 'datetime',
-            name: 'updatedAt',
-            header: 'updated at',
-            record: {
-              editable: true
-            },
-            filter: 'between',
-            sortable: true,
-            width: 180
-          },
-          {
-            type: 'datetime',
-            name: 'createdAt',
-            header: 'created at',
-            record: {
-              editable: false
-            },
-            sortable: true,
-            width: 180
-          }
-        ],
-        rows: {
-          selectable: {
-            multiple: true
-          },
-          handlers: {
-            click: 'select-row-toggle'
-          },
-          classifier: function (record, rowIndex) {
-            const rate = record['rate']
-            const emphasized =
-              rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
-            return {
-              emphasized
-            }
-          }
-        },
-        sorters: [
-          {
-            name: 'name',
-            desc: true
-          },
-          {
-            name: 'email'
-          }
-        ],
-        pagination: {
-          pages: [30, 500, 1000, 1500, 2000]
-        }
-      }
-      class GristDemo extends LitElement {
-        static styles = [
-          CommonGristStyles,
-          css`
-            :host {
-              display: flex;
-              flex-direction: column;
-            }
-            #tailer {
-              display: flex;
-              flex-direction: row;
-              margin: 0 var(--margin-default);
-            }
-            #tailer a {
-              padding: 0 var(--padding-default) 0 var(--padding-default);
-              margin: 0 var(--spacing-small);
-              border-right: 1px solid rgba(0, 0, 0, 0.1);
-              font-size: var(--fontsize-default);
-              color: var(--md-sys-color-on-primary-container);
-            }
-          `
-        ]
-        static get properties() {
-          return {
-            sorters: Object,
-            filters: Object,
-            mode: String
-          }
-        }
-        get grist() {
-          return this.renderRoot.querySelector('ox-grist')
-        }
-        render() {
-          const mode = this.mode || 'CARD'
-          return html`
-            <ox-grist
-              .config=${config}
-              .mode=${mode}
-              auto-fetch
-              url-params-sensitive
-              .fetchHandler=${fetchHandler}
-              @filters-change=${e => console.log('changed', e.detail)}
-            >
-              <div slot="headroom">
-                <ox-filters-form></ox-filters-form>
-              </div>
-              <div slot="headroom" id="headroom">
-                <div id="tailer">
-                  <a href="./report-test.html">Report Test</a>
-                  <a
-                    href="#"
-                    @click=${() => {
-                      this.renderRoot.querySelector('ox-grist').reset()
-                    }}
-                    >Reset</a
-                  >
-                  <a
-                    href="#"
-                    @click=${() => {
-                      this.renderRoot.querySelector('ox-grist').fetch(true)
-                    }}
-                    >Fetch</a
-                  >
-                </div>
-                <div id="sorters">
-                  Sort
-                  <md-icon
-                    @click=${e => {
-                      const target = e.currentTarget
-                      this.renderRoot.querySelector('#sorter-control').open({
-                        right: 0,
-                        top: target.offsetTop + target.offsetHeight
-                      })
-                    }}
-                    >expand_more</md-icon
-                  >
-                  <ox-popup id="sorter-control">
-                    <ox-sorters-control> </ox-sorters-control>
-                  </ox-popup>
-                </div>
-                <div id="modes">
-                  <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
-                  <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
-                  <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-                </div>
-                <ox-record-creator id="add" light-popup>
-                  <button><md-icon>add</md-icon></button>
-                </ox-record-creator>
-                <button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
-              </div>
-            </ox-grist>
-          `
-        }
-      }
-      customElements.define('grist-demo', GristDemo)
-      setTimeout(() => {
-        render(html` <grist-demo mode="GRID"></grist-demo> `, document.querySelector('#demo'))
-      })
-    </script>
-    <div id="app">
-      <div id="demo"></div>
-    </div>
-  </body>
-</html>