feat: add OccurrenceGrid component
This commit is contained in:
74
src/components/OccurrenceGrid.vue
Normal file
74
src/components/OccurrenceGrid.vue
Normal 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>
|
||||
Reference in New Issue
Block a user