Add nami fields
This commit is contained in:
philipp lang
parent
bfe3f567e7
commit
8ae4a4639c
|
|
@ -102,7 +102,7 @@
|
|||
[colClasses.desktop[field.columns.desktop]]: true,
|
||||
}"
|
||||
>
|
||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :payload="payload" :field="field"></component>
|
||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :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>
|
||||
|
|
@ -139,18 +139,10 @@ 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 FieldGroup from './components/fields/Group.vue';
|
||||
import FieldCheckboxes from './components/fields/Checkboxes.vue';
|
||||
import FieldCheckbox from './components/fields/Checkbox.vue';
|
||||
import FieldNami from './components/fields/Nami.vue';
|
||||
import FieldRadio from './components/fields/Radio.vue';
|
||||
import EditIcon from './components/icons/EditIcon.vue';
|
||||
import DeleteIcon from './components/icons/DeleteIcon.vue';
|
||||
import useToastify from './composables/useToastify.js';
|
||||
import useFields from './composables/useFields.js';
|
||||
|
||||
const {success, errorFromResponse} = useToastify();
|
||||
|
||||
|
|
@ -211,6 +203,13 @@ watch(active, function (newValue) {
|
|||
emits('active', v.value.sections.length ? active.value : null);
|
||||
});
|
||||
|
||||
const allFields = computed(() => {
|
||||
var fields = [];
|
||||
v.value.sections.forEach((section) => section.fields.forEach((field) => fields.push(field)));
|
||||
|
||||
return fields;
|
||||
});
|
||||
|
||||
function reload() {
|
||||
loaded.value = false;
|
||||
var values = window[props.configVarName] ? window[props.configVarName] : JSON.parse(props.value);
|
||||
|
|
@ -235,20 +234,7 @@ watch(
|
|||
);
|
||||
|
||||
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
|
||||
|
||||
function resolveComponentName(field) {
|
||||
return {
|
||||
TextField: FieldText,
|
||||
DateField: FieldDate,
|
||||
TextareaField: FieldTextarea,
|
||||
DropdownField: FieldDropdown,
|
||||
GroupField: FieldGroup,
|
||||
RadioField: FieldRadio,
|
||||
CheckboxesField: FieldCheckboxes,
|
||||
CheckboxField: FieldCheckbox,
|
||||
NamiField: FieldNami,
|
||||
}[field.type];
|
||||
}
|
||||
const {resolveComponentName} = useFields();
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </popup>
|
||||
<detail-popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"> </detail-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import CalendarIcon from './components/icons/CalendarIcon.vue';
|
||||
import Popup from './components/Popup.vue';
|
||||
import DetailPopup from './components/DetailPopup.vue';
|
||||
|
||||
const props = defineProps({
|
||||
indexUrl: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<popup :heading="event.name" @close="$emit('close')">
|
||||
<div class="flex items-baseline text-sm">
|
||||
<calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
|
||||
<span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<img :src="event.image" class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
|
||||
<content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
|
||||
</div>
|
||||
<div class="flex mt-3">
|
||||
<a
|
||||
:href="registerUrl.replace(':slug', event.slug)"
|
||||
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg"
|
||||
>
|
||||
Zur Anmeldung
|
||||
</a>
|
||||
</div>
|
||||
</popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CalendarIcon from './icons/CalendarIcon.vue';
|
||||
import Content from './Content.vue';
|
||||
import Popup from './Popup.vue';
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const props = defineProps({
|
||||
event: {
|
||||
required: true,
|
||||
},
|
||||
registerUrl: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,45 +1,23 @@
|
|||
<template>
|
||||
<div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
|
||||
@click.self="emit('close')">
|
||||
<div
|
||||
class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
|
||||
<h2 class="font-arvo text-primary text-sm md:text-base" v-text="event.name"></h2>
|
||||
<div class="flex items-baseline text-sm">
|
||||
<calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
|
||||
<span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<img :src="event.image"
|
||||
class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
|
||||
<content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
|
||||
</div>
|
||||
<div class="flex mt-3">
|
||||
<a :href="registerUrl.replace(':slug', event.slug)"
|
||||
class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg">
|
||||
Zur Anmeldung
|
||||
</a>
|
||||
</div>
|
||||
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
|
||||
<close-icon class="text-gray-700 w-5 h-5"></close-icon>
|
||||
</a>
|
||||
<div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40" @click.self="emit('close')">
|
||||
<div class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
|
||||
<h2 class="font-arvo text-primary text-sm md:text-base" v-if="heading" v-text="heading"></h2>
|
||||
<slot></slot>
|
||||
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
|
||||
<close-icon class="text-gray-700 w-5 h-5"></close-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CalendarIcon from "./icons/CalendarIcon.vue";
|
||||
import CloseIcon from "./icons/CloseIcon.vue";
|
||||
import Content from "./Content.vue";
|
||||
import CloseIcon from './icons/CloseIcon.vue';
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const emit = defineEmits(['close']);
|
||||
const props = defineProps({
|
||||
event: {
|
||||
required: true,
|
||||
},
|
||||
registerUrl: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
heading: {
|
||||
required: false,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<label :for="field.key" class="p-0 block leading-none relative flex items-start">
|
||||
<input :id="field.key" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" />
|
||||
<span
|
||||
class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block top-0"></span>
|
||||
<span
|
||||
class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
|
||||
<label :for="innerId" class="p-0 block leading-none relative flex items-start">
|
||||
<input :id="innerId" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" />
|
||||
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block top-0"></span>
|
||||
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
|
||||
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base">
|
||||
<span v-text="field.description"></span>
|
||||
<span v-show="field.required" class="text-red-800">*</span>
|
||||
|
|
@ -17,7 +15,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed} from 'vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const props = defineProps({
|
||||
|
|
@ -36,8 +34,13 @@ const props = defineProps({
|
|||
typeof value.description === 'string' &&
|
||||
value.name.length > 0,
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-1 gap-2 mt-3">
|
||||
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`"
|
||||
class="block relative flex items-start">
|
||||
<input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option"
|
||||
class="peer absolute invisible" />
|
||||
<span
|
||||
class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
|
||||
<div class="grid grid-cols-1 gap-2 pt-3">
|
||||
<label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
|
||||
<input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
|
||||
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
|
||||
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block"></span>
|
||||
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
|
||||
</label>
|
||||
|
|
@ -17,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -38,8 +35,13 @@ const props = defineProps({
|
|||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
|
||||
typeof value.options === 'object',
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
<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" />
|
||||
<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"
|
||||
/>
|
||||
<field-label :name="field.name" :required="field.required"></field-label>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
|
|
@ -29,8 +36,13 @@ const props = defineProps({
|
|||
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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"
|
||||
:for="field.key">
|
||||
<select :name="field.key" :id="field.key"
|
||||
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
|
||||
v-model="inner">
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key">
|
||||
<select :name="field.key" :id="innerId" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full" v-model="inner">
|
||||
<option :value="null">-- kein --</option>
|
||||
<option v-for="(option, index) in field.options" :key="index" :value="option" v-text="option"></option>
|
||||
</select>
|
||||
|
|
@ -12,7 +9,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -33,8 +30,13 @@ const props = defineProps({
|
|||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
|
||||
typeof value.options === 'object',
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"
|
||||
:for="field.key">
|
||||
<select :id="field.key" v-model="inner" :disabled="disabled" :name="field.key"
|
||||
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full">
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key">
|
||||
<select
|
||||
:id="innerId"
|
||||
v-model="inner"
|
||||
:disabled="disabled"
|
||||
:name="field.key"
|
||||
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
|
||||
>
|
||||
<option :value="null">-- kein --</option>
|
||||
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
|
||||
</select>
|
||||
|
|
@ -11,7 +15,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import {computed, ref, watch} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -32,8 +36,13 @@ const props = defineProps({
|
|||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
|
||||
},
|
||||
payload: {},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,22 +1,35 @@
|
|||
<template>
|
||||
<div class="relative w-full flex flex-col items-center">
|
||||
<div class="relative w-full flex flex-col">
|
||||
<field-label :name="field.name" :required="false"></field-label>
|
||||
<div v-for="(member, index) in inner" :key="index">
|
||||
<label
|
||||
class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
|
||||
<input :id="`${field.key}-${index}`" v-model="member.id" :name="`${field.key}-${index}`" type="text"
|
||||
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" />
|
||||
</label>
|
||||
<div v-for="(member, index) in inner" class="flex space-x-2 mt-6" :key="index">
|
||||
<!--
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex mt-2">
|
||||
<input
|
||||
:id="`${field.key}-${index}`"
|
||||
v-model="member.id"
|
||||
:name="`${field.key}-${index}`"
|
||||
type="text"
|
||||
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="Mitgliedsnr" :required="true"></field-label>
|
||||
</label>
|
||||
-->
|
||||
<div class="w-full" v-for="(memberField, memberIndex) in memberFields" :key="field.key">
|
||||
<component :is="resolveComponentName(memberField)" :id="`${field.key}-${memberIndex}`" v-model="member[memberField.key]" :fields="fields" :payload="member" :field="memberField">
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none cursor-pointer rounded-lg mt-5"
|
||||
@click.prevent="addMember">Mitglied hinzufügen</div>
|
||||
<button type="button" class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none rounded-lg mt-5" @click.prevent="addMember">Mitglieder hinzufügen</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed, ref} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
import useFields from '../../composables/useFields.js';
|
||||
|
||||
const {resolveComponentName} = useFields();
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const props = defineProps({
|
||||
|
|
@ -28,10 +41,24 @@ const props = defineProps({
|
|||
required: true,
|
||||
validator: (value) => true,
|
||||
},
|
||||
fields: {
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const model = ref(null);
|
||||
|
||||
const defaultMember = computed(() => {
|
||||
var fields = {};
|
||||
memberFields.value.forEach((field) => (fields[field.key] = field.default));
|
||||
|
||||
return fields;
|
||||
});
|
||||
|
||||
const memberFields = computed(() => props.fields.filter((field) => field.for_members === true && field.nami_type === null));
|
||||
|
||||
function addMember() {
|
||||
inner.value.push({ id: '' });
|
||||
inner.value.push({id: '', ...defaultMember.value});
|
||||
}
|
||||
|
||||
const inner = computed(
|
||||
|
|
@ -39,6 +66,6 @@ const inner = computed(
|
|||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
},
|
||||
{ deep: true }
|
||||
{deep: true},
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<div class="grid grid-cols-1 gap-2 mt-3">
|
||||
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`"
|
||||
class="block relative flex items-center">
|
||||
<input :id="`${field.key}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option"
|
||||
class="peer absolute invisible" />
|
||||
<span
|
||||
class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
|
||||
<label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
|
||||
<input :id="`${innerId}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
|
||||
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
|
||||
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
|
||||
<span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
|
||||
</label>
|
||||
|
|
@ -17,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -38,8 +35,13 @@ const props = defineProps({
|
|||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
|
||||
typeof value.options === 'object',
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
<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="text" 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" />
|
||||
<input
|
||||
:id="innerId"
|
||||
v-model="inner"
|
||||
:name="field.key"
|
||||
type="text"
|
||||
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 {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -27,8 +33,13 @@ const props = defineProps({
|
|||
value.name.length > 0 &&
|
||||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
||||
<textarea :id="field.key" v-model="inner" :name="field.key" :rows="field.rows"
|
||||
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" />
|
||||
<textarea
|
||||
:id="innerId"
|
||||
v-model="inner"
|
||||
:name="field.key"
|
||||
:rows="field.rows"
|
||||
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 {computed} from 'vue';
|
||||
import FieldLabel from '../FieldLabel.vue';
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
|
@ -27,8 +32,13 @@ const props = defineProps({
|
|||
value.name.length > 0 &&
|
||||
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
|
||||
},
|
||||
id: {
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const innerId = computed(() => (props.id ? props.id : props.field.key));
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
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 FieldGroup from '../components/fields/Group.vue';
|
||||
import FieldCheckboxes from '../components/fields/Checkboxes.vue';
|
||||
import FieldCheckbox from '../components/fields/Checkbox.vue';
|
||||
import FieldNami from '../components/fields/Nami.vue';
|
||||
import FieldRadio from '../components/fields/Radio.vue';
|
||||
|
||||
export default function useFields(active, last) {
|
||||
function resolveComponentName(field) {
|
||||
return {
|
||||
TextField: FieldText,
|
||||
DateField: FieldDate,
|
||||
TextareaField: FieldTextarea,
|
||||
DropdownField: FieldDropdown,
|
||||
GroupField: FieldGroup,
|
||||
RadioField: FieldRadio,
|
||||
CheckboxesField: FieldCheckboxes,
|
||||
CheckboxField: FieldCheckbox,
|
||||
NamiField: FieldNami,
|
||||
}[field.type];
|
||||
}
|
||||
|
||||
return {resolveComponentName};
|
||||
}
|
||||
Loading…
Reference in New Issue