Attributes show their children in stats cards

app/imports/client/ui/properties/components/folders/FolderGroupCard.vue

@@ -15,7 +15,8 @@
         :model="prop"
         :data-id="prop._id"
         @click="$emit('click-property', {_id: prop._id})"
-        @sub-click="_id => $emit('sub-click', _id)"
+        @click-property="e => $emit('click-property', e)"
+        @sub-click="e => $emit('sub-click', e)"
         @remove="$emit('remove', prop._id)"
       />
     </v-card>
@@ -27,15 +28,15 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
 
 export default {
-  components: {
-    ...propComponents,
-  },
   props: {
     model: {
       type: Object,
       required: true,
     }
   },
+  beforeCreate() {
+    Object.assign(this.$options.components, propComponents);
+  },
   meteor: {
     properties() {
       const props = [];
@@ -61,7 +62,7 @@ export default {
       }, {
         sort: { order: 1 },
       }).forEach(prop => {
-        if (this.$options.components[prop.type]) {
+        if (propComponents[prop.type]) {
           props.push(prop);
         }
       });

app/imports/client/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue

@@ -1,44 +1,55 @@
 <template>
-  <div class="attribute">
+  <div>
-    <ability-list-tile
+    <div
-      v-if="model.attributeType === 'ability'"
+      class="attribute"
+      :data-id="dataId"
+    >
+      <ability-list-tile
+        v-if="model.attributeType === 'ability'"
+        :model="model"
+        @click="$emit('click')"
+      />
+      <hit-dice-list-tile
+        v-else-if="model.attributeType === 'hitDice'"
+        :model="model"
+        @click="$emit('click')"
+        @change="({ type, value }) => damageProperty({type, value: -value})"
+      />
+      <health-bar
+        v-else-if="model.attributeType === 'healthBar'"
+        :model="model"
+        @change="damageProperty"
+        @click="$emit('click')"
+      />
+      <spell-slot-list-tile
+        v-else-if="model.attributeType === 'spellSlot'"
+        :model="model"
+        @click="$emit('click')"
+      />
+      <resource-card-content
+        v-else-if="model.attributeType === 'resource'"
+        :model="model"
+        @click="$emit('click')"
+        @change="({ type, value }) => damageProperty({type, value: -value})"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+      />
+      <attribute-card-content
+        v-else-if="model.attributeType !== 'utility'"
+        class="pointer"
+        :model="model"
+        @click="$emit('click')"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+      />
+      <card-highlight :active="hover" />
+    </div>
+    <folder-group-children
       :model="model"
-      @click="$emit('click')"
+      @click-property="e => $emit('click-property', e)"
+      @sub-click="e => $emit('sub-click', e)"
+      @remove="e => $emit('remove', e)"
     />
-    <hit-dice-list-tile
-      v-else-if="model.attributeType === 'hitDice'"
-      :model="model"
-      @click="$emit('click')"
-      @change="({ type, value }) => damageProperty({type, value: -value})"
-    />
-    <health-bar
-      v-else-if="model.attributeType === 'healthBar'"
-      :model="model"
-      @change="damageProperty"
-      @click="$emit('click')"
-    />
-    <spell-slot-list-tile
-      v-else-if="model.attributeType === 'spellSlot'"
-      :model="model"
-      @click="$emit('click')"
-    />
-    <resource-card-content
-      v-else-if="model.attributeType === 'resource'"
-      :model="model"
-      @click="$emit('click')"
-      @change="({ type, value }) => damageProperty({type, value: -value})"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    />
-    <attribute-card-content
-      v-else-if="model.attributeType !== 'utility'"
-      class="pointer"
-      :model="model"
-      @click="$emit('click')"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-    />
-    <card-highlight :active="hover" />
   </div>
 </template>
 
@@ -50,6 +61,7 @@ import SpellSlotListTile from '/imports/client/ui/properties/components/attribut
 import ResourceCardContent from '/imports/client/ui/properties/components/attributes/ResourceCardContent.vue';
 import AttributeCardContent from '/imports/client/ui/properties/components/attributes/AttributeCardContent.vue';
 import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
+import FolderGroupChildren from '/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue';
 
 import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 
@@ -62,12 +74,17 @@ export default {
     ResourceCardContent,
     AttributeCardContent,
     CardHighlight,
+    FolderGroupChildren,
   },
   props: {
     model: {
       type: Object,
       required: true,
     },
+    dataId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -81,6 +98,10 @@ export default {
         value: change.value
       });
     },
+    log({_id}) {
+      console.log(...arguments)
+      this.$emit('click-property', { _id });
+    }
   }
 }
 </script>

app/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="model.name || (properties && properties.length)"
+    v-if="properties && properties.length"
   >
     <component
       :is="prop.type"
@@ -9,7 +9,8 @@
       :model="prop"
       :data-id="prop._id"
       @click="$emit('click-property', {_id: prop._id})"
-      @sub-click="_id => $emit('sub-click', _id)"
+      @click-property="(e) => $emit('click-property', e)"
+      @sub-click="(e) => $emit('sub-click', e)"
       @remove="$emit('remove', prop._id)"
     />
   </div>
@@ -20,15 +21,15 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
 
 export default {
-  components: {
-    ...propComponents,
-  },
   props: {
     model: {
       type: Object,
       required: true,
     }
   },
+  beforeCreate() {
+    Object.assign(this.$options.components, propComponents);
+  },
   meteor: {
     properties() {
       const props = [];
@@ -54,7 +55,7 @@ export default {
       }, {
         sort: { order: 1 },
       }).forEach(prop => {
-        if (this.$options.components[prop.type]) {
+        if (propComponents[prop.type]) {
           props.push(prop);
         }
       });