Remove breakpoints from page filter

resources/js/components/page/Filter.vue

@@ -4,44 +4,16 @@
             <slot name="fields"></slot>
         </div>
     </ui-popup>
-    <div class="px-6 py-2 border-b border-gray-600" :class="visibleDesktopBlock">
+    <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3">
-        <div class="flex items-end space-x-3">
-            <slot name="buttons"></slot>
-            <ui-icon-button v-if="filterable" icon="filter" @click="filterVisible = !filterVisible">Filtern</ui-icon-button>
-        </div>
-        <ui-box v-if="filterVisible" class="mt-3">
-            <div class="grid grid-cols-4 gap-3 items-end">
-                <slot name="fields"></slot>
-                <ui-icon-button class="col-start-1" icon="close" @click="filterVisible = false">Schließen</ui-icon-button>
-            </div>
-        </ui-box>
-    </div>
-    <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3" :class="visibleMobile">
         <div class="flex flex-col sm:flex-row items-stretch sm:items-end space-y-1 sm:space-y-0 sm:space-x-3">
             <slot name="buttons"></slot>
-            <ui-icon-button v-if="filterable" icon="filter" @click="visible = true">Filtern</ui-icon-button>
+            <ui-icon-button v-if="!!$slots.fields" icon="filter" @click="visible = true">Filtern</ui-icon-button>
         </div>
     </div>
 </template>
 
 <script setup>
-import {defineProps, ref} from 'vue';
+import {ref} from 'vue';
-import useBreakpoints from '../../composables/useBreakpoints.js';
 
 const visible = ref(false);
-
-const filterVisible = ref(false);
-
-const props = defineProps({
-    breakpoint: {
-        type: String,
-        required: true,
-    },
-    filterable: {
-        type: Boolean,
-        default: () => true,
-    },
-});
-
-const {visibleDesktopBlock, visibleMobile} = useBreakpoints(props);
 </script>

resources/js/composables/useBreakpoints.js

@@ -1,46 +0,0 @@
-import {computed} from 'vue';
-
-export default function (props) {
-    const visibleMobile = computed(() => {
-        return {
-            sm: 'flex sm:hidden',
-            md: 'flex md:hidden',
-            lg: 'flex lg:hidden',
-            xl: 'flex xl:hidden',
-        }[props.breakpoint];
-    });
-
-    const visibleDesktop = computed(() => {
-        return {
-            sm: 'hidden sm:flex',
-            md: 'hidden md:flex',
-            lg: 'hidden lg:flex',
-            xl: 'hidden xl:flex',
-        }[props.breakpoint];
-    });
-
-    const visibleMobileBlock = computed(() => {
-        return {
-            sm: 'block sm:hidden',
-            md: 'block md:hidden',
-            lg: 'block lg:hidden',
-            xl: 'block xl:hidden',
-        }[props.breakpoint];
-    });
-
-    const visibleDesktopBlock = computed(() => {
-        return {
-            sm: 'hidden sm:block',
-            md: 'hidden md:block',
-            lg: 'hidden lg:block',
-            xl: 'hidden xl:block',
-        }[props.breakpoint];
-    });
-
-    return {
-        visibleMobile,
-        visibleDesktop,
-        visibleDesktopBlock,
-        visibleMobileBlock,
-    };
-}

resources/js/views/form/Index.vue

@@ -144,7 +144,7 @@
             <conditions-form id="filesettings" :single="single" :value="fileSettingPopup.properties.conditions" @save="saveFileConditions"> </conditions-form>
         </ui-popup>
 
-        <page-filter breakpoint="xl" :filterable="false">
+        <page-filter>
             <template #buttons>
                 <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
                 <f-switch id="past" :model-value="getFilter('past')" label="vergangene zeigen" name="past" size="sm" @update:model-value="setFilter('past', $event)"></f-switch>

resources/js/views/form/Participants.vue

@@ -21,7 +21,7 @@
                 </div>
             </div>
         </ui-popup>
-        <page-filter breakpoint="lg">
+        <page-filter>
             <template #buttons>
                 <f-text id="search" v-model="innerFilter.search" name="search" label="Suchen" size="sm"></f-text>
                 <ui-icon-button icon="plus" @click="editing = {participant: null, preview: JSON.stringify(meta.form_config)}">Hinzufügen</ui-icon-button>

resources/js/views/invoice/Index.vue

@@ -72,7 +72,7 @@
                 </section>
             </form>
         </ui-popup>
-        <page-filter breakpoint="xl" :filterable="false">
+        <page-filter>
             <template #buttons>
                 <f-text id="search" :model-value="getFilter('search')" label="Suchen …" size="sm" @update:model-value="setFilter('search', $event)"></f-text>
                 <f-multipleselect

resources/js/views/member/VIndex.vue

@@ -37,7 +37,7 @@
                 <span class="hidden xl:inline">Anwenden</span>
             </button>
         </ui-popup>
-        <page-filter breakpoint="xl">
+        <page-filter>
             <template #fields>
                 <f-switch
                     v-show="hasModule('bill')"