@enso-ui/filters 3.0.9 → 3.0.13
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 +2 -2
- package/src/bulma/BaseSelectFilter.vue +1 -0
- package/src/bulma/DateFilter.vue +11 -10
- package/src/bulma/DateIntervalFilter.vue +18 -17
- package/src/bulma/EnsoSelectFilter.vue +1 -0
- package/src/bulma/InputFilter.vue +18 -17
- package/src/bulma/IntervalFilter.vue +17 -16
- package/src/bulma/SelectFilter.vue +1 -0
- package/src/bulma/ToggleFilter.vue +2 -1
- package/src/bulma/VueFilter.vue +2 -1
- package/src/renderless/CoreDateFilter.vue +5 -3
- package/src/renderless/FilterState.vue +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enso-ui/filters",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.13",
|
|
4
4
|
"description": "Renderless Vue Filter Components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@fortawesome/vue-fontawesome": "3.0.0-5",
|
|
35
35
|
"bulma": "^0.9.0",
|
|
36
36
|
"date-fns": "^2.0.0",
|
|
37
|
-
"v-tooltip": "4.0.0-
|
|
37
|
+
"v-tooltip": "4.0.0-beta.2",
|
|
38
38
|
"vue": "^3.0",
|
|
39
39
|
"vuex": "^4.0.0"
|
|
40
40
|
},
|
package/src/bulma/DateFilter.vue
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<div class="date-filter is-paddingless">
|
|
3
|
+
<core-date-filter v-bind="$attrs">
|
|
4
|
+
<template #default="{
|
|
5
|
+
filters, filter, custom, minBindings, minEvents, maxBindings, maxEvents,
|
|
6
|
+
direction, directionBindings, directionEvents, backEvents, filterEvents,
|
|
7
|
+
}">
|
|
8
8
|
<div class="header has-text-centered has-background-light"
|
|
9
9
|
v-if="!compact">
|
|
10
10
|
<strong>
|
|
@@ -64,16 +64,17 @@
|
|
|
64
64
|
</div>
|
|
65
65
|
</fade>
|
|
66
66
|
</div>
|
|
67
|
-
</
|
|
68
|
-
</
|
|
69
|
-
</
|
|
67
|
+
</template>
|
|
68
|
+
</core-date-filter>
|
|
69
|
+
</div>
|
|
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,
|
|
@@ -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
|
+
value, 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">
|
|
@@ -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
|
|
|
@@ -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
|
|
|
@@ -14,6 +14,8 @@ export default {
|
|
|
14
14
|
|
|
15
15
|
mixins: [dateIntervals],
|
|
16
16
|
|
|
17
|
+
inheritAttrs: false,
|
|
18
|
+
|
|
17
19
|
props: {
|
|
18
20
|
default: {
|
|
19
21
|
type: String,
|
|
@@ -177,7 +179,7 @@ export default {
|
|
|
177
179
|
modelValue: this.isFuture,
|
|
178
180
|
},
|
|
179
181
|
directionEvents: {
|
|
180
|
-
|
|
182
|
+
'update:modelValue': e => {
|
|
181
183
|
this.isFuture = e;
|
|
182
184
|
this.filter = 'today';
|
|
183
185
|
},
|
|
@@ -201,7 +203,7 @@ export default {
|
|
|
201
203
|
max: this.interval.max,
|
|
202
204
|
},
|
|
203
205
|
minEvents: {
|
|
204
|
-
|
|
206
|
+
'update:modelValue': e => {
|
|
205
207
|
this.interval.min = e;
|
|
206
208
|
this.update();
|
|
207
209
|
},
|
|
@@ -215,7 +217,7 @@ export default {
|
|
|
215
217
|
min: this.interval.min,
|
|
216
218
|
},
|
|
217
219
|
maxEvents: {
|
|
218
|
-
|
|
220
|
+
'update:modelValue': e => {
|
|
219
221
|
this.interval.max = e;
|
|
220
222
|
this.update();
|
|
221
223
|
},
|