@enso-ui/filters 3.0.11 → 3.0.15
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.
- package/package.json +1 -1
- package/src/bulma/BaseSelectFilter.vue +1 -0
- package/src/bulma/DateFilter.vue +2 -1
- package/src/bulma/DateIntervalFilter.vue +18 -17
- package/src/bulma/EnsoSelectFilter.vue +3 -3
- package/src/bulma/InputFilter.vue +18 -17
- package/src/bulma/IntervalFilter.vue +19 -18
- package/src/bulma/SelectFilter.vue +3 -3
- package/src/bulma/ToggleFilter.vue +2 -1
- package/src/bulma/VueFilter.vue +2 -1
- package/src/renderless/CoreDateFilter.vue +3 -3
- package/src/renderless/CoreDateIntervalFilter.vue +2 -0
- package/src/renderless/CoreInputFilter.vue +2 -0
- package/src/renderless/CoreIntervalFilter.vue +4 -2
package/package.json
CHANGED
package/src/bulma/DateFilter.vue
CHANGED
|
@@ -70,10 +70,11 @@
|
|
|
70
70
|
</template>
|
|
71
71
|
|
|
72
72
|
<script>
|
|
73
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
74
|
+
import { VTooltip } from 'v-tooltip';
|
|
73
75
|
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
|
|
74
76
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
75
77
|
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
|
|
76
|
-
import { VTooltip } from 'v-tooltip';
|
|
77
78
|
import { Datepicker } from '@enso-ui/datepicker/bulma';
|
|
78
79
|
import { Fade } from '@enso-ui/transitions';
|
|
79
80
|
import VueSwitch from '@enso-ui/switch/bulma';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
<div class="date-interval-filter is-paddingless">
|
|
3
|
+
<div class="header has-background-light has-text-centered"
|
|
4
|
+
v-if="!compact">
|
|
5
|
+
<strong>
|
|
6
|
+
{{ i18n(name) }}
|
|
7
|
+
</strong>
|
|
8
|
+
</div>
|
|
9
|
+
<div v-tooltip="compact ? i18n(name) : null"
|
|
10
|
+
class="dates-wrapper"
|
|
11
|
+
:class="{ 'has-background-light': compact }">
|
|
12
|
+
<core-date-interval-filter v-bind="$attrs">
|
|
13
|
+
<template #default="{ minBindings, minEvents, maxBindings, maxEvents }">
|
|
14
14
|
<div class="columns is-mobile is-variable is-1 is-centered">
|
|
15
15
|
<div class="column">
|
|
16
16
|
<datepicker v-bind="minBindings"
|
|
@@ -27,13 +27,14 @@
|
|
|
27
27
|
v-on="maxEvents"/>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
|
-
</
|
|
31
|
-
</
|
|
32
|
-
</
|
|
33
|
-
</
|
|
30
|
+
</template>
|
|
31
|
+
</core-date-interval-filter>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
34
|
</template>
|
|
35
35
|
|
|
36
36
|
<script>
|
|
37
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
37
38
|
import { VTooltip } from 'v-tooltip';
|
|
38
39
|
import { Datepicker } from '@enso-ui/datepicker/bulma';
|
|
39
40
|
import CoreDateIntervalFilter from '../renderless/CoreDateIntervalFilter.vue';
|
|
@@ -52,7 +53,7 @@ export default {
|
|
|
52
53
|
},
|
|
53
54
|
altInput: {
|
|
54
55
|
type: Boolean,
|
|
55
|
-
|
|
56
|
+
default: false,
|
|
56
57
|
},
|
|
57
58
|
compact: {
|
|
58
59
|
type: Boolean,
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
<base-select-filter :compact="compact"
|
|
3
3
|
:i18n="i18n"
|
|
4
4
|
:name="name">
|
|
5
|
-
<enso-select v-
|
|
6
|
-
class="select-wrapper"
|
|
5
|
+
<enso-select v-bind="{...$attrs, class: 'select-wrapper'}"
|
|
7
6
|
:class="{'has-background-light': compact}"
|
|
8
|
-
v-
|
|
7
|
+
v-tooltip="compact ? i18n(name) : null"
|
|
9
8
|
ref="select"/>
|
|
10
9
|
</base-select-filter>
|
|
11
10
|
</template>
|
|
12
11
|
|
|
13
12
|
<script>
|
|
13
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
14
14
|
import { VTooltip } from 'v-tooltip';
|
|
15
15
|
import { EnsoSelect } from '@enso-ui/select/bulma';
|
|
16
16
|
import BaseSelectFilter from './BaseSelectFilter.vue';
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
<div class="interval-filter is-paddingless">
|
|
3
|
+
<div v-if="!compact"
|
|
4
|
+
class="header has-text-centered has-background-light">
|
|
5
|
+
<b>{{ i18n(name) }}</b>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-tooltip="compact ? i18n(name) : null"
|
|
8
|
+
:class="['input-wrapper', {'has-background-light': compact}]">
|
|
9
|
+
<div class="columns is-mobile">
|
|
10
|
+
<div class="column">
|
|
11
|
+
<core-input-filter v-bind="$attrs">
|
|
12
|
+
<template #default="{
|
|
13
|
+
value, bindings, events, clearEvents,
|
|
14
|
+
}">
|
|
15
15
|
<div class="control has-icons-right">
|
|
16
16
|
<input class="input control"
|
|
17
17
|
v-bind="bindings"
|
|
@@ -24,15 +24,16 @@
|
|
|
24
24
|
<a class="delete is-small"/>
|
|
25
25
|
</span>
|
|
26
26
|
</div>
|
|
27
|
-
</
|
|
28
|
-
</
|
|
27
|
+
</template>
|
|
28
|
+
</core-input-filter>
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
|
-
</
|
|
32
|
-
</
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
35
|
<script>
|
|
36
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
36
37
|
import { VTooltip } from 'v-tooltip';
|
|
37
38
|
import CoreInputFilter from '../renderless/CoreInputFilter.vue';
|
|
38
39
|
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
<div class="interval-filter is-paddingless">
|
|
3
|
+
<div v-if="!compact"
|
|
4
|
+
class="header has-text-centered has-background-light">
|
|
5
|
+
<b>{{ i18n(name) }}</b>
|
|
6
|
+
</div>
|
|
7
|
+
<div v-tooltip="compact ? i18n(name) : null"
|
|
8
|
+
:class="['input-wrapper', {'has-background-light': compact}]">
|
|
9
|
+
<core-interval-filter v-bind="$attrs">
|
|
10
|
+
<template #default="{
|
|
11
|
+
modelValue, invalid, minBindings, minEvents, maxBindings,
|
|
12
|
+
maxEvents, minClearEvents, maxClearEvents,
|
|
13
|
+
}">
|
|
14
14
|
<div class="columns is-mobile">
|
|
15
15
|
<div class="column">
|
|
16
16
|
<div class="control has-icons-right">
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
v-bind="minBindings"
|
|
20
20
|
:placeholder="i18n(minLabel)"
|
|
21
21
|
v-on="minEvents">
|
|
22
|
-
<span v-if="
|
|
22
|
+
<span v-if="modelValue.min"
|
|
23
23
|
class="icon is-small is-right clear-button"
|
|
24
24
|
v-on="minClearEvents">
|
|
25
25
|
<a class="delete is-small"/>
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
v-bind="maxBindings"
|
|
34
34
|
:placeholder="i18n(maxLabel)"
|
|
35
35
|
v-on="maxEvents">
|
|
36
|
-
<span v-if="
|
|
36
|
+
<span v-if="modelValue.max"
|
|
37
37
|
class="icon is-small is-right clear-button"
|
|
38
38
|
v-on="maxClearEvents">
|
|
39
39
|
<a class="delete is-small"/>
|
|
@@ -41,13 +41,14 @@
|
|
|
41
41
|
</div>
|
|
42
42
|
</div>
|
|
43
43
|
</div>
|
|
44
|
-
</
|
|
45
|
-
</
|
|
46
|
-
</
|
|
47
|
-
</
|
|
44
|
+
</template>
|
|
45
|
+
</core-interval-filter>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
48
|
</template>
|
|
49
49
|
|
|
50
50
|
<script>
|
|
51
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
51
52
|
import { VTooltip } from 'v-tooltip';
|
|
52
53
|
import CoreIntervalFilter from '../renderless/CoreIntervalFilter.vue';
|
|
53
54
|
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
<base-select-filter :compact="compact"
|
|
3
3
|
:i18n="i18n"
|
|
4
4
|
:name="name">
|
|
5
|
-
<vue-select v-
|
|
6
|
-
class="select-wrapper"
|
|
5
|
+
<vue-select v-bind="{...$attrs, class: 'select-wrapper'}"
|
|
7
6
|
:class="{'has-background-light': compact}"
|
|
8
|
-
v-bind="$attrs"
|
|
9
7
|
:i18n="i18n"
|
|
8
|
+
v-tooltip="compact ? i18n(name) : null"
|
|
10
9
|
ref="select"/>
|
|
11
10
|
</base-select-filter>
|
|
12
11
|
</template>
|
|
13
12
|
|
|
14
13
|
<script>
|
|
14
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
15
15
|
import { VTooltip } from 'v-tooltip';
|
|
16
16
|
import { VueSelect } from '@enso-ui/select/bulma';
|
|
17
17
|
import BaseSelectFilter from './BaseSelectFilter.vue';
|
|
@@ -33,8 +33,9 @@
|
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
35
|
<script>
|
|
36
|
-
import
|
|
36
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
37
37
|
import { VTooltip } from 'v-tooltip';
|
|
38
|
+
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
|
|
38
39
|
|
|
39
40
|
export default {
|
|
40
41
|
name: 'ToggleFilter',
|
package/src/bulma/VueFilter.vue
CHANGED
|
@@ -56,10 +56,11 @@
|
|
|
56
56
|
</template>
|
|
57
57
|
|
|
58
58
|
<script>
|
|
59
|
+
import 'v-tooltip/dist/v-tooltip.css';
|
|
60
|
+
import { VTooltip } from 'v-tooltip';
|
|
59
61
|
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
|
|
60
62
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
61
63
|
import { faPowerOff, faLock } from '@fortawesome/free-solid-svg-icons';
|
|
62
|
-
import { VTooltip } from 'v-tooltip';
|
|
63
64
|
|
|
64
65
|
library.add(faPowerOff, faLock);
|
|
65
66
|
|
|
@@ -179,7 +179,7 @@ export default {
|
|
|
179
179
|
modelValue: this.isFuture,
|
|
180
180
|
},
|
|
181
181
|
directionEvents: {
|
|
182
|
-
|
|
182
|
+
'update:modelValue': e => {
|
|
183
183
|
this.isFuture = e;
|
|
184
184
|
this.filter = 'today';
|
|
185
185
|
},
|
|
@@ -203,7 +203,7 @@ export default {
|
|
|
203
203
|
max: this.interval.max,
|
|
204
204
|
},
|
|
205
205
|
minEvents: {
|
|
206
|
-
|
|
206
|
+
'update:modelValue': e => {
|
|
207
207
|
this.interval.min = e;
|
|
208
208
|
this.update();
|
|
209
209
|
},
|
|
@@ -217,7 +217,7 @@ export default {
|
|
|
217
217
|
min: this.interval.min,
|
|
218
218
|
},
|
|
219
219
|
maxEvents: {
|
|
220
|
-
|
|
220
|
+
'update:modelValue': e => {
|
|
221
221
|
this.interval.max = e;
|
|
222
222
|
this.update();
|
|
223
223
|
},
|
|
@@ -20,6 +20,8 @@ export default {
|
|
|
20
20
|
|
|
21
21
|
emits: ['change', 'update:modelValue'],
|
|
22
22
|
|
|
23
|
+
inheritAttrs: false,
|
|
24
|
+
|
|
23
25
|
computed: {
|
|
24
26
|
invalid() {
|
|
25
27
|
return ![null, ''].includes(this.modelValue.min)
|
|
@@ -45,7 +47,7 @@ export default {
|
|
|
45
47
|
type: this.type,
|
|
46
48
|
},
|
|
47
49
|
minEvents: {
|
|
48
|
-
|
|
50
|
+
input: e => {
|
|
49
51
|
this.modelValue.min = e.target.value;
|
|
50
52
|
this.update();
|
|
51
53
|
},
|
|
@@ -55,7 +57,7 @@ export default {
|
|
|
55
57
|
type: this.type,
|
|
56
58
|
},
|
|
57
59
|
maxEvents: {
|
|
58
|
-
|
|
60
|
+
input: e => {
|
|
59
61
|
this.modelValue.max = e.target.value;
|
|
60
62
|
this.update();
|
|
61
63
|
},
|