revert: revoke all ai-generated content
This commit is contained in:
@@ -1,115 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { DisplayDay } from './types';
|
||||
import { format } from '@/utils/utils';
|
||||
|
||||
const props = defineProps<{
|
||||
cells: DisplayDay[];
|
||||
weekNames: string[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'event-click', uuid: string): void
|
||||
}>();
|
||||
|
||||
const rows = computed<DisplayDay[][]>(() => {
|
||||
const r: DisplayDay[][] = [];
|
||||
for (let i = 0; i < 6; i++) r.push(props.cells.slice(i * 7, i * 7 + 7));
|
||||
return r;
|
||||
});
|
||||
|
||||
const overflowText = (count: number): string => {
|
||||
return format('{0} items', count.toString());
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="calendar-grid">
|
||||
<div class="calendar-grid-header">
|
||||
<div class="calendar-grid-cell calendar-grid-header-cell" v-for="(name, i) in weekNames" :key="i"
|
||||
:class="{ weekend: i >= 5 }"><b>{{ name }}</b></div>
|
||||
</div>
|
||||
<div v-for="(row, ri) in rows" :key="ri" class="calendar-grid-row">
|
||||
<div v-for="(cell, ci) in row" :key="ci" class="calendar-grid-cell calendar-grid-body-cell"
|
||||
:class="{ 'not-current-month': !cell.isCurrentMonth }">
|
||||
<p class="cell-title">
|
||||
<b>{{ cell.day }}</b>
|
||||
<span>{{ cell.subcalendar }}</span>
|
||||
</p>
|
||||
<div v-for="(e, ei) in cell.events.slice(0, 4)" :key="ei" class="event-bar"
|
||||
:style="{ background: e.color }" @click="emit('event-click', e.uuid)"></div>
|
||||
<p v-if="cell.events.length > 4" class="cell-overflow">{{ overflowText(cell.events.length) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.calendar-grid {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.calendar-grid-header,
|
||||
.calendar-grid-row {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.calendar-grid-cell {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-grid-body-cell {
|
||||
border-top: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
padding: 0.75em;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-grid-body-cell.not-current-month {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
/* remove the double border between adjacent cells */
|
||||
.calendar-grid-row .calendar-grid-cell:nth-child(n+2) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.calendar-grid-row:nth-child(n) .calendar-grid-body-cell {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cell-overflow {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.event-bar {
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
margin-top: 0.2rem;
|
||||
height: 0.75rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weekend {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user