@operato/form 2.0.0-alpha.51 → 2.0.0-alpha.68

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 (17) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/demo/index.html +14 -3
  3. package/dist/src/components/ox-file-uploader.js +7 -7
  4. package/dist/src/components/ox-file-uploader.js.map +1 -1
  5. package/dist/src/components/ox-search-form.d.ts +1 -1
  6. package/dist/src/components/ox-search-form.js +36 -36
  7. package/dist/src/components/ox-search-form.js.map +1 -1
  8. package/dist/stories/ox-filters-form-barcode.stories.js +13 -1
  9. package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
  10. package/dist/stories/ox-filters-form-base.stories.js +13 -1
  11. package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
  12. package/dist/tsconfig.tsbuildinfo +1 -1
  13. package/package.json +6 -6
  14. package/src/components/ox-file-uploader.ts +7 -7
  15. package/src/components/ox-search-form.ts +83 -83
  16. package/stories/ox-filters-form-barcode.stories.ts +13 -1
  17. package/stories/ox-filters-form-base.stories.ts +13 -1
package/src/components/ox-search-form.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@material/mwc-icon'
1
+ import '@material/web/icon/icon.js'
2
2
  import './ox-custom-input.js'
3
3
  import './ox-custom-select.js'
4
4
 
@@ -83,68 +83,68 @@ export class SearchForm extends LitElement {
83
83
  </select>
84
84
  `
85
85
  : field.type === 'checkbox'
86
- ? html`
87
- <input
88
- id="ckbx_${field.name}"
89
- type="checkbox"
90
- ?checked="${field.value}"
91
- .name=${field.name}
92
- ?hidden=${field.hidden}
93
- @click=${(e: MouseEvent) => {
94
- const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
95
- if (checkbox.hasAttribute('indeterminate')) {
96
- const values = [undefined, 'on', 'off']
97
- const currentValue = checkbox._value
98
- const newValue =
99
- values.indexOf(currentValue) + 1 > values.length - 1
100
- ? values[0]
101
- : values[values.indexOf(currentValue) + 1]
86
+ ? html`
87
+ <input
88
+ id="ckbx_${field.name}"
89
+ type="checkbox"
90
+ ?checked="${field.value}"
91
+ .name=${field.name}
92
+ ?hidden=${field.hidden}
93
+ @click=${(e: MouseEvent) => {
94
+ const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
95
+ if (checkbox.hasAttribute('indeterminate')) {
96
+ const values = [undefined, 'on', 'off']
97
+ const currentValue = checkbox._value
98
+ const newValue =
99
+ values.indexOf(currentValue) + 1 > values.length - 1
100
+ ? values[0]
101
+ : values[values.indexOf(currentValue) + 1]
102
102
 
103
- if (newValue === 'on') {
104
- checkbox.checked = true
105
- } else if (newValue === 'off') {
106
- checkbox.checked = false
107
- } else {
108
- checkbox.indeterminate = true
103
+ if (newValue === 'on') {
104
+ checkbox.checked = true
105
+ } else if (newValue === 'off') {
106
+ checkbox.checked = false
107
+ } else {
108
+ checkbox.indeterminate = true
109
+ }
110
+ checkbox._value = newValue
109
111
  }
110
- checkbox._value = newValue
111
- }
112
- }}
113
- />
114
- <label for="ckbx_${field.name}" ?hidden=${field.hidden}
115
- >${field.label || field.name || field.id}</label
116
- >
117
- `
118
- : field.type === 'object'
119
- ? html`
120
- <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
121
- <input
122
- .type=${field.type}
123
- .value=${field.value || ''}
124
- .name=${field.name}
125
- .field=${field.field}
126
- .queryName=${field.queryName}
127
- .placeholder=${field.placeholder || ''}
128
- ?hidden=${field.hidden}
129
- ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
130
- />
131
- `
132
- : html`
133
- <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
134
- <input
135
- .type=${field.type}
136
- .value=${field.value || ''}
137
- .name=${field.name}
138
- .placeholder=${field.placeholder || ''}
139
- ?hidden=${field.hidden}
140
- ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
141
- />
142
- `}
112
+ }}
113
+ />
114
+ <label for="ckbx_${field.name}" ?hidden=${field.hidden}
115
+ >${field.label || field.name || field.id}</label
116
+ >
117
+ `
118
+ : field.type === 'object'
119
+ ? html`
120
+ <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
121
+ <input
122
+ .type=${field.type}
123
+ .value=${field.value || ''}
124
+ .name=${field.name}
125
+ .field=${field.field}
126
+ .queryName=${field.queryName}
127
+ .placeholder=${field.placeholder || ''}
128
+ ?hidden=${field.hidden}
129
+ ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
130
+ />
131
+ `
132
+ : html`
133
+ <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
134
+ <input
135
+ .type=${field.type}
136
+ .value=${field.value || ''}
137
+ .name=${field.name}
138
+ .placeholder=${field.placeholder || ''}
139
+ ?hidden=${field.hidden}
140
+ ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
141
+ />
142
+ `}
143
143
  `
144
144
  )}
145
145
  ${this.hideSearchButton || false
146
146
  ? ``
147
- : html`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-icon>`}
147
+ : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}
148
148
  </form>
149
149
  `
150
150
  }
@@ -224,14 +224,14 @@ export class SearchForm extends LitElement {
224
224
  field.type === 'text'
225
225
  ? value
226
226
  : field.type === 'checkbox'
227
- ? field.hasAttribute('indeterminate')
228
- ? field._value === 'on'
229
- ? true
230
- : false
231
- : (field as HTMLInputElement).checked
232
- : field.type === 'number'
233
- ? parseFloat(value)
234
- : value,
227
+ ? field.hasAttribute('indeterminate')
228
+ ? field._value === 'on'
229
+ ? true
230
+ : false
231
+ : (field as HTMLInputElement).checked
232
+ : field.type === 'number'
233
+ ? parseFloat(value)
234
+ : value,
235
235
  operator
236
236
  }
237
237
  })
@@ -257,16 +257,16 @@ export class SearchForm extends LitElement {
257
257
  field.type === 'text' && field.getAttribute('type') === 'object'
258
258
  ? await this._getResourceIds(field)
259
259
  : field.type === 'text'
260
- ? value
261
- : field.type === 'checkbox'
262
- ? field.hasAttribute('indeterminate')
263
- ? field._value === 'on'
264
- ? true
265
- : false
266
- : (field as HTMLInputElement).checked
267
- : field.type === 'number'
268
- ? parseFloat(value)
269
- : value,
260
+ ? value
261
+ : field.type === 'checkbox'
262
+ ? field.hasAttribute('indeterminate')
263
+ ? field._value === 'on'
264
+ ? true
265
+ : false
266
+ : (field as HTMLInputElement).checked
267
+ : field.type === 'number'
268
+ ? parseFloat(value)
269
+ : value,
270
270
  relation: field.type === 'text' && field.getAttribute('type') === 'object'
271
271
  }
272
272
  return filter
@@ -285,14 +285,14 @@ export class SearchForm extends LitElement {
285
285
  query: gql`
286
286
  query {
287
287
  fetch: ${queryName}(${buildArgs({
288
- filters: [
289
- {
290
- name: field,
291
- operator: 'i_like',
292
- value: `%${value}%`
293
- }
294
- ]
295
- })}) {
288
+ filters: [
289
+ {
290
+ name: field,
291
+ operator: 'i_like',
292
+ value: `%${value}%`
293
+ }
294
+ ]
295
+ })}) {
296
296
  items {
297
297
  id
298
298
  }
package/stories/ox-filters-form-barcode.stories.ts CHANGED
@@ -27,7 +27,19 @@ interface ArgTypes {
27
27
  const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
28
28
  <link href="/themes/app-theme.css" rel="stylesheet" />
29
29
  <link href="/themes/form-theme.css" rel="stylesheet" />
30
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
30
+ <link
31
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
32
+ rel="stylesheet"
33
+ />
34
+ <link
35
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
36
+ rel="stylesheet"
37
+ />
38
+ <link
39
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
40
+ rel="stylesheet"
41
+ />
42
+
31
43
  <style>
32
44
  body {
33
45
  }
package/stories/ox-filters-form-base.stories.ts CHANGED
@@ -28,7 +28,19 @@ interface ArgTypes {
28
28
  const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`
29
29
  <link href="/themes/app-theme.css" rel="stylesheet" />
30
30
  <link href="/themes/form-theme.css" rel="stylesheet" />
31
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
31
+ <link
32
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
33
+ rel="stylesheet"
34
+ />
35
+ <link
36
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
37
+ rel="stylesheet"
38
+ />
39
+ <link
40
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
41
+ rel="stylesheet"
42
+ />
43
+
32
44
  <style>
33
45
  body {
34
46
  }