jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form overhaul: Container Form

Browse Source
This commit is contained in:
Stefan Zermatten
2023-05-16 20:37:32 +02:00
parent 53958fde92
commit 44703a5aa5
1 changed files with 57 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
app/imports/client/ui/properties/forms/ContainerForm.vue
View File

@@ -1,14 +1,45 @@
<template lang="html">
<div class="attribute-form">
<div class="layout justify-space-between wrap">
<text-field
ref="focusFirst"
label="Name"
:value="model.name"
:error-messages="errors.name"
@change="change('name', ...arguments)"
/>
<div>
<div class="container-form">
<v-row dense>
<v-col
cols="12"
md="6"
>
<text-field
label="Value"
suffix="gp"
type="number"
min="0"
hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
class="mx-1"
style="flex-basis: 300px;"
prepend-inner-icon="$vuetify.icons.two_coins"
:value="model.value"
:error-messages="errors.value"
@change="change('value', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="6"
>
<text-field
label="Weight"
suffix="lb"
type="number"
min="0"
class="mx-1"
style="flex-basis: 300px;"
prepend-inner-icon="$vuetify.icons.weight"
:value="model.weight"
:error-messages="errors.weight"
@change="change('weight', ...arguments)"
/>
</v-col>
<v-col
cols="12"
sm="6"
>
<smart-switch
label="Carried"
class="mx-3"
@@ -17,37 +48,22 @@
:error-messages="errors.carried"
@change="change('carried', ...arguments)"
/>
</div>
</div>
<div class="layout wrap">
<text-field
label="Value"
suffix="gp"
type="number"
min="0"
hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
class="mx-1"
style="flex-basis: 300px;"
prepend-inner-icon="$vuetify.icons.two_coins"
:value="model.value"
:error-messages="errors.value"
@change="change('value', ...arguments)"
/>
<text-field
label="Weight"
suffix="lb"
type="number"
min="0"
class="mx-1"
style="flex-basis: 300px;"
prepend-inner-icon="$vuetify.icons.weight"
:value="model.weight"
:error-messages="errors.weight"
@change="change('weight', ...arguments)"
/>
</div>
</v-col>
<v-col
cols="12"
sm="6"
>
<smart-switch
label="Contents are weightless"
:value="model.contentsWeightless"
:error-messages="errors.contentsWeightless"
@change="change('contentsWeightless', ...arguments)"
/>
</v-col>
</v-row>
<inline-computation-field
class="mt-4"
label="Description"
:model="model.description"
:error-messages="errors.description"
@@ -55,47 +71,16 @@
$emit('change', {path: ['description', ...path], value, ack})"
/>
<form-sections>
<form-section
v-if="$slots.children"
name="Children"
>
<slot name="children" />
</form-section>
<form-section name="Advanced">
<smart-combobox
label="Tags"
multiple
chips
deletable-chips
hint="Used to let slots find this property in a library, should otherwise be left blank"
:value="model.tags"
@change="change('tags', ...arguments)"
/>
<div class="layout justify-center">
<div>
<smart-switch
label="Contents are weightless"
:value="model.contentsWeightless"
:error-messages="errors.contentsWeightless"
@change="change('contentsWeightless', ...arguments)"
/>
</div>
</div>
</form-section>
<form-sections v-if="$slots.default">
<slot />
</form-sections>
</div>
</template>
<script lang="js">
import FormSection from '/imports/client/ui/properties/forms/shared/FormSection.vue';
import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
export default {
components: {
FormSection,
},
mixins: [propertyFormMixin],
}
</script>