release v2.0.0 #4

Merged
crimsen merged 481 commits from develop into master 2024-01-18 15:15:08 +00:00
1 changed files with 44 additions and 66 deletions
Showing only changes of commit 9967296698 - Show all commits

View File

@ -10,7 +10,7 @@
<template #append> <template #append>
<q-icon v-if="type == 'date' || type == 'datetime'" name="event" class="cursor-pointer"> <q-icon v-if="type == 'date' || type == 'datetime'" name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date :model-value="getDate()" mask="YYYY-MM-DD" @input="dateChanged"> <q-date v-model="date" mask="YYYY-MM-DD">
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat /> <q-btn v-close-popup label="Schließen" color="primary" flat />
</div> </div>
@ -23,7 +23,7 @@
class="cursor-pointer" class="cursor-pointer"
> >
<q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
<q-time :model-value="getTime()" mask="HH:mm" @update:modelValue="timeChanged"> <q-time v-model="time" mask="HH:mm">
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat /> <q-btn v-close-popup label="Schließen" color="primary" flat />
</div> </div>
@ -35,13 +35,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, PropType } from 'vue'; import { computed, defineComponent, PropType } from 'vue';
import { date as q_date } from 'quasar'; import { date as q_date } from 'quasar';
export default defineComponent({ export default defineComponent({
name: 'IsoDateInput', name: 'IsoDateInput',
props: { props: {
modelValue: { type: Date, default: new Date() }, modelValue: { type: Object as PropType<Date>, default: new Date() },
type: { type: {
type: String, type: String,
default: 'date', default: 'date',
@ -54,10 +54,8 @@ export default defineComponent({
default: () => [], default: () => [],
}, },
}, },
emits: { input: (date: string) => date.length > 5 }, emits: { 'update:modelValue': (date: Date) => !!date },
setup(props, { emit }) { setup(props, { emit }) {
const _date = ref('');
const _time = ref('');
const placeholder = computed(() => { const placeholder = computed(() => {
switch (props.type) { switch (props.type) {
case 'date': case 'date':
@ -70,77 +68,59 @@ export default defineComponent({
throw 'Invalid type given'; throw 'Invalid type given';
}); });
const dateTime = computed({ const date = computed({
get() { get: () => q_date.formatDate(props.modelValue, 'YYYY-MM-DD'),
if (typeof props.modelValue == 'object') { set: (v: string) => {
switch (props.type) { const d = modifyDate(v);
case 'date': if (d) emit('update:modelValue', d);
return getDate();
case 'time':
return getTime();
case 'datetime':
return `${getDate()} ${getTime()}`;
}
}
return props.modelValue;
}, },
set(dateTimeString: string) { });
const time = computed({
get: () => q_date.formatDate(props.modelValue, 'HH:mm'),
set: (v: string) => {
const d = modifyTime(v);
if (d) emit('update:modelValue', d);
},
});
const dateTime = computed({
get: () => q_date.formatDate(props.modelValue, placeholder.value),
set: (v: string) => {
switch (props.type) { switch (props.type) {
case 'date': case 'date':
dateChanged(dateTimeString); date.value = v;
break; break;
case 'time': case 'time':
timeChanged(dateTimeString); time.value = v;
break; break;
case 'datetime': case 'datetime':
const _dateTime = dateTimeString.split(' '); const split = v.split(' ').filter((c) => c !== '');
_date.value = _dateTime[0]; if (split.length == 2) {
_time.value = _dateTime[1]; const d = modifyTime(split[1], modifyDate(split[0]));
console.log(dateTimeString, _dateTime); if (d) emit('update:modelValue', d);
if (/^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(dateTimeString)) {
console.log('dateTimeChanged');
emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
} else {
emit('input', dateTimeString);
} }
break;
} }
}, },
}); });
function dateChanged(dateString: string) { function modifyTime(v: string, d: Date | undefined = props.modelValue) {
_date.value = dateString; if (d && /^\d\d:\d\d$/.test(v)) {
console.log(dateString); const split = v.split(':');
return q_date.adjustDate(d, { hours: +split[0], minutes: +split[1] });
if (/^\d{4}-\d\d-\d\d$/.test(dateString)) {
emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
} else {
emit('input', dateString);
} }
} }
function timeChanged(timeString: string) { function modifyDate(v: string, d: Date | undefined = props.modelValue) {
_time.value = timeString; if (d && /^\d{4}-\d\d-\d\d$/.test(v)) {
if (_date.value == '') { const split = v.split('-');
_date.value = q_date.formatDate(new Date(), 'YYYY-MM-DD'); return q_date.adjustDate(d, {
year: +split[0],
month: +split[1],
date: +split[2],
});
} }
if (/^\d\d:\d\d$/.test(timeString)) {
emit('input', new Date(`${_date.value} ${_time.value}`).toISOString());
} else {
emit('input', timeString);
}
}
function getDate() {
if (typeof props.modelValue == 'object') {
return q_date.formatDate(props.modelValue, 'YYYY-MM-DD');
}
return '';
}
function getTime() {
if (typeof props.modelValue == 'object') {
return q_date.formatDate(props.modelValue, 'HH:mm');
}
return '';
} }
function isDate(val: string) { function isDate(val: string) {
@ -161,12 +141,10 @@ export default defineComponent({
]; ];
return { return {
date,
time,
dateTime, dateTime,
getDate,
getTime,
dateChanged,
customRules, customRules,
timeChanged,
placeholder, placeholder,
}; };
}, },