134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import BaseDialog from './BaseDialog.vue'
|
|
import { useCalendarStore } from '@/stores/CalendarStore'
|
|
|
|
const show = ref(false)
|
|
const calendarStore = useCalendarStore()
|
|
|
|
// Local copies for editing
|
|
const firstDay = ref(calendarStore.config.first_day)
|
|
const weekend = ref([...calendarStore.weekend])
|
|
|
|
function open() {
|
|
firstDay.value = calendarStore.config.first_day
|
|
weekend.value = [...calendarStore.weekend]
|
|
show.value = true
|
|
}
|
|
function close() {
|
|
show.value = false
|
|
}
|
|
function save() {
|
|
calendarStore.config.first_day = firstDay.value
|
|
calendarStore.weekend = [...weekend.value]
|
|
show.value = false
|
|
}
|
|
|
|
function toggleWeekend(idx) {
|
|
weekend.value[idx] = !weekend.value[idx]
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<template>
|
|
<BaseDialog v-model="show" title="Settings">
|
|
<div class="setting-group">
|
|
<label class="ec-field">
|
|
<span>First day of week</span>
|
|
<select v-model.number="firstDay">
|
|
<option :value="0">Sunday</option>
|
|
<option :value="1">Monday</option>
|
|
<option :value="2">Tuesday</option>
|
|
<option :value="3">Wednesday</option>
|
|
<option :value="4">Thursday</option>
|
|
<option :value="5">Friday</option>
|
|
<option :value="6">Saturday</option>
|
|
</select>
|
|
</label>
|
|
<div class="weekend-select ec-field">
|
|
<span>Weekend days</span>
|
|
<div class="weekday-pills">
|
|
<button
|
|
v-for="(isW, i) in weekend"
|
|
:key="i"
|
|
type="button"
|
|
@click="toggleWeekend(i)"
|
|
:class="['pill', { active: isW }]"
|
|
>
|
|
{{ ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][i] }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="footer-row">
|
|
<button type="button" class="ec-btn" @click="close">Cancel</button>
|
|
<button type="button" class="ec-btn save-btn" @click="save">Save</button>
|
|
</div>
|
|
</template>
|
|
</BaseDialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.setting-group {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
.ec-field {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
}
|
|
.ec-field > span {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
}
|
|
select {
|
|
border: 1px solid var(--muted);
|
|
background: var(--panel-alt, transparent);
|
|
color: var(--ink);
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: 0.4rem;
|
|
}
|
|
.weekday-pills {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pill {
|
|
border: 1px solid var(--muted);
|
|
background: var(--panel-alt, transparent);
|
|
color: var(--ink);
|
|
padding: 0.35rem 0.6rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.7rem;
|
|
cursor: pointer;
|
|
}
|
|
.pill.active {
|
|
background: var(--today);
|
|
color: #000;
|
|
border-color: var(--today);
|
|
font-weight: 600;
|
|
}
|
|
.footer-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
.ec-btn {
|
|
border: 1px solid var(--muted);
|
|
background: transparent;
|
|
color: var(--ink);
|
|
padding: 0.5rem 0.8rem;
|
|
border-radius: 0.4rem;
|
|
cursor: pointer;
|
|
}
|
|
.ec-btn.save-btn {
|
|
background: var(--today);
|
|
color: #000;
|
|
border-color: transparent;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|