Init
This commit is contained in:
commit
f90fdc0598
99 changed files with 15260 additions and 0 deletions
60
frontend/src/components/UI/SmallCard.vue
Normal file
60
frontend/src/components/UI/SmallCard.vue
Normal file
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div v-if="!to && !bigRight" class="col-12 lg:col-6">
|
||||
<BaseItem class="relative" :bgColor="bgColor">
|
||||
<div class="flex flex-column justify-content-between">
|
||||
<div class="white-space-nowrap font-bold overflow-hidden text-overflow-ellipsis"><slot name="description"></slot></div>
|
||||
<div class="flex justify-content-between">
|
||||
<div class="flex align-items-center mt-1">
|
||||
<TheBadge size="sm" color="info"><slot name="badgeOne"></slot></TheBadge>
|
||||
<TheBadge v-if="badgeTwo" size="sm" color="warning" class="ml-2"><slot name="badgeTwo"></slot></TheBadge>
|
||||
</div>
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</BaseItem>
|
||||
</div>
|
||||
<div v-else-if="bigRight" class="col-12 lg:col-6">
|
||||
<BaseItem class="relative" :bgColor="bgColor">
|
||||
<div class="flex justify-content-between">
|
||||
<div class="flex flex-column overflow-hidden">
|
||||
<div class="white-space-nowrap font-bold overflow-hidden text-overflow-ellipsis"><slot name="description"></slot></div>
|
||||
<div class="flex align-items-center mt-1">
|
||||
<TheBadge size="sm" color="info"><slot name="badgeOne"></slot></TheBadge>
|
||||
<TheBadge v-if="badgeTwo" size="sm" color="warning" class="ml-2"><slot name="badgeTwo"></slot></TheBadge>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</BaseItem>
|
||||
</div>
|
||||
<router-link v-else class="col-12 lg:col-6 no-underline" :to="to">
|
||||
<BaseItem class="relative" :bgColor="bgColor">
|
||||
<div class="flex justify-content-between overflow-hidden">
|
||||
<div class="flex flex-column align-items-start">
|
||||
<div class="white-space-nowrap overflow-hidden text-overflow-ellipsis font-bold"><slot name="description"></slot></div>
|
||||
<div class="flex align-items-center mt-1">
|
||||
<TheBadge size="sm" color="success"><slot name="badge"></slot></TheBadge>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</BaseItem>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import TheBadge from "@/components/UI/TheBadge.vue";
|
||||
import BaseItem from "@/components/UI/BaseItem.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "SmallCard",
|
||||
components: { TheBadge, BaseItem },
|
||||
props: {
|
||||
bgColor: { type: String, default: "a" },
|
||||
to: { type: String, default: "" },
|
||||
badgeTwo: { type: Boolean, default: true },
|
||||
bigRight: { type: Boolean, default: false },
|
||||
},
|
||||
});
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue