Add non-popup styling for tabs component

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/components/ui/Tabs.vue

@@ -1,9 +1,15 @@
 <template>
-    <div class="flex-none w-maxc flex flex-col justify-between border-b-2 group-[.is-popup]:border-zinc-500 mb-3">
+    <div class="flex-none w-maxc flex flex-col justify-between border-b-2 border-gray-500 group-[.is-popup]:border-zinc-500 mb-3">
         <div class="flex space-x-1 px-2">
-            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
+            <a
-                :class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
+                v-for="(item, index) in entries"
-                v-text="item.title"></a>
+                :key="index"
+                href="#"
+                class="rounded-t-lg py-1 px-3 text-zinc-300"
+                :class="index === modelValue ? `bg-gray-700 group-[.is-popup]:bg-zinc-600` : ''"
+                @click.prevent="openMenu(index)"
+                v-text="item.title"
+            ></a>
         </div>
     </div>
 </template>
@@ -11,9 +17,18 @@
 <script>
 export default {
     props: {
-        modelValue: {},
+        modelValue: {
-        entries: {},
+            type: Number,
+            required: true,
+        },
+        entries: {
+            required: true,
+            validator: function (entries) {
+                return entries.filter((e) => e.title === undefined || typeof e.title !== 'string' || e.title.length === 0).length === 0;
+            },
+        },
     },
+    emits: ['update:modelValue'],
     methods: {
         openMenu(index) {
             this.$emit('update:modelValue', index);

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')"