feat: add OccurrenceGrid component

This commit is contained in:
timeTable2 dev
2026-07-13 18:41:51 +08:00
parent f52f5315e6
commit 8a1d547001

View File

@@ -0,0 +1,74 @@
<script setup>
import { computed } from 'vue'
import { DOW } from '../lib/weekday.js'
import { expandOccurrences } from '../lib/recur.js'
const props = defineProps({
event: { type: Object, required: true },
})
const emit = defineEmits(['toggle'])
const occurrences = computed(() => expandOccurrences(props.event))
function dowFor(dateStr) {
return DOW[new Date(dateStr + 'T00:00:00').getDay()]
}
</script>
<template>
<div>
<p class="hint">
点击日期切换"排除/包含"状态排除的日期红色删除线会写入 EXDATE
</p>
<div class="occ-grid">
<div
v-for="occ in occurrences"
:key="occ.date"
class="occ"
:class="occ.skipped ? 'skipped' : 'active'"
@click="emit('toggle', occ.date)"
>
{{ occ.date }}<br />
<span class="dow">{{ dowFor(occ.date) }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.hint {
font-size: 12px;
color: #7f8c8d;
margin-bottom: 8px;
}
.occ-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
max-height: 360px;
overflow-y: auto;
padding: 4px;
}
.occ {
padding: 8px 10px;
border: 1px solid #d5dbdb;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
text-align: center;
transition: all 0.12s;
}
.occ:hover { border-color: #3498db; }
.occ.skipped {
background: #fce4ec;
border-color: #e74c3c;
color: #c0392b;
text-decoration: line-through;
}
.occ.active {
background: #e8f5e9;
border-color: #27ae60;
color: #1e7d32;
}
.dow { font-size: 10px; color: #95a5a6; }
</style>