LoongPanel-Asp/web/components/AddCard.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>