silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 106 Wiki Activity

Add sidebar for filter

This commit is contained in:
philipp lang 2025-05-26 15:21:06 +02:00
parent b6bb7d4113
commit 5c577acdbf
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/page/Filter.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<ui-popup v-if="visible === true" heading="Filtern" @close="visible = false"> <ui-sidebar v-if="visible === true" @close="visible = false" :max="0">
<div class="grid gap-3 md:grid-cols-2"> <page-header title="Filtern" @close="visible = false"></page-header>
<div class="grid gap-6 p-6">
<slot name="fields"></slot> <slot name="fields"></slot>
</div> </div>
</ui-popup> </ui-sidebar>
<div class="px-6 py-2 border-b border-gray-600 items-center space-x-3"> <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3">
<div class="flex flex-col sm:flex-row items-stretch sm:items-end space-y-1 sm:space-y-0 sm:space-x-3"> <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> <slot name="buttons"></slot>
@ -15,5 +16,7 @@
<script setup> <script setup>
import {ref} from 'vue'; import {ref} from 'vue';
defineEmits(['close']);
const visible = ref(false); const visible = ref(false);
</script> </script>

18
resources/js/components/ui/Sidebar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="fixed w-full w-[80vw] max-w-[40rem] shadow-2xl bg-gray-600 right-0 top-0 h-full flex flex-col group is-bright"> <div class="fixed shadow-2xl bg-gray-600 right-0 top-0 h-full flex flex-col group is-bright" :class="widths[max]">
<suspense> <suspense>
<slot></slot> <slot></slot>
@ -17,4 +17,20 @@
<script setup> <script setup>
defineEmits(['close']); defineEmits(['close']);
const widths = {
40: 'w-full w-[80vw] max-w-[40rem]',
30: 'w-full w-[80vw] max-w-[30rem]',
20: 'w-full w-[80vw] max-w-[20rem]',
10: 'w-full w-[80vw] max-w-[10rem]',
0: '',
};
defineProps({
max: {
default: () => 40,
type: Number,
required: false,
},
});
</script> </script>