@operato/property-editor 8.0.0-beta.0 → 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 (53) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +6 -6
  3. package/.storybook/main.js +0 -3
  4. package/.storybook/preview.js +0 -52
  5. package/.storybook/server.mjs +0 -8
  6. package/demo/index.html +0 -323
  7. package/src/index.ts +0 -3
  8. package/src/ox-properties-dynamic-view.ts +0 -145
  9. package/src/ox-property-editor-3axis.ts +0 -19
  10. package/src/ox-property-editor-3dish.ts +0 -29
  11. package/src/ox-property-editor-action.ts +0 -42
  12. package/src/ox-property-editor-angle.ts +0 -21
  13. package/src/ox-property-editor-checkbox.ts +0 -18
  14. package/src/ox-property-editor-color.ts +0 -23
  15. package/src/ox-property-editor-crontab.ts +0 -19
  16. package/src/ox-property-editor-data.ts +0 -18
  17. package/src/ox-property-editor-date.ts +0 -12
  18. package/src/ox-property-editor-datetime.ts +0 -12
  19. package/src/ox-property-editor-duration.ts +0 -19
  20. package/src/ox-property-editor-file.ts +0 -26
  21. package/src/ox-property-editor-gradient-colorstops.ts +0 -27
  22. package/src/ox-property-editor-hashtags.ts +0 -22
  23. package/src/ox-property-editor-image.ts +0 -22
  24. package/src/ox-property-editor-key-values.ts +0 -25
  25. package/src/ox-property-editor-legend.ts +0 -12
  26. package/src/ox-property-editor-mass-fraction.ts +0 -26
  27. package/src/ox-property-editor-month.ts +0 -12
  28. package/src/ox-property-editor-multiple-colors.ts +0 -16
  29. package/src/ox-property-editor-number.ts +0 -30
  30. package/src/ox-property-editor-options.ts +0 -23
  31. package/src/ox-property-editor-partition-keys.ts +0 -23
  32. package/src/ox-property-editor-password.ts +0 -20
  33. package/src/ox-property-editor-range.ts +0 -27
  34. package/src/ox-property-editor-scene-component-id.ts +0 -21
  35. package/src/ox-property-editor-select.ts +0 -85
  36. package/src/ox-property-editor-signature.ts +0 -23
  37. package/src/ox-property-editor-solid-colorstops.ts +0 -27
  38. package/src/ox-property-editor-string.ts +0 -20
  39. package/src/ox-property-editor-table-column-config.ts +0 -23
  40. package/src/ox-property-editor-table.ts +0 -23
  41. package/src/ox-property-editor-textarea.ts +0 -35
  42. package/src/ox-property-editor-time.ts +0 -12
  43. package/src/ox-property-editor-unit-number.ts +0 -33
  44. package/src/ox-property-editor-value-map.ts +0 -27
  45. package/src/ox-property-editor-value-ranges.ts +0 -27
  46. package/src/ox-property-editor-work-shift.ts +0 -24
  47. package/src/ox-property-editor.ts +0 -243
  48. package/src/types.ts +0 -23
  49. package/stories/ox-properties-dynamic-view.stories.ts +0 -311
  50. package/stories/ox-properties-editor-textarea.stories.ts +0 -97
  51. package/tsconfig.json +0 -24
  52. package/web-dev-server.config.mjs +0 -28
  53. package/web-test-runner.config.mjs +0 -29
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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
+
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)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
21
+
22
+
23
+
6
24
  ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
7
25
 
8
26
  **Note:** Version bump only for package @operato/property-editor
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@operato/property-editor",
3
- "version": "8.0.0-beta.0",
3
+ "version": "8.0.0-beta.2",
4
4
  "description": "Webcomponent for property-editor following open-wc recommendations",
5
5
  "author": "heartyoh",
6
6
  "main": "dist/src/index.js",
@@ -192,10 +192,10 @@
192
192
  },
193
193
  "dependencies": {
194
194
  "@material/web": "^2.0.0",
195
- "@operato/help": "^8.0.0-beta.0",
196
- "@operato/i18n": "^8.0.0-beta.0",
197
- "@operato/input": "^8.0.0-beta.0",
198
- "@operato/popup": "^8.0.0-beta.0",
195
+ "@operato/help": "^8.0.0-beta.2",
196
+ "@operato/i18n": "^8.0.0-beta.2",
197
+ "@operato/input": "^8.0.0-beta.2",
198
+ "@operato/popup": "^8.0.0-beta.2",
199
199
  "lit": "^3.1.2",
200
200
  "lodash-es": "^4.17.21"
201
201
  },
@@ -234,5 +234,5 @@
234
234
  "prettier --write"
235
235
  ]
236
236
  },
237
- "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
237
+ "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
238
238
  }
package/.storybook/main.js DELETED
@@ -1,3 +0,0 @@
1
- module.exports = {
2
- stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
3
- }
package/.storybook/preview.js DELETED
@@ -1,52 +0,0 @@
1
- import { i18next } from '@operato/i18n'
2
-
3
- export const globalTypes = {
4
- locale: {
5
- name: 'Locale',
6
- description: 'Internationalization locale',
7
- toolbar: {
8
- icon: 'globe',
9
- items: [
10
- { value: 'en', right: '🇺🇸', title: 'English' },
11
- { value: 'ko', right: '🇰🇷', title: '한국어' },
12
- { value: 'zh', right: '🇨🇳', title: '中文' },
13
- { value: 'ja', right: '🇯🇵', title: '日本語' },
14
- { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
15
- ],
16
- showName: true
17
- }
18
- },
19
- theme: {
20
- name: 'Theme',
21
- description: 'Global theme for components',
22
- toolbar: {
23
- icon: 'paintbrush',
24
- items: [
25
- { value: 'light', title: 'Light' },
26
- { value: 'dark', title: 'Dark' }
27
- ],
28
- showName: true
29
- }
30
- }
31
- }
32
-
33
- export const decorators = [
34
- (Story, context) => {
35
- const { locale, theme } = context.globals
36
-
37
- if (locale) {
38
- i18next.changeLanguage(locale)
39
- }
40
-
41
- // Set the theme class for the document
42
- if (theme === 'dark') {
43
- document.documentElement.classList.add('dark')
44
- document.documentElement.classList.remove('light')
45
- } else {
46
- document.documentElement.classList.add('light')
47
- document.documentElement.classList.remove('dark')
48
- }
49
-
50
- return Story()
51
- }
52
- ]
package/.storybook/server.mjs DELETED
@@ -1,8 +0,0 @@
1
- import { storybookPlugin } from '@web/dev-server-storybook'
2
- import baseConfig from '../web-dev-server.config.mjs'
3
-
4
- export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5
- ...baseConfig,
6
- open: '/',
7
- plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins]
8
- })
package/demo/index.html DELETED
@@ -1,323 +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
- margin: 0;
9
- padding: 0;
10
-
11
- /* This is a font-stack that tries to use the system-default sans-serifs first */
12
- font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
13
- line-height: 1.5;
14
- -webkit-font-smoothing: antialiased;
15
- }
16
-
17
- ox-properties-dynamic-view {
18
- width: 100vw;
19
-
20
- display: flex;
21
- flex-direction: column;
22
- }
23
- </style>
24
-
25
- <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
26
-
27
- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
- <link
33
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
34
- rel="stylesheet"
35
- />
36
- <link
37
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
38
- rel="stylesheet"
39
- />
40
-
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
- </head>
54
- <body>
55
- <div id="demo"></div>
56
-
57
- <script type="module">
58
- import { html, render } from 'lit'
59
- import '@operato/i18n/ox-i18n.js'
60
-
61
- import '../dist/src/ox-property-editor-3axis.js'
62
- import '../dist/src/ox-property-editor-3dish.js'
63
- import '../dist/src/ox-property-editor-angle.js'
64
- import '../dist/src/ox-property-editor-checkbox.js'
65
- import '../dist/src/ox-property-editor-color.js'
66
- import '../dist/src/ox-property-editor-date.js'
67
- import '../dist/src/ox-property-editor-legend.js'
68
- import '../dist/src/ox-property-editor-number.js'
69
- import '../dist/src/ox-property-editor-unit-number.js'
70
- import '../dist/src/ox-property-editor-password.js'
71
- import '../dist/src/ox-property-editor-range.js'
72
- import '../dist/src/ox-property-editor-select.js'
73
- import '../dist/src/ox-property-editor-string.js'
74
- import '../dist/src/ox-property-editor-image.js'
75
- import '../dist/src/ox-property-editor-file.js'
76
- import '../dist/src/ox-property-editor-multiple-colors.js'
77
- import '../dist/src/ox-property-editor-crontab.js'
78
- import '../dist/src/ox-property-editor-work-shift.js'
79
- import '../dist/src/ox-property-editor-partition-keys.js'
80
- import '../dist/src/ox-property-editor-key-values.js'
81
- // import '../dist/src/ox-property-editor-textarea.js'
82
- import '../dist/src/ox-property-editor-options.js'
83
- import '../dist/src/ox-property-editor-hashtags.js'
84
-
85
- import '../dist/src/ox-properties-dynamic-view.js'
86
-
87
- import { OxPropertyEditor } from '@operato/property-editor'
88
-
89
- OxPropertyEditor.register({
90
- legend: 'ox-property-editor-legend',
91
- number: 'ox-property-editor-number',
92
- 'unit-number': 'ox-property-editor-unit-number',
93
- slider: 'ox-property-editor-range',
94
- password: 'ox-property-editor-password',
95
- angle: 'ox-property-editor-angle',
96
- string: 'ox-property-editor-string',
97
- textarea: 'ox-property-editor-textarea',
98
- javascript: 'ox-property-editor-textarea',
99
- checkbox: 'ox-property-editor-checkbox',
100
- boolean: 'ox-property-editor-checkbox',
101
- select: 'ox-property-editor-select',
102
- date: 'ox-property-editor-date',
103
- options: 'ox-property-editor-options',
104
- data: 'ox-property-editor-data',
105
- file: 'ox-property-editor-file',
106
- image: 'ox-property-editor-image',
107
- 'range-input': 'ox-property-editor-range',
108
- 'attachment-selector': 'ox-property-editor-attachment-selector',
109
- 'gltf-selector': 'ox-property-editor-attachment-selector',
110
- 'image-selector': 'ox-property-editor-image-selector',
111
- color: 'ox-property-editor-color',
112
- 'solid-color-stops': 'ox-property-editor-solid-colorstops',
113
- 'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
114
- 'multiple-color': 'ox-property-editor-multiple-colors',
115
- map: 'ox-property-editor-value-map',
116
- range: 'ox-property-editor-value-ranges',
117
- graphql: 'ox-property-editor-graphql',
118
- 'editor-table': 'ox-property-editor-table',
119
- 'id-input': 'ox-property-editor-scene-component-id',
120
- 'font-selector': 'ox-property-editor-font-selector',
121
- crontab: 'ox-property-editor-crontab',
122
- shift: 'ox-property-editor-work-shift',
123
- 'partition-keys': 'ox-property-editor-partition-keys',
124
- 'key-values': 'ox-property-editor-key-values',
125
- hashtags: 'ox-property-editor-hashtags',
126
- '3axis': 'ox-property-editor-3axis',
127
- '3dish': 'ox-property-editor-3dish'
128
- })
129
-
130
- const properties = [
131
- {
132
- type: 'string',
133
- label: 'ABC',
134
- name: 'ABC',
135
- quantifier: [1, 20]
136
- },
137
- {
138
- type: 'password',
139
- label: 'PWD',
140
- name: 'PWD'
141
- },
142
- {
143
- type: 'select',
144
- label: 'SLT',
145
- name: 'SLT',
146
- property: {
147
- options: [
148
- { display: '', value: '' },
149
- { display: 'AAA', value: 'aaa' },
150
- { display: 'BBB', value: 'bbb' }
151
- ]
152
- }
153
- },
154
- {
155
- type: 'number',
156
- label: 'N#',
157
- name: 'N#'
158
- },
159
- {
160
- type: 'unit-number',
161
- label: 'NU',
162
- name: 'NU',
163
- property: {
164
- unit: 'K'
165
- }
166
- },
167
- {
168
- type: 'checkbox',
169
- label: 'XV',
170
- name: 'XV'
171
- },
172
- {
173
- type: 'angle',
174
- label: 'Degree',
175
- name: 'Degree'
176
- },
177
- {
178
- type: 'date',
179
- label: 'DD',
180
- name: 'DD'
181
- },
182
- {
183
- type: 'legend',
184
- label: '',
185
- name: 'NEW-GROUP',
186
- property: {
187
- label: 'NEW-GROUP'
188
- }
189
- },
190
- {
191
- type: 'slider',
192
- label: 'S',
193
- name: 'S',
194
- property: {
195
- min: 30,
196
- max: 300,
197
- step: 10
198
- }
199
- },
200
- {
201
- type: 'textarea',
202
- label: 'TA',
203
- name: 'TA',
204
- styles: {
205
- flex: '1'
206
- }
207
- },
208
- {
209
- type: 'options',
210
- label: 'OT',
211
- name: 'OT',
212
- editor: {
213
- fullwidth: true
214
- }
215
- },
216
- {
217
- type: 'data',
218
- label: 'DT',
219
- name: 'DT'
220
- },
221
- {
222
- type: 'color',
223
- label: 'CL',
224
- name: 'CL'
225
- },
226
- {
227
- type: 'multiple-color',
228
- label: 'CLS',
229
- name: 'CLS'
230
- },
231
- {
232
- type: 'image',
233
- label: 'IM',
234
- name: 'IM'
235
- },
236
- {
237
- type: 'file',
238
- label: 'FL',
239
- name: 'FL',
240
- property: {
241
- multiple: true
242
- }
243
- },
244
- {
245
- type: 'crontab',
246
- label: 'schedule',
247
- name: 'schedule'
248
- },
249
- {
250
- type: 'shift',
251
- label: 'shift',
252
- name: 'shift'
253
- },
254
- {
255
- type: 'key-values',
256
- label: 'key-values',
257
- name: 'key-values'
258
- },
259
- {
260
- type: 'hashtags',
261
- label: 'hashtags',
262
- name: 'hashtags'
263
- },
264
- {
265
- type: '3dish',
266
- label: '3dish',
267
- name: '3dish'
268
- }
269
- ]
270
-
271
- const value = {
272
- ABC: [4, 3, 2, 1],
273
- S: 290,
274
- SLT: 'bbb',
275
- NU: 1000,
276
- IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',
277
- CLS: ['yello', 'green'],
278
- schedule: '* * * * * *',
279
- shift: [
280
- {
281
- name: 'DAY',
282
- fromDate: -1,
283
- fromTime: '22:00',
284
- toDate: 0,
285
- toTime: '06:00'
286
- },
287
- {
288
- name: 'SWING',
289
- fromDate: 0,
290
- fromTime: '06:00',
291
- toDate: 0,
292
- toTime: '14:00'
293
- },
294
- {
295
- name: 'NIGHT',
296
- fromDate: 0,
297
- fromTime: '14:00',
298
- toDate: 0,
299
- toTime: '22:00'
300
- }
301
- ],
302
- hashtags: ['abc', 'def'],
303
- '3dish': {
304
- dimension: { x: 1, y: 1, z: 1 },
305
- position: { x: 1, y: 1, z: 1 },
306
- rotate: { x: 1, y: 1, z: 1 },
307
- scale: { x: 1, y: 1, z: 1 }
308
- }
309
- }
310
-
311
- render(
312
- html`
313
- <ox-properties-dynamic-view
314
- .props=${properties}
315
- .value=${value}
316
- @property-change=${e => console.log(e.currentTarget.value)}
317
- ></ox-properties-dynamic-view>
318
- `,
319
- document.querySelector('#demo')
320
- )
321
- </script>
322
- </body>
323
- </html>
package/src/index.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from './types.js'
2
- export * from './ox-property-editor.js'
3
- export * from './ox-properties-dynamic-view.js'
package/src/ox-properties-dynamic-view.ts DELETED
@@ -1,145 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
-
5
- import { html, LitElement, PropertyValues } from 'lit'
6
- import { customElement, property } from 'lit/decorators.js'
7
-
8
- import { OxPropertyEditor } from './ox-property-editor.js'
9
- import { PropertySpec, CSSStyles } from './types.js'
10
-
11
- /**
12
- 모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
13
-
14
- Example:
15
-
16
- <ox-properties-dynamic-view value="{{value}}">
17
- <label>Center X</label>
18
- <input type="number" .value="${value.cx}">
19
- <label>Width</label>
20
- <input type="number" .value="${value.width}">
21
- </ox-properties-dynamic-view>
22
- */
23
-
24
- const DEFAULT_VALUE = {
25
- legend: '',
26
- number: 0,
27
- angle: 0,
28
- string: '',
29
- password: '',
30
- textarea: '',
31
- checkbox: false,
32
- select: '',
33
- color: '#000000',
34
- 'solidcolor-stops': null,
35
- 'gradientcolor-stops': null,
36
- 'gltf-selector': '',
37
- 'image-selector': '',
38
- multiplecolor: null,
39
- editortable: null,
40
- imageselector: '',
41
- options: null,
42
- date: null
43
- }
44
-
45
- @customElement('ox-properties-dynamic-view')
46
- export class OxPropertiesDynamicView extends LitElement {
47
- @property({ type: Object }) value: { [name: string]: any } = {}
48
- @property({ type: Array }) props?: PropertySpec[]
49
-
50
- render() {
51
- return html`<slot></slot>`
52
- }
53
-
54
- firstUpdated() {
55
- this.addEventListener('change', this._onValueChanged.bind(this))
56
- }
57
-
58
- updated(changes: PropertyValues<this>) {
59
- changes.has('props') && this._onPropsChanged(this.props || [])
60
- changes.has('value') && this._setValues()
61
- }
62
-
63
- _onPropsChanged(props: PropertySpec[]) {
64
- const specs = this.props || []
65
-
66
- this.textContent = ''
67
- specs.forEach(spec => {
68
- const { label, type, name, placeholder, editor, quantifier, observe, property, defaultValue, styles } = spec
69
-
70
- let elementType = OxPropertyEditor.getEditor(type)
71
- if (!elementType) {
72
- console.warn('Property Editor not defined', type)
73
- return
74
- }
75
- let element = document.createElement(elementType) as OxPropertyEditor
76
-
77
- element.label = label
78
- element.type = type
79
- element.placeholder = placeholder
80
- element.name = name
81
- element.setAttribute('name', name)
82
- element.editor = editor
83
- element.quantifier = quantifier
84
- element.defaultValue = defaultValue
85
-
86
- if (observe) {
87
- element.observeHandler = observe
88
- }
89
- element.property = property
90
- element.setAttribute('property-editor', 'true')
91
-
92
- if (styles) {
93
- Object.keys(styles).forEach((key: string) => {
94
- element.style[key as keyof CSSStyles] = styles![key as keyof CSSStyles]
95
- })
96
- }
97
-
98
- this.appendChild(element)
99
- })
100
- }
101
-
102
- _setValues() {
103
- this.value &&
104
- Array.from(this.querySelectorAll('[name]')).forEach(prop => {
105
- const editor = prop as OxPropertyEditor
106
- const name = editor.getAttribute('name')
107
-
108
- var value = this.value[name!]
109
- if (value === undefined) {
110
- value = editor.getDefaultValue?.() || (DEFAULT_VALUE as any)[editor.type]
111
- }
112
-
113
- editor.value = value
114
- editor.observe?.call(prop, editor.value)
115
- })
116
- }
117
-
118
- _onValueChanged(e: Event) {
119
- e.stopPropagation()
120
- var target = e.target as Element
121
-
122
- const editor = target.closest('[property-editor]') as OxPropertyEditor
123
-
124
- var name = editor.getAttribute('name')
125
- if (!name) {
126
- return
127
- }
128
-
129
- if (this.value) {
130
- this.value[name] = editor.value
131
- } else {
132
- this.value = {
133
- [name]: editor.value
134
- }
135
- }
136
-
137
- this.dispatchEvent(
138
- new CustomEvent('property-change', {
139
- bubbles: true,
140
- composed: true,
141
- detail: this.value
142
- })
143
- )
144
- }
145
- }
package/src/ox-property-editor-3axis.ts DELETED
@@ -1,19 +0,0 @@
1
- import '@operato/input/ox-input-3axis.js'
2
-
3
- import { html, TemplateResult } from 'lit'
4
- import { customElement } from 'lit/decorators.js'
5
-
6
- import { OxPropertyEditor } from './ox-property-editor.js'
7
- import { PropertySpec } from './types.js'
8
-
9
- @customElement('ox-property-editor-3axis')
10
- export class OxPropertyEditor3Axis extends OxPropertyEditor {
11
- editorTemplate(value: any, spec: PropertySpec): TemplateResult {
12
- const { editor } = spec
13
- const { fullwidth = true } = editor || {}
14
-
15
- return html`
16
- <ox-input-3axis id="editor" .value=${value} ?fullwidth=${fullwidth} ?disabled=${this.disabled}></ox-input-3axis>
17
- `
18
- }
19
- }
package/src/ox-property-editor-3dish.ts DELETED
@@ -1,29 +0,0 @@
1
- import '@operato/input/ox-input-3dish.js'
2
-
3
- import { html, TemplateResult } from 'lit'
4
- import { customElement } from 'lit/decorators.js'
5
-
6
- import { OxPropertyEditor } from './ox-property-editor.js'
7
- import { PropertySpec } from './types.js'
8
-
9
- @customElement('ox-property-editor-3dish')
10
- export class OxPropertyEditor3Dish extends OxPropertyEditor {
11
- editorTemplate(value: any, spec: PropertySpec): TemplateResult {
12
- const { position, dimension, rotate, scale } = value || {}
13
- const { editor } = spec
14
- const { fullwidth = true } = editor || {}
15
-
16
- return html`
17
- <ox-input-3dish
18
- id="editor"
19
- .position=${position}
20
- .dimension=${dimension}
21
- .rotate=${rotate}
22
- .scale=${scale}
23
- placeholder=${spec.placeholder || ''}
24
- ?fullwidth=${fullwidth}
25
- ?disabled=${this.disabled}
26
- ></ox-input-3dish>
27
- `
28
- }
29
- }
package/src/ox-property-editor-action.ts DELETED
@@ -1,42 +0,0 @@
1
- /*
2
- * Copyright © HatioLab Inc. All rights reserved.
3
- */
4
-
5
- import '@material/web/button/elevated-button.js'
6
-
7
- import { html, TemplateResult } from 'lit'
8
- import { customElement } from 'lit/decorators.js'
9
-
10
- import { OxPropertyEditor } from './ox-property-editor.js'
11
- import { PropertySpec } from './types.js'
12
- /**
13
- *
14
- */
15
- @customElement('ox-property-editor-action')
16
- export default class OxPropertyEditorAction extends OxPropertyEditor {
17
- editorTemplate(value: any, spec: PropertySpec): TemplateResult {
18
- var property = spec.property || {}
19
- var { icon, action } = property
20
-
21
- return html`
22
- <md-elevated-button
23
- @click=${(e: MouseEvent) => {
24
- this.dispatchEvent(
25
- new CustomEvent('i-need-selected', {
26
- bubbles: true,
27
- composed: true,
28
- detail: {
29
- callback: (selected: any[]) => {
30
- typeof action === 'function' && action(selected[0])
31
- }
32
- }
33
- })
34
- )
35
- }}
36
- ?disabled=${this.disabled}
37
- >
38
- <md-icon slot="icon">${icon}</md-icon>
39
- </md-elevated-button>
40
- `
41
- }
42
- }