@enso-ui/filters 3.0.8 → 3.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/filters",
-  "version": "3.0.8",
+  "version": "3.0.12",
   "description": "Renderless Vue Filter Components",
   "main": "index.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "bulma": "^0.9.0",
     "date-fns": "^2.0.0",
-    "v-tooltip": "4.0.0-alpha.1",
+    "v-tooltip": "4.0.0-beta.2",
     "vue": "^3.0",
     "vuex": "^4.0.0"
   },

package/src/bulma/BaseSelectFilter.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 
 export default {

package/src/bulma/DateFilter.vue

@@ -1,10 +1,10 @@
 <template>
-    <core-date-filter v-bind="$attrs">
-        <template #default="{
-                filters, filter, custom, minBindings, minEvents, maxBindings, maxEvents,
-                direction, directionBindings, directionEvents, backEvents, filterEvents,
-            }">
-            <div class="date-filter is-paddingless">
+    <div class="date-filter is-paddingless">
+        <core-date-filter v-bind="$attrs">
+            <template #default="{
+                    filters, filter, custom, minBindings, minEvents, maxBindings, maxEvents,
+                    direction, directionBindings, directionEvents, backEvents, filterEvents,
+                }">
                 <div class="header has-text-centered has-background-light"
                     v-if="!compact">
                     <strong>
@@ -64,16 +64,17 @@
                         </div>
                     </fade>
                 </div>
-            </div>
-        </template>
-    </core-date-filter>
+            </template>
+        </core-date-filter>
+    </div>
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
+import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import { VTooltip } from 'v-tooltip';
 import { Datepicker } from '@enso-ui/datepicker/bulma';
 import { Fade } from '@enso-ui/transitions';
 import VueSwitch from '@enso-ui/switch/bulma';

package/src/bulma/DateIntervalFilter.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import { Datepicker } from '@enso-ui/datepicker/bulma';
 import CoreDateIntervalFilter from '../renderless/CoreDateIntervalFilter.vue';

package/src/bulma/EnsoSelectFilter.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import { EnsoSelect } from '@enso-ui/select/bulma';
 import BaseSelectFilter from './BaseSelectFilter.vue';

package/src/bulma/InputFilter.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import CoreInputFilter from '../renderless/CoreInputFilter.vue';
 

package/src/bulma/IntervalFilter.vue

@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import CoreIntervalFilter from '../renderless/CoreIntervalFilter.vue';
 

package/src/bulma/SelectFilter.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import { VueSelect } from '@enso-ui/select/bulma';
 import BaseSelectFilter from './BaseSelectFilter.vue';

package/src/bulma/ToggleFilter.vue

@@ -33,8 +33,9 @@
 </template>
 
 <script>
-import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 
 export default {
     name: 'ToggleFilter',

package/src/bulma/VueFilter.vue

@@ -56,10 +56,11 @@
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
+import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPowerOff, faLock } from '@fortawesome/free-solid-svg-icons';
-import { VTooltip } from 'v-tooltip';
 
 library.add(faPowerOff, faLock);
 

package/src/renderless/CoreDateFilter.vue

@@ -14,6 +14,8 @@ export default {
 
     mixins: [dateIntervals],
 
+    inheritAttrs: false,
+
     props: {
         default: {
             type: String,

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/CoreIntervalFilter.vue

@@ -45,17 +45,17 @@ export default {
                 type: this.type,
             },
             minEvents: {
-                input: e => {
+                'update:modelValue': e => {
                     this.modelValue.min = e.target.value;
                     this.update();
                 },
             },
             maxBindings: {
-                value: this.modelValue.max,
+                modelValue: this.modelValue.max,
                 type: this.type,
             },
             maxEvents: {
-                input: e => {
+                'update:modelValue': e => {
                     this.modelValue.max = e.target.value;
                     this.update();
                 },

package/src/renderless/FilterState.vue

@@ -27,6 +27,8 @@ export default {
         },
     },
 
+    emits: ['ready', 'state-updated'],
+
     data: () => ({
         defaultFilters: null,
         defaultIntervals: null,