@neovici/cosmoz-omnitable 13.12.2 → 13.13.0
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.
|
@@ -31,6 +31,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
|
|
|
31
31
|
return {
|
|
32
32
|
min: { type: Number, value: null, notify: true },
|
|
33
33
|
max: { type: Number, value: null, notify: true },
|
|
34
|
+
limits: { type: Function },
|
|
34
35
|
locale: { type: String, value: null, notify: true },
|
|
35
36
|
autoupdate: { type: Boolean, value: false, notify: true },
|
|
36
37
|
currency: { type: String, notify: true },
|
|
@@ -42,6 +43,10 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
|
|
|
42
43
|
};
|
|
43
44
|
}
|
|
44
45
|
|
|
46
|
+
getConfig(column) {
|
|
47
|
+
return { limits: column.limits };
|
|
48
|
+
}
|
|
49
|
+
|
|
45
50
|
getFilterFn(column, filter) {
|
|
46
51
|
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
47
52
|
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
|
|
@@ -119,7 +124,17 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
|
|
|
119
124
|
}
|
|
120
125
|
|
|
121
126
|
renderHeader(
|
|
122
|
-
{
|
|
127
|
+
{
|
|
128
|
+
title,
|
|
129
|
+
min,
|
|
130
|
+
max,
|
|
131
|
+
limits,
|
|
132
|
+
locale,
|
|
133
|
+
rates,
|
|
134
|
+
currency,
|
|
135
|
+
autoupdate,
|
|
136
|
+
autodetect,
|
|
137
|
+
},
|
|
123
138
|
{ filter },
|
|
124
139
|
setState,
|
|
125
140
|
source,
|
|
@@ -131,6 +146,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
|
|
|
131
146
|
.rates=${rates}
|
|
132
147
|
.min=${min}
|
|
133
148
|
.max=${max}
|
|
149
|
+
.limits=${limits}
|
|
134
150
|
.locale=${locale}
|
|
135
151
|
.currency=${currency}
|
|
136
152
|
.autoupdate=${autoupdate}
|
|
@@ -10,24 +10,37 @@ import { html } from 'lit-html';
|
|
|
10
10
|
import { columnMixin } from './cosmoz-omnitable-column-mixin';
|
|
11
11
|
import './lib/cosmoz-omnitable-date-range-input';
|
|
12
12
|
import { defaultComputeSource } from './lib/utils-data';
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
getString,
|
|
15
|
+
getComparableValue,
|
|
16
|
+
toDate,
|
|
17
|
+
toHashString,
|
|
18
|
+
toXlsxValue,
|
|
19
|
+
applySingleFilter,
|
|
20
|
+
getInputString,
|
|
21
|
+
fromInputString,
|
|
22
|
+
} from './lib/utils-date';
|
|
14
23
|
|
|
15
24
|
class OmnitableColumnDate extends columnMixin(PolymerElement) {
|
|
16
25
|
static get properties() {
|
|
17
26
|
return {
|
|
18
27
|
min: { type: Number, value: null, notify: true },
|
|
19
28
|
max: { type: Number, value: null, notify: true },
|
|
29
|
+
limits: { type: Function },
|
|
20
30
|
locale: { type: String, value: null, notify: true },
|
|
21
31
|
headerCellClass: { type: String, value: 'date-header-cell' },
|
|
22
32
|
width: { type: String, value: '100px' },
|
|
23
33
|
minWidth: { type: String, value: '82px' },
|
|
24
|
-
flex: { type: String, value: '0' }
|
|
34
|
+
flex: { type: String, value: '0' },
|
|
25
35
|
};
|
|
26
36
|
}
|
|
27
37
|
|
|
38
|
+
getConfig(column) {
|
|
39
|
+
return { limits: column.limits };
|
|
40
|
+
}
|
|
41
|
+
|
|
28
42
|
getFilterFn(column, filter) {
|
|
29
|
-
const
|
|
30
|
-
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
43
|
+
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
31
44
|
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
|
|
32
45
|
|
|
33
46
|
if (min == null && max == null) {
|
|
@@ -77,7 +90,7 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
|
|
|
77
90
|
|
|
78
91
|
return {
|
|
79
92
|
min: toDate(matches[1]),
|
|
80
|
-
max: toDate(matches[2])
|
|
93
|
+
max: toDate(matches[2]),
|
|
81
94
|
};
|
|
82
95
|
}
|
|
83
96
|
|
|
@@ -86,34 +99,35 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
|
|
|
86
99
|
}
|
|
87
100
|
|
|
88
101
|
renderEditCell(column, { item }, onItemChange) {
|
|
89
|
-
const onChange = event =>
|
|
102
|
+
const onChange = (event) =>
|
|
103
|
+
onItemChange(fromInputString(event.target.value));
|
|
90
104
|
|
|
91
105
|
return html`<cosmoz-input
|
|
92
106
|
no-label-float
|
|
93
107
|
type="date"
|
|
94
|
-
@change=${
|
|
95
|
-
.value=${
|
|
108
|
+
@change=${onChange}
|
|
109
|
+
.value=${getInputString(column, item)}
|
|
96
110
|
></cosmoz-input>`;
|
|
97
111
|
}
|
|
98
112
|
|
|
99
113
|
renderHeader(
|
|
100
|
-
{ title,
|
|
101
|
-
min,
|
|
102
|
-
max,
|
|
103
|
-
locale },
|
|
114
|
+
{ title, min, max, limits, locale },
|
|
104
115
|
{ filter },
|
|
105
116
|
setState,
|
|
106
|
-
source
|
|
117
|
+
source,
|
|
107
118
|
) {
|
|
108
119
|
return html`<cosmoz-omnitable-date-range-input
|
|
109
|
-
.title=${
|
|
110
|
-
.filter=${
|
|
111
|
-
.values=${
|
|
112
|
-
.min=${
|
|
113
|
-
.max=${
|
|
114
|
-
.
|
|
115
|
-
|
|
116
|
-
@
|
|
120
|
+
.title=${title}
|
|
121
|
+
.filter=${filter}
|
|
122
|
+
.values=${source}
|
|
123
|
+
.min=${min}
|
|
124
|
+
.max=${max}
|
|
125
|
+
.limits=${limits}
|
|
126
|
+
.locale=${locale}
|
|
127
|
+
@filter-changed=${({ detail: { value } }) =>
|
|
128
|
+
setState((state) => ({ ...state, filter: value }))}
|
|
129
|
+
@header-focused-changed=${({ detail: { value } }) =>
|
|
130
|
+
setState((state) => ({ ...state, headerFocused: value }))}
|
|
117
131
|
></cosmoz-omnitable-date-range-input>`;
|
|
118
132
|
}
|
|
119
133
|
|
|
@@ -6,8 +6,18 @@ import './ui-helpers/cosmoz-clear-button';
|
|
|
6
6
|
import { columnMixin } from './cosmoz-omnitable-column-mixin';
|
|
7
7
|
import { PolymerElement } from '@polymer/polymer/polymer-element';
|
|
8
8
|
import { html } from 'lit-html';
|
|
9
|
-
import {
|
|
10
|
-
|
|
9
|
+
import {
|
|
10
|
+
fromHashString,
|
|
11
|
+
getString,
|
|
12
|
+
toHashString,
|
|
13
|
+
toXlsxValue,
|
|
14
|
+
} from './lib/utils-datetime';
|
|
15
|
+
import {
|
|
16
|
+
applySingleFilter,
|
|
17
|
+
fromInputString,
|
|
18
|
+
getComparableValue,
|
|
19
|
+
toDate,
|
|
20
|
+
} from './lib/utils-date';
|
|
11
21
|
import { defaultComputeSource } from './lib/utils-data';
|
|
12
22
|
import './lib/cosmoz-omnitable-datetime-range-input';
|
|
13
23
|
|
|
@@ -25,18 +35,22 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
|
|
|
25
35
|
return {
|
|
26
36
|
min: { type: Number, value: null, notify: true },
|
|
27
37
|
max: { type: Number, value: null, notify: true },
|
|
38
|
+
limits: { type: Function },
|
|
28
39
|
locale: { type: String, value: null, notify: true },
|
|
29
40
|
headerCellClass: { type: String, value: 'datetime-header-cell' },
|
|
30
41
|
width: { type: String, value: '210px' },
|
|
31
42
|
minWidth: { type: String, value: '128px' },
|
|
32
43
|
flex: { type: String, value: '0' },
|
|
33
|
-
filterStep: { type: Number, value: 1 }
|
|
44
|
+
filterStep: { type: Number, value: 1 },
|
|
34
45
|
};
|
|
35
46
|
}
|
|
36
47
|
|
|
48
|
+
getConfig(column) {
|
|
49
|
+
return { limits: column.limits };
|
|
50
|
+
}
|
|
51
|
+
|
|
37
52
|
getFilterFn(column, filter) {
|
|
38
|
-
const
|
|
39
|
-
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
53
|
+
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
40
54
|
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
|
|
41
55
|
|
|
42
56
|
if (min == null && max == null) {
|
|
@@ -86,7 +100,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
|
|
|
86
100
|
|
|
87
101
|
return {
|
|
88
102
|
min: fromHashString(matches[1]),
|
|
89
|
-
max: fromHashString(matches[2])
|
|
103
|
+
max: fromHashString(matches[2]),
|
|
90
104
|
};
|
|
91
105
|
}
|
|
92
106
|
|
|
@@ -95,31 +109,36 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
|
|
|
95
109
|
}
|
|
96
110
|
|
|
97
111
|
renderEditCell(column, { item }, onItemChange) {
|
|
98
|
-
const onChange = event =>
|
|
99
|
-
|
|
112
|
+
const onChange = (event) =>
|
|
113
|
+
onItemChange(fromInputString(event.target.value));
|
|
114
|
+
return html`<cosmoz-input
|
|
115
|
+
no-label-float
|
|
116
|
+
type="text"
|
|
117
|
+
@change=${onChange}
|
|
118
|
+
.value=${getString(column, item)}
|
|
119
|
+
></cosmoz-input>`;
|
|
100
120
|
}
|
|
101
121
|
|
|
102
122
|
// eslint-disable-next-line max-lines-per-function
|
|
103
123
|
renderHeader(
|
|
104
|
-
{ title,
|
|
105
|
-
min,
|
|
106
|
-
max,
|
|
107
|
-
locale,
|
|
108
|
-
filterStep },
|
|
124
|
+
{ title, min, max, limits, locale, filterStep },
|
|
109
125
|
{ filter },
|
|
110
126
|
setState,
|
|
111
|
-
source
|
|
127
|
+
source,
|
|
112
128
|
) {
|
|
113
129
|
return html`<cosmoz-omnitable-datetime-range-input
|
|
114
|
-
.title=${
|
|
115
|
-
.filter=${
|
|
116
|
-
.values=${
|
|
117
|
-
.min=${
|
|
118
|
-
.max=${
|
|
119
|
-
.
|
|
120
|
-
.
|
|
121
|
-
|
|
122
|
-
@
|
|
130
|
+
.title=${title}
|
|
131
|
+
.filter=${filter}
|
|
132
|
+
.values=${source}
|
|
133
|
+
.min=${min}
|
|
134
|
+
.max=${max}
|
|
135
|
+
.limits=${limits}
|
|
136
|
+
.locale=${locale}
|
|
137
|
+
.filterStep=${filterStep}
|
|
138
|
+
@filter-changed=${({ detail: { value } }) =>
|
|
139
|
+
setState((state) => ({ ...state, filter: value }))}
|
|
140
|
+
@header-focused-changed=${({ detail: { value } }) =>
|
|
141
|
+
setState((state) => ({ ...state, headerFocused: value }))}
|
|
123
142
|
></cosmoz-omnitable-datetime-range-input>`;
|
|
124
143
|
}
|
|
125
144
|
|
|
@@ -29,6 +29,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
|
|
|
29
29
|
return {
|
|
30
30
|
min: { type: Number, value: null, notify: true },
|
|
31
31
|
max: { type: Number, value: null, notify: true },
|
|
32
|
+
limits: { type: Function },
|
|
32
33
|
locale: { type: String, value: null, notify: true },
|
|
33
34
|
autoupdate: { type: Boolean, value: false, notify: true },
|
|
34
35
|
cellClass: { type: String, value: 'number-cell align-right' },
|
|
@@ -40,6 +41,10 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
|
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
getConfig(column) {
|
|
45
|
+
return { limits: column.limits };
|
|
46
|
+
}
|
|
47
|
+
|
|
43
48
|
getFilterFn(column, filter) {
|
|
44
49
|
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
|
|
45
50
|
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
|
|
@@ -117,6 +122,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
|
|
|
117
122
|
title,
|
|
118
123
|
min,
|
|
119
124
|
max,
|
|
125
|
+
limits,
|
|
120
126
|
locale,
|
|
121
127
|
maximumFractionDigits,
|
|
122
128
|
minimumFractionDigits,
|
|
@@ -132,6 +138,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
|
|
|
132
138
|
.values=${source}
|
|
133
139
|
.min=${min}
|
|
134
140
|
.max=${max}
|
|
141
|
+
.limits=${limits}
|
|
135
142
|
.locale=${locale}
|
|
136
143
|
.maximumFractionDigits=${maximumFractionDigits}
|
|
137
144
|
.minimumFractionDigsits=${minimumFractionDigits}
|
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
|
|
3
3
|
import { timeOut } from '@polymer/polymer/lib/utils/async.js';
|
|
4
4
|
import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
|
|
5
|
+
import { invoke } from '@neovici/cosmoz-utils/function';
|
|
5
6
|
|
|
6
|
-
const getCloseableParent = el =>
|
|
7
|
-
typeof el.close === 'function'
|
|
8
|
-
? el
|
|
9
|
-
: getCloseableParent(el.parentElement);
|
|
7
|
+
const getCloseableParent = (el) =>
|
|
8
|
+
typeof el.close === 'function' ? el : getCloseableParent(el.parentElement);
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* @polymer
|
|
@@ -14,39 +13,46 @@ const getCloseableParent = el =>
|
|
|
14
13
|
* @param {class} base The base class
|
|
15
14
|
* @returns {class} The base class with the mixin applied
|
|
16
15
|
*/
|
|
17
|
-
export const rangeInputMixin =
|
|
16
|
+
export const rangeInputMixin = (
|
|
17
|
+
base, // eslint-disable-line max-lines-per-function
|
|
18
|
+
) =>
|
|
18
19
|
/**
|
|
19
20
|
* @polymer
|
|
20
21
|
* @mixinClass
|
|
21
22
|
*/
|
|
22
23
|
class extends base {
|
|
23
|
-
static get properties() {
|
|
24
|
+
static get properties() {
|
|
25
|
+
// eslint-disable-line max-lines-per-function
|
|
24
26
|
return {
|
|
25
27
|
filter: {
|
|
26
28
|
type: Object,
|
|
27
|
-
notify: true
|
|
29
|
+
notify: true,
|
|
28
30
|
},
|
|
29
31
|
|
|
30
32
|
values: {
|
|
31
33
|
type: Array,
|
|
32
34
|
value() {
|
|
33
35
|
return [];
|
|
34
|
-
}
|
|
36
|
+
},
|
|
35
37
|
},
|
|
36
38
|
|
|
37
39
|
headerFocused: {
|
|
38
40
|
type: Boolean,
|
|
39
|
-
notify: true
|
|
41
|
+
notify: true,
|
|
40
42
|
},
|
|
41
43
|
|
|
42
44
|
min: {
|
|
43
45
|
type: Number,
|
|
44
|
-
value: null
|
|
46
|
+
value: null,
|
|
45
47
|
},
|
|
46
48
|
|
|
47
49
|
max: {
|
|
48
50
|
type: Number,
|
|
49
|
-
value: null
|
|
51
|
+
value: null,
|
|
52
|
+
},
|
|
53
|
+
|
|
54
|
+
limits: {
|
|
55
|
+
type: Function,
|
|
50
56
|
},
|
|
51
57
|
|
|
52
58
|
/**
|
|
@@ -54,12 +60,12 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
54
60
|
*/
|
|
55
61
|
autoupdate: {
|
|
56
62
|
type: String,
|
|
57
|
-
value: true
|
|
63
|
+
value: true,
|
|
58
64
|
},
|
|
59
65
|
|
|
60
66
|
locale: {
|
|
61
67
|
type: String,
|
|
62
|
-
value: null
|
|
68
|
+
value: null,
|
|
63
69
|
},
|
|
64
70
|
|
|
65
71
|
_filterInput: {
|
|
@@ -67,14 +73,14 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
67
73
|
value() {
|
|
68
74
|
return {
|
|
69
75
|
min: null,
|
|
70
|
-
max: null
|
|
76
|
+
max: null,
|
|
71
77
|
};
|
|
72
|
-
}
|
|
78
|
+
},
|
|
73
79
|
},
|
|
74
80
|
|
|
75
81
|
_range: {
|
|
76
82
|
type: Object,
|
|
77
|
-
computed: '_computeRange(values.*)'
|
|
83
|
+
computed: '_computeRange(values.*)',
|
|
78
84
|
},
|
|
79
85
|
|
|
80
86
|
_limit: {
|
|
@@ -82,30 +88,32 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
82
88
|
computed: '_computeLimit(_range, _filterInput.*, min, max)',
|
|
83
89
|
value() {
|
|
84
90
|
return {};
|
|
85
|
-
}
|
|
91
|
+
},
|
|
86
92
|
},
|
|
87
93
|
|
|
88
94
|
_tooltip: {
|
|
89
95
|
type: String,
|
|
90
|
-
computed: '_computeTooltip(title, _filterText)'
|
|
96
|
+
computed: '_computeTooltip(title, _filterText)',
|
|
91
97
|
},
|
|
92
98
|
|
|
93
99
|
_fromClasses: {
|
|
94
100
|
type: String,
|
|
95
|
-
computed: '_computeInputClasses(_filterInput.min)'
|
|
101
|
+
computed: '_computeInputClasses(_filterInput.min)',
|
|
96
102
|
},
|
|
97
103
|
|
|
98
104
|
_toClasses: {
|
|
99
105
|
type: String,
|
|
100
|
-
computed: '_computeInputClasses(_filterInput.max)'
|
|
101
|
-
}
|
|
106
|
+
computed: '_computeInputClasses(_filterInput.max)',
|
|
107
|
+
},
|
|
102
108
|
};
|
|
103
109
|
}
|
|
104
110
|
|
|
111
|
+
|
|
105
112
|
static get observers() {
|
|
106
113
|
return [
|
|
107
114
|
'_filterInputChanged(_filterInput.*, autoupdate)',
|
|
108
|
-
'_filterChanged(filter.*)'
|
|
115
|
+
'_filterChanged(filter.*)',
|
|
116
|
+
'_updateLimits(limits, headerFocused)',
|
|
109
117
|
];
|
|
110
118
|
}
|
|
111
119
|
|
|
@@ -121,13 +129,13 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
121
129
|
}
|
|
122
130
|
|
|
123
131
|
/**
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
132
|
+
* Converts a value to number optionaly limiting it.
|
|
133
|
+
*
|
|
134
|
+
* @param {Number|*} value The value to convert to number
|
|
135
|
+
* @param {Number|*} limit The value used to limit the number
|
|
136
|
+
* @param {Function} limitFunc The function used to limit the number (Math.min|Math.max)
|
|
137
|
+
* @returns {Number|void} Value converted to Number or void
|
|
138
|
+
*/
|
|
131
139
|
toNumber(value, limit, limitFunc) {
|
|
132
140
|
if (value == null || value === '') {
|
|
133
141
|
return;
|
|
@@ -152,11 +160,11 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
152
160
|
|
|
153
161
|
/**
|
|
154
162
|
* Get the comparable value of an item.
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
163
|
+
*
|
|
164
|
+
* @param {Object} item Item to be processed
|
|
165
|
+
* @param {String} valuePath Property path
|
|
166
|
+
* @returns {Number|void} Valid value or void
|
|
167
|
+
*/
|
|
160
168
|
getComparableValue(item, valuePath) {
|
|
161
169
|
if (item == null) {
|
|
162
170
|
return;
|
|
@@ -177,26 +185,28 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
177
185
|
}
|
|
178
186
|
|
|
179
187
|
/**
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
188
|
+
* Computes min/max range from values.
|
|
189
|
+
*
|
|
190
|
+
* @param {Object} change `values` property changes
|
|
191
|
+
* @returns {Object} Computed min/max
|
|
192
|
+
*/
|
|
185
193
|
_computeRange(change) {
|
|
186
194
|
const allValues = change.base,
|
|
187
|
-
values =
|
|
188
|
-
|
|
195
|
+
values =
|
|
196
|
+
Array.isArray(allValues) &&
|
|
197
|
+
allValues.length &&
|
|
198
|
+
allValues.map((v) => this.toValue(v)).filter((n) => n != null);
|
|
189
199
|
|
|
190
200
|
if (!values || values.length < 1) {
|
|
191
201
|
return {
|
|
192
202
|
min: null,
|
|
193
|
-
max: null
|
|
203
|
+
max: null,
|
|
194
204
|
};
|
|
195
205
|
}
|
|
196
206
|
return values.reduce((p, n) => {
|
|
197
207
|
return {
|
|
198
208
|
min: this.toValue(n, p.min, Math.min),
|
|
199
|
-
max: this.toValue(n, p.max, Math.max)
|
|
209
|
+
max: this.toValue(n, p.max, Math.max),
|
|
200
210
|
};
|
|
201
211
|
}, {});
|
|
202
212
|
}
|
|
@@ -213,13 +223,20 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
213
223
|
|
|
214
224
|
return {
|
|
215
225
|
fromMin: aMin,
|
|
216
|
-
fromMax: this.toValue(
|
|
217
|
-
|
|
218
|
-
|
|
226
|
+
fromMax: this.toValue(
|
|
227
|
+
aMax,
|
|
228
|
+
this._fromInputString(input.max, 'max'),
|
|
229
|
+
Math.min,
|
|
230
|
+
),
|
|
231
|
+
toMin: this.toValue(
|
|
232
|
+
aMin,
|
|
233
|
+
this._fromInputString(input.min, 'min'),
|
|
234
|
+
Math.max,
|
|
235
|
+
),
|
|
236
|
+
toMax: aMax,
|
|
219
237
|
};
|
|
220
238
|
}
|
|
221
239
|
|
|
222
|
-
|
|
223
240
|
_computeFilterText(change) {
|
|
224
241
|
if (change.base == null) {
|
|
225
242
|
return undefined;
|
|
@@ -243,7 +260,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
243
260
|
if (text == null) {
|
|
244
261
|
return title;
|
|
245
262
|
}
|
|
246
|
-
return `${
|
|
263
|
+
return `${title}: ${text}`;
|
|
247
264
|
}
|
|
248
265
|
|
|
249
266
|
_fromInputString(value) {
|
|
@@ -261,17 +278,17 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
261
278
|
_getDefaultFilter() {
|
|
262
279
|
return {
|
|
263
280
|
min: null,
|
|
264
|
-
max: null
|
|
281
|
+
max: null,
|
|
265
282
|
};
|
|
266
283
|
}
|
|
267
284
|
|
|
268
285
|
/**
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
286
|
+
* Observes changes of _filterInput, saves the path, debounces _limitInput.
|
|
287
|
+
*
|
|
288
|
+
* @param {Object} change '_filterInput' property changes
|
|
289
|
+
* @param {Boolean} autoupdate whether to auto-update on value changes
|
|
290
|
+
* @returns {void}
|
|
291
|
+
*/
|
|
275
292
|
_filterInputChanged(change, autoupdate) {
|
|
276
293
|
const path = change.path.split('.')[1];
|
|
277
294
|
this.__inputChangePath = path || null;
|
|
@@ -286,7 +303,7 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
286
303
|
() => {
|
|
287
304
|
this._limitInput();
|
|
288
305
|
this._updateFilter();
|
|
289
|
-
}
|
|
306
|
+
},
|
|
290
307
|
);
|
|
291
308
|
enqueueDebouncer(this._limitInputDebouncer);
|
|
292
309
|
}
|
|
@@ -308,32 +325,37 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
308
325
|
|
|
309
326
|
_onKeyDown(event) {
|
|
310
327
|
const input = event.currentTarget,
|
|
311
|
-
inputs = Array.from(
|
|
312
|
-
|
|
328
|
+
inputs = Array.from(
|
|
329
|
+
input.parentElement.querySelectorAll('cosmoz-input'),
|
|
330
|
+
),
|
|
331
|
+
nextInput = inputs[inputs.findIndex((i) => i === input) + 1],
|
|
313
332
|
isLastInput = !nextInput,
|
|
314
333
|
isFirstInput = inputs[0] === input;
|
|
315
334
|
|
|
316
335
|
switch (event.keyCode) {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
336
|
+
case 13: // Enter
|
|
337
|
+
event.preventDefault();
|
|
338
|
+
|
|
339
|
+
if (!isLastInput) {
|
|
340
|
+
nextInput.focus();
|
|
341
|
+
} else {
|
|
342
|
+
// if this is the last input, update the filter
|
|
343
|
+
const limited = this._limitInput();
|
|
344
|
+
this._updateFilter();
|
|
345
|
+
// and close the dropdown if the value was not out of bounds
|
|
346
|
+
if (!limited) {
|
|
347
|
+
this._closeParent(input);
|
|
348
|
+
}
|
|
329
349
|
}
|
|
330
|
-
|
|
331
|
-
break;
|
|
350
|
+
break;
|
|
332
351
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
352
|
+
case 9: // Tab
|
|
353
|
+
if (
|
|
354
|
+
(isLastInput && !event.shiftKey) ||
|
|
355
|
+
(isFirstInput && event.shiftKey)
|
|
356
|
+
) {
|
|
357
|
+
this._closeParent(input);
|
|
358
|
+
}
|
|
337
359
|
}
|
|
338
360
|
}
|
|
339
361
|
|
|
@@ -341,27 +363,29 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
341
363
|
getCloseableParent(input).close();
|
|
342
364
|
}
|
|
343
365
|
|
|
344
|
-
_onDropdownOpenedChanged({
|
|
345
|
-
currentTarget, detail: { value }
|
|
346
|
-
}) {
|
|
366
|
+
_onDropdownOpenedChanged({ currentTarget, detail: { value } }) {
|
|
347
367
|
if (!value) {
|
|
348
368
|
return;
|
|
349
369
|
}
|
|
350
370
|
|
|
351
371
|
// focus the first input after the dropdown is visible
|
|
352
|
-
setTimeout(
|
|
372
|
+
setTimeout(
|
|
373
|
+
() => currentTarget.querySelector('cosmoz-input').focus(),
|
|
374
|
+
100,
|
|
375
|
+
);
|
|
353
376
|
}
|
|
354
377
|
|
|
355
|
-
|
|
356
378
|
/**
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
379
|
+
* Debounced function called by `_filterInputChanged` when `_filterInput` changes.
|
|
380
|
+
*
|
|
381
|
+
* @returns {void}
|
|
382
|
+
*/
|
|
361
383
|
_limitInput() {
|
|
362
384
|
const input = this._filterInput,
|
|
363
385
|
path = this.__inputChangePath,
|
|
364
|
-
value = path
|
|
386
|
+
value = path
|
|
387
|
+
? this._fromInputString(this.get(path, input), path)
|
|
388
|
+
: null;
|
|
365
389
|
|
|
366
390
|
this.__inputChangePath = null;
|
|
367
391
|
|
|
@@ -377,9 +401,14 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
377
401
|
minValue = this.toValue(value, lowerLimit, Math.max),
|
|
378
402
|
limitedValue = this.toValue(minValue, upperLimit, Math.min);
|
|
379
403
|
|
|
380
|
-
if (
|
|
404
|
+
if (
|
|
405
|
+
this.getComparableValue(value) !== this.getComparableValue(limitedValue)
|
|
406
|
+
) {
|
|
381
407
|
//set value without debouncing _limitInput again.
|
|
382
|
-
this.set(
|
|
408
|
+
this.set(
|
|
409
|
+
['_filterInput', path],
|
|
410
|
+
this._toInputString(limitedValue, path),
|
|
411
|
+
);
|
|
383
412
|
if (this._limitInputDebouncer) {
|
|
384
413
|
this._limitInputDebouncer.cancel();
|
|
385
414
|
}
|
|
@@ -395,8 +424,10 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
395
424
|
min = this._fromInputString(input.min, 'min'),
|
|
396
425
|
max = this._fromInputString(input.max, 'max');
|
|
397
426
|
|
|
398
|
-
if (
|
|
399
|
-
|
|
427
|
+
if (
|
|
428
|
+
this.getComparableValue(min) ===
|
|
429
|
+
this.getComparableValue(filter, 'min') &&
|
|
430
|
+
this.getComparableValue(max) === this.getComparableValue(filter, 'max')
|
|
400
431
|
) {
|
|
401
432
|
return;
|
|
402
433
|
}
|
|
@@ -413,15 +444,17 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
413
444
|
min = this._fromInputString(input.min, 'min'),
|
|
414
445
|
max = this._fromInputString(input.max, 'max');
|
|
415
446
|
|
|
416
|
-
if (
|
|
417
|
-
|
|
447
|
+
if (
|
|
448
|
+
this.getComparableValue(min) ===
|
|
449
|
+
this.getComparableValue(filter, 'min') &&
|
|
450
|
+
this.getComparableValue(max) === this.getComparableValue(filter, 'max')
|
|
418
451
|
) {
|
|
419
452
|
return;
|
|
420
453
|
}
|
|
421
454
|
|
|
422
455
|
this.set('_filterInput', {
|
|
423
456
|
min: this._toInputString(filter.min),
|
|
424
|
-
max: this._toInputString(filter.max)
|
|
457
|
+
max: this._toInputString(filter.max),
|
|
425
458
|
});
|
|
426
459
|
if (this._limitInputDebouncer) {
|
|
427
460
|
this._limitInputDebouncer.cancel();
|
|
@@ -433,10 +466,25 @@ export const rangeInputMixin = base => // eslint-disable-line max-lines-per-func
|
|
|
433
466
|
if (filter == null) {
|
|
434
467
|
return false;
|
|
435
468
|
}
|
|
436
|
-
return
|
|
469
|
+
return (
|
|
470
|
+
this.toValue(filter.min) != null || this.toValue(filter.max) != null
|
|
471
|
+
);
|
|
437
472
|
}
|
|
438
473
|
|
|
439
474
|
resetFilter() {
|
|
440
475
|
this.filter = this._getDefaultFilter();
|
|
441
476
|
}
|
|
477
|
+
|
|
478
|
+
_updateLimits(limits, headerFocused) {
|
|
479
|
+
if (!limits) return;
|
|
480
|
+
Promise.resolve(invoke(limits, { active: headerFocused })).then(
|
|
481
|
+
(res) => {
|
|
482
|
+
const {min, max} = res ?? {};
|
|
483
|
+
Object.assign(this, {
|
|
484
|
+
...(min != null ? { min } : {}),
|
|
485
|
+
...(max != null ? { max } : {}),
|
|
486
|
+
});
|
|
487
|
+
},
|
|
488
|
+
);
|
|
489
|
+
}
|
|
442
490
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-omnitable",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.13.0",
|
|
4
4
|
"description": "[](https://travis-ci.org/Neovici/cosmoz-omnitable)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components"
|