Merge pull request #36 from macartur/update_docs

[docs] Updating documentation

docs/docgen.js

@@ -80,8 +80,12 @@ function write_parameters(component){
     var defaultValue = ""
     if(prop.hasOwnProperty("defaultValue"))
       defaultValue = prop.defaultValue.value
-    var description = prop.description
-    content.push([name, type, required, defaultValue, description])
+    var descriptions = prop.description.split('\n')
+    content.push([name, type, required, defaultValue, descriptions[0].trim()])
+    for(d in descriptions){
+      if (d == 0) continue
+      content.push(['', '', '', '', descriptions[d].trim()])
+    }
   }
   text += create_rst_table(headers, content)
   return text
@@ -101,7 +105,12 @@ function write_methods(component){
     var content = []
     for(l in method.params){
       var params = method.params[l]
-      content.push([params.name, params.type.name, params.description])
+      descriptions = params.description.split('\n')
+      content.push([params.name, params.type.name, descriptions[0].trim()])
+      for(d in descriptions){
+        if(d == 0) continue
+        content.push(['', '', descriptions[d].trim()])
+      }
     }
     if (content.length > 0){
       text += "**Parameters**\n\n"

docs/source/create_a_napp_with_ui.rst

@@ -83,7 +83,7 @@ Below a template of kytos component is displayed.
 
    <template>
     <!-- This template tag is optional -->
-    <div class="k-menu-item"  icon="my_icon" tooltip="Sample Tooltip">
+    <div class="k-menu-item"  icon="desktop" tooltip="Sample Tooltip">
        <!-- You could put yours kytos components here -->
     </div>
    </template>
@@ -127,18 +127,21 @@ and display that into the component.
 .. code-block:: html
 
     <template>
-     <k-context-panel v-if="expanded">
-      <k-accordion >
-        <k-accordion-item title="Installed NApps">
-          <k-property-panel>
-            <k-property-panel-item v-if="napps"
-              v-for="napp in this.napps" :key="napp.name" :name="napp.name" :value="napp.version">
-            </k-property-panel-item>
-          </k-property-panel>
-        </k-accordion-item>
-      </k-accordion>
-     </k-context-panel>
+     <div class="k-menu-item" icon="cube" tooltip="Napp Status">
+      <k-context-panel>
+       <k-accordion >
+         <k-accordion-item title="Installed NApps">
+           <k-property-panel>
+             <k-property-panel-item v-if="napps"
+               v-for="napp in this.napps" :key="napp.name" :name="napp.name" :value="napp.version">
+             </k-property-panel-item>
+           </k-property-panel>
+         </k-accordion-item>
+       </k-accordion>
+      </k-context-panel>
+     </div>
     </template>
+
     <script>
     module.exports = {
       methods: {

src/components/kytos/accordion/AccordionItem.vue

@@ -24,6 +24,9 @@ export default {
   name: 'k-accordion-item',
   mixins: [KytosBaseWithIcon],
   props:{
+    /**
+    * Boolean value to represent whether the accordion item is checked.
+    */
     checked: {
       type: Boolean,
       default: true

src/components/kytos/base/KytosBaseWithIcon.js

@@ -12,7 +12,7 @@ export default {
   mixins: [KytosBase],
   props: {
     /**
-     * An Icon string
+     * An Icon string representing a awesome icon.
      */
     icon: {
       type: String,

src/components/kytos/inputs/Checkbox.vue

@@ -23,16 +23,28 @@ export default {
   name: 'k-checkbox',
   mixins: [KytosBaseWithIcon],
   props: {
+      /**
+       * Model store the checked values.
+       */
       model: {
         type: Array,
       },
+      /**
+       * The value to checkbox button.
+       */
       value: {
         default: 0
       },
+      /**
+       * Initial value to checkbox, when true the checkbox will be checked, otherwise unchecked.
+       */
       checked: {
         type: Boolean,
         default: false
       },
+      /**
+       * Optinal action called after check a checkbox button.
+       */
       action: {
         type: Function,
         default: function(value) { return }

src/components/kytos/inputs/Dropdown.vue

@@ -25,18 +25,31 @@ export default {
   name: 'k-dropdown',
   mixins: [KytosBaseWithIcon],
   props: {
+    /**
+     * Property with the selected option.
+     */
     value:{
       type: String,
       default: ""
     },
+    /**
+     * A collection with all options that could be selected.
+     */
     options: {
       type: Array,
       required: true
     },
+    /**
+     * An event triggered when the dropdown change, this event should have the
+     * following content: {**name**: 'event_name', **content**: {} }
+     */
     event: {
       type: Object,
       default: undefined
     },
+    /**
+     * Optinal action called after select a dropdown option.
+     */
     action: {
       type: Function,
       default: function (value) { return }
@@ -48,12 +61,6 @@ export default {
     }
   },
   methods: {
-    /**
-    * Emit an event when the dropdown is changed
-    *
-    * @event On kytos dropdown change
-    * @type {object}
-    */
     emitEvent () {
       if (this.event !== undefined){
         let content = this.event.content

src/components/kytos/inputs/Input.vue

@@ -23,8 +23,8 @@ export default {
   mixins: [KytosBaseWithIcon],
   props: {
    /**
-   * Input Current value
-   */
+    * The value to input button.
+    */
    value: {
       type: String,
       default: ""

src/components/kytos/inputs/Slider.vue

@@ -20,22 +20,37 @@ export default {
   name: 'k-slider',
   mixins: [KytosBaseWithIcon],
   props: {
+    /**
+     * Initial value assigned to slider input.
+     */
     initialValue: {
       type: Number,
       default: 0
     },
+    /**
+     * Optinal action called after change the range of slider input.
+     */
     action: {
       type: Function,
       default: function (val) { return }
     },
+    /**
+     * Minimum value assigned to slider input.
+     */
     min: {
       type: Number,
       default: 0
     },
+    /**
+     * Maximum value assigned to slider input.
+     */
     max: {
       type: Number,
       default: 100
     },
+    /**
+     * The minimum change when the slider increase or decrease.
+     */
     step: {
       type: Number,
       default: 1

src/components/kytos/inputs/Textarea.vue

@@ -18,18 +18,30 @@ export default {
   name: 'k-textarea',
   mixins: [KytosBaseWithIcon],
   props: {
+   /**
+    * The value text used in TextArea.
+    */
    value: {
       type: String
     },
    modelValue: {
       default: ""
     },
+   /**
+    * A tooltip displayed in the text-area
+    */
    tooltip: {
       type: String
     },
+   /**
+    * String displayed when the text-area is empty.
+    */
    placeholder: {
       type: String
     },
+   /**
+    * Optimal action called after textarea changes.
+    */
    action: {
       type: Function,
       default: function(value) {return}

src/components/kytos/inputs/buttons/ButtonGroup.vue

@@ -26,7 +26,6 @@ export default {
   created: function() {
       this.buttons = this.$children;
   },
-
 }
 </script>
 

src/components/kytos/logging/Logging.vue

@@ -35,6 +35,9 @@ export default {
   name: 'k-logging',
   mixins: [KytosBaseWithIcon, LoggingUtils],
   methods: {
+    /**
+     * Method called to change the log level.
+     */
     select: function(selected){
       for (let log of this.logs){
         if (selected == 'all')
@@ -45,9 +48,15 @@ export default {
           log.display = false
       }
     },
+    /**
+     * Method to clear all logs stored.
+     */
     clear: function () {
       this.logs = []
     },
+    /**
+     * Method to start and stop store the logs from socked channel.
+     */
     play_pause(){
       if(this.playing == "play"){
         this.join_channel('log')
@@ -57,18 +66,24 @@ export default {
         this.playing = "play"
       }
     },
+    /**
+     * Change the logs colors.
+     */
     change_colors(){
       this.colors = (this.colors == "colors")? "no_colors": "colors"
     },
-   highlight: function(){
-     var logs = $('.k-logging-content div')
-     for (let log of logs){
-      if (log.innerText.includes(this.highlight_string) > 0){
-        var pattern = new RegExp(this.highlight_string, 'ig')
-        log.innerHTML = log.innerText.replace( pattern,"<span class='highlight'>"+this.highlight_string+"</span>")
+    /**
+     * Highlight the word searched.
+     */
+    highlight: function(){
+      var logs = $('.k-logging-content div')
+      for (let log of logs){
+       if (log.innerText.includes(this.highlight_string) > 0){
+         var pattern = new RegExp(this.highlight_string, 'ig')
+         log.innerHTML = log.innerText.replace( pattern,"<span class='highlight'>"+this.highlight_string+"</span>")
+       }
       }
-     }
-   }
+    }
   },
   mounted(){
     this.channels.add('log')

src/components/kytos/map/Map.vue

@@ -27,6 +27,12 @@ export default {
   },
   methods: {
     setListeners () {
+      /**
+       * Change the map opacity based on number value.
+       *
+       * @event change-map-opacity
+       * @type {Number} The Opacity number
+       */
       this.$kytos.$on("change-map-opacity", this.changeMapOpacity);
     },
     changeMapOpacity (value) {

src/components/kytos/misc/ActionMenu.vue

@@ -39,45 +39,37 @@ export default {
     }
   },
   methods: {
-    /**
-    * Update the search value, this methos is called when the search input is changed.
-    * @params {string} query Text that will be used to filter de action itens
-    */
     searchValue(query){
       this.search = query
     },
-    /**
-    * Toggle visibility of action menu.
-    */
     toggle() {
        this.show = !this.show
     },
-    /**
-    * Method to change the visibility of action menu to invisible.
-    */
     hide() {
        this.show = false
     },
-    /**
-    * Send to info panel the content to be displayed and hide the action menu.
-    */
     show_info_panel(item) {
       item.action()
       this.hide()
     },
     /**
-    * Method to add new action menu item
-    * @params {object} options Object with the params [name, author, shortkey, content]
-    */
+     * Method to add new action menu item
+     *
+     * @public
+     * @param {object} options An object with the params [name, author, shortkey, content]
+     */
     add_action_menu_item(options){
       var found = false
       for(var i in this.items){if(options.name == this.items[i].name) found = true}
       if(found == false){ this.items.push(options) }
     },
-    /**
-    * Method to register all listeners used by this component.
-    */
     register_listeners(){
+      /**
+       * Add a new action item in the k-action-menu.
+       *
+       * @event addActionMenuItem
+       * @type {object}
+       */
       this.$kytos.$on('addActionMenuItem', this.add_action_menu_item)
     },
   },