Removed unused story files
This commit is contained in:
@@ -1,26 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-layout justify-center>
|
||||
<color-picker v-model="color"/>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorPicker from '/imports/ui/components/ColorPicker.vue';
|
||||
|
||||
export default {
|
||||
data(){ return {
|
||||
color: '#CE93D8',
|
||||
}},
|
||||
components: {
|
||||
ColorPicker,
|
||||
},
|
||||
watch: {
|
||||
color(newColor){
|
||||
console.log(`%c${newColor}`, `background: ${newColor};`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
<template lang="html">
|
||||
<column-layout>
|
||||
<div v-for="(height, n) in cardHeights" :key="n">
|
||||
<v-card :height="height"/>
|
||||
</div >
|
||||
</column-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColumnLayout from "/imports/ui/components/ColumnLayout.vue";
|
||||
import { _ } from "meteor/underscore";
|
||||
export default {
|
||||
dontWrap: true,
|
||||
data(){return{
|
||||
cardHeights: _.times(12, n => `${_.random(100, 500)}px`),
|
||||
}},
|
||||
components: {
|
||||
ColumnLayout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,16 +0,0 @@
|
||||
<template lang="html">
|
||||
<icon-search/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconSearch from '/imports/ui/components/IconSearch.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconSearch,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-container grid-list-lg>
|
||||
<v-layout row wrap align-center>
|
||||
|
||||
<v-flex xs6>
|
||||
<text-field
|
||||
:value="value1"
|
||||
@change="value1Change"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<div class="flex">
|
||||
{{value1}}
|
||||
</div>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs6>
|
||||
<text-field
|
||||
:value="changingValue"
|
||||
@change="(val, ack) => {changingValue = val; ack()}"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
{{changingValue}}
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs6>
|
||||
<text-area
|
||||
:value="value2"
|
||||
@change="value2Change"
|
||||
label="text-area"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
{{value2}}
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs6>
|
||||
<smart-select
|
||||
:value="value3"
|
||||
:items="['meep', 'moop', 'maap']"
|
||||
label="select"
|
||||
@change="(val, ack) => {setTimeout(() => {value3 = val; ack()}, 700)}"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
{{value3}}
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){ return {
|
||||
value1: 'Five letters minimum, always trimmed',
|
||||
value2: 'Takes 2s to write',
|
||||
value3: 'meep',
|
||||
changingValue: `Changes every 3s ${Math.random().toFixed(4)}`,
|
||||
}},
|
||||
methods: {
|
||||
value1Change(val, ack){
|
||||
let error;
|
||||
val = val.trim();
|
||||
if (!val || val.length < 5){
|
||||
error = "Too short";
|
||||
} else {
|
||||
this.value1 = val;
|
||||
}
|
||||
ack(error);
|
||||
},
|
||||
value2Change(val, ack){
|
||||
setTimeout(() => {
|
||||
this.value2 = val;
|
||||
ack();
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
this.changingValue = `Changes every 3s ${Math.random().toFixed(4)}`;
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.layout {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-card-text>
|
||||
<tree-node-list :children="children" group="example-group" :show-empty="false"/>
|
||||
</v-card-text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TreeNodeList,
|
||||
},
|
||||
data(){ return {
|
||||
children: [
|
||||
{name: 'Point buy', children:[
|
||||
{name: 'Strength 14', children:[]},
|
||||
{name: 'Dexterity 8', children:[]},
|
||||
{name: 'Constitution 14', children:[]},
|
||||
{name: 'Intelligence 8', children:[]},
|
||||
{name: 'Wisdom 15', children:[]},
|
||||
{name: 'Charisma 12', children:[]},
|
||||
]},
|
||||
{name: 'Hermit', children:[
|
||||
{name: 'Discovery', children:[]},
|
||||
]},
|
||||
{name: 'Hill Dwarf', children: [
|
||||
{name: 'Dwarven combat training', children:[]},
|
||||
{name: 'Dwarven resilience', children:[]},
|
||||
{name: 'Dwarven toughness', children:[]},
|
||||
{name: 'Stone cutting', children:[]},
|
||||
]},
|
||||
{name: 'Cleric', children:[
|
||||
{name: 'Level 1', children:[
|
||||
{name: 'Spellcasting', children:[
|
||||
{name: 'Light', children:[]},
|
||||
{name: 'Sacred Flame', children:[]},
|
||||
{name: 'Thaumaturgy', children:[]},
|
||||
]},
|
||||
{name: 'Divine domain: Tempest', children:[]},
|
||||
]},
|
||||
{name: 'Level 2', children:[]},
|
||||
{name: 'Level 3', children:[]},
|
||||
{name: 'Level 4', children:[]},
|
||||
{name: 'Level 5', children:[]},
|
||||
]},
|
||||
],
|
||||
otherChildren: [],
|
||||
drag: false,
|
||||
}},
|
||||
computed: {
|
||||
dataString(){
|
||||
return JSON.stringify(this.children, null, 2);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<dialog-base>
|
||||
<v-toolbar-title slot="toolbar">
|
||||
Test Dialog
|
||||
</v-toolbar-title>
|
||||
<div>
|
||||
<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';
|
||||
const component = {
|
||||
methods: {
|
||||
openDialog(elementId){
|
||||
store.commit('pushDialogStack', {
|
||||
component,
|
||||
elementId,
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DialogBase,
|
||||
},
|
||||
};
|
||||
export default component;
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-card-text>
|
||||
<v-layout align-center justify-center>
|
||||
<v-btn @click="openDialog('btn')" data-id="btn">
|
||||
Open Dialog
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogBaseStory from '/imports/ui/dialogStack/DialogBase.Story.vue';
|
||||
export default {
|
||||
methods: {
|
||||
openDialog(elementId){
|
||||
this.$store.commit("pushDialogStack", {
|
||||
// DO NOT store your component in the store like this outside the storybook
|
||||
// You should register the dialog component in DialogComponentIndex.js
|
||||
// and commit it to the store as a string: "dialog-base-story"
|
||||
component: DialogBaseStory,
|
||||
elementId,
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list>
|
||||
<template v-for="(ability, index) in abilities">
|
||||
<v-divider v-if="index !== 0"/>
|
||||
<ability-list-tile
|
||||
:key="ability.name"
|
||||
:data-id="`${_uid}-${ability.name}`"
|
||||
v-bind="ability"
|
||||
@click="click({ability, elementId: `${_uid}-${ability.name}`})"
|
||||
/>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
|
||||
import store from "/imports/ui/vuexStore.js";
|
||||
|
||||
export default {
|
||||
data(){ return{
|
||||
abilities: [
|
||||
{
|
||||
name: "Strength",
|
||||
value: 8,
|
||||
mod: -1,
|
||||
effects: [
|
||||
{
|
||||
name: "Ghost Touch",
|
||||
operation: "add",
|
||||
result: -2,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Base",
|
||||
operation: "base",
|
||||
result: 15,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Multiply",
|
||||
operation: "mul",
|
||||
result: 1.5,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Min",
|
||||
operation: "min",
|
||||
result: 8,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Advantage",
|
||||
operation: "advantage",
|
||||
result: 1,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Disadvantage",
|
||||
operation: "disadvantage",
|
||||
result: 1,
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Passive",
|
||||
operation: "passiveAdd",
|
||||
result: -2,
|
||||
calculation: "3-5",
|
||||
_id: Random.id(),
|
||||
},{
|
||||
name: "Some Conditional",
|
||||
operation: "conditional",
|
||||
calculation: "+8 Only when asleep",
|
||||
enabled: true,
|
||||
_id: Random.id(),
|
||||
},
|
||||
]
|
||||
}, {
|
||||
name: "Dexterity",
|
||||
value: 18,
|
||||
mod: 4,
|
||||
}, {
|
||||
name: "Constitution",
|
||||
value: 12,
|
||||
mod: 1,
|
||||
}, {
|
||||
name: "Intelligence",
|
||||
value: 20,
|
||||
mod: 5,
|
||||
}, {
|
||||
name: "Wisdom",
|
||||
value: 6,
|
||||
mod: -2,
|
||||
}, {
|
||||
name: "Charisma",
|
||||
value: 28,
|
||||
mod: 9,
|
||||
},
|
||||
]
|
||||
}},
|
||||
components: {
|
||||
AbilityListTile,
|
||||
},
|
||||
methods: {
|
||||
click({ability, elementId}){
|
||||
store.commit("pushDialogStack", {
|
||||
component: "attribute-dialog",
|
||||
elementId,
|
||||
data: ability,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-container grid-list-md>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 v-for="attribute in attributes" :key="attribute.name">
|
||||
<attribute-card v-bind="attribute" @click="click"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AttributeCard from '/imports/ui/properties/components/attributes/AttributeCard.vue';
|
||||
export default {
|
||||
components: {
|
||||
AttributeCard
|
||||
},
|
||||
dontWrap: true,
|
||||
data(){ return {
|
||||
attributes: [
|
||||
{
|
||||
name: 'Speed',
|
||||
value: 30,
|
||||
}, {
|
||||
name: 'Initiative',
|
||||
value: 2,
|
||||
modifier: true,
|
||||
},{
|
||||
name: 'Proficiency Bonus',
|
||||
value: -2,
|
||||
modifier: true,
|
||||
},
|
||||
],
|
||||
}},
|
||||
methods: {
|
||||
click() {
|
||||
console.log(...arguments)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template lang="html">
|
||||
<div class="pa-1" style="background: inherit;">
|
||||
<health-bar
|
||||
:value="value"
|
||||
:max-value="maxValue"
|
||||
name="Hit Points"
|
||||
@change="healthBarChanged"
|
||||
/>
|
||||
<health-bar
|
||||
:value="50"
|
||||
:max-value="100"
|
||||
name="Temporary Hit Points"
|
||||
/>
|
||||
<health-bar
|
||||
:value="70"
|
||||
:max-value="100"
|
||||
name="Some other bar"
|
||||
@change="healthBarChanged"
|
||||
/>
|
||||
<health-bar
|
||||
:value="90"
|
||||
:max-value="100"
|
||||
name="Cow"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
|
||||
export default {
|
||||
data(){return{
|
||||
value: 100,
|
||||
maxValue: 100,
|
||||
}},
|
||||
components: {
|
||||
HealthBar,
|
||||
},
|
||||
methods: {
|
||||
healthBarChanged(e){
|
||||
let val = e.value;
|
||||
// Apply the change
|
||||
if (e.type === 'set'){
|
||||
this.value = val;
|
||||
} else if (e.type === 'increment') {
|
||||
this.value += val;
|
||||
}
|
||||
// Clamp the value
|
||||
if (this.value < 0){
|
||||
this.value = 0;
|
||||
}
|
||||
if (this.value > this.maxValue){
|
||||
this.value = this.maxValue;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list>
|
||||
<v-subheader>Hit Dice</v-subheader>
|
||||
<template v-for="(hitDie, index) in hitDice">
|
||||
<v-divider v-if="index !== 0"/>
|
||||
<hit-dice-list-tile
|
||||
:key="hitDie.dice"
|
||||
v-bind="hitDie"
|
||||
@click="click"
|
||||
@change="e => change(hitDie, e)"
|
||||
/>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
|
||||
export default {
|
||||
data(){ return{
|
||||
hitDice: [
|
||||
{
|
||||
dice: 6,
|
||||
value: 20,
|
||||
maxValue: 20,
|
||||
conMod: 4,
|
||||
}, {
|
||||
dice: 8,
|
||||
value: 3,
|
||||
maxValue: 3,
|
||||
conMod: 4,
|
||||
}, {
|
||||
dice: 10,
|
||||
value: 3,
|
||||
maxValue: 3,
|
||||
conMod: 4,
|
||||
}, {
|
||||
dice: 12,
|
||||
value: 1,
|
||||
maxValue: 1,
|
||||
conMod: 4,
|
||||
},
|
||||
]
|
||||
}},
|
||||
components: {
|
||||
HitDiceListTile,
|
||||
},
|
||||
methods: {
|
||||
click(e){
|
||||
console.log(e);
|
||||
},
|
||||
change(hitDie, e){
|
||||
if (e.type === 'increment'){
|
||||
hitDie.value += e.value;
|
||||
if (hitDie.value > hitDie.maxValue){
|
||||
hitDie.value = hitDie.maxValue;
|
||||
} else if (hitDie.value < 0){
|
||||
hitDie.value = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template lang="html">
|
||||
<column-layout>
|
||||
<div>
|
||||
<resource-card
|
||||
data-id="abc123"
|
||||
name="Sorcery points"
|
||||
color="#f44336"
|
||||
:value="8"
|
||||
:adjustment="-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<resource-card
|
||||
data-id="abc123"
|
||||
name="Psionic point like things"
|
||||
color="#f44336"
|
||||
:value="34"
|
||||
:adjustment="-12"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<resource-card
|
||||
data-id="abc123"
|
||||
name="Rages"
|
||||
color="#f44336"
|
||||
:value="1"
|
||||
:adjustment="0"
|
||||
/>
|
||||
</div>
|
||||
</column-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResourceCard from '/imports/ui/properties/components/attributes/ResourceCard.vue';
|
||||
import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
|
||||
|
||||
export default {
|
||||
dontWrap: true,
|
||||
components: {
|
||||
ColumnLayout,
|
||||
ResourceCard,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,44 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list>
|
||||
<spell-slot-list-tile
|
||||
v-for="(slot, index) in spellSlots"
|
||||
:key="'tile ' + index"
|
||||
v-bind="slot"
|
||||
@change="e => spellSlots[index].adjustment += e.value"
|
||||
/>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SpellSlotListTile,
|
||||
},
|
||||
data(){return {
|
||||
spellSlots: [
|
||||
{
|
||||
name: "Level 1",
|
||||
value: 4,
|
||||
adjustment: -2,
|
||||
}, {
|
||||
name: "Level 1",
|
||||
value: 1,
|
||||
adjustment: 0,
|
||||
}, {
|
||||
name: "Level 2",
|
||||
value: 12,
|
||||
adjustment: -8,
|
||||
}, {
|
||||
name: "Level 3",
|
||||
value: 10,
|
||||
adjustment: -5,
|
||||
},
|
||||
],
|
||||
}}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template lang="html">
|
||||
<column-layout>
|
||||
<div
|
||||
v-for="(feature, index) in features"
|
||||
:key="index"
|
||||
>
|
||||
<feature-card
|
||||
v-bind="feature"
|
||||
/>
|
||||
</div>
|
||||
</column-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
|
||||
import FeatureCard from '/imports/ui/properties/components/features/FeatureCard.vue';
|
||||
|
||||
export default {
|
||||
dontWrap: true,
|
||||
components: {
|
||||
ColumnLayout,
|
||||
FeatureCard,
|
||||
},
|
||||
data(){return {
|
||||
features: [
|
||||
{
|
||||
name: 'Feature 1',
|
||||
enabled: true,
|
||||
alwaysEnabled: true,
|
||||
description: `
|
||||
|
||||
blah blah, with
|
||||
|
||||
spacing
|
||||
`,
|
||||
color: '#f44336',
|
||||
}, {
|
||||
name: 'Feature 2',
|
||||
enabled: false,
|
||||
alwaysEnabled: false,
|
||||
description: `Short Description`,
|
||||
uses: 5,
|
||||
used: 2,
|
||||
},
|
||||
],
|
||||
}},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css' scoped>
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template lang="html">
|
||||
<v-list>
|
||||
<skill-list-tile
|
||||
v-for="skill in skills"
|
||||
:key="skill.name"
|
||||
v-bind="skill"
|
||||
/>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SkillListTile from '/imports/ui/properties/components/skills/SkillListTile.vue';
|
||||
export default {
|
||||
data(){return {
|
||||
skills: [
|
||||
{
|
||||
name: 'Animal Handling',
|
||||
proficiency: 1,
|
||||
value: 4,
|
||||
}, {
|
||||
name: 'Deception',
|
||||
proficiency: 0,
|
||||
value: -0,
|
||||
advantage: 0,
|
||||
}, {
|
||||
name: 'Intimidation',
|
||||
proficiency: 2,
|
||||
value: 6,
|
||||
advantage: 1,
|
||||
}, {
|
||||
name: 'Insight',
|
||||
proficiency: 0.5,
|
||||
value: -2,
|
||||
advantage: -1,
|
||||
}, {
|
||||
name: 'History',
|
||||
conditionalBenefits: 1,
|
||||
fail: 1,
|
||||
advantage: -1,
|
||||
}
|
||||
]
|
||||
}},
|
||||
components: {
|
||||
SkillListTile,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user