@things-factory/reference-app 4.0.5 → 4.0.9

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.
package/Dockerfile CHANGED
@@ -2,7 +2,7 @@
2
2
  FROM ubuntu:18.04
3
3
 
4
4
  # Use an official node image
5
- FROM node:12.20.2
5
+ FROM node:14.18
6
6
 
7
7
  ARG DEBIAN_FRONTEND=noninteractive
8
8
 
@@ -7,6 +7,9 @@ import { css, html, LitElement } from 'lit-element'
7
7
 
8
8
  import { client } from '@things-factory/shell'
9
9
 
10
+ var FILES = []
11
+ var RESULT = []
12
+
10
13
  class OCRViewPart extends LitElement {
11
14
  static get styles() {
12
15
  return [
@@ -25,7 +28,17 @@ class OCRViewPart extends LitElement {
25
28
  }
26
29
 
27
30
  static get properties() {
28
- return {}
31
+ return {
32
+ _result: Array,
33
+ _files: Array
34
+ }
35
+ }
36
+
37
+ connectedCallback() {
38
+ super.connectedCallback()
39
+
40
+ this._files = FILES
41
+ this._result = RESULT
29
42
  }
30
43
 
31
44
  render() {
@@ -37,11 +50,13 @@ class OCRViewPart extends LitElement {
37
50
  requestAnimationFrame(() => URL.revokeObjectURL(image))
38
51
  }
39
52
 
40
- return html` <ox-ocr-helper @attached=${this.upload.bind(this)}> </ox-ocr-helper> `
53
+ return html`
54
+ <ox-ocr-helper @attached=${this.upload.bind(this)} .files=${this._files} .result=${this._result}> </ox-ocr-helper>
55
+ `
41
56
  }
42
57
 
43
58
  async upload(e) {
44
- const images = e.detail
59
+ FILES = this._files = e.detail
45
60
 
46
61
  const response = await client.query({
47
62
  query: gql`
@@ -50,14 +65,14 @@ class OCRViewPart extends LitElement {
50
65
  }
51
66
  `,
52
67
  variables: {
53
- images: images
68
+ images: this._files
54
69
  },
55
70
  context: { hasUpload: true }
56
71
  })
57
72
 
58
73
  if (!response.errors) {
59
74
  const helper = this.shadowRoot.querySelector('ox-ocr-helper')
60
- helper.result = response.data.ocrRequest.map(result => {
75
+ RESULT = helper.result = response.data.ocrRequest.map(result => {
61
76
  return {
62
77
  ...result,
63
78
  boundaries: JSON.parse(result.boundaries)
@@ -1,9 +1,10 @@
1
1
  import '@material/mwc-icon'
2
- import '@operato/mini-popup'
2
+ import '@operato/popup'
3
3
 
4
4
  import { css, html } from 'lit-element'
5
5
  import { connect } from 'pwa-helpers/connect-mixin.js'
6
6
 
7
+ import { PopupMenu } from '@operato/popup'
7
8
  import { PageView, store } from '@things-factory/shell'
8
9
 
9
10
  import { referencePageStyles } from './reference-page-styles'
@@ -39,93 +40,114 @@ class ContextMenuPage extends connect(store)(PageView) {
39
40
  페이지내에 엘리먼트를 위치시키고 open method로 활성화 시키는 방법을 예시합니다. 데스크톱 브라우저 페이지 내 어느
40
41
  위치에서든 마우스 우측버튼을 클릭하고, 모바일 디바이스에서는 탭을 오래누르면(longpress) 팝업메뉴가 동작합니다.
41
42
  </p>
43
+ `
44
+ }
42
45
 
43
- <popup-menu>
44
- <popup-menuitem label="article">
45
- <mwc-icon slot="icon">article</mwc-icon>
46
- </popup-menuitem>
47
-
48
- <popup-menuitem label="home">
49
- <mwc-icon slot="icon">home</mwc-icon>
50
- </popup-menuitem>
51
-
52
- <popup-menuitem label="empty"> </popup-menuitem>
53
-
54
- <popup-menuitem
55
- label="click me to toggle"
56
- @click=${function (e) {
57
- const target = e.currentTarget
58
- const icon = target.querySelector('mwc-icon')
59
- icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
60
- }}
61
- >
62
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
63
- </popup-menuitem>
64
-
65
- <popup-menuitem label="verified">
66
- <mwc-icon slot="icon">verified</mwc-icon>
67
- <popup-menu>
68
- <popup-menuitem label="article">
46
+ firstUpdated() {
47
+ this.addEventListener('contextmenu', e => {
48
+ e.preventDefault()
49
+
50
+ PopupMenu.open({
51
+ template: html`
52
+ <ox-popup-menuitem
53
+ label="article - click me"
54
+ @selected=${function (e) {
55
+ console.log('first level article selected')
56
+ }}
57
+ >
69
58
  <mwc-icon slot="icon">article</mwc-icon>
70
- </popup-menuitem>
59
+ </ox-popup-menuitem>
71
60
 
72
- <popup-menuitem label="home">
61
+ <ox-popup-menuitem label="home">
73
62
  <mwc-icon slot="icon">home</mwc-icon>
74
- </popup-menuitem>
75
-
76
- <popup-menuitem label="verified">
63
+ </ox-popup-menuitem>
64
+
65
+ <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
66
+
67
+ <ox-popup-menuitem
68
+ label="click me to toggle"
69
+ @selected=${function (e) {
70
+ const icon = this.querySelector('mwc-icon')
71
+ icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
72
+ }}
73
+ alive-on-select
74
+ >
75
+ <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
76
+ </ox-popup-menuitem>
77
+
78
+ <ox-popup-menuitem label="verified" @selected=${e => console.log('selected verified')}>
77
79
  <mwc-icon slot="icon">verified</mwc-icon>
78
- <popup-menu>
79
- <popup-menuitem label="article">
80
+ <ox-popup-menu>
81
+ <ox-popup-menuitem
82
+ label="article"
83
+ @selected=${function (e) {
84
+ console.log('article selected')
85
+ }}
86
+ alive-on-select
87
+ >
80
88
  <mwc-icon slot="icon">article</mwc-icon>
81
- </popup-menuitem>
89
+ </ox-popup-menuitem>
82
90
 
83
- <popup-menuitem label="home">
91
+ <ox-popup-menuitem label="home">
84
92
  <mwc-icon slot="icon">home</mwc-icon>
85
- </popup-menuitem>
93
+ </ox-popup-menuitem>
86
94
 
87
- <popup-menuitem label="verified">
95
+ <ox-popup-menuitem label="verified">
88
96
  <mwc-icon slot="icon">verified</mwc-icon>
89
- </popup-menuitem>
97
+ <ox-popup-menu>
98
+ <ox-popup-menuitem label="article">
99
+ <mwc-icon slot="icon">article</mwc-icon>
100
+ </ox-popup-menuitem>
90
101
 
91
- <popup-menuitem label="checkbox">
92
- <input type="checkbox" slot="icon" />
93
- </popup-menuitem>
94
-
95
- <div separator></div>
96
- </popup-menu>
97
- </popup-menuitem>
102
+ <ox-popup-menuitem label="home">
103
+ <mwc-icon slot="icon">home</mwc-icon>
104
+ </ox-popup-menuitem>
98
105
 
99
- <div separator></div>
106
+ <ox-popup-menuitem label="verified">
107
+ <mwc-icon slot="icon">verified</mwc-icon>
108
+ </ox-popup-menuitem>
100
109
 
101
- <popup-menuitem label="checkbox">
102
- <input type="checkbox" slot="icon" />
103
- </popup-menuitem>
104
- </popup-menu>
105
- </popup-menuitem>
110
+ <ox-popup-menuitem label="checkbox">
111
+ <input type="checkbox" slot="icon" />
112
+ </ox-popup-menuitem>
106
113
 
107
- <popup-menuitem label="checkbox">
108
- <input type="checkbox" slot="icon" />
109
- </popup-menuitem>
114
+ <div separator></div>
115
+ </ox-popup-menu>
116
+ </ox-popup-menuitem>
110
117
 
111
- <div separator></div>
118
+ <div separator></div>
112
119
 
113
- <div menu>Plain DIV</div>
114
- <input type="checkbox" menu />
115
- <input type="text" menu value="Plain text input" />
116
- </popup-menu>
117
- `
118
- }
120
+ <ox-popup-menuitem label="checkbox">
121
+ <input type="checkbox" slot="icon" />
122
+ </ox-popup-menuitem>
123
+ </ox-popup-menu>
124
+ </ox-popup-menuitem>
119
125
 
120
- firstUpdated() {
121
- this.addEventListener('contextmenu', e => {
122
- const popupMenu = this.renderRoot.querySelector('popup-menu')
126
+ <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
127
+ <input type="checkbox" slot="icon" />
128
+ </ox-popup-menuitem>
123
129
 
124
- if (popupMenu) {
125
- e.preventDefault()
130
+ <div separator></div>
126
131
 
127
- popupMenu.open({ left: e.offsetX, top: e.offsetY })
128
- }
132
+ <div menu>Plain Text</div>
133
+
134
+ <div menu alive-on-select>
135
+ <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
136
+ </div>
137
+
138
+ <div menu alive-on-select>
139
+ <input id="checkbox-01" type="checkbox" />
140
+ <label for="checkbox-01">custom menu</label>
141
+ </div>
142
+ <div menu alive-on-select>
143
+ <label for="text-01">value</label>
144
+ <input id="text-01" type="text" value="Plain text input" />
145
+ </div>
146
+ `,
147
+ top: e.offsetY,
148
+ left: e.offsetX,
149
+ parent: this.renderRoot
150
+ })
129
151
  })
130
152
  }
131
153
  }
@@ -1,4 +1,4 @@
1
- import '@operato/mini-popup'
1
+ import '@operato/popup'
2
2
  import '@operato/data-grist'
3
3
 
4
4
  import { css, html } from 'lit-element'
@@ -111,7 +111,7 @@ class GristModePage extends localize(i18next)(PageView) {
111
111
  <mwc-icon
112
112
  @click=${e => {
113
113
  const target = e.currentTarget
114
- this.renderRoot.querySelector('popup-menu').open({
114
+ this.renderRoot.querySelector('ox-popup-list').open({
115
115
  left: target.offsetLeft,
116
116
  top: target.offsetTop + target.offsetHeight
117
117
  })
@@ -121,7 +121,7 @@ class GristModePage extends localize(i18next)(PageView) {
121
121
  <mwc-icon
122
122
  @click=${e => {
123
123
  const target = e.currentTarget
124
- this.renderRoot.querySelector('popup-menu').open({
124
+ this.renderRoot.querySelector('ox-popup-list').open({
125
125
  left: target.offsetLeft,
126
126
  top: target.offsetTop + target.offsetHeight
127
127
  })
@@ -131,7 +131,7 @@ class GristModePage extends localize(i18next)(PageView) {
131
131
  <mwc-icon
132
132
  @click=${e => {
133
133
  const target = e.currentTarget
134
- this.renderRoot.querySelector('popup-menu').open({
134
+ this.renderRoot.querySelector('ox-popup-list').open({
135
135
  left: target.offsetLeft,
136
136
  top: target.offsetTop + target.offsetHeight
137
137
  })
@@ -139,26 +139,28 @@ class GristModePage extends localize(i18next)(PageView) {
139
139
  >sort</mwc-icon
140
140
  >
141
141
 
142
- <popup-menu>
143
- <popup-menuitem
144
- label="click me to toggle"
142
+ <ox-popup-list alive-on-select>
143
+ <div
144
+ option
145
145
  @click=${function (e) {
146
146
  const icon = e.currentTarget.querySelector('mwc-icon')
147
147
  icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
148
148
  }}
149
149
  >
150
150
  <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
151
- </popup-menuitem>
152
- <popup-menuitem
153
- label="click me to toggle"
151
+ <span>click me to toggle</span>
152
+ </div>
153
+ <div
154
+ option
154
155
  @click=${function (e) {
155
156
  const icon = e.currentTarget.querySelector('mwc-icon')
156
157
  icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
157
158
  }}
158
159
  >
159
160
  <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
160
- </popup-menuitem>
161
- </popup-menu>
161
+ <span>click me to toggle</span>
162
+ </div>
163
+ </ox-popup-list>
162
164
  </div>
163
165
  </div>
164
166
  </ox-grist>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/reference-app",
3
- "version": "4.0.5",
3
+ "version": "4.0.9",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "client/index.js",
6
6
  "things-factory": true,
@@ -37,50 +37,50 @@
37
37
  "docker:run": "docker run -it -p 4000:3000 hatiolab/reference-app:latest"
38
38
  },
39
39
  "dependencies": {
40
- "@hatiolab/things-scene": "^2.7.12",
41
- "@material/mwc-checkbox": "^0.22.1",
42
- "@operato/data-grist": "^0.2.18",
43
- "@operato/ghost-print": "0.1.14",
44
- "@operato/mini-popup": "^0.2.5",
45
- "@operato/ocr": "^0.2.21",
46
- "@operato/pull-to-refresh": "^0.2.4",
47
- "@things-factory/api": "^4.0.5",
48
- "@things-factory/apptool-ui": "^4.0.5",
49
- "@things-factory/auth-ui": "^4.0.5",
50
- "@things-factory/board-service": "^4.0.5",
51
- "@things-factory/board-ui": "^4.0.5",
52
- "@things-factory/context-ui": "^4.0.5",
53
- "@things-factory/dashboard": "^4.0.5",
54
- "@things-factory/export-ui": "^4.0.5",
55
- "@things-factory/export-ui-excel": "^4.0.5",
56
- "@things-factory/grist-ui": "^4.0.5",
57
- "@things-factory/help": "^4.0.5",
58
- "@things-factory/i18n-ui": "^4.0.5",
59
- "@things-factory/integration-ui": "^4.0.5",
60
- "@things-factory/lite-menu": "^4.0.5",
61
- "@things-factory/more-ui": "^4.0.5",
62
- "@things-factory/notification": "^4.0.5",
63
- "@things-factory/oauth2-client": "^4.0.5",
64
- "@things-factory/print-ui": "^4.0.5",
65
- "@things-factory/resource-ui": "^4.0.5",
66
- "@things-factory/scene-chartjs": "^4.0.5",
67
- "@things-factory/scene-clock": "^4.0.5",
68
- "@things-factory/scene-form": "^4.0.5",
69
- "@things-factory/scene-gauge": "^4.0.5",
70
- "@things-factory/scene-half-roundrect": "^4.0.5",
71
- "@things-factory/scene-indoor-map": "^4.0.5",
72
- "@things-factory/scene-news-ticker": "^4.0.5",
73
- "@things-factory/scene-progressbar": "^4.0.5",
74
- "@things-factory/scene-random": "^4.0.5",
75
- "@things-factory/scene-switch": "^4.0.5",
76
- "@things-factory/scene-tab": "^4.0.5",
77
- "@things-factory/setting-base": "^4.0.5",
78
- "@things-factory/setting-ui": "^4.0.5",
79
- "@things-factory/shell": "^4.0.5",
80
- "@things-factory/system-ui": "^4.0.5"
40
+ "@hatiolab/things-scene": "^2.7.20",
41
+ "@material/mwc-checkbox": "^0.25.3",
42
+ "@operato/data-grist": "^0.2.35",
43
+ "@operato/ghost-print": "^0.2.35",
44
+ "@operato/ocr": "^0.2.35",
45
+ "@operato/popup": "^0.2.35",
46
+ "@operato/pull-to-refresh": "^0.2.35",
47
+ "@operato/scene-switch": "^0.0.9",
48
+ "@things-factory/api": "^4.0.9",
49
+ "@things-factory/apptool-ui": "^4.0.9",
50
+ "@things-factory/auth-ui": "^4.0.9",
51
+ "@things-factory/board-service": "^4.0.9",
52
+ "@things-factory/board-ui": "^4.0.9",
53
+ "@things-factory/context-ui": "^4.0.9",
54
+ "@things-factory/dashboard": "^4.0.9",
55
+ "@things-factory/export-ui": "^4.0.9",
56
+ "@things-factory/export-ui-excel": "^4.0.9",
57
+ "@things-factory/grist-ui": "^4.0.9",
58
+ "@things-factory/help": "^4.0.9",
59
+ "@things-factory/i18n-ui": "^4.0.9",
60
+ "@things-factory/integration-ui": "^4.0.9",
61
+ "@things-factory/lite-menu": "^4.0.9",
62
+ "@things-factory/more-ui": "^4.0.9",
63
+ "@things-factory/notification": "^4.0.9",
64
+ "@things-factory/oauth2-client": "^4.0.9",
65
+ "@things-factory/print-ui": "^4.0.9",
66
+ "@things-factory/resource-ui": "^4.0.9",
67
+ "@things-factory/scene-chartjs": "^4.0.9",
68
+ "@things-factory/scene-clock": "^4.0.9",
69
+ "@things-factory/scene-form": "^4.0.9",
70
+ "@things-factory/scene-gauge": "^4.0.9",
71
+ "@things-factory/scene-half-roundrect": "^4.0.9",
72
+ "@things-factory/scene-indoor-map": "^4.0.9",
73
+ "@things-factory/scene-news-ticker": "^4.0.9",
74
+ "@things-factory/scene-progressbar": "^4.0.9",
75
+ "@things-factory/scene-random": "^4.0.9",
76
+ "@things-factory/scene-tab": "^4.0.9",
77
+ "@things-factory/setting-base": "^4.0.9",
78
+ "@things-factory/setting-ui": "^4.0.9",
79
+ "@things-factory/shell": "^4.0.9",
80
+ "@things-factory/system-ui": "^4.0.9"
81
81
  },
82
82
  "devDependencies": {
83
- "@things-factory/builder": "^4.0.5"
83
+ "@things-factory/builder": "^4.0.9"
84
84
  },
85
- "gitHead": "b7b2976818dceab74a34903499d408eed5d45b04"
85
+ "gitHead": "81c8ae24487cfe79da62717f12bb6752761911ae"
86
86
  }
@@ -6,5 +6,6 @@
6
6
  "field.color": "color",
7
7
  "field.role": "role",
8
8
  "field.dynamic_type": "dynamic type",
9
- "field.dynamic_value": "dynamic value"
10
- }
9
+ "field.dynamic_value": "dynamic value",
10
+ "text.ox-data-report-grand-total": "grand total"
11
+ }
@@ -6,5 +6,6 @@
6
6
  "field.color": "색상",
7
7
  "field.role": "역할",
8
8
  "field.dynamic_type": "변화 타입",
9
- "field.dynamic_value": "변화타입 값"
10
- }
9
+ "field.dynamic_value": "변화타입 값",
10
+ "text.ox-data-report-grand-total": "총합계"
11
+ }
@@ -6,5 +6,6 @@
6
6
  "field.color": "color",
7
7
  "field.role": "role",
8
8
  "field.dynamic_type": "dynamic type",
9
- "field.dynamic_value": "dynamic value"
10
- }
9
+ "field.dynamic_value": "dynamic value",
10
+ "text.ox-data-report-grand-total": "grand total"
11
+ }
@@ -6,5 +6,6 @@
6
6
  "field.color": "color",
7
7
  "field.role": "role",
8
8
  "field.dynamic_type": "dynamic type",
9
- "field.dynamic_value": "dynamic value"
10
- }
9
+ "field.dynamic_value": "dynamic value",
10
+ "text.ox-data-report-grand-total": "grand total"
11
+ }
@@ -80,7 +80,6 @@
80
80
  <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
81
81
  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
82
82
  <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>
83
- <script src="node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
84
83
  <!-- Built with love using PWA Starter Kit -->
85
84
 
86
85
  <script src="<%- elementScript %>"></script>