@enso-ui/filters 3.0.5 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/filters",
-  "version": "3.0.5",
+  "version": "3.0.9",
   "description": "Renderless Vue Filter Components",
   "main": "index.js",
   "scripts": {
@@ -45,7 +45,7 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
-    "eslint": "^8.0.0",
+    "eslint": "^7.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vue": "^8.0.0"
   }

package/src/bulma/{CoreSelectFilter.vue → BaseSelectFilter.vue}

@@ -12,7 +12,7 @@
 import { VTooltip } from 'v-tooltip';
 
 export default {
-    name: 'CoreSelectFilter',
+    name: 'BaseSelectFilter',
 
     directives: { tooltip: VTooltip },
 
@@ -29,10 +29,6 @@ export default {
             type: String,
             default: null,
         },
-        value: {
-            type: null,
-            default: null,
-        },
     },
 };
 

package/src/bulma/EnsoSelectFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <core-select-filter :compact="compact"
+    <base-select-filter :compact="compact"
         :i18n="i18n"
         :name="name">
         <enso-select v-tooltip="compact ? i18n(name) : null"
@@ -7,20 +7,20 @@
             :class="{'has-background-light': compact}"
             v-bind="$attrs"
             ref="select"/>
-    </core-select-filter>
+    </base-select-filter>
 </template>
 
 <script>
 import { VTooltip } from 'v-tooltip';
 import { EnsoSelect } from '@enso-ui/select/bulma';
-import CoreSelectFilter from './CoreSelectFilter.vue';
+import BaseSelectFilter from './BaseSelectFilter.vue';
 
 export default {
     name: 'EnsoSelectFilter',
 
     directives: { tooltip: VTooltip },
 
-    components: { CoreSelectFilter, EnsoSelect },
+    components: { BaseSelectFilter, EnsoSelect },
 
     inject: ['i18n'],
 

package/src/bulma/SelectFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <core-select-filter :compact="compact"
+    <base-select-filter :compact="compact"
         :i18n="i18n"
         :name="name">
         <vue-select v-tooltip="compact ? i18n(name) : null"
@@ -8,20 +8,20 @@
             v-bind="$attrs"
             :i18n="i18n"
             ref="select"/>
-    </core-select-filter>
+    </base-select-filter>
 </template>
 
 <script>
 import { VTooltip } from 'v-tooltip';
 import { VueSelect } from '@enso-ui/select/bulma';
-import CoreSelectFilter from './CoreSelectFilter.vue';
+import BaseSelectFilter from './BaseSelectFilter.vue';
 
 export default {
     name: 'SelectFilter',
 
     directives: { tooltip: VTooltip },
 
-    components: { CoreSelectFilter, VueSelect },
+    components: { BaseSelectFilter, VueSelect },
 
     props: {
         compact: {

package/src/bulma/ToggleFilter.vue

@@ -14,7 +14,7 @@
             :class="{ 'has-background-light': compact }">
             <div class="tabs is-toggle is-fullwidth filter-tabs">
                 <ul>
-                    <li :class="{ 'is-active': value }">
+                    <li :class="{ 'is-active': modelValue }">
                         <a @click="update">
                             <span class="filter-label">
                                 <template v-if="translatable">
@@ -68,16 +68,18 @@ export default {
             type: String,
             default: null,
         },
-        value: {
+        modelValue: {
             type: Boolean,
             required: true,
         },
     },
 
+    emits: ['change', 'update:modelValue'],
+
     methods: {
         update() {
             if (!this.readonly) {
-                this.$emit('input', !this.value);
+                this.$emit('update:modelValue', !this.modelValue);
             }
         },
     },

package/src/bulma/VueFilter.vue

@@ -16,7 +16,7 @@
                 <ul>
                     <li v-for="(option, index) in options"
                         :key="index"
-                        :class="{ 'is-active': option.value === value }">
+                        :class="{ 'is-active': option.value === modelValue }">
                         <a @click="update(option.value)">
                             <span v-if="icons"
                                 :class="['icon', option.class]">
@@ -35,10 +35,12 @@
                         </a>
                     </li>
                     <li v-if="!hideOff"
-                        :class="{ 'is-active': value === null }">
+                        :class="{ 'is-active': modelValue === null }">
                         <a @click="update()">
                             <span class="icon"
-                                :class="value === null ? 'has-text-danger' : 'has-text-success'">
+                                :class="modelValue === null
+                                    ? 'has-text-danger'
+                                    : 'has-text-success'">
                                 <fa icon="power-off"/>
                             </span>
                             <span v-if="!icons && offLabel"
@@ -107,16 +109,18 @@ export default {
             type: String,
             default: null,
         },
-        value: {
+        modelValue: {
             type: null,
             default: null,
         },
     },
 
+    emits: ['update:modelValue'],
+
     methods: {
         update(value = null) {
             if (!this.readonly) {
-                this.$emit('input', value);
+                this.$emit('update:modelValue', value);
             }
         },
     },

package/src/renderless/CoreDateFilter.vue

@@ -35,7 +35,7 @@ export default {
             type: Boolean,
             default: false,
         },
-        value: {
+        modelValue: {
             type: String,
             default: null,
             validator: v => Base.concat(Past)
@@ -48,8 +48,10 @@ export default {
         },
     },
 
+    emits: ['update', 'update:modelValue'],
+
     data: v => ({
-        filter: v.value || v.default,
+        filter: v.modelValue || v.default,
         isFuture: false,
     }),
 
@@ -74,7 +76,7 @@ export default {
     },
 
     watch: {
-        value(value) {
+        modelValue(value) {
             this.filter = value;
             this.update();
         },
@@ -91,7 +93,7 @@ export default {
     methods: {
         set(filter) {
             this.filter = filter;
-            this.$emit('input', filter);
+            this.$emit('update:modelValue', filter);
             this.update();
         },
         update() {
@@ -172,10 +174,10 @@ export default {
             custom: this.custom,
             direction: this.direction,
             directionBindings: {
-                value: this.isFuture,
+                modelValue: this.isFuture,
             },
             directionEvents: {
-                input: (e) => {
+                input: e => {
                     this.isFuture = e;
                     this.filter = 'today';
                 },
@@ -191,7 +193,7 @@ export default {
                 click: () => this.set(type),
             }),
             minBindings: {
-                value: this.interval.min,
+                modelValue: this.interval.min,
                 format: this.format,
                 isWarning: this.equals,
                 locale: this.locale,
@@ -199,13 +201,13 @@ export default {
                 max: this.interval.max,
             },
             minEvents: {
-                input: (e) => {
+                input: e => {
                     this.interval.min = e;
                     this.update();
                 },
             },
             maxBindings: {
-                value: this.interval.max,
+                modelValue: this.interval.max,
                 format: this.format,
                 isWarning: this.equals,
                 locale: this.locale,
@@ -213,7 +215,7 @@ export default {
                 min: this.interval.min,
             },
             maxEvents: {
-                input: (e) => {
+                input: e => {
                     this.interval.max = e;
                     this.update();
                 },

package/src/renderless/CoreDateIntervalFilter.vue

@@ -6,6 +6,8 @@ export default {
 
     mixins: [dateIntervals],
 
+    emits: ['update'],
+
     methods: {
         update() {
             this.$emit('update', this.sanitizedInterval);
@@ -15,27 +17,27 @@ export default {
     render() {
         return this.$slots.default({
             minBindings: {
-                value: this.interval.min,
+                modelValue: this.interval.min,
                 format: this.format,
                 isWarning: this.equals,
                 locale: this.locale,
                 max: this.interval.max,
             },
             minEvents: {
-                input: (e) => {
+                'update:modelValue': e => {
                     this.interval.min = e;
                     this.update();
                 },
             },
             maxBindings: {
-                value: this.interval.max,
+                modelValue: this.interval.max,
                 format: this.format,
                 isWarning: this.equals,
                 locale: this.locale,
                 min: this.interval.min,
             },
             maxEvents: {
-                input: (e) => {
+                'update:modelValue': e => {
                     this.interval.max = e;
                     this.update();
                 },

package/src/renderless/CoreInputFilter.vue

@@ -3,7 +3,7 @@ export default {
     name: 'CoreInputFilter',
 
     props: {
-        value: {
+        modelValue: {
             type: String,
             default: 'text',
         },
@@ -13,21 +13,23 @@ export default {
         },
     },
 
+    emits: ['update:modelValue'],
+
     render() {
         return this.$slots.default({
-            value: this.value,
+            modelValue: this.modelValue,
             bindings: {
-                value: this.value,
+                modelValue: this.modelValue,
                 type: this.type,
             },
             events: {
-                input: (e) => {
-                    this.$emit('input', e.target.value);
+                input: e => {
+                    this.$emit('update:modelValue', e.target.value);
                 },
             },
             clearEvents: {
                 click: () => {
-                    this.$emit('input', null);
+                    this.$emit('update:modelValue', null);
                 },
             },
         });

package/src/renderless/CoreIntervalFilter.vue

@@ -3,7 +3,7 @@ export default {
     name: 'CoreIntervalFilter',
 
     props: {
-        value: {
+        modelValue: {
             type: Object,
             default: () => ({
                 min: null,
@@ -18,55 +18,57 @@ export default {
         },
     },
 
+    emits: ['change', 'update:modelValue'],
+
     computed: {
         invalid() {
-            return ![null, ''].includes(this.value.min)
-                && ![null, ''].includes(this.value.max)
+            return ![null, ''].includes(this.modelValue.min)
+                && ![null, ''].includes(this.modelValue.max)
                 && (this.type === 'number'
-                    ? Number.parseFloat(this.value.min) > Number.parseFloat(this.value.max)
-                    : this.value.min > this.value.max);
+                    ? Number.parseFloat(this.modelValue.min) > Number.parseFloat(this.modelValue.max)
+                    : this.modelValue.min > this.modelValue.max);
         },
     },
 
     methods: {
         update() {
-            this.$emit('input', this.value);
+            this.$emit('update:modelValue', this.modelValue);
         },
     },
 
     render() {
         return this.$slots.default({
             invalid: this.invalid,
-            value: this.value,
+            modelValue: this.modelValue,
             minBindings: {
-                value: this.value.min,
+                modelValue: this.modelValue.min,
                 type: this.type,
             },
             minEvents: {
-                input: (e) => {
-                    this.value.min = e.target.value;
+                'update:modelValue': e => {
+                    this.modelValue.min = e.target.value;
                     this.update();
                 },
             },
             maxBindings: {
-                value: this.value.max,
+                modelValue: this.modelValue.max,
                 type: this.type,
             },
             maxEvents: {
-                input: (e) => {
-                    this.value.max = e.target.value;
+                'update:modelValue': e => {
+                    this.modelValue.max = e.target.value;
                     this.update();
                 },
             },
             minClearEvents: {
                 click: () => {
-                    this.value.min = null;
+                    this.modelValue.min = null;
                     this.update();
                 },
             },
             maxClearEvents: {
                 click: () => {
-                    this.value.max = null;
+                    this.modelValue.max = null;
                     this.update();
                 },
             },