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