Prevented dialog titles from overflowing
This commit is contained in:
Thaum Rystra
@@ -1,8 +1,8 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<div slot="toolbar">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Creature Form Dialog
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<div>
|
||||
<creature-form
|
||||
:model="model"
|
||||
|
||||
@@ -1,192 +1,269 @@
|
||||
<template>
|
||||
<dialog-base>
|
||||
<template slot="toolbar">New Character</template>
|
||||
<v-stepper v-model="step" class="no-shadow">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
New Character
|
||||
</v-toolbar-title>
|
||||
<v-stepper
|
||||
v-model="step"
|
||||
class="no-shadow"
|
||||
>
|
||||
<v-stepper-header class="no-shadow">
|
||||
<v-stepper-step :complete="step > 1" step="1">
|
||||
Name
|
||||
</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step :complete="step > 2" step="2">
|
||||
<v-stepper-step
|
||||
:complete="step > 1"
|
||||
step="1"
|
||||
>
|
||||
Name
|
||||
</v-stepper-step>
|
||||
<v-divider />
|
||||
<v-stepper-step
|
||||
:complete="step > 2"
|
||||
step="2"
|
||||
>
|
||||
Ability Scores
|
||||
</v-stepper-step>
|
||||
<v-divider></v-divider>
|
||||
<v-stepper-step :complete="step > 3" step="3">
|
||||
<v-divider />
|
||||
<v-stepper-step
|
||||
:complete="step > 3"
|
||||
step="3"
|
||||
>
|
||||
Class
|
||||
</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1">
|
||||
<v-text-field label="Name" v-model="name"></v-text-field>
|
||||
<v-text-field label="Gender" v-model="gender"></v-text-field>
|
||||
<v-text-field label="Alignment" v-model="alignment" @keydown.tab="step++"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="name"
|
||||
label="Name"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="gender"
|
||||
label="Gender"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="alignment"
|
||||
label="Alignment"
|
||||
@keydown.tab="step++"
|
||||
/>
|
||||
</v-stepper-content>
|
||||
<v-stepper-content step="2">
|
||||
<v-text-field label="Race" v-model="race"></v-text-field>
|
||||
<v-layout row justify-center align-center>
|
||||
<h3>Point Cost:</h3>
|
||||
<h1 class="ml-2" :class="cost > 27 ? 'error--text' : ''">{{cost}}</h1>
|
||||
<span class="ml-1">/27</span>
|
||||
</v-layout>
|
||||
<table class="point-buy-table mt-2">
|
||||
<thead>
|
||||
<tr class="font-weight-bold">
|
||||
<td></td>
|
||||
<td>Base Values</td>
|
||||
<td>Race Bonus</td>
|
||||
<td>Score</td>
|
||||
<td>Modifier</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>Strength</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseStrength"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="strengthBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseStrength + strengthBonus}}</td>
|
||||
<td>{{mod(baseStrength + strengthBonus)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dexterity</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseDexterity"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="dexterityBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseDexterity + dexterityBonus}}</td>
|
||||
<td>{{mod(baseDexterity + dexterityBonus)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Constitution</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseConstitution"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="constitutionBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseConstitution + constitutionBonus}}</td>
|
||||
<td>{{mod(baseConstitution + constitutionBonus)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Intelligence</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseIntelligence"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="intelligenceBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseIntelligence + intelligenceBonus}}</td>
|
||||
<td>{{mod(baseIntelligence + intelligenceBonus)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wisdom</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseWisdom"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="wisdomBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseWisdom + wisdomBonus}}</td>
|
||||
<td>{{mod(baseWisdom + wisdomBonus)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charisma</td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="baseCharisma"
|
||||
min="8"
|
||||
max="15">
|
||||
</v-text-field></td>
|
||||
<td><v-text-field
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
v-model.number="charismaBonus">
|
||||
</v-text-field></td>
|
||||
<td>{{baseCharisma + charismaBonus}}</td>
|
||||
<td>{{mod(baseCharisma + charismaBonus)}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<v-text-field
|
||||
v-model="race"
|
||||
label="Race"
|
||||
/>
|
||||
<v-layout
|
||||
row
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<h3>Point Cost:</h3>
|
||||
<h1
|
||||
class="ml-2"
|
||||
:class="cost > 27 ? 'error--text' : ''"
|
||||
>
|
||||
{{ cost }}
|
||||
</h1>
|
||||
<span class="ml-1">/27</span>
|
||||
</v-layout>
|
||||
<table class="point-buy-table mt-2">
|
||||
<thead>
|
||||
<tr class="font-weight-bold">
|
||||
<td />
|
||||
<td>Base Values</td>
|
||||
<td>Race Bonus</td>
|
||||
<td>Score</td>
|
||||
<td>Modifier</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>Strength</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseStrength"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="strengthBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseStrength + strengthBonus }}</td>
|
||||
<td>{{ mod(baseStrength + strengthBonus) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dexterity</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseDexterity"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="dexterityBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseDexterity + dexterityBonus }}</td>
|
||||
<td>{{ mod(baseDexterity + dexterityBonus) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Constitution</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseConstitution"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="constitutionBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseConstitution + constitutionBonus }}</td>
|
||||
<td>{{ mod(baseConstitution + constitutionBonus) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Intelligence</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseIntelligence"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="intelligenceBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseIntelligence + intelligenceBonus }}</td>
|
||||
<td>{{ mod(baseIntelligence + intelligenceBonus) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wisdom</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseWisdom"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="wisdomBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseWisdom + wisdomBonus }}</td>
|
||||
<td>{{ mod(baseWisdom + wisdomBonus) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charisma</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="baseCharisma"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
min="8"
|
||||
max="15"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model.number="charismaBonus"
|
||||
type="number"
|
||||
height="20"
|
||||
reverse
|
||||
/>
|
||||
</td>
|
||||
<td>{{ baseCharisma + charismaBonus }}</td>
|
||||
<td>{{ mod(baseCharisma + charismaBonus) }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</v-stepper-content>
|
||||
<v-stepper-content step="3">
|
||||
<v-text-field
|
||||
label="Class"
|
||||
v-model="cls"
|
||||
>
|
||||
v-model="cls"
|
||||
label="Class"
|
||||
/>
|
||||
<v-select
|
||||
v-model="hitDice"
|
||||
:items="hitDiceItems"
|
||||
label="Hit Dice"
|
||||
/>
|
||||
</v-text-field>
|
||||
<v-select
|
||||
:items="hitDiceItems"
|
||||
label="Hit Dice"
|
||||
v-model="hitDice">
|
||||
</v-select>
|
||||
</v-text-field>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
<template slot="actions">
|
||||
<v-btn flat @click="$emit('pop')">Cancel</v-btn>
|
||||
<v-btn flat @click="step--" v-if="step > 1">Back</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="accent" @click="step++" v-if="step < 3">Next</v-btn>
|
||||
<v-btn
|
||||
:flat="step < 3"
|
||||
:color="step < 3? '' : 'accent'"
|
||||
@click="submit">
|
||||
Create
|
||||
</v-btn>
|
||||
flat
|
||||
@click="$emit('pop')"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="step > 1"
|
||||
flat
|
||||
@click="step--"
|
||||
>
|
||||
Back
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-if="step < 3"
|
||||
color="accent"
|
||||
@click="step++"
|
||||
>
|
||||
Next
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:flat="step < 3"
|
||||
:color="step < 3? '' : 'accent'"
|
||||
@click="submit"
|
||||
>
|
||||
Create
|
||||
</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
|
||||
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
||||
const getCost = function(score){
|
||||
const costs = {
|
||||
8: 0,
|
||||
@@ -205,12 +282,15 @@
|
||||
}
|
||||
};
|
||||
export default {
|
||||
components: {
|
||||
DialogBase,
|
||||
},
|
||||
data(){return {
|
||||
step: 1,
|
||||
name: "New Character",
|
||||
gender: "",
|
||||
alignment: "",
|
||||
race: "Race",
|
||||
name: 'New Character',
|
||||
gender: '',
|
||||
alignment: '',
|
||||
race: 'Race',
|
||||
baseStrength: 10,
|
||||
baseDexterity: 10,
|
||||
baseConstitution: 10,
|
||||
@@ -223,10 +303,23 @@
|
||||
intelligenceBonus: 0,
|
||||
wisdomBonus: 0,
|
||||
charismaBonus: 0,
|
||||
hitDiceItems: ["d6", "d8", "d10", "d12"],
|
||||
hitDice: "d8",
|
||||
cls: "Class",
|
||||
hitDiceItems: ['d6', 'd8', 'd10', 'd12'],
|
||||
hitDice: 'd8',
|
||||
cls: 'Class',
|
||||
}},
|
||||
computed: {
|
||||
cost(){
|
||||
return [
|
||||
this.baseStrength,
|
||||
this.baseDexterity,
|
||||
this.baseConstitution,
|
||||
this.baseIntelligence,
|
||||
this.baseWisdom,
|
||||
this.baseCharisma,
|
||||
].map(getCost)
|
||||
.reduce((memo, score) => memo + score, 0);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
mod(score){
|
||||
let mod = Math.floor((score - 10) / 2);
|
||||
@@ -257,25 +350,9 @@
|
||||
hitDice: this.hitDice,
|
||||
cls: this.cls,
|
||||
};
|
||||
this.$emit("pop", char);
|
||||
this.$emit('pop', char);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cost(){
|
||||
return [
|
||||
this.baseStrength,
|
||||
this.baseDexterity,
|
||||
this.baseConstitution,
|
||||
this.baseIntelligence,
|
||||
this.baseWisdom,
|
||||
this.baseCharisma,
|
||||
].map(getCost)
|
||||
.reduce((memo, score) => memo + score, 0);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DialogBase,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<div slot="toolbar">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Delete Character
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<div>
|
||||
<p v-if="name">
|
||||
Type "{{ name }}" to permanenetly delete the character
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
:type="model.type"
|
||||
class="mr-2"
|
||||
/>
|
||||
<div class="title">
|
||||
<v-toolbar-title class="title">
|
||||
{{ model.name || getPropertyName(model.type) }}
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-menu
|
||||
v-if="editing"
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<div slot="toolbar">Add from library</div>
|
||||
<library-and-node
|
||||
slot="unwrapped-content"
|
||||
@selected="val => node = val"
|
||||
style="height: 100%;"
|
||||
/>
|
||||
<template slot="actions">
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack', node)"
|
||||
color="primary"
|
||||
>Insert</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
<dialog-base>
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Add from library
|
||||
</v-toolbar-title>
|
||||
<library-and-node
|
||||
slot="unwrapped-content"
|
||||
style="height: 100%;"
|
||||
@selected="val => node = val"
|
||||
/>
|
||||
<template slot="actions">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
flat
|
||||
color="primary"
|
||||
@click="$store.dispatch('popDialogStack', node)"
|
||||
>
|
||||
Insert
|
||||
</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
<template lang="html">
|
||||
<dialog-base :override-back-button="() => $emit('back')">
|
||||
<div slot="toolbar">Add {{propertyName}}</div>
|
||||
<component
|
||||
v-if="type"
|
||||
:is="type"
|
||||
class="creature-property-form"
|
||||
:model="model"
|
||||
:errors="errors"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', model)"
|
||||
>Insert</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
<dialog-base :override-back-button="() => $emit('back')">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Add {{ propertyName }}
|
||||
</v-toolbar-title>
|
||||
<component
|
||||
:is="type"
|
||||
v-if="type"
|
||||
class="creature-property-form"
|
||||
:model="model"
|
||||
:errors="errors"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', model)"
|
||||
>
|
||||
Insert
|
||||
</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -35,6 +39,10 @@ export default {
|
||||
DialogBase,
|
||||
},
|
||||
mixins: [schemaFormMixin],
|
||||
props: {
|
||||
propertyName: String,
|
||||
type: String,
|
||||
},
|
||||
data(){return {
|
||||
model: {
|
||||
type: this.type,
|
||||
@@ -42,10 +50,6 @@ export default {
|
||||
schema: undefined,
|
||||
validationContext: undefined,
|
||||
};},
|
||||
props: {
|
||||
propertyName: String,
|
||||
type: String,
|
||||
},
|
||||
watch: {
|
||||
type(newType){
|
||||
if (!newType) return;
|
||||
|
||||
@@ -1,28 +1,35 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<div slot="toolbar">
|
||||
Delete {{typeName}}
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="name">
|
||||
Type "{{name}}" to permanenetly delete
|
||||
</p>
|
||||
<v-text-field v-if="name" v-model="inputName"/>
|
||||
<div class="layout row justify-center">
|
||||
<v-btn
|
||||
v-show="nameMatch"
|
||||
class="primary"
|
||||
@click="$store.dispatch('popDialogStack', true);"
|
||||
>Delete forever</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer slot="actions"/>
|
||||
<v-btn
|
||||
slot="actions"
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack')"
|
||||
>Cancel</v-btn>
|
||||
</dialog-base>
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Delete {{ typeName }}
|
||||
</v-toolbar-title>
|
||||
<div>
|
||||
<p v-if="name">
|
||||
Type "{{ name }}" to permanenetly delete
|
||||
</p>
|
||||
<v-text-field
|
||||
v-if="name"
|
||||
v-model="inputName"
|
||||
/>
|
||||
<div class="layout row justify-center">
|
||||
<v-btn
|
||||
v-show="nameMatch"
|
||||
class="primary"
|
||||
@click="$store.dispatch('popDialogStack', true);"
|
||||
>
|
||||
Delete forever
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer slot="actions" />
|
||||
<v-btn
|
||||
slot="actions"
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack')"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,22 +1,34 @@
|
||||
<template>
|
||||
<dialog-base>
|
||||
<div slot="toolbar">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Test Dialog
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<div>
|
||||
<v-btn @click="openDialog('btn')" data-id="btn">Open Dialog</v-btn>
|
||||
<v-btn fab @click="openDialog('fab')" data-id="fab" color="green">Open Dialog</v-btn>
|
||||
<v-btn
|
||||
data-id="btn"
|
||||
@click="openDialog('btn')"
|
||||
>
|
||||
Open Dialog
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
data-id="fab"
|
||||
color="green"
|
||||
@click="openDialog('fab')"
|
||||
>
|
||||
Open Dialog
|
||||
</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "/imports/ui/vuexStore.js";
|
||||
import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
|
||||
import store from '/imports/ui/vuexStore.js';
|
||||
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
||||
const component = {
|
||||
methods: {
|
||||
openDialog(elementId){
|
||||
store.commit("pushDialogStack", {
|
||||
store.commit('pushDialogStack', {
|
||||
component,
|
||||
elementId,
|
||||
});
|
||||
|
||||
@@ -1,39 +1,44 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<div>
|
||||
New Library
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<text-field label="name" :value="library.name" @change="nameChanged" :debounce-time="0"/>
|
||||
</template>
|
||||
<template slot="actions">
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', library)"
|
||||
>
|
||||
Insert Library
|
||||
</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<v-toolbar-title>
|
||||
New Library
|
||||
</v-toolbar-title>
|
||||
</template>
|
||||
<template>
|
||||
<text-field
|
||||
label="name"
|
||||
:value="library.name"
|
||||
:debounce-time="0"
|
||||
@change="nameChanged"
|
||||
/>
|
||||
</template>
|
||||
<template slot="actions">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', library)"
|
||||
>
|
||||
Insert Library
|
||||
</v-btn>
|
||||
</template>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DialogBase,
|
||||
},
|
||||
data(){ return {
|
||||
library: {
|
||||
name: 'New Library',
|
||||
},
|
||||
valid: true,
|
||||
}},
|
||||
components: {
|
||||
DialogBase,
|
||||
},
|
||||
methods: {
|
||||
nameChanged(val, ack){
|
||||
if (val){
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<div>
|
||||
<v-toolbar-title>
|
||||
{{ model && model.name }}
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
flat
|
||||
|
||||
@@ -1,35 +1,44 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<property-icon :type="model.type" class="mr-2"/>
|
||||
<div class="title">
|
||||
{{getPropertyName(model.type)}}
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<v-btn icon flat @click="remove">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<component
|
||||
v-if="model"
|
||||
class="library-node-form"
|
||||
stored
|
||||
:is="model.type"
|
||||
:model="model"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack')"
|
||||
>Done</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
<dialog-base>
|
||||
<template slot="toolbar">
|
||||
<property-icon
|
||||
:type="model.type"
|
||||
class="mr-2"
|
||||
/>
|
||||
<v-toolbar-title class="title">
|
||||
{{ getPropertyName(model.type) }}
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
@click="remove"
|
||||
>
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<component
|
||||
:is="model.type"
|
||||
v-if="model"
|
||||
class="library-node-form"
|
||||
stored
|
||||
:model="model"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
@click="$store.dispatch('popDialogStack')"
|
||||
>
|
||||
Done
|
||||
</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,28 +1,32 @@
|
||||
<template lang="html">
|
||||
<dialog-base :override-back-button="() => $emit('back')">
|
||||
<div slot="toolbar">Add {{propertyName}}</div>
|
||||
<component
|
||||
v-if="type"
|
||||
stored
|
||||
:is="type"
|
||||
class="library-node-form"
|
||||
:model="model"
|
||||
:errors="errors"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', model)"
|
||||
>Insert</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
<dialog-base :override-back-button="() => $emit('back')">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Add {{ propertyName }}
|
||||
</v-toolbar-title>
|
||||
<component
|
||||
:is="type"
|
||||
v-if="type"
|
||||
stored
|
||||
class="library-node-form"
|
||||
:model="model"
|
||||
:errors="errors"
|
||||
@change="change"
|
||||
@push="push"
|
||||
@pull="pull"
|
||||
/>
|
||||
<div
|
||||
slot="actions"
|
||||
class="layout row justify-end"
|
||||
>
|
||||
<v-btn
|
||||
flat
|
||||
:disabled="!valid"
|
||||
@click="$store.dispatch('popDialogStack', model)"
|
||||
>
|
||||
Insert
|
||||
</v-btn>
|
||||
</div>
|
||||
</dialog-base>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -37,6 +41,10 @@ export default {
|
||||
DialogBase,
|
||||
},
|
||||
mixins: [schemaFormMixin],
|
||||
props: {
|
||||
propertyName: String,
|
||||
type: String,
|
||||
},
|
||||
data(){return {
|
||||
model: {
|
||||
type: this.type,
|
||||
@@ -44,10 +52,6 @@ export default {
|
||||
schema: undefined,
|
||||
validationContext: undefined,
|
||||
};},
|
||||
props: {
|
||||
propertyName: String,
|
||||
type: String,
|
||||
},
|
||||
watch: {
|
||||
type(newType){
|
||||
if (!newType) return;
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div slot="toolbar">
|
||||
Friends
|
||||
</div>
|
||||
<v-sheet>
|
||||
<h1>
|
||||
Friends
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div slot="toolbar">
|
||||
Sign Up
|
||||
</div>
|
||||
<v-form
|
||||
ref="form"
|
||||
class="mt-4"
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<template slot="toolbar">
|
||||
<span>
|
||||
<v-toolbar-title>
|
||||
{{ model.name }}
|
||||
</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</template>
|
||||
<v-card-text v-if="model.summary">
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
<template lang="html">
|
||||
<toolbar-card :color="model.color" @toolbarclick="clickContainer(model._id)" :data-id="model._id">
|
||||
<template slot="toolbar">
|
||||
<span>
|
||||
{{model.name}}
|
||||
</span>
|
||||
<v-spacer/>
|
||||
</template>
|
||||
<creature-properties-tree
|
||||
:root="{collection: 'creatureProperties', id: model._id}"
|
||||
:filter="{type: {$in: ['container', 'item', 'folder']}}"
|
||||
@selected="e => clickProperty(e)"
|
||||
:organize="organize"
|
||||
group="inventory"
|
||||
/>
|
||||
<toolbar-card
|
||||
:color="model.color"
|
||||
:data-id="model._id"
|
||||
@toolbarclick="clickContainer(model._id)"
|
||||
>
|
||||
<template slot="toolbar">
|
||||
<v-toolbar-title>
|
||||
{{ model.name }}
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</template>
|
||||
<creature-properties-tree
|
||||
:root="{collection: 'creatureProperties', id: model._id}"
|
||||
:filter="{type: {$in: ['container', 'item', 'folder']}}"
|
||||
:organize="organize"
|
||||
group="inventory"
|
||||
@selected="e => clickProperty(e)"
|
||||
/>
|
||||
</toolbar-card>
|
||||
</template>
|
||||
|
||||
@@ -22,14 +26,14 @@ import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
|
||||
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
model: Object,
|
||||
organize: Boolean,
|
||||
},
|
||||
components: {
|
||||
ToolbarCard,
|
||||
CreaturePropertiesTree,
|
||||
},
|
||||
props: {
|
||||
model: Object,
|
||||
organize: Boolean,
|
||||
},
|
||||
methods: {
|
||||
clickContainer(_id){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
<template lang="html">
|
||||
<toolbar-card :color="model.color" @toolbarclick="clickSpellList(model._id)" :data-id="model._id">
|
||||
<template slot="toolbar">
|
||||
<span>
|
||||
{{model.name}}
|
||||
</span>
|
||||
<v-spacer/>
|
||||
</template>
|
||||
<creature-properties-tree
|
||||
:root="{collection: 'creatureProperties', id: model._id}"
|
||||
:filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
|
||||
@selected="e => clickProperty(e)"
|
||||
:organize="organize"
|
||||
group="spells"
|
||||
/>
|
||||
<toolbar-card
|
||||
:color="model.color"
|
||||
:data-id="model._id"
|
||||
@toolbarclick="clickSpellList(model._id)"
|
||||
>
|
||||
<template slot="toolbar">
|
||||
<v-toolbar-title>
|
||||
{{ model.name }}
|
||||
</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</template>
|
||||
<creature-properties-tree
|
||||
:root="{collection: 'creatureProperties', id: model._id}"
|
||||
:filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
|
||||
:organize="organize"
|
||||
group="spells"
|
||||
@selected="e => clickProperty(e)"
|
||||
/>
|
||||
</toolbar-card>
|
||||
</template>
|
||||
|
||||
@@ -22,14 +26,14 @@ import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
|
||||
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
model: Object,
|
||||
organize: Boolean,
|
||||
},
|
||||
components: {
|
||||
ToolbarCard,
|
||||
CreaturePropertiesTree,
|
||||
},
|
||||
props: {
|
||||
model: Object,
|
||||
organize: Boolean,
|
||||
},
|
||||
methods: {
|
||||
clickSpellList(_id){
|
||||
this.$store.commit('pushDialogStack', {
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
<template lang="html">
|
||||
<transition-group name="slide">
|
||||
<dialog-base v-show="!value" class="step-1" key="left">
|
||||
<div slot="toolbar">Add Library Content</div>
|
||||
<property-selector @select="property => $emit('input', property)"/>
|
||||
</dialog-base>
|
||||
<div
|
||||
v-show="value"
|
||||
class="step-2"
|
||||
style="height: 100%;"
|
||||
key="right"
|
||||
>
|
||||
<slot/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<transition-group name="slide">
|
||||
<dialog-base
|
||||
v-show="!value"
|
||||
key="left"
|
||||
class="step-1"
|
||||
>
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Add Library Content
|
||||
</v-toolbar-title>
|
||||
<property-selector @select="property => $emit('input', property)" />
|
||||
</dialog-base>
|
||||
<div
|
||||
v-show="value"
|
||||
key="right"
|
||||
class="step-2"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</transition-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,15 +26,15 @@ import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
||||
import PropertySelector from '/imports/ui/properties/shared/PropertySelector.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DialogBase,
|
||||
PropertySelector,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DialogBase,
|
||||
PropertySelector,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template lang="html">
|
||||
<dialog-base>
|
||||
<div slot="toolbar">
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Sharing
|
||||
</div>
|
||||
</v-toolbar-title>
|
||||
<div v-if="model">
|
||||
<smart-select
|
||||
label="Who can view"
|
||||
|
||||
Reference in New Issue
Block a user