124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<template>
|
|
<CalendarField
|
|
:id="id"
|
|
:display-value="displayValue"
|
|
:sync-to="validWeek?.monday ?? null"
|
|
:name="name"
|
|
:label="label"
|
|
:placeholder="placeholder"
|
|
:required="required"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
:hint="hint"
|
|
:error="error"
|
|
:success="success"
|
|
:clearable="clearable"
|
|
:input-class="inputClass"
|
|
:label-class="labelClass"
|
|
:group-class="groupClass"
|
|
v-bind="$attrs"
|
|
@clear="onClear"
|
|
@close="onClose"
|
|
>
|
|
<template #default="{ currentMonth, currentYear, close }">
|
|
<MonthGrid
|
|
:month="currentMonth"
|
|
:year="currentYear"
|
|
:range-start="activeMonday"
|
|
:range-end="activeSunday"
|
|
:marked-week-start="validWeek?.monday ?? null"
|
|
interactive-week-number
|
|
:min="min"
|
|
:max="max"
|
|
@select="(iso) => onSelect(iso, close)"
|
|
@hover="onHover"
|
|
/>
|
|
</template>
|
|
</CalendarField>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref} from 'vue'
|
|
import CalendarField from './internal/CalendarField.vue'
|
|
import MonthGrid from './internal/MonthGrid.vue'
|
|
import {formatWeekDisplay, isValidIsoWeek, isoWeekToMonday, mondayOf, sundayOf, toIsoWeek} from './composables/dateWeek'
|
|
|
|
defineOptions({name: 'MalioDateWeek', inheritAttrs: false})
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
name?: string
|
|
label?: string
|
|
modelValue?: string | null
|
|
placeholder?: string
|
|
required?: boolean
|
|
disabled?: boolean
|
|
readonly?: boolean
|
|
hint?: string
|
|
error?: string
|
|
success?: string
|
|
min?: string
|
|
max?: string
|
|
clearable?: boolean
|
|
inputClass?: string
|
|
labelClass?: string
|
|
groupClass?: string
|
|
}>(),
|
|
{
|
|
id: '',
|
|
name: '',
|
|
label: '',
|
|
modelValue: undefined,
|
|
placeholder: 'JJ/MM/AAAA',
|
|
required: false,
|
|
disabled: false,
|
|
readonly: false,
|
|
hint: '',
|
|
error: '',
|
|
success: '',
|
|
min: undefined,
|
|
max: undefined,
|
|
clearable: true,
|
|
inputClass: '',
|
|
labelClass: '',
|
|
groupClass: '',
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
|
|
|
const hoverWeekStart = ref<string | null>(null)
|
|
|
|
const validWeek = computed(() => {
|
|
if (props.modelValue && isValidIsoWeek(props.modelValue)) {
|
|
return {monday: isoWeekToMonday(props.modelValue) as string}
|
|
}
|
|
return null
|
|
})
|
|
|
|
const activeMonday = computed(() => hoverWeekStart.value ?? validWeek.value?.monday ?? null)
|
|
const activeSunday = computed(() => (activeMonday.value ? sundayOf(activeMonday.value) : null))
|
|
|
|
const displayValue = computed(() => (validWeek.value ? formatWeekDisplay(props.modelValue as string) : ''))
|
|
|
|
const onSelect = (iso: string, close: () => void) => {
|
|
emit('update:modelValue', toIsoWeek(iso))
|
|
hoverWeekStart.value = null
|
|
close()
|
|
}
|
|
|
|
const onHover = (iso: string | null) => {
|
|
hoverWeekStart.value = iso ? mondayOf(iso) : null
|
|
}
|
|
|
|
const onClose = () => {
|
|
hoverWeekStart.value = null
|
|
}
|
|
|
|
const onClear = () => {
|
|
emit('update:modelValue', null)
|
|
hoverWeekStart.value = null
|
|
}
|
|
</script>
|