Form overhaul: Proficiency Form

This commit is contained in:
Stefan Zermatten
2023-05-16 21:24:21 +02:00
parent 9f01b85df3
commit bf6fb358e6
2 changed files with 37 additions and 45 deletions

View File

@@ -75,7 +75,7 @@
label="Stats" label="Stats"
class="mr-2" class="mr-2"
multiple multiple
chips small-chips
deletable-chips deletable-chips
hint="Which stats will this effect apply to" hint="Which stats will this effect apply to"
persistent-hint persistent-hint

View File

@@ -1,49 +1,41 @@
<template lang="html"> <template lang="html">
<div> <div class="proficiency-form">
<text-field <v-row dense>
ref="focusFirst" <v-col
label="Name" cols="12"
:value="model.name" md="6"
:error-messages="errors.name" >
@change="change('name', ...arguments)" <smart-combobox
/> label="Skills"
<div class="layout wrap justify-start proficiency-form"> class="mr-2"
<smart-combobox multiple
label="Skills" small-chips
class="mr-2" deletable-chips
multiple hint="Which skills does this proficiency apply to"
chips :value="model.stats"
deletable-chips :items="skillList"
hint="Which skills does this proficiency apply to" :error-messages="errors.stats"
:value="model.stats" @change="change('stats', ...arguments)"
:items="skillList" />
:error-messages="errors.stats" </v-col>
@change="change('stats', ...arguments)" <v-col
/> cols="12"
<proficiency-select md="6"
label="Proficiency" >
style="flex-basis: 300px;" <proficiency-select
:clearable="false" label="Proficiency"
:value="model.value" style="flex-basis: 300px;"
@change="change('value', ...arguments)" :clearable="false"
/> :value="model.value"
</div> @change="change('value', ...arguments)"
<smart-combobox />
label="Tags" </v-col>
multiple </v-row>
chips <form-sections
deletable-chips v-if="$slots.default"
hint="Used to let slots find this property in a library, should otherwise be left blank"
:value="model.tags"
@change="change('tags', ...arguments)"
/>
<form-section
v-if="$slots.children"
name="Children"
standalone
> >
<slot name="children" /> <slot />
</form-section> </form-sections>
</div> </div>
</template> </template>