mod fields

src/Eventform.ce.vue

@@ -120,7 +120,8 @@ import {camelCase} from 'change-case';
 import Navigation from './components/Navigation.vue';
 import useNav from './composables/useNav.js';
 import FieldText from './components/fields/Text.vue';
-import FieldSelect from './components/fields/Select.vue';
+import FieldTextarea from './components/fields/Textarea.vue';
+import FieldDropdown from './components/fields/Dropdown.vue';
 import FieldRadio from './components/fields/Radio.vue';
 import EditIcon from './components/icons/EditIcon.vue';
 import DeleteIcon from './components/icons/DeleteIcon.vue';
@@ -156,7 +157,8 @@ const {back, next, backable, nextable} = useNav(active, v.value.sections.length)
 function resolveComponentName(field) {
     return {
         TextField: FieldText,
-        SelectField: FieldSelect,
+        TextareaField: FieldTextarea,
+        DropdownField: FieldDropdown,
         RadioField: FieldRadio,
     }[field.type];
 }

src/components/fields/Textarea.vue

@@ -0,0 +1,41 @@
+<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"
+        />
+        <field-label :name="field.name" :required="field.required"></field-label>
+    </label>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => typeof value === 'string',
+    },
+    field: {
+        required: true,
+        validator: (value) =>
+            hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default']) &&
+            typeof value.required === 'boolean' &&
+            typeof value.key === 'string' &&
+            value.key.length > 0 &&
+            typeof value.name === 'string' &&
+            value.name.length > 0 &&
+            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>