61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import {cards} from "~/config/cards";
|
|
import {type IGridItem, useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
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) => {
|
|
const newCard: IGridItem = {
|
|
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> |