@operato/app 8.0.0-beta.1 → 8.0.0-beta.2

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 (4) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/package.json +14 -14
  3. package/demo/data-grist-test.html +0 -473
  4. package/demo/index.html +0 -35
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
12
+
13
+
14
+
6
15
  ## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
7
16
 
8
17
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/app",
3
3
  "description": "WebApplication production supporting components following open-wc recommendations",
4
4
  "author": "heartyoh",
5
- "version": "8.0.0-beta.1",
5
+ "version": "8.0.0-beta.2",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "exports": {
@@ -147,18 +147,18 @@
147
147
  "@graphql-tools/delegate": "^10.0.1",
148
148
  "@graphql-tools/wrap": "^8.5.0",
149
149
  "@material/web": "^2.0.0",
150
- "@operato/attachment": "^8.0.0-beta.1",
151
- "@operato/data-grist": "^8.0.0-beta.1",
152
- "@operato/font": "^8.0.0-beta.1",
153
- "@operato/form": "^8.0.0-beta.1",
154
- "@operato/graphql": "^8.0.0-beta.1",
155
- "@operato/i18n": "^8.0.0-beta.1",
156
- "@operato/input": "^8.0.0-beta.1",
157
- "@operato/layout": "^8.0.0-beta.1",
158
- "@operato/property-editor": "^8.0.0-beta.1",
159
- "@operato/shell": "^8.0.0-beta.1",
160
- "@operato/styles": "^8.0.0-beta.1",
161
- "@operato/utils": "^8.0.0-beta.1",
150
+ "@operato/attachment": "^8.0.0-beta.2",
151
+ "@operato/data-grist": "^8.0.0-beta.2",
152
+ "@operato/font": "^8.0.0-beta.2",
153
+ "@operato/form": "^8.0.0-beta.2",
154
+ "@operato/graphql": "^8.0.0-beta.2",
155
+ "@operato/i18n": "^8.0.0-beta.2",
156
+ "@operato/input": "^8.0.0-beta.2",
157
+ "@operato/layout": "^8.0.0-beta.2",
158
+ "@operato/property-editor": "^8.0.0-beta.2",
159
+ "@operato/shell": "^8.0.0-beta.2",
160
+ "@operato/styles": "^8.0.0-beta.2",
161
+ "@operato/utils": "^8.0.0-beta.2",
162
162
  "cm6-graphql": "^0.0.14",
163
163
  "codemirror": "^6.0.1",
164
164
  "cronstrue": "^2.2.0",
@@ -199,5 +199,5 @@
199
199
  "prettier --write"
200
200
  ]
201
201
  },
202
- "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
202
+ "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
203
203
  }
package/demo/data-grist-test.html DELETED
@@ -1,473 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
6
- <style>
7
- body {
8
- /* box-sizing: border-box; */
9
- margin: 0;
10
- padding: 0;
11
- overflow: hidden;
12
-
13
- /* This is a font-stack that tries to use the system-default sans-serifs first */
14
- font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
15
- line-height: 1.5;
16
- -webkit-font-smoothing: antialiased;
17
- }
18
-
19
- #app {
20
- width: 100vw;
21
- height: 100dvh;
22
-
23
- display: flex;
24
- flex-direction: column;
25
- }
26
-
27
- #demo {
28
- flex: 1;
29
-
30
- display: flex;
31
- flex-direction: column;
32
- overflow: hidden;
33
- }
34
-
35
- grist-demo {
36
- flex: 1;
37
- overflow: auto;
38
- }
39
- </style>
40
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
41
- <link
42
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
43
- rel="stylesheet"
44
- />
45
- <link
46
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
47
- rel="stylesheet"
48
- />
49
- <link
50
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
51
- rel="stylesheet"
52
- />
53
-
54
- <link href="/themes/app-theme.css" rel="stylesheet" />
55
- <link href="/themes/oops-theme.css" rel="stylesheet" />
56
- <link href="/themes/grist-theme.css" rel="stylesheet" />
57
- </head>
58
-
59
- <body>
60
- <script type="module">
61
- import { LitElement, html, css, render } from 'lit'
62
- import '../dist/src/index.js'
63
- import '@operato/data-grist/ox-filters-form.js'
64
- import '@operato/data-grist/ox-sorters-control.js'
65
- import '@operato/data-grist/ox-record-creator.js'
66
- import '@operato/popup/ox-popup-list.js'
67
- import '@material/web/icon/icon.js'
68
- import { CommonGristStyles } from '@operato/styles'
69
-
70
- const fetchHandler = async ({ page, limit, sorters = [] }) => {
71
- var total = 120993
72
- var start = (page - 1) * limit
73
-
74
- await new Promise(resolve => setTimeout(resolve, 500))
75
-
76
- return {
77
- total,
78
- records: Array(limit * page > total ? total % limit : limit)
79
- .fill()
80
- .map((item, idx) => {
81
- return {
82
- id: idx,
83
- name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
84
- description:
85
- idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
86
- email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,
87
- active: Math.round(Math.random() * 2) % 2 ? true : false,
88
- barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,
89
- company:
90
- idx % 2
91
- ? {
92
- id: '2',
93
- name: 'HatioLAB',
94
- description: `경기도 성남시-${start + idx + 1}`
95
- }
96
- : {
97
- id: '3',
98
- name: 'HatioSEA',
99
- description: `말레이시아 세티아알람-${start + idx + 1}`
100
- },
101
- thumbnail:
102
- idx % 4 === 0
103
- ? '' /* no source */
104
- : idx % 4 === 1
105
- ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
106
- : idx % 4 === 2
107
- ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
108
- : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
109
- role: ['admin', 'worker', 'tester'][idx % 3],
110
- color: idx % 2 ? `#87f018` : `#180f87`,
111
- rate: Math.round(Math.random() * 100),
112
- dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
113
- dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
114
- homepage:
115
- idx % 2
116
- ? `http://hatiolab.com/${start + idx + 1}`
117
- : `http://deadpool.hatiolab.com/${start + idx + 1}`,
118
- json5: {
119
- abc: 'abc',
120
- value: 123
121
- },
122
- crontab: idx % 2 ? null : '* * * * * *',
123
- createdAt: Date.now(),
124
- updatedAt: Date.now()
125
- }
126
- })
127
- }
128
- }
129
-
130
- const config = {
131
- list: {
132
- thumbnail: 'thumbnail',
133
- fields: ['name', 'description'],
134
- details: ['role', 'email']
135
- },
136
- columns: [
137
- {
138
- type: 'gutter',
139
- gutterName: 'dirty'
140
- },
141
- {
142
- type: 'gutter',
143
- gutterName: 'sequence'
144
- },
145
- {
146
- type: 'gutter',
147
- gutterName: 'row-selector',
148
- multiple: true
149
- },
150
- {
151
- type: 'gutter',
152
- gutterName: 'button',
153
- icon: 'edit',
154
- handlers: {
155
- click: function () {
156
- console.log('clicked')
157
- }
158
- }
159
- },
160
- {
161
- type: 'gutter',
162
- gutterName: 'button',
163
- icon: 'add',
164
- handlers: {
165
- click: 'record-copy'
166
- }
167
- },
168
- {
169
- type: 'gutter',
170
- gutterName: 'button',
171
- icon: 'arrow_downward',
172
- handlers: {
173
- click: 'move-down'
174
- }
175
- },
176
- {
177
- type: 'string',
178
- name: 'id',
179
- hidden: true
180
- },
181
- {
182
- type: 'link',
183
- name: 'name',
184
- label: true,
185
- header: 'name',
186
- record: {
187
- editable: true,
188
- options: {
189
- // href: 'http://hatiolab.com',
190
- href: function (column, record, rowIndex) {
191
- return record['homepage']
192
- },
193
- target: '_blank'
194
- }
195
- },
196
- filter: 'search',
197
- sortable: true,
198
- width: 120
199
- },
200
- {
201
- type: 'string',
202
- name: 'description',
203
- header: 'description',
204
- filter: 'search',
205
- record: {
206
- editable: true,
207
- align: 'left'
208
- },
209
- width: 200,
210
- handlers: {
211
- click: (columns, data, column, record, rowIndex, target) => {
212
- alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
213
- }
214
- }
215
- },
216
- {
217
- type: 'crontab',
218
- name: 'crontab',
219
- label: true,
220
- header: 'crontab',
221
- record: {
222
- editable: true
223
- },
224
- width: 130
225
- },
226
- {
227
- type: 'email',
228
- name: 'email',
229
- label: true,
230
- header: 'email',
231
- record: {
232
- editable: true
233
- },
234
- filter: 'search',
235
- sortable: true,
236
- width: 130,
237
- validation: function (after, before, record, column) {
238
- if (after.indexOf('@') == -1) {
239
- document.dispatchEvent(
240
- new CustomEvent('notify', {
241
- detail: {
242
- type: 'error',
243
- message: `invalid value - ${after}`
244
- }
245
- })
246
- )
247
- return false
248
- }
249
- return true
250
- }
251
- },
252
- {
253
- type: 'boolean',
254
- name: 'active',
255
- header: 'active',
256
- record: {
257
- editable: true
258
- },
259
- filter: true,
260
- handlers: {
261
- dblclick: () => {
262
- const grist = document.querySelector('ox-grist')
263
- console.log(grist.dirtyRecords)
264
- }
265
- },
266
- sortable: true,
267
- width: 60
268
- },
269
- {
270
- type: 'select',
271
- name: 'role',
272
- label: true,
273
- header: 'role',
274
- record: {
275
- options: ['', 'admin', 'worker', 'tester'],
276
- editable: true
277
- },
278
- filter: true,
279
- sortable: true,
280
- width: 120
281
- },
282
- {
283
- type: 'color',
284
- name: 'color',
285
- header: 'color',
286
- record: {
287
- editable: true
288
- },
289
- sortable: true,
290
- width: 50
291
- },
292
- {
293
- type: 'float',
294
- name: 'rate',
295
- header: 'rate',
296
- record: {
297
- align: 'right',
298
- editable: true
299
- },
300
- filter: 'between',
301
- sortable: true,
302
- width: 50
303
- },
304
- {
305
- type: 'image',
306
- name: 'thumbnail',
307
- header: 'thumbnail',
308
- record: {
309
- editable: true
310
- },
311
- width: 120
312
- },
313
- {
314
- type: 'datetime',
315
- name: 'updatedAt',
316
- header: 'updated at',
317
- record: {
318
- editable: true
319
- },
320
- filter: 'between',
321
- sortable: true,
322
- width: 180
323
- },
324
- {
325
- type: 'datetime',
326
- name: 'createdAt',
327
- header: 'created at',
328
- record: {
329
- editable: false
330
- },
331
- sortable: true,
332
- width: 180
333
- }
334
- ],
335
- rows: {
336
- selectable: {
337
- multiple: true
338
- },
339
- handlers: {
340
- click: 'select-row-toggle'
341
- },
342
- classifier: function (record, rowIndex) {
343
- const rate = record['rate']
344
- const emphasized =
345
- rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined
346
- return {
347
- emphasized
348
- }
349
- }
350
- },
351
- sorters: [
352
- {
353
- name: 'name',
354
- desc: true
355
- },
356
- {
357
- name: 'email'
358
- }
359
- ],
360
- pagination: {
361
- pages: [20, 30, 50, 100, 200]
362
- }
363
- }
364
-
365
- class GristDemo extends LitElement {
366
- static styles = [
367
- CommonGristStyles,
368
- css`
369
- :host {
370
- display: flex;
371
- flex-direction: column;
372
- }
373
-
374
- #tailer {
375
- display: flex;
376
- flex-direction: row;
377
- margin: 0 var(--margin-default);
378
- }
379
-
380
- #tailer a {
381
- padding: 0 var(--padding-default) 0 var(--padding-default);
382
- margin: 0 var(--spacing-small);
383
- border-right: 1px solid rgba(0, 0, 0, 0.1);
384
- font-size: var(--fontsize-default);
385
- color: var(--md-sys-color-on-primary-container);
386
- }
387
- `
388
- ]
389
-
390
- static get properties() {
391
- return {
392
- mode: String
393
- }
394
- }
395
-
396
- get grist() {
397
- return this.renderRoot.querySelector('ox-grist')
398
- }
399
-
400
- render() {
401
- const mode = this.mode || 'CARD'
402
-
403
- return html`
404
- <ox-grist .config=${config} .mode=${mode} auto-fetch .fetchHandler=${fetchHandler}>
405
- <div id="filters" slot="headroom">
406
- <ox-filters-form @filters-change=${e => console.log('changed', e.detail)}></ox-filters-form>
407
- </div>
408
-
409
- <div slot="headroom" id="headroom">
410
- <div id="tailer">
411
- <a href="./report-test.html">Report Test</a>
412
- <a
413
- href="#"
414
- @click=${() => {
415
- this.renderRoot.querySelector('ox-grist').reset()
416
- }}
417
- >Reset</a
418
- >
419
- <a
420
- href="#"
421
- @click=${() => {
422
- this.renderRoot.querySelector('ox-grist').fetch(true)
423
- }}
424
- >Fetch</a
425
- >
426
- </div>
427
-
428
- <div id="sorters">
429
- Sort
430
- <md-icon
431
- @click=${e => {
432
- const target = e.currentTarget
433
- this.renderRoot.querySelector('#sorter-control').open({
434
- right: 0,
435
- top: target.offsetTop + target.offsetHeight
436
- })
437
- }}
438
- >expand_more</md-icon
439
- >
440
- <ox-popup id="sorter-control">
441
- <ox-sorters-control> </ox-sorters-control>
442
- </ox-popup>
443
- </div>
444
-
445
- <div id="modes">
446
- <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
447
- <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
448
- <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
449
- </div>
450
-
451
- <ox-record-creator id="add" light-popup>
452
- <button><md-icon>add</md-icon></button>
453
- </ox-record-creator>
454
-
455
- <button @click=${e => this.grist.cloneSelectedRecords()}><md-icon>add</md-icon></button>
456
- </div>
457
- </ox-grist>
458
- `
459
- }
460
- }
461
-
462
- customElements.define('grist-demo', GristDemo)
463
-
464
- setTimeout(() => {
465
- render(html` <grist-demo mode="LIST"></grist-demo> `, document.querySelector('#demo'))
466
- })
467
- </script>
468
-
469
- <div id="app">
470
- <div id="demo"></div>
471
- </div>
472
- </body>
473
- </html>
package/demo/index.html DELETED
@@ -1,35 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- --ox-checkbox-size: 12px;
9
- }
10
-
11
- #demo {
12
- position: relative;
13
- height: 300px;
14
- background-color: lightgray;
15
- vertical-align: middle;
16
- }
17
- </style>
18
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
19
- <link
20
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
21
- rel="stylesheet"
22
- />
23
- <link
24
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
25
- rel="stylesheet"
26
- />
27
- <link
28
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
29
- rel="stylesheet"
30
- />
31
- </head>
32
- <body>
33
- <a href="./data-grist-test.html">data-grist test</a>
34
- </body>
35
- </html>