npm - @operato/dataset - Versions diffs - 1.0.0-alpha.20 → 1.0.0-alpha.23 - Mend

@operato/dataset 1.0.0-alpha.20 → 1.0.0-alpha.23

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

package/CHANGELOG.md +39 -0
package/demo/data-item-grist.html +343 -0
package/demo/index.html +6 -90
package/demo/ox-data-entry-form.html +110 -0
package/demo/ox-data-item-spec.html +148 -0
package/dist/src/grist-editor/index.d.ts +1 -0
package/dist/src/grist-editor/index.js +7 -0
package/dist/src/grist-editor/index.js.map +1 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.d.ts +13 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js +90 -0
package/dist/src/grist-editor/ox-data-item-spec-editor-popup.js.map +1 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.d.ts +18 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.js +98 -0
package/dist/src/grist-editor/ox-data-item-spec-editor.js.map +1 -0
package/dist/src/index.d.ts +3 -1
package/dist/src/index.js +3 -1
package/dist/src/index.js.map +1 -1
package/dist/src/ox-data-entry-form.d.ts +1 -24
package/dist/src/ox-data-entry-form.js +7 -5
package/dist/src/ox-data-entry-form.js.map +1 -1
package/dist/src/ox-data-item-spec.d.ts +22 -0
package/dist/src/ox-data-item-spec.js +67 -0
package/dist/src/ox-data-item-spec.js.map +1 -0
package/dist/src/types.d.ts +38 -0
package/dist/src/types.js +2 -0
package/dist/src/types.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +16 -11
package/src/grist-editor/index.ts +10 -0
package/src/grist-editor/ox-data-item-spec-editor-popup.ts +90 -0
package/src/grist-editor/ox-data-item-spec-editor.ts +105 -0
package/src/index.ts +3 -1
package/src/ox-data-entry-form.ts +8 -27
package/src/ox-data-item-spec.ts +64 -0
package/src/types.ts +38 -0
package/themes/grist-theme.css +194 -0
package/themes/oops-theme.css +26 -0
package/themes/report-theme.css +47 -0
package/translations/en.json +1 -0
package/translations/ko.json +1 -0
package/translations/ms.json +1 -0
package/translations/zh.json +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
+### :rocket: New Features
+* added qc module ([263b679](https://github.com/hatiolab/operato/commit/263b6794b97a635df1a50d013adaef2e83635908))
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+### :bug: Bug Fix
+* ccp demo ([67b7d65](https://github.com/hatiolab/operato/commit/67b7d65b48d0ca7b3350684a45a396c0538c4902))
+### :rocket: New Features
+* added data-item-spec-editor for grist ([8376e14](https://github.com/hatiolab/operato/commit/8376e142d894a709e60ed676e917d5a26e01e374))
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+### :rocket: New Features
+* @operato/ccp module added ([f08ba5a](https://github.com/hatiolab/operato/commit/f08ba5a464c04b7fb132c6f18de975997087846a))
+* ccp spec provider ([d72fe7c](https://github.com/hatiolab/operato/commit/d72fe7c497685e7f033ef04e6a866bd86613f397))
+### :bug: Bug Fix
+* demo ([6fa3eac](https://github.com/hatiolab/operato/commit/6fa3eac612bd98ce25e3ef6d8ce89527d7152fb4))
+* description on ox-data-item-spec view ([47da306](https://github.com/hatiolab/operato/commit/47da306a253a96e0c24c986e4608bfe0713a111a))
 ## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)

package/demo/data-item-grist.html ADDED Viewed

@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" />
+    <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: 100vh;
+        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/css?family=Material+Icons&display=block" 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" />
+    <script>
+      // HACK(keanulee): The Redux package assumes `process` exists - mock it here before
+      // the module is loaded.
+      window.process = {
+        env: {
+          NODE_ENV: 'production'
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <script type="module">
+      import { LitElement, html, css, render } from 'lit'
+      import '@operato/data-grist'
+      import '@operato/data-grist/ox-filters-form.js'
+      import '@operato/data-grist/ox-sorters-control.js'
+      import '@material/mwc-icon'
+      import { CommonGristStyles } from '@operato/styles'
+      import { i18next } from '@operato/i18n'
+      /* set grist-editors */
+      import '../dist/src/grist-editor/index.js'
+      const fetchHandler = async ({ page, limit, sorters = [] }) => {
+        var total = 10
+        var start = (page - 1) * limit
+        return {
+          total,
+          records: Array(limit * page > total ? total % limit : limit)
+            .fill()
+            .map((item, idx) => {
+              return {
+                id: idx,
+                name: `name-${start + idx + 1}`,
+                description: `description-${start + idx + 1}`,
+                sequence: idx + 1,
+                active: true,
+                tag: `tag-${idx + 1}`,
+                type: idx % 3 === 0 ? 'select' : idx % 3 === 1 ? 'number' : 'string',
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+              }
+            })
+        }
+      }
+      var config = {
+        list: { fields: ['name', 'description', 'active'] },
+        columns: [
+          { type: 'gutter', gutterName: 'row-selector', multiple: true },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'add',
+            handlers: {
+              click: 'record-copy'
+            }
+          },
+          { type: 'gutter', gutterName: 'sequence' },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_upward',
+            handlers: {
+              click: 'move-up'
+            }
+          },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'arrow_downward',
+            handlers: {
+              click: 'move-down'
+            }
+          },
+          {
+            type: 'number',
+            name: 'sequence',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'id',
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: i18next.t('field.name'),
+            record: {
+              editable: true
+            },
+            width: 140
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: i18next.t('field.description'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'checkbox',
+            name: 'active',
+            label: true,
+            header: i18next.t('field.active'),
+            record: {
+              editable: true
+            },
+            sortable: true,
+            width: 60
+          },
+          {
+            type: 'string',
+            name: 'tag',
+            header: i18next.t('field.tag'),
+            record: {
+              editable: true
+            },
+            width: 180
+          },
+          {
+            type: 'select',
+            name: 'type',
+            header: i18next.t('field.type'),
+            record: {
+              options: ['', 'number', 'text', 'select', 'boolean', 'file'],
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'parameters',
+            name: 'options',
+            header: i18next.t('field.options'),
+            record: {
+              editable: true,
+              renderer: (value, column, record, rowIndex, field) => {
+                return typeof value === 'string' ? value : typeof value === 'object' ? JSON.stringify(value) : ''
+              },
+              options: async (value, column, record, row, field) => {
+                return {
+                  name: record.type,
+                  help: '',
+                  spec:
+                    record.type === 'select'
+                      ? [
+                          {
+                            type: 'options',
+                            name: 'options',
+                            label: 'options'
+                          }
+                        ]
+                      : [],
+                  context: this.grist,
+                  objectified: true
+                }
+              }
+            },
+            width: 120
+          },
+          {
+            type: 'string',
+            name: 'unit',
+            header: i18next.t('field.unit'),
+            record: {
+              editable: true
+            },
+            width: 120
+          },
+          {
+            type: 'number',
+            name: 'quota',
+            header: i18next.t('field.quota'),
+            record: {
+              editable: true
+            },
+            width: 60
+          },
+          {
+            type: 'data-item-spec',
+            name: 'spec',
+            header: i18next.t('field.spec'),
+            record: {
+              editable: true,
+              options: {
+                name,
+                objectified: true
+              }
+            },
+            width: 200
+          }
+        ],
+        rows: {
+          selectable: {
+            multiple: true
+          }
+        },
+        pagination: {
+          infinite: true
+        },
+        sorters: [
+          {
+            name: 'sequence'
+          }
+        ]
+      }
+      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(--margin-narrow);
+              border-right: 1px solid rgba(0, 0, 0, 0.1);
+              font-size: var(--fontsize-default);
+              color: var(--primary-color);
+            }
+          `
+        ]
+        static get properties() {
+          return {
+            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 .fetchHandler=${fetchHandler}>
+              <div id="filters" slot="headroom">
+                <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
+              </div>
+              <div slot="headroom" id="headroom">
+                <div id="sorters">
+                  Sort
+                  <mwc-icon
+                    @click=${e => {
+                      const target = e.currentTarget
+                      this.renderRoot.querySelector('#sorter-control').open({
+                        right: 0,
+                        top: target.offsetTop + target.offsetHeight
+                      })
+                    }}
+                    >expand_more</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>
+            </ox-grist>
+          `
+        }
+      }
+      customElements.define('ox-data-items', GristDemo)
+      setTimeout(() => {
+        render(html` <ox-data-items mode="LIST"></ox-data-items> `, document.querySelector('#demo'))
+      })
+    </script>
+    <div id="app">
+      <div id="demo"></div>
+    </div>
+  </body>
+</html>

package/demo/index.html CHANGED Viewed

@@ -8,103 +8,19 @@
         --ox-checkbox-size: 12px;
       }
-      #demo {
+      a {
+        display: block;
       }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/form-theme.css" rel="stylesheet" />
   </head>
   <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-data-entry-form.js'
-      const parent = document.querySelector('#demo')
-      const dataSet = {
-        name: 'sample',
-        description: 'sample description',
-        dataItems: [
-          {
-            name: '창고 온도',
-            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
-            sequence: 1,
-            tag: 'temp',
-            type: 'number',
-            quota: 1
-          },
-          {
-            name: '창고 습도',
-            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
-            sequence: 2,
-            tag: 'humid',
-            type: 'number',
-            quota: 5
-          },
-          {
-            name: '육안 검사',
-            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
-            sequence: 3,
-            tag: 'inspection',
-            type: 'boolean',
-            quota: 3
-          },
-          {
-            name: '품평',
-            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
-            sequence: 4,
-            tag: 'evaluation',
-            type: 'select',
-            options: {
-              options: [
-                { text: '최우수', value: '최우수' },
-                { text: '우수', value: '우수' },
-                { text: '보통', value: '보통' },
-                { text: '미달', value: '미달' }
-              ]
-            },
-            quota: 3
-          },
-          {
-            name: '코멘트',
-            description: '특이사항을 기록함.',
-            sequence: 4,
-            tag: 'comment',
-            type: 'string',
-            quota: 1
-          },
-          {
-            name: '첨부파일',
-            description: '참조 첨부 파일.',
-            sequence: 4,
-            tag: 'attachment',
-            type: 'file',
-            quota: 1
-          }
-        ]
-      }
-      var value = {
-        temp: 1000,
-        humid: [20, 23, 21, 26, 27],
-        inspection: [true, false, true],
-        evaluation: ['최우수', '보통', '우수']
-      }
-      render(
-        html`<ox-data-entry-form
-          .dataSet=${dataSet}
-          .value=${value}
-          @change=${e => {
-            value = e.detail
-            console.log('change', value)
-          }}
-        ></ox-data-entry-form>`,
-        parent
-      )
-    </script>
+    <a href="./ox-data-entry-form.html">ox-data-entry-form</a>
+    <a href="./ox-data-item-spec.html">ox-data-item-spec</a>
+    <a href="./data-item-grist.html">data-item-grist</a>
   </body>
 </html>

package/demo/ox-data-entry-form.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
+    <style>
+      body {
+        --ox-checkbox-size: 12px;
+      }
+      #demo {
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/form-theme.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script type="module">
+      import { html, render } from 'lit'
+      import '../dist/src/ox-data-entry-form.js'
+      const parent = document.querySelector('#demo')
+      const dataSet = {
+        name: 'sample',
+        description: 'sample description',
+        dataItems: [
+          {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            sequence: 1,
+            tag: 'temp',
+            type: 'number',
+            quota: 1
+          },
+          {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            sequence: 2,
+            tag: 'humid',
+            type: 'number',
+            quota: 5
+          },
+          {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+            sequence: 3,
+            tag: 'inspection',
+            type: 'boolean',
+            quota: 3
+          },
+          {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            sequence: 4,
+            tag: 'evaluation',
+            type: 'select',
+            options: {
+              options: [
+                { text: '최우수', value: '최우수' },
+                { text: '우수', value: '우수' },
+                { text: '보통', value: '보통' },
+                { text: '미달', value: '미달' }
+              ]
+            },
+            quota: 3
+          },
+          {
+            name: '코멘트',
+            description: '특이사항을 기록함.',
+            sequence: 4,
+            tag: 'comment',
+            type: 'string',
+            quota: 1
+          },
+          {
+            name: '첨부파일',
+            description: '참조 첨부 파일.',
+            sequence: 4,
+            tag: 'attachment',
+            type: 'file',
+            quota: 1
+          }
+        ]
+      }
+      var value = {
+        temp: 1000,
+        humid: [20, 23, 21, 26, 27],
+        inspection: [true, false, true],
+        evaluation: ['최우수', '보통', '우수']
+      }
+      render(
+        html`<ox-data-entry-form
+          .dataSet=${dataSet}
+          .value=${value}
+          @change=${e => {
+            value = e.detail
+            console.log('change', value)
+          }}
+        ></ox-data-entry-form>`,
+        parent
+      )
+    </script>
+  </body>
+</html>