@enso-ui/filters 3.0.14 → 3.0.18

package/bulma/index.js

@@ -1,7 +1,6 @@
 import IntervalFilter from '../src/bulma/IntervalFilter.vue';
 import InputFilter from '../src/bulma/InputFilter.vue';
 import DateFilter from '../src/bulma/DateFilter.vue';
-import DateIntervalFilter from '../src/bulma/DateIntervalFilter.vue';
 import VueFilter from '../src/bulma/VueFilter.vue';
 import ToggleFilter from '../src/bulma/ToggleFilter.vue';
 import SelectFilter from '../src/bulma/SelectFilter.vue';
@@ -9,13 +8,12 @@ import BooleanFilter from '../src/bulma/BooleanFilter.vue';
 import EnsoIntervalFilter from '../src/bulma/EnsoIntervalFilter.vue';
 import EnsoInputFilter from '../src/bulma/EnsoInputFilter.vue';
 import EnsoDateFilter from '../src/bulma/EnsoDateFilter.vue';
-import EnsoDateIntervalFilter from '../src/bulma/EnsoDateIntervalFilter.vue';
 import EnsoFilter from '../src/bulma/EnsoFilter.vue';
 import EnsoToggleFilter from '../src/bulma/EnsoToggleFilter.vue';
 import EnsoSelectFilter from '../src/bulma/EnsoSelectFilter.vue';
 
 export {
     InputFilter, IntervalFilter, EnsoIntervalFilter, DateFilter, EnsoDateFilter,
-    DateIntervalFilter, EnsoDateIntervalFilter, BooleanFilter, VueFilter, ToggleFilter,
-    EnsoFilter, EnsoToggleFilter, SelectFilter, EnsoSelectFilter, EnsoInputFilter,
+    BooleanFilter, VueFilter, ToggleFilter, EnsoFilter, EnsoToggleFilter,
+    SelectFilter, EnsoSelectFilter, EnsoInputFilter,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/filters",
-  "version": "3.0.14",
+  "version": "3.0.18",
   "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-beta.2",
+    "v-tooltip": "^4.0.0-beta.2",
     "vue": "^3.0",
     "vuex": "^4.0.0"
   },

package/renderless/index.js

@@ -1,8 +1,7 @@
 import CoreIntervalFilter from '../src/renderless/CoreIntervalFilter.vue';
 import CoreDateFilter from '../src/renderless/CoreDateFilter.vue';
-import CoreDateIntervalFilter from '../src/renderless/CoreDateIntervalFilter.vue';
 import FilterState from '../src/renderless/FilterState.vue';
 
 export {
-    CoreIntervalFilter, CoreDateFilter, CoreDateIntervalFilter, FilterState,
+    CoreIntervalFilter, CoreDateFilter, FilterState,
 };

package/src/bulma/BooleanFilter.vue

@@ -1,6 +1,5 @@
 <template>
-    <vue-filter v-bind="$attrs"
-        icons
+    <vue-filter icons
         :options="options"/>
 </template>
 

package/src/bulma/DateFilter.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="date-filter is-paddingless">
+    <div class="date-filter is-paddingless"
+        :class="$attrs.class">
         <core-date-filter v-bind="$attrs">
             <template #default="{
                     filters, filter, custom, minBindings, minEvents, maxBindings, maxEvents,

package/src/bulma/EnsoDateFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <date-filter v-bind="$attrs"
+    <date-filter
         alt-input
         :alt-format="altFormat || meta.dateFormat"
         :i18n="i18n"

package/src/bulma/EnsoFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <vue-filter v-bind="$attrs"
+    <vue-filter
         :i18n="i18n"/>
 </template>
 

package/src/bulma/EnsoInputFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <input-filter v-bind="$attrs"
+    <input-filter
         :i18n="i18n"/>
 </template>
 

package/src/bulma/EnsoIntervalFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <interval-filter v-bind="$attrs"
+    <interval-filter
         :i18n="i18n"/>
 </template>
 

package/src/bulma/EnsoSelectFilter.vue

@@ -1,5 +1,6 @@
 <template>
-    <base-select-filter :compact="compact"
+    <base-select-filter :class="$attrs.class"
+        :compact="compact"
         :i18n="i18n"
         :name="name">
         <enso-select v-bind="{...$attrs, class: 'select-wrapper'}"
@@ -24,6 +25,8 @@ export default {
 
     inject: ['i18n'],
 
+    inheritAttrs: false,
+
     props: {
         compact: {
             type: Boolean,

package/src/bulma/EnsoToggleFilter.vue

@@ -1,5 +1,5 @@
 <template>
-    <toggle-filter v-bind="$attrs"
+    <toggle-filter
         :i18n="i18n"/>
 </template>
 

package/src/bulma/InputFilter.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="interval-filter is-paddingless">
+    <div class="interval-filter is-paddingless"
+        :class="$attrs.class">
         <div v-if="!compact"
             class="header has-text-centered has-background-light">
             <b>{{ i18n(name) }}</b>
@@ -44,6 +45,8 @@ export default {
 
     components: { CoreInputFilter },
 
+    inheritAttrs: false,
+
     props: {
         compact: {
             type: Boolean,

package/src/bulma/IntervalFilter.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="interval-filter is-paddingless">
+    <div class="interval-filter is-paddingless"
+        :class="$attrs.class">
         <div v-if="!compact"
             class="header has-text-centered has-background-light">
             <b>{{ i18n(name) }}</b>
@@ -8,7 +9,7 @@
             :class="['input-wrapper', {'has-background-light': compact}]">
             <core-interval-filter v-bind="$attrs">
                 <template #default="{
-                        value, invalid, minBindings, minEvents, maxBindings,
+                        modelValue, invalid, minBindings, minEvents, maxBindings,
                         maxEvents, minClearEvents, maxClearEvents,
                     }">
                     <div class="columns is-mobile">
@@ -19,7 +20,7 @@
                                     v-bind="minBindings"
                                     :placeholder="i18n(minLabel)"
                                     v-on="minEvents">
-                                <span v-if="value.min"
+                                <span v-if="modelValue.min"
                                     class="icon is-small is-right clear-button"
                                     v-on="minClearEvents">
                                     <a class="delete is-small"/>
@@ -33,7 +34,7 @@
                                     v-bind="maxBindings"
                                     :placeholder="i18n(maxLabel)"
                                     v-on="maxEvents">
-                                <span v-if="value.max"
+                                <span v-if="modelValue.max"
                                     class="icon is-small is-right clear-button"
                                     v-on="maxClearEvents">
                                     <a class="delete is-small"/>
@@ -59,6 +60,8 @@ export default {
 
     components: { CoreIntervalFilter },
 
+    inheritAttrs: false,
+
     props: {
         compact: {
             type: Boolean,

package/src/bulma/SelectFilter.vue

@@ -1,5 +1,6 @@
 <template>
-    <base-select-filter :compact="compact"
+    <base-select-filter :class="$attrs.class"
+        :compact="compact"
         :i18n="i18n"
         :name="name">
         <vue-select v-bind="{...$attrs, class: 'select-wrapper'}"
@@ -23,6 +24,8 @@ export default {
 
     components: { BaseSelectFilter, VueSelect },
 
+    inheritAttrs: false,
+
     props: {
         compact: {
             type: Boolean,

package/src/renderless/CoreDateFilter.vue

@@ -1,10 +1,10 @@
 <script>
 import {
-    format, addDays, startOfDay, endOfDay, addWeeks, startOfWeek, endOfWeek,
-    addMonths, startOfMonth, endOfMonth, addYears, startOfYear, endOfYear,
+    compareAsc, format, addDays, startOfDay, endOfDay, addWeeks,
+    startOfWeek, endOfWeek, addMonths, startOfMonth, endOfMonth,
+    addYears, startOfYear, endOfYear, parse
 } from 'date-fns';
 import { lcwords } from '@enso-ui/strings';
-import dateIntervals from './dateIntervals';
 import {
     Intervals, Base, Past, Future, Adjustments,
 } from './intervals';
@@ -12,36 +12,42 @@ import {
 export default {
     name: 'CoreDateFilter',
 
-    mixins: [dateIntervals],
-
     inheritAttrs: false,
 
     props: {
-        default: {
-            type: String,
-            default: Intervals.today,
-            validator: v => Base.concat(Past)
-                .concat(Future).includes(v),
-        },
         direction: {
             type: Boolean,
             default: false,
         },
-        disabledOptions: {
+        excluded: {
             type: Array,
             default: () => ([]),
             validator: v => !v.some(val => !Base.concat(Past)
                 .concat(Future).includes(val)),
         },
+        filter: {
+            type: String,
+            required: true,
+            validator: v => Base.concat(Past)
+                .concat(Future).includes(v),
+        },
+        format: {
+            type: String,
+            default: 'Y-m-d H:i:s',
+        },
         future: {
             type: Boolean,
             default: false,
         },
-        modelValue: {
+        interval: {
+            type: Object,
+            required: true,
+            validator: v => Object.keys(v).includes('min')
+                && Object.keys(v).includes('max'),
+        },
+        locale: {
             type: String,
-            default: null,
-            validator: v => Base.concat(Past)
-                .concat(Future).includes(v),
+            default: 'en',
         },
         weekStartsOn: {
             type: Number,
@@ -50,11 +56,10 @@ export default {
         },
     },
 
-    emits: ['update', 'update:modelValue'],
+    emits: ['update:filter', 'update:interval'],
 
     data: v => ({
-        filter: v.modelValue || v.default,
-        isFuture: false,
+        isFuture: v.future,
     }),
 
     computed: {
@@ -64,6 +69,14 @@ export default {
         custom() {
             return this.filter === Intervals.custom;
         },
+        default() {
+            return Base.find(value => !this.excluded.includes(value));
+        },
+        equals() {
+            return !!this.interval.min
+                && !!this.interval.max
+                && compareAsc(this.parsedMin, this.parsedMax) === 0;
+        },
         filters() {
             return Object.keys(Intervals)
                 .filter(option => this.options.includes(Intervals[option]))
@@ -72,20 +85,27 @@ export default {
                     return filters;
                 }, {});
         },
+        internalFormat() {
+            return this.format.replace('d', 'dd')
+                .replace('m', 'MM')
+                .replace('Y', 'yyyy')
+                .replace('H', 'HH')
+                .replace('i', 'mm')
+                .replace('s', 'ss');
+        },
         options() {
             return Base.concat(this.isFuture ? Future : Past);
         },
-    },
-
-    watch: {
-        modelValue(value) {
-            this.filter = value;
-            this.update();
+        parsedMax() {
+            return parse(this.interval.max, this.internalFormat, new Date());
+        },
+        parsedMin() {
+            return parse(this.interval.min, this.internalFormat, new Date());
         },
     },
 
-    beforeMount() {
-        this.isFuture = this.future;
+    watch: {
+        filter: 'update',
     },
 
     created() {
@@ -93,75 +113,77 @@ export default {
     },
 
     methods: {
-        set(filter) {
-            this.filter = filter;
-            this.$emit('update:modelValue', filter);
-            this.update();
-        },
-        update() {
-            this.adjust();
-            this.$emit('update', this.sanitizedInterval);
+        update(filter = this.filter) {
+            switch (filter) {
+                case Intervals.today:
+                case Intervals.yesterday:
+                case Intervals.tomorrow:
+                    this.daily();
+                    break;
+                case Intervals.lastWeek:
+                case Intervals.thisWeek:
+                case Intervals.nextWeek:
+                    this.weekly();
+                    break;
+                case Intervals.lastMonth:
+                case Intervals.thisMonth:
+                case Intervals.nextMonth:
+                    this.monthly();
+                    break;
+                case Intervals.lastYear:
+                case Intervals.thisYear:
+                case Intervals.nextYear:
+                    this.yearly();
+                    break;
+                case Intervals.all:
+                    this.all();
+                    break;
+                case Intervals.custom:
+                    break;
+                default:
+                    throw Error('Unknown Interval');
+            }
         },
         label(option) {
             return lcwords(option);
         },
-        adjust() {
-            switch (this.filter) {
-            case Intervals.today:
-            case Intervals.yesterday:
-            case Intervals.tomorrow:
-                this.daily();
-                break;
-            case Intervals.lastWeek:
-            case Intervals.thisWeek:
-            case Intervals.nextWeek:
-                this.weekly();
-                break;
-            case Intervals.lastMonth:
-            case Intervals.thisMonth:
-            case Intervals.nextMonth:
-                this.monthly();
-                break;
-            case Intervals.lastYear:
-            case Intervals.thisYear:
-            case Intervals.nextYear:
-                this.yearly();
-                break;
-            case Intervals.all:
-                this.all();
-                break;
-            case Intervals.custom:
-                break;
-            default:
-                throw Error('Unknown Interval');
-            }
-        },
         daily() {
             const min = startOfDay(addDays(new Date(), this.adjustment));
             const max = endOfDay(addDays(new Date(), this.adjustment));
 
-            this.interval.min = this.date(min);
-            this.interval.max = this.date(max);
+            const interval = { min: this.date(min), max: this.date(max) };
+
+            this.$emit('update:interval', interval);
         },
         weekly() {
             const options = { weekStartsOn: this.weekStartsOn };
             const min = startOfWeek(addWeeks(new Date(), this.adjustment), options);
             const max = endOfWeek(addWeeks(new Date(), this.adjustment), options);
 
-            this.interval.min = this.date(min);
-            this.interval.max = this.date(max);
+            const interval = { min: this.date(min), max: this.date(max) };
+
+            this.$emit('update:interval', interval);
         },
         monthly() {
-            this.interval.min = this.date(startOfMonth(addMonths(new Date(), this.adjustment)));
-            this.interval.max = this.date(endOfMonth(addMonths(new Date(), this.adjustment)));
+            const min = startOfMonth(addMonths(new Date(), this.adjustment));
+            const max = endOfMonth(addMonths(new Date(), this.adjustment));
+
+            const interval = { min: this.date(min), max: this.date(max) };
+
+            this.$emit('update:interval', interval);
         },
         yearly() {
-            this.interval.min = this.date(startOfYear(addYears(new Date(), this.adjustment)));
-            this.interval.max = this.date(endOfYear(addYears(new Date(), this.adjustment)));
+            const min = startOfYear(addYears(new Date(), this.adjustment));
+            const max = endOfYear(addYears(new Date(), this.adjustment));
+
+            const interval = { min: this.date(min), max: this.date(max) };
+
+            this.$emit('update:interval', interval);
         },
         all() {
-            this.interval.min = null;
-            this.interval.max = null;
+            const interval = { min: null, max: null };
+
+            this.$emit('update:interval', interval);
         },
         date(date) {
             return format(date, this.internalFormat);
@@ -171,7 +193,7 @@ export default {
     render() {
         return this.$slots.default({
             backEvents: {
-                click: () => this.set(this.default),
+                click: () => this.$emit('update:filter', this.default),
             },
             custom: this.custom,
             direction: this.direction,
@@ -181,18 +203,18 @@ export default {
             directionEvents: {
                 'update:modelValue': e => {
                     this.isFuture = e;
-                    this.filter = 'today';
+                    this.$emit('update:filter', this.default);
                 },
             },
             filter: this.filter,
             filters: Object.keys(this.filters)
-                .filter(key => !this.disabledOptions.includes(key))
+                .filter(key => !this.excluded.includes(key))
                 .reduce((filters, key) => {
                     filters[key] = this.filters[key];
                     return filters;
                 }, {}),
-            filterEvents: type => ({
-                click: () => this.set(type),
+            filterEvents: filter => ({
+                click: () => this.$emit('update:filter', filter),
             }),
             minBindings: {
                 modelValue: this.interval.min,
@@ -204,8 +226,8 @@ export default {
             },
             minEvents: {
                 'update:modelValue': e => {
-                    this.interval.min = e;
-                    this.update();
+                    const interval = { min: e, max: this.interval.max };
+                    this.$emit('update:interval', interval);
                 },
             },
             maxBindings: {
@@ -218,8 +240,8 @@ export default {
             },
             maxEvents: {
                 'update:modelValue': e => {
-                    this.interval.max = e;
-                    this.update();
+                    const interval = { min: this.interval.min, max: e };
+                    this.$emit('update:interval', interval);
                 },
             },
         });

package/src/renderless/CoreIntervalFilter.vue

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

package/src/renderless/FilterState.vue

@@ -35,6 +35,7 @@ export default {
         defaultParams: null,
         state: null,
         keys: null,
+        ready: false,
     }),
 
     computed: {
@@ -61,6 +62,7 @@ export default {
     created() {
         this.init();
         this.load();
+        this.ready = true;
     },
 
     methods: {
@@ -93,7 +95,9 @@ export default {
             });
         },
         persist() {
-            localStorage.setItem(this.name, JSON.stringify(this.state));
+            if (this.ready) {
+                localStorage.setItem(this.name, JSON.stringify(this.state));
+            }
         },
         reset() {
             localStorage.removeItem(this.name);

package/src/renderless/intervals.js

@@ -17,7 +17,7 @@ const Intervals = {
 
 const Base = [
     Intervals.today, Intervals.thisWeek, Intervals.thisMonth,
-    Intervals.thisYear, Intervals.custom, Intervals.all,
+    Intervals.thisYear, Intervals.all, Intervals.custom,
 ];
 
 const Past = [Intervals.yesterday, Intervals.lastWeek, Intervals.lastMonth, Intervals.lastYear];

package/src/bulma/DateIntervalFilter.vue

@@ -1,102 +0,0 @@
-<template>
-    <div class="date-interval-filter is-paddingless">
-        <div class="header has-background-light has-text-centered"
-            v-if="!compact">
-            <strong>
-                {{ i18n(name) }}
-            </strong>
-        </div>
-        <div v-tooltip="compact ? i18n(name) : null"
-            class="dates-wrapper"
-            :class="{ 'has-background-light': compact }">
-            <core-date-interval-filter v-bind="$attrs">
-                <template #default="{ minBindings, minEvents, maxBindings, maxEvents }">
-                    <div class="columns is-mobile is-variable is-1 is-centered">
-                        <div class="column">
-                            <datepicker v-bind="minBindings"
-                                :placeholder="i18n(minLabel)"
-                                :alt-format="altFormat"
-                                :alt-input="altInput"
-                                v-on="minEvents"/>
-                        </div>
-                        <div class="column">
-                            <datepicker v-bind="maxBindings"
-                                :placeholder="i18n(maxLabel)"
-                                :alt-format="altFormat"
-                                :alt-input="altInput"
-                                v-on="maxEvents"/>
-                        </div>
-                    </div>
-                </template>
-            </core-date-interval-filter>
-        </div>
-    </div>
-</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';
-
-export default {
-    name: 'DateIntervalFilter',
-
-    directives: { tooltip: VTooltip },
-
-    components: { CoreDateIntervalFilter, Datepicker },
-
-    props: {
-        altFormat: {
-            type: String,
-            default: null,
-        },
-        altInput: {
-            type: Boolean,
-            default: false,
-        },
-        compact: {
-            type: Boolean,
-            default: false,
-        },
-        i18n: {
-            type: Function,
-            default: v => v,
-        },
-        maxLabel: {
-            type: String,
-            default: 'To',
-        },
-        minLabel: {
-            type: String,
-            default: 'From',
-        },
-        name: {
-            type: String,
-            default: null,
-        },
-    },
-
-    data: () => ({
-        interval: {
-            min: null,
-            max: null,
-        },
-    }),
-};
-</script>
-
-<style lang="scss">
-    .date-interval-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .dates-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-        }
-    }
-</style>

package/src/bulma/EnsoDateIntervalFilter.vue

@@ -1,32 +0,0 @@
-<template>
-    <enso-date-filter v-bind="$attrs"
-        alt-input
-        :alt-format="altFormat || meta.dateFormat"
-        :i18n="i18n"
-        :locale="lang"/>
-</template>
-
-<script>
-import { mapState, mapGetters } from 'vuex';
-import EnsoDateFilter from './EnsoDateFilter.vue';
-
-export default {
-    name: 'EnsoDateIntervalFilter',
-
-    components: { EnsoDateFilter },
-
-    inject: ['i18n'],
-
-    props: {
-        altFormat: {
-            type: String,
-            default: null,
-        },
-    },
-
-    computed: {
-        ...mapState(['meta']),
-        ...mapGetters('preferences', ['lang']),
-    },
-};
-</script>

package/src/renderless/CoreDateIntervalFilter.vue

@@ -1,50 +0,0 @@
-<script>
-import dateIntervals from './dateIntervals';
-
-export default {
-    name: 'CoreDateIntervalFilter',
-
-    mixins: [dateIntervals],
-
-    emits: ['update'],
-
-    inheritAttrs: false,
-
-    methods: {
-        update() {
-            this.$emit('update', this.sanitizedInterval);
-        },
-    },
-
-    render() {
-        return this.$slots.default({
-            minBindings: {
-                modelValue: this.interval.min,
-                format: this.format,
-                isWarning: this.equals,
-                locale: this.locale,
-                max: this.interval.max,
-            },
-            minEvents: {
-                'update:modelValue': e => {
-                    this.interval.min = e;
-                    this.update();
-                },
-            },
-            maxBindings: {
-                modelValue: this.interval.max,
-                format: this.format,
-                isWarning: this.equals,
-                locale: this.locale,
-                min: this.interval.min,
-            },
-            maxEvents: {
-                'update:modelValue': e => {
-                    this.interval.max = e;
-                    this.update();
-                },
-            },
-        });
-    },
-};
-</script>

package/src/renderless/dateIntervals.js

@@ -1,51 +0,0 @@
-import { compareAsc, parse } from 'date-fns';
-
-export default {
-    props: {
-        format: {
-            type: String,
-            default: 'Y-m-d H:i:s',
-        },
-        interval: {
-            type: Object,
-            default: () => ({
-                min: null,
-                max: null,
-            }),
-            validator: v => Object.keys(v).includes('min')
-                && Object.keys(v).includes('max'),
-        },
-        locale: {
-            type: String,
-            default: 'en',
-        },
-    },
-
-    computed: {
-        internalFormat() {
-            return this.format.replace('d', 'dd')
-                .replace('m', 'MM')
-                .replace('Y', 'yyyy')
-                .replace('H', 'HH')
-                .replace('i', 'mm')
-                .replace('s', 'ss');
-        },
-        sanitizedInterval() {
-            return {
-                min: this.interval.min || null,
-                max: this.interval.max || null,
-            };
-        },
-        parsedMax() {
-            return parse(this.interval.max, this.internalFormat, new Date());
-        },
-        parsedMin() {
-            return parse(this.interval.min, this.internalFormat, new Date());
-        },
-        equals() {
-            return !!this.interval.min
-                && !!this.interval.max
-                && compareAsc(this.parsedMin, this.parsedMax) === 0;
-        },
-    },
-};