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

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 (19) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/filters/filter-checkbox.js +4 -2
  3. package/dist/src/filters/filter-checkbox.js.map +1 -1
  4. package/dist/src/filters/filter-styles.js +35 -28
  5. package/dist/src/filters/filter-styles.js.map +1 -1
  6. package/dist/src/filters/ox-filters-form-base.js +49 -46
  7. package/dist/src/filters/ox-filters-form-base.js.map +1 -1
  8. package/dist/stories/ox-filters-form-barcode.stories.js +1 -5
  9. package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
  10. package/dist/stories/ox-filters-form-base.stories.js +28 -0
  11. package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
  12. package/dist/tsconfig.tsbuildinfo +1 -1
  13. package/package.json +2 -2
  14. package/src/filters/filter-checkbox.ts +4 -2
  15. package/src/filters/filter-styles.ts +35 -28
  16. package/src/filters/ox-filters-form-base.ts +50 -47
  17. package/stories/ox-filters-form-barcode.stories.ts +1 -5
  18. package/stories/ox-filters-form-base.stories.ts +28 -0
  19. package/themes/form-theme.css +1 -1
package/src/filters/ox-filters-form-base.ts CHANGED
@@ -35,6 +35,7 @@ export class OxFiltersFormBase extends LitElement {
35
35
  form > * {
36
36
  display: flex;
37
37
  align-items: center;
38
+ gap: var(--input-intra-gap, 7px);
38
39
  }
39
40
 
40
41
  label span {
@@ -125,53 +126,55 @@ export class OxFiltersFormBase extends LitElement {
125
126
 
126
127
  return type === 'search'
127
128
  ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
128
- : type !== 'select'
129
- ? html`
130
- <label filter-title ?between=${operator == 'between'}
131
- ><span>${label}</span> ${renderer(filter, value, this)}
132
- </label>
133
- `
134
- : operator === 'in'
135
- ? html`
136
- <ox-select
137
- name=${name}
138
- placeholder=${label}
139
- .value=${value}
140
- @change=${(e: CustomEvent) =>
141
- e.target?.dispatchEvent(
142
- new CustomEvent('filter-change', {
143
- detail: {
144
- name,
145
- operator,
146
- value: e.detail
147
- }
148
- })
149
- )}
150
- >
151
- <ox-popup-list multiple attr-selected="checked" with-search>
152
- ${renderer(filter, value, this)}
153
- </ox-popup-list>
154
- </ox-select>
155
- `
156
- : html`
157
- <ox-select
158
- name=${name}
159
- placeholder=${label}
160
- .value=${value}
161
- @change=${(e: CustomEvent) =>
162
- e.target?.dispatchEvent(
163
- new CustomEvent('filter-change', {
164
- detail: {
165
- name,
166
- operator,
167
- value: e.detail
168
- }
169
- })
170
- )}
171
- >
172
- <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
173
- </ox-select>
174
- `
129
+ : type === 'boolean'
130
+ ? renderer(filter, value, this)
131
+ : type !== 'select'
132
+ ? html`
133
+ <label filter-title ?between=${operator == 'between'}
134
+ ><span>${label}</span> ${renderer(filter, value, this)}
135
+ </label>
136
+ `
137
+ : operator === 'in'
138
+ ? html`
139
+ <ox-select
140
+ name=${name}
141
+ placeholder=${label}
142
+ .value=${value}
143
+ @change=${(e: CustomEvent) =>
144
+ e.target?.dispatchEvent(
145
+ new CustomEvent('filter-change', {
146
+ detail: {
147
+ name,
148
+ operator,
149
+ value: e.detail
150
+ }
151
+ })
152
+ )}
153
+ >
154
+ <ox-popup-list multiple attr-selected="checked" with-search>
155
+ ${renderer(filter, value, this)}
156
+ </ox-popup-list>
157
+ </ox-select>
158
+ `
159
+ : html`
160
+ <ox-select
161
+ name=${name}
162
+ placeholder=${label}
163
+ .value=${value}
164
+ @change=${(e: CustomEvent) =>
165
+ e.target?.dispatchEvent(
166
+ new CustomEvent('filter-change', {
167
+ detail: {
168
+ name,
169
+ operator,
170
+ value: e.detail
171
+ }
172
+ })
173
+ )}
174
+ >
175
+ <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
176
+ </ox-select>
177
+ `
175
178
  })}
176
179
  </form>
177
180
  `
package/stories/ox-filters-form-barcode.stories.ts CHANGED
@@ -27,6 +27,7 @@ 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
+
30
31
  <link
31
32
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
32
33
  rel="stylesheet"
@@ -40,11 +41,6 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
40
41
  rel="stylesheet"
41
42
  />
42
43
 
43
- <style>
44
- body {
45
- }
46
- </style>
47
-
48
44
  <ox-filters-form-base
49
45
  .value=${value}
50
46
  .filters=${filters}
package/stories/ox-filters-form-base.stories.ts CHANGED
@@ -43,6 +43,27 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
43
43
 
44
44
  <style>
45
45
  body {
46
+ height: 500px;
47
+ }
48
+ </style>
49
+
50
+ <style>
51
+ ox-filters-form-base {
52
+ --input-gap-vertical: 8px;
53
+ --input-gap-horizontal: 16px;
54
+
55
+ --ox-filters-input-placeholder-color: var(--primary-color);
56
+
57
+ --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
58
+ --ox-filters-input-focus-border: 1px solid var(--primary-color);
59
+ --ox-filters-input-font: normal 14px var(--theme-font);
60
+ --ox-filters-input-color: var(--primary-text-color);
61
+ --ox-filters-input-focus-color: var(--primary-color);
62
+ --ox-filters-label-font: normal 14px var(--theme-font);
63
+ --ox-filters-label-color: var(--primary-text-color);
64
+
65
+ --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
66
+ --ox-filters-input-padding: 6px 2px;
46
67
  }
47
68
  </style>
48
69
 
@@ -60,6 +81,13 @@ const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTy
60
81
  export const Regular = Template.bind({})
61
82
  Regular.args = {
62
83
  filters: [
84
+ {
85
+ name: 'search',
86
+ type: 'search',
87
+ label: 'search',
88
+ operator: 'eq',
89
+ value: ''
90
+ },
63
91
  {
64
92
  name: 'test',
65
93
  type: 'string',
package/themes/form-theme.css CHANGED
@@ -1,4 +1,5 @@
1
1
  body {
2
+ /* */
2
3
  --form-border: none;
3
4
  --form-margin: var(--margin-wide);
4
5
  --form-max-width: 700px;
@@ -12,7 +13,6 @@ body {
12
13
  --legend-text-color: var(--secondary-text-color);
13
14
  --legend-border-bottom: 1px solid var(--primary-color);
14
15
 
15
- --label-padding: 3px 0;
16
16
  --label-font: normal 14px var(--theme-font);
17
17
  --label-color: var(--secondary-color);
18
18