docs: Updated Components Documentation

Closes CM-188

docs/components/AttributeRules.md

@@ -0,0 +1,26 @@
+# AttributeRules
+
+The component to allow to view and edit the Attributes and Rules for the States of a Context Factor
+
+## Props
+
+<!-- @vuese:AttributeRules:props:start -->
+|Name|Description|Type|Required|Default|
+|---|---|---|---|---|
+|contextFactor|gets the Context Factor|`Object`|`true`|-|
+
+<!-- @vuese:AttributeRules:props:end -->
+
+
+## Methods
+
+<!-- @vuese:AttributeRules:methods:start -->
+|Method|Description|Parameters|
+|---|---|---|
+|convertToTableData|Converts the context rules to a representation that can be used in the table|-|
+|convertFromTableData|Converts the context rules table representation to a string that can be stored|-|
+|reRender|Triggers a new render of the component|-|
+
+<!-- @vuese:AttributeRules:methods:end -->
+
+

docs/components/ExtensionAreaEditDialog.md

@@ -0,0 +1,4 @@
+# ExtensionAreaEditDialog
+
+A Dialog to edit an Extension Area
+

docs/components/InjectionMapping.md

@@ -0,0 +1,14 @@
+# InjectionMapping
+
+A Component to edit an Injection Mapping
+
+## Props
+
+<!-- @vuese:InjectionMapping:props:start -->
+|Name|Description|Type|Required|Default|
+|---|---|---|---|---|
+|injectionMapping|the Injection Mapping|`Object`|`true`|-|
+
+<!-- @vuese:InjectionMapping:props:end -->
+
+

docs/components/ProcessPreview.md

@@ -0,0 +1,14 @@
+# ProcessPreview
+
+A Component to preview the svg of a process
+
+## Props
+
+<!-- @vuese:ProcessPreview:props:start -->
+|Name|Description|Type|Required|Default|
+|---|---|---|---|---|
+|process|The Process object|`Object`|`true`|-|
+
+<!-- @vuese:ProcessPreview:props:end -->
+
+

docs/components/RulesCell.md

@@ -0,0 +1,25 @@
+# RulesCell
+
+A Cell which allows to edit the Attribute Cell of the Rules in the Context Factor
+
+## Props
+
+<!-- @vuese:RulesCell:props:start -->
+|Name|Description|Type|Required|Default|
+|---|---|---|---|---|
+|type|The type of the input field|`'Number'` / `'Boolean'` / `'String'`|`true`|-|
+|value|The value of the input field|`String`|`false`|-|
+
+<!-- @vuese:RulesCell:props:end -->
+
+
+## Events
+
+<!-- @vuese:RulesCell:events:start -->
+|Event Name|Description|Parameters|
+|---|---|---|
+|change|Emitted on change of the value|The updated value|
+
+<!-- @vuese:RulesCell:events:end -->
+
+

docs/index.html

@@ -12,7 +12,7 @@
     <script>
       new Docute({
         target: '#docute',
-        sidebar: JSON.parse('[{&#34;title&#34;:&#34;Components&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;ContextType&#34;,&#34;link&#34;:&#34;/components/ContextType&#34;},{&#34;title&#34;:&#34;InputType&#34;,&#34;link&#34;:&#34;/components/InputType&#34;},{&#34;title&#34;:&#34;Navigation&#34;,&#34;link&#34;:&#34;/components/Navigation&#34;},{&#34;title&#34;:&#34;Tag&#34;,&#34;link&#34;:&#34;/components/Tag&#34;},{&#34;title&#34;:&#34;TagEditor&#34;,&#34;link&#34;:&#34;/components/TagEditor&#34;},{&#34;title&#34;:&#34;InputEdit&#34;,&#34;link&#34;:&#34;/components/InputEdit&#34;},{&#34;title&#34;:&#34;ContextSituationRules&#34;,&#34;link&#34;:&#34;/components/ContextSituationRules&#34;},{&#34;title&#34;:&#34;ProcessInfoForm&#34;,&#34;link&#34;:&#34;/components/ProcessInfoForm&#34;},{&#34;title&#34;:&#34;ProcessModeler&#34;,&#34;link&#34;:&#34;/components/ProcessModeler&#34;},{&#34;title&#34;:&#34;ContextTypeSettings&#34;,&#34;link&#34;:&#34;/components/ContextTypeSettings&#34;},{&#34;title&#34;:&#34;FAIconPicker&#34;,&#34;link&#34;:&#34;/components/FAIconPicker&#34;},{&#34;title&#34;:&#34;GraphVisualization&#34;,&#34;link&#34;:&#34;/components/GraphVisualization&#34;},{&#34;title&#34;:&#34;ProcessModelerSettings&#34;,&#34;link&#34;:&#34;/components/ProcessModelerSettings&#34;},{&#34;title&#34;:&#34;Footer&#34;,&#34;link&#34;:&#34;/components/Footer&#34;},{&#34;title&#34;:&#34;TagSettings&#34;,&#34;link&#34;:&#34;/components/TagSettings&#34;},{&#34;title&#34;:&#34;ContextSituationCard&#34;,&#34;link&#34;:&#34;/components/ContextSituationCard&#34;}]},{&#34;title&#34;:&#34;Dialogs&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;ContextFactorEditDialog&#34;,&#34;link&#34;:&#34;/components/ContextFactorEditDialog&#34;},{&#34;title&#34;:&#34;ProcessPreviewDialog&#34;,&#34;link&#34;:&#34;/components/ProcessPreviewDialog&#34;}]},{&#34;title&#34;:&#34;Layouts&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;DefaultLayout&#34;,&#34;link&#34;:&#34;/components/DefaultLayout&#34;},{&#34;title&#34;:&#34;EmptyRouterViewLayout&#34;,&#34;link&#34;:&#34;/components/EmptyRouterViewLayout&#34;}]},{&#34;title&#34;:&#34;Pages&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;AboutPage&#34;,&#34;link&#34;:&#34;/components/AboutPage&#34;},{&#34;title&#34;:&#34;ContextFactorsPage&#34;,&#34;link&#34;:&#34;/components/ContextFactorsPage&#34;},{&#34;title&#34;:&#34;ContextSituationsPage&#34;,&#34;link&#34;:&#34;/components/ContextSituationsPage&#34;},{&#34;title&#34;:&#34;HomePage&#34;,&#34;link&#34;:&#34;/components/HomePage&#34;},{&#34;title&#34;:&#34;ProcessRepositoryPage&#34;,&#34;link&#34;:&#34;/components/ProcessRepositoryPage&#34;},{&#34;title&#34;:&#34;SettingsPage&#34;,&#34;link&#34;:&#34;/components/SettingsPage&#34;},{&#34;title&#34;:&#34;EditProcessPage&#34;,&#34;link&#34;:&#34;/components/EditProcessPage&#34;}]}]'.replace(/\&\#34\;/g, '"'))
+        sidebar: JSON.parse('[{&#34;title&#34;:&#34;Components&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;ContextType&#34;,&#34;link&#34;:&#34;/components/ContextType&#34;},{&#34;title&#34;:&#34;Navigation&#34;,&#34;link&#34;:&#34;/components/Navigation&#34;},{&#34;title&#34;:&#34;ProcessPreview&#34;,&#34;link&#34;:&#34;/components/ProcessPreview&#34;},{&#34;title&#34;:&#34;Tag&#34;,&#34;link&#34;:&#34;/components/Tag&#34;},{&#34;title&#34;:&#34;TagEditor&#34;,&#34;link&#34;:&#34;/components/TagEditor&#34;},{&#34;title&#34;:&#34;InputType&#34;,&#34;link&#34;:&#34;/components/InputType&#34;},{&#34;title&#34;:&#34;ContextSituationRules&#34;,&#34;link&#34;:&#34;/components/ContextSituationRules&#34;},{&#34;title&#34;:&#34;AttributeRules&#34;,&#34;link&#34;:&#34;/components/AttributeRules&#34;},{&#34;title&#34;:&#34;RulesCell&#34;,&#34;link&#34;:&#34;/components/RulesCell&#34;},{&#34;title&#34;:&#34;ProcessInfoForm&#34;,&#34;link&#34;:&#34;/components/ProcessInfoForm&#34;},{&#34;title&#34;:&#34;ProcessModeler&#34;,&#34;link&#34;:&#34;/components/ProcessModeler&#34;},{&#34;title&#34;:&#34;InputEdit&#34;,&#34;link&#34;:&#34;/components/InputEdit&#34;},{&#34;title&#34;:&#34;ContextTypeSettings&#34;,&#34;link&#34;:&#34;/components/ContextTypeSettings&#34;},{&#34;title&#34;:&#34;InjectionMapping&#34;,&#34;link&#34;:&#34;/components/InjectionMapping&#34;},{&#34;title&#34;:&#34;FAIconPicker&#34;,&#34;link&#34;:&#34;/components/FAIconPicker&#34;},{&#34;title&#34;:&#34;GraphVisualization&#34;,&#34;link&#34;:&#34;/components/GraphVisualization&#34;},{&#34;title&#34;:&#34;ProcessModelerSettings&#34;,&#34;link&#34;:&#34;/components/ProcessModelerSettings&#34;},{&#34;title&#34;:&#34;Footer&#34;,&#34;link&#34;:&#34;/components/Footer&#34;},{&#34;title&#34;:&#34;TagSettings&#34;,&#34;link&#34;:&#34;/components/TagSettings&#34;},{&#34;title&#34;:&#34;ContextSituationCard&#34;,&#34;link&#34;:&#34;/components/ContextSituationCard&#34;}]},{&#34;title&#34;:&#34;Dialogs&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;ContextFactorEditDialog&#34;,&#34;link&#34;:&#34;/components/ContextFactorEditDialog&#34;},{&#34;title&#34;:&#34;ProcessPreviewDialog&#34;,&#34;link&#34;:&#34;/components/ProcessPreviewDialog&#34;},{&#34;title&#34;:&#34;ExtensionAreaEditDialog&#34;,&#34;link&#34;:&#34;/components/ExtensionAreaEditDialog&#34;}]},{&#34;title&#34;:&#34;Layouts&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;DefaultLayout&#34;,&#34;link&#34;:&#34;/components/DefaultLayout&#34;},{&#34;title&#34;:&#34;EmptyRouterViewLayout&#34;,&#34;link&#34;:&#34;/components/EmptyRouterViewLayout&#34;}]},{&#34;title&#34;:&#34;Pages&#34;,&#34;links&#34;:[{&#34;title&#34;:&#34;AboutPage&#34;,&#34;link&#34;:&#34;/components/AboutPage&#34;},{&#34;title&#34;:&#34;ContextFactorsPage&#34;,&#34;link&#34;:&#34;/components/ContextFactorsPage&#34;},{&#34;title&#34;:&#34;ContextSituationsPage&#34;,&#34;link&#34;:&#34;/components/ContextSituationsPage&#34;},{&#34;title&#34;:&#34;HomePage&#34;,&#34;link&#34;:&#34;/components/HomePage&#34;},{&#34;title&#34;:&#34;ProcessRepositoryPage&#34;,&#34;link&#34;:&#34;/components/ProcessRepositoryPage&#34;},{&#34;title&#34;:&#34;SettingsPage&#34;,&#34;link&#34;:&#34;/components/SettingsPage&#34;},{&#34;title&#34;:&#34;EditProcessPage&#34;,&#34;link&#34;:&#34;/components/EditProcessPage&#34;}]}]'.replace(/\&\#34\;/g, '"'))
       })
     </script>
   </body>

src/components/context-factor/AttributeRules.vue

@@ -76,7 +76,7 @@ import InputEdit from '@/components/InputEdit.vue'
 
 /*
  * @vuese
- * @group Components/Context-Factor
+ * @group Components
  *
  * The component to allow to view and edit the Attributes and Rules for the States of a Context Factor
  */
@@ -134,6 +134,8 @@ export default {
       })
     },
 
+    // @vuese
+    // Converts the context rules to a representation that can be used in the table
     convertToTableData() {
       // on tab click
       if (this.contextFactor.contextRules !== undefined) {
@@ -169,6 +171,8 @@ export default {
       return lca > lcb ? 1 : (lca < lcb ? -1 : 0)
     },
 
+    // @vuese
+    // Converts the context rules table representation to a string that can be stored
     convertFromTableData() {
       // on save and tab click
       let cRules = []
@@ -255,6 +259,8 @@ export default {
       })
     },
 
+    // @vuese
+    // Triggers a new render of the component
     reRender() {
       // needed to ensure that data shown is updated
       this.show = false

src/components/context-factor/RulesCell.vue

@@ -33,12 +33,11 @@
 </template>
 
 <script>
-/* ============
- * RulesCell
- * ============
+/*
+ * @vuese
+ * @group Components
  *
  * A Cell which allows to edit the Attribute Cell of the Rules in the Context Factor
- *
  */
 export default {
   name: 'RulesCell',
@@ -48,11 +47,13 @@ export default {
   },
 
   props: {
-    // The Value of the input field
+    // The type of the input field
     type: {
+      // `'Number'` / `'Boolean'` / `'String'`
       type: String,
       required: true
     },
+    // The value of the input field
     value: {
       type: String
     }
@@ -149,6 +150,8 @@ export default {
     updateValue(selected) {
       // check if boolean input value is none to remove the text and attribute
       if (selected === this.$t('context_factor.none')) this.data.text = ''
+      // Emitted on change of the value
+      // @arg The updated value
       this.$emit('change', this.data.text)
     }
   },
@@ -160,6 +163,8 @@ export default {
       handler: function (newValue) {
         if (this.type === 'Boolean' && newValue !== 'TRUE' && newValue !== 'FALSE') newValue = undefined
         this.data.text = newValue
+        // Emitted on change of the value
+        // @arg The updated value
         this.$emit('change', this.data.text)
       }
     }