silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add container classes

This commit is contained in:
philipp lang 2024-06-17 00:01:21 +02:00
parent ce0d56f748
commit 4da70d94b9
8 changed files with 85 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Box.vue
View File

@ -6,7 +6,7 @@
v-text="step"
v-if="step"
></div>
<div class="flex flex-row items-center rounded form-group shadow-sm group" :class="[colors[type].container, type, sizes[size].container]">
<div class="flex flex-row items-center rounded form-group shadow-sm group" :class="[colors[type].container, type, 'box', sizes[size].container]">
<div class="flex-grow text-sm" :class="colors[type].text">
<slot />
</div>

2
src/components/FieldLabel.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
<span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm group-[.info]:bg-blue-200" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
<span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
<hint :value="hint" class="ml-2" v-if="hint" small></hint>
<button

17
src/components/fields/Checkboxes.vue
View File

@ -1,21 +1,10 @@
<template>
<div class="relative">
<field-label :name="field.name" :required="false" :hint="field.hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1">
<div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
<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>
</div>
</div>
<v-checkboxes :intro="field.intro" :options="field.options" :label="field.name" :name="field.key" :id="field.key" :hint="field.hint" v-model="inner"></v-checkboxes>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
import VCheckboxes from './VCheckboxes.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
@ -39,8 +28,6 @@ const props = defineProps({
},
});
const innerId = computed(() => (props.id ? props.id : props.field.key));
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),

18
src/components/fields/Nami.vue
View File

@ -89,8 +89,8 @@
"weiter".
</p>
<div class="grid gap-2 mt-6">
<accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="success">
<div class="mt-2" :class="containerClasses">
<accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info">
<div class="mt-2" :class="containerClassesSm">
<template v-for="(memberField, memberIndex) in memberFields">
<v-checkbox
v-if="memberField.type === 'CheckboxField'"
@ -149,6 +149,17 @@
:class="colClassesForField(memberField)"
type="number"
></v-text>
<v-checkboxes
v-if="memberField.type === 'CheckboxesField'"
:intro="memberField.intro"
:options="memberField.options"
:label="memberField.name"
:name="memberField.key"
:id="memberField.key"
:hint="memberField.hint"
:class="colClassesForField(memberField)"
v-model="member[memberField.key]"
></v-checkboxes>
</template>
</div>
</accordion>
@ -170,6 +181,7 @@
<script setup>
import {computed, ref, warn} from 'vue';
import VDropdown from './VDropdown.vue';
import VCheckboxes from './VCheckboxes.vue';
import VText from './VText.vue';
import useFields from '../../composables/useFieldsWithoutNami.js';
import Info from '../Info.vue';
@ -183,7 +195,7 @@ import Accordion from '../Accordion.vue';
import useColumns from '../../composables/useColumns.js';
const eventMeta = useEventMeta();
const {colClassesForField, containerClasses} = useColumns();
const {colClassesForField, containerClassesSm} = useColumns();
const {login, logout, user, loginData, searchData, searchForMember, resetSearchData, searchResults, searching} = useAdremaLogin();
if (user.value !== null) {

7
src/components/fields/Text.vue
View File

@ -1,5 +1,5 @@
<template>
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="innerId" :hint="field.hint" v-model="inner"></v-text>
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text>
</template>
<script setup>
@ -23,13 +23,8 @@ 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),

60
src/components/fields/VCheckboxes.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="relative">
<field-label :name="label" :required="false" :hint="hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1 group-[.box]:gap-0">
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
<label v-for="(option, index) in options" :key="index" :for="`${id}-${index}`" class="block relative flex items-start">
<input :id="`${id}-${index}`" v-model="inner" type="checkbox" :name="name" :value="option" class="peer absolute invisible" />
<span
class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
></span>
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] 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" v-text="option"></span>
</label>
</div>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
},
name: {
required: true,
type: String,
},
id: {
required: true,
type: String,
},
label: {
required: true,
type: String,
},
options: {
required: true,
type: Object,
},
hint: {
required: false,
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
intro: {
required: false,
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

2
src/components/fields/VText.vue
View File

@ -14,7 +14,7 @@
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<hint :value="hint"></hint>
</div>
<field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
<field-label :name="label" :required="required"></field-label>
</label>
</template>

5
src/composables/useColumns.js
View File

@ -28,7 +28,9 @@ export default function useColumns() {
},
};
const containerClasses = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 items-start';
const containerClassesDefault = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 items-start';
const containerClassesSm = containerClassesDefault + ' gap-4';
const containerClasses = containerClassesDefault + ' gap-6';
function colClassesForField(field) {
return {
@ -42,5 +44,6 @@ export default function useColumns() {
colClasses,
colClassesForField,
containerClasses,
containerClassesSm,
};
}