@enso-ui/filters 3.1.2 → 3.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -24,4 +24,4 @@ Thank you to all the people who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/filters",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Renderless Vue Filter Components",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "main": "bulma/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/filters.git"
@@ -18,35 +15,25 @@
     "filter"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/filters/issues"
   },
   "homepage": "https://github.com/enso-ui/filters#readme",
   "dependencies": {
-    "@enso-ui/datepicker": "^2.0",
-    "@enso-ui/select": "^3.0",
+    "@enso-ui/datepicker": "^3.0.0",
+    "@enso-ui/select": "^4.0.0",
     "@enso-ui/strings": "^2.0",
     "@enso-ui/switch": "^2.0",
     "@enso-ui/transitions": "^2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@enso-ui/ui": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
     "bulma": "^0.9.0",
     "date-fns": "^2.0.0",
-    "v-tooltip": "^4.0.0-beta.2",
-    "vue": "^3.0",
-    "vuex": "^4.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.0"
+    "pinia": "^3.0.3",
+    "v-tooltip": "^4.0.0-beta.17",
+    "vue": "^3.0"
   }
 }

package/src/bulma/BaseSelectFilter.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="vue-filter is-paddingless">
+    <div class="vue-filter p-0">
         <div v-if="!compact"
-            class="header has-text-centered has-background-light px-2">
+            class="header filter-header has-text-centered px-2">
             <b>{{ i18n(name) }}</b>
         </div>
         <slot/>
@@ -34,17 +34,3 @@ export default {
 };
 
 </script>
-
-<style lang="scss">
-    .vue-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .select-wrapper {
-            padding: 0.25em;
-        }
-    }
-</style>

package/src/bulma/BooleanFilter.vue

@@ -4,12 +4,9 @@
 </template>
 
 <script>
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import VueFilter from './VueFilter.vue';
 
-library.add(faCheck, faTimes);
-
 export default {
     name: 'BooleanFilter',
 
@@ -25,11 +22,11 @@ export default {
     data: v => ({
         options: [{
             value: v.numeric ? 1 : true,
-            icon: 'check',
+            icon: faCheck,
             class: 'has-text-success',
         }, {
             value: v.numeric ? 0 : false,
-            icon: 'times',
+            icon: faTimes,
             class: 'has-text-danger',
         }],
     }),

package/src/bulma/DateFilter.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="date-filter is-paddingless"
+    <div class="date-filter p-0"
         :class="$attrs.class">
         <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 px-2"
+                <div class="header filter-header has-text-centered"
                     v-if="!compact">
                     <strong>
                         {{ label(custom) }}
@@ -14,13 +14,14 @@
                 </div>
                 <div v-tooltip="compact ? label(custom) : null"
                     class="filter-wrapper"
-                    :class="{ 'has-background-light': compact }">
+                    :class="{ 'filter-surface': compact }">
                     <fade mode="out-in">
                         <div class="tags-wrapper has-text-centered"
                             key="tags"
                             v-if="!custom">
                             <div class="filter-tags">
-                                <span v-if="direction">
+                                <span v-if="direction"
+                                    class="direction-wrapper px-2">
                                     <vue-switch v-bind="directionBindings"
                                         class="is-small direction"
                                         v-on="directionEvents"/>
@@ -36,13 +37,13 @@
                         </div>
                         <div v-else
                             key="dates"
-                            class="dates-wrapper animated">
+                            class="dates-wrapper animate__animated">
                             <div class="columns is-mobile is-variable is-0 is-centered">
                                 <div class="column is-narrow">
                                     <a class="button is-naked p-2">
                                         <span class="icon is-small"
                                             v-on="backEvents">
-                                            <fa icon="arrow-left"
+                                            <fa :icon="faArrowLeft"
                                                 size="sm"/>
                                         </span>
                                     </a>
@@ -74,15 +75,12 @@
 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 { Datepicker } from '@enso-ui/datepicker/bulma';
 import { Fade } from '@enso-ui/transitions';
 import VueSwitch from '@enso-ui/switch/bulma';
 import CoreDateFilter from '../renderless/CoreDateFilter.vue';
 
-library.add(faArrowLeft);
-
 export default {
     name: 'DateFilter',
 
@@ -115,6 +113,10 @@ export default {
         },
     },
 
+    data: () => ({
+        faArrowLeft,
+    }),
+
     methods: {
         label(custom) {
             return `${custom ? this.i18n('Between') : this.i18n('When')}
@@ -123,38 +125,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-    .date-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .control {
-            max-width: 13.3em;
-        }
-
-        .tag {
-            cursor: pointer;
-            margin: 2px;
-        }
-
-        .filter-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-        }
-
-        .tags-wrapper {
-            .filter-tags {
-                min-height: 2.25em;
-                padding: 0.2em;
-
-                .direction {
-                    vertical-align: middle;
-                }
-            }
-        }
-    }
-</style>

package/src/bulma/EnsoDateFilter.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { useStore } from '../utils/pinia';
 import DateFilter from './DateFilter.vue';
 
 export default {
@@ -24,8 +24,12 @@ export default {
     },
 
     computed: {
-        ...mapState(['meta']),
-        ...mapGetters('preferences', ['lang']),
+        meta() {
+            return useStore('app').meta;
+        },
+        lang() {
+            return useStore('preferences').lang;
+        },
     },
 };
 </script>

package/src/bulma/EnsoSelectFilter.vue

@@ -4,7 +4,6 @@
         :i18n="i18n"
         :name="name">
         <enso-select v-bind="{...$attrs, class: 'select-wrapper'}"
-            :class="{'has-background-light': compact}"
             v-tooltip="compact ? i18n(name) : null"
             ref="select"/>
     </base-select-filter>

package/src/bulma/InputFilter.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="input-filter is-paddingless"
+    <div class="input-filter p-0"
         :class="$attrs.class">
         <div v-if="!compact"
-            class="header has-text-centered has-background-light px-2">
+            class="header filter-header has-text-centered px-2">
             <b>{{ i18n(name) }}</b>
         </div>
         <div v-tooltip="compact ? i18n(name) : null"
-            :class="['input-wrapper', {'has-background-light': compact}]">
+            :class="['input-wrapper', { 'filter-surface': compact }]">
             <core-input-filter v-bind="$attrs">
                 <template #default="{
                         modelValue, bindings, events, clearEvents,
@@ -62,22 +62,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-    .input-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .input-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-        }
-
-        .control.has-icons-right .icon.clear-button {
-            pointer-events: all;
-        }
-    }
-</style>

package/src/bulma/IntervalFilter.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="interval-filter is-paddingless"
+    <div class="interval-filter p-0"
         :class="$attrs.class">
         <div v-if="!compact"
-            class="header has-text-centered has-background-light px-2">
+            class="header filter-header has-text-centered px-2">
             <b>{{ i18n(name) }}</b>
         </div>
         <div v-tooltip="compact ? i18n(name) : null"
-            :class="['input-wrapper', {'has-background-light': compact}]">
+            :class="['input-wrapper', { 'filter-surface': compact }]">
             <core-interval-filter v-bind="$attrs">
                 <template #default="{
                         modelValue, invalid, minBindings, minEvents, maxBindings,
@@ -86,22 +86,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-    .interval-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .input-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-        }
-
-        .control.has-icons-right .icon.clear-button {
-            pointer-events: all;
-        }
-    }
-</style>

package/src/bulma/SelectFilter.vue

@@ -4,7 +4,6 @@
         :i18n="i18n"
         :name="name">
         <vue-select v-bind="{...$attrs, class: 'select-wrapper'}"
-            :class="{'has-background-light': compact}"
             :i18n="i18n"
             v-tooltip="compact ? i18n(name) : null"
             ref="select"/>

package/src/bulma/ToggleFilter.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="vue-filter is-paddingless">
+    <div class="vue-filter p-0">
         <div v-if="!compact"
-            class="header has-text-centered has-background-light px-2">
+            class="header filter-header has-text-centered px-2">
             <strong>{{ i18n(name) }}</strong>
             <span v-if="readonly"
                 class="icon lock has-text-muted">
-                <fa icon="lock"
+                <fa :icon="faLock"
                     size="xs"/>
             </span>
         </div>
         <div v-tooltip="compact ? i18n(name) : null"
             class="tabs-wrapper"
-            :class="{ 'has-background-light': compact }">
+            :class="{ 'filter-surface': compact }">
             <div class="tabs is-toggle is-fullwidth filter-tabs">
                 <ul>
                     <li :class="{ 'is-active': modelValue }">
@@ -36,6 +36,7 @@
 import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { faLock } from '@fortawesome/free-solid-svg-icons';
 
 export default {
     name: 'ToggleFilter',
@@ -70,13 +71,17 @@ export default {
             default: null,
         },
         modelValue: {
-            type: Boolean,
+            type: [Boolean, null],
             required: true,
         },
     },
 
     emits: ['change', 'update:modelValue'],
 
+    data: () => ({
+        faLock,
+    }),
+
     methods: {
         update() {
             if (!this.readonly) {
@@ -86,28 +91,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-    .vue-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .tabs-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-
-            .tabs {
-                height: 2.25em;
-
-                li {
-                    a {
-                        padding: 0.25em;
-                    }
-                }
-            }
-        }
-    }
-</style>

package/src/bulma/VueFilter.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="vue-filter is-paddingless">
+    <div class="vue-filter p-0">
         <div v-if="!compact && name"
-            class="header has-text-centered has-background-light px-2">
+            class="header filter-header has-text-centered px-2">
             <strong>{{ i18n(name) }}</strong>
             <span v-if="readonly"
                 class="icon lock has-text-muted">
-                <fa icon="lock"
+                <fa :icon="faLock"
                     size="xs"/>
             </span>
         </div>
         <div v-tooltip="compact ? i18n(name) : null"
             class="tabs-wrapper"
-            :class="{ 'has-background-light': compact }">
+            :class="{ 'filter-surface': compact }">
             <div class="tabs is-toggle is-fullwidth filter-tabs no-scrollbars">
                 <ul>
                     <li v-for="(option, index) in options"
@@ -36,7 +36,7 @@
                                 :class="emptyModel
                                     ? 'has-text-danger'
                                     : 'has-text-success'">
-                                <fa icon="power-off"/>
+                                <fa :icon="faPowerOff"/>
                             </span>
                             <span v-if="!icons && offLabel"
                                 class="filter-label">
@@ -53,14 +53,14 @@
 <script setup>
 import 'v-tooltip/dist/v-tooltip.css';
 import {
-    computed, defineProps, defineModel, defineOptions,
+    computed
 } from 'vue';
 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';
-
-library.add(faPowerOff, faLock);
+import {
+    defineModel, defineOptions, defineProps,
+} from 'vue';
 
 defineOptions({
     directives: {
@@ -152,28 +152,3 @@ const update = (value = null) => {
     model.value = current;
 };
 </script>
-
-<style lang="scss">
-    .vue-filter {
-        .header {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding-top: 0.5em;
-        }
-
-        .tabs-wrapper {
-            border-radius: inherit;
-            padding: 0.25em;
-
-            .tabs {
-                height: 2.25em;
-
-                li {
-                    a {
-                        padding: 0.25em;
-                    }
-                }
-            }
-        }
-    }
-</style>

package/src/renderless/CoreIntervalFilter.vue

@@ -34,8 +34,15 @@ export default {
     },
 
     methods: {
-        update() {
-            this.$emit('update:modelValue', this.modelValue);
+        updateMin(min) {
+            this.$emit('update:modelValue', {
+                ...this.modelValue, min
+            });
+        },
+        updateMax(max) {
+            this.$emit('update:modelValue', {
+                ...this.modelValue, max
+            });
         },
     },
 
@@ -44,36 +51,22 @@ export default {
             invalid: this.invalid,
             modelValue: this.modelValue,
             minBindings: {
-                modelValue: this.modelValue.min,
-                type: this.type,
+                value: this.modelValue.min,
             },
             minEvents: {
-                input: e => {
-                    this.modelValue.min = e.target.value;
-                    this.update();
-                },
+                input: e => this.updateMin(e.target.value),
             },
             maxBindings: {
-                modelValue: this.modelValue.max,
-                type: this.type,
+                value: this.modelValue.max,
             },
             maxEvents: {
-                input: e => {
-                    this.modelValue.max = e.target.value;
-                    this.update();
-                },
+                input: e => this.updateMax(e.target.value),
             },
             minClearEvents: {
-                click: () => {
-                    this.modelValue.min = null;
-                    this.update();
-                },
+                click: () => this.updateMin(null),
             },
             maxClearEvents: {
-                click: () => {
-                    this.modelValue.max = null;
-                    this.update();
-                },
+                click: () => this.updateMax(null),
             },
         });
     },

package/src/utils/pinia.js

@@ -0,0 +1,11 @@
+import { getActivePinia } from 'pinia';
+
+export const useStore = id => {
+    const store = getActivePinia()?._s?.get(id);
+
+    if (!store) {
+        throw new Error(`Missing Pinia store: ${id}`);
+    }
+
+    return store;
+};