Added documentation UI and began documenting props

app/imports/ui/dialogStack/HelpDialog.vue

@@ -0,0 +1,107 @@
+<template lang="html">
+  <dialog-base>
+    <v-icon
+      slot="toolbar"
+      class="mr-2"
+    >
+      mdi-help
+    </v-icon>
+    <v-toolbar-title slot="toolbar">
+      Help: {{ title }}
+    </v-toolbar-title>
+    <div>
+      <v-progress-circular
+        v-if="!doc && !$subReady.docs"
+        indeterminate
+        color="primary"
+        size="32"
+      />
+      <div v-else-if="!doc">
+        Help document not found for {{ title }}
+      </div>
+      <markdown-text
+        v-else
+        :markdown="doc"
+        @click="linkClick"
+      />
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      text
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Close
+    </v-btn>
+  </dialog-base>
+</template>
+
+<script lang="js">
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import { propsByDocsPath } from '/imports/constants/PROPERTIES.js';
+import MarkdownText from '/imports/ui/components/MarkdownText.vue';
+import Docs from '/imports/api/docs/Docs.js';
+
+export default {
+	components: {
+    DialogBase,
+    MarkdownText,
+	},
+	props: {
+    path: {
+      type: String,
+      required: true,
+    }
+	},
+  computed: {
+    prop() {
+      return propsByDocsPath.get(this.path);
+    },
+    title() {
+      if (this.prop) {
+        return this.prop.name;
+      } else {
+        const titleCase = this.path.replace(
+          /(\w*)(\W+)/g,
+          function(txt, word) {
+            return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase() + ' ';
+          }
+        );
+        return titleCase || 'Character Sheet';
+      }
+    }
+  },
+  meteor: {
+    $subscribe: {
+      'docs'(){
+        return [this.path];
+      },
+    },
+    doc() {
+      const doc = Docs.findOne(this.path);
+      return doc && doc.text;
+    },
+  },
+  methods: {
+    linkClick(e) {
+      const target = e.target || e.srcElement;
+      const href = target && target.href;
+      if (!href) return;
+      const path = href.split('/docs/')[1];
+      if (!path) return;
+      e.preventDefault();
+      target.dataset.id = path;
+      this.$store.commit('pushDialogStack', {
+        component: 'help-dialog',
+        elementId: path,
+        data: {
+          path,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="css" scoped>
+</style>