feat: enhance BottomBar and TopBar components with dynamic actions and improved styling; integrate actions in index.vue

This commit is contained in:
PandaDEV 2025-03-15 00:33:29 +01:00
parent 60d17442fc
commit 455b60a994
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
3 changed files with 45 additions and 21 deletions

View file

@ -14,27 +14,27 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref } from "vue";
const searchQuery = ref('')
const searchInput = ref<HTMLInputElement | null>(null)
const searchQuery = ref("");
const searchInput = ref<HTMLInputElement | null>(null);
const emit = defineEmits<{
(e: 'search', query: string): void
(e: 'focus'): void
}>()
(e: "search", query: string): void;
(e: "focus"): void;
}>();
const onSearch = () => {
emit('search', searchQuery.value)
}
emit("search", searchQuery.value);
};
defineExpose({ searchInput })
defineExpose({ searchInput });
</script>
<style lang="scss">
.topbar {
width: 100%;
height: 56px;
min-height: 56px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;