127 lines
2.6 KiB
Vue
127 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import BigIcon from './BigIcon.vue'
|
|
|
|
const props = defineProps({
|
|
icon: String,
|
|
legend: String,
|
|
startReadDate: String,
|
|
endReadDate: String,
|
|
isExpanded: Boolean,
|
|
isReadonly: Boolean,
|
|
useEndDate: Boolean,
|
|
lastWidget: Boolean,
|
|
})
|
|
defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])
|
|
|
|
const today = new Date().toISOString().slice(0, 10)
|
|
|
|
function computeParentClasses() {
|
|
let classNames = 'bookdatewidget'
|
|
if (props.isExpanded) {
|
|
classNames += ' has-text-dark has-background-text'
|
|
}
|
|
if (props.lastWidget) {
|
|
classNames += ' border-radius-right-and-left'
|
|
} else {
|
|
classNames += ' border-radius-right'
|
|
}
|
|
if (props.isReadonly) {
|
|
classNames += ' widget-readonly'
|
|
}
|
|
return classNames
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="computeParentClasses()">
|
|
<BigIcon
|
|
:icon="props.icon"
|
|
:is-readonly="props.isReadonly"
|
|
:legend="props.legend"
|
|
:isSet="props.isExpanded"
|
|
@click="props.isReadonly ? null : $emit('onIconClick')"
|
|
/>
|
|
<div v-if="props.isExpanded" class="inputdate">
|
|
<div class="ontopofinput">
|
|
<label class="datelabel" for="startread">
|
|
{{ $t('bookdatewidget.started') }}
|
|
</label>
|
|
<input
|
|
class="datepicker has-background-dark has-text-light"
|
|
id="startread"
|
|
type="date"
|
|
@change="(e) => $emit('onStartDateChange', e.target.value)"
|
|
:value="props.startReadDate"
|
|
:max="today"
|
|
/>
|
|
<div v-if="props.useEndDate">
|
|
<label class="datelabel" for="endread">
|
|
{{ $t('bookdatewidget.finished') }}
|
|
</label>
|
|
<input
|
|
class="datepicker has-background-dark has-text-light"
|
|
id="endread"
|
|
type="date"
|
|
@change="(e) => $emit('onEndDateChange', e.target.value)"
|
|
:value="props.endReadDate"
|
|
:max="today"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.inputdate {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.border-radius-right {
|
|
border-radius: 0 30px 30px 0;
|
|
}
|
|
|
|
.border-radius-right-and-left {
|
|
border-radius: 0 30px 30px 45px;
|
|
}
|
|
|
|
.ontopofinput {
|
|
display: block;
|
|
}
|
|
|
|
.datelabel {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 26px;
|
|
border: none;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.datepicker {
|
|
font-size: 26px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.widget-readonly {
|
|
opacity: 50%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.bookdatewidget {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.bookdatewidget {
|
|
display: flex;
|
|
width: 500px;
|
|
}
|
|
}
|
|
</style>
|