LoongPanel-Asp/web/components/AddCard.vue

61 lines
1.3 KiB
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<script lang="ts" setup>
import {cards} from "~/config/cards";
2024-06-29 18:16:29 +08:00
import {type IGridItem, useMainLayoutStore} from "~/strores/UseMainLayoutStore";
2024-06-22 10:54:02 +08:00
import {v4 as uuidv4} from 'uuid';
import ICard from "~/components/Cards/ICard.vue";
const props = defineProps({
closeCallback: {
type: Function,
required: true
},
})
const mainLayoutStore = useMainLayoutStore()
const addCard = (selectCardId: string) => {
2024-06-29 18:16:29 +08:00
const newCard: IGridItem = {
2024-06-22 10:54:02 +08:00
type: "card",
h: 5, w: 5, x: 1, y: 1,
i: uuidv4(),
selectCard: selectCardId
}
mainLayoutStore.addLayout(newCard)
props.closeCallback()
}
</script>
<template>
<div class="add-card-box">
<div v-for="card in cards" class="add-card-item" @click="addCard(card.id)">
<ICard id="" :card-id="card.id"/>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.add-card-box {
padding: $padding*2;
min-width: 200px;
min-height: 100px;
display: grid;
background: $light-bg-color;
border-radius: $radius;
grid-template-columns: 1fr 1fr;
gap: $gap*2;
grid-template-rows: repeat(auto-fill, 1fr);
.dark-mode & {
background: $dark-bg-underline-color;
}
}
.add-card-item {
border-radius: $radius;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);;
min-width: 400px;
min-height: 200px;
}
</style>