59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<template>
|
|
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
|
<input
|
|
:id="innerId"
|
|
v-model="inner"
|
|
:name="field.key"
|
|
type="date"
|
|
:max="max"
|
|
placeholder=""
|
|
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
|
|
/>
|
|
<div v-if="field.hint" class="absolute right-0 mr-2 flex items-center h-full">
|
|
<hint :value="field.hint"></hint>
|
|
</div>
|
|
<field-label :name="field.name" :required="field.required"></field-label>
|
|
</label>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from 'vue';
|
|
import FieldLabel from '../FieldLabel.vue';
|
|
import dayjs from 'dayjs';
|
|
import Hint from '../Hint.vue';
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const props = defineProps({
|
|
modelValue: {
|
|
required: true,
|
|
validator: (value) => value === null || typeof value === 'string',
|
|
},
|
|
field: {
|
|
required: true,
|
|
validator: (value) =>
|
|
hasKeys(value, [...globalFieldRules(), 'required', 'max_today']) &&
|
|
typeof value.required === 'boolean' &&
|
|
typeof value.max_today === 'boolean' &&
|
|
typeof value.key === 'string' &&
|
|
value.key.length > 0 &&
|
|
typeof value.name === 'string' &&
|
|
value.name.length > 0 &&
|
|
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
|
|
},
|
|
id: {
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
|
|
|
const max = computed(() => {
|
|
return props.field.max_today ? dayjs().format('YYYY-MM-DD') : null;
|
|
});
|
|
|
|
const inner = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v),
|
|
});
|
|
</script>
|