Add date field
This commit is contained in:
philipp lang
parent
fd20fcb3de
commit
9bdd1447ad
|
|
@ -4,73 +4,75 @@
|
|||
<div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
|
||||
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
|
||||
<template v-for="(section, index) in v.sections">
|
||||
<a href="#"
|
||||
<a
|
||||
href="#"
|
||||
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
|
||||
:class="{ 'bg-primary': index <= active, 'bg-secondary': index > active }"
|
||||
@click.prevent="active = index">
|
||||
<svg preserveAspectRatio="none"
|
||||
:class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
|
||||
@click.prevent="active = index"
|
||||
>
|
||||
<svg
|
||||
preserveAspectRatio="none"
|
||||
class="h-full w-3 absolute left-0 text-primary transition duration-300"
|
||||
viewBox="0 0 100 100"
|
||||
:class="{ 'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active) }">
|
||||
:class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
|
||||
>
|
||||
<path d="M0,0 100,50 0,100" fill="currentColor"></path>
|
||||
</svg>
|
||||
<span
|
||||
class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
|
||||
v-html="index + 1"></span>
|
||||
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
|
||||
<span class="text-sm text-font ml-2" v-html="section.name"></span>
|
||||
<div v-if="editable" class="hidden @md:flex items-center h-full">
|
||||
<a href="#"
|
||||
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
|
||||
@click.prevent.stop="$emit('editSection', index)">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
|
||||
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
|
||||
@click.prevent.stop="$emit('deleteSection', index)">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
|
||||
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
|
||||
@click.prevent.stop="$emit('addSection')">
|
||||
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
|
||||
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
|
||||
<path
|
||||
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
|
||||
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
|
||||
<a href="#"
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
|
||||
:class="{ 'opacity-40': !backable }" @click.prevent="back">
|
||||
:class="{'opacity-40': !backable}"
|
||||
@click.prevent="back"
|
||||
>
|
||||
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
||||
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="overflow-hidden">
|
||||
<carousel v-model="active">
|
||||
<slide v-for="(section, index) in v.sections" :key="index"
|
||||
class="relative flex flex-no-wrap overflow-hidden">
|
||||
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
|
||||
<div class="flex-none w-full">
|
||||
<div href="#"
|
||||
<div
|
||||
href="#"
|
||||
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
|
||||
@click="active = index">
|
||||
<span
|
||||
class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300"
|
||||
v-html="index + 1"></span>
|
||||
@click="active = index"
|
||||
>
|
||||
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
|
||||
<span class="text-sm text-font" v-html="section.name"></span>
|
||||
</div>
|
||||
</div>
|
||||
</slide>
|
||||
</carousel>
|
||||
</div>
|
||||
<a href="#"
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
|
||||
:class="{ 'opacity-40': !nextable }" @click.prevent="next">
|
||||
:class="{'opacity-40': !nextable}"
|
||||
@click.prevent="next"
|
||||
>
|
||||
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
||||
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
|
||||
</svg>
|
||||
|
|
@ -81,28 +83,25 @@
|
|||
<carousel v-model="active">
|
||||
<slide v-for="(section, index) in v.sections" :key="index">
|
||||
<div class="w-full flex-none px-3 @xs:px-6">
|
||||
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro">
|
||||
</div>
|
||||
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
|
||||
<div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
|
||||
<div v-for="(field, findex) in section.fields" :key="findex"
|
||||
class="flex justify-stretch relative group" :class="{
|
||||
<div
|
||||
v-for="(field, findex) in section.fields"
|
||||
:key="findex"
|
||||
class="flex justify-stretch relative group"
|
||||
:class="{
|
||||
'hover:ring-edit hover:ring-4': editable,
|
||||
[colClasses.mobile[field.columns.mobile]]: true,
|
||||
[colClasses.tablet[field.columns.tablet]]: true,
|
||||
[colClasses.desktop[field.columns.desktop]]: true,
|
||||
}">
|
||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]"
|
||||
:field="field"></component>
|
||||
<div v-if="editable"
|
||||
class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
||||
<a href="#"
|
||||
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
|
||||
@click.prevent.stop="$emit('editField', index, findex)">
|
||||
}"
|
||||
>
|
||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
|
||||
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
|
||||
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
||||
</a>
|
||||
<a href="#"
|
||||
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
|
||||
@click.prevent.stop="$emit('deleteField', index, findex)">
|
||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
|
||||
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -110,13 +109,11 @@
|
|||
</div>
|
||||
|
||||
<div v-if="editable" class="flex justify-center mt-6 relative">
|
||||
<a href="#"
|
||||
class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
|
||||
@click.prevent="$emit('addField', index)">
|
||||
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
|
||||
<a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
|
||||
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
|
||||
<path
|
||||
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
|
||||
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -132,11 +129,12 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Carousel, Slide } from 'vue3-carousel';
|
||||
import {computed, ref, watch} from 'vue';
|
||||
import {Carousel, Slide} from 'vue3-carousel';
|
||||
import Navigation from './components/Navigation.vue';
|
||||
import useNav from './composables/useNav.js';
|
||||
import FieldText from './components/fields/Text.vue';
|
||||
import FieldDate from './components/fields/Date.vue';
|
||||
import FieldTextarea from './components/fields/Textarea.vue';
|
||||
import FieldDropdown from './components/fields/Dropdown.vue';
|
||||
import FieldCheckboxes from './components/fields/Checkboxes.vue';
|
||||
|
|
@ -215,11 +213,12 @@ const v = computed(() => {
|
|||
});
|
||||
const f = computed(() => JSON.parse(props.fields));
|
||||
|
||||
const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
|
||||
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
|
||||
|
||||
function resolveComponentName(field) {
|
||||
return {
|
||||
TextField: FieldText,
|
||||
DateField: FieldDate,
|
||||
TextareaField: FieldTextarea,
|
||||
DropdownField: FieldDropdown,
|
||||
RadioField: FieldRadio,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
||||
<input
|
||||
:id="field.key"
|
||||
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"
|
||||
/>
|
||||
<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';
|
||||
|
||||
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, ['required', 'type', 'key', 'columns', 'name', 'default', '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']),
|
||||
},
|
||||
});
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue