@enso-ui/filters 3.0.7 → 3.0.11

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 (10) hide show
  1. package/package.json +2 -2
  2. package/src/bulma/BaseSelectFilter.vue +0 -4
  3. package/src/bulma/DateFilter.vue +9 -9
  4. package/src/bulma/ToggleFilter.vue +5 -3
  5. package/src/bulma/VueFilter.vue +9 -5
  6. package/src/renderless/CoreDateFilter.vue +14 -10
  7. package/src/renderless/CoreDateIntervalFilter.vue +6 -4
  8. package/src/renderless/CoreInputFilter.vue +8 -6
  9. package/src/renderless/CoreIntervalFilter.vue +17 -15
  10. 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.7",
3
+ "version": "3.0.11",
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-alpha.1",
37
+ "v-tooltip": "4.0.0-beta.2",
38
38
  "vue": "^3.0",
39
39
  "vuex": "^4.0.0"
40
40
  },
package/src/bulma/BaseSelectFilter.vue CHANGED
@@ -29,10 +29,6 @@ export default {
29
29
  type: String,
30
30
  default: null,
31
31
  },
32
- value: {
33
- type: null,
34
- default: null,
35
- },
36
32
  },
37
33
  };
38
34
 
package/src/bulma/DateFilter.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <core-date-filter v-bind="$attrs">
3
- <template #default="{
4
- filters, filter, custom, minBindings, minEvents, maxBindings, maxEvents,
5
- direction, directionBindings, directionEvents, backEvents, filterEvents,
6
- }">
7
- <div class="date-filter is-paddingless">
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,9 +64,9 @@
64
64
  </div>
65
65
  </fade>
66
66
  </div>
67
- </div>
68
- </template>
69
- </core-date-filter>
67
+ </template>
68
+ </core-date-filter>
69
+ </div>
70
70
  </template>
71
71
 
72
72
  <script>
package/src/bulma/ToggleFilter.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  :class="{ 'has-background-light': compact }">
15
15
  <div class="tabs is-toggle is-fullwidth filter-tabs">
16
16
  <ul>
17
- <li :class="{ 'is-active': value }">
17
+ <li :class="{ 'is-active': modelValue }">
18
18
  <a @click="update">
19
19
  <span class="filter-label">
20
20
  <template v-if="translatable">
@@ -68,16 +68,18 @@ export default {
68
68
  type: String,
69
69
  default: null,
70
70
  },
71
- value: {
71
+ modelValue: {
72
72
  type: Boolean,
73
73
  required: true,
74
74
  },
75
75
  },
76
76
 
77
+ emits: ['change', 'update:modelValue'],
78
+
77
79
  methods: {
78
80
  update() {
79
81
  if (!this.readonly) {
80
- this.$emit('input', !this.value);
82
+ this.$emit('update:modelValue', !this.modelValue);
81
83
  }
82
84
  },
83
85
  },
package/src/bulma/VueFilter.vue CHANGED
@@ -16,7 +16,7 @@
16
16
  <ul>
17
17
  <li v-for="(option, index) in options"
18
18
  :key="index"
19
- :class="{ 'is-active': option.value === value }">
19
+ :class="{ 'is-active': option.value === modelValue }">
20
20
  <a @click="update(option.value)">
21
21
  <span v-if="icons"
22
22
  :class="['icon', option.class]">
@@ -35,10 +35,12 @@
35
35
  </a>
36
36
  </li>
37
37
  <li v-if="!hideOff"
38
- :class="{ 'is-active': value === null }">
38
+ :class="{ 'is-active': modelValue === null }">
39
39
  <a @click="update()">
40
40
  <span class="icon"
41
- :class="value === null ? 'has-text-danger' : 'has-text-success'">
41
+ :class="modelValue === null
42
+ ? 'has-text-danger'
43
+ : 'has-text-success'">
42
44
  <fa icon="power-off"/>
43
45
  </span>
44
46
  <span v-if="!icons && offLabel"
@@ -107,16 +109,18 @@ export default {
107
109
  type: String,
108
110
  default: null,
109
111
  },
110
- value: {
112
+ modelValue: {
111
113
  type: null,
112
114
  default: null,
113
115
  },
114
116
  },
115
117
 
118
+ emits: ['update:modelValue'],
119
+
116
120
  methods: {
117
121
  update(value = null) {
118
122
  if (!this.readonly) {
119
- this.$emit('input', value);
123
+ this.$emit('update:modelValue', value);
120
124
  }
121
125
  },
122
126
  },
package/src/renderless/CoreDateFilter.vue CHANGED
@@ -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,
@@ -35,7 +37,7 @@ export default {
35
37
  type: Boolean,
36
38
  default: false,
37
39
  },
38
- value: {
40
+ modelValue: {
39
41
  type: String,
40
42
  default: null,
41
43
  validator: v => Base.concat(Past)
@@ -48,8 +50,10 @@ export default {
48
50
  },
49
51
  },
50
52
 
53
+ emits: ['update', 'update:modelValue'],
54
+
51
55
  data: v => ({
52
- filter: v.value || v.default,
56
+ filter: v.modelValue || v.default,
53
57
  isFuture: false,
54
58
  }),
55
59
 
@@ -74,7 +78,7 @@ export default {
74
78
  },
75
79
 
76
80
  watch: {
77
- value(value) {
81
+ modelValue(value) {
78
82
  this.filter = value;
79
83
  this.update();
80
84
  },
@@ -91,7 +95,7 @@ export default {
91
95
  methods: {
92
96
  set(filter) {
93
97
  this.filter = filter;
94
- this.$emit('input', filter);
98
+ this.$emit('update:modelValue', filter);
95
99
  this.update();
96
100
  },
97
101
  update() {
@@ -172,10 +176,10 @@ export default {
172
176
  custom: this.custom,
173
177
  direction: this.direction,
174
178
  directionBindings: {
175
- value: this.isFuture,
179
+ modelValue: this.isFuture,
176
180
  },
177
181
  directionEvents: {
178
- input: (e) => {
182
+ input: e => {
179
183
  this.isFuture = e;
180
184
  this.filter = 'today';
181
185
  },
@@ -191,7 +195,7 @@ export default {
191
195
  click: () => this.set(type),
192
196
  }),
193
197
  minBindings: {
194
- value: this.interval.min,
198
+ modelValue: this.interval.min,
195
199
  format: this.format,
196
200
  isWarning: this.equals,
197
201
  locale: this.locale,
@@ -199,13 +203,13 @@ export default {
199
203
  max: this.interval.max,
200
204
  },
201
205
  minEvents: {
202
- input: (e) => {
206
+ input: e => {
203
207
  this.interval.min = e;
204
208
  this.update();
205
209
  },
206
210
  },
207
211
  maxBindings: {
208
- value: this.interval.max,
212
+ modelValue: this.interval.max,
209
213
  format: this.format,
210
214
  isWarning: this.equals,
211
215
  locale: this.locale,
@@ -213,7 +217,7 @@ export default {
213
217
  min: this.interval.min,
214
218
  },
215
219
  maxEvents: {
216
- input: (e) => {
220
+ input: e => {
217
221
  this.interval.max = e;
218
222
  this.update();
219
223
  },
package/src/renderless/CoreDateIntervalFilter.vue CHANGED
@@ -6,6 +6,8 @@ export default {
6
6
 
7
7
  mixins: [dateIntervals],
8
8
 
9
+ emits: ['update'],
10
+
9
11
  methods: {
10
12
  update() {
11
13
  this.$emit('update', this.sanitizedInterval);
@@ -15,27 +17,27 @@ export default {
15
17
  render() {
16
18
  return this.$slots.default({
17
19
  minBindings: {
18
- value: this.interval.min,
20
+ modelValue: this.interval.min,
19
21
  format: this.format,
20
22
  isWarning: this.equals,
21
23
  locale: this.locale,
22
24
  max: this.interval.max,
23
25
  },
24
26
  minEvents: {
25
- input: (e) => {
27
+ 'update:modelValue': e => {
26
28
  this.interval.min = e;
27
29
  this.update();
28
30
  },
29
31
  },
30
32
  maxBindings: {
31
- value: this.interval.max,
33
+ modelValue: this.interval.max,
32
34
  format: this.format,
33
35
  isWarning: this.equals,
34
36
  locale: this.locale,
35
37
  min: this.interval.min,
36
38
  },
37
39
  maxEvents: {
38
- input: (e) => {
40
+ 'update:modelValue': e => {
39
41
  this.interval.max = e;
40
42
  this.update();
41
43
  },
package/src/renderless/CoreInputFilter.vue CHANGED
@@ -3,7 +3,7 @@ export default {
3
3
  name: 'CoreInputFilter',
4
4
 
5
5
  props: {
6
- value: {
6
+ modelValue: {
7
7
  type: String,
8
8
  default: 'text',
9
9
  },
@@ -13,21 +13,23 @@ export default {
13
13
  },
14
14
  },
15
15
 
16
+ emits: ['update:modelValue'],
17
+
16
18
  render() {
17
19
  return this.$slots.default({
18
- value: this.value,
20
+ modelValue: this.modelValue,
19
21
  bindings: {
20
- value: this.value,
22
+ modelValue: this.modelValue,
21
23
  type: this.type,
22
24
  },
23
25
  events: {
24
- input: (e) => {
25
- this.$emit('input', e.target.value);
26
+ input: e => {
27
+ this.$emit('update:modelValue', e.target.value);
26
28
  },
27
29
  },
28
30
  clearEvents: {
29
31
  click: () => {
30
- this.$emit('input', null);
32
+ this.$emit('update:modelValue', null);
31
33
  },
32
34
  },
33
35
  });
package/src/renderless/CoreIntervalFilter.vue CHANGED
@@ -3,7 +3,7 @@ export default {
3
3
  name: 'CoreIntervalFilter',
4
4
 
5
5
  props: {
6
- value: {
6
+ modelValue: {
7
7
  type: Object,
8
8
  default: () => ({
9
9
  min: null,
@@ -18,55 +18,57 @@ export default {
18
18
  },
19
19
  },
20
20
 
21
+ emits: ['change', 'update:modelValue'],
22
+
21
23
  computed: {
22
24
  invalid() {
23
- return ![null, ''].includes(this.value.min)
24
- && ![null, ''].includes(this.value.max)
25
+ return ![null, ''].includes(this.modelValue.min)
26
+ && ![null, ''].includes(this.modelValue.max)
25
27
  && (this.type === 'number'
26
- ? Number.parseFloat(this.value.min) > Number.parseFloat(this.value.max)
27
- : this.value.min > this.value.max);
28
+ ? Number.parseFloat(this.modelValue.min) > Number.parseFloat(this.modelValue.max)
29
+ : this.modelValue.min > this.modelValue.max);
28
30
  },
29
31
  },
30
32
 
31
33
  methods: {
32
34
  update() {
33
- this.$emit('input', this.value);
35
+ this.$emit('update:modelValue', this.modelValue);
34
36
  },
35
37
  },
36
38
 
37
39
  render() {
38
40
  return this.$slots.default({
39
41
  invalid: this.invalid,
40
- value: this.value,
42
+ modelValue: this.modelValue,
41
43
  minBindings: {
42
- value: this.value.min,
44
+ modelValue: this.modelValue.min,
43
45
  type: this.type,
44
46
  },
45
47
  minEvents: {
46
- input: (e) => {
47
- this.value.min = e.target.value;
48
+ 'update:modelValue': e => {
49
+ this.modelValue.min = e.target.value;
48
50
  this.update();
49
51
  },
50
52
  },
51
53
  maxBindings: {
52
- value: this.value.max,
54
+ modelValue: this.modelValue.max,
53
55
  type: this.type,
54
56
  },
55
57
  maxEvents: {
56
- input: (e) => {
57
- this.value.max = e.target.value;
58
+ 'update:modelValue': e => {
59
+ this.modelValue.max = e.target.value;
58
60
  this.update();
59
61
  },
60
62
  },
61
63
  minClearEvents: {
62
64
  click: () => {
63
- this.value.min = null;
65
+ this.modelValue.min = null;
64
66
  this.update();
65
67
  },
66
68
  },
67
69
  maxClearEvents: {
68
70
  click: () => {
69
- this.value.max = null;
71
+ this.modelValue.max = null;
70
72
  this.update();
71
73
  },
72
74
  },
package/src/renderless/FilterState.vue CHANGED
@@ -27,6 +27,8 @@ export default {
27
27
  },
28
28
  },
29
29
 
30
+ emits: ['ready', 'state-updated'],
31
+
30
32
  data: () => ({
31
33
  defaultFilters: null,
32
34
  defaultIntervals: null,