mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 21:24:05 +02:00
feat: enhance BottomBar and TopBar components with dynamic actions and improved styling; integrate actions in index.vue
This commit is contained in:
parent
60d17442fc
commit
455b60a994
3 changed files with 45 additions and 21 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue