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 106 additions and 30 deletions
Showing only changes of commit a861129e1b - Show all commits

View File

@ -3,82 +3,158 @@
filled
:readonly="readonly"
:label="label"
:value="getDate()"
placeholder="YYYY-MM-DD"
:value="getDateTime()"
:placeholder="placeholder"
v-on:input="dateChanged"
:rules="[isDate]"
:rules="rules"
>
<template v-slot:append>
<q-icon
name="event"
class="cursor-pointer"
>
<q-popup-proxy
ref="qDateProxy"
transition-show="scale"
transition-hide="scale"
>
<q-date
:value="getDate()"
mask="YYYY-MM-DD"
v-on:input="dateChanged"
>
<q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged">
<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>
</q-date>
</q-popup-proxy>
</q-icon>
<q-icon
name="mdi-clock-outline"
class="cursor-pointer"
v-if="type == 'time' || type == 'datetime'"
>
<q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
<q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat />
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { computed, defineComponent, ref } from '@vue/composition-api';
import { date } from 'quasar';
interface Props {
value?: Date;
label?: string;
readonly: boolean;
type: string;
}
export default defineComponent({
name: 'IsoDateInput',
props: {
value: {
required: true,
required: true
},
label: {},
readonly: {
default: false,
default: false
},
type: {
default: 'date',
validator: function(value: string) {
return ['date', 'time', 'datetime'].indexOf(value) !== -1;
}
}
},
setup(props: Props, { emit }) {
setup(props: Props, { emit }: { emit: any }) {
function getDateTime() {
if (props.value) {
switch (props.type) {
case 'date':
return getDate();
case 'time':
return getTime();
case 'datetime':
return `${getDate()} ${getTime()}`;
}
}
}
function getDate() {
if (props.value) {
return date.formatDate(props.value, 'YYYY-MM-DD');
}
return '';
}
function getTime() {
if (props.value) {
return date.formatDate(props.value, 'HH:mm');
}
return '';
}
const _date = ref('');
const _time = ref('');
const placeholder = computed(() => {
switch (props.type) {
case 'date':
return 'YYYY-MM-DD';
break;
case 'time':
return 'HH:mm';
case 'datetime':
return 'YYYY-MM-DD HH:mm';
}
});
function dateChanged(dateString: string) {
emit('input', new Date(dateString));
_date.value = dateString;
console.log('dateChanged', new Date(`${_date.value} ${_time.value}`));
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', new Date(`${_date.value} ${_time.value}`));
}
function timeChanged(timeString: string) {
_time.value = timeString;
if (_date.value == '') {
_date.value = date.formatDate(new Date(), 'YYYY-MM-DD');
}
console.log('timeChanged', new Date(`${_date.value} ${_time.value}`));
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
emit('input', new Date(`${_date.value} ${_time.value}`));
}
function isDate(val: string) {
return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
}
function isTime(val: string) {
return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
}
function isDateTime(val: string) {
return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
}
const rules = computed(() => {
switch (props.type) {
case 'date':
return [isDate];
break;
case 'time':
return [isTime];
break;
case 'datetime':
return [isDateTime];
break;
}
});
return {
getDate,
getTime,
getDateTime,
dateChanged,
isDate,
rules,
timeChanged,
placeholder
};
},
}
});
</script>