Moved UI to client folder to fix HMR

app/imports/client/ui/properties/treeNodeViews/AdjustmentTreeNode.vue

@@ -0,0 +1,48 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+    />
+    <div
+      class="text-no-wrap text-truncate"
+    >
+      <template v-if="model.amount && model.amount.calculation">
+        <span v-if="amount < 0">+</span>
+        {{ absoluteAmount }} {{ model.stat }}
+        <span v-if="typeof absoluteAmount === 'string' || amount >= 0">
+          damage
+        </span>
+        <span v-if="model.target === 'self'">
+          to self
+        </span>
+      </template>
+      <template v-else>
+        <span>{{ model.stat || 'Attribute' }} damage</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    amount(){
+      return this.model.amount && this.model.amount.value;
+    },
+    absoluteAmount(){
+      if (typeof this.amount === 'number'){
+        return Math.abs(this.amount);
+      } else {
+        return this.amount;
+      }
+    },
+  }
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/BranchTreeNode.vue

@@ -0,0 +1,37 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      {{ name }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    name(){
+      switch(this.model.branchType){
+        case 'if': return 'On condition';
+        case 'hit': return 'On hit';
+        case 'miss': return 'On miss';
+        case 'failedSave': return 'On failed save';
+        case 'successfulSave': return 'On save';
+        case 'eachTarget': return 'Each target';
+        case 'random': return 'Pick one at random';
+        case 'index': return 'Pick one by index';
+        default: return '';
+      }
+    }
+  }
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/ClassLevelTreeNode.vue

@@ -0,0 +1,22 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      {{ title }} {{ model.level }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue

@@ -0,0 +1,35 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <v-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    >
+      {{ icon }}
+    </v-icon>
+    <div class="text-no-wrap text-truncate">
+      {{ model.amount && model.amount.value }}
+      {{ model.damageType }}<span v-if="model.damageType !== 'healing'">&nbsp;damage</span>
+      <span v-if="model.target === 'self'">to self</span>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    icon() {
+      if (this.model.damageType === 'healing') {
+        return 'mdi-hospital-box-outline'
+      } else {
+        return getPropertyIcon('damage');
+      }
+    },
+  },
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/DefaultTreeNode.vue

@@ -0,0 +1,22 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/EffectTreeNode.vue

@@ -0,0 +1,84 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <v-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+    >
+      {{ effectIcon }}
+    </v-icon>
+    <div
+      class="text-no-wrap text-truncate"
+    >
+      <template v-if="model.name">
+        {{ model.name }}
+      </template>
+      <template v-else-if="model.targetByTags">
+        <span class="mr-1">
+          {{ displayedValue }}
+        </span>
+        <span
+          class="mr-1"
+        >{{ displayedTags }}</span>
+      </template>
+      <template v-else>
+        <span class="mr-1">
+          {{ displayedValue }}
+        </span>
+        <span
+          class="mr-1"
+        >{{ displayedStats }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import getEffectIcon from '/imports/client/ui/utility/getEffectIcon.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    resolvedValue(){
+      return (this.model.amount && this.model.amount.value) !== undefined ?
+        this.model.amount.value : this.model.amount && this.model.amount.calculation;
+    },
+    effectIcon(){
+      let value = this.resolvedValue;
+      return getEffectIcon(this.model.operation, value);
+    },
+    displayedValue(){
+      let value = this.resolvedValue;
+      switch(this.model.operation) {
+        case 'base': return value || 0;
+        case 'add': return isFinite(value) ? Math.abs(value) : value || 0;
+        case 'mul': return value;
+        case 'min': return value;
+        case 'max': return value;
+        case 'advantage': return;
+        case 'disadvantage': return;
+        case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value || 0;
+        case 'fail': return;
+        case 'conditional': return;
+        default: return undefined;
+      }
+    },
+    displayedStats(){
+      if (!this.model.stats) return 'Selected stats';
+      return this.model.stats.join(', ');
+    },
+    displayedTags(){
+      if (!this.model.targetTags) return 'Selected tags';
+      const tags = this.model.targetTags.join(', ');
+      if (!this.model.extraTags) return tags;
+      const extraTags = this.model.extraTags.map(ex => {
+        return ` ${ex.operation} ${ex.tags.join(', ')}`
+      }).join(' ');
+      return tags + extraTags;
+    }
+  }
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/ItemTreeNode.vue

@@ -0,0 +1,54 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <v-icon
+      v-if="model.equipped && !hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      small
+    >
+      mdi-account-arrow-left
+    </v-icon>
+    <div
+      class="text-no-wrap text-truncate"
+      :class="model.equipped && 'body-2'"
+    >
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+
+export default {
+  mixins: [treeNodeViewMixin],
+  computed: {
+    title(){
+      let model = this.model;
+      if (!model) return;
+      if (Number.isFinite(model.quantity) && model.quantity !== 1){
+        if (model.plural){
+          return `${model.quantity} ${model.plural}`;
+        } else if (model.name){
+          return `${model.quantity} ${model.name}`;
+        }
+      } else if (model.name) {
+        return model.name;
+      }
+      let prop = PROPERTIES[model.type]
+      return prop && prop.name;
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/client/ui/properties/treeNodeViews/ProficiencyTreeNode.vue

@@ -0,0 +1,32 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <proficiency-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+      :value="model.value"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="!model.name && model.stats && model.stats.length">
+        {{ model.stats.join(', ') }}
+      </template>
+      <template v-else>
+        {{ title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ProficiencyIcon from '/imports/client/ui/properties/shared/ProficiencyIcon.vue';
+
+export default {
+  components: {
+    ProficiencyIcon,
+  },
+  mixins: [treeNodeViewMixin]
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/ReferenceTreeNode.vue

@@ -0,0 +1,33 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <tree-node-view
+      v-if="model.cache && model.cache.node && model.cache.node.type !== 'reference'"
+      :model="model.cache.node"
+    />
+    <div
+      v-else
+      class="text-no-wrap text-truncate"
+    >
+      {{ model.cache.node && model.cache.node.name || title }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+
+export default {
+  name: 'ReferenceTreeNode',
+  mixins: [treeNodeViewMixin],
+  beforeCreate () {
+    this.$options.components.TreeNodeView = require('/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue').default
+  },
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/SavingThrowTreeNode.vue

@@ -0,0 +1,36 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <property-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="model.dc && Number.isFinite(model.dc.value)">
+        DC {{ model.dc.value }}
+      </template>
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import treeNodeViewMixin from '/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+
+export default {
+mixins: [treeNodeViewMixin],
+computed: {
+  title() {
+    let model = this.model;
+    if (!model) return;
+    if (model.name) return model.name;
+    if (model.stat) return model.stat;
+    let prop = PROPERTIES[model.type]
+    return prop && prop.name;
+    }
+  }
+}
+</script>

app/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue

@@ -0,0 +1,41 @@
+<template lang="html">
+  <component
+    :is="treeNodeView"
+    :model="model"
+    :selected="selected"
+    :class="{
+      'inactive': model.inactive,
+    }"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="js">
+import treeNodeViewIndex from '/imports/client/ui/properties/treeNodeViews/treeNodeViewIndex.js';
+
+export default {
+  name: 'TreeNodeView',
+  components: {
+    ...treeNodeViewIndex
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+    selected: Boolean,
+  },
+  computed: {
+    treeNodeView(){
+      let type = this.model.type;
+      return treeNodeViewIndex[type] || treeNodeViewIndex.default;
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+  .inactive {
+    opacity: 0.6;
+  }
+</style>

app/imports/client/ui/properties/treeNodeViews/treeNodeViewIndex.js

@@ -0,0 +1,23 @@
+import DefaultTreeNode from '/imports/client/ui/properties/treeNodeViews/DefaultTreeNode.vue';
+import AdjustmentTreeNode from '/imports/client/ui/properties/treeNodeViews/AdjustmentTreeNode.vue';
+import BranchTreeNode from '/imports/client/ui/properties/treeNodeViews/BranchTreeNode.vue';
+import ItemTreeNode from '/imports/client/ui/properties/treeNodeViews/ItemTreeNode.vue';
+import DamageTreeNode from '/imports/client/ui/properties/treeNodeViews/DamageTreeNode.vue';
+import EffectTreeNode from '/imports/client/ui/properties/treeNodeViews/EffectTreeNode.vue';
+import ClassLevelTreeNode from '/imports/client/ui/properties/treeNodeViews/ClassLevelTreeNode.vue';
+import ProficiencyTreeNode from '/imports/client/ui/properties/treeNodeViews/ProficiencyTreeNode.vue';
+import ReferenceTreeNode from '/imports/client/ui/properties/treeNodeViews/ReferenceTreeNode.vue';
+import SavingThrowTreeNode from '/imports/client/ui/properties/treeNodeViews/SavingThrowTreeNode.vue';
+
+export default {
+  default: DefaultTreeNode,
+  adjustment: AdjustmentTreeNode,
+  branch: BranchTreeNode,
+  classLevel: ClassLevelTreeNode,
+  damage: DamageTreeNode,
+  effect: EffectTreeNode,
+  item: ItemTreeNode,
+  proficiency: ProficiencyTreeNode,
+  reference: ReferenceTreeNode,
+  savingThrow: SavingThrowTreeNode,
+}

app/imports/client/ui/properties/treeNodeViews/treeNodeViewMixin.js

@@ -0,0 +1,25 @@
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
+
+export default {
+  components: {
+    PropertyIcon,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+    selected: Boolean,
+    hideIcon: Boolean,
+  },
+  computed: {
+    title(){
+      let model = this.model;
+      if (!model) return;
+      if (model.name) return model.name;
+      let prop = PROPERTIES[model.type]
+      return prop && prop.name;
+    }
+  }
+}